Membuat Animasi Tombol

Tutorial ini disusun kiranya bisa membantu pemula yang baru belajar Macromedia Flash maupun Adobe Flash, oleh karena itu langkah-langkah tutorial ini cukup panjang dan banyak.

 

1.       Buat dokumen baru (untuk adobe Flash, pilih Flash file actionscript 2.0), pada Panel Property (tekan Ctrl+F3) atur frame rate menjadi 24.

 

clip_image002

 

clip_image004

 

2.       Aktifkan Rectangle Tool clip_image006 lalu buka panel Property (tekan Ctrl+F3), ubah Rectangle Corner Radius menjadi 5, warna Outline hitam, warna Fill abu-abu (#CCCCCC), dan isi Stroke Heght dengan angka 1.

 

clip_image008

 

3.       Selanjutnya, buatlah objek pada stage (area kerja) seperti di bawah ini:

 

clip_image010

 

4.       Akfitkan Move Tool clip_image012, lalu seleksi pada objek yang telah anda buat dengan dobel klik (fungsi dobel klik disini agar objek rectangle yang telah dibuat dapat diseleksi baik fill maupun outline-nya)

 

5.       Tekan F8 (Convert to Symbol), pilih movie clip, isi name dengan kotak. Lalu klik OK.

 

clip_image014

 

6.       Dengan Move Tool, dobel klik objek movie clip tersebut untuk masuk ke ruang editnya.

 

clip_image016

 

7.       Dengan objek kotak yang masih terseleksi, tekan F8 (Convert to Symbol), pilih movie clip lagi.

 

clip_image018

 

8.       Klik Create New Layer untuk membuat layer baru

 

clip_image020

 

clip_image022

 

9.       Dengan Layer 2 yang aktif, aktifkan Text Tool clip_image024, atur Property Bar seperti gambar berikut:

 

clip_image026

 

10.   Pada area kerja (stage) ketikkan “My Button”.

 

clip_image028

 

11.   Dengan objek teks “My Button” masih aktif terseleksi, tekan F8 (Convert to Symbol), pilih movie clip, lalu tekan OK.

 

clip_image030

 

12.   Masih dengan layer 2, klik pada frame 5, lalu tekan F6 (insert keyframe).

 

clip_image032 

 

clip_image034

 

Selanjutnya, masih dengan layer 2, klik pada frame 9, lalu tekan F6 (insert keyframe)

 

clip_image036

 

clip_image038

 

13.   Klik kembali frame 5 (layer 2), kemudian tekan Ctrl+T untuk membuka panel Transform dan aturlah seperti gambar di bawah ini.

 

clip_image040

 

clip_image042

 

14.   Masih dengan layer 2, klik frame 1 tekan Shift dan tahan, lalu klik pada frame 9 (ini berfungsi untuk menyeleksi beberapa frame dari frame 1 sampai 9).

 

clip_image044

 

15.   Klik kanan di antara beberapa frame yang terseleksi tersebut, lalu pilih Create Motion Tween.

 

clip_image046

 

(Sekarang kita beralih ke Layer 1, langkah-langkahnya sama dengan apa yang kita kerjakan pada langkah-langkah 12 sampai 16)

 

16.   Klik layer 1, lalu klik pada frame 5. Kemudian tekan F6 (insert keyframe)

 

clip_image048

 

clip_image050

 

17.   Selanjutnya, masih dengan layer 2, klik pada frame 9, lalu tekan F6 (insert keyframe)

 

clip_image052

 

clip_image054

 

18.   Klik kembali frame 5 (layer 1), kemudian tekan Ctrl+T untuk membuka panel Transform dan aturlah seperti gambar di bawah ini.

 

clip_image056

 

clip_image042

 

19.   Dengan layer 1, klik frame 1 tekan Shift dan tahan, lalu klik pada frame 9.

 

clip_image058

 

20.   Klik kanan di antara beberapa frame yang terseleksi tersebut, lalu pilih Create Motion Tween

 

clip_image060

 

Kedua layer tersebut akan tampak seperti di bawah ini:

 

clip_image062

 

21.   Buat layer baru dengan mengklik Create New Layer (lihat langkah 8)

 

22.   Pada layer 3, klik frame 5, lalu tekan F7 untuk membuat keyframe kosong (blank keyframe).

 

clip_image064

 

clip_image066

 

(sekarang kita mulai menggunakan flash actionscript 2.0)

 

23.   Pada layer 3, klik frame 1, lalu tekan F9 (untuk membuka Panel Action), lalu ketikkan stop()

 

clip_image068

 

24.   Selanjutnya klik frame 5, lalu pada Panel Action, lalu ketikkan stop()

 

(Setelah diketikkan actionscript, pada kedua frame tersebut (frame 1 dan 5) akan tampak sebuah simbol a, ini menunjukkan bahwa pada frame tersebut terdapat actionscript)

 

clip_image070

 

25.   Klik Scene 1 (Ctrl+E) untuk keluar dari ruang edit objek movie clip kotak.

 

clip_image072

 

26.   Buatlah layer baru (layer 2), lalu klik frame 1 pada layer tersebut.

 

27.   Aktifkan Rectangle Tool, para Panel Property atur warna Fill dengan merah, dan Outline tanpa warna, kemudian buat objek kotak pada area kerja.

 

clip_image074

 

28.   Aktifkan Selection Tool, kemudian dobel klik pada objek kotak yang baru saja Anda buat.

 

29.   Dengan objek kotak yang baru kita buat masih aktif terseleksi, tekan F8 (convert to symbol), kemudian pilih Button, dan beri nama objek “tombolTransparan”. Klik OK.

 

clip_image076

 

(langkah untuk membuat sebuah objek tombol)

 

30.   Selanjutnya, dobel klik pada objek tombol yang baru Anda buat untuk masuk ke ruang editnya.

 

31.   Pada ruang edit objek tombolTransparan, klik pada frame Up, lalu geser ke frame Hit.

 

clip_image078

 

32.   Klik Scene 1 (Ctrl+E) untuk keluar dari ruang edit objek movie clip kotak.

 

clip_image080

 

clip_image082

 

(kembali ke Scene 1 dan objek tombolTransparan tampak seperti ini)

 

33.   Seleksi objek movieclip kotak (MyButton), lalu tekan Ctrl+F3 (membuka panel Properties). Isilah Instance Name isi dengan anim_kotak.

 

clip_image084

 

clip_image086

 

(pemberian nama Instance Name ini berfungsi agar objek dapat diperintah melalui actionscript)

 

34.   Klik objek tombolTransparan, atur letak dan ukuran tombolTransparan hingga sama dengan letak dan ukuran movie clip My Button.

 

clip_image088

 

(objek tombolTransparan menutupi objek movieclip My Button)

 

35.   Pastikan objek tombolTransparan masih terseleksi, lalu tekan F9 untuk membuka panel Action. Kemudian ketikkan script berikut:

 

clip_image090

 

Penjelasan actionscript:

 

on(rollOver): script untuk tombol yang berfungsi untuk menjalankan perintah saat tombol disorot oleh kursor mouse.

 

on(rollOut): script untuk tombol yang berfungsi untuk menjalankan perintah ketika kursor mouse melintas keluar dari area objek tombol.

 

anim_kotak.gotoAndPlay(2): anim_kotak diperintah untuk menjalankan frame 2.

 

anim_kotak.gotoAndPlay(6): anim_kotak diperintah untuk menjalankan frame 6.

 

36.   Tekan Ctrl+Enter (test movie) untuk melihat hasilnya.

 

Lihat hasilnya disini

About HSR

biasa aja
This entry was posted in Flash, Tutorial and tagged , . Bookmark the permalink.

2 Responses to Membuat Animasi Tombol

  1. Wanda aka Fanta! says:

    Kalau buttonnya lebih dari 1 bisa 2 atau 3), itu sama gak scriptnya ?😦

  2. HSR says:

    bisa, hanya saja instance name-nya untuk masing2 objek movieclip animasi dibuat berbeda, misalnya, anim_kotak1, anim_kotak2, anim_kotak3, lalu objek button transparan tinggal diduplikat, dan di masing2 objek button tersebut dituliskan script (button script) dengan instance name yang sudah dibuat untuk masing2 objek movieclip tsb.
    misal button trasnparan 1, lalu dituliskan script:
    on(rollover){
    anim_kotak1.gotoAndPlay(2)
    }
    on(rollOut){
    anim_kotak1.gotoAndPlay(6)
    }
    =============
    dan seterusnya untuk button transparan 2, dan button transparan 3, hanya perlu mengganti anim_kotak1 menjadi anim_kotak2, dan anim_kotak3
    ============
    Tambahan: untuk objek movieclip animasi (anim_kotak), jika ingin masing2 animasinya berbeda, tinggal duplikat saja, lalu pada panel LIBRARY ubah namanya dengan nama yang berbeda untuk tiap objek hasil duplikatnya.
    ============
    semoga bisa membantu

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s