tutorial_flash_bag_1_ver4_1.doc

Pengantar Macromedia Flash

TUTORIAL DASAR-DASAR ANIMASI (Bagian 1)

Yudi [email protected]

Versi Dokumen: 4.1 (Mei 2010)

http://creativecommons.org/licenses/by-nc-sa/3.0/Modul ini bebas dicopy, didistribusikan , ditransmit dan diadaptasi/modifikasi/diremix dengan syarat tidak untuk komersial, pembuat asal tetap dicantumkan dan hasil modifikasi dishare dengan lisensi yang sama.

http://creativecommons.org/licenses/by-nc-sa/3.0/

mailto:[email protected]

Daftar IsiDaftar Isi..........................................................................................................2Pendahuluan....................................................................................................3

Apa Macromedia Flash?..............................................................................3Mengapa menggunakan Flash?....................................................................4Mengenai tutorial ini....................................................................................4Lingkungan Kerja Flash...............................................................................5

Tutorial Pertama: Animasi Sederhana.............................................................6Mengatur Document Properties...................................................................6Animasi Jamur.............................................................................................7Menambahkan Gambar Latar....................................................................12

Tutorial Kedua: Simbol dan Libraries...........................................................20Membuat Simbol Grafis.............................................................................20Membuat Simbol Button (Tombol)...........................................................23Membuat Simbol Movie Clip....................................................................25

Tutorial Ketiga: Motion Tweening...............................................................28Group dan Ungroup...................................................................................28Menambahkan Motion Tweening..............................................................30

Menambahkan Rotasi.............................................................................30Easing.....................................................................................................31Motion Tweening Effect........................................................................33Motion Guide.........................................................................................34

Bersambung…...............................................................................................36Lanjutan Tutorial berikutnya: Shape Tweening dan Masking......................36

Pengantar Macromedia Flash: Dasar-Dasar Animasi 2

Pendahuluan

Apa 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. Simulasi3. Permainan4. Navigasi situs web.5. Aplikasi web.6. Iklan

Flash juga dapat digunakan sebagai salah satu media untuk pembelajaran. Karena selain kemampuan animasi, Flash juga mampu menangani aspek interaktif antara film Flash dengan pengguna.

Contoh-contoh pengunaan Flash:

1. Animasi pendidikan: http://www.edumation.org2. Game pendidikan: http://www.prongo.com

Sebagai perancang, File Flash yang Anda buat (disebut Flash document, berekstensi .fla) berisi semua informasi untuk mengembangkan, merancang, dan mengetes interaksi. Kemudian, Flash document akan di-export menjadi Flash Movie atau film Flash, yang berekstensi .swf. Film Flash ini yang akan diputar/dijalankan oleh pengguna dengan software Flash Player. Jika dianalogikan dengan pemrograman, file .fla adalah source code dan file .swf adalah executable-nya.

Software Flash Player ini dapat di-donwload gratis di situs http://www.macromedia.com . Umumnya browser yang ada saat ini telah dilengkapi dengan Flash Player.

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 harddisk5. 16-bit monitor warna yang bisa menampilkan resolusi 1024 x 768 resolution 6. CD-ROM drive


http://www.macromedia.com/

http://www.prongo.com/

http://www.edumation.org/

Mengapa menggunakan Flash?

Dibandingkan dengan media lain, Flash memiliki keuntungan sebagai berikut:1. Ukuran file-nya kecil, karena khusus dirancang untuk digunakan pada web.

Ukuran yang lebih kecil membuat waktu loading situs lebih pendek. 2. Memiliki sisi interaktif. Flash bisa menerima masukan dari pengguna.3. Tidak perlu memiliki kemampuan sebagai programmer untuk membuat Film

Flash. Walaupun jika Anda bisa membuat program, hal itu menjadi nilai tambah, karena Flash menyediakan sebuah bahasa pemrograman yang disebut Action Script

Point 2 dan 3 tidak dibahas pada tutorial ini.

Mengenai tutorial ini

Berikut beberapa penjelasan mengenai tutorial ini: Tutorial ini ditujukan bagi para pemula. Anda dianggap telah menguasai dasar-

dasar interaksi pada windows seperti, mengklik objek, double klik, men-drag dan sebagainya.

Flash yang digunakan dalam tutorial ini adalah Flash 8. Tutorial bagian I ini terdiri atas enam pokok bahasan, yaitu animasi sederhana,

