Multimedia

Mulok Multimedia – SMK Prakarya Internasional 1952 2011
Daftar isi

Daftar isi ...................................................................................... i

A. Konsep Dasar Grafik dan Pencitraan ................................... 1
1. Grafik Komputer ............................................................ 1
2. Pengolahan Citra ........................................................... 3
3. Operasi Pengolahan Citra .............................................. 4
B. Dasar-dasar Multimedia ...................................................... 6
1. Pendahuluan ................................................................. 7
2. Aplikasi Pendukung Multimedia .................................. 10
C. Pengenalan Adobe Photoshop .......................................... 12
1. Konsep ........................................................................ 12
2. Area Kerja.................................................................... 13
3. Kakas atau Tools Adobe Photoshop ............................. 15
D. Pengenalan dan Penggunaan Adobe Flash ........................ 34
1. Konsep ........................................................................ 34
2. Area Kerja.................................................................... 35
a. Stage .................................................................. 35

b. Tools .................................................................. 36

c. Panel .................................................................. 36

d. Property inspector.............................................. 36

Page i

e. Timeline ............................................................. 36

f. Tools Adobe Flash .............................................. 37

g. Contoh Implementasi ......................................... 39

E. Mengenal Script dalam Flash ............................................ 47
F. Pengenalan Story Board .................................................... 50
G. Daftar Pusataka ................................................................. 54
H. Penulis ..................................... Error! Bookmark not defined.

Page ii

A. Konsep Dasar Grafik dan Pencitraan

1. Grafik Komputer

Grafik memiliki pemahaman yaitu proses untuk
menciptakan suatu gambar berdasarkan deskripsi obyek
maupun latar belakang yang terkandung pada gambar tersebut
atau arti lain adalah teknik untuk membuat gambar obyek sesuai
dengan obyek tersebut di alam nyata (realism).

Grafik Komputer adalah suatu proses pembuatan,
penyimpanan dan manipulasi model dan citra. Model berasal dari
beberapa bidang seperti fisik, matematik, artistik dan bahkan
struktur abstrak. Istilah ”Grafik Komputer” ditemukan tahun 1960
oleh William Fetter dengan karya pembentukan desain model
cockpit (Boeing) dengan menggunakan pen plotter dan referensi
model tubuh manusia 3 Dimensi.

Komponen Dasar Sistem Grafik Interaktif meliputi :
– Masukan : mouse, tablet dan stylus, scanner, live video
stream, dll
– Proses dan Penyimpanan
– Keluaran : layar, printer berbasis kertas, perekam, video,
dll.
Konteks grafik memiliki pemahaman yang luas,
perkembangakan yang relatif cepat menuntut kita untuk selalu

Page 1

update dalam mengkitu setiap langkah dan perjalanan setiap
revolusi dari komputasi, dalam hal ini Grafik Multimedia
interaktif. Grafik sebagai kunci kemampuan teknologi dalam
evolusi lingkungan komputasi mulai dikenal dengan istilah
beragam, diataranya :

– Graphical User Interfaces (GUI)
– Komputasi Visual, contoh desktop publishing, visualisasi
scientific, visualisasi informasi, dsb

Kegiatan yang Terkait dengan Grafik Komputer diantaranya :
– Pemodelan geometris : menciptakan model matematika
dari objek-objek 2D dan 3D.
– Rendering : memproduksi citra yang lebih solid dari
model yang telah dibentuk.
– Animasi : Menetapkan / menampilkan kembali tingkah
laku / behavior objek bergantung waktu.

Page 2

2. Pengolahan Citra

Sedangkan, pengolahan citra memiliki makna
memperbaiki kualitas gambar, dilihat dari aspek radiometrik
(peningkatan kontras, transformasi warna, restorasi citra) dan dari
aspek geometrik (rotasi, translasi, skala, transformasi geometrik).
Citra merupakan hasil akhir dari sintesa, disain, manufaktur,
visualisasi yang menghasilkan seuah karya atau image sebagai
media baru.

Pemrosesan Citra untuk Ditampilkan di Layar Vector
memiliki tampilan sebagai berikut :

Sehingga, definisi lain dan tujuan pengolahan citra atau
Image Processing merupakan proses memperbaiki kualitas citra
agar mudah di interpretasi oleh manusia atau komputer, serta
suatu teknik pengolahan citra dengan mentrasformasikan citra
Page 3

menjadi citra lain, sebagai contoh : pemampatan citra (image
compression). Pengenalan pola adalah tahapan selanjutnya atau
analisis dari pengolahan citra, yang memiliki tujuan
mengelompokkan data numerik dan simbolik (termasuk citra)
secara otomatis oleh komputer agar suatu objek dalam citra dapat
dikenali dan diinterpreasi.

3. Operasi Pengolahan Citra

a. Perbaikan kualitas citra(image enhacement)
Bertujuan untuk memperbaiki kualitas citra dengan
memanipulasi parameter-parameter citra. Perbaikan ini
meliputi :
 Perbaikan kontras gelap/terang
 Perbaikan tepian objek (edge enhancement)
 Penajaman (sharpening)
 Pemberian warna semu(pseudocoloring)
 Penapisan derau (noise filtering)
b. Pemugaran citra(image restoration)
Bertujuan untuk menghilangkan cacat pada citra.
Perbedaannya dengan perbaikan citra : penyebab degradasi
citra diketahui. Perbaikan ini meliputi :
 Penghilangan kesamaran (deblurring)
 Penghilangan derau (noise)

Page 4

c. Pemampatan citra (image compression)
Bertujuan untuk mengolah citra direpresentasikan dalam
bentuk lebih kompak, sehingga keperluan memori lebih
sedikit namun dengan tetap mempertahankan kualitas gambar
(misal dari .BMP menjadi .JPG)
d. Segmentasi citra (image segmentation)
Bertujuan untuk memecah suatu citra ke dalam beberapa
segmen dengan suatu kriteria tertentu. Berkaitan erat dengan
pengenalan pola.
e. Pengorakan citra (image analysis)
Bertujuan untuk menghitung besaran kuantitatif dari citra
untuk menghasilkan deskripsinya. Diperlukan untuk
melokalisasi objek yang diinginkan dari sekelilingnya,
Operasi ini meliputi :
 Pendeteksian tepi objek (edge detection)
 Ekstraksi batas (boundary)
 Represenasi daerah (region)

f. Rekonstruksi citra (Image recontruction)
Bertujuan untuk membentuk ulang objek dari beberapa citra
hasil proyeksi.

Page 5

B. Dasar-dasar Multimedia

Berangkat dari sebuah pendapat yang dikemukakan oleh
Umar Hamalik (1986), Djamarah (2002) dan Sadiman, dkk
(1986), mengelompokkan media menjadi beberapa kategori
berdasarkan jenisnya, yaitu :

a. Media auditif, yaitu media yang hanya mengandalkan
kemampuan suara saja, seperti tape recorder.
b. Media visual, yaitu media yang hanya mengandalkan indra
penglihatan dalam wujud visual.
c. Media audiovisual, yaitu media yang mempunyai unsur
suara dan unsur gambar.
Jenis media ini mempunyai kemampuan yang lebih baik, dan
media ini dibagi ke dalam dua jenis, yaitu :
1. Audiovisual diam, yang menampilkan suara dan visual
diam, seperti film sound slide.
2. Audiovisual gerak, yaitu media yang dapat
menampilkan unsur suara dan gambar yang bergerak,
seperti film, video cassete dan VCD.

Page 6

1. Pendahuluan

Multimedia berasal dari bahasa latin (multi & media).
Multi artinya banyak, dan Media (medium) artinya sesuatu yang
digunakan untuk menyampaikan atau menginformasikan.
Sehingga Multimedia dapat diartikan sebagai pengguna beberapa
media yang berbeda untuk menggabungkan dan menyampaikan
informasi dalam bentuk teks, audio, grafik, animasi, dan video.
Kata multimedia memiliki runtutan yang luas,
perkembangan dari kata multimedia mengalami penambahan
makna yang digabungkan dengan suatu sistem. Sistem
mengandung arti kumpulan-kumpulan yang memiliki unsur
keterkaitan antara satu dan yang lainnya. Sehingga penggabungan
tiga kata Sistem, Multi dan Media memiliki makna lain yang bisa
diartikan sebagai suatu teknologi yang menggabungkan berbagai
sumber informasi seperti teks, grafik, bunyi, animasi, video dan
lain sebagainya, dimana informasi disampaikan oleh sistem
komputer secara interaktif.”.
Multimedia dalam konteks komputer menurut Hofstetter
2001 adalah : pemanfaatan komputer untuk membuat dan
menggabungkan teks, grafik, audio, video, dengan menggunakan
tools yang memungkinkan pemakai berinteraksi, berkreasi, dan
berkomunikasi.

Page 7

Pada saat kita bekerja pada dunia komputer grafis dan
multimedia, salah satu topic yang cukup membingungkan adalah
mengenai perbedaan atara grafik bitmap / raster dan grafik
vector. Terkadang pemikiran kita ada diposisi yang sama. Jadi
apa perbadaannya? Dibawah ini akan dijelaskan mengenai
perbedaan antara keduanya.
 Bitmap Image
Sebuah image bitmap (atau dikenal juga dengan image
“raster”), pada dasarnya mirip dengan sebuah papan catur yang
sangat besar, apabila kita memberi warna yang berbeda pada
setiap petaknya, pada akhirnya kita dapat membuat sebuah
gambar berdasarkan warna yang sudah kita tentukan tersebut.

Bisa dilihat pada kedua gambar diatas bahwa pada image
1, apabila kita mengambil sebagian kecil detail pada image
tersebut, sebenarnya yang ada di dalamnya adalah petak-petak
kecil seperti yang terdapat pada image 2. Satuan dari bitmap

Page 8

