Bagian 2 Animasi Movie Clip Dan Button

MembuatMediaPembelajaranInteraktifDenganFlash

Oleh:[email protected]

13

BAGIAN 2 MEMBUAT ANIMASI, MOVIE CLIP DAN BUTTON

Animasi Sederhana pada Flash Animasi 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



14

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:



15

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

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

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

AddMotionGuide

LintasanmenggunakanPencilTool



16

buat adalah : warna pada kertas indikator akan berubah berdasarkan nilai pH, ditunjukkan seperti table berikut:

pH Warna Indikator Universal 3 Merah 4 Merah jingga 5 Jingga 6 Kuning 7 Hijau Kekuningan 8 Biru Kehijauan 9 Biru 10 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.



17

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 MotionTween

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



18

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

5. Cobalah efek yang sudah dibuat dengan menekan ctrl+enter. Movie Clip dan Button Jika 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:

Tandabahwaefekmaskingtelahberhasil(kedualayerterkunci,terdapattandalingkaranpada

layer2)



19

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.



20

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

Movie Clip Menunjukkan bahwa objek sudah dalam bentuk

MovieClip Nama yang diisikan menunjukkan identitas MovieClip W Lebar gambar dalam pixel H Tinggi gambar dalam pixel X Posisi koordinat x (posisi horizontal) gambar dalam

lebar kerja Y 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.

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 memantul-mantul juga akan bergerak dari posisi 1 ke posisi 2. Ikuti langkah berikut:

Untukmembuatanimasipantulanbola,buatlahmotiontweendenganposisiawalpadaframe1,posisikeduapadaframe5,danposisiketigapadaframe10.



21

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:



22

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 Button dan OK. 5. Dobel klik pada tombol maka akan muncul tampilan berikut:

Up Kondisi pada saat kursor tidak diatas tombol Over Kondisi saat kursor diatas tombol Down Kondisi saat mouse di klik Hit Kondisi saat mouse diangkat - Lakukan isertKeyFrame pada frame Over lalu perbesar ukuran tombok

menggunakan Free Transform. Ubah juga warna teks dengan warna putih. - Lakukan isertKeyFrame pada frame Down dan ubahlah warna teks

menjadi kuning. - Lakukan test movie untuk melihat hasilnya. Untuk kembali ke lembar kerja

utama, klik dobel pada lembar kerja atau klik pada Scene 1.

Klikdisiniterlebihdahulu

Laluklikdisini,makaakanmunculkotakdialogsepertidisamping.IsiCornerRadiusdenganangka10,lebihbesarangkalebihbesarpulalengkungan.



23

Memberi Efek Suara pada Tombol Untuk memperbagus tombol yang sudah dibuat, kita bisa menambahkan efek suara pada tombol. Lakukan prosedur berikut:

1. Klik dobel pada tombol untuk masuk ke lembar kerja tombol. 2. Buatlah layer baru dan lakukan insert Blank Key Frame pada frame 2 lalu

isikan sound dengan cara: - Pilih Windows >> Common Libraries >> Sounds maka akan muncul kotak

dialog seperti pada gambar 1. - Pilih efek suara yang anda inginkan dengan menarik file suara tersebut

pada lembar kerja, maka frame yang terisi file suara akan tampak seperti pada gambar 2.

3. Keluar dari lembar kerja tombol dan lakukan Test Movie.

Menyimpan File Ada dua jenis file dalam Flash yaitu file Project dan File Movie. File Projek (nama file.fla) adalah file yang masih berupa lembar kerja sehingga file ini bisa diedit. File Movie adalah file yang sudah di convert menjadi Movie. Misalnya dalam bentuk Flash Movie (nama file.swf), GIF Animated (nama file.gif), atau Windows Projector (nama file.exe).

Jenis file yang memiliki icon merah adalah jenis Flash Project (.fla), yang berwarna putih kecil adalah Flash Movie (.swf) dan yang berupa lingkaran besar adalah jenis windows projector (.exe).

Menyimpan File dalam Flash Project

Pilih File >> Save atau Save As dan berilah nama pada kotak File Name sesuai keinginan Anda.

Gambar1 Gambar2

Framesudahterisiefeksuara.



24

Menyimpan File dalam Flash Movie

Untuk menyimpan file dalam Flash Movie, cukup dengan melakukan Test Movie setelah kita menyimpan File Projeck maka secara otomatis akan tersimpan file jenis Flash Movie. Cara lain yaitu dengan mem-publish file menjadi Flash Movie dengan cara:

- Pilih File >> Publish Setting maka akan muncul tampilan sebagai berikut:

- Cek pada tipe Flash (.swf). Untuk menyimpan file dengan nama yang berbeda dengan file Pfoject-nya jangan berikan tanda cek pada Use default names lalu isilah nama file pada kotak Filename.

- Anda juga bisa melakukan pengaturan, misalnya ingin membuat Pasword untuk file Flash Movie dengan cara memilih kotak pengaturan Flash.

PengaturanFlash



25

- Untuk bisa menjalankan file ini, computer Anda harus sudah teristal Flash Movie Player.

Menyimpan File dalam Bentuk HTML

File HTML ini adalah jenis file yang bisa dibuka pada halaman Internet Explorer, Opera, Firefox, atau yang sejenis. Jika anda memilih penyimpanan dalam HTML maka secara otomatis juga akan akan menyimpan dalam bentuk Flash Movie (.swf). Hal ini karena HTML hanya merupakan kode untuk memanggil file Flash Movie untuk dijalankan pada halaman Internet Explorer. Agar file HTML ini bisa dijalankan maka komputer anda harus sudah terinstal program Flash Player.

Menyimpan File dalam GIF Animated

File ini biasanya digunakan dalam halaman web. Istilah yang lebih familiar adalah gambar bergerak. Jika Anda ingin membuat Wallpaper HP yang berupa Animasi, Anda bisa gunakan file jenis ini.

- Pilih File >> Publish Setting dan cek pada File Type GIF (.gif) lalu pilih kotak pengaturan GIF:

- Pilih Animated jika anda ingin membuat file gambar yang bergerak. Anda juga bisa melakukan pengaturan-pengaturan lain sesuai kebutuhan Anda.

Menyimpan File dalam Windows Projector File ini merupakan file aplikasi yang bisa dibuka disemua computer yang memakai system operasi Windows sehingga lebih aman untuk digunakan (tidak perlu khawatir tidak bisa dijalankan).

- Pilih File >> Publish Setting cek pada Windows Projector. - Pilih Publish lalu OK. - File aplikasi Anda sudah bisa dibuka.

Bagian 2 Animasi Movie Clip Dan Button

Documents