Latihan 1

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
digunakan 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.
 Latihan 2:

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. Klik kanan di frame 5 pada layer background, kemudian pilih insert frame atau tekan F5
pada keyboard.

45. Maka kemudian terlihat dari frame 1 sampai frame 5 sudah terisi penuh background.jpg

46. Lakukan juga hal yang sama klik kanan di frame lima untuk layer Header dan Footer,
tapi jangan untuk layer Button. Lalu pilih Insert Frame.
 47. Lakukan juga hal yang sama klik kanan di frame 5 untuk layer action. Lalu pilih insert frame.

48. Klik kiri pada layer button, kemudian tambah layer baru dengan nama content. Posisi layer
content tepat berada di atas layer button dan dibawah layer action.

49. Klik kanan di frame dua pada layer content, kemudian insert blank keyframe.

50. Lakukan juga hal yang sama pada frame tiga, empat dan lima pada layer Content. Pilih
Insert Blank Keyframe.

51. Klik di frame dua pada layer Content.

52. Kemudian pada stage buatlah halaman petunjuk Gunakan text tool untuk mengisi teks
pada halaman tersebut. Import gambar untuk menambahkan file gambar didalamnya.
Pada halaman ini hanya menambahkan teks dan gambar. Caranya, klik Text Tool pada
panel tool kemudian tuliskan apapun yang ingin anda tulis atau informasikan di
halaman petunjuk. Mulailah dengan memberi judul halaman.

53. Import gambar kedalam library dengan mengklik File / Import / Import to Library.
Pilihlah gambar ButtonlMG.jpg yang sudah disediakan.

54. Buka panel Library, kemudian klik and drag ButtonlMG.jpg yang ada disana kedalam
stage atur posisi sesuai keinginan.
55. Tambahkan teks sesuai judul untuk mempertegas halaman.

56. Gunakan Line Tool Isl untuk membuat garis. Atau tekan N pada keyboard untuk
menggunakan Line Tool. Pada panel Fill and Stroke isilah nilai Stroke 3 dan warna merah
marun. Klik kiri pada mouse untuk mulai membuat garis.

57. Buatlah garis memanjang untuk membuat petunjuk gambar ButtonlMG.jpg dan diujung garis
tersebut isikanlah teks keterangan dari halaman yang dimaksud. Dimulai dari tombol
petunjuk, buatlah garis ke bawah lalu berbelok kekiri, kemudian beri informasi
mengenail halaman petunjuk.

58. Lakukan juga untuk gambar tombol Iainnya. Buatlah garis-garis memanjang untuk
membuat petunjuk pada gambar ButtonIMG.jpg
59. Klik di frame tiga pada layer Content. Untuk mengisi halaman materi. Gunakan Text
Tool untuk membuat keterangan halaman materi Yang UIScrooIBar untuk membuat
scrool pada teks yang panjang. Caranya, gunakan text Tool>kemudian pada panel
properties ubahlah Static Text menjadi Dynamic Text dan pilihan Behavior menjadi
Multiline.

60. Kemudian klik kiri pada stage agar kondisi teks bisa di edit.
61. Kemudian tariklah sisi kiri dan kanan maupun atas bawah dari sisi komponen tersebut.

62. Lalu copy isi teks Pengertian Media Pembelajaran.docx yang sudah disediakan
kemudian paste-kan kedalam media teks yang sudah dibuat tadi.

63. Biarkan saja teks nya memanjang ke bawah. Gunakan UIscrollbar untuk membuat teks
agar bisa dibaca secara keseluruhan. Caranya buka panel komponen dengan klik
window/component atau tekan ctrl+F7 pada keyboard.
64. Setelah terbuka jendela Components, pilihlah UIScroolBar lalu drag kedalam stage dan
sentuhkan dengan teks materi tadi.

65. Bila benar maka UIScrooIBar tadi menjadi satu dengan teks

66. Aturlah teks dan UIScrooIBar tadi menjadi lebih rapi dengan menarik keatas ujung
bawah dari teks dan UIScrooIBar.
67. Atur sampai tampak seperti gambar berikut.
68. Klik kiri di frame empat pada layer Content. Gunakan Text Tool untuk membuat teks pada
halaman Latihan. Ketikkan sebuah pertanyaan tentang materi pada halaman sebelumnya
beserta jawabannya dalam bentuk pilihan ganda. Gunakan Text Tool dengan tipe teks
Static Text.

69. Kemudian ketikkan pertanyaan pada stage

70. Kemudian tambahkan jawaban.

71. Kemudian buat sebuah lingkaran menggunakan Oval Tool atau tekan O untuk
mengaktifkan Oval Tools.

Rectangle Tool (R)

Oval Tool (O)
Rectangle Primitive Tool (R)
Oval Primitive Tool (O)
O PolyStar Too'

72. Buatlah lingkaran disamping dari pilihan jawaban yang sudah di ketikkan tadi.

73. Seleksilah pilihan jawaban inggris beserta lingkarannya. Kemudian tekan F8 untuk
merubahnya menjadi symbol. Tulisan nama symbol-nya terserah anda tapi Type-nya harus
button.
74. Lakukan juga untuk tiga sisa pilihan jawaban lainnya.

75. Ketikkan lagi sebuah teks baru menggunakan Text Tool "Salah" dan gunakan warna
merah kemudian letakan di samping kanan dari teks pertanyaan.
76. Seleksi pada teks “salah” kemudian rubah menjadi symbol. Pilihan nama terserah namun type
harus movie clip.

77. Klik dua kali pada symbol movie clip yang baru di buat tadi. Klik kanan di frame dua
pada layer satu, kemudian pilih insert keyframe. Lakukan juga pada frame 3 nya.

78. Pada frame 3 teks salah diganti jadi benar dan beri warna hijau
79. Klik kiri pada frame 1 kemudian tekan delete pada keyboard untuk menghapus keyframe

80. Tambahkan layer baru diatas layer I, kemudian tekan F9 pada keyboard untuk
menampilkan jendela Actions.

81. Dijendela Actions tuliskan coding berikut :

stop ( ) ;

82. Close jendela action tadi, kemudian kembali ke scene 1 dengan mengklik icon scene.

83. Kemudian seleksi symbol yang baru dibuat tadi

84. Pada panels properties isikan Instance Name nya cek_jawab

85. Masih diframe yang sama, seleksi jawaban inggris, kemudian tekan F9 untuk membuka
jendela actions. Kemudian ketikkan di dalamnya coding :
on (release){
cek_jawab.gotoAndStop(2);
}

86. Seleksi jawaban italia, kemudian tekan F9 untuk membuka jendela actions. Kemudian ketikkan
di dalam codingnya :
on release(){
cek_jawab.gotoAndStop(2);
}
87. Seleksi jawaban Latin, kemudian tekan F9 untuk membuka jendela actions. Kemudian ketikkan
di dalam codingnya :
on release(){
cek_jawab.gotoAndStop(3);
 }

