Aplikasi UMKM Ikan Cupang. Desain Art Tombol dan Movieclip dengan Adobe Flash CS6

Dalam kesempatan ini, kita akan membuat sebuah aplikasi penjual ikan hias. Tujuan pembelajaran, setelah latihan ini diharapkan Anda dapat memahami tombol dan movieclip secara tepat guna. Tidak hanya pengenalan tool dalam Adobe Flash, namun bagaimana Anda dapat mengembangkan Desain Art.

Tombol dalam sebuah perwajahan web dan aplikasi memegang peranan sangan penting. Anda beralih dari satu halaman ke halaman lain, semua dikendalikan oleh tombol. Baik oleh tombol teks ataupun tombol bergambar (ikon).

Saya lampirkan file latihan (download disini), karena kita akan memulai dari file terlampir.

Video Tutorial:

Latihan yang akan dikerjakan adalah mengenal properti tombol dalam terapannya dan mengimpor video.

1. Setelah Anda berhasil mendownload, buka file latihan tersebut.

2. Tekan Ctrl+Alt+Enter, untuk melihat aplikasi latihan.

Membuat Tooltip pada tombol dan Memberi perintah.

Klik ganda pada salah satu tombol dibawah, untuk beralih ke panel tombol edit.
Aktifkan panel Timeline > klik kanan pada layer 2 kolom Over > lalu pilih Insert Blank Keyframe.
Pada panel library (Ctrl+L.) drag movieclip Tooltip ke Objek tombol.

Tekan Ctrl+Alt+Enter, untuk melihat hasil sementara.

Selanjutnya, memberi perintah pada tombol tersebut untuk membuka halaman 2.

Kembali ke Scene1.
Pastikan tombol dalam keadaan terpilih.
Pada panel Properti, beri nama btnCupangBiru.
Buka panel Code Snippets (Window > Code Snippets )
Klik ganda pada Go to Next Frame and Stop.

Tanda bahwa actionscript telah masuk, panel Actions akan terbuka dengan kode didalamnya.

Tekan Ctrl+Alt+Enter, untuk melihat hasil sementara.
Klik tombol CupangMerah untuk beralih ke halaman 2.

Selanjutnya adalah tombol cupangBiru dijadikan tombol kembali ke halaman , dan tombol berikutnya akan diberi nama cupangMerahGo untuk menuju ke halaman 3.

Pastikan perintah kembali ke halaman 1, ditampilkan pada panel Actions.

Tekan Ctrl+Alt+Enter, untuk melihat hasil sementara.
Tutup panel Actions dan lainnya jika dirasa mengganggu pekerjaan.

Yang harus Anda kerjakan berikutnya adalah; Memberi tooltip dan mengedit isinya serta membuat halaman ke 3 dan mengimpor video.

Klik tombol ke 2 untuk memilihnya.
Pada panel Properties > beri nama btnCupangMerahGo.
Pada panel Code Snippets > klik ganda pada Go to Next Frame and Stop.

Memberi Tooltip tombol ke 2

Klik ganda tombol ke 2 untuk membuka panel tombol edit.

Klik titik dibawah ikon mata , untuk menyembunyikan gambar tombol 2.
Klik ganda titik dibawah ikon tombol 2, untuk membuka panel edit movieclip
Geser slider ke frame akhir. Perhatikan posisi tooltip kurang tepat.

Mengedit posisi garis pengarah

Klik titik dibawah ikon mata layer 7, dan buka ikon gembok layer 6.
Pilih tool Selection > posisikan kursor di ujung garis, hingga muncul simbol garis siku > lalu drag untuk memposisikannya

Posisikan gambar dan teks sesuai dengan keinginan.
Akifkan gembok pada layer 6 dan 7. Garis pengarah terputus.

Buka gembok layer 7, lalu gunakan tool Free Transform untuk mengedit objek elips, agar menutup seluruh garis pengarah.

Objek elips adalah objek Mask. Semua yang berada dibawah objek mask akan terlihat, sedang yang diluar objek mask tidak terlihat.

Tutup semua panel editor movieclip, tombol dan kembali ke Scene1.

Agar tooltip tidak sama antara pada tiap tombol, copy mcTooltip yang ada lalu beri nama lain.

Pada panel Library, klik kanan mcTolTip > pilih Duplicate.
Pada panel Duplicate Symbol ketik nama yang diinginkan.

Sampai pada tahap ini, diharapkan Anda dapat mengerti tentang sekilas tombol, movieclip, masking dan penempatannya secara tepat guna dalam pendekatan desain art.

Impor Video

Akhir dalam seri ini adalah mengimpor dan menempatkan beberapa jenis video dan membuat halaman baru.

Video yang dikenal oleh Adobe Flash berformat FLV. Untuk memformat video, sebaiknya menggunakan Adobe Media Encoder agar tidak menimbulkan masalah nantinya.

Buka Adobe Media ENcoder.
Klik tanda +, lacari video yang akan diformat.
Pilih FLV > lalu klik Start Queue.

Membuat halaman ke 3

Pastikan berada pada Scene 1 dan Timeline terbuka.
Tekan Shif+ klik pada frame3 untuk memilih semua frame 3.
Klik kanan pada frame terpilih > klik Insert Keyframe.

Seluruh isi pada frame 2 di copy pada frame 3.

Sebelum menghapus video yang ada, catat ukuran dan posisinya.

Pada panel Library > seret FLVPlayback (Window > Components) ke posisi video.
Pada panel Properties, klik ikon pinsil Source. Lau cari dimana video FLV yang akan digunakan.

Sesuaikan ukuran dan posisi video.

Kembangkan aplikasi ini sesuai untuk usaha UMKM Anda; penambahan Logo, alamat, ganti video dengan milik Anda dan jangan lupa menambahkan ikon WA agar bisa dihubungi.

Jika mengalami kesulitan dalam mendownload file latih, bisa hubungi saya di kolom komentar.

Published: Seno Adjie.