Rancangan Layar Halaman Exit

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.