Membuat Tombol Empat-Status Dengan Flash Timeline dan ActionScript 3.0

() translation by (you can also view the original English article)

Tutorial ini muncul setelah mencari bantuan online dengan topik yang sama. Banyak orang tampaknya mengajukan pertanyaan yang sama, tetapi sulit untuk menemukan serangkaian instruksi yang dikemas rapi untuk diikuti.

Jadi, seperti halnya netizen yang layak, saya mengumpulkan artikel ini, mendapatkan inspirasi dari beberapa blog lain dan menggunakan pengalaman dari beberapa percobaan dan kesalahan sendiri. Dan sekarang saya menawarkannya kepada Anda, berharap ini akan mengakhiri pencarian Anda sendiri.

Tutorial ini menggunakan Flash CS4 dalam kombinasi dengan ActionScript 3.0, tetapi Anda dapat menerapkan prinsip-prinsip ini di Flash CS3. Itu mengandaikan Anda sudah memiliki pegangan yang cukup bagus untuk membuat animasi di timeline dan pemahaman yang adil tentang bagaimana menerapkan ActionScript ke timeline.

Tujuannya adalah untuk memiliki tombol navigasi dalam bentuk tab, terselip ke samping, untuk melangkah mundur melalui presentasi gambar. Saya ingin membuka slide, mengubah warna dan menampilkan labelnya. Ketika pengguna mengkliknya, itu akan menavigasi kembali satu slide. Jika pengguna mengeluarkan mouse sebelum mengkliknya, itu akan meluncur kembali ke posisi dan warna aslinya.

Catatan: ingatlah untuk sering menyimpan untuk menghindari mulai dari awal jika terjadi kesalahan.

Batas Simbol Tombol

Flash memberi Anda kemampuan untuk membuat simbol tombol, tetapi terbatas pada tiga keadaan: Up, Over dan Down. Ada juga Hit yang mendefinisikan area interaktif di sekitar tombol. Ini bagus untuk sebagian besar penggunaan tombol sederhana. Bahkan, simbol tombol ini sebenarnya adalah anggota kelas SimpleButton. Tetapi bagaimana jika Anda ingin mengubah tampilan tombol atau menghidupkannya ketika pengguna pindah dan kemudian pergi tanpa mengklik? Dalam hal ini, Anda akan membutuhkan keadaan keempat yang disebut Out.

Simbol tombol bawaan sayangnya tidak memiliki status out.

Inilah kesimpulannya: simbol apa pun, seperti simbol grafis atau simbol movie clip, dapat menjadi tombol. Anda hanya perlu menerapkan ActionScript yang tepat. Dalam tutorial ini, movie clip akan diubah menjadi tombol dengan empat keadaan.

Langkah 1: Storyboard atau Sketsa Tombol

Ini akan membuat hidup Anda jauh lebih mudah jika Anda sudah memiliki gagasan visual yang jelas tentang bagaimana tombol Anda akan berperilaku di masing-masing dari empat keadaan. Buat sketsa di atas kertas atau gunakan Illustrator atau Photoshop untuk membuat prototipe elemen visual yang kemudian dapat diimpor ke Flash. Ini sedikit bekerja di depan, tetapi jauh lebih baik daripada bekerja buta dan harus kembali dan memperbaiki sesuatu karena konsep itu tidak dipikirkan secara logis.

Langkah 2: Mengatur dokumen

Buat dokumen baru dan pilih Flash File (ActionScript 3.0). Siapkan stage dengan ukuran dan warna latar yang tepat.

Langkah 3: Buat Simbol Movie Clip Kosong

Alih-alih membuat simbol tombol, kami akan membuat simbol movie clip baru. Tekan Control-F8 (Command-F8 pada Mac) atau pilih Insert > New Symbol Baru dari menu. Kami akan menyebutnya "four state button".

Langkah 4: Tambahkan Layer Actions

Dalam movie clip "tombol four state", tambahkan layer baru dan namai "actions".

Langkah 5: Tambahkan Label untuk Empat Keadaan

Buat layer lain dan menyebutnya "labels". Masukkan empat keyframe kosong pada interval yang kira-kira sama dengan cukup sehingga Anda dapat menyisakan cukup ruang untuk membaca setiap label. Di sini saya menempatkan mereka pada 20 frame interval. Beri label nama up, over, down dan out pada panel Properties. Ini akan menjadi status tombol Anda.

Langkah 6: Membuat Keyframe Aksi