88. Seleksi jawaban Jawa, kemudian tekan F9 untuk membuka jendela Actions. Kemudian
ketikkan didalamnya coding :
on (release) { cek_jawab . gotoAndStop (2 ) ;

89. Tambahkan pertanyaan-pertanyaan lain beserta pilihan jawabannya sesuai kebutuhan.

90. Klik kiri di frame lima pada layer Content. Isilah disana informasi profile atau informasi
apapun yang ingin anda tampilkan. Gunakan Text Tool untuk menuliskan pada stage.

91. Buka kunci / unclock layer button. Seleksi tombol petunjuk kemudian tekan F9 pada
keyboard untuk membuka Jendela Actions. Kemudian ketikkan coding berikut
didalamnya.
on release{
_root gotoAndStop(2);
}
92. Seleksi tombol materi kemudian tekan F9 pada keyboard untuk membuka jendela actions.
Kemudian ketikkan coding berikut di dalamnya.
on release{
_root gotoAndStop(3);
}
93. Seleksi tombol latihan kemudian tekan F9 pada keyboard untuk membuka jendela
Actions. Kemudian ketikkan coding þerikut didalamnya.
on release{
_root gotoAndStop(4);
}
94. Seleksi tombol profile kemudian tekan F9 pada keyboard untuk membuka jendela
Actions. Kemudian ketikka coding þerikut didalamnya.
 on release{
_root gotoAndStop(5);
}
95. Kemudian kita buat sebuah tombol baru di frame dua pada layer Button. Caranya adalah
dengan klik kiri sekali pada frame dua sehingga tampil warna biru di dalam frame.

96. Kemudian tekan F7 pada keyboard untuk membuat sebuah blank keyframe.

97. Pada blank keyframe yang kita buat tadi masukkan sebuah tombol yang akan kita buat sebagai
tombol kembali. Disini kita manfaatkan sebuah tombol yang sudah siapkan oleh adobe flash CS6.
Caranya dengan meng Klik window pada panel menu, kemudian pilih common libraries. Pilih
menu button yang ada disana.

98. Maka secara default keluar sebuah jendela button kepunyaan Adobe Flash CS6.
Selanjutnya kita bisa memilih tombol yang ada disana, namun perlu diperhatikan bahwa
hanya symbol yang bertype button yang bisa dijadikan tombol. Perbedaannya bisa dilihat
pada gambar icon yang ada.

99. Pilihlah salah satu tombol yang ada disana. Dalam kasus ini yang digunakan Push Buttons
pada folder classic buttons.
100.Klik kiri dan tahan pada tombol yang kita pilih kemudian drag ke dalam stag. Aturlah posisi dimana
tombol itu berada, karena ini adalah sebuah tombol kembali maka sebaiknya letaknya dikanan
bawah.

101.Boleh ditambahkan teks "kembali" atau "back" untuk memperjelas fungsi dari tombol
tersebut.

102.Untuk mengaktifkan fungsi tombol maka kita perlu menambahkan coding didalam
tombol tersebut. Klik kiri sekali pada tombol "kembali" yang baru kita buat tadi, kemudian
tekan F9 pada keyboard untuk membuka jendela actions. atau klik kanan pada mouse
lalu pilih Actions untuk membuka jendela Actions. Isikan script seperti yang ada dibawah.
on (release){
_root gotoAndStop(1);
}
103.Tutup jendela Actions kemudian masih pada layer Button, klik kanan pada frame 5
kemudian pada jendela pilihan yang ada pilihlah Insert Frame.

104.Maka sekarang tombol “back” yang kita buat sebelumnya sudah ada disemua frame
(kecuali frame 1, karena disana akan kita masukkan juga button yang sama namun beda
fungsi. Fungsi tombol pada frame ini adalah untuk keluar/quit)

105.Seleksilah tombol " back " beserta teks-nya, kemudian klik kanan lalu pilih Copy untuk
meng-copy tombol " back " beserta teks-nya.

106.Kemudian kembali ke frame satu, dan pastikan layer Button dalam kedaan terpilih dan
tidak terkunci.
107.Kemudian didalam stage klik kanan pada mouse kemudian pilih Paste in Place. Untuk
menempatkan tombol sama persis ditempat dimana dia di copy sebelumnya.

108.Setelah dipaste-kan ke dalam stage, tombol yang baru tadi diganti nama teks nya menjadi keluar
atau quit.

109.Sekarang kita harus meng-edit script tombol yang baru kita paste tadi, karena di dalam
tombolnya sudah ada script namun fungsinya bukanlah untuk keluar tapi untuk kembali
kehalaman satu. Caranya klik kiri pada tombol "quit" kemudian tekan F9 pada keyboard
untuk membuka jendela Actions. Kemudian hapuslah ser-nua script yang sudah ada
sebelumnya dan ganti dengan script seperti berikut:
on (release) { fscommand ("quit") ;

110.Kuncilah layer Button seperti layer lainnya. Kemudian klik kanan pada frame satu pada
layer Action, lalu pilih Actions untuk menambahkan coding diframe tersebut. Tulislah
script berikut tepat dibawah script stop ( ) ; yang pernah di tuliskan sebelumnya.
Fscommand (fullscreen;true);
111.Kemudian save lah hasil pekerjaan sebelum mempublish. Caranya klik file pada menu panel.
Kemudian pilih save unuk menyimpan hasil pekerjaan.

112.Langkah terakhir setelah anda menyimpan hasil pekerjaan anda didalam komputer
adalah klik File pada menu panel lalu pilih Publish Settings.

113.Pada jendela Publish Settings yang terbuka, biarkan Flash (.swf) tetap tercentang,
kemudian centanglah Win Projector untuk membuat šebuah project *.exe-nya yang
mana fungsinya adalah agar media interaktif yang anda buat tetap bisa dijalankan
dikomputer manapun. Anda bebas untuk tetap membiarkan HTML Wrapper nya tetap
tercentang atau tidak dicentang. Kalau HTML Wrapper-nya tercentang maka sebuah file
HTML akan di buat secara otomatis didalam file anda menyimpan pekerjaan ini.
114.Kemudian klik Publish, dan biarkan dia bekerja sampai selesai. Kemudian klik OK.
115.Selesailah pekerjaan , jangan .lupa dijalankan untuk melihat hasil dari pekerjaan anda
membuat sebuah media interaktif sederhana. Masuk kedalam komputer anda, cari
dimana anda menyimpan file dan hasil pekerjaan , kemudian carilah file yang ber-format
.exe kemudian klik dua kali untuk menjalankannya.