คู่มือ Adobe Flash CS5 · โปรแกรม Flash เป็นโปรแกรมที่ท างานในด้านมัลติมีเดียในด้านแอนนิเมชั่นต่างๆ
FLASH DASAR-DASAR ANIMASI - · PDF filemenghasilkan efek bergerak. Kelebihan Flash...
Transcript of FLASH DASAR-DASAR ANIMASI - · PDF filemenghasilkan efek bergerak. Kelebihan Flash...
Rini Marwati – Yudi Wibisono 1 Matematika UPI – Versi 2013
FLASH DASAR-DASAR ANIMASI
A. Apa itu Macromedia Flash?
Macromedia Flash (selanjutnya hanya disebut Flash) adalah sebuah perangkat lunak yang dapat
digunakan untuk menambahkan aspek dinamis sebuah web atau membuat film animasi
interaktif.
Flash dapat digunakan untuk membuat:
1. Animasi.
2. Navigasi situs web.
3. Animasi berdurasi panjang.
4. Aplikasi web.
5. Game.
6. Iklan
Untuk membuat sebuah film Flash, spesifikasi minimal komputer yang akan digunakan untuk
membuat sebuah film Flash adalah:
1. Intel Pentium 200 MHz atau yang setara.
2. Windows 98 SE, Windows ME, Windows NT 4.0, Windows 2000, atau Windows XP.
Catatan: Flash juga dapat dibuat di Macintosh.
3. 64 MB RAM (direkomendasikan 128 MB)
4. 85 MB ruang harddisk
5. 16-bit monitor warna yang bisa menampilkan resolusi 1024 x 768 resolution
6. CD-ROM drive
Rini Marwati – Yudi Wibisono 2 Matematika UPI – Versi 2013
B. Lingkungan Kerja Flash
Kita bekerja pada dengan menggunakan Action Script 2. Tampilan awal saat Flash dapat dilihat pada gambar berikut:
Tutorial Pertama: Animasi Sederhana
Materi yang dipelajari pada bagian ini adalah: document properties, oval tools, scale, frame,
keyframe, animasi, layer, rectangle tools, text tools, line tools, pencil tools dan zoom.
Mengatur Document Properties
Setelah Anda berkenalan sedikit dengan Macromedia Flash, sekarang saatnya beraksi!
Panel Properties
Panel timeline Panel tools
stage
Rini Marwati – Yudi Wibisono 3 Matematika UPI – Versi 2013
Pertama, kita akan mengganti latar berwarna putih dengan warna biru gelap, sesuai dengan
setting animasi yang terjadi di malam hari.
Hal ini dilakukan dengan cara:
1. Arahkan mouse ke stage.
2. Klik kanan, lalu pilih menu "Document Properties..."
3. Akan muncul layar sbb:
Beberapa istilah yang perlu diketahui:
Dimension menyatakan ukuran stage,
background color adalah warna latar (yang akan diubah),
frame rate adalah jumlah gambar yang akan ditampilkan per detik (analogikan dengan film
kartun yang terdiri dari banyak gambar dan ditampilkan bergantian secara cepat,
rules unit adalah satuan ukuran.
Untuk mengubah warna latar, tekan kotak yang terletak di sebelah kanan tulisan "Background
Color", pilihlah warna yang Anda kehendaki.
Animasi Jamur
Setelah warna latar diganti, sekarang kita akan membuat animasi jamur yang tumbuh.
Film Flash vs film kartun.
Film Flash pada dasarnya terdiri atas beberapa frame yang dijalankan secara cepat untuk
menghasilkan efek bergerak. Kelebihan Flash dibandingkan film kartun adalah tidak semua
frame harus kita gambar secara manual. Kita hanya perlu membuat frame kondisi awal dan
Rini Marwati – Yudi Wibisono 4 Matematika UPI – Versi 2013
frame kondisi akhir, dan Flash akan mengisi frame diantaranya. Frame kondisi awal dan akhir
termasuk dalam frame utama yang selanjutnya disebut "keyframe"
Pada tutorial jamur ini, hal yang harus dilakukan adalah membuat gambar jamur pada kondisi
awal (belum tumbuh) dan pada kondisi akhir (tumbuh sempurna). Langkah terakhir adalah
mengatur Flash agar mengisi gambar di antara kedua kondisi tersebut.
Jamur yang akan dibuat terdiri atas dua buah oval (lihat gambar jamur pada kondisi awal di
bawah) dengan warna merah.
Langkah-langkah pembuatannya sebagai berikut:
1. Buat jamur pada kondisi awal
Ganti fill color dengan warna merah:
Pilih "Oval Tool" pada panel tools.
Arahkan ke stage, lalu drag sehingga terbentuk bagian atas jamur.
Rini Marwati – Yudi Wibisono 5 Matematika UPI – Versi 2013
Lakukan hal yang sama untuk bagian bawah. Tekan Shift saat men-drag untuk menghasilkan
lingkaran yang sempurna (bukan oval).
Jamur pada kondisi awal akan tampak sebagai berikut:
Sekarang perhatikan panel time-line, akan terlihat sebagai berikut:
Angka 1, 5, 10, 15 dst. adalah nomor frame. Warna merah menunjukan frame yang aktif. Pada
gambar di atas, kita berada pada frame 1. Lingkaran kecil hitam di tengah kotak menandakan
bahwa frame ini adalah keyframe.
Perlu diingatkan kembali bahwa film flash terdiri atas beberapa frame yang akan ditayangkan
secara cepat (mirip dengan film kartun). Jika kita menggunakan opsi 12 frame per detik, artinya
film sepanjang 5 detik membutuhkan 5x12 frame = 60 frame. Tidak semua frame harus kita buat
sendiri, yang harus kita buat adalah frame utama (keyframe) dan Flash akan membuat secara
otomatis frame tambahan di antara keyframe.
Saat ini Anda sudah berhasil membuat keyframe pertama yang berada pada frame ke-1.
Langkah berikutnya adalah membuat keyframe yang menggambarkan kondisi akhir jamur yang
tumbuh sempurna.
Rini Marwati – Yudi Wibisono 6 Matematika UPI – Versi 2013
Sebelum melanjutkan ke langkah berikutnya, sebaiknya Anda menyimpan file dokumen Flash
Anda dengan menu File Save atau Ctrl-S
2. Tambahkan Keyframe Kedua
Untuk kondisi akhir, kita pilih frame nomor 18, yang berarti animasi jamur ini akan memakan
waktu 1.5 detik. Pindahkan frame yang aktif ke posisi 18 (lihat gambar berikut) dengan mengklik
kotak.
Lalu jadikan frame ini sebagai keyframe dengan menekan F6 (alternatif lain melalui klik kanan,
pilih Insert Keyframe), maka timeline akan menjadi:
Perhatikan bahwa frame 1 sampai dengan frame 18 berubah menjadi abu-abu. Terdapat kotak
kecil berwarna putih pada frame 17. Arti kotak ini adalah frame 17 merupakan frame terakhir
sebelum keyframe berikutnya dan semua frame pada bagian kiri frame ini memiliki isi stage
yang sama dengan keyframe sebelumnya (yaitu frame 1). Untuk membuktikannya coba Anda
pilih frame antara frame 1 sd 17, Anda dapat lihat bahwa semua isinya sama. Frame 2 sd 17 diisi
secara otomatis oleh Flash.
3.Buat Jamur Pada Kondisi Akhir
Sekarang pilih kembali frame pada posisi 18 .
Jamur yang kita buat sebelumnya saat ini berwarna abu-abu, artinya dalam mode terpilih.
Rini Marwati – Yudi Wibisono 7 Matematika UPI – Versi 2013
Pilih arrow tool lalu klik bagian mana saja dari stage untuk men-deselect. Sehingga
akan menjadi:
Pilih bagian kepala jamur, lalu double klik! Jika Anda hanya menggunakan satu kali klik, maka
yang terpilih hanya bagian dalamnya (silahkan coba, lalu tekan ctrl-Z untuk Undo). Setelah
terpilih drag ke bagian atas (lihat gambar)
Rini Marwati – Yudi Wibisono 8 Matematika UPI – Versi 2013
Selanjutnya adalah menggarap bagian bawah jamur. Pilih lingkaran di bagian bawah (sekali lagi
dengan double click), klik kanan lalu pilih "Scale".
Drag ujung atasnya sehingga bentuknya menjadi memanjang.
Selamat, Anda sudah menyelesaikan keyframe yang berisi kondisi akhir dari jamur. Silahkan cek
frame 1 sampai dengan 17 dan bandingkan dengan frame 18. Langkah berikutnya adalah
memerintahkan Flash untuk membuat animasi pada frame 2 sampai dengan 17.
Rini Marwati – Yudi Wibisono 9 Matematika UPI – Versi 2013
4. Menambahkan Animasi
Sekarang saatnya menambahkan animasi dari kondisi awal (frame 1) ke kondisi akhir (frame 18).
Langkah pertama, klik bagian tengah frame (panah merah pada gambar dibawah).
Lalu lihat panel properties (biasanya ada di bagian bawah layar):
Isi frame label dengan "jamur tumbuh" dan tween dengan "shape".
Lihat perubahan pada panel timeline, sekarang terdapat tulisan "jamur tumbuh" dan panah.
Tekan enter dan .... Anda dapat melihat jamur kitta tumbuh besar!
Perhatikan panel timeline pada saat animasi, terlihat bahwa Flash bergerak dari frame 1 ke
frame 18. Coba juga klik frame 2-17 untuk melihat bagaimana Flash membuat frame-antara.
Rini Marwati – Yudi Wibisono 10 Matematika UPI – Versi 2013
5. Menyempurnakan Kepala Jamur
Tambahkan detil kecil pada jamur yaitu lengkungan pada lingkaran bagian atas. Pilih arrow tool
dan pilih frame 18. Arahkan mouse ke bagian atas garis sehingga kursor berubah,
lalu tarik ke bagian atas sehingga menjadi:
Coba tekan enter untuk melihat animasi. Perhatikan bahwa Flash secara otomatis akan
menyesuaikan frame-antara (frame 2-17).
Demikianlah akhir dari materi ini. Pada materi Selanjutnya Anda akan bermain dengan layer dan
beberapa tools Flash untuk membuat bulan, tulisan, rumput.
Menambahkan Gambar Latar
Setelah berhasil membuat jamur yang beranimasi. Sekarang saatnya kita menambahkan sedikit
latar belakang.
Rini Marwati – Yudi Wibisono 11 Matematika UPI – Versi 2013
Latar belakang yang akan kita buat adalah: bulan, papan pengumuman bertuliskan "Keep Out"
dan beberapa rumput.
Kita akan tambahkan latar tersebut pada layer yang berbeda. Layer dapat dianalogikan sebagai
lapisan transparan. Sebuah dokumen Flash dapat terdiri atas beberapa layer yang saling
bertumpukan. Suatu layer dapat di-edit tanpa mengganggu layer yang lain.
Dalam film yang kita buat, telah ada satu layer yang menggambarkan jamur tumbuh. Kita akan
tambahkan layer yang lain yaitu latar belakang.
Berikut adalah langkah-langkahnya:
1. Tambah Layer Baru
Untuk menambahkan layer baru, tekan tombol pada panel timeline (lihat gambar)
Rini Marwati – Yudi Wibisono 12 Matematika UPI – Versi 2013
Terlihat bahwa Flash menambahkan Layer2 di atas Layer1. Perhatikan juga bahwa Layer2
memiliki frame yang terpisah dengan Layer1, ini berarti kita bisa memiliki animasi yang
independent antar layer.
Agar tidak membingungkan, sangat dianjurkan untuk memberi nama setiap layer. Kita akan
mengganti Layer1 dengan "Jamur" dan Layer2 dengan "Latar Belakang". Caranya dengan men-
double klik tulisan Layer1 dan Layer2. Setelah dalam mode edit, Anda dapat mengganti
namanya.
Untuk memilih suatu layer, klik judul layer.
Pilihlah layer "Latar Belakang" lalu posisikan frame pada nomor 1, pilih warna kuning disusul
oval tool. Buatlah bulan berwarna kuning di atas jamur.
Sekarang coba arahkan lihat frame 18, jika gambar bulan Anda bersinggungan dengan jamur,
maka gambar bulan akan terletak di depan jamur. Hal ini tentu saja tidak kita inginkan. Mengapa
Rini Marwati – Yudi Wibisono 13 Matematika UPI – Versi 2013
ini terjadi? Karena saat menambahkan suatu layer baru, Flash akan meletakkannya di atas layer
yang sudah ada. Artinya layer "Latar Belakang" ada di atas layer "Jamur".
Untuk mengubah urutan layer, klik layer "Jamur" pada panel timeline lalu drag ke atas layer
"Latar Belakang" (gambar bawah)
Posisi kedua layer akan bertukar dan gambar bulan sekarang ada di belakang gambar jamur.
3. Menyembunyikan Layer
Ada tiga hal yang dapat kita lakukan pada sebuah layer:
1) Menyembunyikannya.
2) Mengunci (agar tidak ter-edit secara tidak sengaja) dan
3) Tampilkan kerangkanya saja (mempercepat proses tampilan di layar)
Untuk menyembunyikan layer, klik titik putih pada layer yang kita akan sembunyikan (lihat
panah). Silahkan sembunyikan layer jamur agar kita lebih mudah mengedit layer later belakang.
Rini Marwati – Yudi Wibisono 14 Matematika UPI – Versi 2013
Untuk mengunci, klik titik di bawah icon kunci gembok, dan untuk kerangka gambar, klik titik di
bawah icon kotak.
Ingat jika Anda mengunci layer, layer tidak akan bisa diedit! Akan keluar pesan kesalahan jika
kita berusaha mengedit.
Untuk memunculkan layer atau membuka kunci, tekan titik yang sama.
4. Tambah Kotak Peringatan
Langkah selanjutnya adalah membuat kotak berisi peringatan agar jamur kita tidak diganggu.
Pilih warna kuning agak gelap lalu, pilihlah rectangle tools, perhatikan bahwa isi panel option
juga berubah.
Karena kita menginginkan kotak dengan ujung yang membulat, pilih tombol pada panel option
"Round Rectangle Radius". Isi corner radius dengan 15.
Rini Marwati – Yudi Wibisono 15 Matematika UPI – Versi 2013
Letakkan kotak tersebut di bagian kiri stage. Selanjutnya kita akan menuliskan kata "Keep Out"
di dalam kotak tersebut. Pilihlah "Text Tools".
Isi property dengan jenis huruf dan warna yang Anda kehendaki.
Arahkan kursor ke dalam kotak dan ketikkan kata "Keep Out", jika hurufnya terlalu besar jangan
khawatir, nanti kita akan mengecilkannya. Untuk mengatur ukuran, blok dulu teks yang akan kita
ubah (seperti memblok teks pada Microsoft Word).
Rini Marwati – Yudi Wibisono 16 Matematika UPI – Versi 2013
Setelah diblok, aturlah ukuran huruf agar masuk ke dalam kotak kuning di belakangnya (tersedia
pada panel properties). Jangan khawatir jika posisi teks masih belum tepat di tengah, hal
tersebut akan kita tangani kemudian.
Langkah selanjutnya adalah menggeser teks agar tepat di tengah.
Klik arrow tool. Kemudian pilih kotak di sekitar tulisan sehingga warnanya berubah menjadi
biru. Anda dapat memindahkan text dengan men-drag-nya.
Jika suatu saat Anda ingin mengedit isi teks, lakukan dengan memilih arrow tools disusul
dengan double klik pada teks
5. Tambahkan Tiang Penopang Papan dan Horizon
Agar papan peringatan yang kita buat tidak terkesan melayang, kita harus membuat tiang
penopang. Gunakan line tools untuk membuat garis di Flash.
Pilih warna dan ukuran yang dikehendaki melalui panel properties.
Rini Marwati – Yudi Wibisono 17 Matematika UPI – Versi 2013
Pilih titik awal di stage lalu drag sehingga membentuk tiang penopang
Lakukan hal yang sama untuk membuat horizon
6. Menambahkan Rumput
Untuk menggambar bebas, Flash menyediakan pencil tools
Ada beberapa option untuk tools ini
Straighten: Gambar akan diluruskan oleh Flash, termasuk jika kita menggambar lingkaran.
Smooth: untuk membuat lengkungan
Ink: untuk menggambar bebas. Flash akan membiarkan gambar kita apa adanya.
Rini Marwati – Yudi Wibisono 18 Matematika UPI – Versi 2013
Silahkan coba setiap option, Anda dapat menekan ctrl-Z untuk meng-Undo. Untuk membuat
rumput di bawah papan peringatan, gunakan option Ink. Hasilnya akan tampak sebagai berikut:
7. Menambahkan Kawah
Untuk menambahkan kawah, zoom bagian bulan. Zoom bisa dilakukan dengan dua cara.
1) Menggunakan tools view
View memiliki dua buah options:
Drag wilayah yang akan di-zoom (dalam hal ini adalah gambar bulan), atau klik bagian stage
untuk zoom secara umum. Untuk mengembalikan stage pada ukuran semula, pilih kaca
pembesar dengan tanda minus pada bagian option.
2) Menggunakan drop-down yang terdapat di bagian kanan atas stage.
Rini Marwati – Yudi Wibisono 19 Matematika UPI – Versi 2013
Tambahkan tiga buah kawah berwarna putih di permukaan bulan. Hasilnya adalah sebagai
berikut: