Sabtu, 14 Desember 2013

ANIMASI TOMBOL/BUTTON PADA WEB SEDERHANA


A.   LAYER BUTTON
Animasi tombol atau button adalah animasi yang diterapkan pada tombol, sehingga tombol terlihat lebih bagus dan menarik.
Pertama, kita akan membuat tombol standar yang biasa dipakai dihalaman web.
1.      Pilih warna baground yang diinginkan, beri nama layer tombol



2.       Klik Rectangle Tool, lalu aturlah sudut ketumpulannya pada Round Rectangle Radius sebesar 10 points.



3.      Kemudian klik text tool, lalu tulislah “Home” dan letakkan di atas tombol


4.      Seleksi tombol home tersebut lalu duplikat untuk membuat tombol yang lainnya kita dapat mengganti textnya



5.      Seleksi tombol home tekan F8 untuk convert to symbol, beri nama home, pilih pada bagian behavior button, lakukan juga untuk tombol about me, service dan email us sesuai nama masing-masing tombol tersebut.


6.      Double klik tombol button tersebut untuk masuk mode edit symbol button
7.       Pada mode ini perhatikan pada timeline ada  4 frame, yaitu up, over, down & hit
8.      Insert keyframe pada frame over & down, kemudian pilih hanya textnya dan ubah warnanya.  Lakukan hal yang sama untuk tombol about me, service dn email us.


9.       Klik scene 1 untuk kembali ke movie utama
10.  Jalankan animasi. Coba untuk melewatkan mouse di atas tombol, lalu coba untuk melakukan klik pada tombol tersebut.
11.  Beri masa aktif sampai frame 60 atau insert frame pada frme 60.



B.   LAYER KOTAK
1.      Insert layer dengan nama kotak, convert to symbol dengan nama kotak tipe grafik
2.      Klik rectangle tool, lalu buatlah kotak
3.      Insert keyframe pada frame 10, lalu beri motion tween untuk pergerakan animasi
4.      Di frame 1 perkecil ukuran kotak dengan cara tekan ctrl+t, jadikan 10%



5.      Insert frame pada frame 60 untuk memperpanjang masa aktifnya

C.   LAYER FANPAGE
1.      Insert layer dengan nama fp, convert to symbol dengan nama fp tipe grafik
2.      Insert keyframe pada frame 10, klik text tool dan ketikkan nama fanpagenya missal “arielzhyo indah” dan ketikkan juga “fp”
3.      Insert keyframe pada frame 20, seleksi text tersebut lalu tarik ke tengah, beri motion tween


D.   LAYER FRAME
1.      Insert layer dengan nama frame, convert to symbol dengan nama frame type grafik
2.      Insert keyframe pada frame 20, frame 30, frame 40 dan frame 50



3.      Pada frame 20 pada menu properties isi frame label dengan “home”, pada frame 30 dengan frame label “aboutme”, pada frame 40 dengan frame label “service”, pada frame 50 dengan frame label “emailus”.




E.    LAYER GAMBAR
1.      Insert layer dengan nama gambar, convert to symbol dengan nama gambar tipe grafik
2.      Insert keyframe pada frame  20, frame 30, frame 40 dan frame 50
3.      Import gambar yang akan dimasukkan pada halaman web dengan cara klik file > import > import to library



4.      Tekan ctrl+l untuk membuka menu library, tarik gambar tersebut ke dalam area kerja frame 20. Lakukan hal yang sama pada frame 30, 40 dan 50 dengan gambar yang berbeda.


5.      Ketik text file di frame 20, ketikkan “Selamat Datang di Menu Home”

6.      Ketik text file di frame 30, ketikkan “Selamat Datang di Menu About Me”



7.      Ketik text file di frame 40, ketikkan “Selamat Datang di Menu Service”


8.      Ketik text file di frame 50, ketikkan “Selamat Datang di Menu Email Us”


F.    ACTION SCRIPT
Dengan adanya Actionscript, animasi dapat dibuat menjadi movie yang interaktif, sehingga user dapat berperan lebih aktif menggunakan keyboard dan mouse untuk melompat ke movie lain yang diinginkannya, memindahkan objek, memasukkan informasi pada form, dan lain-lain.
1.      Script Pada Frame
Pada frame 20 tekan F9 untuk masuk ke menu action frame, klik timeline control > stop. Lakukan hal yang sama pada frame 30, 40 dan 50.


2.      Script Pada Button/Tombol
a.      Pada tombol home lalu tekan F9, masukkan script
on(release){
       gotoAndPlay("home");
}

b.      Pada tombol home lalu tekan F9, masukkan script
on(release){
       gotoAndPlay("aboutme");
}
c.       Pada tombol home lalu tekan F9, masukkan script
on(release){
       gotoAndPlay("service");
}
d.      Pada tombol home lalu tekan F9, masukkan script
on(release){
       gotoAndPlay("emailus");
}
e.      Jalankan animasi

by: Indah 11101152630276

0 komentar:

Posting Komentar

 
Copyright © 2010 Arielzhyo Indah | Design : Noyod.Com | Images : Red_Priest_Usada, flashouille