Perancangan Flowchart Perancangan Design

Animasi : Animasi pada teks dan gambar dibuat oleh peneliti menggunakan software Adobe Flash CS3 dan Adobe Director 11.5. Video : Peneliti menggunakan koleksi video yang diperoleh dari internet dengan format FLV, MPEG dan AVI. Interaktif : Menggunakan link-link yang terhubung satu sama lain, berupa gambar, teks, dan pemanfaatan media suara berupa sound effect atau musik.

4.2.2 Perancangan Design

Pada tahap ini peneliti melakukan perancangan aplikasi berupa perancangan flowchart, storyboard, desain struktur navigasi berupa hirarki menu, perancangan diagram transisi atau State Transition Diagram STD dan perancangan antar-muka pengguna user interface.

A. Perancangan Flowchart

Berikut peneliti tampilkan flowchart dari aplikasi terapi multimedia interaktif untuk anak Autis yang peneliti buat. Keterangan Flowchart: A : Halaman Intro B : Halaman Utama C : Halaman Informasi D : Halaman Terapi Musik E : Halaman Cetak F : Halaman Pemula G : Halaman Lanjutan H : Halaman EXIT I : Games Mengenal Ekspresi J : Games Padanan Betuk K : Games Puzzle Pemula L : Games Padanan Gambar M : Games Puzzle Lanjutan N : Games Konsentrasi O : Games Mengenal Gambar dan Bentuk P : Games Mewarnai Q : Games Mengenal Emosi Wajah Gambar 4.1 Flowchart Terapi untuk Anak Autis Berbasis Multimedia Interaktif Penjelasan flowchart: Flowchart ini menggambarkan secara umum alur dari aplikasi terapi multimedia interaktif untuk anak Autis. Bila aplikasi dijalankan, yang pertama akan menampilkan layar intro, kemudian layar menu utama. Pada layar menu utama ini terdapat beberapa pilihan menu, yang apabila memilih salah satu dari menu-menu utama tersebut maka akan tampil layar menu materi. Pada layar menu materi terdapat pilihan-pilihan materi yang apabila dipilih salah satu pilihan materi tersebut maka akan tampil layar materi. Pada setiap layar terdapat tombol kembali untuk kembali ke layar yang sebelumnya dan juga tombol keluar yang disediakan untuk keluar dari program aplikasi. Tampilkan Layar Intro Klik START A B Ya Tidak Gambar 4.2 Flowchart Intro Penjelasan flowchart: Flowchart di atas menjelaskan bahwa pada halaman Intro terdapat tombol START yang apabila di-klik maka akan berpindah ke halaman utama HOME. Tampilkan Halaman Utama Klik Tombol „Informasi‟ B Ya C Klik Tombol „Terapi Musik‟ Tidak D Ya Klik Tombol „Hal. Cetak‟ Tidak Klik Menu „Hal. Pemula‟ Tidak Klik Menu „Hal. Lanjutan‟ Tidak Klik Tombol „EXIT‟ Tidak E F G H Tidak Gambar 4.3 Flowchart Halaman Utama HOME Penjelasan flowchart: Flowchart „Halaman Utama’ di atas ini terdiri dari 6 enam proses. T terdapat tombol „Informasi’ yang jika di-klik akan berpindah ke Halaman Informasi, tombol „Terapi Musik’ yang jika di-klik akan berpindah ke Halaman Terapi Musik, dan tombol „Cetak’ yang jika di-klik akan berpindah ke Halaman Cetak. Di Halaman Utama ini juga tersedia menu „Pemula’ dan menu „Lanjutan’ yang apabila di-klik maka akan menuju Halaman Pemula dan Halaman Lanjutan. Proses terakhir adalah tombol EXIT yang jika dipilih maka akan berpindah ke Halaman EXIT. Tampilkan Halaman Informasi Klik Tombol „Terapi Musik‟ C Ya D Klik Tombol „Hal. Cetak‟ Tidak E Ya Klik Tombol „Hal. Utama‟ Tidak Klik Menu „Autisme‟ Tidak Klik Menu „Y.A.I‟ Tidak Klik Menu „Yayasan Pantara‟ Tidak Ya B Ya Ya Menampilkan informasi seputar Autisme Ya Menampilkan informasi seputar Y.A.I Tidak Klik Menu „Cleverland‟ Menampilkan informasi seputar Yayasan Pantara Menampilkan informasi mengenai aplikasi Cleverland Ya Klik Tombol „EXIT‟ Tidak Ya H Tidak Gambar 4.4 Flowchart Halaman Informasi Penjelasan flowchart: Flowchart untuk „Halaman Informasi’ ini terdapat 5 lima proses, yaitu kembali ke „Halaman Utama’, menuju ke „Halaman Terapi Musik’ dan „Cetak’. Lalu ada juga proses memilih menu informasi yang disediakan, yang apabila di- klik tombolnya masing-masing akan ditampilkan informasi yang dipilih tersebut di sebelah kanan layar. Dan proses yang terakhir adalah menju ke Halaman EXIT. Tampilkan Halaman Terapi Musik Klik Tombol „Hal. Cetak‟ D Ya E Klik Tombol „Hal. Utama‟ Tidak B Ya Klik Tombol „Hal. Informasi‟ Tidak Klik Tombol Daftar Lagu Tidak Pilih Tombol Operasional Tidak Ya C Ya Memainkan musik Ya Mengoperasikan fungsi pemutar musik Klik Tombol „EXIT‟ Tidak Ya H Tidak Gambar 4.5 Flowchart Halaman Terapi Musik Penjelasan flowchart: Pada flowchart „Halaman Terapi Musik’ ini terdiri dari 5 lima proses, yaitu proses untuk kembali „Halaman Utama’ dan „Halaman Informasi’, proses menuju ke „Halaman Cetak’, proses mengatur dan memainkan musik dan juga proses menuju ke „Halaman Exit’. Tampilkan Halaman Cetak Klik Tombol „Hal. Utama‟ E Ya B Klik Tombol „Hal. Informasi‟ Tidak C Ya Klik Tombol „Hal. Terapi Musik‟ Tidak Pilih Menu „P.E.C Card‟ Tidak Plih Menu „Games‟ Tidak Ya D Ya Muncul halaman baru yang menampilkan materi P.E.C Card Ya Klik Tombol „EXIT‟ Ya Tidak Muncul halaman baru yang menampilkan materi Games H Plih Menu „Alfabet‟ Tidak Muncul halaman baru yang menampilkan materi Alfabet Ya Plih Menu „Tentang‟ Tidak Muncul halaman baru yang menampilkan materi Tentang Ya Plih Menu „Panduan‟ Tidak Muncul halaman baru yang menampilkan materi Panduan Ya Tidak Gambar 4.6 Flowchart Halaman Cetak Penjelasan flowchart: Flowchart untuk „Halaman Cetak’ ini terdapat 5 lima proses, yaitu kembali ke „Halaman Utama’, menuju ke „Halaman Terapi Musik’ dan „Halaman Informasi’. Lalu ada juga proses memilih materi-materi yang disediakan, yang apabila di-klik tombolnya masing-masing akan tampil jendela baru yang berisi materi-materi berdasarkan kategorinya dan selanjutnya kemudia bisa dicetak. Dan proses yang terakhir adalah menju ke Halaman EXIT. Tampilkan Halaman Pemula Klik Tombol „Games Mengenal Ekspresi‟ F Ya I J Ya Tidak Tidak Klik Tombol „EXIT‟ Ya Tidak H Klik Tombol „HOME‟ Tidak Ya Tidak Klik Tombol „Games Padanan Bentuk‟ Tidak Klik Tombol „Games Puzzle‟ Ya K Klik Tombol „Games Padanan Gambar‟ L Ya B Gambar 4.7 Flowchart Halaman Pemula Penjelasan flowchart: Pada flowchart „Halaman Pemula’ ini terdapat 6 enam proses, yakni untuk membuka halaman-halaman games simulasi dengan menge-klik salah satu tombol pilihannya. Ada 4 empat kategori pilihan simulasi permainan yang biasa dipilih dan jika di-klik akan muncul jendela baru berisi games yang dipilih. Dan juga tersedia proses untuk menuju ke Halaman Utama HOME dan Halaman EXIT. Tampilkan Halaman Lanjutan Klik Tombol „Games Puzzle‟ G Ya M N Ya Tidak Tidak Klik Tombol „EXIT‟ Ya H Klik Tombol „HOME‟ Ya Tidak Klik Tombol „Games Konsentrasi‟ Tidak Klik Tombol „Games Mengenal Gambar dan Bentuk‟ Ya O Klik Tombol „Games Mewarnai‟ Q B Tidak Klik Tombol „Games Mengenal Emosi Wajah‟ P Ya Ya Tidak Tidak Gambar 4.8 Flowchart Halaman Lanjutan Penjelasan Flowchart: Pada flowchart „Halaman Lanjutan’ ini terdapat 7 tujuh proses, yakni untuk membuka halaman-halaman games simulasi dengan menge-klik salah satu tombol pilihannya. Ada 5 lima kategori pilihan simulasi permainan yang biasa dipilih dan jika di-klik akan muncul jendela baru berisi games yang dipilih. Dan juga tersedia proses untuk menuju ke Halaman Utama HOME dan Halaman EXIT. Tampilkan Halaman EXIT Klik Pilihan „YES Ya B Ya Tidak H Tidak Klik Pilihan „NO‟ Keluar Gambar 4.9 Flowchart Halaman EXIT Penjelasan flowchart: Flowchart „Halaman EXIT’ terdiri dari 1 satu proses saja, yaitu jika klik „YES’ maka keluar dari aplikasi Terapi Multimedia Interaktif Untuk Anak Autis Dengan Metode Lovaas Cleverland dan apabila klik „NO’ maka akan kembali ke „Halaman Utama HOME’.

B. Merancang Storyboard