Tambahkan keyframe di layer actions yang sesuai dengan empat status di lapisan labels.

Langkah 7: Tambahkan Aksi Stop

Untuk setiap keyframe kosong di lapisan actions, tambahkan this.stop(); di Editor ActionScript. Ini akan memastikan bahwa movie clip tidak dapat diputar ke status tombol lainnya.

Langkah 8: Status Up

Buat simbol movie clip baru dengan menekan Control-F8 (Command-F8 pada Mac) atau pilih Insert > New Symbol dari menu dan beri nama "up animation".

Langkah 9: Grafis status up

Untuk tombol, menggambar kotak hijau di satu layer dan menambahkan sebuah panah putih di layer di atas. Pastikan terdaftar di sudut kiri atas. Karena ini statis, tidak perlu untuk serangkaian frame untuk animasi, tetapi Anda selalu memiliki fleksibilitas jika Anda memutuskan untuk menghidupkannya, seperti kotak yang menghilang ke tampilan.

Langkah 10: Tambahkan Aksi Berhenti

Buat layer baru dan menyebutnya "actions". Pastikan itu di atas. Pilih keyframe kosong dan tambahkan this.stop(); ke Editor ActionScript. Dalam hal ini tidak sepenuhnya diperlukan karena ini hanya gambar statis, tetapi praktik yang baik untuk menjaga setiap status dari perulangan.

Langkah 11: Tentukan Area Hit

Satu hal yang hilang dari mode pengeditan simbol tombol yang tidak Anda miliki dengan movie clip adalah frane khusus yang disediakan untuk area hit. Ini akan menentukan batas-batas tempat event mouse terjadi seperti klik dan melayang. Buat layer baru dan menyebutnya "hit area".

Gambar bentuk pada layer dan atur nilai alpha-nya ke 0 pada panel Properties, membuatnya tidak terlihat. Area hit ini akan sebesar tombol ketika itu sepenuhnya diperpanjang. Catatan: Jika Anda memiliki urutan animasi, pastikan frame area hit menjangkau seluruh panjang animasi.

Langkah 12: Inisialisasi movie clip status ke atas

Buat layer baru dalam simbol movie clip tombol four state disebut button states. Seret instance simbol up animation atas dari panel Library dan masuk ke area editing simbol movie clip tombol four state bagian pada layer button states. Pastikan koordinat X dan Y-nya diatur ke 0. Masukkan frame pada frame 20.

Step 13: Status Over

Tekan Control-F8 (Command-F8 pada Mac) atau pilih Insert > New Symbol dari menu dan pilih Movie Clip. Kami akan menyebutnya "over animation".

Langkah 14: Bentuk Animasi Tween

Kembali ke movie clip "up animation", klik tombol hijau dan salin. Kembali ke movie clip "over animation" dan tambahkan layer baru yang disebut "button morph". Klik kanan untuk menempelkan tombol hijau di tempatnya di keyframe kosong.

Buat keyframe kosong lainnya di frame 20 dan klik kanan untuk paste kembali di tempatnya. Dengan bentuk ini, tambah lebarnya dan ubah warnanya menjadi oranye. Ukurannya harus sama dengan area hit yang dibuat pada Langkah 10. Pilih seluruh rentang frame dan klik kanan untuk membuat tween bentuk.

Langkah 15: Label Memudar

Untuk menambahkan label tombol, buat layer baru yang disebut "text appear" dan gunakan alat ketik untuk membuat objek teks statis, dalam hal ini, PREVIOUS dalam keyframe kosong.

Klik kanan untuk memasukkan frame pada frame 20. Pilih frame di layer dan klik kanan untuk membuat motion tween. Saya ingin label memudar mulai di tengah-tengah animasi, jadi saya akan pergi ke motion editor dan membuat keyframe di tengah dan di akhir, membuat tiga keyframe. Keyframe pertama akan menambahkan efek warna dengan alpha 0% dan dua terakhir akan memiliki alpha 100%.

Langkah 16: Menentukan Area Hit

Tambahkan layer baru yang disebut "hit area". Anda dapat memilih bentuk oranye yang lebih panjang dari ujung tween bentuk, salin dan tempelkan di tempat keyframe yang kosong di layer "hit area". Pilih dan berikan nilai alpha 0% di panel Properties. Masukkan frame pada frame 20 untuk membuat area hit menjangkau seluruh animasi.

Langkah 17: Tambahkan Aksi Berhenti

