FLASH :: Membuat Media Pembelajaran Dengan Flash

Media pembelajaran secara umum dapat digunakan sebagai alat bantu dalam proses pembelajaran. Media pembelajaran saat ini telah banyak dikembangkan dengan penggabungan multimedia. Hal ini diharapkan akan lebih menarik minat siswa untuk lebih aktif belajar. Sebagai seorang pengembang, salah satu software untuk membuat media pembelajaran yang menarik adalah dengan menggunakan Adobe Flash.

Tutorila flash  kali ini kita akan coba membuat media pembelajaran sederhana tentang pengenalan binatang-binatang. Sebelum memulai, silahkan untuk mengunduh gambar-gambar yang diperlukan dalam tutorial ini [disini]. Download demo hasilnya [disini]

Berikut cara membuat media pembelajaran dengan adobe flash actionscript 2.0 :

Langkah 1

Setelah di download, ekstrak file *zip ke sebuah folder. Lalu buka Adobe Flash dan pilih Flash Actionscript 2.0.

Langkah 2

Tambahkan file gambar-gambar yang telah di download tadi dengan cara memilih menu File > Import > Import to Library. Cari tempat penyimpanan gambar, select all (CTRL+A) lalu pilih Open.

Maka gambar-gambar tadi akan muncul di Library.

Langkah 3

Atur ukuran Stage menjadi 800 x 480.

Langkah 4

Tambahkan 2 Layer baru, sehingga menjadi 3 Layer. Lalu Rename masing-masing Layer dengan nama Background, Loading, dan Icon.

Langkah 5

Klik di Layer Backround lalu tempatkan di Frame 1. Kemudian tarik gambar BG.png di Library kedalam Stage. Atur posisi hingga memenuhi ukuran Stage.

Langkah 6

Masih di Layer Background, kali ini klik kanan di Frame 52 lalu pilih Insert KeyFrame. Ini berfungsi untuk menampilkan background di Frame 1 sampai Frame 52

Langkah 7

Sekarang klik pada Layer Icon. Tempatkan di Frame 1. Lalu tarik gambar LOADING.png ke dalam Stage.

Langkah 8

Masih di Layer Icon, kali ini klik kanan di Frame 50 lalu pilih Insert KeyFrame.

Langkah 9

Klik pada Layer Loading. Tempatkan di Frame 1. Lalu buatlah sebuah kotak kecil dengan menggunakan Rectangle Tool pada bagian awal gambar loading tadi.

Langkah 10

Masih di Layer Loading, kali ini klik kanan di Frame 50 lalu pilih Insert KeyFrame. Pada Frame 50 di Layer Icon ini, klik Free Transform Tool lalu perbesar lebar kotak tadi menjadi memenuhi gambar loading.

Langkah 11

Masih di Layer Loading, klik kanan diantara Frame 1 sampai Frame 50 lalu pilih Create Shape Tween. Ini digunakan untuk membuat perubahan bentuk kotak dari ukuran awal kecil hingga panjang. 

Tekan CTRL+ENTER untuk melihat hasilnya. Sampai disini kita sudah bisa membuat animasi untuk membuat sebuah loading.

Langkah 12

Klik pada Layer Icon, lalu klik kanan pada Frame 51 pilih Insert Blank KeyFrame. Kemudian klik kanan lagi di Frame 51 tadi dan pilih Actions. Tulis script berikut ini :

Script ini untuk menghentikan animasi ketika sampai di frame 51. Artinya setelah loading tadi sampai pada akhir, animasi akan stop dan tidak akan mengulang lagi dari awal. 

*jika tidak bisa menulis script coba tekan script assist terlebih dahulu.

Langkah 13

Klik di Frame 51 di Layer Icon, lalu tambahkan gambar BTN_MULAI dan LOGO tempatkan seperti pada gambar berikut ini.

Langkah 14

Klik kanan pada gambar BTN_MULAI lalu pilih Convert to Symbol.

*harap diperhatikan klik hanya btn_mulai saja jangan sampai mengklik 2 gambar dengan gambar logo

Beri nama btnmulai dengan Type Button. Ini digunakan untuk merubah bentuk gambar tadi menjadi sebuah Button. [lihat cara membuat button di flash]

Langkah 15

Klik kanan pada Button btnmulai tadi, lalu pilih Action. Tulis script berikut ini :

Ini digunakan ketika Button ditekan, aksinya adalah gotoAndStop(52) yang artinya pergi dan berhenti di Frame 52. Button tadi terdapat di Frame 51 dan ketika di klik maka akan menampilkan Frame ke 52.

Langkah 16

Masih di Layer Icon, kali ini klik kanan di Frame 52 lalu pilih Insert BlankKeyframe. Klik di Frame 52 di Layer Icon tadi lalu tambahkan gambar binatang-binatang seperti buaya, gajah, jerapah, dan zebra ke dalam Stage.

Langkah 17

Klik gambar buaya, kemudian klik kanan dan pilih Convert to Symbol. Beri nama btnbuaya dengan Type Button. Lakukan hal yang sama untuk gambar gajah, jerapah, dan zebra. Ganti nama button sesuai nama hewan.

Langkah 18

Kali ini masih di Frame 52 di Layer Icon, tambahkan gambar info-info binatang ke dalam Stage. 

Langkah 19

Klik gambar infobuaya, klik kanan lalu pilih Convert to Symbol. Beri nama infobuaya dengan Type MovieClip. Lalukan hal yang sama untuk gambar info lainnya sesuai dengan nama hewan.

Langkah 20

Klik movieclip infobuaya tadi, lalu tambahkan Instance Name dengna nama infobuaya. Begitupun dengan gambar info yang lain, infogajah, infojerapah, dan infozebra.

Langkah 21

Kita akan buat ketika button buaya di klik maka yang muncul adalah infobuaya. Begitupun untuk button hewan yang lain. Nah sebelumnya kita harus menyembunyikan terlebih dahulu gambar info-info di Stage. Caranya klik kanan di Frame 52 di Layer Icon lalu pilih Actions. Tulis script berikut :

Ini digunakan untuk menyembunyikan (visible=false) gambar info-info hewan pada Frame 52.

Langkah 22

Kali ini klik kanan di Button Buaya, lalu pilih Action. Tulis Script berikut ini :

Ini digunakan ketika button buaya ditekan untuk menampilkan info buaya (visible=true) dan menyembunyikan info hewan lainnya (visible=false).

Lakukan hal yang sama untuk Button hewan lainnya, rubah visible true dan false.

Langkah 23

Jalankan animasi / media pembelajaran dengan menekan CTRL+ENTER. Bagaimana cukup mudah bukan ? Untuk menyimpannya klik Menu File > Export > Export Movie, lalu pilih Type menjadi *swf. Download demo hasilnya [disini]

Bagi yang kesulitan silahkan bertanya di form komentar, dan jika butuh jasa pembuatan media pembelajaran silahkan hubungi admin yaa. Sekian untuk tutorial kali ini, semoga bermanfaat :)