BAB 3
PERANCANGAN SISTEM
3.1 Penentuan Aplikasi yang Akan Dibuat
Penentuan aplikasi yang akan dibuat bertujuan untuk membantu penulis dalam membuat aplikasi pembelajaran. Penulis menentukan bahan pembelajaran bagi anak-
anak usia dini yang sebaiknya pelajaran tersebut sudah mulai diperkenalkan karena pada saat usia dini daya tangkap anak mulai berkembang dan kuat. Materi
pembelajaran yang dimasukkan ke dalam aplikasi ini adalah intro, pengenalan huruf hijaiyah, dan teori saja karena waktu pembuatan sangat singkat.
Universitas Sumatera Utara
3.2 Perancangan Desain untuk Masing-Masing Bahan Pelajaran
Perancangan desain masing-masing bahan pelajaran yang akan dimasukkan ke dalam aplikasi ini bertujuan untuk membuat gambaran awal isi dari aplikasi yang akan
dibuat. Perancangan desain dilakukan dengan membuat frame untuk masing-masing pelajaran yang dimasukkan ke dalam aplikasi.
3.2.1 Rancangan Halaman Selamat Datang
Halaman selamat datang adalah halaman pembuka dari aplikasi. Halaman ini berupa kumpulan dari movie clip yang diletakkan satu frame. Terdiri dari sebuah gambar
animasi, sebuah teks pembuka, dan tombol menu. Rancangan desain halaman tersebut adalah sebagai berikut :
Universitas Sumatera Utara
Gambar 3.1 Rancangan Halaman Selamat Datang
3.2.2 Rancangan Halaman Intro
Halaman intro merupakan halaman yang berisikan animasi pelajaran tentang alfabet. Frame
ini merupakan kumpulan movie yang diletakkan ke dalam frame 15 di scene 1 yang berisikan alfabet huruf hijaiyah dan cara pembacaan dalam bahasa Arab. Berikut
merupakan rancangan untuk tampilan halaman pengenalan huruf :
Universitas Sumatera Utara
3.2.3 Ranc
Halaman pe tombol hur
movie yang
huruf hijai Berikut me
cangan Hala
engenalan h ruf hijaiyah
g diletakkan yah menur
rupakan ran
Gambar 3
aman Huru
huruf hijaiy h mulai dar
n ke dalam f rut urutan h
ncangan unt
.2 Rancang
uf Hijaiyah
yah ini meru ri alif samp
frame 20 di
huruf hijaiy tuk tampilan
gan Halam
upakan hala pai ya’. Fr
i scene 1 ya yah dan tu
n halaman p
an Intro
aman yang b rame
ini me ang berisika
ulisannya d pengenalan
berisikan ti erupakan k
an tiga puluh dalam baha
huruf : iga puluh
kumpulan h tombol
sa Arab.
Universitas Sumatera Utara
3.2.4 Ranc
Halaman te huruf hijaiy
kumpulan m teori memb
rancangan u
Gam
cangan Hala
eori merupa yah dengan
movie judul
baca dengan untuk tampi
bar 3.3 Ra
aman Teori
akan halam n baris atas,
l yang dilet n baris atas
ilan halama
ncangan H
i
man yang be baris bawa
takkan ke d s, baris baw
an teori :
Halaman Hu
erisikan pel ah dan bari
dalam frame wah dan ba
uruf Hijaiy
lajaran tent s depan. Fr
e 25 di scen
aris depan.
yah
tang teori m rame
ini me ne
1 yang b Berikut me
membaca erupakan
berisikan erupakan
Universitas Sumatera Utara
3.2.5 Ranc
Halaman pr dibuat dan p
ini merupak halaman ab
cangan Hala
rofil adalah
pembuat ap kan movie y
bout :
Gambar 3.
aman Profil
h halaman y plikasi. Hala
yang diletak
.4 Rancang
l
yang berisik aman ini ber
kkan di fram
gan Halama
kan sedikit p risikan teks
me 30 scene
an Teori
penjelasan t s animasi da
e 1. Berikut
tentang apik an gambar. H
rancangan kasi yang
Halaman tampilan
Universitas Sumatera Utara
3.2.6 Ranc
Halaman k ingatan ana
35 scene 1 Berikut ran
angan Hala
kuis adalah ak setelah b
. Halaman ncangan tam
Gambar 3.
aman Soal
halaman y belajar. Hala
ini berisika mpilan halam
.5 Rancang
yang berisik aman ini m
an teks inpu man soal :
gan Halama
kan soal un merupakan m
ut nama da
an Profil
ntuk mengu movie
yang an tombol u
uji pemaham diletakkan
untuk memu man dan
di frame ulai soal.
Universitas Sumatera Utara
3.3 Pemb
Berikut ad huruf hijaiy
1. Pembua
a. Buk
buatan Apl
dalah langka yah menggu
atan dokum ka program
Gambar 3
ikasi untuk
ah-langkah unakan Mac
men flash bar Macromed
3.6 Rancang
k Masing-M
pembuatan cromedia Fl
ru dia Flash
8.0
gan Halam
Masing Bah
n dari aplik lash Profess
man Soal
han Pelajar
kasi pembe sional
8 :
ran.
elajaran pen ngenalan
Universitas Sumatera Utara
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. 2. Pembuatan dan pengaturan layer pada scene.
a. Tambahkan 5 layer baru sehingga di scene terdapat 6 layer.
b. Ganti nama masing-masing layer dari atas ke bawah yaitu soal, profil, teori,
pengenalan, intro dan menu.
3. Memasukkan gambar dan suara ke dalam library. a.
Pilih menu File Import Import to Library …
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 a.
Pilih Insert New Symbol.
Universitas Sumatera Utara
b. Pilih Type Movie Clip dengan nama ‘MENU’.
c. Aktifkan keyframe pada frame 1 Layer 1. Kemudian Insert Frame di frame 80.
Buat background pada layer 1 dengan Rectangle Tool berukuran 800x600.
Kemudian Import gambar animasi muslimah.jpg ke stage layer 1.
d. Pilih Type Movie Clip dengan nama ‘muslimah’
e. Aktifkan keyframe pada frame 1 Layer 1. Kemudian Insert Frame di frame 80.
Buat background pada layer 1 dengan Rectangle Tool berukuran 800x600.
Kemudian Import gambar animasi belajar.jpg ke stage layer 1..
f. Kemudian copy Text tersebut ke frame 1. Klik kanan pada Keyframe di frame
1, lalu pilih Create motion tween.
g. Aktifkan keyframe di frame 80 layer 1, tekan F9. Lalu ketikkan ActionScript
pada panel Action untuk memberhentikan movie agar tidak terjadi perulangan saat dijalankan.
Stop;
h. Kemudian drag ‘MENU’ dari Library ke scene 1 pada layer MENU ke frame
Universitas Sumatera Utara
5. Pembuatan halaman intro a.
Pilih Insert New Symbol. Pilih Type Movie Clip dan beri nama ‘INTRO’.
b. Ganti nama layer 1 dengan background. Kemudian gambar background
dengan menggunakan Rectangle Tool berukuran 800x600. Kemudian Insert
Frame di frame 818.
c. Aktifkan keyframe di frame 818. Tekan tombol F9. Lalu ketikkan ActionScript
seperti berikut : stop;
d. Buat 2 layer di movie PENGENALAN satu layer untuk ‘teks’ dan satu lagi
untuk ‘suara’. Dengan cara pilih File Import Import to Library.
Kemudian pilih file hijaiyah.mp3. Lalu OK.
e. Cari file suara tersebut di dalam Panel Library. Kemudian drag ke layer suara
di movie INTRO.
g. Tambahkan layer baru, ganti nama layer dengan ‘teks’. Letakkan keyframe di frame
122 sesuai dengan suara alfabet yang keluar. Gunakan Text Tool untuk menuliskan abjad. Lakukan hal tersebut sampai dengan ya’
Universitas Sumatera Utara
h. Kembali ke
scene 1. Aktifkan keyframe 15 pada layer INTRO Kemudian drag
INTRO dari Library menuju ke frame 15 tersebut.
6. Pembuatan halaman pengenalan a.
Pilih Insert New Symbol. Pilih Movie Clip pada Type. Kemudian beri
nama PENGENALAN.
b. Pilih layer 1 lalu ganti nama layer dengan background. Aktifkan frame 1. 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 tombol alif sampai ya’ pada kotak nama dan pilih Button pada type.
e. Aktifkan keyframe Up. Gambarkan buah apel pada frame Up. Kemudian Insert
Frame hingga frame Hit. Buat efek pada masing-masing frame.
Universitas Sumatera Utara
f. Import file
suara untuk menyebutkan huruf 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 20 pada layer PENGENALAN.
Kemudian drag PENGENALAN dari Library menuju ke frame 20 tersebut.
8. Pembuatan halaman teori a.
Aktifkan layer 1 kemudian ganti nama dengan background. Kemudian drag animasi dari Panel Library ke movie TEORI.
b. Tambahkan layer lagi kemudian ganti nama dengan Fathah.
c. Aktifkan keyframe 15 untuk membuat teori Fathah . Kemudian drag teori
Fathah atau baris atas dari Panel Library.
d. Tambahkan layer lagi kemudian ganti nama dengan Kasroh.
Universitas Sumatera Utara
e. Aktifkan keyframe 20 untuk membuat teori Fathah . Kemudian drag teori
Kasroh atau baris bawah dari Panel Library.
f. Tambahkan layer lagi kemudian ganti nama dengan Dhommah.
g. Aktifkan keyframe 25 untuk membuat teori Fathah . Kemudian drag teori
Dhommah atau baris bawah dari Panel Library.
h. Import file
musik untuk melengkapi halaman TEORI. Dengan cara pilih File Import Import to Library. Kemudian pilih file muhammadku.mp3.
Lalu OK.
i. Cari file suara tersebut di dalam Panel Library. Kemudian klik kanan, pilih
Linkage.
j. Aktifkan Export for ActionScript dan Export at first frame. Ketikkan
muhammadku.mp3 pada identifier. Klik OK.
k. Tekan tombol F9, lau ketikkan ActionScript seperti berikut ini :
MySound = new Sound; MySound.attachSound“muhammadku.mp3”;
Universitas Sumatera Utara
MySound.stop; MySound.start;
l. Kembali ke scene 1. Aktifkan keyframe 25 pada layer TEORI. Kemudian drag
TEORI dari Library menuju ke frame 25 tersebut
9. Pembuatan halaman profil a.
Pilih Insert New Symbol. Pilih Movie Clip pada Type. Kemudian beri
nama PROFIL.
b. Pilih layer 1 lalu ganti nama layer dengan background. 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. Kembali ke scene 1. Aktifkan keyframe 30 pada layer TEORI. Kemudian drag
TEORI dari Library menuju ke frame 30 tersebut
Universitas Sumatera Utara
13. Pembuatan halaman soal a.
Pilih Insert New Symbol. Pilih Movie Clip pada Type. Kemudian ketikkan
SOAL 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 layer baru 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-
copy frame sampai dengan frame 6. Klik frame 3, ganti soal dan jawabannya. Demikian seterusnya sampai dengan soal nomor 5.
Universitas Sumatera Utara
g. Klik frame 1 layer pertanyaan. Buat tombol untuk memulai kuis. Lalu
ketikkan ActionScript sebagai berikut : Onrelease{
gotoAndStop2; }
h. Kemudian buat button jawaban dengan cara pilih Insert New Symbol.
Pilih type button 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 seperrti berikut : stop;
nilai=0;
Universitas Sumatera Utara
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; };
Universitas Sumatera Utara
l. Ketikkan ActionScript tersebut di layer action semua soal. 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 { ifskor = 60 {
gotoAndStop10; }
Ifskor 60 { gotoAndStop11;
} };
n. Selanjutnya, tambahkan layer baru dengan nama hasil. Masukkan keyframe di
frame 8. Masukkan Dynamic Text, kemudian ketikkan ‘nama’ ada Var.
o. Masukkan Dynamic Text untuk nilai, kemudian ketikkan ’skor’ pada Var.
Universitas Sumatera Utara
p. Pilih layer Action, frame 8. Ketikkan ActionScript sebagai berikut :
onEnterFrame = function { nama = +nama;
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 layer Action, frame 9. Ketikkan ActionScript sebagai berikut :
onEnterFrame = function { nama = +nama;
skor = +nilai; }
Universitas Sumatera Utara
Animasi ini dapat dijalankan dengan menggunakan Flash Player. Namun selain itu animasi ini juga dapat dijalankan dengan menggunakan browser. Hasilnya akan lebih
halus bila dijalankan dengan browser. Jika pun pada awalnya kita menggunakan aplikasi flash player untuk menjalankan animasi tersebut, ketika mengklik link yang
tersedia, halaman yang dipanggil akan ditampilkan secara otomatis ke browser. Macromedia Flash 8 Professional
ini dapat digunakan pada komputer yang telah memenuhi spesifikasi tertentu. Spesifikasi tersebut adalah:
1. Prosesor a. Microsoft Windows: Intel Pentium 3 atau 4
b. Macintosh: Power PC G3, G4, atau G5 2. RAM
a. Microsoft Windows: 192 disarankan minimal 256 MB b. Macintosh: 192 disarankan minimal 256 MB
3. Sistem operasi a. Microsoft Windows: Windows 2000 atau windows XP
b. Macintosh: Mac Os X 10.2.4, 10.2.5, 10.2.6, 10.2.7. 4. Hardisk Kosong
a. Microsoft Windows: 146 MB
Universitas Sumatera Utara
b. Macintosh: 146 MB 5. Kartu VGA
a. Microsoft Windows: 1024 x 768 b. Macintosh: 1024 x 768
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Hasil Aplikasi
Kategori