Adobe Animate / HTML 5 / Multimedia · August 21, 2022

Konsep Dasar Navigasi HTML5 Canvas Pada Adobe Animate 2022 #3

image_pdfimage_print

Navigasi digunakan untuk mempermudah user dalam menggunakan media yang sudah kita buat, untuk membuat navigasi yang baik harus mempelajari tentang UI/UX agar mendapatkan hasil yang maksimal. Mulai dari desain yang bagus dan tata telat yang di inginkan oleh User.

Langkah awal untuk membuat sebuah tombol kita harus membuat halaman baru terlebih dahulu, dengan cara :

  • Klik file – New Document – Advanced, sesuaikan ukuran dengan kebutuhan kita
New Document
  • Buat 2 buah layer beri nama seperti gambar berikut
Layer Pada Timeline
  • Buat sebuah objek dengan Ractangle Tool (R) pada frame 1 di layer tombol
Tombol A
  • Convert menjadi tombol dengan cara, klik kanan pada objek lalu pilih Convert to symbol, isi Name dengan btn_tombol1, lalu pada Type pilih button.
Tombol btn_tombol1
  • Klik dua kali pada objek, lalu kreasikan sesuai kebutuhan anda
Tampilan saat pertama kali tombol dijalankan
Tampilan tombol saat kursor diarahkan ke tombol
  • Selanjutnya Duplicate tombol dengan cara klik pada menu Library sebelah kanan atas, lalu klik kanan pilih duplicate pada objek tombola seperti contoh dibawah
Settinga saat duplicate objek
  • Selanjutnya pada Scene 1, layer tombol Insert keyframe pada frame ke 5
Insert Keyframe
  • Drag and Drop tombolb pada Library ke dalam Stage
Drag and Drop tombol b kedalam stage
  • Lalu posisikan sejajar dengan tombol sebelumnya, lalu hapus tombol yang lama.
  • Setelah itu klik dua kali pada objek lalu ubah tulisannya menjadi tomb B
Tombol B pada frame 5