Membuat media interaktif (basic) dengan Adobe Flash CS6

Belajarmultimedia.com – Pernahkah melihat sebuah media pembelajaran

interaktif? Dan anda ingin membuat media yang sama seperti itu? Bila iya,
maka anda sudah tepat sekali datang ke website ini. Pada tutorial kita kali ini,
kita akan membahas bagaimana membuat sebuah media pembelajaran
menggunakan Adobe Flash CS 6. Bagi yang sudah mahir bisa melewatkan
tutorial kali ini, bagi yang masih bingung dan awam dengan software Adobe
Flash nah inilah tutorial yang tepat untuk anda. Tidak perlu bimbang karena di
tutorial kali ini dilengkapi dengan materi dan aplikasi flash yang sudah jadi.
Oke baiklah, siapkan aplikasi Adobe Flash CS6 anda dan ikuti langkah-langkah
di bawah ini.
1. Jalankan aplikasi Adobe Flash pada komputer, kemudian pilih Create
New / Actionscript 2.0

2. Kemudian setting document dengan menekan Ctrl + J pada keyboard

untuk membuka jendela Document Setting. Dan atur Dimension nya
1024px X 768px, gunakan frame rate standar 24 fps dan background
color terserah atau biarkan warna default (putih).
3. Pilih Fit in Window untuk merubah tampilan stage agar terlihat

keseluruhan.

4. Ganti nama Layer1 menjadi Background untuk memudahkan pengeditan

(apabila jumlah layer yang digunakan banyak pada nantinya) dengan
klik kiri dua kali pada mouse tepat di teks Layer1.

5. Masukkan gambar background yang sudah disedikan dengan cara, klik

file / import / import to library. Kemudian cari file gambar
Background.jpg yang ada dalam hardisk.
6. Setelah file gambar di import buka jendela library dengan menekan Ctrl
+ L. Lalu klik and drag file gambar (Background.jpg) yang ada disana

kedalam stage.

7. Buka jendela Align untuk mengatur posisi image. Tekan Ctrl + K untuk
membuka jendela Align dan centang pada pilihan Align to stage, lalu
klik center pada bagian Align dan Distribute. Bila benar maka file image
(Background.jpg) akan berada di tengah-tengah stage.
8. Kunci layer background untuk menjaga semua file yang ada pada layer
tersebut tidak terganggu atau berubah posisi.

9. Tambahkan layer baru pada timeline dengan cara klik insert / timeline /
layer, atau klik icon New Layer pada panel timeline. Dan rubah nama
Layer2 menjadi Header. (Klik kiri mouse dua kali tepat di atas teks
Layer2 untuk mengganti nama layer. Lihat nomor 4).

10. Gambarlah pada layer Header menggunakan Rectangle Tool (Tekan R

pada keyboard atau klik icon Rectangle Tool pada menu panels ) dengan
tahan tarik dari atas kiri pada stage ke kanan (sesuaikan dengan
panjang background). Ubah warnanya sesuai keinginan (gunakan Fill
Color untuk merubah warna) dan bentuk ujung-ujung header sesuai
 keinginan dengan menggunakan Selection Tool (atau tekan V pada

keyboard).

11. Isikan teks untuk judul pada header. Klik icon Text Tool pada panel atau
tekan T pada keyboard lalu arahkan pointer pada header dan klik kiri
sekali pada mouse untuk mulai mengetik.

12. Pada contoh dibawah saya menggunakan Font jenis “GoodDog Plain”

dengan warna putih dan ukuran 80 pt.

13. Atur dan sesuaikan tampilan teks pada header sesuai selera anda. Atau
ikuti contoh yang saya buat.

14. Tambahkanlah tagline di bawah teks judul untuk memperindah tampilan

header. Pada contoh saya menggunakan Font jenis “GoodDog Plain”
dengan warna putih dan ukuran 25 pt.
15. Kunci layer header agar tidak terganggu atau berubah posisi.

16. Tambahkan layer baru diatas layer Header. Beri nama Footer.

17. Kemudian gambar menggunakan Rectangle Tool dengan tarik dari

bawah kiri pada stage ke kanan (sesuaikan dengan panjang
background). Gunakan Selection Tool untuk merubah bentuk footer.
18. Tambahkan teks pada footer. Saya menggunakan Font jenis “GoodDog
Plain” dengan warna putih dan ukuran 25 pt.

19. Seperti biasa kunci layer Footer agar tidak terganggu atau terubah
posisi.

20. Tambahkan layer baru dan beri nama Button.

21. Pada layer Button, gambarlah sebuah bujur sangkar menggunakan