simbol dan libraries, motion tweening, shape tweening, mask dan masking, dan suara. Tutorial ini menyajikan dasar-dasar membuat gambar dengan Flash dan membuat animasi.

Setelah menyelesaikan tutorial ini, Anda diharapkan mampu menguasai dasar-dasar pembuatan gambar dan animasi dengan flash.Anda mampu membuat berbagai animasi dengan Macromedia Flash (tetapi belum dengan interaksi dengan pengguna).

o Jika Anda seorang guru atau dosen, Anda dapat membuat film animasi Flash untuk menjelaskan suatu konsep sehingga peserta didik lebih memahami konsep tersebut.

o Jika Anda seorang pembuat web, Anda dapat menambahkan animasi, sehingga web menjadi lebih menarik untuk dilihat.

Dianjurkan untuk mengikuti tutorial ini tahap demi tahap (tidak meloncat). Anda dapat menambah kecepatan pada bagian yang mudah.

Jangan khawatir berbuat salah, gunakan fasilitas Undo (ctrl-Z) untuk mengembalikan hasil kerja seperti semula dan Redo (ctrl-Y) untuk sebaliknya.

Silahkan kembangkan kreativitas Anda. Tidak perlu mengikuti secara persis apa yang ada di tutorial ini.

Sumber dari tutorial ini adalah buku “Foundation Flash 5” oleh Sham Bhangal dkk. dengan beberapa penyederhanaan.

Selamat menikmati dan selamat bersenang-senang!


Lingkungan Kerja Flash

Tampilan awal saat Flash dapat dilihat pada gambar berikut:

Pengantar Macromedia Flash: Dasar-Dasar Animasi

Panel Properties

5

Panel timelinePanel tools

stage

Pilih Flash Document

Flash menyediakan beragam panel (gambar di atas hanya menampilkan panel yang terpenting). Anda dapat me-minimize dengan mengklik gambar segitiga kecil di bagian kiri atas panel atau memindahkan panel dengan men-drag simbol di sebelah segitiga. Stage adalah tempat film akan berlangsung.

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!

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 (bagian tengah yang berwarna putih).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). Frame rate 12 fps artinya 12 gambar akan ditampilkan dalam satu detik.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 Pertama: 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 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. 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:

Usahakan agar kedua lingkaran jamur tidak saling bersentuhan satu sama lain.

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. Keyframe adalah frame utama yang menjadi patokan.

Untuk membuat animasi, kita perlu membuat kondisi awal dan kondisi akhir. Flash kemudian secara otomatis akan mengisi bagian tengah animasi.

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.

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, pilihlah 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. Kotak ini berarti frame 17 merupakan frame terakhir sebelum keyframe berikutnya dan semua frame pada bagian kiri frame ini memiliki isi yang sama dengan keyframe sebelumnya (yaitu frame 1). Untuk membuktikannya coba pilih frame antara frame 1 sd 17, Anda dapat lihat bahwa semua isinya sama. Hal ini disebabkan frame 2 sd 17 telah diisi secara otomatis oleh Flash.

3.Buat jamur pada kondisi akhir.Kita akan membuat kondisi akhir dari animasi jamur. Pilih kembali frame pada posisi 18 (frame terakhir).

Jamur yang kita buat sebelumnya saat ini berwarna abu-abu, artinya dalam mode terpilih.


Pilih selection tool lalu klik bagian mana saja dari stage untuk men-deselect. Sehingga akan menjadi:

Pilih bagian kepala jamur, lakukan 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)

Selanjutnya adalah menggarap bagian bawah jamur. Pilih lingkaran di bagian bawah (dengan double click), klik kanan lalu pilih "Free Transform".

Drag ujung atasnya sehingga bentuknya menjadi memanjang. Usahakan agar kedua lingkaran tidak bersentuhan satu sama lain.


Selamat, Anda sudah menyelesaikan keyframe yang berisi kondisi akhir dari jamur. Silahkan cek frame 1 sampai dengan 17 (kondisi awal) dan bandingkan dengan frame 18 (kondisi akhir). Langkah berikutnya adalah memerintahkan Flash untuk membuat animasi pada frame 2 sampai dengan 17.

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

5. Menyempurnakan Kepala Jamur

Tambahkan detil kecil pada jamur yaitu lengkungan pada lingkaran bagian atas. Pilih

selection tool dan pilih frame 18.

Arahkan mouse dengan hati-hati ke bagian atas garis sehingga kursor berubah menjadi

Kemudian tariklah kursor (drag) 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.

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

Terlihat bahwa Flash menambahkan Layer2 di atas Layer1 yang berarti Layer2 ada diatas Layer1. Perhatikan juga bahwa Layer2 memiliki frame yang terpisah dengan Layer1, ini berarti kita bisa memiliki animasi yang independen 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 ke 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 ini terjadi? Karena saat menambahkan suatu layer baru, Flash akan meletakkannya di atas layer yang sudah ada. Artinya layer "Latar Belakang" berada 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 LayerAda tiga hal yang dapat kita lakukan pada sebuah layer:

1) Menyembunyikannya. 2) Mengunci (agar tidak ter-edit secara tidak sengaja) 3) Menampilkan kerangka gambar (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 latar belakang.

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, klik kembali titik yang sama.

4. Kotak bertuliskan peringatan. Langkah selanjutnya adalah membuat kotak berisi peringatan. Pilih warna kuning agak gelap lalu, pilihlah rectangle tools (berada di sebelah oval tool), perhatikan bahwa isi panel option juga berubah.


Karena kita menginginkan kotak dengan ujung yang membulat, pilih tombol pada panel option "Set Corner Radius".

Isi corner radius dengan 15.

Pilih layer “latar belakang” (frame manapun) dan letakkan kotak tersebut di bagian kiri stage. Selanjutnya kita akan menuliskan kata "Keep Out" di dalam kotak tersebut.

Pilihlah "Text Tools".


Rectange Tools

Option

Set Corner Radius

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, pilih dulu teks yang akan kita ubah (seperti memilih teks pada Microsoft Word).

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 selection tool . Kemudian pilih 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 selection tools disusul dengan double klik pada teks

5. Tiang Penopang Papan dan HorizonAgar 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.

Pilih titik awal 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 iniStraighten: Gambar akan diluruskan oleh Flash, termasuk jika kita menggambar lingkaran.Smooth: untuk membuat lengkunganInk: untuk menggambar bebas. Flash akan membiarkan gambar kita apa adanya.


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. Kawah di BulanUntuk 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).


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.

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


Tutorial Kedua: Simbol dan Libraries

Materi yang dipelajari pada bagian ini adalah: pembuatan simbol grafis, simbol tombol (termasuk teks sebagai tombol) dan simbol movieclips. Kemudian dipelajari bagaimana men-share simbol antar file dan meng-impor bitmap ke dalam simbol.

Simbol pada Flash adalah komponen atau bagian dari Flash yang dapat disimpan dan digunakan kembali (reuse) bahkan pada film yang berbeda.

Manfaat penggunaan simbol:1. Film lebih mudah di-maintenance. 2. Film lebih cepat dibuat karena menggunakan simbol yang ada dibandingkan

membuat dari nol.3. Ukuran film flash menjadi lebih kecil.

Simbol terdiri atas tiga tipe:1. Simbol grafis.2. Simbol button (tombol)3. Simbol movie clip (cuplikan film)

Sekarang kita mulai dengan membuat simbol grafis.

Membuat Simbol Grafis

Simbol grafis adalah simbol gambar yang tidak memiliki aspek dinamis.

1. Menambahkan Simbol Buat film baru dengan File New lalu pilih “Flash Document” Tambahkan simbol dengan menu Insert New Symbol. Dialog akan muncul.

Ganti nama “Symbol 1” dengan “Simbol Grafis” dan pilih behaviour-nya “Graphic”


2. Mode Edit SimbolPerhatikan perubahan pada stage, kita sekarang bukan berada pada stage utama lagi, tetapi dalam mode edit simbol

Untuk kembali ke stage utama, klik tulisan “Scene 1”. Simbol Grafis kita akan disembunyikan. Untuk meng-editnya kembali, munculkan library dengan menu Window Library atau Alt-L.

Double klik gambar, jangan tulisannya (panah merah di bawah) atau preview-nya (panah merah di atas), untuk kembali dalam mode edit simbol.

3. Menambahkan tulisan pada simbol.Setelah Anda dalam mode edit simbol (pastikan dengan melihat bagian kiri atas stage, harus terlihat seperti gambar pada langkah 2).

Pilih text tools dan buat sebuah tulisan.