Tambahkan layer baru di atas dan menyebutnya "actions". Tambahkan keyframe kosong pada frame 20 dan tambahkan this.stop(); aksi di panel actions. Ini akan mencegah animasi dari perulangan.

Langkah 18: inisialisasi Status Over

Kembali ke movie clip "four state button". Masukkan keyframe kosong dalam frame 21 pada layer button states dan seret sebuah instance dari movie clip over animation dari Library. Pastikan koordinatnya diatur ke 0. Masukkan frame pada frame 40.

Langkah 19: Status Down

Buat simbol grafik baru dengan menekan Control-F8 (Command-F8 pada Mac) atau pilih Insert > New Symbol dari menu dan menyebutnya "down graphic". Tidak diperlukan animasi eksplisit karena hanya akan ditampilkan secara instan ketika tombol mouse diklik.

Langkah 20: Grafis Status Down

Untuk status ini, yang diperlukan, secara opsional, adalah mengubah warna tombol yang sepenuhnya diperluas. Anda dapat menyalin dan menempel di tempat kotak oranye serta label PREVIOUS dari movie clip "over animation" di layer masing-masing. Ubah kotak oranye menjadi merah. Hanya satu frame yang diperlukan, tidak perlu untuk area hit karena tombol mencakup area penuh. Dan, karena ini adalah simbol grafis, tidak perlu aksi stop();.

Langkah 21: Inisialiasasi Grafis Status Down

Kembali ke movie clip "four state button". Masukkan keyframe kosong dalam frame 41 pada layer "button states" dan seret sebuah instance dari simbol "down graphic" dari Perpustakaan. Pastikan koordinatnya diatur ke 0. Masukkan frame pada frame 60.

Langkah 22: Status Out

Tekan Control-F8 (Command-F8 pada Mac) atau pilih Insert > New Symbol dari menu dan pilih Movie Clip. Kami akan menyebutnya "out animation".

Langkah 23: Membalik Tween Bentuk

Status out pada dasarnya akan menjadi versi terbalik dari kondisi over. Kembali ke klip video "over animation" dan salin bentuk tween frames, lalu kembali ke "out animation", buat layer yang disebut "button morph" dan paste frame ke dalam keyframe yang kosong. Kemudian pilih semua frame di layer itu dan pilih Modify > Timeline > Reverse Frames dari menu.

Langkah 24: Menghilangkan secara perlahan Label

Kembali ke movie clip "over animation" dan salin objek teks SEBELUMNYA, lalu kembali ke "out animation", buat layer baru yang disebut "text disappear" dan paste di tempat.

Masukkan frame pada frame 20 lalu pilih rentang frame dan buat motion tween. Anda akan melakukan kebalikan dari motion tween yang dibuat pada Langkah 15 dan membuat keyframe di tengah dan di akhir di Motion Editor, tetapi keyframs pertama dan tengah akan memiliki alpha 100% sedangkan keyframe terakhir akan memiliki alpha 0%.

Langkah 25: Tambahkan Panah

Untuk mengembalikan tampilan tombol ke keadaan aslinya, tambahkan layer yang disebut "arrow" dan letakkan keyframe di frame 20, biarkan 19 frame pertama kosong. Salin panah dari "up animation" dan paste kembali di "out animation" di keyframe terakhir.

Langkah 26: Menentukan Area Hit

Sekali lagi, kita perlu membuat layer baru yang disebut "hit area" dan menempatkan kotak yang cukup besar untuk menutupi ukuran penuh dari tombol yang diperluas. Berikan alpha 0 untuk membuatnya tidak terlihat.

Langkah 27: Tambahkan Aksi Berhenti

Sekali lagi, untuk menjaga "out animation" dari perulangan, kita perlu menambahkan layer yang disebut "actions", meletakkan keyframe kosong di frame 20 dan menambahkan this.stop(); aksi di panel Actions.

Langkah 28: Inisialisasi Status Out

Kembali ke klip video "four state button". Masukkan bingkai keyframe dalam frame 61 pada layer "button states" dan seret sebuah instance dari simbol "out animation" dari Perpustakaan. Pastikan koordinatnya diatur ke 0. Masukkan frame pada frame 80.

Langkah 29: Tambahkan Event Listener

Sekarang hadir ActionScript untuk membuat semuanya berfungsi. Untuk mendeteksi event mouse seperti klik dan hover, kita perlu menambahkan event listener.

