Membuat Animasi Tombol

Document Sample
Membuat Animasi Tombol Powered By Docstoc
					Membuat Tombol Animasi “ x tombol”




Perhatikan file : xtombol.swf –> publish dari xtombol.fla

Badan tombol terdiri dari 5 symbol: 3 movieclip , 1 graphic dan 1 button




BUAT MOVIECLIP I : nama “X”

    1. Buat Dokumen flash baru, Simpan (Save) dengan nama”xtombol”
    2. Insert Symbol (Ctrl+F8), pilih movieclip, beri nama “x”, ok
3. Pilih rectangle primitif tool (R), stroke color no color, fill color (#666666)




4. Klik and drag pada stage hingga membentuk persegi panjang untuk tombol




5. Tampilkan panel color melalui menu windows, color (Shift+F9)
6. Klik pada persegi panjang tombol yang terbentuk, Atur type color: linear, klik pada A   hingga
   berubah menjadi atur alpha=0%



                                                                  Type = Linear




    Atur Alpha = 0%
                                 A                        B

7. Tambahkan custom warna gradasi pada C, dengan klik kiri pada panel gradasi dan atur
   alpha=50%




                                           C
8. Klik Subselection tool atur persegi panjang menjadi bersudut oval. Klik tahan pada titik A geser
   kekiri hingga titik B.
                             A                                  B




                         B       A



                PROSES                           HASIL AKHIR
9. Tambahkan layer, buat segitiga letak sedemikian rupa menjadi tombol seperti gambar




10. Klik layer 1 tekan tombol keyboard shift kemudian tekan layer 2, group (ctrl+G), kemudian klik
    gambar tombol, pada properties yang muncul atur X=0,0 dan Y=0,0
BUAT MOVIECLIP II : nama “xOVER”

   1. Masih pada file yang sama “xtombol”
   2. Tambahkan kembali movieclip, Insert Symbol (Ctrl+F8), pilih movieclip, beri nama “xOVER”, ok




   3. Pada panel Library klik 2 kali movieclip “xOver” sehingga masuk dalam timeline movieclip
      “xOver”
4. Group badan tombol dengan anak panah, copykan pada movieclip “x” (klik 2x movieclip “x”
   pada panel library ) dan pastekan ke dalam layer 1 movieclip “xOver”
5. Klik gambar tombol, convert to symbol (F8), pilih graphic, beri nama “xO”,ok




6. Klik layer 1, kemudian klik gambar tombol, pada properties yang muncul atur X=0,0 dan Y=0,0
7. Klik gambar tombol yang telah di convert menjadi symbol graphic, aktifkan panel properties
   pada menu windows (ctrl+F3), pada kolom color pilih alpha set menjadi 0 (nol)




8. Tambahkan timeline pada layer 1 hingga frame ke 10 (klik frame 1 tekan F5 atau klik kanan, pilih
   insert frame sampai dengan frame ke 10)




9. Pada frame ke 10 tekan F6 (copy dari frame 1 atau sebelumnya dan membuat keyframe baru)
   atau klik kanan, pilih insert keyframe
10. Klik pada frame ke 10, klik tombol, tampilkan properties, set alpha = 100%




11. Klik diantara frame 1 dan frame 10, klik kanan pilih




12. Klik frame ke 10, klik gambar tombol, geser dengan panah keyboar kiri sejauh 6x tekan
13. Tambahkan layer




14. Pada frame ke 10, tekan F6 atau klik kanan pilih insert keyframe




15. Klik frame 10 , aktifkan panel actions pada menu windows atau tekan F9



                                                 Ketikan:

                                                 Stop();
BUAT MOVIECLIP III : nama “xUP”

   1. Masih pada file yang sama “xtombol”
   2. Tambahkan kembali movieclip, Insert Symbol (Ctrl+F8), pilih movieclip, beri nama “xUP”, ok




       Cek untuk panel Library bahwa penambahan movieclip “xUP” sudah masuk




   3. Klik 2x movieclip “xUP” pada panel Library
4. Klik “xO” (graphic) pada panel Library drag dan drop pada stage




5. Pastikan posisi gambar tombol pada X=0,0 dan Y=0,0




6. Pada layer 1, frame 1 diperpanjang framenya sampe dengan frame 10




7. Pada klik frame 10, klik tombol, set properties alpha = 0 %
8. Klik diantara frame 1 dan frame 10, klik kanan create motion tween




9. Klik pada frame ke 10, klik tombol, dengan menggunakan tombol panah keyboard geser kekanan
   10x

10. Tambahkan layer 2




11. Klik pada layer 2 frame ke 10 tekan F6 atau klik kanan insert keyframe




12. Klik pada frame ke 10 Layer 2, buatlah kotak kecil ukuran w=5, h=5 letakkan diatas gambar
    panah tombol frame 10 (untuk mempaskan, alpha = 0 pada gambar tombol frame 10 layer 1
    dinaikan setelah pas kembalikan nol (0) lagi)
    13. Tambahkan kembali layer menjadi Layer 3, pada frame ke 10 insert keyframe (F6)




    14. Klik pada frame 10 Layer 3, aktifkan panel actions




        Ketikan:
        Stop();



BUAT TOMBOL : nama “xbutton”
Kembalikan stage pada posisi scene 1 (klik scene 1), pada timeline hanya terdapat layer 1 dengan satu
kunci frame kosong (keyframe) dan pada Library semua komponen button sudah tersedia
Langkahnya:
   1. Klik dan Tarik ke dalam stage pada library graphic “xO”




   2. Klik gambar tombol, convert to symbol (F8)




       Sehingga pada Library bertambah symbol button “xbutton”
3. Klik 2x pada gambar tombol, pada Layer 1 kolom Up klik dan hapus (delete) objek yang ada
   kemudian gantikan dengan klik pada Library movieclip “xUP” dan tarik lepas pada stage,
   pastikan posisi tombol pada X=0,0 dan Y=0,0




                                             xUP




4. Klik pada layer 1 kolom Over klik kanan insert blank keyframe kemudian klik pada Library
   movieclip “xOver” tahan dan tarik letakkan pada stage, pastikan letak tombol pada posisi X=0,0
   dan Y=0,0, klik pada frame Over kemudian tekan F5 Untuk perpanjangan frame sampe dengan
   frame Down Layer 1

                                       perpanjang frame dengan tekan F5




                              xOver
5. Klik pada frame hit (untuk area klik tombol), klik kanan insert blank keyframe, klik dan tarik
   letakkan pada stage movieclip”x” pada library, pastikan letak tombol on Stage pada posisi X=0,0
   dan Y=0,0




6. Tekan Ctrl+Enter untuk menguji tombol animasi, maka akan terlihat hanya kotak, tetapi begitu
   di klik untuk dijalankan sebagai tombol maka animasi berjalan sesuai rencana pembuatannya.
   Maka selesailah sudah rangkaian pembuatan animasi tombol.




                                                                    Saat Mouse Over

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1631
posted:3/10/2010
language:Indonesian
pages:16
Description: Now you can make money by selling your content on Docstoc's DocStore, the premier marketplace to buy and sell professional documents.