Membuat Link Tombol di Flash

Membuat Link Tombol di Flash

Pada praktik kali ini akan dibahas cara untuk membuat tombol yang dapat
terhubung dengan suatu lembar isi (page). Untuk dapat membuatnya ikutilah
langkah-langkah berikut ini:
1. Siapkan Stage berukuran 550 x 400 pixel dengan fps : 30.
2. Buat tulisan “HOME”, “CONTACT”, “PRODUCT” dengan menggunakan
text tool(T) dengan font dan ukuran bebas.
3. Seleksi tulisan “HOME” lalu buat symbol movieclip dengan menekan F8.
Isi nama seperti pada gambar dibawah ini, lalu tekan OK.

4. Lalu Double klik pada instance movieclip tulisan “HOME” dan telah
berada di dalam instance movieclip tersebut.
5. Ubah nama layer tempat tulisan “HOME” berada menjadi “home”. Lalu
ubah tipe layer menjadi mask dengan klik kanan pada layer tersebut dan
pilih Mask.
6. Buat dua layer lagi dan beri nama “abu-abu” dan ”hitam” dan letakkan
pada bagian bawah layer home
7. Pada layer abu-abu buat objek kotak tanpa garis tepi dengan warna
#CCCCCC dan posisikan
8. Copy frame 1 pada layer abu-abu dengan cara klik kanan pada frame lalu
pilih copy frames. Lalu paste pada frame 1 layer hitam.
9. Pada layer hitam ubah warna objek kotak tersebut menjadi hitam dengan
cara seleksi objek kotak tersebut lalu klik pada fill color dan pilih warna
hitam. lalu posisikan kedua objek kotak
10. Buat symbol movie clip pada kedua objek kotak dan beri nama “hitam”
pada kotak hitam dan “abu-abu” pada kotak abu-abu dengan menekan
F8.
11. Buat motion tween pada objek kotak hitam dan juga kotak abu-abu
dengan pergerakan
12. Buat layer baru dengan nama “script”. Lalu buat blank keyframe pada
frame 10 dengan cara klik kanan pada frame 10 layer script dan pilih
insert blank keyframe.
13. Dengan keadaan frame 10 pada layer script masih terseleksi tekan F9
untuk membuka panel action dan ketikkan “stop();”.

Script ini berfungsi untuk berhenti pada frame tempat script ini berada (dalam hal
ini frame 10 pada layer script). Jika suatu frame sudah terdapat script di
dalamnya maka keyframenya akan berubah menjadi
14. Setelah itu kembali ke timeline utama dengan cara double klik pada stage
atau klik pada tulisan Scene 1
15. Lalu buat symbol button dengan cara tekan ctrl+F8 lalu isikan kotak
dialog seperti pada gambar. Jangan lupa memilih type:button.

16. Isi dari symbol instance button ialah sebagai berikut:
Terdapat empat frame yaitu frame Up, Over, Down, dan Hit.
- Frame Up berfungsi sebagai tampilan tombol pada kondisi awal
sebelum ditekan.
- Frame Over berfungsi sebagai tampilan ketika kursor mouse
berada tepat di atas tombol.
- Frame Down berfungsi sebagai tampilan tombol pada kondisi
sedang ditekan.
- Frame Hit berfungsi sebagai area tekan tombol tersebut.
17. Lalu isikan frame Up dengan text “HOME” sama persis ukuran dan
warnanya seperti yang telah dibuat sebelumnya dan letakkan tepat
ditengah stage.

18. Lalu isi frame Over dengan cara buat blank keyframe dahulu pada frame
Over lalu isikan dengan instance “home_over” yang terdapat pada panel
library dengan cara mendragnya ke dalam stage dan letakkan tepat
ditengah stage.

19. Lalu copy frame Up dan paste pada frame Down dan juga frame Hit. Hal
ini akan menyebabkan tidak adanya perubahan ketika tombol ditekan
dengan keadaan awal.
20. Lalu kembali ke timeline utama dengan double klik pada stage. Klik kanan
pada tulisan “HOME” yang terdapat pada stage dan pilih swap symbol.

21. Pada kotak dialog yang muncul pilih instance home_btn dan klik OK.
Yang dilakukan ini ialah menukar instance home_over dengan instanve
home_btn
22. Pada tahap ini telah diselesaikan pembuatan tombol “HOME”. Setelah itu
lakukan hal yang sama untuk kedua tombol yang lain (CONTACT dan
PRODUCT).
23. Setelah semua tombol sudah selesai dibuat langkah selanjutnya adalah
membuat script untuk link tombol dan juga membuat isi dari tiap tombol.
24. Untuk membuat script navigasi link pada tombol klik pada tombol “HOME”
yang ada pada stage lalu tekan F9 untuk membuka panel action dan
ketikkan:

on(release){
 gotoAndStop("home");
 }

Script tersebut berfungsi untuk membuat ketika tombol ditekan maka akan
berpindah dan berhenti pada frame “home”.

25. Lakukan hal yang sama pada tombol “CONTACT” dan “PRODUCT” tapi
bedakan alamat frame yang dituju. Untuk tombol contact:

on(release){
gotoAndStop("contact");
 }”
Untuk tombol product:
on(release){
 gotoAndStop("product");
 }

26. Lalu buat layer baru dengan nama label. Seleksi frame 1 pada layer
tersebut dan beri label dengan cara klik panel properties yang terdapat di
bawah stage dan ketikkan nama “home” pada tempat=

27. Buat blank keyframe pada frame ke 2 dan ke 3. Lalu beri nama label
“contact” dan “product” dengan cara yang sama.

28. Lalu posisikan keyframe tersebut dengan cara mendragnya

29. Lalu buat layer baru dan beri nama “script”. Dengan frame pertama masih
terseleksi tekan F9 dan ketikkan stop();

30. Buat layer baru dengan nama “isi” lalu buat blank keyframe dan posisikan

31. Pilih blank keyframe yang berada pada frame yang sama dengan label
dan buat objek tulisan yang sesuai dengan nama label tersebut.

32. Lakukan juga untuk semua label yang dibuat.

33. Lalu langkah terakhir ialah klik kanan pada frame 35 pada layer 1 dan
pilih insert frame. Test contoh interaksi tombol yang telah kita buat
dengan menekan ctrl+enter. Dapat dirubah isi dari lembar tujuan tombol
sesuai dengan yang dinginkan dengan merubah isi frame pada layer “isi”.
Gambar 150. Insert frame dengan menekan ctrl+enter

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest