Cara Membuat Media Interaktif Menggunakan Adobe Animate / Flash

 Btw, ini tidak sengaja saya tulis buat blog, melainkan saya tulis buat tutorial YouTube. Jandi jangan kaget kalau banyak yang berbau YouTube di sini. Kamu bisa baca atau saran saya tonton saja videonya di bawah ini.

 

Halo subscriber. Hari ini saya akan mengajari kalian membuat media interaktif menggunakan Adobe Animate, atau Adobe flash.

Media interaktif adalah salah satu sarana informasi dan presentasi yang menyenangkan karena pengguna bisa berinterasi.

Dengan menonton tutorial ini, saya harap kalian bisa membuat media interaktif yang bagus seperti ini. Ini adalah contoh media interaktif yang pernah saya buat. Bagus ya? Yang ini juga bagus. Wah... bagus banget. Kamu juga bisa bikin loh.

Tapi untuk membuat media interaktif yang bagus, kita perlu belajar dulu. Dan untuk belajar yang efektif, kita harus belajar yang lebih dasar terlebih dulu. Kita belajar membuat seperti ini.

Jelek ya? Nggak juga. Ini adalah pelajaran dasar yang akan saya ajarkan. Oke. Mari kita mulai sekarang.

Karena tidak banyak kerumitan pada media interaktif yang akan kita buat, kamu bisa menggunakan versi lama adobe flash. Asalkan bukan macromedia flash, karena masih menggunakan actionscript lama dan mungkin tidak mempunyai fitur yang nanti akan kita gunakan.

Kamu bisa memilih HTML5 canvas jika media interaktif yang kamu buat akan kamu taruh di web atau blog. Namun saya pilih ActionScript 3.0.

Kenapa? Biarin! Suka-suka saya. Wkwk. Kalau memang penasaran, tulis pertanyaan kamu di komentar. Nanti aku jawab.

Betewe kamu bisa mengubah ukuran sesuka kamu di sini.

Lanjut.

Mari membuat teks. Teks judul. Kamu bisa menekan tombol ‘T’ untuk mengaktifkan teks tool. Klik di mana kita mau membuat teks. Kamu bisa mengatur teks di bagian properties. Kamu juga bisa mengubah ukurannya dengan free transform tool atau dengan menekan shortcut ‘Q’.

Oke. Selanjutnya kita buat tombol. Karena kita butuh tombol untuk membuat media interaktif.

Alangkah baiknya bila kita menempatkan tombol kita di layer yang terpisah. Jadi mari kita buat layer baru. Klik tombol ini. Lalu kita ganti namanya. Klik dua kali pada layer. Kita kasih nama tombol.

Mari kita bikin tombolnya. Kita buat teks seperti tadi buat tombolnya. Sudah.

Tapi teks ini belum jadi tombol. Untuk itu, kita ubah dulu. Caranya, klik kanan pada teks, lalu convert to symbol. Untuk type pilih button. Dan ganti namanya.

Klik dua kali untuk mengedit tombol. Kita mau tombol ini berbentuk persegi panjang. Jadi buat persegi panjang di bawah teks. Buat layer baru dulu lalu letakkan di bawah. Tekan ‘R’ untuk rectangle tool. Buat kotak. Sesuaikan warna dengan selera kita.

Biar teks dan kotak berada di tengah, seleksi keduanya menggunakan selection tool dengan shortcut ‘V’. Setelah itu, pada Align, klik ini.

Klik dua kali di luar tombol untuk keluar dari tombol dan kembali. Kita butuh beberapa tombol dengan bentuk yang sama. Jadi kita tinggal pergi ke library dan pilih tombol 1 yang baru kita buat tadi. Klik kanan dan duplicate. Namai. Lalu pada seret hasil duplikat ke stage.

Klik dua kali untuk mengedit. Klik dua kali lagi pada tulisan dan ubah tulisannya. Lakukan hal yang sama bila butuh tombol lagi.

Oke. Selanjutnya kita sesuaikan tata letaknya. Aku percepat saja ya.

Sudah bagus. Selanjutnya kita membuat isi dari media interaktif kita. Bentar. Saya cepetin lagi ya.

Alangkah baiknya kita pisah-pisah layernya ya. Biar mudah.

Karena kita akan membuat media interaktif, di mana di setiap frame terdapat tombol yang sama, maka kita klik kanan pada frame kedua layer tombol dan pilih insert frame. Pada layer isi, kita pilih insert blank keyframe. Karena tiap frame punya isi yang berbeda-beda.

Eh. Belum saya ganti ya nama layernya. Duh.

Judulnya saya pisah saja ya.

Oke. Selanjutnya kita isi frame kedua. Klik frame kedua pada layer isi, lalu gunakan text tool untuk menulis.

Kamu juga bisa menambahkan gambar dengan menyeret gambar ke library.

Nampaknya gambar ini tidak memiliki rasio yang cocok ya. Kita crop saja menggunakan fitur masking.

Klik kanan dan convert to symbol. Pilih graphic. Namai jika kamu mau. Klik dua kali pada gambar yang sudah kita convert tadi. Lalu buat layer baru di atasnya.       Buat persegi dengan ukuran yang kita inginkan. Klik kanan pada layer persegi dan pilih mask. Selesai. Kita kembali ke luar dengan klik dua kali di bagian kosong.

Atur lagi ukurannya biar cantik.

Kita tambah lagi frame selanjutnya. Untuk layer yang tetap sama, pilih insert frame. Dan untuk layer yang berubah, pilih insert blank keyframe. Untuk frame yang ini saya mau kasih gambar-gambar. Jadi saya import lagi gambar-gambar ke library dengan cara yang tadi.

Karena banyak, saya mau nanti gambar berganti-ganti ketika kita menekan tombol next. Kita bikin sebuah movie clip terlebih dahulu dengan klik menu insert, new symbol. Jangan lupa pilih movie clip. Namanya saya ganti gambar-gambar.

Selanjutnya saya masukkan semua gambar yang saya inginkan. Selanjutnya insert keyframe sebanyak gambar yang kita punya. Selanjutnya kita hapus gambar di frame dua dan tiga biar tiap frame punya gambar yang beda-beda.

Karena ukurannya tidak sama, kita samakan menggunakan teknik masking seperti yang tadi. Kamu pasti ingat.

Kita butuh tombol. Jadi kita buat di layer baru. Caranya seperti tadi. Buat text, lalu convert to symbol, pilih button.

Setelah jadi, kita kembali ke scene 1. Klik scene 1.

Gambar-gambar yang kita buat belum ada. Jadi kita harus memasukkan. Cari di library, lalu seret. Taruh dan atur posisinya.

Mari kita coba. Untuk menjalankan, tekan ctrl + enter.

Belum berhasil. Karena kita belum measukkan perintah untuk setiap tombol. Dan kita belum menghentikan frame. Untuk itu kita tutup.

Pilih tombol yang akan kita kasih perintah.

Selanjutnya kita buka code snippets. Jika sebelumnya kamu memilih html5 canvas, kamu harus memilih html5 canvas. Karena tadi saya pilih actionscript 3.0, maka saya harus pilih actionscript.

Buka action, lalu klik dua kali go to frame and stop. Muncul dialog seperti ini. Artinya masih ada yang harus kita lakukan. Yaitu memberi nama tombolnya. Jadi kita pergi ke properties, lalu di sini kita ganti namanya. Jangan gunakan spasi. Kita langsung namai tombol yang lain saja.

Kalau sudah kita pilih tombol yang akan kita kasih perintah. Tombol 1 dulu ya.

Selanjutnya kita kembali ke code snippents. Kita pilih go to frame and stop.

Karena tombol 1 mengarahkan kita ke frame 1, maka kita ganti 5 menjadi 1.

Lakukan hal yang sama pada tombol 2 dan 3.

Mari kita coba. Masih gini. Artinya masih ada satu lagi perintah yang belum kita masukkan. Perintah untuk berhenti. Mari kita masukkan.

Pada frame pertama layer actions, klik kanan dan pilih actions. Di baris pertama ketik stop, buka kurung, tutup kurung, titik dua. Untuk html5 canvas, masukkan this, titik, stop, buka kurung, tutup kurung, titik dua. Mari kita jalankan.

Tombol 1, 2 dan tiga sudah berfungsi. Namun pada gambar-gambar masih berantakan. Karena kita belum memasukkan perintah di sana.

Kita pergi ke frame 3, di mana gambar-gambar berada. Klik dua kali untuk masuk ke dalam movie clip. Seperti tadi, kita klik tombol dan beri nama.

Lalu ke code snippets. Kita pilih next frame karena kita mau tombol ini mengantarkan kita ke frame selanjutnya. Jangan lupa kita taruh perintah stop di atas seperti yang tadi. Perintahnya di awal frame ya.

Di frame terakhir layer action, kita masukkan perintah lagi. Tapi sebelumnya kita harus bikin keyframe di layer tombol, lalu kita ubah nama tombol itu.

Kita beri perintah untuk kembali ke frame pertama.

Kita juga bisa menambah gambar lain. Tinggal masukkan ke library. Seret frame terakhir. Pada layer gambar kita insert blank keyframe, dan kita masukkan gambar ke keyframe yang kosong tersebut.

Hore. Media interaktif yang sangat sederhana sudah kita buat. Kalian bisa mengembangkan media interaktif yang kalian buat menjadi lebih menarik sesuai kreatifitas kalian.

Terima kasih bagi kalain yang sudah menonton video tutorial saya sampai sini. Like dan subscribe.

Tutorial apa lagi selanjutnya? Tulis di kolom komentar. Sampai jumpa.