Klik pada keyframe pertama dari layer actions dalam movie clip "four state button" tempat kami pertama kali menambahkan tindakan berhenti dan buka panel Actions. Kami akan menambahkan event listener seperti yang ditunjukkan di bawah ini untuk mendeteksi ROLL_OVER mouse, MOUSE_UP (ketika tombol mouse dilepaskan) dan MOUSE_DOWN (ketika tombol mouse ditekan).

Kami menggunakan event ROLL_OVER alih-alih event MOUSE_OVER karena cara memperlakukan elemen anak dari movie clip dalam konteks dengan movie clip induk yang lebih cocok untuk pengaturan ini. Kami menambahkan false, 0, true ke parameter sebagai praktik yang baik untuk menandai listener ini untuk garbage collection ketika mereka tidak lagi diperlukan.


this.addEventListener(MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true);

this.addEventListener(MouseEvent.MOUSE_UP, onMouseClick, false, 0, true);

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownButton, false, 0, true);

Langkah 30: Fungsi Beralih

Untuk setiap event listener, sebuah fungsi akan dipanggil. Setiap fungsi pada dasarnya memajukan timeline ke status yang sesuai dalam movie clip four state button dan memainkan bagian itu dengan merujuk pada nama label.

Anda akan melihat bahwa tidak ada event listener yang dibuat untuk acara MOUSE_OUT. Alih-alih membuat event listener mandiri, kami hanya akan menggunakan event ROLL_OVER untuk memanggil fungsi yang pada gilirannya akan menghapus event listener sendiri dan menambahkan event listener baru untuk event ROLL_OUT. Dalam penyiapan ini, event ROLL_OUT akan bekerja lebih baik daripada event MOUSE_OUT.

Hal yang sama berlaku untuk kebalikannya, di mana event ROLL_OUT menghapus listenernya sendiri dan mengaktifkan kembali event listener untuk event ROLL_OVER. Dengan mengganti rollover dan rollout ini, kami menjaga kode tetap bersih dan bebas dari potensi konflik.


function onMouseRollover(e:MouseEvent):void {       e.target.gotoAndPlay("over");
  	this.removeEventListener(MouseEvent.ROLL_OVER, onMouseRollover);
		this.addEventListener(MouseEvent.ROLL_OUT, onMouseRollout, false, 0, true);
	}

function onMouseRollout(e:MouseEvent):void {
		e.target.gotoAndPlay("out");
		this.removeEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
		this.addEventListener(MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true);
	}

Langkah 31: Fungsi onMouseDownButton

Untuk memutar status down, buat fungsi yang sesuai dengan event MOUSE_DOWN yang disiapkan oleh event listener.

1
2	function onMouseDownButton(e:MouseEvent):void {
3	e.target.gotoAndPlay("down");
4	}

Langkah 32: Fungsi onMouseClick

Akhirnya, kita harus benar-benar memberi tahu tombol apa yang harus dilakukan ketika diklik. Tambahkan fungsi yang terkait dengan event MOUSE_UP. Event MOUSE_UP pada dasarnya adalah hal yang sama dengan bagian terakhir dari event CLICK (turun, lalu naik).

Untuk tujuan pengujian, saya membuat tautan web dalam variabel URL (dalam hal ini, ke situs web Adobe) lalu menambahkan metode navigToURL() ke fungsi sehingga saya dapat memverifikasi bahwa itu berfungsi. Namun, Anda dapat mengganti metode ini dengan panggilan untuk menavigasi ke label frame, nomor atau scene lain menggunakan gotoAndPlay atau metode lain yang Anda inginkan.


var linkToAdobe:URLRequest = new URLRequest("http://www.adobe.com");

function onMouseClick(e:MouseEvent):void {       e.target.gotoAndPlay("up");
		navigateToURL(linkToAdobe); // you can substitute this with any other method or function
	}

Langkah 33: Inisialisasi Tombol

Tombol empat status sekarang siap digunakan. Kembali ke timeline utama dan seret movie clip four state button bagian ke stage pada layer-nya sendiri. Latar belakang pengganti ditambahkan pada layer lain untuk lebih melihat efeknya dalam konteks dengan elemen lain di atas stage.

Langkah 34. Tes Movie-nya

Pastikan file disimpan dan tekan Control-Enter (Command-Enter pada Mac) untuk menguji movie.

Ucapan Terima Kasih

Terima kasih banyak kepada Alex di Sanctified Studios yang telah mengilhami ide asli untuk menggunakan movie clip sebagai tombol dan kepada Dominic Gelineau dari Zedia Flash Blog karena menunjukkan cara terbaik untuk membuat rollover dan rollout di ActionScript 3.