BAB III
ANALISIS DAN PERANCANGAN TUTORIAL INTERAKTIF
3.1 Analisis Tutorial Interaktif
Analisis tutorial interaktif merupakan tahapan dalam membuat suatu tutorial interaktif. Tahap ini dilakukan sebelum pembuatan tutorial interaktif. Dalam tahap ini, pembuatan tutorial interaktif autoplay express 4.5 dianalisis untuk mengetahui kelemahan - kelemahan dan mencari solusi agar menjadi lebih baik. Setelah mendapatkan solusinya, maka hasil analisis digunakan sebagai dasar desain / perancangan tutorial interaktif.
1.1.1 Hasil Analisis Tutorial Interaktif Lama
Setelah menganalisis tutorial interaktif yang lama, diperoleh kekurangan pada faktor pendukung pembuatan video tutorial tersebut. Faktor - faktor tersebut antara lain:
1. Tidak dilengkapi penjelasan tulisan (callouts) serta keterangan-keterangan sehingga sulit untuk dimengerti dan dipahami.
2. Tidak dilengkapi effects transisi.
3. Kurang lengkapnya musik latar belakang yang digunakan dan memiliki jenis musik yang sama sehingga terkesan monoton dan membuat jenuh yang mendengarkan.
4. Pembuatan videonya terkesan gelap sehingga sulit untuk memahami materi yang disampaikan.
3.1.2 Hasil Analisis Tutorial Interaktif yang Baru
Kekurangan dalam tutorial interaktif yang lama akan diperbaiki dengan melengkapi callouts, effects, dan musik yang lebih jelas. Tutorial interaktif yang dikembangkan didesain dengan menggunakan software :
1. Adobe Audition 1.5 sebagai media pendubbingan.
2. Autoplay Express 4.5 untuk membuat tampilan interface.
3. Photoscape untuk mengedit gambar yang digunakan sebagai penambahan decoration gambar dan pengaturan pencahayaan gambar.
4. Camtasia Studio 7.1 untuk recording, editing, dan publishing pembuatan video presentasi yang ada pada layar (screen) komputer.
5. Microsoft Power Point untuk mengedit gambar yang digunakan sebagai background layer.
3.2 Batasan Perancangan Tutorial Interaktif
Aplikasi tutorial ini menampilkan penjelasan seputar tutorial interaktif, yakni cara membuat aplikasi sederhana dan contohnya menggunakan autoplay express 4.5, yang meliputi tahap perancangan, tahap editing dan tahap finishing.
3.3 Rancangan Tutorial Interaktif
Pada perancangan tutorial interaktif ada dua tahap yang harus dilakukan, yaitu tahap persiapan dan tahap perencanaan. Tahap persiapan mencakup penentuan tujuan, pengumpulan data, dan mempersiapkan perangkat lunak yang digunakan.
3.3.1 Tahap persiapan
Beberapa hal yang harus disiapkan pada tahap ini, yaitu :
1. Penentuan tujuan
Penentuan tujuan dari perancangan tutorial interaktif ini dimaksudkan untuk memudahkan pembuatan tutorial interaktif dan sesuai dengan kebutuhan yang ada.
2. Pengumpulan data
Mengumpulkan informasi – informasi terkait bagaimana cara membuat aplikasi sederhana menggunakan autoplay express 4.5.
3. Mempersiapkan perangkat lunak yang digunakan
Membuat media pengenalan tentang membuat aplikasi sederhana, dari proses perancangan, editing dan finishing pada lembar kerja autoplay express 4.5.
4. Implementasi atau pembuatan tutorial
Membuat tutorial interaktif yang dilengkapi dengan menu-menu pendukungnya.
3.3.2 Rancangan Tutorial Interaktif Autoplay Express 4.5
Perancangan pembuatan tutorial interaktif autoplay express 4.5 diawali dengan menentukan rancangan tutorial interaktif yang akan dibuat, mengetahui permasalahan yang terjadi, mengatur urutan materi tutorial yang akan disampaikan, dan pemecahan masalah.
1. Menentukan rancangan tutorial yang akan dibuat
Dalam bagian ini akan dibahas menu- menu yang ada dalam sesi tutorial interaktif autoplay express 4.5 yaitu :
1. Menu Home 3. Menu Tutorial 5. Menu Contact Person
2. Menu About 4. Menu Exemple
2. Mengatur urutan tahapan pembuatan aplikasi sederhana dalam menu tutorial yang akan disampaikan
Urutan tahapan pembuatan aplikasi sederhana dalam menu tutorial interaktif autoplay express 4.5 adalah :
1. Tahap pertama
Tahap ini merupakan tahap perancangan, pada tahap ini merancang serta mempraktekan cara mendesain suatu menu yang dapat di link pada project lainnya.
2. Tahap kedua
Tahap ini merupakan tahap editing. Tahap ini menjelaskan tentang tahap mengedit suatu rancangan yang telah dibuat. Rancangan ini diedit pada menu yang ingin di link atau di share ke page lainnya, maupun perubahan bentuk warna, gambar, tulisan, background dan ukurannya. Sehingga nantinya aplikasi sederhana yang kita buat sesuai dengan yang kita inginkan.
3. Tahap ketiga
Tahap ini merupakan tahap finishing. Bagian ini menjelaskan tentang tahap akhir dari perancangan dan editing, yang telah dibuat.
3. Pemecahan masalah
Bagian terakhir yaitu menanggulangi permasalahan – permasalahan yang ada setelah mengetahui permasalahan yang terjadi dengan cara memperbaikinya.
Berdasarkan keadaan di atas, maka dibutuhkan suatu sistem informasi yang dapat mengelola data tersebut secara baik, sehingga dapat menghasilkan laporan yang valid dalam artian data yang didapat oleh user sesuai dengan data yang diinputkan.
3.4 Flowchart Program
Pengertian flowchart menurut Kosasih (2006) merupakan diagram alir data dari suatu kerangka program. Fungsinya sama dengan algoritma, akan tetapi langkah – langkah penyelesaiannya menggunakan simbol – simbol grafis atau digambarkan secara grafis sehingga akan lebih mudah memahami arah logika.
1. Flowchart aplikasi tutorial interaktif 1.1 Menu utama
Menu utama adalah kumpulan dari semua menu – menu yang ditampilkan dalam tutorial ini.
Home About
Start Tutorial
Example Contact Us
End Home
About Start
Gambar 3.1 Flowchart Menu Utama Tutorial Interaktif
Gambar 3.1 menjelaskan menu – menu yang terdapat pada tutorial interaktif autopaly express 4.5.
1.2 Menu home
Menu home adalah menu tampilan awal saat pengguna telah menjalankan program tutorial interaktif autoplay express 4.5. Di dalamnya terdapat pilihan menu bar yang dapat diakses.
Secara lengkap alur pada menu home tersaji pada Gambar 3.2.
Gambar 3.2 Flowchart Menu Home 1.3 Menu about
Ya Start
Masuk
Home
End Kilas Info
Tidak
Menu about adalah menu yang menampilkan tentang informasi autoplay express 4.5. Secara lengkap alur pada menu about tersaji pada Gambar 3.3.
Gambar 3.3 Flowchart Menu About 1.4 Menu tutorial
Dalam menu tutorial ditampilkan video tentang berbagai tahapan, yakni video tutorial tahap perancangan, editing dan finishing. Secara lengkap alur pada menu tutorial tersaji pada Gambar 3.4.
Pilih/Klik Start
Masuk
About
Informasi Autoplay
End
Hal 3 Tahap Finishing
Tahap Editing Tahap Perancangan Tutorial
Start
Masuk
Hal 1
Hal 2
End
Gambar 3.4 Flowchart Menu Tutorial
1.5 Menu example
Dalam menu example akan ditampilkan tentang hasil pembuatan aplikasi sederhana menggunakan autoplay express 4.5. Secara lengkap alur pada menu example tersaji pada Gambar 3.5.
Gambar 3.5 Flowchart Menu Example
1.6 Menu contact
Menu ini berisi tentang biodata diri penulis sebagai pembuat program tutorial interaktif ini.
Secara lengkap alur pada menu contact tersaji pada Gambar 3.6.
Example Start
Masuk
End
Contact Start
Masuk
End
Gambar 3.6 Flowchart Menu Contact
2. Usecase Aplikasi Tutorial Interaktif 2.1 Menu utama
Di dalam menu utama user dapat mengakses beberapa menu, seperti : menu home, about, tutorial, example dan contact.
Gambar 3.7 Use Case Menu Utama Tutorial Interaktif Gambar 3.7 menjelaskan tentang menu – menu yang dapat dipilih oleh user.
2.2 Menu about
Abou Hom
e
Exampl
Contact
Tutorial
User
Di dalam menu about, user dapat mengakses menu about itu sendiri.
Gambar 3.8 Use Case Menu About
Gambar 3.8 menjelaskan tentang bagaimana user mengakses menu about.
2.3 Menu tutorial
Didalam menu mengenal aplikasi, user dapat mengakses 4 sub menu.
Gambar 3.9 Use Case Menu Tutorial Gambar 3.9 menjelaskan bagaimana user dapat memilih 3 tahapan.
2.4 Menu example
Di dalam menu example, user dapat melihat video sample aplikasi sederhana.
Abou t
User
Thp Editing
Thp Finish
<<include>>
<<include>>
<<include>>
User
Thp Rancang Tutorial
Video sample
User
Exampl e
<<include>>
Gambar 3.10 Use Case Menu Example Gambar 3.10 menjelaskan tentang bagaimana user memilih menu example.
2.5 Menu contact
Di dalam menu contact us, user dapat mengakses menu contact itu sendiri.
Gambar 3.11 Use Case Menu Contact Gambar 3.11 menjelaskan cara user untuk mengakses menu contact.
3.5 Desain Input Dan Output Tutorial Secara Terperinci
Desain input adalah rancangan sebelum pembuatan program. Desain input dibuat untuk menghasilkan output. Desain output merupakan hasil akhir yang ditentukan oleh suatu kegiatan.
3.5.1 Tampilan Menu Utama
Secara umum tampilan menu utama dibagi beberapa tampilan yaitu header, menu navigasi pada bagian atas, content yang berada di kanan dan kiri. Pada menu-menu navigasi akan menampilkan data atau informasi yang dapat di akses oleh user.
Contact
User
Gambar 3.16 Menu Utama Tutorial Interaktif
Gambar 3.12 menampilkan gambaran secara umun pada menu utama.
3.5.2 Menu Home
Menu home menampilkan halaman awal serta beberapa menu tombol yang dapat diakses, seperti menu about, tutorial, example, dan contact.
Header Menu
content content
Title
Title Title
Title
Home About Tutorial Example Contact
Title
Title
Gambar 3.13 Menu Home Gambar 3.13 menampilkan gambaran pada menu home.
3.5.3 Menu About
Menu about menampilkan link serta informasi tentang penjelasan autoplay express 4.5.
Gambar 3.14 Menu About Gambar 3.14 menampilkan gambaran pada menu about.
3.5.4 Menu Tutorial
Menu tutorial menampilkan 3 tahapan, masing-masing tahap menampilkan video tahapan perancangan, tahapan editing, dan tahapan finishing.
Home About Tutorial Example Contact
About
Animasi/Gif
Link
Title
>>> Info Selanjutnya
<<< Info Sebelumnya
Title Title
Animasi
Gambar 3.15 Menu Tutorial Gambar 3.15 menampilkan gambaran pada menu tutorial.
3.5.5 Menu Example
Menampilkan video example akhir project yang telah jadi.
Title Title
Example
Video
Home About Tutorial Example Contact
Home About Tutorial Example Contact
Tutorial Interaktif
Title Title
Title Title Title
Gambar Gambar Gambar
Title Title
Gambar 3.16 Menu Example Gambar 3.16 menampilkan gambaran pada menu example.
3.5.6 Menu Contact Us
Menampilkan foto serta biodata diri penulis, seperti nama, tempat tanggal lahir sampai ke alamat email user.
Gambar 3.17 Menu Contact Us Gambar 3.17 menampilkan gambaran menu contact us.
Home About Tutorial Example Contact
Title Title
Gambar
Title
Animasi
