Membuat Media Interaktif dengan Animasi Menggunakan Adobe Animate / Flash.

Lagi-lagi ini adalah konten Youtube saya yang saya taruh di sini. Mohon maklum.

Halo subscriber, setelah sebelumnya saya mengupload video tutorial membuat media interaktif dasar, kali ini saya akan mengajari kalian membuat media interaktif yang lebih bagus dengan animasi. Yuk simak tutorial ini biar kamu juga bisa menciptakan media interaktif yang menarik dengan animasi.

Ini adalah contoh media interaktif dengan animasi. Kita bisa lihat di sini tombol bisa bergerak. Dan dia punya animasi yang menarik. Kita akan mempelajarinya di video ini.

Saya menggunakan projek sebelumnya. Bagi kamu yang belum menonton video tutorial dasar saya, kamu bisa menonton videonya dengan klik kartu di atas atau link di deskripsi. Atau jika kamu malas, kamu bisa langsung mendownload projek ini. Link ada di deskripsi.

Ayo kita mulai!

Seperti yang kita lihat, media interaktif yang saya buat di tutorial saya sebelumnya ini sangat membosankan. Tidak ada animasi. Juga tidak punya tampilan yang menarik. Untuk itu kita akan memodifikasi dan memperbaikinya biar jadi mendia interaktif yang menarik.

Hal pertama yang akan kita animasikan adalah tombolnya. Setuju? Yuk kita mulai. Untuk itu kita pilih tombol mana yang akan kita beri animasi. Kita pilih tombol 1 saja ya. Karena tombol ini ada di semua frame, yaitu 1, 2, dan 3, maka kita bisa pilih frame mana saja, dan animasi ini akan berjalan di semua frame. Saya pilih frame 1. Selanjutnya klik dua kali pada tombol 1 buat masuk ke dalam symbol tombol.

Tidak seperti biasa, di sini kita menemukan 4 jenis frame. Up, over, down, dan hit. Di sini saya hanya memakai 3 frame saja ya.

Untuk up, artinya ketika kita tidak sedang melakukan apa-apa pada tombol ini. Kita tidak sedang klik, atau tidak sedang menaruh cursor di atas tombol. Jadi frame up artinya posisi awalan tombol.

Lalu over. Ini artinya ketika kita menaruh cursor pada tombol. Saya langsung beri contoh ya. Di sini saya memperbesar tombolnya. Caranya, kita bikin keyframe di frame over. Lalu kita perbesar menggunakan free transform tool atau dengan menekan shortcut q. Kita perbesar.

Tulisannya hilang karena tulisan terletak pada layer atasnya. Kita bisa lakukan cara yang tadi, atau kita juga bisa langsung klik kanan pada frame over dan pilih insert frame. Dengan begini ukurannya tidak berubah. Kalau mau berubah pakai cara yang tadi, dengan insert keyframe dan ubah ukurannya.

Setelah itu kita coba jalankan dengan menekan ctrl + enter. Kita bisa lihat ketika kita menaruh cursor pada tombol, ukuran tombol jadi besar. Itu berkat frame over tadi. Terlihat masih membosankan? Kita bisa memberi animasi perubahan dari kecil ke besar kalau kita mau. Kita tutup dulu. Caranya, pada frame over, kita klik kanan pada kotak, lalu convert to symbol. Di sini kita pilih movie clip. Namai jika perlu. Karena saya malas, namanya nggak saya ganti deh. Klik oke.

Kita masuk ke movie clip yang baru kita buat tadi dengan cara klik dua kali. Di sini kita bisa membuat animasi. Kamu yang belum paham teknik dasar animasi pada adobe flash atau animate, sebaiknya menonton video tutorial saya tentang teknik dasar animasi. Mudah kok. Atau tinggal perhatikan saja langkah saya.

Kita jalankan dengan menekan tombol ctrl+enter. Kita taruh cursor di atas tombol. Animasi berjalan. Tapi masih terjadi looping. Jika kamu mau, kamu bisa membiarkannya. Namun saat ini kita mau tidak ada looping. Kita mau animasi berjalan sekali saja setelah kursor berada di atas tombol. Kita tutup dulu.

Untuk itu kita perlu perintah stop pada frame terakhir. Di sini saya buat layer baru, lalu pada frame terakhir, saya klik kanan dan buat keyframe. Saya klik kanan lagi dan pilih actions.

Di sini kita masukkan perintah untuk berhenti. Ketik this.stop();

Jalankan. Sudah berhasil.

Selanjutnya, kita juga beri animasi untuk frame down. Kita tutup dulu, lalu kita kembali ke tombol 1. Klik tombol 1. Down itu artinya saat kita klik tombol. Saya mau reaksinya adalah tombol jadi kecil. Jadi saya tinggal klik kanan dan pilih insert blank keyframe. Saya pilih blank keyframe karena jika saya pilih insert keyframe, maka akan mengikuti frame sebelumnya, yaitu frame over. Saya tidak mau itu. Jadi saya pilih insert blank keyframe atau keyframe kosong. Saya mau ada kotak di sini dan kotaknya sama dengan kotak di frame up. Jadi tinggal saya copy. Jangan lupa pilih paste in place atau tekan ctrl + shift + v. Sudah, tinggal saya kecilkan. Kita coba jalankan. Kira-kira sudah bagus ya. Nggak usah bikin animasi seperti di frame over tadi deh. Males. Langsung kita tutup saja.