Klik selection tools, maka kotak di sekitar teks akan berubah menjadi biru (jika tidak, klik teksnya). Perhatikan panel properties, set koordinat x dan y dengan 0.


Perhatikan gambar teks di stage, teks akan berada tepat di tengah-tengah tanda +. Sekarang Anda telah mengetahui bahwa koordinat (0,0) suatu objek pada simbol berada di tengah. Ini berbeda dengan dengan stage utama yang koordinat (0,0) berada pada kiri atas.

4. Memasukkan Simbol pada Film.Pilih “scene 1”, tulisan kita tidak terlihat lagi (karena tulisan tersebut ada di simbol, bukan di stage utama). Buka library (alt-L), lalu drag simbol ke stage utama.

Buat tiga buah copy dari simbol (disebut instance) pada stage utama dengan mendrag simbol tiga kali.

5. Mengubah Simbol.Selanjutnya kita akan mengubah simbol dan melihat efeknya pada tiga instances yang baru ditambahkan di stage utama.


Buka kembali library dan double klik untuk masuk ke mode edit simbol. Ganti jenis huruf dan warna tulisan, dengan cara men-double klik teks, lalu blok (ctrl-A) dan pilih jenis huruf dan warna yang Anda kehendaki.

Kembali ke scene1, lihat pengaruhnya di stage utama. Ketiga instances simbol ini juga ikut berubah! Inilah manfaat utama dari simbol. Tanpa simbol, untuk mencapai efek yang sama, kita harus mengubah teks secara manual tiga kali. Apalagi kalau perubahan itu sering terjadi. Fitur ini akan memudahkan kita untuk me-maintenance film. Dengan simbol hanya satu teks yang disimpan. Sedangkan tanpa simbol, ketiga teks akan disimpan oleh Flash sehingga memperbesar ukuran film. Simbol ini juga dapat kita gunakan ulang pada film yang lain.

Membuat Simbol Button (Tombol)

Tombol memegang peranan penting karena pengguna dapat menggunakannya untuk berinteraksi dengan film yang kita buat. Tombol dapat menjadi alat navigasi dan tanda untuk memulai suatu aksi.

1. Mengubah Shape Menjadi SimbolPilih oval tools dan buatlah sebuah lingkaran. Pilih lingkaran tersebut dengan selection tools (ingat dengan double klik) lalu pilih menu Klik kanan Convert to Symbol (F8).

Beri nama “Simbol Button” dan pilih “Button” sebagai behavior lalu tekan “OK”. Pada library juga muncul simbol ini dengan icon yang berbeda dengan simbol kita sebelumnya.


2. Inisialisasi TombolLangkah berikutnya adalah membuat tombol bereaksi terhadap pengguna. Tekan double klik pada lingkaran (setelah Anda memilih selection tool). Terlihat bahwa kita masuk ke mode edit simbol, bagian lain dari stage terlihat tetapi dalam warna samar-samar.

Perhatikan perubahan pada panel timeline

Ada empat frame pada simbol tombol yaitu up,over, down dan hit. Up menggambarkan kondisi button normal, over menggambarkan kondisi button saat mouse lewat diatasnya, down saat button ditekan, dan hit untuk mendefiniskan area dimana pengguna dapat meng-klik tombol.

Dari lingkaran hitam di tengah, Anda dapat kenali bahwa baru frame “Up” saja yang menjadi keyframe. Untuk mendefinisikan setiap kondisi, Anda harus mengubah frame menjadi keyframe. Pilih frame “over” lalu tekan F6, dilanjutkan frame “down”, tekan F6 dan juga frame “hit”.

Cara alternatif yang lebih cepat adalah pilih frame tersebut dengan mouse sambil menekan ctrl. Setelah semua terpilih, tekan F6.

Sekarang pilih frame “Over”, ganti warna tombol kita dengan warna lain dengan

, dilanjutkan dengan frame “Down”. Pastikan ketiga warna tombol untuk frame Up, Over, Down berbeda. Frame “Hit” akan kita tangani nanti.


Untuk melihat hasilnya, pilih menu Control Test Movie atau ctrl-Enter.Coba arahkan mouse ke tombol, perhatikan perubahan warnanya sesuai kondisi normal, mouse berada di atas tombol, dan tombol ditekan.

Untuk keluar dari Test Movie, pilih menu File Close atau Ctrl-W atau tutup window.

3. Frame “Hit”Sekarang kita akan mengisi kondisi pada frame “Hit”. Pilih frame “Hit” dan pilih Rectangle Tool. Buat gambar kotak di atas tombol. Jangan khawatir jika hal itu menutupi semua tombol.

Coba lakukan lagi Test Movie (ctrl-Enter), lihat bahwa kotak akan hilang. Saat mouse mendekati button, sebelum mencapai lingkaran, kondisi button sudah berubah. Inilah fungsi dari frame “Hit”, yaitu untuk mendefinsikan area sensitif suatu tombol.

Membuat Simbol Movie Clip

Movie Clip adalah simbol ketiga dan terakhir. Jenis simbol ini memiliki peranan penting pada film Flash. Movie Clip adalah “film di dalam film”. Movie clip dapat mengandung multi layer, animasi, suara, gambar dan sebagainya.

Salah satu contoh movie clip yang sering digunakan adalah clip yang menggambarkan logo dan suara latar. Selama film berlangsung, logo secara berulang akan hilang dan muncul, dan suara latar akan selalu terdengar.

Langkah-langkah pembuatan simbol movie clip adalah sebagai berikut:

1. Mengubah kotak menjadi simbol.Karena dokumen flash yang ada sekarang sudah cukup penuh, close file sebelumnya (jangan lupa save lebih dulu) dan buat file baru. Pada stage utama buatlah kotak dengan rectangle tools (warna bebas), dan jadikan sebagai simbol (pilih dan tekan F8). Pastikan tipenya adalah movie clip dan berikan nama “Square Clip”.


2. Membuat animasi kotak Double klik kotak untuk masuk ke mode edit simbol. Perhatikan panel timeline, timeline pada simbol bekerja sama persis dengan timeline stage utama. Perbedaanya adalah segala aksi yang ada pada timeline ini hanya bersifat lokal, yaitu hanya berlaku terhadap movie clip ini.

Sekarang kita akan mulai membuat animasi. Klik frame 20 dan jadikan keyframe (F6). Selanjutnya pilih selection tool, pilih stage untuk men-deselect, lalu pilih bagian luar untuk melengkungkan kotak.

Lengkungkan sesuai dengan keinginan Anda.

Jadikan animasi seperti pada tutorial pertama. Pilih satu frame di antara 1 dan 20, dan pada panel properties isi tween dengan shape.

Tekan enter untuk mencoba animasi.


3. Memasukkan Movie Clip ke dalam Film

Sekarang kembali ke Scene 1. Coba buka window library (ctrl-L). Klik simbol dan perhatikan pada bagian preview di bagian atas (ditunjukkan oleh panah) terdapat tombol play. Silahkan coba fasilitas ini.

Lanjutkan dengan men-drag simbol “Square Clip” ke stage utama. Buat tiga instance dari clips ini. Lalu coba dengan Control Movie Test atau (Ctrl-Enter )

Perhatikan timeline pada stage utama, sama sekali tidak terlihat keyframe tambahan dan tween. Coba tekan Enter, tidak akan terjadi apa-apa. Ini disebabkan karena timeline film utama tidak terpengaruh oleh timeline simbol.

Berikutnya (masih pada stage utama), pilihlah frame 10 dan jadikan keyframe. Tambahkan instance movie clip ini. Coba jalan Movie Test, maka instance ini akan muncul pada frame ke-10 lalu hilang sebelum beranimasi. Mengapa? Karena instance ini hanya muncul di satu frame (frame 10). Sekarang tambahkan keyframe di frame 30. Lihat hasilnya dengan Movie Test. Terlihat bahwa tiga instance pertama beranimasi, lalu pada frame ke 20 sampai dengan 30 instance ke-4 mulai beranimasi. Hal ini menunjukkan bahwa walaupun simbol memiliki time-line yang independen dengan time-line utama, simbol menggunakan frame-rate yang sama dengan time-line utama.


Tutorial Ketiga: Motion Tweening

Materi yang dipelajari pada bagian ini adalah: Pembuatan animasi bergerak. Membuat group dan un-group. Efek tambahan saat animasi: rotasi, easing, motion effect (efek muncul dan menghilang), motion guide (animasi bergerak yang mengikuti suatu jalur tertentu)

Pada tutorial pertama (animasi Jamur) Anda telah mempelajari bagaimana membuat animasi sederhana. Prinsip animasi pada Flash adalah menambahkan tween di antara dua frame penting (keyframe).

Ada dua jenis tween: shape tween dan motion tween. Di tutorial pertama yang kita gunakan adalah shape tween. Pada tutorial ketiga ini, giliran motion tween yang akan kita coba.

Motion tween hanya dapat dilakukan terhadap simbol atau group. Oleh karena itu sebelum masuk ke materi Motion Tween akan dibahas terlebih dulu mengenai group sedangkan materi simbol telah dibahas pada tutorial kedua.

Group dan Ungroup

Group pada prinsipnya adalah mengelompokkan beberapa objek menjadi satu kesatuan.

Contohnya adalah jamur yang kita buat pada tutorial pertama. Jamur tersebut memiliki dua bagian, lingkaran bawah dan lingkaran atas. Tanpa group, jika kita ingin memindahkan jamur tersebut ke suatu posisi, yang harus kita lakukan adalah memindahkan satu persatu bagian jamur. Bagaimana jika kita ingin memutarnya? Itu juga harus dilakukan satu persatu. Bagaimana jika jamur kita terdiri atas 5 bagian? Akan semakin banyak waktu yang harus dikeluarkan. Dengan group, hal tersebut dapat dilakukan dengan lebih mudah.

Melakukan grouping objek sangat mudah, berikut langkah-langkahnya:1) Buat file baru2) Buat beberapa objek, misalnya lingkaran dan segiempat seperti gambar di bawah.


3) Objek lingkaran (1 buah), segiempat (3 buah) pada gambar diatas masih terpisah-pisah. Untuk meng-groupnya, pilih semua gambar yang akan di-group dengan cara memilih selection tool, lalu drag membentuk wilayah segiempat disekitar gambar sehingga keempat objek tersebut masuk.

4) Objek yang terpilih akan berubah warnya (bintik-bintik putih). Pililh menu Modify Group (Ctrl-G). Terlihat kotak berwarna biru di sekitar gambar. Sekarang gambar sudah di-group. Silahkan drag untuk memindahkannya. Cobalah fasilitas lain (klik kanan Free Transform).

5) Misalkan kita ingin memperbesar hanya bagian kepala. Bagaimana caranya? Kita tidak bisa men-select kepala orang ini karena sudah di-group! Salah satu cara adalah dengan meng-ungroup-nya terlebih dulu. Pilih gambar, lalu pilih menu Modify Ungroup (Ctrl-Shift-G). Anda sekarang bisa men-select bagian kepala. Double klik kepala, lalu klik kanan untuk memilih menu scale. Perbesar sedikit, atur posisinya agar di tengah dan selesai. Untuk memasukkan kepala dalam group lagi, lalukan kembali langkah 4.

6) Jika kita sering mengubah-ubah elemen dari suatu grup, langkah 5 pasti terasa kurang praktis. Alternatif lain yang lebih mudah adalah dengan masuk ke dalam mode edit group. Mirip seperti mode edit simbol, caranya dengan men-double klik gambar yang sudah di-group. Saat masuk ke mode edit group, bagian atas stage akan berubah menjadi berikut:

Klik stage untuk men-deselect. Lalu perbesar kepala seperti pada langkah 5 (select,scale). Setelah selesai, klik scene 1 untuk kembali ke stage utama. Gambar orang yang kita buat masih dalam keadaan ter-group, jauh lebih mudah bukan?


Menambahkan Motion Tweening

Perlu diingatkan lagi bahwa motion tween hanya dapat dilakukan pada simbol atau objek yang telah digroup. Bahkan untuk bentuk sederhana seperti rectangle atau lingkaran, tetap harus di-group atau dijadikan simbol terlebih dulu.

Sekarang kita coba menganimasikan gambar orang yang telah kita buat dari kiri ke kanan. Langkah-langkahnya sebagai berikut:

1) Pindahkan gambar orang ke bagian paling kiri.2) Pilih frame 20, lalu jadikan keyframe dengan F6.3) Geser gambar orang ke bagian paling kanan.4) Pilih frame diantara frame 1 dan 20 (misalnya frame 15).

Pada panel properties, pilih tween dengan Motion.

Coba animasi dengan menekan Enter. Gambar orang akan bergerak dari kiri ke kanan.

Anda juga dapat mengubah ukuran gambar, sehingga saat gambar bergerak ukurannnya juga berubah. Langkahnya adalah sebagai berikut:

Pastikan kotak scale di-check Pilih frame 20, ubah ukuran objek menjadi lebih besar. Lihat hasilnya dengan menekan enter.

Menambahkan Rotasi

Untuk menambahkan rotasi saat objek bergerak, pilihlah frame satu. Lihat frame properties

Isi rotate dengan CW (clock wise = searah dengan jarum jam), lalu isi kotak sebelahnya dengan 1 yang berarti objek akan berputar sekali sebelum mencapai tujuan, semakin besar nilai ini semakin banyak objek berputar. Tekan enter untuk melihat hasilnya. Nah, silahkan bermain-main dengan rotate dan jumlah perputaran.


Easing

Easing adalah proses mengatur akselerasi animasi dan kebalikannya. Anda dapat mengatur apakah animasi dimulai pelan kemudian akan semakin cepat (easing in) atau mulai cepat dan melambat (easing out). Dengan easing, animasi akan tampak lebih hidup. Contohnya adalah animasi benda jatuh, animasi ini harus menggunakan easing in karena semakin lama akan semakin cepat, sedangkan benda yang dilemparkan ke atas sebaliknya, semakin lama akan semakin lambat (easing out).

Efek easing dilakukan dengan mengisi nilainya pada frame properites. Nilai 0 berarti kecepatan animasi konstan. Nilai lebih besar dari 0 adalah easing out dan sebaliknya adalah easing in.

Sekarang kita coba efek ini dengan membuat sebuah animasi bola memantul. Animasi ini melibatkan dua bola, salah satu dengan easing dan yang lainnya animasi gerak biasa. Setiap bola diletakkan pada sebuah layer, sehingga terdapat dua layer. Harap diingat bahwa animasi motion tweening tidak bisa dilakukan jika ada dua objek yang terletak di satu layer, sehingga kita harus meletakkan setiap bola pada layer yang terpisah.

Berikut adalah langkah-langkahnya:1) Buat file baru2) Tambahkan lingkaran, jadikan sebagai simbol. Caranya dengan men-select seluruh

lingkaran dengan double klik, kemudian klik kanan dan pilih menu “Convert to Symbol” atau F8

Beri nama “bola” dengan behavior sebagai graphic.

3) Tambahkan keyframe pada frame 15 dan 30. Frame 1 sd 15 merupakan bagian saat bola turun, sedangkan frame 15 sd 30 bagian saat bola naik.


4) Sekarang kita akan membuat animasi saat bola jatuh ke bawah. Pilih frame 15 lalu Pindahkan bola ke bagian bawah stage (tip: lebih mudah dilakukan sambil menekan tombol Shift saat memindahkan bola). Tambahkan motion tween antara frame 1 dan 15. Coba animasi dengan menekan enter.

5) Kemudian buat animasi saat bola memantul ke atas. Pilih frame 30, karena posisi bola sudah diatas, kita tinggal menambahkan motion tween antara frame 15 dan 30. Timeline akan terlihat seperti berikut:

Cobalah animasi dengan menekan enter, terlihat bola jatuh kebawah dan memantul lagi keatas. Sekarang saatnya kita membuat bola kedua.

6) Tambahkan layer baru (ingat materi layer yang ada di tutorial jamur tumbuh). Beri nama layer pertama dengan bola1 dan layer kedua dengan bola2

7) Pada layer bola2, pilih frame 1, tambahkan simbol bola di sebelah bola pertama, dan buat animasi seperti pada langkah 1-5, sehingga stage dan time line akan menjadi:

Coba tekan enter, kedua bola itu akan turun dan naik secara bersamaan.

8) Sekarang saatnya menambahkan easing saat bola jatuh, pilih frame diantar 1 dan 15 (pastikan pada layer bola2), ubah isi ease menjadi -100 (minus 100, easing in).

Perhatikan efeknya, bola kedua akan jatuh semakin cepat. Terlihat lebih natural bukan? Hal ini sesuai dengan keadaan sesungguhnya bahwa saat benda jatuh akan mengalami percepatan.


9) Lanjutkan dengan memberikan easing out saat bola memantul keatas. Pilih frame antara 15-30 (sekali lagi pastikan pada layer bola2) dan isi nilai Ease dengan 100 (positif 100, easing out). Terlihat bola akan melambat.

Motion Tweening Effect

