BAGIAN 2 Animasi Movie Clip Dan Button

Embed Size (px)

Text of BAGIAN 2 Animasi Movie Clip Dan Button

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

BAGIAN 2 MEMBUAT ANIMASI, MOVIE CLIP DAN BUTTON

Animasi Sederhana pada FlashAnimasi Perpindahan Benda Menggunakan Flash, dengan mudah kita bisa membuat animasi sederhana yang nantinya bisa dikembangkan menjadi animasi yang lebih menarik. Sebagai contoh, kita akan membuat animasi perpindahan bola sebagai berikut: Pada Layer 1: 1. Buatlah objek bola pada Frame 1 (bola tersebut akan menjadi posisi awal dalam animasi perpindahan). 2. Klik kanan pada Frame 40, pilihlah insert KeyFrame.

3. Blok pada frame 40 hingga frame 1, klik kanan, dan pilihlan Create MotionTween. Jika berhasil, maka terdapat tanda panah berwarna ungu dari frame 1 sampai frame 40.

4. Klik pada frame 40, seleksi objek bola, dan pindahkan bola ke posisi lain (posisi tujuan). Klik frame 1, Jika posisi bola pada frame 1 berbeda dengan posisi bola 13

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

pada frame 2 maka lakukanlah test movie dengan menekan Shift+enter pada Keyboard. Animasi Penghilangan Benda Animasi ini bisa digunakan untuk menghilangkan benda secara gradasi atau memunculkan benda secara gradasi. 1. Buatlah objek lingkaran pada frame 1. 2. Lakukan Insert Key Frame pada frame 20 dan frame 40. 3. Blok seluruh frame, klik kanan, pilih Create Motion Tween.

4. Klik objek yang berada pada frame 1. Pada Properties, atur nilai alpha menjadi 0% seperti berikut:

Lakukan hal yang sama untuk objek pada frame 40. 5. Lakukan Test Movie dengan menekan Ctrl+Enter. Gambar akan muncul secara perlahan dan hilang secara perlahan pula.

Animasi Perpindahan Benda Menggunakan Motion Guide Motion Guide berfungsi untuk membuat lintasan sehingga benda yang akan dianimasikan bergerak sesuai dengan lintasan yang telah dibuat. Ikuti langkah berikut untuk menggerakkan bola sesuai dengan lintasan: 14

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

1. Setelah dibuat animasi perpindahan bola seperti diatas, pilihlah Add Motion Guide seperti ditunjukkan pada gambar berikut:

AddMotionGuide

2. Klik frame 1 pada layer motion guide dan buatlah lintasan menggunakan Pencil Tool.

Lintasan menggunakan PencilTool

3. Klik frame 1 layer 1 dan seleksilah objek bola. Posisikan bola tepat pada ujung atas lintasan (sebagai posisi awal). 4. Klik frame 2 layer 1 dan seleksilah objek bola, posisikan tengah-tengah bola tepat pada ujung bawah lintasan. 5. Lakukan test movie dengan menekan tombol enter. Perhatikan, animasi yang dihasilkan akan mengikuti lintasan yang sudah dibuat. Untuk menyembunyikan lintasan, silanglah pada tanda mata di Time Line.

Animasi Perubahan Warna Sebagai contoh, kita akan menganimasikan perubahan warna pada indikator universal yang digunakan untuk mengetahui kadar pH pada pelajaran Kimia. Desain yang kita 15

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

buat adalah : warna pada kertas indikator akan berubah berdasarkan nilai pH, ditunjukkan seperti table berikut: pH 3 4 5 6 7 8 9 10 Warna Indikator Universal Merah Merah jingga Jingga Kuning Hijau Kekuningan Biru Kehijauan Biru Ungu

1. Buatlah dua layer, layer 1 untuk membuat animasi perubahan warna dan layer 2 untuk memberikan keterangan nilai pH.

2. Buat kotak pada layer 1 frame 1 dan berilah warna merah. Lakukan insertKeyFrame pada layer 30 dan berilah warna kuning. Lakukan hal yang sama pada frame 60 dan berilah warna biru. Pada layer 75, lakukan juga isertKeyFrame dan berilah warna ungu. 3. Blok layer 1 dari frame 76 sampai frame 1 kemudian pilih Motion Shape pada Properties. Jika warna sudah terdapat panah dan kotak frame layer 1 sudah berwarna hijau berarti animasi perubahan warna sudah berhasil. 4. Untuk membuat kererangan niai pH, buatlah menggunakan static text pada layer 2 dan tempatkan pada frame yang sesuai. Misalnya pH < 3 pada frame 1, pH = 4 pada frame 10, pH = 5 pada frame 20, dan seterusnya. Gambar diatas menunjukkan nilai pH = 4, menunjukkan tampilan pada frame 10. Animasi Perubahan Benda Selain animasi perpindahan, kita juga bisa membuat animasi perubahan benda seperti mengubah objek lingkaran menjadi segi empat. Ikuti langkah berikut: Pada Layer 1: 1. Buatlah objek lingkaran pada frame 1. 16

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

2. Klik kanan frame 40, pilihlah Insert Blank KeyFrame dan buatlah objek persegi. 3. Blok dari frame 40 hingga frame 1. Perhatikan kotak dialog Properties, pada kolom Tween pilihlah Shape Tween. Animasi berhasil jika pada frame 1hingga 40 terdapat tanda panah berwarna hijau.

4. Lakukan test movie.

