Advertisement
  1. Code
  2. Web Design

Cara membuat Flash Menu dalam 20 menit

Scroll to top
Read Time: 9 min

Indonesian (Bahasa Indonesia) translation by graywest (you can also view the original English article)

Bayangkan Anda telah berjanji klien Anda dia akan memiliki ide menu Anda bercerita tentang nanti hari ini, ketika Anda bertemu. Anda membuka Flash dan mulai contoh yang kasar tapi bagus, yang dapat Anda kode atau memperpanjang kemudian. Selama ini tut kita akan fokus pada membuat menu seperti itu; sebagai disesuaikan mungkin, tanpa menggunakan kelas apapun, hanya komponen parameter.


Merancang Menu

Buat sebuah file baru dengan ActionScript 3 Flash dan ditetapkan dimensi untuk 960 x 70 piksel. Menu akan pergi besar pada 960. gs HTML template untuk website perusahaan klien Anda. Mengatur framerate 25 fps. Untuk menjaga hal-hal yang cepat, kami tidak akan menggunakan kelas dokumen di sini; kami hanya akan tetap berpegang pada Flash IDE.


Step 1: Persiapkan tombol

Kita akan memiliki lima tombol utama dengan submenu, seperti dalam skema di bawah ini:

Membuat persegi panjang dengan dimensi 192 x 40px. Saya datang dengan lebar dengan membagi 960 oleh 5 tombol. Warna dengan gradien linear dengan warna berikut:


Langkah 2: Tombol utama

Tekan "F8" untuk menjadi persegi panjang klip, dan nama itu "tombol".


Langkah 3: Tombol frame

Double-klik tombol yang baru Anda buat dan tambahkan dua bingkai yang lain. Ini akan menjadi atas dan bawah Serikat tombol. Kita akan menggunakan klip dan menambahkan tindakan untuk itu bukan sebuah tombol, sehingga kita dapat membuat submenu tombol diklik. Jika Anda menggunakan tombol, klik pada tombol submenu akan memicu klik pada tombol menu utama.


Langkah 4: Set atas negara warna

Untuk kedua frame ("atas" negara menu) perubahan warna gradien pada gambar:

Melakukan hal yang sama untuk frame ketiga ("turun" negara menu) dengan warna berikut:


Langkah 5: Teks Label

Mengubah nama lapisan pertama untuk "kembali" dan di atas itu membuat tiga lapisan lain yang bernama "label", "bar" dan "tindakan" masing-masing.

Kunci lapisan tindakan, kemudian pada lapisan label membuat textfield dinamis baru yang bernama "label_txt". Ini akan menjadi label tombol. Teks tombol akan berbeda sesuai dengan pengaturan movieklip di panggung. Untuk ini, kita akan menggunakan komponen parameter, sehingga daripada menyalin tombol lima kali, kita dapat menggunakan kembali komponen dan hanya akan perlu untuk mengubah variabel.


Langkah 6: Tombol pemisah

Dengan alat baris, membuat dua garis yang berdekatan dengan warna berikut dan mengubahnya menjadi satu film klip disebut "bar". Tempat ini movieklip tepat di 190px pada sumbu x (menggunakan panel properti). Ini akan menjadi tombol pemisah, yang akan menambah spasial pemisahan antara tombol menu. Kami sedang mengubah ini menjadi sebuah movieklip mampu menyembunyikannya kemudian, untuk tombol terakhir.


Langkah 7: Komponen definisi

Pergi kembali ke adegan utama dan di Perpustakaan klik kanan pada movieklip tombol dan pilih "Komponen definisi..."


Langkah 8: Komponen parameter

Menambahkan parameter komponen berikut:

Parameter ini kemudian dapat diakses dalam tindakan klip film sebagai variabel. Kita akan menggunakan string "textvar" untuk nama menu, string boolean Sembunyikan pemisah dan "submenu" "hidebar" sebagai nama hubungan submenu terkait klip.


Langkah 9: Timeline Actionscript

Sekarang, pergi kembali ke dalam "tombol" klip dan dalam lapisan tindakan, tekan "F9" untuk membuka jendela tindakan, kemudian masukkan kode berikut:

Mari saya jelaskan kode:

Kita mengatur properti "useHandCursor" untuk benar dan "trackAsMenu" ke true. Pertama membuat kursor berubah menjadi tangan ketika atas tombol, dan memberitahu kedua klip untuk berperilaku seperti menu. Hal ini memastikan bahwa acara berikutnya atas anak-anak tidak akan mempengaruhi klip film utama.

Kami berhenti timeline, sehingga kita dapat benar-benar memiliki tombol fungsi, dan mengatur "mouseEnabled" ke false untuk bidang teks "label_txt". Jika kita tidak melakukan ini, bidang teks akan ROLL_OVER acara dan menu akan tiba-tiba roll-out. Pada dasarnya ini mematikan interaktivitas dengan mouse untuk bidang teks.

