FLASH DASAR-DASAR ANIMASI - rinim.files.wordpress.com · Macromedia Flash (selanjutnya hanya...

19
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

Transcript of FLASH DASAR-DASAR ANIMASI - rinim.files.wordpress.com · Macromedia Flash (selanjutnya hanya...

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: