1. Tampilan yang menarik dan tidak berlebihan
2. Dukungan suara dan video yang menarik
3. Bermanfaat
4. Informatif
5. Interaktif
3.3 Rancangan Animasi
Pembuatan animasi game edukasi mengenal huruf dan kata ini menggunakan teknik yang sederhana. Teknik yang sederhana ini tentunya juga didukung oleh peranan Actionscript
yang sangat membantu dalam penyederhanaan hasil publikasi flash semaksimal mungkin sehingga didapatkan objek yang dinamis, interaktif dan tidak terjadi pemakaian ruang
publikasi secara berlebihan. Animasi ini akan menggunakan Actionscript. Actionscript akan dilampirkan pada bagian lampiran listing program.
3.3.1 Desain Halaman Awal
Halaman awal adalah tampilan animasi yang pertama kali muncul jika aplikasi dibuka untuk pertama kalinya. Halaman ini berisi judul dari game edukasi, yaitu ”Permainan
Tebak Kata” yang dianimasikan serta link-link menuju permainan dan petunjuk. Selain itu background dari halaman awal ini juga berupa animasi pemandangan padang rumput
dengan suasana cuaca cerah.
Universitas Sumatera Utara
3.3.1.1 Desain Halaman Background
a. Buka halaman baru beri judul awal.fla. Buat 6 layer secara berturut yaitu layer
background, matahari, kelinci, button dan awan. Blok frame 220 pada setiap layer,
klik kanan dan pilih Insert Frame.
b. Pada layer background, sisipkan gambar pemandangan padang rumput yang sudah
diedit sedemikian rupa sehingga sudah menjadi sebuah gambar gerak dengan
menekan Ctrl+R. Atur posisi gambar melalui align dengan mencari jendela align pada panels atau dengan menekan Ctrl+K. Kunci layer background hingga layer ini
tidak berpindah posisi.
Gambar 3.1 Background Awal
c.
Pada layer matahari, dengan menggunakan oval tool buat bentuk bulat yang tidak
memiliki garis pinggir. Pilih warna kuning, sesuai warna matahari. Tekan F8, pilih
Universitas Sumatera Utara
movie clip , dan beri nama matahari. Klik matahari, ubah filters yang ada pada
properties pada objek matahari dengan menekan Add Filter, tekan pilihan glow.
Ubah warna sedemikian rupa hingga menyerupai sinar matahari.
Gambar 3.2 Matahari
d. Pada layer kelinci, lakukan hal yang sama dengan yang ada pada layer background,
yaitu dengan menyisipkan gambar kelinci dan menyesuaikan posisi dari gambar
tersebut.
Gambar 3.3 Kelinci Jalan
Universitas Sumatera Utara
e. Pada layer awan, sisipkan gambar awan yang telah diedit sedemikian rupa dan atur
posisinya.
Gambar 3.4 Awan
f.
Pada layer button, pilih Rectangle Tool kemudian pada properties buatlah Rectangle Options
menjadi 15. Tekan F8, pilih button, ubah nama menjadi btn_mulai. Lakukan hal yang sama untuk btn_cara.
Gambar 3.5 Button Mulai dan Petunjuk
3.3.1.2 Desain Judul .
a. Buat tulisan ”PERMAINAN TEBAK KATA” dengan menggunakan text tool.
b. Seleksi tulisan, kemudian tekan Ctrl +B.
c. Masih dalam keadaan terseleksi tekan Ctrl + Shift + D.
d.
Klik kanan layer 1. Klik delete layer.
Universitas Sumatera Utara
e.
Animasi dimulai dari huruf P. Convert to Symbol huruf, kemudian seleksi frame 10
dan 20, tekan F6. f.
Pada frame 10, perbesar huruf kemudian ubah warna. g.
Seleksi frame 1 hingga frame 20, buat Classic Tween. h.
Lakukan langkah yang sama untuk setiap huruf tetapi pergerakkannya menjadi lebih banyak 10 frame dari sebelumnya, sehingga huruf E diperbesar di frame 20, dan
seterusnya.
Gambar 3.6 Judul Permainan
3.3.1.3 Desain Link
a. Buat tulisan yang akan kita gunakan sebagai link ke animasi berikutnya. Disini
penulis memiliki 2 link, yaitu: Mulai dan Petunjuk.
b. Klik pada tulisan mulai, tekan F9. Pada Actionscript buat link-nya ke file level 1.swf
yang kita simpan pada folder yang sama dengan awal.swf. c.
Lakukan hal yang sama untuk Petunjuk dengan membuat link-nya ke file masing- masing.
Universitas Sumatera Utara
3.3.2 Desain Halaman Petunjuk
Halaman Petunjuk ini berisi berisi cara atau petunjuk permainan juga penjelasan singkat mengenai fungsi permainan terhadap sang anak. Petunjuk ditampilkan sedemikian rupa
sehingga gambar karakter kelinci terlihat sedang berbicara. Pengguna dapat melanjutkan petunjuk dengan menekan arrow yang telah disediakan.
3.3.2.1 Desain Halaman Background
Buka program Adobe Flash CS4 Professional. Ubah ukuran stage menjadi 676 x 507 pixels.
a. Buat 5 layer yaitu dengan nama: musik, Background, kelinci, arrow dan petunjuk.
b. Pada layer musik frame dibiarkan kosong. Seleksi frame 1 dan masukkan musik yang
sudah di-import ke dalam library. Pada sync ubah menjadi start dan pengulangannya pilih loop.
c. Pada layer Background sama seperti sebelumnya, sisipkan gambar dan posisikan
gambar. Kunci layer agar tidak berubah posisi. Lihat gambar berikut.
Universitas Sumatera Utara
Gambar 3.7 Background Petunjuk
d. Pada layer kelinci sisipkan gambar kelinci yang sudah diedit sebelumnya sehingga
kelinci terlihat sedang berbicara. Posisikan kelinci di sebelah kiri bawah.
Gambar 3.8 Kelinci Bicara
Universitas Sumatera Utara
e.
Pada layer arrow pilih line tool, atur fill colour beserta stoke colour, kemudian buat
line berbentuk panah. Blok gambar panah tersebut, tekan F6 pilih movie clip, ubah nama menjadi arrow kemudian klik OK. Buat 3 panah yang sama dengan nama
arrow2, arrow3 dan arrow4. Panah yang bernama arrow ditempatkan di frame 81, arrow2 dan arrow3 di frame 110 dan arrow4 di frame 123.
Gambar 3.9 Panah Next dan Back
f. Pada layer petunjuk pilih text tool kemudian buat kalimat berisi petunjuk yang akan
dibaca pengguna. Buat menjadi 3 bagian petunjuk, petunjuk level 1, level 2 dan level 3. Level 1 ditempatkan pada frame 52 – 81, level 2 ditempatkan pada frame 82 – 110,
dan level 3 ditempatkan pada frame 111 – 132.
Gambar 3.10 Petunjuk
Universitas Sumatera Utara
3.3.2.2 Desain Link
a. Buat layer baru bernama script.
b.
Klik kanan pada frame 81 kemudian pilih insert blank keyframe. Lakukan hal yang
sama pada frame 110 dan 132. Pada tiap frame lakukan hal berikut : tekan F9, kemudian tuliskan ActionScript : stop;
c. Pada layer arrow, klik gambar panah bernama arrow. Klik kanan dan pilih pilihan
action. Pada jendela action, tuliskan ActionScript : on release { gotoAndPlay82; } d.
Agar pengguna bisa langsung bermain setelah membaca petunjuk, buat tombol menuju mulainya permainan dengan mengambil tombol mulai pada halaman awal.
3.3.3 Desain Halaman Level 1
Pada halaman ini ditampilkanlah permainan level 1. Disini pengguna diminta untuk mencari huruf-huruf yang tersembunyi. Jika ditemukan, huruf itu akan timbul.
a. Buat empat layer pada file baru yang diberi nama level 1.fla. Buat nama layer menjadi
background, petunjuk, huruf dan script. b.
Pada layer script, akan terdapat script yang sudah penulis buat di bab program. c.
Pada layer background, masukkan gambar yang telah di-import dan ubah sedemikian rupa hingga posisinya berada ditengah.
Universitas Sumatera Utara
Gambar 3.11 Background Level 1
d.
Pada layer petunjuk pilih text tool, buat kalimat petunjuk kemudian posisikan text ini
berada di tengah. Ubah transparansinya menjadi 0. Seleksi frame 80, tekan F8. Perbesar text petunjuk, kemudian ubah transparansinya menjadi 100.
Gambar 3.12 Petunjuk Permainan
e. Pada layer huruf, buatlah sepuluh huruf acak. Ubah menjadi button. Tekan F9,
masukkan ActionScript : onrelease {gotoAndPlay161}; Lakukan hal yang sama pada sembilan huruf lainnya.
Universitas Sumatera Utara
3.3.4 Desain Halaman Level 2
a. Buat empat layer pada file baru yang diberi nama level 2.fla. Buat nama masing-
masing layer menjadi musik, background, permainan dan script. b.
Pada layer musik, disini hanya terdapat musik yang dimasukkan melalui properties. c.
Pada layer background, masukkan gambar yang sudah di-import dan posisikan ditengah. Buat alpha dari gambar tersebut menjadi 70.
Gambar 3.13 Background Level 2
d.
Pada layer permainan, buatlah bentuk setengah lingkaran dengan menggunakan Oval Tool
. Letakkan di posisi paling bawah. Kemudian pilih Rectangle Tool dan buat dua
buah kotak yang memiliki tinggi yang sama dengan setengah lingkaran. Posisikan di paling kanan dan kiri berada diluar batas layar. Kedua kotak ini akan menjadi batas
setengah lingkaran. Buat dua teks, yang pertama adalah “Nilai :” dan yang kedua adalah “0”. Teks ini akan menunjukkan nilai dari permainan kita.
Universitas Sumatera Utara
Gambar 3.14 Layer Permainan
e. Pada layer script, biarkan layer tersebut kosong. Tekan F9, masukkan script yang ada.
f.
Buatlah empat huruf sembarang. Warnai huruf tersebut, ubah menjadi movie clip.
Hapus huruf-huruf tersebut dari stage.
3.3.5 Desain Halaman Level 3
a. Buatlah lima layer pada file baru yang diberi nama level 3.fla. Buat nama pada
masing-masing layer dengan nama background, soal, pilihan, jawaban, dan stop.
Seleksi semua layer pada frame 20, klik kanan pilih insert frame.
b. Pada layer stop, setiap frame hanya memiliki ActionScript : stop;
c. Pada layer background, masukkan gambar yang telah di-import kemudian posisikan
ditengah. Buat kotak dengan Rectangle Tool, pilih 7 pada Rectangle Option
kemudian posisikan ditengah.
Universitas Sumatera Utara
Gambar 3.15 Background Level 3
d. Pada layer soal, seleksi layer 1,3,5,7,9,11,13,15,17 dan 19 kemudian tekan F6.
Masukkan gambar yang telah di-import ke library pada tiap blank frame. e.
Pada layer pilihan, buatlah empat kotak dengan menggunakan Rectangle Tool. Pada properties, ubah Rectangle Option menjadi 7. Ubah warna fill menjadi B1FFFF dan
warna stroke menjadi A9BFFF. Posisikan keempat kotak berada dibawah. Buat kembali dua kotak berwarna putih, posisikan diatas keempat kotak sebelumnya. Ubah
keenam kotak tersebut menjadi movie clip, pada empat kotak terbawah masukkan potongan-potongan kata yang sesuai dengan gambar yang ada.
Universitas Sumatera Utara
Gambar 3.16 Pilihan
f. Pada layer jawaban, seleksi semua frame kemudian tekan F6. Pada tiap soal kecuali
pada soal pertama, masukkan animasi1. Kemudian pada frame setelah soal masukkan animasi2. Pada animasi2 buat button kembali agar pemain bisa mengulang permainan.
Gambar 3.17 Animasi2
Gambar 3.18 Animasi1
Universitas Sumatera Utara
3.3.6 Desain Halaman Penutup
a. Buatlah empat layer pada file baru yang bernama congrats.fla. Buat nama pada
masing-masing layer dengan nama Background, kelinci, tulisan dan gambar. b.
Pada layer background, masukkan gambar yang sudah di-improt ke library kemudian posisikan ditengah.
Gambar 3.19 Background Penutup
c. Pada layer kelinci, masukkan gambar kelinci.
Gambar 3.20 Kelinci Senang
Universitas Sumatera Utara
d. Pada layer tulisan, buatlah tulisan kemudian tekan F8, ubah menjadi movie clip. Posisikan dipaling atas.
Gambar 3.21 Tulisan
e. Pada layer gambar, masukkan gambar dan posisikan dibawah.
Gambar 3.20 Layer Gambar
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Hasil
