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-lan