Selanjutnya, kami memeriksa jika variabel "textvar" diatur, dan jika demikian, kami menetapkan untuk bidang teks properti teks. Sangat sederhana. Kami membuat cek karena kita dapat meninggalkan parameter kosong dan dalam kasus ini kita mendapatkan error.

Kami melakukan cek sama dengan properti "hidebar". Jika kita memilih benar, kita akan menyembunyikan bilah klip.

Terakhir, kami membuat atas, keluar, bawah dan atas fungsi dan menambahkan acara ke klip, mengubahnya menjadi sebuah tombol. Hal ini penting untuk menggunakan "ROLL_OVER" dan "ROLL_OUT" peristiwa daripada peristiwa "MOUSE_OVER". Aku sudah mencoba ini dengan "MOUSE_OVER" dan itu adalah berantakan, karena "MOUSE_OVER" yang dipicu setiap kali mouse bergerak, sehingga menciptakan efek yang berkedip.


Langkah 10: Tombol!

Kami siap untuk melakukan tes. Menghapus tombol dari panggung dan menambahkannya ke Perpustakaan lagi di (0,0) px. Untuk parameter "textvar" jenis rumah:

Menambah tombol lain, dengan jarak 192px antara mereka, "textvar" nilai berikut dan mengatur "hidebar = true" untuk tombol terakhir:

Kita dapat menguji film untuk melihatnya bekerja sampai sekarang:

Hebat! Keterangan muncul dan tombol bereaksi terhadap mouse.


Langkah 11: Membuat Submenu

Kita akan mulai membuat submenu. Submenu ini akan diduplikasi untuk setiap submenu yang mungkin. Membuat persegi panjang 550 x 30 seperti dalam gambar, tekan "F8" dan nama itu "sbmenu1". Pastikan untuk memeriksa ekspor untuk Actionscript dan memberikannya nama linkage (kelas) "sbmenu1".


Langkah 12: dalam Submenu

Sekali lagi, seperti movieklip pertama, membuat tiga lapisan lain dan nama mereka "circle", "tombol", dan "tindakan".

Pindahkan persegi untuk 30px pada sumbu x. Kita akan menggunakan 30px untuk membangun pembulatan submenu.


Langkah 13: Pembulatan lingkaran

Membuat lingkaran x 60 piksel (memegang "Shift" akan membuat sebuah lingkaran sempurna, atau Anda dapat menggunakan alat lingkaran dan alt-klik panggung untuk memperoleh sebuah dialog yang meminta untuk ukuran yang tepat) dan posisi itu pada (-30, -30) px. Menggambar garis vertikal melalui (0,0) px lintas tengah lingkaran, pilih hak setengah lingkaran dan menghapus itu, seperti dalam gambar berikut.

Menghapus baris, kemudian dengan setengah lingkaran yang dipilih lagi tekan "F8" dan mengubahnya menjadi sebuah simbol grafis. Hati-hati untuk memilih titik pendaftaran tepat tengah, seperti yang kita akan ingin menghidupkan rotasi lingkaran dari pusat.


Langkah 14: Lingkaran Tween

Memutar grafik lingkaran 90° atas tombol, tetapi sebelum itu, gunakan Free Transform alat untuk menyeret titik rotasi pusat ke pusat lingkaran, Gambar, dan mengatur posisi-30 pada sumbu x:

Membuat bingkai yang lain dengan "F6" setelah empat frames, dan memutar lingkaran seperempat anti-searah jarum jam. Kemudian klik kanan pada timeline antara frame dan pilih "Membuat gerakan Tween".


Langkah 15: Submenu Tween

Kunci lapisan lain dan pilih layer "kembali". Pindah frame pertama pada waktu yang sama dengan bingkai lingkaran terakhir, dan memperpanjang timeline dengan lain keyframe ("F6"), seperti dalam gambar. Pilih frame pertama dan mengubah ukuran persegi untuk 5px, kemudian klik kanan antara keyframes dan pilih "Buat Tween bentuk":


Langkah 16: Lapisan masker

Jika Anda memindahkan playhead, Anda akan melihat menghidupkan submenu, tetapi lingkaran masih terlihat. Membuat persegi panjang 30x30px pada lapisan masker di (0,0) px, kemudian klik kanan masker lapisan dan pilih topeng:

Dalam lapisan "tindakan" menciptakan kerangka kosong pada frame yang sama seperti animasi akan selesai, tekan "F9" untuk membuka panel tindakan, dan menulis "stop();" perintah, sehingga tidak akan mengulangi animasi menu. Anda harus memiliki animasi bagus submenu.


Langkah 17: Submenu tombol

