PERANCANGAN SISTEM
3.3 Pembuatan Aplikasi untuk Masing-Masing Bahan Pelajaran
Berikut adalah langkah-langkah pembuatan dari aplikasi pembelajaran bahasa Inggris menggunakan Macromedia Flash Professional 8 :
1. Pembuatan dokumen flash baru
a. Buka program Macromedia Flash 8.0 b. Pilih flash document pada bagian create new
c. Pada panel properties atur warna background menjadi warna putih ( #fff ) dan ukuran 800 pixel X 600 pixel.
a. Tambahkan 4 layer baru sehingga di scene terdapat 5 layer.
b. Ganti nama masing-masing layer (dari atas ke bawah) yaitu action, kursor, tgl, menu dan lesson.
3. Memasukkan gambar dan suara ke dalam library.
a. Pilih menu File >> Import >> ImporttoLibrary…
b. Kemudian pilih dan seleksi gambar dan suara yang akan digunakan dalam aplikasi.
c. Buka library dengan menekan tombol ctrl+L.
d. Kemudian pilih simbol yang sudah ada di library untuk diletakkan ke scene
utama.
4. Pembuatan halaman selamat datang.Pilih Insert >> NewSymbol.
a. Pilih TypeMovieClipdengan nama „mv_opening‟.
b. Aktifkan keyframe pada frame 1 Layer 1. Kemudian InsertFrame di frame 35. Buat background pada layer 1 dengan Rectangle Tool berukuran 800x600. Kemudian Import gambar animasi owl.jpg ke stage (layer 1).
c. Kemudian tambahkan layer baru dengan nama layer 2. Insert Keyframe di
frame 35 dan buat kalimat “Fun Learning in English” dengan menggunakan Text Tool.
d. Kemudian copyText tersebut ke frame 1. Klik kanan pada Keyframe di frame
1, lalu pilih Createmotiontween.
e. Aktifkan keyframe di frame 35 layer 2, tekan F9. Lalu ketikkan ActionScript
untuk memberhentikan movie agar tidak terjadi perulangan saat dijalankan. Stop();
g. Kemudian drag„mv_opening‟ dari Library ke scene 1 pada layerlesson, frame
1.
5. Pembuatan halaman belajar abjad
a. Pilih Insert >> New Symbol. Pilih Type Movie Clip dan beri nama
„mv_abjad‟.
b. Ganti nama layer 1 dengan background. Kemudian gambar background
dengan menggunakan Rectangle Tool berukuran 800x600. Kemudian Insert Frame di frame 780.
c. Aktifkan keyframe di frame 780. Tekan tombol F9. Lalu ketikkan ActionScript
seperti berikut : stop();
d. Import file suara untuk pengejaan abjad. Dengan cara pilih File >> Import >>
ImporttoLibrary. Kemudian pilih file ABC song.mp3. Lalu OK.
e. Cari file suara tersebut di dalam Panel Library. Kemudian klik kanan, pilih
Linkage.
f. Aktifkan Export for ActionScript dan Export at first frame. Ketikkan
„snd_alphabet‟ pada identifier. Klik OK.
g. Tambahkan layer baru, lalu ganti nama layerdengan „song‟. Insert keyframe di
frame 29. Tekan tombol F9, lau ketikkan ActionScript seperti berikut ini : MySound = new Sound;
MySound.attachSound(“snd_alphabeth”); MySound.stop();
MySound.start();
g. Tambahkan layer baru, ganti nama layer dengan „A‟. Letakkan keyframe di
frame 137 (sesuai dengan suara abjad yang keluar). Gunakan Text Tool untuk menuliskan abjad. Lakukan hal tersebut sampai dengan Z.
h. Kembali ke scene 1. Aktifkan keyframe 2 pada layer lesson. Kemudian drag
mv_abjad dari Library menuju ke frame 2 tersebut.
6. Pembuatan halaman belajar angka
a. Pilih Insert >> New Symbol. Pilih Movie Clip pada Type. Kemudian beri nama movie_number.
b. Plih layer 1 lalu ganti nama layer dengan background. Aktifkan frame 1 sampai 1193. Lalu gambarkan background dengan Rectangle Tool dengan ukuran 800x600.
c. Aktifkan keyframe di frame 1193. Tekan tombol F9, lalu ketikkan ActionScript
sebagai berikut : stop();
d. Import file suara untuk menghitung angka. Dengan cara pilih File >> Import >> Import to Library. Kemudian pilih file„spell_number.mp3‟. Lalu OK.
e. Cari file suara tersebut di dalam Panel Library. Kemudian klik kanan, pilih
Linkage.
f. Aktifkan Export for ActionScript dan Export at first frame. Ketikkan snd_number pada identifier. Klik OK.
g. Tambahkan layer baru, lalu ganti nama layerdengan „song‟. Insert keyframe di
frame 28. Tekan tombol F9, lau ketikkan ActionScript seperti berikut ini : MySound = new Sound;
MySound.attachSound(“snd_number”); MySound.stop();
h. Tambahkan layer baru, ganti nama layerdengan „count‟.
i. Letakkan keyframe di frame sesuai dengan suara angka yang keluar. Gunakan
Text Tool untuk menuliskan angka tersebut. Lakukan hal tersebut sampai dengan angka 20.
j. Kembali ke scene 1. Aktifkan keyframe 3 pada layer lesson. Kemudian drag movie_number dari Library menuju ke frame 3 tersebut.
7. Pembuatan halaman belajar buah
a. Pilih Insert >> New Symbol. Pilih Movie Clip pada Type. Kemudian beri nama movie_fruit.
b. Pilih layer 1 lalu ganti nama layer dengan background. Aktifkan frame 1 sampai 30. Lalu gambarkan background dengan Rectangle Tool dengan ukuran 800x600.
c. Aktifkan keyframe di frame 30. Tekan tombol F9, lalu ketikkan ActionScript
sebagai berikut : stop();
d. Buat masing-masing buah sebagai tombol. Pilih Insert >> New Symbol.
Ketikkan btn_apple pada kotak name. dan pilih Button pada Type.
e. Aktifkan keyframe Up. Gambarkan buah apel pada frame Up. Kemudian Insert Frame hingga frameHit. Buat efek pada masing-masing frame.
f. Import file suara untuk menyebutkan buah tersebut. Dengan cara pilih File >> Import >> Import to Library.
g. Kemudian letakkan suara tersebut ke frame Down pada tombol. Agar suara tersebut keluar saat tombol ditekan.
h. Kembali ke scene 1. Aktifkan keyframe 4 pada layer lesson. Kemudian drag movie_fruit dari Library menuju ke frame 4 tersebut.
8. Pembuatan halaman belajar angka
a. Pilih Insert >> New Symbol. Pilih Movie Clip pada Type. Kemudian beri nama movie_animal.
b. Pilih layer 1 lalu ganti nama layer dengan background. Aktifkan frame 1 sampai 1163. Gambarkan background dengan Rectangle Tool dengan ukuran 800x600.
c. Aktifkan keyframe di frame 1163. Lalu ketikkan ActionScript sebagai berikut : stop();
d. Import file suara untuk menyebutkan nama hewan. Dengan cara pilih File >> Import >> Import to Library. Kemudian pilih fileanimal.mp3. Lalu OK.
e. Cari file suara tersebut di dalam Panel Library. Kemudian klik kanan, pilih
f. Aktifkan Export for ActionScript dan Export at first frame. Ketikkan
„snd_animals‟ pada identifier. Klik OK.
g. Tambahkan layer baru, lalu ganti nama layer dengan „song‟. Insert keyframe
di frame 6. Tekan tombol F9, lau ketikkan ActionScript seperti berikut ini : MySound = new Sound;
MySound.attachSound(“snd_animals”); MySound.stop();
MySound.start();
h. Tambahkan layer baru, ganti nama layerdengan „animal‟.
i. Letakkan keyframe di frame sesuai dengan suara yang keluar. Gunakan Text Tool untuk menuliskan nama hewan tersebut tersebut. Lakukan hal tersebut sampai dengan pengucapan selesai.
j. Kembali ke scene 1. Aktifkan keyframe 5 pada layer lesson. Kemudian drag movie_animal dari Library menuju ke frame 5 tersebut.
9. Pembuatan halaman belajar benda
a. Pilih Insert >> New Symbol. Pilih Movie Clip pada Type. Kemudian beri nama movie_things.
b. Pilih layer 1 lalu ganti nama layer dengan background. Aktifkan frame 1 sampai 1012. Lalu gambarkan background dengan Rectangle Tool dengan ukuran 800x600.
c. Aktifkan keyframe di frame 1012. Tekan tombol F9, lalu ketikkan ActionScript sebagai berikut :
stop();
d. Import file suara untuk menyebutkan benda. Dengan cara pilih File >> Import >> Import to Library. Kemudian pilih file snd_things.mp3. Lalu OK.
e. Cari file suara tersebut di dalam Panel Library. Kemudian klik kanan, pilih
Linkage.
f. Aktifkan Export for ActionScript dan Export at first frame. Ketikkan snd_things pada identifier. Klik OK.
g. Tambahkan layer baru, lalu ganti nama layerdengan „song‟. Insert keyframe di
frame 1. Tekan tombol F9, lau ketikkan ActionScript seperti berikut ini : MySound = new Sound;
MySound.attachSound(“snd_things”);
MySound.stop(); MySound.start();
i. Letakkan keyframe di frame sesuai dengan suara pengucapan yang keluar. Gunakan Text Tool untuk menuliskan nama benda tersebut. Lakukan hal tersebut sampai dengan pengucapan selesai.
j. Kembali ke scene 1. Aktifkan keyframe 6 pada layer lesson. Kemudian drag movie_things dari Library menuju ke frame 6 tersebut.
10. Pembuatan halaman belajar bagian tubuh
a. Pilih Insert >> New Symbol. Pilih Movie Clip pada Type. Kemudian beri nama movie_body.
b. Pilih layer 1 lalu ganti nama layer dengan background. Aktifkan frame 1 sampai 30. Lalu gambarkan background dengan Rectangle Tool dengan ukuran 800x600.
c. Aktifkan keyframe di frame 30. Tekan tombol F9, lalu ketikkan ActionScript sebagai berikut :
stop();
d. Buat tombol baru untuk bagian tubuh kepala, badan dan kaki. Dengan cara
Insert >> New Symbol. Pilih Type Button dengan nama btn_head. Aktifkan
frameUp, kemudian masukkan gambar kepala. Lakukan sampai bagian kaki.
e. Kembali ke scene 1. Aktifkan keyframe 7 pada layer lesson. Kemudian drag movie_body dari Library menuju ke frame 7 tersebut.
f. Letakkan tombol btn_head, btn_body, btn_leg pada layerlessonframe 7.
g. Select btn_head, kemudian tekan F9. Ketikkan ActionScript seperti berikut : on(release){
gotoAndStop(8); }
11. Pembuatan halaman belajar bagian tubuh kepala
a. Pilih Insert >> New Symbol. Pilih Movie Clip pada Type. Kemudian beri nama movie_bodyhead.
b. Pilih layer 1 lalu ganti nama layer dengan background. Aktifkan frame 1. Lalu gambarkan background dengan RectangleTool dengan ukuran 800x600.
c. Aktifkan keyframe di frame 1. Tekan tombol F9, lalu ketikkan ActionScript sebagai berikut :
stop();
d. Buat masing-masing bagian tubuh sebagai movie clip. Pilih Insert >> New Symbol. Ketikkan movie_forehead pada kotak name. dan pilih Movie Clip pada Type.
e. Masukkan btn_part di layer 1 frame 1. Kemudian InsertKeyframe di frame 2. Gunakan TextTool untuk menuliskan forehead.
f. Masukkan layer baru. Aktifkan frame 1, kemudian tekan tombol F9. Lalu ketikkan ActionScript seperti berikut :
stop();
g. Import file suara untuk menyebutkan bagian tubuh tersebut. Dengan cara pilih
File >> Import >> Import to Library.
h. Kemudian letakkan suara tersebut ke frame 2 pada layer 1. Agar suara tersebut keluar saat tombol ditekan.
i. Kembali ke movie_bodyhead. Aktifkan keyframe 1 pada layer 2. Kemudian
drag movie_forehead dari Library menuju ke frame 2 tersebut. Letakkan sesuai dengan namanya.
j. Lakukan butir i sampai dengan bagian tubuh yang terakhir.
k. Kembali scene 1. Aktifkan keyframe 8. Letakkan movie_bodyhead di layer lessonframe 8.
12. Pembuatan halaman about
a. Pilih Insert >> New Symbol. Pilih Movie Clip pada Type. Kemudian beri nama movie_about.
b. Pilih layer 1 lalu ganti nama layer dengan background. Aktifkan frame 1 sampai 25. Lalu gambarkan background dengan Rectangle Tool dengan ukuran 800x600.
c. Aktifkan keyframe di frame 25. Tekan tombol F9, lalu ketikkan ActionScript sebagai berikut :
stop();
d. Import file musik untuk melengkapi halaman about. Dengan cara pilih File >> Import >> Import to Library. Kemudian pilih file about.mp3. Lalu OK.
e. Cari file suara tersebut di dalam Panel Library. Kemudian klik kanan, pilih
Linkage.
f. Aktifkan Export for ActionScript dan Export at first frame. Ketikkan snd_things pada identifier. Klik OK.
g. Tambahkan layer baru, lalu ganti nama layerdengan „song‟. Insert keyframe di
frame 1. Tekan tombol F9, lau ketikkan ActionScript seperti berikut ini : MySound = new Sound;
MySound.attachSound(“snd_about”); MySound.stop();
h. Tambahkan layer baru. Gunakan Text Tool untuk menuliskan kalimat. Kenudian klik kanan pada keyframe 1 layer 2. Create Motion Tween.
i. Tambahkan layer baru. Masukkan gambar ke dalam stage. Kemudian klik kanan pada keyframe 1 layer . Create Motion Tween.
j. Kembali ke scene 1. Aktifkan keyframe 11 pada layer lesson. Kemudian drag movie_things dari Library menuju ke frame 11 tersebut.
13. Pembuatan halaman kuis
a. Pilih Insert >> New Symbol. Pilih Movie Clip pada Type. Kemudian ketikkan
movie_quiz pada kotak nama.
b. Aktifkan frame 1 sampai 30 di layer background. Buat background dengan menggunakan Rectangle Tool dengan ukuran 800x600. Aktifkan keyframe 1. Kemudian tekan tombol F9. Ketikkan script berikut :
stop();
c. Tambahkan layerbaru dengan nama „pertanyaan‟.
d. Aktifkan keyframe 1 pada layer pertanyaan. Buat kotak nama dengan Input Text (aktifkan show border around text). Pada Var, ketik „input‟.
e. Klik kanan frame 2 layer pertanyaan, pilih Insert Keyframe. Buat soal beserta pilihan jawaban.
f. Klik frame 2 layer pertanyaan, kemudian tekan F6 pada keyboard untuk
meng-copyframe sampai dengan frame 6. Klik frame 3, ganti soal dan jawabannya. Demikian seterusnya sampai dengan soal nomor 5.
g. Klik frame 1 layer pertanyaan. Buat tombol untuk memulai kuis. Lalu ketikkan ActionScript sebagai berikut :
On(release){
gotoAndStop(2); }
h. Kemudian buat button jawaban dengan cara pilih Insert >> New Symbol. Pilih Typebutton dengan nama btn_jawab.
i. Setelah selesai, tambahkan layer baru dengan nama „jawab‟. Lalu letakkan button jawab di setiap pertanyaan dari frame 2 sampai frame 6 layer „jawab‟.
Tuliskan pilihan jawaban yang sesuai.
j. Seleksi button, kemudian ketikkan „answer_a‟ pada kotak Instance name pada kotak Properties. Lakukan hal yang sama untuk button b,c dan d.
k. Buat layer baru dengan nama action. Klik frame 1. Kemudian tekan F7 sebanyak 6 kali. Kembali ke frame 2. Tekan tombol F9 untuk menampilkan
Panel Action. Kemudian ketikkan ActionScript seperti berikut : stop();
onEnterFrame = function() { skor = +nilai; }; answer_a.onRelease = function() { nextFrame(); }; answer_b.onRelease = function() { nextFrame(); }; answer_c.onRelease = function() { nilai+=20; nextFrame(); }; answer_d.onRelease = function() { nextFrame(); };
l. Ketikkan ActionScript tersebut di layer action semua kuis. Letakkan nilai sesuai dengan jawaban yang benar.
m. Kemudian ketikan ActionScript berikut dalam keyframe 7 layer action untuk menghitung nilai yang didapat.
Stop(); onEnterFrame = function () { if(skor >= 60) { gotoAndStop(8); } If(skor <60) { gotoAndStop(9); } };
n. Selanjutnya, tambahkan layer baru dengan nama hasil. Masukkan keyframe di
o. Masukkan Dynamic Text untuk nilai, kemudian ketikkan ‟skor‟ pada Var.
p. Pilih layer Action, frame 8. Ketikkan ActionScript sebagai berikut : onEnterFrame = function () {
nama = +input; skor = +nilai; }
q. Kemudian buat desain yang sama unutk menampilkan nilai jelek. Masukkan
keyframe di frame 9. Masukkan Dynamic Text, kemudian ketikkan „nama‟ ada Var.
r. Masukkan Dynamic Text untuk nilai, kemudian ketikkan ‟skor‟ pada Var.
s. Pilih layerAction, frame 9. Ketikkan ActionScript sebagai berikut : onEnterFrame = function () {
nama = +input; skor = +nilai; }
BAB 4