Advertisement
  1. Code
  2. Effects

Membuat Tooltip yang Dapat Disesuaikan di ActionScript 3.0

Scroll to top
Read Time: 6 min

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

Tooltip adalah elemen antarmuka pengguna grafikal. Ini diaktifkan dengan mengarahkan atau menggulir item, menampilkan kotak teks yang menampilkan informasi tentang item itu.

Dalam tut ini, saya akan menunjukkan cara membuat tooltip yang mudah disesuaikan menggunakan Classes di ActionScript 3.0. Lihatlah!




Langkah 1: Ringkasan Singkat

Kelas Tooltip akan dibuat untuk menangani penggambaran tooltip, kelas Main akan menangani event terkait dan itu akan ditampilkan dengan menggulir Button atau MovieClip di Stage.

Langkah 2: Mulai

Buka Flash dan buat File Flash baru (ActionScript 3).

Atur ukuran panggung ke 600x300 dan buat latar belakang radial abu-abu (#F9FAF5, #E3E5E0).

””””””

Langkah 3: Button

Pilih Rectangle Primitive Tool dan buat persegi panjang membulat 140x40px biru (#7B90A5). Tetapkan 10 sebagai radius sudut dan tambahkan beberapa teks agar tampak lebih seperti tombol.

Konversikan ke MovieClip atau Button dan beri nama "button". Buka panel properti dan tambahkan filter berikut:

Anda akan berakhir dengan sesuatu seperti ini:

Langkah 4: ActionScript!

Simpan pekerjaan Anda dan bersiaplah untuk pengkodean.

Buat File ActionScript baru dan simpan sebagai Tooltip.as

Langkah 5: Kelas yang Diwajibkan

Ini adalah kelas yang akan kita butuhkan. Untuk informasi lebih lanjut tentang setiap kelas, silakan merujuk ke bantuan flash.

Langkah 6: Memperluas Kelas

Kita memperluas menggunakan kelas Sprite untuk mendapatkan akses ke fungsi terkait DisplayObject.

Langkah 7: Variabel

Ini adalah variabel yang akan kita gunakan, dijelaskan di komentar.

Langkah 8: Fungsi Constructor

Fungsi ini dieksekusi ketika kelas dimuat, parameternya hampir semuanya deskriptif. Paramenter useArrow akan menggambar panah kecil di tooltip tetapi hanya akan bekerja jika arahnya Up atau Down. Kita akan melihat lebih banyak tentang itu nanti dalam kode.

Langkah 9: Properti Teks

Baris-baris ini akan mengatur properti TextField dan TextFormat.

Langkah 10: Membuat Tooltip

Kode ini akan menggambar tooltip sesuai dengan nilai-nilai parameternya.

Langkah 11: Parameter Panah

Parameter useArrow akan menggambar segitiga di tengah-atas atau tengah-bawah tooltip, perhatikan bahwa ini hanya akan berfungsi jika parameter "dir" disetel ke Up atau Down.

Langkah 12: Filter Drop Shadow

Kode ini menerapkan Filter Drop Shadow berdasarkan warna tooltip.

Langkah 13: Menambahkan Tooltip ke Panggung

Langkah 14: Animasi

Baris ini akan membuat animasi tween pendek menggunakan properti alpha dari tooltip.

Langkah 15: Kelas Main

Simpan kelas Tooltip Anda dan buat File ActionScript baru, file ini akan menjadi Kelas Main yang akan menangani Event untuk menampilkan Tooltip saat Anda menggulir tombol.

Simpan kelas ini sebagai Main.as

Langkah 16: Kelas yang Diperlukan

Kelas-kelas yang diperlukan untuk file ini:

Langkah 17: Memperluas Kelas

Perluas menggunakan kelas Sprite untuk mendapatkan akses ke fungsi terkait DisplayObject.

Langkah 18: Variabel

Variabel yang akan kita gunakan di kelas ini.

Langkah 19: Fungsi Main

Fungsi ini adalah constructor, itu akan dijalankan segera setelah kelas dipanggil.

Langkah 20: Hitungan Mundur Tooltip

Fungsi ini akan berjalan ketika pengguna menggulir tombol, ia akan memulai penghitung waktu untuk menghitung 500 milidetik sebelum memanggil fungsi yang akan menampilkan Tooltip.

Langkah 21: Fungsi Menampilkan Tooltip

Buat Tooltip sesuai dengan parameter dan letakkan di arah yang dipilih. Itu juga menambahkan tooltip ke Stage dan membuat listener Mouse Move.

Langkah 22: Pergerakan Tooltip

Kode ini akan memindahkan tooltip berdasarkan paramenter dist dan posisi mouse.

Langkah 23: Menyembunyikan Tooltip

Ini adalah fungsi yang akan menghapus Tooltip ketika kursor mouse tidak lagi dalam target, dalam hal ini tombol.

Langkah 24: Listener

Ini adalah fungsi untuk menambah listener dengan sekaligus, dijalankan di fungsi Main.

Langkah 25: Kelas Document

Kembali ke Fla dan di Panel Properties, bidang teks Class tambahkan "classes.Main". Ini akan menghubungkan kelas Main sebagai Kelas Document.

Uji Tooltip Anda!

Kesimpulan

Anda telah membuat Tooltip yang sangat dapat disesuaikan di Kelas ActionScript 3, sekarang saatnya untuk melihat bagian kustomisasi. Berikut ini adalah beberapa contoh dari berapa banyak kemungkinan yang Anda miliki:

Terima kasih telah membaca!

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.