FLASH DASAR-DASAR ANIMASI

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 Matematika UPI – Versi 2013

1

B. Lingkungan Kerja Flash Kita bekerja pada dengan menggunakan Action Script 2. Tampilan awal saat Flash dapat dilihat pada gambar berikut:

Panel tools

Panel Properties

Panel timeline

stage

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!


2

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


3

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.


4

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.


5

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.


6

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)


7

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.


8

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.


9

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.


10

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)


11

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


12

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.


13

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.


14

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).


15

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.


16

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.


17

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.


18

Tambahkan tiga buah kawah berwarna putih di permukaan bulan. Hasilnya adalah sebagai berikut:


19

FLASH DASAR-DASAR ANIMASI

Recommend Documents