Ada dua cara untuk membuat sebuah objek menghilang secara perlahan-lahan dan kebalikannya (dari hilang lalu muncul). Pertama dengan mengganti nilai alpha dan kedua adalah mengatur tint. Alpha berkaitan dengan nilai transparansi suatu objek dan tint berkaitan dengan warna.

Berikut langkah-langkahnya:1) Gunakan file bola memantul pada contoh sebelumnya. 2) Sekarang kita coba dengan menggunakan nilai Alpha. Pilih frame 15 pada layer

bola1. Pilih simbol bola, pada bagian properties, pilih Alpha sebagai color, dan ubah persentasenya menjadi 0%

Bola akan menghilang karena alpha 0% sama artinya dengan transparan penuh (seperti kaca tembus pandang). Tes animasi dengan menekan Enter.

3) Saatnya mencoba tint. Pilih frame 15 pada layer bola2. Pilih simbol bola. Pada bagian properties, ganti color dengan Tint, pilih warna putih dan persentase 100%. Coba jalankan animasi. Keduanya akan menghasilkan efek yang sama.

Alpha merupakan sifat transparan, dapat dianalogikan dengan penggunaan lapisan kaca buram yang semakin lama semakin jernih (nilai transparan semakin kecil).

Tint adalah warna, efek hilang terjadi karena warna bola sama dengan warna latar. Untuk membuktikannya silahkan ganti warna latar dengan warna selain warna putih dan warna bola (klik kanan stage dan pilih “Document Properties”). Dengan teknik alpha efek hilang tetap terjadi, tetapi untuk tint bola terlihat berubah warna menjadi putih.

Perbedaan antara alpha dan tint Kelebihan tint adalah lebih cepat, sedangkan teknik alpha membutuhkan komputasi yang lebih rumit sehingga lebih lambat. Teknik tint juga dapat digunakan untuk menghasilkan efek perubahan warna secara perlahan-lahan (misal dari warna biru ke warna merah).


Motion Guide

Motion guide adalah fasilitas untuk menentukan jalur pergerakan objek saat beranimasi.

Untuk lebih memahami konsep motion guide, ikuti tutorial berikut:1) Buat file baru2) Gambar objek apa saja. Dalam contoh ini yang digunakan adalah gambar ikan yang

dibuat dengan pencil tools (option: smooth). Lihat tutorial pertama untuk penggunaan pencil tools. Gunakan paint bucket tools untuk mengisi warna .

Hasilnya adalah sebagai berikut:

3) Jadikan simbol (select semua dan tekan F8). Beri nama simbol ini “Simbol Ikan”4) Tambahkan keyframe pada frame 205) Ganti nama layer1 dengan “Ikan”6) Pada panel timeline, klik icon dengan titik-titik merah yang melengkung (lihat gambar

bawah). Pastikan bahwa Anda telah menambah keyframe pada frame 20. Flash akan menambahkan satu layer baru “Guide Ikan”. Pada layer inilah kita tentukan lintasan animasi.

7) Buat jalur lintasan ikan kita pada layer “Guide Ikan”. Jalur ini bisa dibuat dengan pencil tools, rectangle tools, oval dan seterusnya. Yang penting ada garis lintasan. Warna dan bentuk garis tidak penting, karena tidak akan dimunculkan pada film akhir. Supaya tidak berubah-ubah, anda dapat me-lock layer ini.


8) Kembali ke layer ikan. Pilih frame 1, pilih selection tool, drag titik kecil di tengah ikan ke arah awal lintasan (kondisi awal). Pastikan bahwa snap to object terpilih (menu view snap to objects). Dengan snap secara otomatis titik kecil di tengah ikan akan “lengket” dengan lintasan. Ingat, lakukan tween pada layer ikan, bukan layer motion guide.

9) Pilih frame 20 (pastikan ada di layer ikan), lakukan seperti pada langkah 8, bedanya sekarang arahkan ikan pada ujung lintasan (kondisi akhir).

10) Tambahkan motion tween antara frame 1 sd 20 untuk layer ikan (pilih frame antara 1-20, lalu set tween dengan motion). Tes animasi dengan menekan Enter. Terlihat bahwa ikan sekarang mengikuti jalur sesuai dengan yang kita buat di layer “Guide Ikan”


11) Silahkan coba animasi Anda dengan Enter atau ctrl-Enter!

Bersambung…

Lanjutan Tutorial berikutnya: Shape Tweening dan Masking..


tutorial_flash_bag_1_ver4_1.doc

Documents