BAGIAN 2 Animasi Movie Clip Dan Button

5/16/2018 BAGIAN 2 Animasi Movie Clip Dan Button - slidepdf.com

http://slidepdf.com/reader/full/bagian-2-animasi-movie-clip-dan-button 1/13

Membuat Media Pembelajaran Interaktif Dengan Flash

Oleh : Farid Suryanto

[email protected]

13

BAGIAN 2MEMBUAT ANIMASI, MOVIE CLIP DAN BUTTON

Animasi Sederhana pada Flash

Animasi Perpindahan Benda

Menggunakan Flash, dengan mudah kita bisa membuat animasi sederhana yangnantinya bisa dikembangkan menjadi animasi yang lebih menarik. Sebagai contoh, kitaakan membuat animasi perpindahan bola sebagai berikut:Pada Layer 1:

1. Buatlah objek bola pada Frame 1 (bola tersebut akan menjadi posisi awaldalam animasi perpindahan).

2. Klik kanan pada Frame 40, pilihlah insert KeyFrame.

3. Blok pada frame 40 hingga frame 1, klik kanan, dan pilihlan CreateMotionTween. Jika berhasil, maka terdapat tanda panah berwarna ungu dariframe 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





[email protected]

14

pada frame 2 maka lakukanlah test movie dengan menekan Shift+enter padaKeyboard.

Animasi Penghilangan Benda

Animasi ini bisa digunakan untuk menghilangkan benda secara gradasi ataumemunculkan 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 akandianimasikan bergerak sesuai dengan lintasan yang telah dibuat. Ikuti langkah berikut

untuk menggerakkan bola sesuai dengan lintasan:





[email protected]

15

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

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

3. Klik frame 1 layer 1 dan seleksilah objek bola. Posisikan bola tepat pada ujungatas lintasan (sebagai posisi awal).

4. Klik frame 2 layer 1 dan seleksilah objek bola, posisikan tengah-tengah bolatepat pada ujung bawah lintasan.

5. Lakukan test movie dengan menekan tombol enter. Perhatikan, animasi yangdihasilkan akan mengikuti lintasan yang sudah dibuat. Untuk menyembunyikanlintasan, 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

Add Motion Guide

Lintasan

menggunakan

Pencil Tool





[email protected]

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. LakukaninsertKeyFrame pada layer 30 dan berilah warna kuning. Lakukan hal yangsama pada frame 60 dan berilah warna biru. Pada layer 75, lakukan jugaisertKeyFrame dan berilah warna ungu.

3. Blok layer 1 dari frame 76 sampai frame 1 kemudian pilih Motion Shape padaProperties. Jika warna sudah terdapat panah dan kotak frame layer 1 sudahberwarna hijau berarti animasi perubahan warna sudah berhasil.

4. Untuk membuat kererangan niai pH, buatlah menggunakan static text padalayer 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 diatasmenunjukkan nilai pH = 4, menunjukkan tampilan pada frame 10.

Animasi Perubahan Benda Selain animasi perpindahan, kita juga bisa membuat animasi perubahan benda sepertimengubah objek lingkaran menjadi segi empat. Ikuti langkah berikut:Pada Layer 1:

1. Buatlah objek lingkaran pada frame 1.





[email protected]

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 beradapada sebelah kiri obyek garis (seperti di atas), posisi 2 (frame 20) menutupsemua 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 padalayer 1 frame 40 kemudian insert frame.





[email protected]

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 persisseperti pada lembar kerja flash induknya. Perhatikan ilustrasi dibawah ini:

Tanda bahwa efek masking telah berhasil (kedua layer terkunci, terdapat tanda lingkaran pada

layer 2)





[email protected]

19

Scene adalah lembar kerja utama. Didalam scene bisa dibuat MovieClip 1 yangdidalamnya 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 didalamMovieClip. 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.





[email protected]

20

Seleksi gambar bola dan perhatikan kotak dialog pada Properties. Jikatampilan sudah seperti tampilan dibawah ini, maka Movie Clip sudah berhasildibuat.

Movie Clip Menunjukkan bahwa objek sudah dalam bentukMovieClip

<Instance Name> Nama yang diisikan menunjukkan identitas MovieClip

W Lebar gambar dalam pixel

H Tinggi gambar dalam pixelX 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 sepertilembar Flash utama.

5. Di dalam MovieClip bola, buatlah animasi perpindahan sedemikian rupasehingga seperti bola yang memantul-mantul.

6. Klik Scene 1 seperti pada bagian yang dilingkari diatas untuk kembali padalembar kerja utama. Perhatikan Time Line pada lembar kerja utama, makahanya akan terlihat satu frame saja yang terisi objek namun ketika dilakukantest 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 sehinggamenjadi pantulan bola yang bergerak. Jadi, selain bola akan bergerak memantul-

mantul juga akan bergerak dari posisi 1 ke posisi 2. Ikuti langkah berikut:

Untuk membuat

animasi pantulan bola,

buatlah motion tween

dengan posisi awal pada

frame 1, posisi kedua

pada frame 5, dan posisi

ke‐tiga pada frame 10.





[email protected]

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 berbagaimacam 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 yanganda 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 tombolberbentuk oval. Pastikan desain yang kita buat berada pada layer dan frameyang sama. Misalnya kita akan membuat tombol dengan bentuk :

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





[email protected]

22

3. Seleksi semua objek tombol dengan cara mengklik dobel pada gambar ataumenseleksi frame dimana gambar itu dibuat. Setelah terseleksi, klik kanan danpilih 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 klikHit Kondisi saat mouse diangkat

- Lakukan isertKeyFrame pada frame Over lalu perbesar ukuran tombokmenggunakan Free Transform. Ubah juga warna teks dengan warna putih.

- Lakukan isertKeyFrame pada frame Down dan ubahlah warna teksmenjadi kuning.

- Lakukan test movie untuk melihat hasilnya. Untuk kembali ke lembar kerjautama, klik dobel pada lembar kerja atau klik pada Scene 1.

Klik

disini

terlebih

dahulu

Lalu klik disini, maka akan

muncul kotak dialog seperti

disamping. Isi Corner Radius

dengan angka 10, lebih besar

angka lebih besar pula

lengkungan.





[email protected]

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

Gambar 1 Gambar 2

Frame sudah

terisi efek suara.





[email protected]

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 berbedadengan file Pfoject-nya jangan berikan tanda cek pada Use default names laluisilah nama file pada kotak Filename.

- Anda juga bisa melakukan pengaturan, misalnya ingin membuat Pasword

untuk file Flash Movie dengan cara memilih kotak pengaturan Flash.

Pengaturan Flash





[email protected]

25

- Untuk bisa menjalankan file ini, computer Anda harus sudah teristal FlashMovie 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 jugabisa melakukan pengaturan-pengaturan lain sesuai kebutuhan Anda.

Menyimpan File dalam Windows Projector

File ini merupakan file aplikasi yang bisa dibuka disemua computer yang memakaisystem 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

Transcript of BAGIAN 2 Animasi Movie Clip Dan Button