Rectangle Tool. Untuk menghasilkan gambar bujur sangkar sempurna,
tekan tombol Shift pada keyboard bersamaan klik kiri pada mouse dan
tarik keatas atau kebawah sambil disesuaikan ukuran bujur sangkar
seperti yang kita inginkan. ( Note : untuk membuat agar sudut bujur
sangkar tidak lancip / candybar, gunakanlah Rectangle Options pada
Properties untuk mengatur sudut ke-lancip-an. Saya menembahkan nilai

10 pada Rectangle corner radius nya).

22. Kemudian seleksi gambar bujur sangkar yang sudah kita buat lalu klik
Modify / Convert to symbol atau bisa juga tekan F8 pada keyboard.

23. Pada jendela Convert to symbol isikan nama symbol “tombol_btn”,

pilihan pada type adalah “button” dan registration nya “center”. Lalu
klik oke, maka bujur sangkar telah menjadi sebuah tombol.

24. Untuk memperindah bentuk tombol tadi gunakanlah Filter. Caranya

seleksi tombol yang baru kita bikin tadi, kemudian pada jendela
Properties tambahkan filter. Filter yang saya gunakan disini adalah
 Glow dengan nilai Blur 10px dan warna abu-abu.

25. Hasil tombol jadi setelah di filter adalah seperti ini.

26. Seleksi tombol yang sudah jadi tadi, kemudian copy dan paste-kan
hingga menjadi empat tombol. Aturlah posisi tiap tiap tombol sesuai
selera.
27. Klik dua kali pada salah satu dari empat tombol yang sudah jadi tadi.
Maka secara otomatis kita akan masuk pada bagian edit tombol,
lihatlah pada panel Timeline. Keyframe pada Timeline sekarang
berubah. Disana ada Up, Over, Down dan Hit.

28. Tambahkan Keyframe pada frame Over. Caranya klik kanan tepat pada
frame Over kemudian pilih Insert Keyframe. Maka pada frame Over
bertambah titik hitam pada frame nya, ini menandakan berarti frame
pada Over sudah menjadi Keyframe.

29. Lakukan hal yang sama pada frame Down dan Hit.

30. Kemudian klik pada frame Over. Gantilah warna pada gambar bujur
sangkar dengan meng-klik color pada panel Color dan turunkan batasan
kursor ke bawah untuk mendapatkan warna yang lebih tua (atau anda
 dapat menggati warnanya sesuai selera anda).

31. Ujilah hasil pilihan anda dengan menekan Ctrl + Enter. Bila benar ketika
setiap pointer mouse menyentuh tombol, maka warna pada tombol
berubah.

32. Tutup atau close hasil uji media pembelajaran anda.

33. Masih di frame Over, sekarang kita masukkan efek suara. Caranya kita
mengambil efek suara yang sudah disediakan adobe dengan klik
window / common libraries / sounds

34. Pada jendela Sounds pada External Library tersebut pilihlah salah satu
efek suara yang anda inginkan. Dalam hal ini saya memilih “Liquid Water
Dripping Single 01.mp3” . Untuk mendengarkan suara efek-nya klik
tombol play yang ada di sana. Bila anda sudah yakin dengan pilihan
tersebut tinggal klik and drag kedalam stage.

35. Bila anda memasukkan efek suara dengan benar maka pada frame Over
terlihat garis noise warna biru. Hal itu menandakan bahwa di frame

tersebut sudah tersimpan suara.

36. Uji cobalah lagi media pembelajaran anda dengan klik Ctrl + Enter. Bila
benar maka setiap pointer mouse menyentuh tombol tersebut maka
akan terdengar efek suara.

37. Tutup atau close hasil uji media pembelajaran anda.

38. Sekarang kembali ke scene 1 dengan meng-klik tombol icon scene 1

yang letaknya ada dibawah timeline.

39. Masih di Layer Button, isikan teks untuk memberi nama masing-masing
tombol tersebut. Berikan nama masing-masing tombol tersebut sesuai
keinginan anda. Dalam hal ini saya memberi nama secara berurutan
dari kiri ke kanan yaitu: petunjuk, materi, latihan dan profile.

40. Buat layer baru dengan nama Action. Layer Action kita khususkan hanya

untuk menuliskan coding Actionscript.

41. Pada layer Action, klik kanan pada frame satu kemudian pilih Action
untuk membuka jendela coding. Atau anda bisa langsung menekan F9

pada keyboard.

42. Pada jendela Actions yang sudah terbuka tulislah coding sederhana
berikut:
stop();
43. Tutup jendela Actions. Sekarang perhatikan frame satu pada layer
Action, disana sekarang ada tanda seperti huruf “a”, itu menandakan

berarti disana ada script didalamnya.

44. Selanjutnya download eBook dan File Materi nya disini

Sumber : http://www.belajarmultimedia.com/?p=290