Tutorial Cara Membuat Media Pembelajaran

di Flash 
1. Buka Aplikasi Adobe Flash (saya menggunakan Flash CS6). Pilih Actionscript 2.0

2. Pada bagian Properties, ubah ukuran area kerja(kotak warna putih yang biasanya
terletak di tengah) di "Size" menjadi 800 x 600 (satuan yang digunakan pixels). 

3. Pada bagian "Timeline", ubah nama layer dengan cara double klik kemudian isikan
nama "BG" sebagai background pada Media Interaktif nantinya. 
Lalu, untuk memasukkan gambar ada 2 cara, yaitu dengan Import to Stage (Ctrl+R)
atau Import to Library. Pada Kasus kali ini, saya menggunakan Import to Library
4. Perbedaannya itu sendiri, untuk to Stage gambar akan langsung masuk di area kerja
sedangkan to Library akan otomatis tersimpan pada bagian Library lalu untuk
memasukkannya dengan menggeser/drag gambarnya ke area kerja.

5. Atur posisi dan ukuran gambar agar sesuai dengan area kerja.
6. Pada Frame ke-21 dan ke-41, klik kanan - insert keyframe. Lalu pada bagian
Properties, beri nama label "bg1" dan "bg2" maka akan ada tanda bendera warna
merah.

7. Sekarang, buat layer baru. Caranya klik ikon seperti pada gambar di bawah ini..
Kemudian, ubah namanya menjadi "KONTEN" dan pada frame ke-41, klik kanan-pilih
insert frame (atau tekan F5). Setelah itu, buatlah Teks, gambar pada Layer
Konten tersebut.

8. Buat Layer Baru dengan Nama "TOMBOL" dan Insert Frame di frame-41. Kemudian
pada Layer Tombol tersebut, buatlah kotak dengan rectangle options seperti pada
gambar..
9. Klik kanan pada kotak tersebut - pilih Convert to Symbol - isikan  dengan nama
"bab1_btn" dan pilih tipe "button" seperti pada gambar di bawah, lalu OK..

10. Tekan Klik Ganda atau Double Click pada button "bab1_btn" untuk mengedit

tombol. Maka akan muncul seperti pada gambar di bawah. Kemudian, Isikan Teks
berupa "BAB 1".
Setelah itu, klik kanan pada bagian Over dan Down - pilih insert keyframe (F6)
Keterangan ;
UP        : Kondisi Normal
OVER  : Kondisi ketika kursor diatas tombol
DOWN : Kondisi ketika tombol ditekan 
Untuk mengetahui perbedaanya, coba anda ubah warna atau bentuk dari tombol pada
bagian OVER dan DOWN. 
Seperti anda lihat, untuk kondisi normal saya menggunakan warna "putih", untuk
kondisi ketika kursor diatas tombol berwarna "Biru Tua" dan ketika di klik warnanya
berubah menjadi "abu-abu". 

Setelah Selesai Mengedit Tombol, tekan Scene 1 untuk kembali... 

11. Insert Keyframe (F6) pada Frame ke-21 dan ke-31 untuk layer tombol dan konten

12. Pada Frame ke-21. Buatlah Teks pada Layer konten dan buatlah tombol navigasi
"kembali" pada Layer tombol untuk membuat Halaman BAB1
13. Begitu pula untuk frame ke-31. Buatlah Teks pada Layer konten dan buatlah tombol
navigasi "kembali" pada Layer tombol untuk membuat Halaman BAB2. Jangan
Lupa beri masing-masing nama label "bab1" dan "bab2"..
Tekan "Ctrl + Enter" untuk melihat hasilnya. Namun hasilnya, tombol yang kalian buat
tidak berfungsi dan Halamannya Berpindah berulang-ulang. Untuk melakukannya kita
akan lanjut ke Cara Memberikan ActionScript pada Tombol di Flash

BACA JUGA : CARA MEMBUAT KALKULATOR SEDERHANA di Flash

Memberikan ActionScript pada Tombol di Adobe

Flash
Setelah anda berhasil belajar Import,Timeline,Layer,Label,Button dan Teks pada tutorial
sebelumnya. Kali ini kita akan menuju langkah terakhir untuk membuat Media
Interaktif/Pembelajaran yaitu memberikan ActionSript di setiap Tombol sebagai berikut :

1. Buat Layer baru dengan nama "AS" dan pada Frame ke-1, klik kanan - pilih actions -
lalu ketikkan command/perintah berikut :

stop();
fscommand("fullscreen", "true");
Keterangan :
a) perintah stop(); digunakan agar waktu dijalankan, animasi tidak berulang-
ulang/berpindah halaman. Untuk melihat perbedaanya. Silahkan tekan Ctrl + Enter
b) perintah fscommand("fullscreen","true"); digunakan ketika Media Interaktif ini
di Publish menjadi file exe maka akan otomatis menjalakan secara layar penuh.

2. Untuk tombol BAB 1, klik kanan - pilih actions - ketikkan perintah berikut ini..

on (release) {
    gotoAndStop("bab1");
}

Untuk tombol BAB 2, cukup anda ubah menjadi : 

on (release) {
    gotoAndStop("bab2");
}
atau langsung menggunakan lokasi frame berada seperti ini :
on (release) {
    gotoAndStop(31);
}

3. Langkah akhir, klik File - Publish Settings (Ctrl + Shift + F12)- conteng pada bagian
.swf, .html, dan .exe dan Atur Lokasi penyimpanan dengan klik tombol Folder warna
Kuning. Setelah itu, Klik Tombol PUBLISH...

4. Hasil Publish sebagai berikut. Coba Anda jalankan MediaInteraktif.exe maka akan
otomatis Layar Penuh (Fullscreen) seperti yang saya katakan sebelumnya. 

Sekian Tutorial Cara Membuat Media Pembelajaran atau Media Interaktif di Adobe
Flash untuk Pemula. 😁
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