Tombol Interaktif Animate CC

 

Untuk Mempelajari tentang tombol Interaktif sebaiknya Anda putar file swf yang kami lampirkan agar dapat memahami tutorial ini dengan mudah. (Unduh file SWF)

Multimedia interaktif pada dasarnya dikendalikan oleh tombol. Tombol dapat dibuat dari teks (hyperlink), gambar vektor dan image, bahkan video juga dapat dijadikan tombol. Interaksi yang dapat dilakukan didalam aplikasi itu sendiri atau berhubungan dengan luar seperti halaman web atau yang disebut online.

VIDEO TERKAIT: 

User Interface atau tampilan pada sebuah aplikasi dihiasi sekumpulan teks dan gambar yang berfungsi sebagai tombol. Begitu pentingnya tombol, selain keindahan tombol juga menjalankan fungsi sebagai penghubung dengan cara pemberian perintah (koding).

Koding atau script dalam Animate CC sudah dikemas dalam panel Snippets, sehingga sebagai desain artis bahkan anak ABG tidak perlu cemas untuk ikut berpartisipasi dalam membuat aplikasi sederhana.

Setelah Anda mempelajarai file SWF yang saya lampirkan, mari kita mulai membahasnya tahap demi tahap.

• Pada menu File > New from Template
• Pada kotak dialog, pilih Air for Android > 800 x 480 Blank > OK.

• Pada panel Properties W = 480 dan H = 800
• Buat Zoom = 50%

• Gunakan tool Text Untuk membuat tulisan Scene 1 Frame 1
• Pilih Font dan sesuaikan ukurannya.

Membuat halaman kedua, pada Scene1 Frame 2.

• Klik kanan frame 1 > Copy Frames
• Klik kanan frame 2 > Paste Frames
• Geser slider merah ke frame 2 > ganti tulisan menjadi SCENE1 FRAME 2.

Selanjutnya membuat halaman pada Scene 2 frame 1.

• Pada menu Insert > pilih Scene.
• Buka ikon Edit Scene, ada 2 buah Scene; Scene 1 dan Scene 2.

Mengcopy Frame 1 Scene 1 ke Frame 1 Scene 2.

• Klik Edit Scene > pilih Scene 1.
• Klik kanan keyframe 1 > pilih Copy Frames.
• Klik Edit Scene > pilih Scene 2.
• Klik kanan keyframe 1 > pilih Paste Frames.
• Ganti tulisan menjadi SCENE 2 FRAME 1.

Selanjutnya Anda akan membuat tombol dari scene 1 frame 1 ke scene 1 frame 2. Dari scene 1 frame 2 ke scene 2 frame 1. Dan dari scene 2 frame 1  kembali ke scene 1 frame 1.

Tombol Bulat

• Klik Edit Scene > pilih Scene 1.
• Klik tool Oval > Shift+drag untuk membuat objek lingkaran.
• Klik kanan pada objek lingkaran > Convert to symbol.
• Pada kotak dialog, pilih Button > beri nama tombolBulat (perhatikan cara penulisan).
• Klik OK.

Pada panel Properties beri nama objek tombol menjadi objekTombolGo. Nama ini yang akan dikenali oleh koding.

Tombol Kotak

Selanjutnya adalah membuat tombol kotak pada frame 2, beri nama tombolKotak  > pada panel Properties ketik nama tombolKotakGo.

Tombol Segilima

• Dengan cara yang sama buat tombol pada Scene 2 frame 1.
• Buka Edit Scene > pilih Scene 2.
• Gunakan tool PolyStar untuk membuat objek segilima, berinama tombolSegilima dan pada panel properti beri nama tombolSegilimaGo.

Perintah Stop pada Frame 1 Scene 1 dan memberi perintah ke frame 2 pada tombolBulat.

• Pastikan pada Scene 1 > klik frame 1.
• Pada menu Window > Code Snippets > buka folder Timeline Navigation.
• Klik ganda pada Stop at this frame. Jika koding masuk pada frame 1, maka akan muncul layer Action dan simbol @ pada frame 1. 

Secara otomatis pnel Actions juga terbuka, memberi penjelasan koding yang baru saja dibuat.

• Klik tombolBulat (pastikan hanya tombol bulat yang terpilih) > klik ganda Click to Go to Frame and Stop.
• Pada panel Action ketik 2.

Perintah pada tombolKotak

• Klik frame 2 > Klik objek tombolKotak.
• Pada panel Code Snippets > Klik ganda Click to Go to Scene and Play.
• Pada panel Actions, ketik Stop dan Scene 2.

Perintah pada tombolSegilima

• Klik Edit Scene > pilih Scene 2.
• Klik frame 1 > Klik objek tombolSegilimaGo.
• Pada panel Code Snippets > Klik ganda Click to Go to Scene and Play.
• Pada panel Actions, ketik Stop dan Scene 1.
• Mencoba Tombol Interaktif.
• Pad menu Control > Test Movie > pilih In Air Debug Launcher (Desktop)

Biasanya objek tombol ditandai dengan perubahan warna ketika tersentuh kursor atau tangan. Selain dapat mempercantik, hal ini untuk membedakan objek tersebut adalah tombol bukan gambar.

• Klik ganda pada objek tombolBulat. Perhatikan sekarang Anda berada pada tombol editor.
• Klik kanan keyframe Up > lalu pastekan ke frame Over dan Down.
• Klik Frame Over > lalu ganti warna pada panel properties.

Jika perlu ulangi langkah diatas untuk objek pada frame Down.

• Klik ikon Scene 1 > menu Control > klik Test.

Setelah mengikuti latihan ini, diharapkan Anda sudah mengenal cara membuat tombol, Frame dan Scene lalu memberikan perintah sederhana pada masing-masing tombol.

Sekian dan Terima Kasih.