Tombol 1 sudah. Tinggal tombol 2 dan 3. Kamu bisa bikin animasi satu persatu buat tiap tombol. Tapi saya tidak mau itu. Saya bisa tinggal copy saja. Caranya kita klik kanan pada layer kotak ini. Lalu pilih copy layer.

Setelah itu kita pergi ke scene 1. Kita buka tombol 2 dengan cara klik dua kali pada tombol. Lalu kita paste di sini. Yang ini bisa kita hapus. Kita butuh tulisan pada frame over. Jadi tinggal insert keyframe.

Lakukan hal yang sama pada tombol 3.

Sekarang kamu tahu cara menganimasikan tombol. Masih ada tombol lain di projek ini. Kamu bisa menganimasikan sesuka kamu kalau kamu mau. Kalau saya males. Nggak usah.

Kita kembali ke scene 1. Di sini ada sebuah paragraf. Saya mau menganimasikan paragraf ini. Caranya hampir sama dengan tombol yang tadi. Saya klik kanan pada paragraf. Lalu saya memilih covert to symbol. Untuk type kita pilih movie clip. Namanya bisa kamu ganti kalau mau. Kalau nggak mau nggak apa-apa. Klik oke.

Kita masuk ke dalam movie clip yang baru kita buat tadi dengan cara klik dua kali. Di sini kita bisa bebas menganimasikan. Kamu yang belum bisa bikin animasi liat saja ya langkah-langkah saya. Atau belajar dengan video saya sebelumnya tentang teknik dasar animasi. Bisa klik di kartu di atas atau link di deskripsi. Jangan lupa beri perintah stop seperti tadi. Perhatikan saja. Sama kok.

Kita jalankan dengan menekan tombol ctrl + enter.

Animasi sudah berjalan. Kita berikan animasi pada bagian yang lain. Kalian tinggal perhatikan saja ya. Saya malas jelasin satu persatu.

Sambil menyimak, saya mau mengingatkan. Bagi kalian yang belum subscribe, silahkan subscribe. Bagi kalian yang belum like, silahkan like. Bagi kalian yang belum komen, silahkan komen. Bagi kalian yang belum pencet lonceng, silahkan pencet lonceng. Bagi kalian yang belum nonton video saya yang lain, silahkan nonton video saya yang lain. Bagi kalian yang belum nikah, silahkan nikah. Bagi kalian yang belum mati silahkan mati.

Sudah selesai. Btw, saya sengaja bikin animasi di sini sederhana biar mudah dimengerti ya. Bukan berarti saya nggak bisa bikin animasi bagus.

Dan juga pada bagian foto-foto, kita bisa menambah animasi. Tapi itu tidak saya lakukan karena saya yakin kalian bisa melakukannya sendiri. Lagi pula saya sedang malas.

Judulnya juga bisa kalian animasikan loh. Kalau kamu mau. Caranya sama seperti tadi. Saya nggak akan mengajari kalian lagi. Yang akan saya ajarkan sekarang adalah cara membuat bumper. Bumper adalah bagian awal seperti ini. Terserah kalian menyebutnya apa. Intro, opening, bumper, atau apa saja.

Mari kita mulai. Caranya, kita buat symbol baru dengan klik menu insert, lalu symbol. Kasih nama. Kali ini saya nggak malas. Jangan lupa ganti type menjadi graphic. Setelah itu klik ok. Di sini kita mulai membuat animasi. Saya ingatkan lagi, saya tidak akan mengajari detailnya karena ini sangat mudah dan bila kamu ingin menguasainya, kamu bisa tonton video saya sebelumnya tentang animasi dasar.

Di sini saya mau bikin tulisan selamat datang. Bisa kalian ikuti atau bikin sesuka kalian. Saran saya sih, bikin sendiri sesuai kreatifitas kamu.

Setelah senang dengan hasilnya, kita lihat di mana frame terakhir berada. Di sini frame 25. Lalu  kita kembali ke scene satu. Karena tadi 25, kita tarik semua frame ke frame 40. Terserah sih. Yang penting lebih dari 25. Makin jauh makin lama berhentinya.

Kita buat layer baru. Setelah itu, di library, kita tarik bumper ke stage. Kita tekan enter. Masih belum berhenti. Karena ini bukan movie clip, kita tidak perlu bikin perintah stop.

Caranya, kita klik bamper. Kemudian, kita pergi ke properties. Pada looping option, kita ganti menjadi play once. Dengan itu bamper hanya berputar sekali saja.

Jangan sampai menutupi media interaktif, jadi kita klik kanan lalu remove frame.

Kita jalankan. Dan ketika klik tombol, jadinya malah salah. Karena kita mengganti lokasi frame. Kita perlu memperbaikinya. Caranya kita tinggal mengubah di frame berapa mereka berhenti. Frame 1 jadi 40. 2 jadi 41. Dan 3 jadi 42.

Kita jalankan. Sudah jadi.

Begitu kira-kira cara bikin media interaktif dengan animasi. Terima kasih sudah menonton sampai sini. Terus subscribe karena tutorial adobe frash atau animate ini belum selesai. Masih banyak tutorial lain yang menarik untuk dipelajari.

Nyalakan lonceng notifikasi karena saya akan membuat tutorial membuat media interaktif yang kita buat ini bisa dijalankan di pc dan hape android. Sampai jumpa.