Membuat persegi panjang 130x30px hitam dan tekan "F8" untuk mengubahnya menjadi simbol baru. Menyebutnya menuubtn. Saat ini, kami akan memilih tombol sebagai jenis. Kami benar-benar melakukan hal yang sama seperti yang kita lakukan di awal: membuat tombol dengan tiga negara, kemudian membungkus dalam moveiclip master dengan bidang teks label, yang kami akan mengontrol dengan parameter kustom.


Langkah 18: Frame baru

Langkah persegi panjang pada kedua frame (atas) dan duplikat frame. Anda dapat membuat warna yang berbeda untuk rollover dan turun, tapi aku terburu-buru sekarang:). Ketika Anda kembali ke submenu, pilih tombol dan tekan "F8" lagi untuk membuatnya menjadi klip. Menyebutnya sub_btn. Anda akan melihat tombol biru transparan; itu berarti tidak memiliki "Naik" negara, itu adalah sebuah tombol yang transparan.


Langkah 19: Tombol Label

Seperti sebelumnya, masukkan movieklip "sub_btn" dan membuat dua lapisan lain: "label" lapisan dan lapisan "tindakan". Dalam lapisan label, membuat kolom teks dinamis, mengatur keselarasan pusat, warna putih (teks ini akan hitam) dan nama itu "label_txt".

Dalam lapisan tindakan, paste actionscript berikut:


Langkah 20: Custom parameter

Klik kanan movieklip subbutton dan pilih "Komponen definisi" dan menambahkan parameter "textvar":


Langkah 21: Submenu tombol

Sekarang bahwa kita telah menciptakan tombol kustom, mari kita membuat submenu tombol dan nama mereka tepat:


Langkah 22: Membuat itu bekerja

Hal baik sekarang, tapi tidak muncul submenu, Anda katakan. Itu karena kita perlu kode munculnya submenu di atas fungsi tombol utama. Mendeklarasikan variabel baru "sb" yang akan terus submenu kami setelah baris "label_txt.mouseEnabled = false;"

Ganti dua acara pendengar dengan kode ini:

Ini akan menambahkan "down" dan "up" pendengar hanya ketika tombol tidak memiliki submenu.

Dalam fungsi "over()", menambahkan sepotong kode ini:

Mari saya jelaskan kode:

Kami akan memeriksa jika submenu parameter ditetapkan; Jika demikian maka kita mendapatkan referensi ke nama kelas yang menggunakan "getDefinitionByName". Fungsi ini menetapkan variabel "cn" jenis kelas. Ini adalah cara untuk instantiate kelas dari nama untai. Jika Anda mencoba untuk instantiate sebuah variabel string dengan "baru" kata kunci, itu tidak akan berhasil.

Setelah kami instantiate submenu, kita set ke 40px pada sumbu y di bawah tombol dan menambahkannya ke daftar tampilan tombol.

Akhirnya, kami memeriksa lagi jika ada sb dan kita menetapkan terlihat. Ini adalah karena Instansiasi terjadi hanya sekali, tapi jika mouse memasuki tombol lain out() fungsi akan dipanggil, dan kita akan menyembunyikan movieklip "sb". Waktu berikutnya memasuki tombol, movieklip ada sudah, jadi jika kondisi dilewati dan kami hanya menunjukkan itu. Optimasi ini membuat menu kami lebih cepat, memotong pemakaian memori.


Langkah 23: Mencobanya

Kita sudah siap! Cukup masukkan "sbmenu1", nama hubungan tombol kedua, sebagai submenu parameter dan menguji menu. Anda harus memiliki menu yang bagus. Dari sini, Anda dapat mengatur penangan klik untuk tombol, untuk membuat mereka melakukan apa yang Anda inginkan.


Langkah 24: Membuat Submenu kedua

Untuk menunjukkan kekuatan diperpanjang, duplikat movieklip "sbmenu1" dan mengubah nama itu "sbmenu2". Kami akan menambahkan ini ke tombol kontak.


Langkah 25: dilakukan

Aku sudah mengubah tombol ke sesuatu yang lain, dan meletakkan pembulatan lingkaran di tempat yang tepat dengan memodifikasi semi-remaja.

Sekarang semua yang perlu kita lakukan adalah menetapkan parameter submenu untuk tombol kontak dan kita akan memiliki menu bagus!

Kami memiliki sebuah sketsa yang bagus untuk menunjukkan kepada klien kami. Ia akan senang menggunakannya untuk mewakili perusahaan arsitektur dan akan mungkin memberi saya diskon rumah baru :)

Kami telah mencapai akhir tutorial. Jika Anda menyukai ini, silakan komentar! Aku mencoba untuk membuatnya intuitif mungkin. Terima kasih untuk tinggal sampai akhir!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.