A. PENGENALAN FLASH
Adobe Flash (dahulu bernama Macromedia Flash) adalah salah satu perangkat
lunak komputer yang merupakan produk unggulan Adobe Systems. Adobe Flash
digunakan untuk membuat gambar vektor animasi. Berkas yang dihasilkan dari perangkat
lunak ini mempunyai file extension .swf dan dapat diputar di penjelajah web yang telah
dipasangi Adobe Flash Player. Flash menggunakan bahasa pemrograman bernama
ActionScript yang muncul pertama kalinya pada Flash 5.
Sebelum tahun 2005, Flash dirilis oleh Macromedia. Flash 1.0 diluncurkan pada
tahun 1996 setelah Macromedia membeli program animasi vektor bernama FutureSplash.
Versi terakhir yang diluncurkan di pasaran dengan menggunakan nama 'Macromedia'
adalah adalah Macromedia Flash 8. Pada tanggal 3 Desember 2005 Adobe Systems
mengakuisisi Macromedia dan seluruh produknya, sehingga nama Macromedia Flash
berubah menjadi Adobe Flash.
Kelengkapan feature dan tools yang dimiliki, menjadikan program pengolah
animasi ini pilihan wajib para Animator dan para professional lainnya. Banyak hal yang
dapat dilakukan dengan aplikasi pembuat animasi ini, diantaranya adalah: mendesain
interface suatu halaman web, membuat presentasi, membuat game, membuat multimedia
interaktif dan masih banyak lagi yang dapat dilakukan dengan program aplikasi yang satu
ini. Beragamnya kegunaan dari Adobe Flash ini menuntut tiap orang untuk mampu
menggunakan program aplikasi ini.
Di mana kita bisa mendapatkan hasil karya yang dibuat dengan Flash? Banyak
hasil karya yang dibuat dengan menggunakan Adobe Flash. Diantaranya adalah
„h Ecards atau Kartu Ucapan Elektronik
„h Coolsites atau Situs Bagus
„h Game atau Permainan
„h Animasi Kartun
Kelebihan dan Kemampuan Flash
„h Merupakan teknologi animasi web yang paling populer saat ini sehingga banyak
didukung oleh berbagai pihak.
„h Ukuran file yang kecil dengan kualitas yang baik
„h Kebutuhan Hardware yang tidak tinggi
„h Dapat membuat website, cd-interaktif, animasi web, animasi kartun, kartu elektronik,
iklan TV, banner di web, presentasi, membuat permainan (game), aplikasi web dan
handphone.
„h Dapat ditampilkan di banyak media seperti Web, CD-ROM, VCD, DVD, Televisi,
Handphone dan PDA.
Teknologi Flash
Flash sekarang bukan hanya sebagai software saja dengan nama Adobe Flash, tetapi
juga merupakan suatu teknologi animasi di web. Jadi untuk membuat animasi web
dengan format Flash (SWF) kita tidak harus menggunakan software Adobe Flash, tetapi
bisa menggunakan software lain seperti SwishMax, Vecta 3D, Swift 3D, Amara, Kool
Moves dan masih banyak lagi.
Versi Macromedia atau Adobe Flash
„h Macromedia Flash 2 (1997)
„h Macromedia Flash 3 (1998)
„h Macromedia Flash 4 (1999)
„h Macromedia Flash 5 (2000)
„h Macromedia Flash 6 (2002) atau Macromedia Flash MX
„h Macromedia Flash 7 (2003) atau Macromedia Flash MX 2004
„h Macromedia Flash 8 (2005)
„h Adobe Flash 9 (2007) atau Adobe Flash CS3
B. DASAR-DASAR FLASH
Pengenalan Lembar Kerja
Pertama kita akan berkenalan dengan tampilan Adobe Flash serta fungsi-fungsi dari tooltool
yang disediakan. Pastikan bahwa komputer Anda telah terinstal Adobe Flash CS3,
jika telah terisntal, bukalah program tersebut melalui icon flash yang ada di desktop.
Tampilan awal saat Adobe Flash dibuka akan seperti gambar 1.1.
Gambar 1.1
1. Flash Document
Flash Document digunakan untuk memulai pembuatan project flash. Disini akan
ditampilkan stage kosong yang bisa diisi oleh project yag ingin kita buat. Sebagian
besar pengguna flash menggunakan ini.
2. Flash Slide Presentation
Pada bagian ini kita dapat membuat slide presentasi layaknya pada power point di
Microsoft Office. Perbedaannya pada flash kita dituntut untuk lebih kreatif membuat
desain (sebenarnya ada desain yang sudah jadi).
3. Flash From Application
Feature ini berguna untuk membuat desain project flash yang menggunakan ¡§formbased
Apllication¡¨ yang dapat dimasukkan ke dalam media berbasis internet. Ada
bagian untuk melakukan perintah seperti pencarian, bergerak,dsb. Digunakan dalam
pembuatan game, mesin pencari, input data, dll.
4. Action Script File
Selain dapat membuat animasi bergerak (secara langsung) lewat actionscript, kita juga
bisa membuat semacam tempat penyimpanan (memori) untuk aplikasi Flash yang kita
buat. Ini cukup menjelaskan tentang aplikasi-aplikasi Flash.
5. Action Script Communication File
Tindak lanjut dari Action Script File, pada feature ini kita dapat menunjukkan kodekode
ActionScript yang sudah dibuat pada file Flash.
6. Flash Java Script File
Jika Action Script File memudahkan kita dalam membuat animasi bergerak untuk
internal project dokumen maka feature yang satu ini berguna untuk membuat link
external yang dapat bermanfaat seperti action script. Java Script API bisa diinputkan
pada flash document dengan feature ini.
7. Flash Project
Tentunya feature yang satu ini digunakan sebagai sarana pembuatan flash project.
Project flash yang kita buat bisa dijadikan sebagai file berekstensi *.fla , *.as , *jsfl
dan media file lainnya.
User Interface
Gambar 1.2
User interface di Flash terbagi atas 5 bagian, yaitu:
1. Stage
Stage merupakan daerah yang bewarna putih, dimana area kerja utama jika anda ingin
membuat animasi maupun aplikasi 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.
2. Tools
Merupakan kumpulan alat gambar dan mewarnai sesuatu yang ada di stage. Dalam
flash terdapat beberapa tool-tool dasar yang masing-masing mempunyai fungsi sebagai
selektor, penggambar objek, penghapus objek, pewarna objek, serta perngatur
perbesaran objek, berikut beberapa penjelasan singkat masing-masing tool, untuk
mengetahui nama dari masingmasing tool cukup arahkan mouse Anda ke atas icon tool
yang dimaksud, maka akan muncul popupdari nama tool yang sedang disorot
Gambar 1.3
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)
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 di gunakn 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
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 objek
17. Hand Tool (H)
Hand Tool berfungsi untuk menggeser stage sejauh pergeseran drag mouse
(menahan kik kiri
mouse)
18. Zoom Tool (M,Z)
Zoom Tool berfungsi untuk memperbesar atau memperkecil stage, saat zoom took
di klik, maka akan muncul Option pada modifiers, pilih salah satu icon untuk
memperbesar atau memperkecil stage.
3. 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.
4. 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.
Pengaturan properti merupakan hal yang umumnya dilakukan pertama kali saat akan
memulai sebuah project. Untuk membuka kotak properti, tekan tombol Ctrl + F3 pada
keyboard atau dengan mengklik tanda panah kecil yang (Coliapse icon) yang terletak
dibawah stage. Perhatikan gambar 1.4
Gambar 1.4
Jika tab properti telah muncul, maka akan tampak seperti gambar 1.5
Gambar 1.5
Perhatikan tombol 550 x 400 pixels, nilai tersebut merupakan ukuran dari lembar kerja
project (stage) sekaligus menjadi ukuran file swf yang akan dihasilkan. Untuk merubah
ukuran tersebut, klik tombol 500 x 400 pixels dan ubah nilai dimensi (width and
height) dari stage, perhatikan gambar 1.6
Gambar 1.6
5. Timeline
Gambar 1.7
Terdiri dari baris dan kolom. Kolom berhubungan dengan waktu, baris
berhubungan dengan objek. Setiap software animasi pasti memliki timeline untuk
mencatat aktivitas objek kapan harus tampil di stage dan kapan harus menghilang.
Timeline merupakan panel dimana kita dapat mengatur frame dan juga layer. Seperti
film, Flash membagi panjang waktu ke dalam frame. Layer sendiri seperti gabungan
beberapa film yang ditumpuk satu di atas yang lain.
Timeline dalam flash berperan penting dalam pembuatan sebuah animasi maupun
pemograman dalam flash, oleh karena itu, Anda harus menguasai dasar-dasar dalam
timeline. Timeline sendiri adalah suatu tempat dimana potongan-potongan objek,
script, gambar, suara dan lain-lain akan diletakkan.
Perhatikan pada bagian timeline, angka-angka yang berada di atas timeline
merupakan urutan suatu frame, dan nilai ini tidak terbatas, tapi biasanya sebuah file
besar memiliki hingga ribuan frame. Jika Anda perhatikan tentang pembahasan
pengaturan properti di atas, maka akan kita ketahui bahwa makna 12 fps adalah 12
frame setiap detiknya.
Gambar 1.8
Frame dalam timeline dapat mengalami beberapa keadaan, perhatikan gambar 1.9
Gambar 1.9
Apabila di dalam frame terdapat tanda bulat putih, berarti frame tersebut kosong
tidak mengandung objek apapun. Apabila frame tersebut terdapat tanda bulat hitam,
berarti frame tersebut terdapat objek. Tanda kotak dalam frame hanyalah sebagai
pemisah yang maksudnya memiliki kesamaan dengan frame-frame sebelumnya, jika di
dalam frame tersebut terdapat tanda panah, bermakna terdapat tweening dalam
beberapa frame tersebut, garis putus-putus berarti tweening yang gagal terjadi dalam
frame. Sedangkan bila di furame tersebut terdapat huruf a kecil, berarti frame tersebut
mengandung action script. Frame yang terdapat tanda bendera merah maksudnya
frame tersebut telah diberi identitas (nama pada properti), dan jika frame tersebut
terdapat tanda gelombang biru, berarti frame tersebut mengandung suara.
Untuk mempelajarai hal-hal apa saja yang dapat kita pelajari dari timeline,
cobalah klik kanan di sembarang timeline, maka akan muncul beberapa perintah
seperti pada gambar 1.10
Gambar 1.10
Berikut penjelasan masing-masing perintah Create Motion Tween Perintah ini
bermaksud memberikan gerakan tweening animasi objek dalam beberapa frame.
Fungsi ini akan lebih detail kita bahas selanjutnya tentang Animasi Flash.
„h Insert Frame
Perintah ini akan membuat sebuah frame kotak yang keadaannya mengikuti frame
sebelumnya, jika frame sebelumnya kosong, maka frame ini juga kosong, dan jika
frame sebelumnya terdapat objek, maka frame ini pun akan memiliki objek yang
sama.
„h Remove Frame
Perintah ini akan menghapus frame yang sedang terseleksi.
„h Insert KeyFrame
Perintah ini akan menyisipkan sebuah frame baru yang keadaannya mengikuti
frame sebelumnya, jika frame sebelumnya kosong, maka frame ini juga kosong,
dan jika frame sebelumnya terdapat objek, maka frame ini pun akan memiliki
objek yang sama. Perintah ini adalah yang paling banyak digunakan setiap
pembuatan objek baru dalam stage.
„h Insert Blank Keyframe
Perintah ini akan menyisipkan sebuah frame kosong walaupun frame sebelumnya
mengandung objek.
„h Clear Keyframe
Perintah ini akan mengosongkan frame yang mengandung objek, dengan kata lain,
perintah ini akan mendelete semua konten yang ada dalam frame tersebut.
„h Convert to Keyframes
Perintah ini akan mengkonversi sebuah frame tanpa identitas menjadi frame objek
dengan objek tergantung frame sebelumnya.
„h Convert to Keyframes
Perintah ini akan mengkonversi sebuah frame tanpa identitas menjadi frame
kosong, tidak bergantung pada frame sebelumnya.
„h Cut Frames
Memindahkan posisi suatu frame ke frame yang lain
„h Copy Frames
Mengcopy suatu frame ke frame lain
„h Paste Frames
Penerapan setelah perintah copy atau cut frames
„h Reverse Frame
Membalik urutan beberapa frame yang terseleksi
„h Syncrhonize frame
Perintah untuk mensinkronkan simbol-simbol dalam frame
„h Action
Memberikan action script pada suatu frame
C. CONTOH PENGGUNAAN TOOLS
Oval Tool
Pada penjelasan kali kita akan belajar cara menggunakan Oval Tool (O) untuk
menggambar sebuah lingkaran, ikuti langkah berikut :
1. Pilih Oval Tool, saat Oval Tool aktif, maka Anda akan melihat 2 kotak warna yang
disebut stroke color dan fill color. Stroke color adalah warna yang akan mengisi
warna tepi garis sebuah objek sedangkan fill color akan mengisi warna dalam dari
sebuah objek.
2. Klik kotak stroke color dan pilihlah warna hitam
3. Klik kotak fill color dan pilihlah warna biru
4. Atur ketebalan dari daris stroke pada panel properti, ubah nilai ketebalan garis
menjadi 3 pt dan pilih solid. perhatikan gambar 1.11
Gambar 1.11
5. Sekarang mulailah menggambar pada stage sebuah lingkaran dengan cara klik
sembarang tempat pada stage, kemudian tahan dan geser mouse dan lepaskan jika
sudah selesai.
Gambar 1.12
Tips : mungkin gambar yang Anda hasilkan tidak bulat sempurna seperti gambar di
atas, untuk menghasilkan gambar bulat sempurna, ulangi langkah ke 5, namun kali ini
sambil menekan tombol Shift pada keyboard saat menggambar lingkaran.
Rectangle Tool
Rectangle Tool (R) berfungsi untuk menggambar sebuah kotak dalam stage, untuk
menggambar kotak, klik Rectangle Tool dan lakukan hal yang sama seperti langkah
menggambar lingkaran di atas. Jika Anda menekan tombol shift saat menggambar
kota, maka kotak yang dihasilkan akan membentuk sebuah persegi, jika tidak ditekan,
maka gambar dapat berbentuk persegi panjang.
Gambar 1.13
Gradients
Gradients dalam flash merupakan kombinasi 2 warna atau lebih yang digabung ke
dalam sebuah objek. Kita akan mulai mencoba menerapkan warna gradients pada
objek, pastikan kotak persegi panjang masih berada di dalam stage, ikuti langkahlangkah
berikut :
1. Klik Selection Tool (V)
Gambar1.14
2. Blok semua area kotak dari satu ujung kotak ke ujung diaonal yang berlawanan.
Jika berhasil, maka kotak yang terseleksi akan tampak seperti gambar 1.16
Gambar 1.15 Gambar 1.16
3. Klik kotak stroke color, kemudian pilih kotak no color.
Gambar 1.17
4. Lihat pada sisi kanan atas layar dan buka panel color mixer.
Gambar 1.18
5. Aktifkan mode fill color dengan cara mengklik kotak fill color.
6. Pilih Type = Linear pada pada pilihan jenis warna. Sekarang akan muncul 2 buah
indent. (bentuknya kecil gabungan persegi dan segitiga)
7. Klik indent tersebut dan pilih warna yang diinginkan, misalnya indent yang di sisi
kiri berwarna hijau dan yang di sisi kanan berwarna biru.
8. Anda dapat menggeser-geser posisi indent tersebut sesuai dengan selera dan
lihatlah perubahannya pada stage. Hasilnya adalah seperti gambar 1.19
Gambar 1.19
Pencil Tool
Penggunaan Pencil Tool di Flash sangatlah mudah layaknya pencil tool di MS Paint,
sekarang kita akan latihan membuat sebuah pohon
1. Klik Pencil Tool dan pilih smooth pada modifier agar gambar yang dihasilkan
menjadi halus.
Gambar 1.20
2. Bentuklah sebuah gambar sederhana misalkan sebuah pohon
Gambar 1.21
3. Untuk memberikan warna klik Paint bucket Tool dan pilih warna yang sesuai,
kemudian klik pada stage dimana warna hendak diberikan dengan syarat daerah
yang diberikan warna haruslah dalam keadaan tertutup oleh garis, tidak ada celah
lubang, bila terdapat lubang harus ditambal terlebih dahulu.
Gambar 1.22
D. TOMBOL / BUTTON
Tombol merupakan komponen dalam flash yang apabila di klik dengan mouse
akan menghasilkan sebuah efek tertentu, penjelasan mengenai Action script pada
tombol akan kita bahas selanjutnya tentang Action Script.
Untuk membuat tombol, perhatikan langkah-langkah berikut :
1. Klik Rectangle Tool, pada option modifier, klik icon set corner radius dan ketik
nilainya misal 10 points
.
Gambar 1.23
2. Atur Stroke Color menjadi hitam dengan ketebalan 4 pt dan fill color merah.
3. Buatlah sebuah kotak pada stage, klik Text Tool dan buatlah sebuah tulisan di atas
tombol tersebut dengan nama ¡§Tombol¡¨.
Gambar 1.22
4. Seleksi kotak dan tulisan lalu tekan tombol F8 (atau klik kanan pada objek dan pilih
Convert to Symbol).
Gambar 1.23
5. Ketikkan pada name ¡§Tombol¡¨ dan pada option type pilih button, lalu OK
6. Anda telah berhasil membuat sebuah tombol, sekarang double klik tombol tersebut,
Anda akan masuk ke edit mode dan akan terlihat pola time line sekarang berubah
menjadi Up, Over, Down, Hit
7. Insert keyframe pada frame Over, ubah warna fill color objek menjadi warna lain,
misalnya kuning.
8. Insert Keyframe pada frame Down, ubah warna fill color objek menjadi warna biru.
9. Tekan Ctrl + Enter untuk melihat hasilnya.
Movie Clip
Movie Clip merupakan tipe symbol yang paling banyak digunakan, suatu movie clip
dapat menyimpan beberapa komponen symbol lagi di dalamnya. Berikut latihan membuat
sebuah movie clip.
1. Buatlah sebuah lingkaran dengn stroke colot dan fill color bebas.
2. Seleksi objek tersebut dan tekan tombol F8.
3. Ketikkan nama ¡§bola¡¨ pada name dan pilih tipe Movie clip, lalu OK.
Gambar 1.24
Library
Library dalam flash merupakan tempat berkumpulnya semua komponen flash, Library
umumnya terletakdi sisi kanan layar. Apabila anda menghapus suatu symbol misal
berupa tombol atau movie clip dari stage, maka symbol tersebut masih tersimpan
dalam library dan siap dikeluarkan kapanpun .
Gambar 1.25
E. TEXT
Text dalam flash terbagi menjadi 3 jenis yaitu Static text, Input Text, dan Dynamic Text,
ketiganya memiliki fungsi yang berbeda, berikut penjelasan masing-masing.
1. Static Text, merupakan text biasa yang dipergunakan untuk menampilkan text dalam
flash. Jenis text ini tidak dapat dimasuki action script. Jika Anda mengklik text Tool,
maka tampilan panel property akan berubah menjadi seperti pada gambar 1.26. Pada
panel properti inilah tempat pengaturan jenis font, besar font, tebal, kemiringan serta
posisi dari text. Jenis text yang sedang aktif ditunjukkan oleh tab di sebelah kiri.
Gambar 1.26
2. Input Text merupakan jenis text yang berfungsi untuk pemasukan data external
kedalam flash. Input text ini memiliki variabel tertentu yang akan dibahas detail pada
BAB selanjutnya mengenai action script.
3. Dynamic text merupakan jenis text yang nilainya tergantung pada fungsi yang
dipasang pada variabel dynamic text, Penjelasan lebih rinci mengenai dynamic text
juga akan dibahas pada BAB selanjutnya mengenai action script.
F. DIMENSI DAN KOORDINAT
Dimensi
Dimensi dalam flash maksudnya adalah ukuran lebar dan tinggi suatu objek yang
dinyatakan dengan width (W) dan Height (H) dalam satuan pixel (format pengaturan
awal). Apabila terdapat suatu objek apapun dalam stage, misalkan sebuah lingkaran, maka
nilai dimensi objek tersebut dapat dilihat pada panel property.
Gambar 1.27
Jika objek tersebut adalah lingkaran, maka nilai yang tertera pada width dan height adalah
nilai diameter dalam satuan pixel.
Koordinat
Koordinat dalam flash terdapat perbedaan dengan koordinat Cartesius yaitu pada sumbu
Y. Jika dalam koordinat cartesius, semakin ke atas, nilai _y semakin besar, sedangkan
dalam flash, semakin ke bawah, nilai _y semakin besar. Untuk melihat koordinat dalam
flash, aktifkan penggrasi (ruler), klik view ¡V rulers untuk menampilkan penggaris.
Gambar 1.28
Koordinat suatu objek dalam flash ditandai dengan nilai _x dan _y yang tertera pada panel
properti, klik suatu objek dalam flash, maka akan terlihat nilai koordinat benda tersebut.
G. EXTERNAL FILE
File-file diluar flash yang dapat dimpor ke dalam flash antara lain file suara dengan
format wav, gambar dengan format jpg, bmp, gif, png, file video dengan format flv, avi,
mpeg dengan syarat di komputer telah terinstal Quick Time. Untuk memasukkan file-file
tersebut ke dalam flash, klik file ¡V import ¡V pilih import to stage (Ctrl + R) jika Anda
ingin langsung menampilkannya pada stage, atau pilih import to library jika Anda hanya
ingin menyimpannya di library serta import video jika Anda ingin memasukkan video.