image ini ada lah DPI (Dot Per Inch). Format dari bitmap image
ini biasanya : TIFF (.tif), BMP (.bmp), PICT (.pct), GIF (.gif),
JPEG (.jpg).
 Vector Image
Vector image adalah, sebuah image / grafik dimana setiap
bentuk dan letak dari sebuah garisnya didefinisikan melalui
besaran matematis. Vector image pada dasarnya adalah
sekumpulan titik yang terhubung oleh garis-garis dari berbagai
macam bentuk, yang diisi oleh warna yang solid maupun gradasi.
Jadi, jika sebuah titik A terhubung dengan titik B oleh
garis yang membentuk sebuah bidang, dimana bentuk dari bidang
tersebut didefinisikan dengan besaran matematis. Maka, semakin
banyak titik yang terhubung, maka vektor tersebut menjadi
semakin rumit.

Format dari bitmap image ini biasanya : EPS
(Encapsulation Post Script -.eps), Adobe Illustrator (.ai), Corel
Draw (.cdr), Adobe (dulu Macromedia) Freehand (.FHx), Adobe
(dulu Macromedia) Flash (.fla).

Page 9

Sebuah kasus mengenai hubungan resolusi, dimisalkan
begini, apabila ada suatu image dalam satu satuan luas (1inch2)
dengan jumlah dit atau pixel 70 x 70 (artinya memiliki resolusi
4900 dpi) jika diperbesar menjadi 10 inch, maka jumlah pixelnya
tetap 4900 dpi. Tetapi resolusinya berubah menjadi 4900 : 10 =
490 dpi. Maka hal ini akan mengakibatkan gambar menjadi kabur
dan pecah.
Bit depth (kedalaman warna) sering disebut juga dengan
pixel depth atau color depth. Dimana bit depth menentukan berapa
banyak informasi warna yang tersedia untuk ditampilkan atau
dicetak dalam setiap pixel. Semakin besar nilainya maka akan
semakin bagus kualitas image yang dihasilkan. Namun tentunya
ukuran filenya akan semakin besar.

2. Aplikasi Pendukung Multimedia

Perkembangan teknologi pada jaman sekarang ini sudah
tidak dapat di cegah atau dihalangi lagi. Etika kedisplinan ilmu
berbasis ITC sudah berlaku bebas dan tak bisa terhalangi dengan
apapun. Animasi global, pembajakan liar dan pengendapan
prosedur serta gradasi etika sebuah konten dalam ranah
kompetensi berbasis IT sudah dimungkinkan adanya. Sehingga
wajar apabila saat ini masyarakat tradisional dan masyarakat

Page 10

modern mulai berpindah dan beralih menjadi masyarakat
Informasi.

Paradigma baru mulai muncul pada ranah teknologi komputer
berbasis multimedia. Banyak orang yang memanfaatkan aplikasi
guna memanipulasi berbagai hal sehingga terlihat menjadi
menarik, Contoh yang sering di temui adalah ketika seseorang
mengedit sebuah foto atau membuat presentasi interaktif berbasis
animasi.

Banyak aplikasi yang bermunculan dipasar multimedia, bahkan
vendor yang terdahulu sekarang mulai merapat dengan vendor
sejenis. Katakanlah Macromedia yang saat ini sudah merapat dan
menggunakan nama Adobe.

Adapun aplikasi pendukung multimedia adalah Adobe, Pinacle,
Macromedia, Corel, Microsoft, Aple dan sebagainya. Masih
banyak lagi yang sekarang beredar di pasaran IT, baik untuk
penggunaan pada mobile phone atau pun Komputer.

Dalam pembelajaran multimedia ini ada beberapa aplikasi yang
akan dikenalkan dan dipelajari selama dua semester, diantaranya :

 Adobe Photoshop
 Adobe Flash
 Pinacle
 StoryboardPRO

Page 11

 CMS Joomla, dan
 HTML Dasar
C. Pengenalan Adobe Photoshop

