CIKI-CIKIBUNG
BELAJAR MEMBUAT BLOG DAN WEBSITE
DENGAN HTML, PHP, MYSQL, FLASH DAN CSS



Membuat button (tombol) dengan Flash movie clip

Seperti yang saya jelaskan pada tutorial sebelumnya bahwa saya akan memberikan keterangan mengenai cara pembuatan tombol (button) di bawah ini. Jika kursor berada di atas tombol maka tombol jadi mengecil, warnamya berubah merah dan tampak bola-bola yang bergerak beraturan. Jika diklik maka warna tombol akn berubah menjadi hijau.



Cara membuat tombol di atas adalah :
  1. Buka program Flash anda
  2. Klik insert pada menu bar - new symbol - beri nama "bola" - Pilih "movie clip"
  3. Buat sebuah lingkaran gradien berwarna biru berukuran width=20px dan height=20px. Caranya : Klik "oval tool" - klik "stroke color" - Pilih Kotak persegi di atas yang disilang (agar lingkaran tidak mempunyai garis border) - klik "Fill Color" - Pilih warna biru (kode:#0000ff) - Klik "Color Mixer" - klik tombol dropdown - Pilih linear - Buat lingkaran gradien berwarna biru tepat di tengah tanda "+" pada halaman - Klik kursor (panah) hitam - Klik lingkaran - Rubah ukuran lingkaran (bola) di dalam properties menjadi width=20px dan height=20px.
  4. Klik kanan bola - copy - klik kanan frame2 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Gambar bola sudah tercopy ke frame 2 tapi masih bertumpuk. Geser bola ke arah kanan menggunakan anak panah kanan pada keyboard.
  5. Klik kanan bola kedua - copy - klik kanan frame3 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
  6. Klik kanan bola ketiga - copy - klik kanan frame4 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
  7. Klik kanan bola keempat- copy - klik kanan frame5 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
  8. Klik kanan bola kelima- copy - klik kanan frame6 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
  9. Klik kanan bola keenam- copy - klik kanan frame7 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
  10. Sekarang buat file baru (file - new)
  11. Pada properties rubah ukuran halaman menjadi width=125px dan height=40px
  12. Buat kotak sembarang berwarna biru. Caranya : Klik rectangle tool - klik "stroke color" - Pilih Kotak persegi di atas yang disilang (agar kotak tidak mempunyai garis border) - klik "Fill Color" - Pilih warna biru (kode:#0000ff)
  13. Pada properties ubah ukuran kotak sesuai dengan ukuran halaman yaitu width=125px dan height=40px. Di dalam koordinat x dan y masukkan angka 0
  14. Klik modify pada menu bar - pilih convert to symbol - beri nama kotak - pada behavior pilih button - ok
  15. Klik kotak biru dua kali (doubleclick). Sekarang anda berada di halaman pengeditan simbol. Perhatikan bagian frame. Disitu terdapat empat buah frame, yaitu : up, over, down dan hit
  16. klik kanan pada frame over lalu pilih "insert key frame"
  17. Rubah warna kotak menjadi merah. Perkecil ukuran kotak merah. pada properties height=20px koordinat y=20
  18. Klik library - drag gambar bola dan tempatkan diatas kotak merah. Sesuaikan ukuran bola dengan kotak
  19. klik kanan pada frame down lalu pilih "insert key frame"
  20. rubah warna kotak menjadi hijau
  21. klik kanan pada frame hit lalu pilih "insert key frame"
  22. pilih seluruh area kotak hijau
  23. Jika sudah selesai cobalah anda test button (tombol) yang telah anda buat. Klik "control" pada menu bar lalu pilih "test movie". Tempatkan kursor diatas kotak. Jika warna kotaknya berubah menjadi merah dan jika kotak tsb diklik menjadi hijau berarti anda telah berhasill membuat tombol atau button tsb.
  24. Sekarang buat teks "HOME" sesuaikan ukurannya dengan besar kotak lalu tempatkan di bawah kotak biru. Lalu pilih teks dan Copy teks Home tsb
  25. Klik frame over - klik menu Edit pada menu bar - pilih paste in place
  26. Klik frame down - klik menu Edit pada menu bar - pilih paste in place
  27. Klik frame area - klik menu Edit pada menu bar - pilih paste in place
  28. Selesai. Sekarang cobalah anda test lagi button yang telah anda buat Jika berhasil maka akan terlihat seperti button atau tombol di atas.

'

No comments:

Post a Comment

recent comment