8. Rancangan Layar Halaman Exit
640px
480 px
CLEVERLAND
Copyright Yes
Are You Sure Want To EXIT?
No LOGO
Cleverland Animasi
Background ilustrasi gambar
Gambar 4.43 Rancangan Layar Exit
Pada rancangan layar Halaman Exit ini peneliti membuat layar dengan ukuran 640x480 pixel dengan latar belakang gambar ilustrasi taman dengan ditambah
animasi anjing yang bergerak. Peneliti juga meletakkan nama aplikasi Cleverland yang peneliti buat beserta logonya. Untuk tulisan pada instruksi Exit,
peneliti menggunakan jenis huruf Bradley Hand ITC dengan ukuran 24pt berwarna Putih ffffff.
4.2.3 Pengumpulan Bahan Material Collecting
Bahan-bahan yang diperlukan untuk membuat aplikasi ini, baik berupa file-file suara instrumen musik, gambar, animasi, video dan beberapa sumber,
namun sebagian elemen seperti button atau tombol, gambar dan animasi, dibuat sendiri oleh peneliti dengan menggunakan software pendukung.
A. Bahan File Audio
Peneliti mengumpulkan file-file audio yang diperlukan seperti koleksi musik berformat .MP3, .WMA, .WAV atau .OGG yang disesuaikan dengan
kebutuhan dalam Pengembangan Aplikasi Terapi Multimedia Interaktif Untuk Anak Autis Dengan Metode Lovaas. Selain itu, ada beberapa file audio yang
peneliti buat sendiri dengan cara merekam bunyi-bunyian yang berfungsi sebagai suara tombol-tombol dan materi-materi yang ditampilkan di layar aplikasi. Untuk
mengedit file-file audio tersebut, perangkat lunak yang peneliti gunakan adalah Cool Edit Pro 2.0.
B. Bahan File Animasi
Agar tampilan interface dari Pengembangan Aplikasi Terapi Multimedia Interaktif Bagi Anak Autis Dengan Metode Lovaas ini tampak lebih menarik dan
dinamis, maka peneliti merancang animasi gambar, teks dan tombol yang kesemuanya itu dibuat dengan menggunakan perangkat lunak Adobe Flash CS3
dan sebagian lagi dibuat dengan menggunakan Adobe Director 11.5.
Frame 1 Frame 2
Frame 3 Frame 4
Gambar 4.44 Animasi Smiley
Frame 1 Frame 2
Gambar 4.45 Animasi Boneka Angel
Frame 1 Frame 2
Gambar 4.46 Animasi Boneka Girl
Frame 1 Frame 2
Gambar 4.47 Animasi Boneka Rabbit
Frame 1 Frame 2
Frame 3 Frame 4
Frame 5
Frame 6 Frame 7
Frame 8 Frame 9
Frame 10
Frame 11 Frame 12
Frame 13 Frame 14
Frame 15
Gambar 4.48 Animasi Boneka Dog
Frame 1 Frame 2
Frame 3 Frame 4
Gambar 4.49 Animasi Tombol
Frame 1 Frame 2
Frame 1 Frame 2
Gambar 4.50 Animasi Teks
C. Bahan File Gambar
Peneliti menggunakan file grafikgambar yang sesuai dengan karakteristik user dan audience, yaitu anak-anak penderita Autis dan pendampingnya orang
tua, terapis atau shadow teacher, meliputi grafik dua dimensi rancangan layar yang dibuat dan diedit menggunakan Adobe Photoshop CS3.
Tabel 4.2 File Gambar Aplikasi Terapi Multimedia Interaktif Untuk Anak Autis
Dengan Metode Lovaas
No Naskah Narasi
Lambang Gambar
Keterangan
1. START
Untuk memulai mengoperasikan aplikasi
Cleverland yang menuju ke Halaman Utama HOME
2. EXIT
Untuk keluar dari aplikasi Cleverland yang menuju ke
Halaman EXIT
3. Halaman Utama
HOME Menunjukkan user sedang
berada di Halaman Utama HOME
4. Halaman
Informasi Menunjukkan user sedang
berada di Halaman Informasi
5. Halaman Terapi
Musik Menunjukkan user sedang
berada di Halaman Terapi Musik
6. Halaman Cetak
Menunjukkan user sedang berada di Halaman Cetak
7. Tombol Halaman
Utama HOME Tanda tombol aktif yang akan
membawa user ke Halaman Utama HOME
8. Tombol Menu
Halaman Pemula Tanda tombol aktif yang akan
membawa user ke Halaman Pemula
9. Tombol Menu
Halaman Lanjutan Tanda tombol aktif yang akan
membawa user ke Halaman Lanjutan
10. Tombol Halaman
Informasi Tanda tombol aktif yang akan
membawa user ke Halaman Informasi
11. Tombol Halaman
Terapi Musik Tanda tombol aktif yang akan
membawa user ke Halaman Terapi Musik
12. Tombol Pilihan
Musik Terapi Tanda tombol aktif yang bila
di-klik akan memutar sebuah lagu
13. Tombol Operasi
Pemutar Musik Fade
Tanda untuk membuat lagu akan berangsur-angsur hilang
14. Tombol Operasi
Pemutar Musik Pause
Tanda untuk menghentikan lagu sesaat
15. Tombol Operasi
Pemutar Musik Play
Tanda untuk memutar lagu
16. Tombol Operasi
Pemutar Musik Power
Tanda untuk menghidupkan dan mematikan semua musik
yang sedang diputar 17.
Tombol Operasi Pemutar Musik
Rewind Tanda untuk mengembalikan
lagu kembali ke awal 18.
Tombol Operasi Pemutar Musik
Stop Tanda untuk menghentikan
lagu
19. Tombol Halaman
Cetak Tanda tombol aktif yang akan
membawa user ke Halaman Cetak
20. Tombol Sub-menu
Cetak Alfabet Tanda tombol aktif untuk
menampilkan materi Alfabet untuk dicetak
21. Tombol Sub-menu
Cetak Games Tanda tombol aktif untuk
menampilkan materi Games untuk dicetak
22. Tombol Sub-menu
Cetak Panduan Tanda tombol aktif untuk
menampilkan materi Panduan untuk dicetak
22. Tombol Sub-menu
Cetak P.E.C Card Tanda tombol aktif untuk
menampilkan materi P.E.C Card untuk dicetak
23. Tombol Sub-menu
Cetak Tentang Tanda tombol aktif untuk
menampilkan materi Tentang untuk dicetak
24. Tombol Sub-menu
Games Pemula Mengenal
Ekspresi Wajah Tanda tombol aktif untuk
menampilkan layar games Mengenal Ekpresi Wajah
25. Tombol Sub-menu
Games Pemula Mengenal
Bentuk Tanda tombol aktif untuk
menampilkan layar games Mengenal Bentuk
26. Tombol Sub-menu
Games Pemula Puzzle
Tanda tombol aktif untuk menampilkan layar games
Puzzle
27. Tombol Sub-menu
Games Pemula Padanan Gambar
Tanda tombol aktif untuk menampilkan layar games
Memadankan Gambar
28. Tombol Sub-menu
Games Lanjutan Puzzle
Tanda tombol aktif untuk menampilkan layar games
Puzzle untuk tingkat Lanjutan
29. Tombol Sub-menu
Games Lanjutan Games
Konsentrasi Tanda tombol aktif untuk
menampilkan layar games Konsentrasi untuk tingkat
Lanjutan
30. Tombol Sub-menu
Games Lanjutan Mengenal
Gambar dan Bentuk
Tanda tombol aktif untuk menampilkan layar games
Mengenal Gambar dan Bentuk untuk tingkat
Lanjutan
31. Tombol Sub-menu
Games Lanjutan Mewarnai
Tanda tombol aktif untuk menampilkan layar games
Mewarnai untuk tingkat Lanjutan
32. Tombol Sub-menu
Games Lanjutan Mengenal Emosi
Wajah Tanda tombol aktif untuk
menampilkan layar games Mengenal Emosi Wajah
untuk tingkat Lanjutan
D. Bahan File Video
File video peneliti peroleh dari internet dan koleksi pribadi mengenai macam-macam ekpresi wajah yang peneliti edit lagi dengan menggunakan
Windows Movie Maker dan peneliti gabungkan ke dalam aplikasi terapi multimedia interaktif untuk anak autis dengan metode Lovaas dengan
menggunakan software Adobe Director 11.5.
Gambar 4.51 File Video
4.2.4 Pembuatan Assembly
Tahap pembuatan sistem ini merupakan tahap di mana Pengembangan Aplikasi Terapi Multimedia Interaktif Untuk Anak Autis Dengan Metode Lovaas
ini mulai dibuat sesuai dengan Storyboard, Flowchart dan STD State Transition Diagram. Dalam tahap memproduksi sistem ini, peneliti menggunakan perangkat
keras hardware dengan spesifikasi sebagai berikut:
Processor Intel
®
Core™2 Duo T6400 Memory
4GB SDRAM Graphic Card
1024 MB Harddisk
250 GB CD ROM
DVD RW Input Tools
Mouse, Keyboard Output Tools
Monitor 15.6”, Speaker Active
Produksi sistem ini menggunakan perangkat lunak software Adobe Director 11.5 untuk merancang pengembangan aplikasi terapi multimedia
interaktif bagi anak Autis dengan metode Lovaas ini, di mana di dalamnya terdapat unsur animasi yang peneliti buat dengan menggunakan software Adobe
Flash CS3 dan Adobe Director 11.5. Untuk membuat dan mengedit gambar- gambar, peneliti memanfaatkan Adobe Photoshop CS3. Sedangkan untuk
mengolah file suara audio peneliti menggunakan Cool Edit Pro 2.0. Setelah semua spesifikasi pengembangan aplikasi multimedia terpenuhi,
tahap selanjutnya adalah pengembangan program ini ke tahap pembuatannya menggunakan software yang telah dipersiapkan. Tahapan awal dalam
pengembangan program ini mendesain layout latar belakang masing-masing halaman dengan menggunakan Adobe Photoshop CS3. Perancangan awal tombol
dan animasi juga dibuat menggunakan Adobe Photoshop CS3 Tahap selanjutnya adalah membuat gambar animasi yang diperlukan untuk
menambah daya tarik aplikasi ini. Tombol yang akan dibuat dengan gaya animasi juga dibuat pada tahapan ini. Software yang digunakan adalah Adobe Flash CS3
dan Adobe Director 11.5.
Setelah melewati tahapan membuat latar setiap halaman aplikasi dan animasi serta tombol-tombol, selanjutnya adalah mengolah file audio. Pengolahan
dan penyuntingan file-file audio ini memanfaatkan software SoundForge dan Cool Edit Pro 2.0. Setelah itu, file video yang sudah tersedia, diedit sesuai keperluan.
Penyuntingan file video menggunakan software Windows Movie Maker. Setelah semua elemen aplikasi tersedia dan diimpor ke dalam Adobe
Director 11.5, langkah selanjutnya adalah menyusun elemen-elemen tersebut ke dalam masing-masing halaman aplikasi. Pada tahap ini peneliti membuat link
yang menghubungkan satu halaman ke halaman lain, menambahkan efek suara dan meng-compile-nya menjadi satu file aplikasi terapi multimedia interaktif yang
mengintegrasikan beberapa terapi dan simulasi yang diperlukan dalam penanganan autisme.
A. Pembuatan Background Aplikasi Cleverland
Untuk tahap awal pembuatan aplikasi ini, peneliti mendesain gambar latar untuk aplikasi yang peneliti buat. Pembuatannya menggunakan Adobe Photoshop
CS3. Pada tahap ini peneliti menggunakan Pen tool untuk membuat garis tepi yang melengkung. Selanjutnya peneliti memberikan warna yang bergradasi pada
garis melengkung tersebut menggunakan Gradient Tool. Berikutnya, peneliti memberikan warna dasar untuk background aplikasi yang peneliti buat dengan
menggunakan Paint Bucket.
Gambar 4.52 Pembuatan Background Aplikasi
Setelah tahapan pembuatan background aplikasi, peneliti menambahkan gambar dan logo dengan cara menggabungkan beberapa gambar ke layar kerja
pembuatan background aplikasi dengan jalan klik File Open.
Gambar 4.53 Memasukkan Gambar Ke Layar Kerja
Selanjutnya file disimpan dalam tipe file .PSD dengan nama file Background.PSD.
Gambar 4.54 Menyimpan File Background.PSD
B. Membuat Tombol Menu
Tahap pembuatan tombol menu dibuat dengan menggunakan software Adobe Flash CS3. Di awali dengan membuat lingkaran menggunakan Oval Tool,
kemudian memberi warna dan efek gradasi dengan menggunakan Paint Bucket Tool.
Gambar 4.55 Oval Tool
Setelah tombol menu dibuat, selanjutnya adalah meng-export file tombol menu tadi menjadi format .PNG yang latar belakang gambar tombol menu
tersebut transparan. Beri nama tombol menu tersebut dengan nama “info- on.PNG”. Setelah selesai, masih dengan file yang sama tombol tersebut diberi
efek Glow, lalu disimpan de ngan nama “info-on-glow.PNG”.
Gambar 4.56 Pembuatan Tombol Menu Menggunakan Adobe Flash CS3
C. Membuat Gambar Animasi
Tahapan pertama yang peneliti lakukan dalam membuat animasi untuk aplikasi Cleverland adalah membuat gambar untuk animasinya terlebih dahulu.
Peneliti menggunakan Adobe Photoshop CS3 untuk mengedit gambar-gambarnya lalu disimpan dalam bentuk file .PNG dengan cara klik File
Save As pilih tipe file PNG
klik Save, beri nama Smile.PNG
Gambar 4.57 Pembuatan Gambar Animasi
D. Membuat Halaman Utama Aplikasi Cleverland
Dalam membuat halaman utama aplikasi Cleverland, langkah pertama yang harus dilakukan adalah mempersiapkan bidang kerja atau Stage-nya. Untuk
ukuran Stage, peneliti menggunakan ukuran 640 x 480 pixel yang pengaturannya dapat dilakukan di panel Property Inspector.
Gambar 4.58 Property Inspector
Tahapan selanjutnya yaitu mengimpor file Background.JPG tadi ke Adobe Director 11.5 untuk tahap pembuatan animasi. Langkah-langkah mengimpor
gambar ke Adobe Director 11.5 yaitu klik menu File Import, di kotak dialog
Import, pilih file gambar Background.PSD, lalu klik Add Import. Berikutnya
pilih Color Depth: 24 Bits dan klik OK. Setelah file Background.JPG diletakkan di are kerja Stage Adobe Director 11.5, simpan dengan nama Halaman
Utama.DIR.
Gambar 4.59 Mengimpor File Ke Area Kerja Adobe Director 11.5
E. Membuat Animasi
Membuat animasi bisa dilakukan menggunakan Adobe Director 11.5. Tahap pertama yang dikerjakan yaitu mengimpor file gambar animasi ke area
kerja Adobe Director 11.5. Kemudian, letakkan dan atur gambar-gambar tersebut di bidangarea kerja setelah itu atur frame untuk menentukan waktu atau durasi
animasinya. Setelah animasi “Smiley” dibuat, langkah berikutnya yaitu
menyimpan file animasi tersebut dengan nama Smiley.DIR.
Gambar 4.60 Pembuatan Animasi Dengan Adobe Director 11.5
F. Membuat File Video
Dalam Adobe Director 11.5 terdapat fasilitas untuk membuat aplikasi pemutar video. Namun, fasilitas ini memiliki keterbatasan, yaitu hanya untuk tipe
file video tertentu yaitu .MOV, .AVI dan .FLV saja. Pada aplikasi Cleverland yang peneliti buat, tipe file video yang digunakan adalah .MOV. Langkah-
langkahnya sebagai berikut: Klik di Stage yang kosong. Di Property Inspector,
peneliti buat ukuran 640x480 pixel. Susun dan atur member ke dalam Sprite. File video yang digunakan adalah “Video Tutorial Wajah.MOV”
Gambar 4.61 Memasukkan File Video
G. Menggabungkan File Menjadi Aplikasi Cleverland
Untuk menggabungkan beberapa file ke dalam “Halaman Utama.DIR”
pada aplikasi Cleverland ini dilakukan dengan cara mengimpor file-file yang dibutuhkan. Klik menu File
Import, di kotak dialog import pilih file-file yang akan di-import. Klik Add untuk memasukkan ke dalam daftar file, lalu klik Import
bisa semua siap. Data yang sudah di-import otomatis masuk ke dalam Cast Member. Cast
Member berfungsi untuk menyimpan data yang akan dipakai atau ditampilkan pada aplikasi Cleverland.
Gambar 4.62
Cast Member Selanjutnya yaitu menyusun data-data yang dibutuhkan ke Score. Cara
memasukkan Background.JPG dengan cara men-drag ke Score atau bisa juga ke Stage.
Gambar 4.63
Area Kerja Pembuatan Halaman Utama Cleverland Langkah berikutnya yaitu memasukkan data atau file-file lain seperti
animasi “Smiley.DIR” dan tombol-tombol menu, seperti “info-on.PNG” dan
“info-on-glow.PNG”. Hingga akan menjadi seperti gambar berikut.
Gambar 4.64 Pembuatan Halaman Utama Cleverland
H. Memasukkan Musik Latar
Aplikasi Cleverland yang peneliti buat ini terdapat musik latar yang langsung diputar saat aplikasi dijalankan. Cara impor file musik yaitu
File Import Pilih file musik Klik Import. Lalu drag
file musik “Twinkle- twinkle Little Star
” ke Channel suara nomor 1.
Gambar 4.65 Memasukkan Musik
4.2.5 Pengujian Testing
Langkah setelah aplikasi multimedia diproduksi, berikutnya adalah langkah pengujian sistem. Fungsi dari pengujian sistem ini untuk memastikan
bahwa hasil produksi aplikasi multimedia sesuai dengan yang direncanakan sekaligus untuk mengetahui apakah aplikasi terapi multimedia interaktif untuk
anak Autis dapat berjalan dengan baik atau tidak. Maka dari itu, peneliti melakukan pengujian terhadap aplikasi multimedia yang telah dibuat.
Adapun spesifikasi komputer yang digunakan peneliti untuk melakukan pengujian adalah sebagai berikut:
Processor Core 2 Duo E7500 2.93Ghz
Memory 2 GB
Graphic Card 512 MB 64 Bit
Harddisk 320 GB
Input Tools Mouse, Keyboard
Output Tools Monitor
19”, Speaker Active
Pengujian sistem ini dilakukan sebanyak 3 tiga kali, yaitu pada tanggal 24 April 2010 Pukul 14:00 WIB, tanggal 17 Juli 2010 pukul 14:00 WIB dan
tanggal 19 Februari 2011 Pukul 14:30 WIB di Sekolah Yayasan Pantara, Kebayoran baru, Jakarta Selatan. Setelah dilakukan pengujian sebanyak 3 tiga
kali tersebut, Pengembangan Terapi Multimedia Interaktif Untuk Anak Autis Dengan Metode Lovaas ini dapat berjalan dengan baik.
Setelah aplikasi diterapkan dan dicoba oleh pengguna, maka dilakukan evaluasi Aplikasi Terapi Bagi Anak Autis Dengan Menggunakan Metode Lovaas
Berbasis Multimedia Interaktif. Evaluasi ini dilakukan kepada 20 dua puluh
orang responden yang terdiri dari terapis, shadow teacher dan orang tua atau pendamping anak autis setelah pengujian program dengan tujuan untuk dapat
mengetahui perbedaan sebelum dan sesudah menggunakan aplikasi ini.
A. Kategori Kuesioner Evaluasi
Pertanyaan pada kuesioner evaluasi dapat digolongkan menjadi 5 lima kategori, yaitu:
1. Perbandingan tingkat konsentrasi dan kefokusan anak autis sebelum dan sesudah menggunakan aplikasi.