Image Editing merupakan sebuah istilah dalam multimedia yang
difokuskan pada manipulasi dan editing gambar, objek foto dan
view pemandangan serta yang lainnya. Selain itu, image editing
juga dapat diklasifikasikan sebagai suatu cara dalam membuat
suatu produk berbasis gambar, baik itu yang berunsur text, objek
gambar dan lain sebagainya.
Pada bagian ini, akan dibahas mengenai teknik croping, cutting,
dan editing serta bagaimana menggunakan blending option dan
fitur yang ada pada aplikasi Adobe Photoshop.
1. Konsep
Adobe Photoshop adalah sebuah program pengolah image
(image processor) untuk image bitmap dari Adobe System
Incorporated ( http://www.adobe.com).

Adobe Photoshop, atau biasa disebut Photoshop, adalah
perangkat lunak editor citra buatan Adobe System yang
dikhususkan untuk pengeditan foto/gambar dan pembuatan efek.
Perangkat lunak ini banyak digunakan oleh fotografer digital dan
perusahaan iklan sehingga dianggap sebagai pemimpin pasar
(market leader) untuk perangkat lunak pengolah gambar, dan,
bersama Adobe Acrobat, dianggap sebagai produk terbaik yang

Page 12

pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasi
ini disebut dengan nama Photoshop CS, versi sembilan disebut
Photoshop CS2 dan demikian seterusnya Adobe photoshop
sebagai salah satu tools yang sangat baik dan telah banyak
digunakan oleh banyak orang mulai dari pemula sampai tingkat
professional. Photoshop sangat baik untuk membantu dalam
bidang percetakan, internet maupaun elektronik.

Photoshop juga memiliki hubungan erat dengan beberapa
perangkat lunak penyunting media, animasi, dan authoring
buatan-Adobe lainnya. File format asli Photoshop, .PSD, dapat
diekspor ke dan dari Adobe ImageReady. Adobe Illustrator,
Adobe Premiere Pro dan After Effects.

2. Area Kerja

Page 13

Area kerja photoshop terbagi menjadi beberapa bagian
menu yaitu: Menu Bar, Option Bar, Toolbox, Pallet Well, dan
Pallete.

a. Menu bar: berisi menu-menu yang dapat membantu
memudahkan dalam bekerja dan terorganisir sesuai
dengan topik yang saat itu digunakan. Sebagai contoh,
menu Layers berisi menu-menu yang berhubungan dengan
Pallete Layers.
b. Option bar: berisi informasi tentang tool yang saat itu
digunakan.
c. Toolbox: perangkat utama yang digunakan untuk
membuat, mengedit gambar dan teks.
d. Pallete well: membantu dalam menata beberapa palet yang
digunakan.

e. Pallete: membantu memonitor dan mengedit gambar
(image).

Page 14

3. Kakas atau Tools Adobe Photoshop

Seperti yang dijelaskan pada bagian atas bahwa tools atau
yang dikenal dengan toolsbox merupakan bagian utama pada
perangkat photoshop. Toolsbox memiliki peran penting dalam
proses editing, toolsbox dibagi menjadi beberapa bagian,
diantaranya :

Page 15

Nama Tools Gambar/Ikon Penjelasan
Marquee Merupakan tool
Tool seleksi. Dibagi
menjadi beberapa
sub tools diantaranya
;
Rectangle Marquee
Tool: untuk membuat
seleksi berbentuk
persegi.
Elliptical Marquee
Tool: untuk membuat
seleksi berbentuk
lingkaran.
Single Row Marquee
Tool: untuk membuat
seleksi berbentuk
garis horisontal.
Single Column
Marquee Tool: untuk
membuat seleksi
berbentuk
garis vertikal.

Page 16

Move Tool Untuk memindahkan
objek (teks maupun
grafik).
Lasso Tool Tool seleksi secara
bebas. Dibagi
menjadi beberapa
sub tools,
diantaranya :
Lasso Tool: untuk
membuat seleksi
secara bebas
(handsfree)
Polygon Lasso Tool:
untuk membuat
seleksi
Magnetic Lasso Tool:
untuk membuat
seleksi bebas
berdasarkan
tingkat kesamaan
warna.

Page 17

Magic Untuk membuat
Wand Tool seleksi berdasarkan
kesamaan warna.
Crop Tool Untuk membuang
bagian dari image
canvas yang tidak
digunakan.
Slice Tool Untuk membuat
irisan pada image
menjadi beberapa
bagaian secara
otomatis.
Slice Select Untuk memilih salah
Tool satu bagian yang
telah dibuat
menggunakan Slice
Tool.

Page 18

Healing Untuk memperbaiki
Brush Tool bagian image yang
cacat, kotor, maupun
tergores dengan
warna lain dengan
cara menduplikasi
dari warna atau pola
pada bagian lain.
Pacth Tool Untuk memperbaiki
bagian image yang
cacat, kotor, maupun
tergores dengan
warna lain dengan
cara memilih sumber
arna/pola pada
bagian lain.
Spot Tool ini dapat
Healing memindahkan
Brush Tool noda/cacat secara
cepat dan
ketidaksempurnaan
lain pada gambar.

Page 19

Red Eye Seperti namanya,
Tool tool in dapat
menghilangkan efek
Red eye pada foto
Anda.
Brush Tool Untuk membuat
goresan kuas ketika
mewarnai objek.
Pencil Tool Untuk membuat garis
secara bebas dengan
goresan yang
menyerupai sebuah
pensil.
Clone Untuk menggambar
Stamp Tool dari sampel pada
sebuah image.
Pattern Untuk menggambar
Stamp Tool dari bagian atau pola
yang telah
diambil.
History Untuk mengembalikan
Brush Tool objek pada posisi
history tertentu.

Page 20

Art History Untuk mewarnai
Brush Tool objek berdasarkan
history tertentu.
Eraser Tool Untuk menghapus
objek dan dapat
mengembalikan
objek yang sudah
terhapus ke posisi
semula.
Background Untuk menghapus
Eraser Tool latar belakang
(background) agar
menjadi trasparan.
Magic Untuk menghapus
Eraser Tool warna yang solid
dengan cara mengklik
sekali pada bagian
tertentu.
Gradient Untuk mewarnai objek

Tool dengan warna gradasi
dengan tipe
linier, angle, reflected,
dan diamond.

Page 21

Paint Untuk mengisi objek
Bucket Tool dengan warna
foreground yang
telah
dipilih.
Blur Tool Untuk memperhalus
bagian tepi sebuah
image. Teknik ini juga
sering digunakan
untuk memperhalus
bagian-bagian
tertentu, misalnya
memperhalus bagian
wajah atau memper-
halus pixel yang
terlalu besar.
Sharpen Untuk mempertajam
Tool bagian tepi sebuah
image.
Smudge Untuk membuat efek
Tool sentuhan jari pada
cat basah.

Page 22

Dodge Tool Untuk memberikan
warna terang pada
daerah tertentu.
Burn Tool Untuk memberikan
warna yang gelap
pada daerah tertentu
dengan goresan
brush.
Sponge Untuk meningkatkan
Tool saturation pada
objek.
Path Untuk memilih dan
Seletion mengedit path yang
Tool dinginkan.
Type Tool Untuk mengetik teks
pada sebuah image
secara vertikal
maupun horizontal.
Type Mask Untuk membuat
Tool seleksi berbentuk
huruf.

Page 23

Pen Tool Untuk membuat path
yang dapat
digunakan sebagai
seleksi maupun alat
gambar.
Custom Untuk membuat
Shape Tool, bentuk shape
tertentu dari daftar
yang ditampilkan.
Annotation Untuk membuat
tool catatan dan suara
yang dapat
disertakan dalam
image.
Eyedropper Untuk mengambil
Tool sampel warna dalam
sebuah image.
Hand Tool Untuk memindahkan
sebuah gambar
bersama-sama dengan
windows.
Zoom Tool Untuk mengatur
tampilan (perbesar atau
perkecil) image.

Page 24

Foreground ntuk menentukan
& warna foreground
Background dan background.
Color
Sebuah pepatah mengatakan “Desain adalah Raja, Ide
adalah Ratu dan alat hanyalah pelayan”. Jadi bayangkan dan
fikirkan sebuah ide untuk melatih diri kita dalam berkreasi.
Contoh mengganti Background. Dengan hasil akhir sbb :

 Langkah 1 : Proses Opening dan Pemotongan Objek.

 Buka aplikasi Adobe Photoshop.
 Kemudian Buka Foto yang akan di Edit dan Background
yang akan ditambahkan.

Page 25


Proses opening objek.

 Lalu langkah berikutnya adalah Buat Kanvas Baru
dengan ukuran yang sesuai. Sehingga pada jendela adobe
photoshop akan tampil tiga sub jendela.

Page 26


 Copy Background yang akan di Edit, pada Kanvas Baru.
 Copy juga Foto yang akan di Edit pada kanvas baru.
Sehingga akan tampak pada gambar berikut.

 Potong latar foto dengan menggunakan tool Magnetic
Lasso Tool.

Page 27


 Kemudian Delete area yang telah ditandai. Sehingga
hasilnya seperti berikut.

Page 28

 Kemudian untuk area tertentu cutting dengan
menggunakan tppl Magic Wand Tool+tekan key Shift
pada key board. Lihat gambar berikut.

 Sehingga hasil akhir yang akan diperoleh dari proses
cutting adalah seperti gambar berikut.

Page 29

 Langkah 2 : Menambahkan Teks dan Merapihkan Objek.

 Rapihkan Foto dengan tool Erase Tool .

 Kemudian atur sedemikian rupa sehingga seolah-oleh
terlihat nyata.
 Buat semenarik dan secantik mengkin dengan imajinasi
yang anda kumpulkan pada diri dan fikiran anda.
 Tambahkan Teks untuk menguatkan tema mengenai
gambar tersebut. Dengan menggunakan Horizontal Type
Tool. Atur ukuran huruf, Warna dan jenis hurup pada bar
diatas sub windows. Serta posisikan penempatan teks
sesuai dengan wilayah atau area yang kosong.

Page 30


 Buat efek yang menarik sesuai kepribadian kita atau
sesuai dengan tema dari gambar tersebut.
 Pilih menu Layer  Layer Style lalu pilih Blending
Options

 Kemudian atur efek teks dengan baik dan berkarakter
sesuai dengan imajinasi yang difikirkan.

Page 31

 Langkah 3 : Finishing

 Setelah semua tahapan selesai dikerjakan, maka
selanjutnya kita ke proses akhir dari pengerjaan
manipulasi objek.

 Atur backbackground dengan menggesernya sedikit lebih
atas.
 Ganti tipe Blending Mode Background dengan
difference .
 Simpan pekerjaan kita dengan 2 tahap penyimpanan.
 Penyimpanan pertama berformat .psd dan penyimpanan
yang kedua berformat .jpg atau gambar jadi.

Page 32

 Sehingga hasil akhir dari Gambar tersebut adalah sebuah
objek yang utuh, dengan view yang menarik. Seperti
terlihat pada gambar berikut :

Catatan : Buat foto anda Lebih Menarik dan Lebih indah dari contoh yang
sederhana diatas.

Sesuatu yang sederhana akan lebih bermanfaat jika dibandingkan dengan
hal yang berlebihan jika hal tersebut sia-sia. (A. Hendra)

Page 33

D. Pengenalan dan Penggunaan Adobe Flash

Teknik multimedia dengan konsep Animasi saat ini
memang sangat dibutuhkan. Dunia broad casting atau periklanan,
televisi dan advertasing kini mulai beralih kepada animasi, karena
dianggap lebih interaktif dan menarik serta efek yang lebih hidup
menimbulkan daya tarik tersendiri. Kartun salah satu contoh yang
merepresentasikan animasi terhadap dunia film atau film-film
anak yang berbasis pada grafik.
Terdapat dua istilah penting dalam animasi, yaitu frame by
frame dan tweened animation. Pada frame by frame membuat
gambar yang berbeda pada frame, sedangkan tweened animation
menentukan posisi frame awal dan akhir.
1. Konsep

Flash dimulai sebagai salah satu software untuk membuat animasi
cel (Kartun) yang bernama Future Splash. Dengan perangkat ini,
dimungkinkan untuk membuat animasi dengan ukuran yang kecil
yang dapat dipublish di atau ke internet. Kemudian Macromedia
melihat kemampuan Splash sebagai sarana imaginatif yang
memiliki kemampuan luar biasa di bidang multimedia, sehingga
Splash dikembangkan menjadi perangkat multimedia interaktif
dengan sebutan Macromedia Flash. Tetapi pada bulan Desember
2005, Adobe telah membeli Macromedia yang sampai saat ini
macromedia flash berganti nama menjadi Adobe Flash sejak

Page 34

versi 9 atau CS3. Kelebihan dan Kemampuan Flash antara lain :
mampu menyajikan animasi web yang paling populer saat ini
sehingga banyak didukung oleh berbagai pihak; ukuran file kecil
tetapi kualitas tinggi; kebutuhan Hardware yang tidak tinggi;
banyak media yang mendukung fasilitas flash seperti Web,
Televisi, Handphone dan PDA. Dalam buku ini akan mencoba
menyajikan dasar - dasar bagian dari flash, mulai dari user
interface, sampai dengan implementasi membuat animasi dengan
flash.
Flash menggunakan format vektor sebagai dasarnya sehingga
ukuran filenya relatif kecil. Format file yang dihasilkan dari Flash
adalah Shockwave (.swf) sebagai standar distribusinya. Adobe
flash atau merupakan software multifungsi. Terlepas dari fungsi
awalnya, yaitu mempermudah pembuatan animasi web, ternyata
flash berkembang pesat hingga dapat kita manfaatkan sebagai
software multimedia yang luar biasa. Bahkan Flash dengan action
script-nya dapat dimanfaatkan menjadiprogram pembuat game
yang mudah dan efektif.
2. Area Kerja

User interface di Flash terbagi atas 5 bagian, yaitu:
a. Stage

Stage merupakan daerah yang bewarna putih, dimana area
kerja utama jika anda ingin membuat animasi maupun aplikasi

Page 35

flash lainnya. Seluruh objek/gambar/animasi yang ada di stage
nantinya akan tampil di flash movie, dan sebaliknya apabila
objek/gambar tersebut berada di daerah abu-abu di pinggiran
Stage tidak akan terlihat di flash movie.
b. Tools

Tools merupakan kumpulan alat gambar dan mewarnai
sesuatu yang ada di stage.
c. Panel

Merupakan kumpulan kotak-kotak yang berfungsi untuk
mengubah, mengatur dan mempercantik objek yang ada di stage.
Misalkan memberi warna gradasi, meletakan objek persis di
tengah stage, dan merotasi objek dengan sudut yang tepat.
d. Property inspector

Merupakan bagian informasi objek yang ada di stage.
sebagai contoh, klik saja salah satu objek di stage, maka
informasinya akan terlihat disini. atau klik saja di daerah kosong
yang ada di stage, maka informasi mengenai stage akan terlihat.
e. Timeline

Terdiri dari baris dan kolom. Dimana kolom berhubungan
dengan waktu, baris berhubungan dengan objek. Setiap software

Page 36

animasi pasti memliki timeline untuk mencatat aktivitas objek
kapan harus tampil di stage dan kapan harus menghilang.

f. Tools Adobe Flash

Tools merupakan perangkat kerja atau alat kerja
dalam Adobe Flash. Tools terdiri dari 16 peralatan dalam
area kerja Adobe Flash. Adapun peralatan tersebut adalah
sebagai berikut :
1. Selection tool (V), Merupakan tool utama yang
berfungsi untuk menseleksi benda, baik berupa shape,
line, titik maupun symbol.
2. Subselection tool (A), Merupakan tool utama yang
berfungsi untuk menseleksi dan memodifikasi titik
maupun garis (stroke).

Page 37

3. Free Transform Tool (Q), Merupakan tool yang
berfungsi untuk memodifikasi scale (skala),
skew(kemiringan), rotation(rotasi), distorsi, dan
envelop.
4. Gradien transform tool(F), Merupakan tool yang
berfungsi untuk memodifikasi warna warna gradasi.
5. Line tool (N), Tool yang berfungsi untuk membentuk
garis.
6. Laso Tool (L), Tool yang berfungsi untuk menyeleksi
benda.
7. Pen Tool (P), Tool yang berfungsi untuk membuat
sebuah bentuk path, dapat digunakan juga untuk
tracing.
8. Text Tool (T), Tool yang berfungsi untuk membuat
tulisan.
9. Oval Tool (O), Tool yang berfungsi untuk membuat
bentuk lingkaran.
10. Rectangle Tool (R), Tool yang berfungsi untuk
membuat bentuk kotak. Rectangle Tool juga memiliki
sub tool, yakni polystar Tool yang berfungsi membuat
bermacam bentuk segi.
11. Pencil Tool (Y), Pencil Tool berfungsi untuk
membuat goresan yang seperti pensil. setiap goresan
akan menjadi tipe stroke.

Page 38

12. Brush Tool (B), Berfungsi untuk membuat goresan
seperti brush(kuas) yang merupakan tipe fill.
13. Ink bottle Tool (S), berfungsi untuk membuat stroke.
14. Paint bucket (K), Berfungsi untuk membuat fill.
15. Eye dropper (I), berfungsi untuk mengambil sampel
warna.
16. Eraser (E), Penghapus.

g. Contoh Implementasi

Berikut implementasinya dengan menampilkan
sebuah mobil yang dapat mengkilap. Adapun langkah-
langkahnya adalah sebagai berikut :

Page 39

1. Masukkan (import) gambar ke dalam stage,

2. Setelah gambar berada pada stage, atur besarnya stage
sesuai dengan ukuran gambar yang telah di import tadi
misalnya 500 px (width) dan 315 px (height),
3. Ganti nama layer1 menjadi mobil,
4. Tambahkan satu layer baru, kemudian ganti layer
tersebut dengan nama efek,
Catatan : Misal Gambar Mobil.

Page 40


5. Klik icon rectangle tool ( tekan huruf R di keyboard ),
kemudian gambar persegi panjang melebihi gambar
mobil, seperti gambar di bawah ini,

6. Klik gambar persegi panjang yang telah dibuat tadi,
kemudian ubah warna persegi panjang seperti gambar
di bawah ini,

Page 41


7. Kemudian untuk mendapatkan efek cahaya yang
mengkilap, lakukan pengaturan warna persegi panjang
seperti gambar di bawah ini,

Page 42


8. Efek mengkilap telah selesai dibuat, kemudian langkah
selanjutnya, tambahkan satu layer lagi, kemudian ganti
nama layer tersebut dengan animasi,

9. Masih di layer animasi kill icon Pen tool,

10. Kemudian buatlah bagian yang akan dianimasikan
misalnya seperti gambar di bawah ini,

Page 43


11. Setelah area yang dianimasikan selesai dibuat, maka
langkah selanjutnya yaitu klik kanan pada layer animasi
pilih menu mask,

12. Klik frame 30 pada setiap layer, kemudian tekan F6
untuk memberikan insert keyframe,

Page 44

13. Klik kanan antara frame 1 – 30 pada layer efek,
kemudian pilih menu create motion tween,

14. Klik frame 30 pada layer efek, kemudian pindahkan
gambar persegi panjang ke sebelah kanan dari gambar
mobil, seperti gambar di bawah ini,

15. Tekan ctrl + enter untuk melihat hasilnya…
Preview in image mode,

Page 45


Ingat setiap perbuatan atau Kreasi kita, Tidak ada yang sia-sia. Maka
berbuatlah dan berkreativitaslah. (A. Hendra)

Page 46

E. Mengenal Script dalam Flash

Coding atau Script adalah sederet sitax yang digunakan
untuk membantu desain lebih hidup. Penggunaan script dalam
flash biasa digunakan untuk alur animasi yang komplek, dimana
tujuannya adalah untuk mempermudah gerak dari satu titik ke titik
yang lain. Penggunaan script tidak hanya ada pada flash, banyak
aplikasi animasi yang menggunakan script, contoh saja
SwisMax3D dan software sejenis yang ada di pasaran.

Sript, tidak sulit untuk dipelajari dan sangat mudah
diingat. Sript tidak untuk dihapal melainkan dilatih, sehingga
semakin sering script itu diimplementasikan maka semakin ingat
dan semakin bertambah kosa kata hapalan script yang kita kuasai.

Contoh Script yang biasa digunakan dalam coding animasi
adalah GotoAndPlay(), Stop(), Play() dan sebagainya.

Penggunaan

Penggunaan animasi saat ini marak digunakan baik di
dalam bidang akademisi maupun yang memang didalam
broadcasting yang memang menjadi media dalam pengembangan
perangkat multi. Media menjadi salah satu bagian terpenting
dalam mepublikasikan acara atau kegiatan yang bersifat penting
atau sekedar hiburan semata.

Page 47

Animasi, banyak digunakan di pertelevisian saat ini,
contoh kongkrit yang menjadi bahan tontonan adalah film kartun
dan film animasi. Sebagai contoh Upin dan Ipin, Krisna, dan
sebagainya.

Selain itu, penggunaan multimedia animasi juga sudah
digunakan oleh profesional dengan menggunakan sebagai media
presentasi atau sejenisnya. Serta, banyak lagi penggunaan
penggunaan animasi pada berbagai disiplin ilmu di dunia.

Implementasi pada Flash

Pada implementasi kali ini kita akan mencoba membuat
media aplikasi ajar untuk mata pelajaran Matematika SMU/SMA,
contohnya sebagai berikut :

Page 48

Pada setiap animasi dan Button yang tersedia, akan
mengandung script, baik sebagai penghubung atau pun sebagai
penyudah dan bahkan sebagai script untuk melanjutkan. Sebagai
contoh, script yang digunakan pada program animasi diatas adalah
sebagai berikut :

No Media Perintah Keterangan

1 Button on (release) { ‘118’
menunjukan
“HOME” gotoAndPlay(118);
bahwa ketika
} button di klik
maka, perintah
tersebut akan
menuju ke
Frame 118.

2 Frame play(); Memulai
animasi.

3 Frame stop(); Menyudahi
animasi.

Latihan-latihan

Explorasi adalah bagian yang tak terpisahkan dari Pembelajaran
sebuah kasus.

Page 49

F. Pengenalan Story Board

Storyboard adalah bagian terpenting dalam pembuatan
animasi dan film, dimana ini merupakan analisi awal dalam
Multimedia Development. Tugas seorang storyboard captur
adalah Melakukan proses interview/wawancara dengan Subject
Matter Expert (SME) dan review dokumen dan catatan tulis serta
review berbagai source (video, audio dan lainnya) sebagai ouput
yang dihasilkan nantinya adalah interview notes, document ,
workplace, observation, survey. Selain storyboard captur, tak
kalah penting dalam membuat animasi film adalah seorang
storyboard maker dimana memiliki tugas sebagai pembuat detail
alur cerita

Pembelajaran dan menganalisa komponen-komponen yang
akan muncul seperti text, gambar, animasi, tokoh yang akan
digunakan serta menghasilkan ouput adalah tabel breakdown
komponen storyboard, kumpulan gambar cerita. Serta, yang
terakhir adalah pembuatan storyboardnya sendiri dilakukan oleh
kartunis atau animator untuk dijadikan sebuah animasi
nyata/gerak.

Page 50

Penggunaan Story Board Pro

Seperti telah dijelaskan pada pembahasan diatas, bahwasannya
penggunaan storyboard adalah untuk prototype sebuah animasi
atau film. Sebagai contoh sebagai berikut :

Dalam pembuatan animasi perlu seorang animator yang dapat
mendesain karakter sedemikian rupa sehingga menghasilkan
produk nyata.

Setelah itu, animator akan melanjutkan desain tersebut dengan
mebuat latar/landscape yang nyata. Sehingga animasi tersebut
berada dalam sebuah keadaan yang pasti.

Page 51


Langkah selanjutnya adalah memodelkan karakter tadi, dengan
memberikan sedikit mimik yang memang menjadi kejelasan pada
animasi.

Page 52

Setelah semua siap berikut dubbing dan alur skenarionya, maka
langkah selanjutnya adalah mendistribusikan produk.

Latihan-latihan

Sekolah adalah secuil dari kretivitas yang dimiliki, ketika kita ingin
sukses maka katakanlah “SUKSES”.

Page 53

G. Daftar Pusataka

http://daniairiyani.blogspot.com/2010/09/keterkaitan-
implementasi-grafik.html

http://karmila.staff.gunadarma.ac.id/Downloads/folder/0.2

http://babaflash.com/animasi_kongkrit

http://www.ilmukomputer.com/tekhnologymultimedia

Page 54

H. Penyusun

Nama : Acep Hendra, ST

Motivasi : Belajar bagian dari kehidupan,
“bangun” dan motivasi diri kita untuk selalu belajar.

Kegiatan : Officer di SDTC, CEO di GSI dan
Guru di SMK Prakarya Internasional 1952.

Kontak :

FB dan e-mail : chendra220@gmail.com
YM : shiniruka
SMS : 085222749765
Telp. : 02293020331


Page 55

Multimedia

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Multimedia

Similar a Multimedia (20)

Último

Último (20)

Multimedia