Membuat Efek Masking Menggunakan MotionTweenEfek masking adalah efek untuk menyembunyikan bagian obyek yang kita inginkan ketika animasi dijalankan. Perhatikan langkah berikut ini; 1. Buatlah garis pada layer 1 dan kotak pada layer 2 seperti gambar dibawah ini;

2. Buatlah motiontween pada layer 2 (kotak) dengan posisi; pada frame 1 berada pada sebelah kiri obyek garis (seperti di atas), posisi 2 (frame 20) menutup semua obyek garis, posisi 3 (frame 40) berada di sebelah kanan obyek garis. 3. Tampilkan obyek garis (layer 1) hingga frame 40 dengan cara klik kanan pada layer 1 frame 40 kemudian insert frame.

17

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

4. Click kanan pada layer 2 dan pilih mask sehingga tampilan pada layer berubah seperti dibawah ini;

Tandabahwaefekmaskingtelah berhasil(kedualayerterkunci, terdapattandalingkaranpada layer2) 5. Cobalah efek yang sudah dibuat dengan menekan ctrl+enter.

Movie Clip dan ButtonJika seluruh tampilan pada Flash Player digambarkan sebagai sebuah movie, maka movie clip merupakan sub-movie. Dalam movie clip juga terdapat lembar kerja persis seperti pada lembar kerja flash induknya. Perhatikan ilustrasi dibawah ini:

18

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

Scene adalah lembar kerja utama. Didalam scene bisa dibuat MovieClip 1 yang didalamnya terdapat lembar kerja persis seperti lembar kerja utama. Dalam lembar kerja MovieClip 1 juga bisa dibuat MovieClip 2 yang didalamnya terdapat lembar kerja. Membuat Objek Movie Clip Sebagai contoh, kita akan membuat animasi pantulan bola yang dibuat didalam MovieClip. Ikuti langkah berikut: 1. Buatlah objek bola pada frame 1. 2. Dobel Klik pada bola. Setelah terseleksi, klik kanan dan pilihlah Convert to Symbol maka akan muncul kotak dialog seperti berikut:

3. Setelah muncul kotak dialog Convert to Symbol, pilihlah Movie Clip lalu OK.

19

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

Seleksi gambar bola dan perhatikan kotak dialog pada Properties. Jika tampilan sudah seperti tampilan dibawah ini, maka Movie Clip sudah berhasil dibuat.

Movie Clip W H X Y

Menunjukkan bahwa objek sudah dalam bentuk MovieClip Nama yang diisikan menunjukkan identitas MovieClip Lebar gambar dalam pixel Tinggi gambar dalam pixel Posisi koordinat x (posisi horizontal) gambar dalam lebar kerja Posisi koordinat y (posisi vertikal) gambar dalam lebar kerja

4. Dobel Klik pada bola, maka akan muncul lembar kerja Flash persis seperti lembar Flash utama. 5. Di dalam MovieClip bola, buatlah animasi perpindahan sedemikian rupa sehingga seperti bola yang memantul-mantul. Untukmembuat animasipantulanbola, buatlahmotiontween denganposisiawalpada frame1,posisikedua padaframe5,danposisi ketigapadaframe10.

6. Klik Scene 1 seperti pada bagian yang dilingkari diatas untuk kembali pada lembar kerja utama. Perhatikan Time Line pada lembar kerja utama, maka hanya akan terlihat satu frame saja yang terisi objek namun ketika dilakukan test movie, akan terlihat animasi pantulan bola. 7. Lakukan test movie dengan menekan Shift+enter.

Menganimasikan Movie Clip Selanjutnya kita akan menganimasikan Movie Clip pantulan bola di atas sehingga menjadi pantulan bola yang bergerak. Jadi, selain bola akan bergerak memantulmantul juga akan bergerak dari posisi 1 ke posisi 2. Ikuti langkah berikut: 20

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

1. Klik pada frame 40 dan lakukan insert KeyFrame. 2. Buat MovieClip bola sedemikian rupa sehingga posisi tujuan berbeda dengan posisi asal. 3. Blok pada frame 1 hingga 40 dan masukkan MotionTween. 4. Lakukan test movie. Membuat Tombol (Button) Pada Macromedia Flash sebenarnya sudah disediakan button dengan berbagai macam desain. Untuk memasangnya pilih Windows >> Common Libraries >> Buttons sehingga akan muncul tampilan berikut:

Seleksi frame pada layer yang akan anda berikan tombol kemudian tarik tombol yang anda pilih ke dalam lembar kerja, maka tombol tersebut sudah siap digunakan. Namun jika anda ingin membuat tombol sesuai keinginan anda, lakukan prosedur berikut: 1. Buatlah desain tombol terlebih dahulu. Misalnya kita akan membuat tombol berbentuk oval. Pastikan desain yang kita buat berada pada layer dan frame yang sama. Misalnya kita akan membuat tombol dengan bentuk :

2. Pilih Rectangle Tool dan klik pada bagian yang dilingkari:

21

MembuatMediaPembelajaranInteraktifDenganFlash Oleh:FaridSuryantofareed_surya@yahoo.com

Klikdisiniterlebihdahulu

Laluklikdisini,makaakan munculkotakdialogseperti disamping.IsiCornerRadius denganangka10,lebihbesar angkalebihbesarpula lengkungan.

3. Seleksi semua objek tombol dengan cara mengklik dobel pada gambar atau menseleksi frame dimana gambar itu dibuat. Setelah terseleksi, klik kanan dan pilih Convert to Symbol. 4. Pilih