LANDASAN TEORI
ANALISA DAN PERANCANGAN SISTEM
4.3 Implementasi Program
4.3.1 Implementasi Pembuatan Program Tahapan implementasi pembuatan program Tahapan implementasi pembuatan program
1. Desain Grafik
Desain grafik digunakan untuk mendukung latar belakang agar sesuai dengan tema dasar dari aplikasi multimedia yang dirancang.
Gambar-gambar yang ada diperoleh dari hasil scanning gambar dari beberapa referensi buku, internet maupun gambar sendiri yang kemudian diolah pada Adobe Photoshop 7.0.
Pada aplikasi ini adobe photoshop 7.0 digunakan untuk mengedit gambar-gambar hasil
scanning dan hasil download dari internet, kemudian masing-masing gambar tersebut disimpan
dengan format png (*.png).
Langkah-langkah yang dilakukan untuk memisah-misahkan gambar sebagai berikut:
1.Membuka Adobe Photoshop 7.0
2.Membuka file hasil scan, kemudian klik Ok.
Gambar 4.1 Gambar kotak dialog open
Gambar 4.2 Lembar kerja yang akan diedit Adobe Photoshop 7.0
3. Melakukan croping gambar untuk fokus kepada gambar yang hasil gambar yang akan diedit dengan menekan simbol crop lalu menyeleksi gambar sesuai dengan kebutuhan.
Gambar. 4.3 croping gambar
4. membuat background copy dengan cara menggandakan gambar yakni klik kanan -> duplicate layer kemudian membuang background dengan cara delete layer sehingga yang tersisa adalah layer background copy saja.
Gambar 4.4, menggandakan layer
5.Mengedit gambar sesuai dengan kebutuhan. Hasilnya adalah gambar dengan latar transparent.
Gambar 4.5 hasil editing
6.Menyimpan hasil edit dengan cara Save as, nama file: wajah extension : png.
2. Membuat Animasi Program
Animasi program dibuat dengan menggunakan Macromedia Flash MX 2004.
a. Pembuatan Splash Screeen
Pada Splash screen ini terdapat 6 objek yang digunakan, pada lima layer dalam satu scene. Gambar yang dipergunakan untuk Splash screen diperoleh dari hasil menggambar pada area kerja dengan menggunakan Macromedia Flash MX 2004 maupun dari importing gambar yang telah discanning yang kemudian diolah dengan Adobe Photoshop.
Tahapan dalam membuat Splash Screen:
Membuka area kerja Macromedia Flash MX 2004, pilih new flash document.
Kemudian pada jendela properties Size diklik, sehingga akan tampil Document properties seperti tampak pada gambar 4.9.
Gambar 4.6 Document properties
Kotak dialog Document Properties ini digunakan untuk menentukan resolusi dari animasi yang akan dibuat.
3. Untuk membuat splash screen ini diperlukan lima layer dengan 50 frame. Masing-masing layer berisi objek yang akan diberi gerak animasi. Layer paling awal adalah layer 0 (nol) yakni layer background dan untuk layer terakhir yakni layer lima, frame (keyframe) ke-50 diberi actionscript loadmovienum agar langsung menuju ke menu utama.
Gambar 4.7. Jendela actionscript untuk frame 50 pada layer 5
4. Setelah itu objek yang telah dibuat pada tiap-tiap layer diconvert menjadi simbol, dengan menggunakan perintah menu Modify > Convert to Symbol.
Gambar 4.8 Kotak dialog Convert to Symbol
5. Pada kotak dialog Convert to symbol, bagian Name diisi dengan nama simbol untuk masing-masing objek, dan pada bagian Behavior (perilaku) dipilih Movie
clip, karena pada splash screen ini semua objek yang ada di dalamnya berperilaku sebagai animasi atau movie flash. Dan secara otomatis flash akan menambahkan masing-masing simbol tersebut pada panel library. Sehingga pada saat objek-objek tersebut dibutuhkan kembali, tinggal dicopy saja.
6. Selesai dilakukan convert, kemudian simbol-simbol tersebut diberi animasi gerak, pada jendela properties pada bagian Tween diisi dengan Motion atau dengan cara mengklik kanan pada frame lalu pilih create motion tween.
Gambar 4.9 Jendela properties untuk pemberian motion tween
7. Setelah semua diberi animasi, scene tersebut disimpan dengan memilih menu file > save As, dengan diberi nama Tana.fla
8. Untuk menjalankan animasi tersebut dilakukan test movie dengan menekan Ctrl+Enter, maka secara otomatis akan terbentuk file dengan format swf (*.swf). Agar file Tana dapat dijalankan pada komputer yang tidak memiliki atau belum menginstall Macromedia Flash, file dapat dipublish dalam bentuk *.exe sebagai berikut.
a. Pada jendela properties > settings > Formats akan keluar kotak dialog seperti ini :
Gambar 4.10. kotak dialog properties untuk pengaturan format file
b. Pilih dengan cara mencentang selain yang telah ada Flash.swf juga Windows projector (*.exe).
b. Pembuatan Menu Utama
Pembuatan menu utama tidak berbeda jauh dengan pembuatan splash screen, dengan beberapa tambahan antara lain selain movie clip, terdapat juga button
1. Movie clip, simbol ini berperilaku sebagai animasi atau movie flash. Pada splash screen ini movie clip digunakan untuk mengatur tampilan animasi gerak dari objek / gambar yang pergunakan sebagai background menu utama dan permunculan button-button menu utama.
2. Button, simbol ini berperilaku sebagai tombol yang dapat diklik dalam sebuah animasi. Pada menu utama ini terutama digunakan untuk memberi perilaku terhadap simbol-simbol yang berfungsi sebagai tombol-tombol menu.
Gambar 4.11 Kotak dialog Convert to symbol
Ada 8 tombol pada menu utama, yaitu tombol menu huruf, tombol menu angka, tombol menu bentuk, tombol menu warna, tombol menu panca indera, tombol menu bermain, tombol menu klasifikasi, dan tombol keluar (gambar 4.12)
Gambar 4.12 Halaman menu utama
Beckground yang telah di-convert menjadi movie clip dan masing-masing tombol diberi perintah actionscript.
a. Background
Perintah di atas berfungsi sebagai jika file utama.swf di-load atau dibuka, maka latar musik bernama utama yang disimpan di library akan dimainkan. Volume diset kecil yakni 20 % agar suara tombol dapat terdengar dan dimainkan berulang-ulang hingga 99 kali.
b. Tooltip
Pada layer pertama yaitu layer bg, frame pertama, dibuatkan perintah fungsi tooltip yang berguna untuk mengeluarkan teks jika tombol di-rollover. Setiap tombol diberi nama sebagai target untuk kemudian di-tag oleh fungsi tooltip dan dengan membuat sebuah teks dinamis kosong bernama mc_tooltip yang memiliki nama instan message.
Jika tombol dengan id huruf, angka, bentuk, warna, indera, klasi, games, keluar di-rollover maka akan mengeluarkan teks belajar huruf, belajar angka, belajar bentuk, belajar warna, belajar indera, tampa tinggal, main, keluar.
c. Tombol Menu Huruf
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman submenu huruf.
Jika tombol huruf di-rollover (atau didekati mouse) akan mengeluarkan suara ”belajar huruf” dan mengeluarkan teks ”belajar huruf”
b. Tombol menu angka
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman submenu angka.
Jika tombol angka di-rollover (atau didekati mouse) akan mengeluarkan suara ”belajar angka” dan mengeluarkan teks ”belajar angka”
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman submenu bentuk.
Jika tombol bentuk di-rollover (atau didekati mouse) akan mengeluarkan suara ”belajar bentuk” dan mengeluarkan teks ”belajar bentuk”
d. Tombol menu warna
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman submenu warna.
Jika tombol warna di-rollover (atau didekati mouse) akan mengeluarkan suara ”belajar warna” dan mengeluarkan teks ”belajar warna”
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman submenu panca indera.
Jika tombol panca indera di-rollover (atau didekati mouse) akan mengeluarkan suara ”belajar indera” dan mengeluarkan teks ”belajar indera”
f. Tombol menu klasifikasi
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman submenu klasifikasi.
Jika tombol klasifikasi di-rollover (atau didekati mouse) akan mengeluarkan suara ”Tampa Tinggal” dan mengeluarkan teks ”Tampa Tinggal”
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman submenu bermain.
Jika tombol bermain di-rollover (atau didekati mouse) akan mengeluarkan suara ”main” dan mengeluarkan teks ”main”.
h. Tombol keluar
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman keluar.
Jika tombol keluar di-rollover (atau didekati mouse) akan mengeluarkan suara ”keluar” dan mengeluarkan teks ”Keluar”
Huruf yang dipelajari pada sub menu huruf adalah sembilan huruf yang memiliki kosakata kategori objek yang cukup banyak dalam tatanan bahasa Tana’. Pada menu ini terdapat 12 tombol, yaitu tombol huruf a, tombol huruf i, tombol huruf u, tombol huruf l, tombol huruf m , tombol huruf n, tombol huruf p, tombol huruf s, tombol huruf t, tombol menu utama, tombol bermain dan tombol keluar (gambar 4. 13).
Gambar 4.13 Gambar Submenu Huruf
Sembilan tombol Submenu huruf yaitu menu huruf a, i, u, l, m, n, p, s, t menggunakan fungsi toltip dengan teks dinamis berbingkai putih yang diindentifikasi sebagai mc2_tooltip, sedangkan tombol main, keluar dan menu utama menggunakan tooltip dengan mc_tooltip tanpa bingkai.
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman objek huruf a dan perintah mengatur suara ketika mengarah ke tombol tersebut.
Jika tombol huruf a di-rollover maka akan berbunyi ”huruf a” yang diidentifikasi dengan nama a pada library sebanyak satu kali dan mengeluarkan teks berbingkai putih ”huruf a” .
Gambar 4.14 Gambar Halaman Menu Huruf a
Pada menu huruf a ada 3 objek yang dipergunakan untuk mempelajari huruf tersebut. Masing-masing objek diletakkan pada tiga frame yang terpisah yakni frame a untuk
objek pertama, frame b untuk objek kedua dan frame c untuk objek ketiga, karena itu di dalam halaman menu huruf a ini dibuat tombol kembali yang berfungsi untuk menuju frame sebelumnya dan tombol lanjut berfungsi untuk menuju ke frame
berikutnya. Setiap frame diberi nama sehingga pemanggilan frame dapat lebih mudah.
Pada halaman ini ada 5 tombol yang digunakan, yaitu tombol tombol kembali, tombol lanjut, tombol menu huruf, tombol main dan tombol keluar. Pada halaman ini dibuat animasi gerak untuk huruf yang akan ditampilkan, yakni huruf a dan munculnya objek beserta nama dari objek tersebut,. yaitu objek nenas (gambar 4.1). Untuk halaman objek selanjutnya juga sama, hanya objek dan nama objek yang berbeda.
Animasi tombol, gerak huruf , objek dan nama objek sebagai berikut:
1. Tombol Lanjut
Karena contoh di atas objek nenas berada pada frame pertama dari menu huruf a dengan nama frame a, jadi ketika tombol lanjut diklik maka akan menuju ke frame berikutnya yaitu frame b.
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan menuju halaman objek huruf a yang pertama yang akan dipelajari yakni yang terletak pada frame a.
Tombol kembali hanya berada pada frame b dan c yakni untuk mempelajari objek kedua dan ketiga.
3. Tombol menu huruf
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman submenu huruf
Jika tombol keluar di-rollover (atau didekati mouse) akan mengeluarkan suara ”huruf” dan mengeluarkan teks ”huruf”
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman keluar.
Jika tombol keluar di-rollover (atau didekati mouse) akan mengeluarkan suara ”keluar” dan mengeluarkan teks ”keluar”
5. Tombol menu bermain
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman main
Jika tombol main di-rollover (atau didekati mouse) akan mengeluarkan suara ”main” dan mengeluarkan teks ”main”
Gerakan huruf a dibuat dengan motion tween.
7. Animasi gerakan objek
Perintah di atas berfungsi uintuk menampilkan objek huruf a di sini adalah nenas dengan animasi alpha, dengan kecepatan gerak n=5 ketika event adalah
enterframe maka seolah objek transparant menjadi semakin jelas dengan alpha sebesar 5. Pada saat masuk ke halaman objek pertama pada submenu huruf a maka akan keluar bunyi “arnasin” bersamaan dengan objek nenas (seperti gambar 4. 14).
8. Animasi gerakan nama objek
Perintah di atas berfungsi uintuk menampilkan nama objek huruf a, di sini nama dari objek adalah awan dengan animasi alpha, dan dengan kecepatan gerak n=5.
Terjemahan dalam bahasa Indonesia yang dibuat dengan font arial dan berukuran 10, tidak memiliki action untuk movie clip.
Perintah ini juga berlaku untuk kedua nama objek huruf a yang lain, yang akan dipelajari.
Untuk kedelapan submenu huruf yang lain yaitu menu huruf i, u, l, m, n, p, s, t untuk script yang digunakan sama, hanya cukup mengganti nama file yang akan diload.
d. Pembuatan submenu Angka
Pada submenu angka ini angka yang dipelajari adalah angka 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Pada menu ini terdapat 13 tombol, yaitu tombol angka 1, tombol angka 2, tombol angka 3, tombol angka 4, tombol angka 5, tombol angka 6, tombol angka 7, tombol angka 8, tombol angka 9, tombol angka 10, tombol menu utama, tombol bermain dan tombol keluar (gambar 4.15).
Untuk tombol menu utama, tombol kembali, tombol lanjut dan tombol keluar sama dengan tombol yang berada pada submenu huruf.
Gambar 4.15 Gambar Halaman Sub Menu Angka
Kesepuluh tombol Submenu angka yaitu menu angka 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 mempunyai tombol-tombol dan animasi gerak yang sama untuk angka maupun objek serta nama objek yang ada di dalam menu tersebut, maka akan diambil salah satu contoh untuk penjelasan pembuatan tombol submenu angka tersebut. Sebagai contoh, misal : Tombol menu angka 1
Gambar 4.17 Gambar Halaman Menu Angka 1
Pada menu angka 1 ada 3 objek yang dipergunakan untuk mempelajari angka
tersebut. Masing-masing objek diletakkan pada tiga frame yang terpisah yakni frame a untuk objek pertama, frame b untuk objek kedua dan frame c untuk objek ketiga, karena itu di dalam halaman menu angka 1 ini dibuat tombol kembali yang berfungsi untuk menuju frame sebelumnya dan tombol lanjut berfungsi untuk menuju ke frame berikutnya. Setiap frame diberi nama sehingga pemanggilan frame dapat lebih mudah.
Pada halaman ini ada 5 tombol yang digunakan, yaitu tombol tombol kembali, tombol lanjut, tombol menu angka, tombol main dan tombol keluar. Pada halaman ini dibuat animasi gerak untuk angka yang akan ditampilkan, yakni angka 1 dan munculnya objek beserta nama dari objek tersebut,. yaitu objek nenas (gambar 4.1). Untuk halaman objek selanjutnya juga sama, hanya objek dan nama objek yang berbeda.
Animasi tombol, gerak angka, objek dan nama objek sebagai berikut: Selain itu pada halaman ini juga dibuat animasi gerak untuk angka yang akan ditampilkan, di sini angka 1 dan munculnya objek serta jumlah dan nama dari objek tersebut,. yaitu satu ekor babi dengan menggunakan perintah actionscript. Untuk halaman objek selanjutnya juga sama, hanya saja jumlah serta nama objek yang berbeda.
Animasi tombol, gerak angka , objek dan nama objek sebagai berikut:
1. Tombol menu angka
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman menu angka dan jika di-rollover maka akan mengeluarkan suara ”angka”.
2. Tombol keluar
:
Perintah di atas digunakan untuk memberi action pada tombol keluar, jika tombol tersebut diklik maka akan meload halaman keluar, jika di-rollover maka akan memberi suara “keluar”
3. Animasi gerakan angka 1
Adalah animasi dengan motion tween.
4. Animasi gerakan objek
Perintah di atas berfungsi uintuk menampilkan objek angka 1 di sini adalah seekor babi dengan animasi alpha, dengan kecepatan gerak n=5.
Perintah ini juga berlaku untuk kedua objek angka 1 yang lain, yang akan dipelajari.
9. Dan untuk tombol bermain yang ada pada Submenu angka ini adalah sebagai berikut:
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman game angka.
e. Pembuatan Submenu Bentuk
Pada submenu bentuk ini terdapat 9 bentuk dasar yang akan dipelajari yaitu : lingkaran, persegi, persegi panjang, segitiga, oval, hati, bintang, sabit, belah ketupat. Pada menu ini ada 12 tombol, yaitu tombol bentuk lingkaran, tombol bentuk persegi, tombol bentuk persegi panjang, tombol bentuk segitiga, tombol bentuk oval, tombol bentuk hati, tombol bentuk bintang, tombol bentuk sabit, tombol bentuk belah ketupat, tombol menu utama, tombol bermain, dan tombol keluar (gambar 4.17).
Untuk tombol menu utama, dan tombol keluar sama dengan tombol yang berada pada submenu huruf.
Gambar 4.17 Gambar Halaman SubMenu Bentuk
Kesembilan tombol Submenu bentuk yaitu tombol bentuk lingkaran, tombol bentuk persegi, tombol bentuk persegi panjang, tombol bentuk segitiga, tombol bentuk oval, tombol bentuk hati, tombol bentuk bintang, tombol bentuk sabit, tombol bentuk belah ketupat mempunyai tombol-tombol dan serta nama objek yang ada di dalam menu tersebut, maka akan diambil salah satu contoh untuk penjelasan pembuatan tombol submenu bentuk tersebut. Sebagai contoh, misal : Tombol menu bentuk persegi panjang
Gambar 4.18 Gambar Halaman Menu Bentuk persegi panjang
Pada bentuk persegi panjang ada 3 objek yang dipergunakan untuk mempelajari bentuk tersebut, di dalam halaman menu bentuk persegi panjang ini dibuat tombol kembali yang berfungsi untuk menuju frame sebelumnya dan tombol lanjut berfungsi untuk menuju ke frame berikutnya. Jadi pada halaman ini ada 5 tombol yang
digunakan, yaitu tombol tombol kembali, tombol lanjut, tombol menu bentuk, dan tombol keluar.
Pada halaman ini animasi gerak untuk bentuk yang akan ditampilkan yakni bentuk persegi panjang menggunakan animasi tweening, dan munculnya objek beserta nama dari objek tersebut, yaitu objek bola, dengan menggunakan perintah actionscript (gambar 4.19).
Tombol keluar, kembali dan lanjut untuk seterusnya, actionscripnya sama pada menu huruf.
Untuk halaman objek selanjutnya juga sama, hanya saja objek dan nama objek yang berbeda.
1. Tombol menu bentuk.
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman bentuk untuk memilih bentuk lainnya. Jika tombol bentuk di-rollover maka akan mengeluarkan suara ”bentuk”
2. Animasi gerakan objek dan nama
Perintah di atas berfungsi uintuk menampilkan objek persegi panjang di sini adalah objek roti dengan animasi alpha, dengan kecepatan gerak n=5. Tanda + (plus) berarti movie clip akan bergerak menggelinding dari kiri ke kanan, dengan batasan gerak sebeser 300 pixels.
Perintah ini juga berlaku untuk kedua objek bentuk persegi panjang yang lain, yang akan dipelajari.
Perintah di atas berfungsi uintuk menampilkan nama objek bentuk lingkaran, di sini nama dari objek adalah bola dengan animasi alpha, dan dengan kecepatan gerak n=+5. Tanda + (plus) berarti movie clip akan bergerak dari kiri ke kanan, dengan batasan gerak sebeser 300 pixels.
Dan untuk tombol bermain yang ada pada Submenu bentuk ini adalah sebagai berikut:
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman game bentuk dan jika di-rollover maka akan mengeluarkan suara ”main”
f. Pembuatan Submenu Warna
Pada submenu warna ini warna yang dipelajari adalah tujuh warna dasar yaitu : merah, hijau, kuning, hitam, biru, cokelat dan putih. Pada menu ini terdapat 10
tombol, yaitu tombol warna merah, tombol warna hijau, tombol warna kuning, tombol warna hitam, tombol warna biru, tombol warna cokelat, tombol warna putih, tombol menu utama, tombol bermain dan tombol keluar (gambar 4.19).
Untuk tombol menu utama, lanjut, kembali dan tombol keluar sama dengan tombol yang berada pada submenu huruf.
Gambar 4.19 Gambar Submenu Warna
Untuk 7 tombol Submenu warna yaitu menu warna merah, hijau, kuning, hitam, biru, cokelat dan putih. Semua mempunyai tombol-tombol dan animasi gerak yang sama untuk warna maupun objek serta nama objek yang ada di dalam menu tersebut, maka akan diambil salah satu contoh untuk penjelasan pembuatan tombol submenu warna tersebut. Sebagai contoh, misal : Tombol menu warna merah.
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman warna merah, jika di-rollover maka akan mengeluarkan bunyi ”routa” yg
diidentifikasi dengan nama merah.
Gambar 4.20 Gambar Halaman Menu Warna Merah
Pada menu warna ada 3 objek yang dipergunakan untuk mempelajari warna tersebut. Masing-masing objek diletakkan pada frame terpisah, karena itu di dalam halaman menu warna ini dibuat tombol kembali yang berfungsi untuk menuju frame sebelumnya dan tombol lanjut berfungsi untuk menuju ke frame berikutnya.
Jadi pada halaman ini ada 4 tombol yang digunakan, yaitu tombol tombol kembali, tombol lanjut, tombol menu warna dan tombol keluar. Selain itu pada halaman ini juga dibuat animasi gerak untuk warna yang akan ditampilkan, di sini warna merah dan munculnya objek beserta nama dan warna dari objek tersebut, yaitu objek cabai (gambar 4.20). Untuk halaman objek selanjutnya juga sama, hanya objek dan nama objek yang berbeda.
Animasi tombol gerak objek dan nama serta warna objek sebagai berikut
1. Animasi gerakan warna
Animasi nama warna, dalam hal ini routa untuk warna merah dibuat dengan motion tween.
2. Animasi gerakan objek dan nama objek
Perintah di atas berfungsi uintuk menampilkan objek dan nama objek warna merah di sini adalah cabai dengan animasi alpha, dengan kecepatan gerak n=5 Perintah ini juga berlaku untuk kedua objek warna merah yang lain, akan dipelajari.
Perintah di atas berfungsi jika tombol ditekan / diklik maka akan membuka halaman game warna dan jika di-rollover makan akan mengeluarkan suara ”main”.
g. Pembuatan Submenu Panca Indera
Pada submenu panca indera ini panca indera yang dipelajari adalah: mata, hidung, telinga, mulut, telapak tangan. Pada menu ini terdapat 8 tombol, yaitu tombol mata, tombol hidung, tombol telinga, tombol mulut, tombol telapak tangan, tombol menu utama, tombol bermain dan tombol keluar (gambar 4.21).
Untuk tombol menu utama dan tombol keluar sama dengan tombol yang berada pada