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. Lalu atur seperti pada gambar:
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 seperti pada gambar:
7. Pada layer abu-abu buat objek kotak tanpa garis tepi dengan warna #CCCCCC dan posisikan seperti pada gambar:
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 seperti pada gambar:
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 seperti pada gambar:
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 seperti gambar:
14. Setelah itu kembali ke timeline utama dengan cara double klik pada stage atau klik pada tulisan Scene 1 seperti pada gambar:
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. Hasil akhir timeline akan seperti gambar:
20. Lalu kembali ke timeline utama dengan double klik pada stage. Klik kanan pada tulisan “HOME” yang terdapat pada stage dan pilih swap symbol.
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. Lalu atur seperti pada gambar:
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 seperti pada gambar:
7. Pada layer abu-abu buat objek kotak tanpa garis tepi dengan warna #CCCCCC dan posisikan seperti pada gambar:
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 seperti pada gambar:
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 seperti pada gambar:
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 seperti gambar:
14. Setelah itu kembali ke timeline utama dengan cara double klik pada stage atau klik pada tulisan Scene 1 seperti pada gambar:
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. Hasil akhir timeline akan seperti gambar:
20. Lalu kembali ke timeline utama dengan double klik pada stage. Klik kanan pada tulisan “HOME” yang terdapat pada stage dan pilih swap symbol.