BAB 3
PERANCANGAN SISTEM
Untuk memulai merancang suatu animasi maka terlebih dahulu harus menjalankan software atau aplikasi Adobe Flash CS6, kemudian pilih File New
kemudian pada tab general pilih ActionScript 2.0 dan aturlah lebar width dan tinggi height lalu klik tombol ok. Maka akan muncul lembar kerja Adobe Flash
CS6.
3.1 Desain Halaman Awal
Dalam bagian ini terdapat 4 layer seperti layer background, judul, tombol menu, dan ket-tombol. Berikut tahapannya :
1. Simpan terlebih dahulu dengan nama Alfabet.fla. Buat 4 layer secara
berurutan yaitu layer background, judul, tombol menu, dan ket-tombol. Disini penulis membuat ukuran file sebesar 800x600 pixel dengan warna
dasar stage berwarna putih.
Universitas Sumatera Utara
2. Untuk layer background penulis mengambil dari wallpaper yang sudah
tersedia dengan cara mengimport gambar tersebut. Dengan cara klik File Import Import to Library dan pilih wallpaper yang di minati. Setelah
wallpaper masuk ke library, pilih dan tarik wallpaper tersebut ke dalam stage pada layer background. Atur background hingga pas menutupi stage
secara penuh. Lalu pada frame ke 65 tekan F5.
3. Untuk layer judul penulis cukup menggunakan Text Tool dari ToolBox
untuk menuliskan judul “Mari Belajar Alfabet Bahasa Inggris” kemudian
pada frame 5 tekan F5. Untuk mengubah jenis, warna, dan ukuran font, cukup klik Text tool yang telah dibuat sebelumnya dan lihat pada panel
properties sebelah kanan, dan sesuaikan dengan keinginan.
4. Untuk layer tombol menu terdapat 3 button yang dapat mengakses ke
animasi lainnya yaitu, tombol alfabet, latihan, petunjuk, dan profil. Cara membuat button seperti ini sama halnya dengan membuat button lainnya,
cukup buat satu kotak dengan rectangle tool, kemudian copy dan paste hingga menjadi 4 button. Lalu tambahkan text untuk memberi keterangan
pada button, kemudian convert to button. Untuk bisa lanjut ke animasi selanjutnya ketika di klik, maka perlu menambahkan ActionScript. Dengan
cara klik salah satu button lalu tekan F9, seperti pada gambar dibawah. Kemudian pada frame 5 tekan F5.
Universitas Sumatera Utara
Gambar 3.1. Layer Button Alfabet ActionScript
Lakukan pada ke 3 button lainnya, namun ActionScript yang berbeda- beda, karena satu tombol ketika di klik akan masuk ke animasi sesuai
dengan text yang tertulis di button tersebut saja.
5. Masih pada layer tombol menu, untuk membuat kesan menarik pada
button ketika di hover, penulis akan menambahkan efek suara pada button tersebut dengan cara. Klik ganda pada salah satu button kemudian alihkan
pada panel timeline, kemudian tekan F6 pada frame over, down, dan hit. Kemudian pada frame over, ganti color button dan berikan efek suara.
Hingga hasilnya seperti pada gambar dibawah, lakukan hal ini dengan ke 3 button lainnya.
Gambar 3.2. Efek Hover Sound pada Button
Universitas Sumatera Utara
6. Untuk layer ket-tombol, penulis hanya bermain dengan keyframe saja,
namu pada keyframe tersebut terdapat keterangan mengenai button yang akan terlihat jika pointer cursor mouse melintasi button tersebut. Dengan
cara buatlah terlebih dahulu frame pada layer tombol menu sampai ke frame 5 dan pada layer ket-tombol buatlah blank keyframe sampai ke
frame 5. Kemudia kosongkan pada ket-tombol di frame 1, namun isi kan keterangan tombol di blank keyframe 2,3,4, dan 5. Dan untuk
menampilkan animasi munculnya keterangan tombol ketika button tersebut di lalui, maka tambahkan ActionScript pada button sebelumnya
hingga jadi seperti gambar dibawah ini.
Gambar 3.3. Layer ket-menu dengan ActionScript
7. Kembali pada layer tombol menu, kemudian buatlah sebuah button keluar,
dimana button ini berfungsi untuk menutup mengakhiri jalannya animasi. Dengan cara klik Window Common Libraries Button kali ini penulis
memilih classic buttons arcade buttons arcade button – orange.
Tuliskan text “Keluar” disamping button tersebut, untuk membuat menarik
berikan efek suara seperti contoh pada gambar 3.2. dan tidak lupa untuk
Universitas Sumatera Utara
menambahkan ActionScript pada tombol tersebut, seperti pada gambar
dibawah.
Gambar 3.4. Tombol Keluar
3.2 Menu Alfabet
