Halaman Intro

BAB IV IMPLEMENTASI DAN ANALISA…

1. Halaman Intro

1. Halaman Intro 1

Ini adalah tampilan awal dari aplikasi ini. Di halaman ini terdapat logo yang berada tepat di tengah. Logo ini bertuliskan nama pembuat aplikasi ini.

Gambar 3.2 Desain Halaman Intro 1

2. Halaman Intro 2

Dihalaman ini logo tepat berada di tengah, dimana logo ini merupakan gabungan dari beberapa elemen yang membentuk menjadi sebuah logo dan judul yang menarik. Di bawah logo terdapat tombol enter yang menghubungkan dengan halaman menu utama.

commit to user

19

3. Halaman Menu Utama

Pada halaman ini terdapat judul dan juga tombol exit di sebelah kanan atas yang berguna untuk keluar dari aplikasi. Di halaman ini juga terdapat 4 tombol chapter yang menghubungkan dengan halaman – halaman isi.

Gambar 3.4 Desain Halaman Menu Utama

4. Halaman Isi

Halaman isi mempunyai 4 halaman yang setiap halaman mempunyai layout yang sama. Terdapat judul dan chapter yang berguna untuk mengetahui dimana pengunjung berada. Di setiap halaman isi terdapat beberapa tombol isi atau sub content yang mempunyai isi yang berbeda–beda.

Dibawah tombol isi terdapat tombol home untuk kembali ke halaman menu dan tombol exit untuk keluar dari aplikasi.

commit to user

20

commit to user

21

BAB IV

IMPLEMENTASI DAN ANALISA

4.1 MembuatDraftAplikasi

Langkah awal yang dilakukan sebelum pembuatan aplikasi ini adalah membuat ide cerita atau story board, yaitu istilah untuk kertas berisi ide cerita, susunan gambar serta detail dari setiap karakter. Ide cerita yang digunakan penulis dalam aplikasi ini adalah background bergambar tekstur kayu yang gelap dan sederhana, dengan logo dengan tulisan Lucid Dream yang berkesan misterius menggambarkan Lucid Dream sendiri yang hingga saat ini bersifat misterius karena tidak semua orang mengetahuinya.

4.2 Pembuatan Aplikasi Multimedia

Untuk pembuatan aplikasi ini menggunakan Adobe Flash CS3 dengan memasukkan semua elemen yang dibutuhkan seperti gambar, teks, suara, dan animasi. Proses pembuatan dan editing obyek gambar menggunakan Adobe

PhotoshopCS3.

Pembuatan animasi pada aplikasi ini bertujuan untuk mempercantik tampilan aplikasi yang dibuat. Dalam pembuatan aplikasi multimedia interaktif ini, penulis menggunakan teknik variabel pada tiap frame agar penggabungan antar halaman lebih mudah.

Materi - materi atau isi yang ada dalam CD interaktif diambil dari studi pustaka.

1. Pembuatan Halaman Intro

Halaman intro dalam aplikasi ini sangat sederhana, hanya menampilkan animasi gerak yang hasil akhirnya membentuk sebuah tulisan nama dari pembuat aplikasi ini . Langkah pertama adalah melakukan import elemen - elemen yang telah dibuat sebelumnya pada

commit to user

22

pembuatan draft aplikasi dengan memilih File – Import To Library. Setelah itu meletakkan segala macam elemen sesuai dengan draft rancangan dan kemudian menganimasikannya. Animasi pada halaman intro ini tidak terlalu rumit, yaitu membuat tulisan dengan Static Text, kemudian melakukan klik kanan – Break Apart untuk memecah tulisan menjadi per huruf dan menjadikannya objek baru.

Setelah itu, lakukan distribute to layer pada tiap huruf dan tambahkan animasi pada tiap elemen dengan meggunakan motion tween.

Gambar 4.1 Pembuatan Halaman IntroPertama

Untuk mempercantik transisi ke halamanintrokedua, ditambahkan animasifade out dengan memberikanAlpha Color pada tiap elemen huruf dengan kapasitas 0%.

Setelah itu, animasi akan menuju ke bagian movie clip dimana movie clip tersebut didalamnya memuat animasi judul, dan juga tombol enteruntuk masuk ke dalam halaman menu utama. Pada halaman ini juga di iringi dengan sound yang lembut dan dilengkapi dengan tombol exit di sebelah kanan bawah yang berfungsi untuk keluar dari aplikasi.

commit to user

23

Gambar 4.2 Pembuatan HalamanIntroKedua

Agar tombol enter dapat berinteraksi ke halaman menu utama maka perlu diberi actionscript pada tombol tersebut. Berikut adalah actionscriptuntuk tombolenter:

on (release) {

loadMovieNum("main.swf", 0); }

Kemudian pada tombol exit juga diberikan actionscript , dimana ketika tombol exit ditekan maka akan secara langsung keluar dari aplikasi. Berikut actionscriptuntuk tombolexit:

on(release){ fscommand("quit"); }

2. Pembuatan Halaman Menu Utama

Halaman menu utama ini terdapat tombol -tombol utama dari aplikasi ini, yaitu tombol CHAPTER 1, CHAPTER 2, CHAPTER 3 dan CHAPTER 4 yang berinteraksi pada halaman isi. Tombol - tombol ini dibuat dengan sebuah animasi menggunakan variabel pada tiap tombol dan ditambahkan actionscript pada frame diatas layer tombol - tombol

commit to user

24

tersebut. Hal ini dilakukan untuk memudahkan kita saat mengganti nama -nama tiap tombol tersebut dengan rincian sebagai berikut:

b1.txt = "CHAPTER 1"; b2.txt = "CHAPTER 2"; b3.txt = "CHAPTER 3"; b4.txt = "CHAPTER 4";

b1.desc = "Dasar - Dasar Lucid Dream"; b2.desc = "Memulai Lucid Dream"; b3.desc = "Teknik Induksi Lucid Dream"; b4.desc = "Stimulus Lucid Dream";

Dan script dibawah berfungsi untuk interaksi tombol menu dan halaman isi dimana tiap tombol mem punyai halaman tujuan yang berbeda.

b1.p = "p1"; b2.p = "p2"; b3.p = "p3"; b4.p = "p4";

Selain itu tiap tombol menu diberikan actionscript agar dapat berhubungan dengan script sebelumnya. Berikut adalah actionscript yang digunakan: on (rollOver, dragOver) { gotoAndPlay("go"); } on (rollOut, dragOut) { gotoAndPlay("back"); } on (release) { _root.page = p; _root.play();}

commit to user

25

Gambar 4.3 Pembuatan Halaman Menu Utama

3. Pembuatan Halaman Sub Menu

Halaman sub menu merupakan halaman setelah salah satu tombol dari menu utama di release. Halaman ini berisi judul tiap chapter, deskripsi teks dan tombol - tombol untuk menuju ke halaman isi. Pada bagian deskripsi teks diberikan animasi pada background teksnya. Animasi tersebut dibuat dengan menggunakan teknik animasi per -frame. Gambar background teks dibuat sedemikian rupa dan berbeda tiap frame sehingga terbentuk suatu animasi yang menarik.

Di saat yang bersamaan akan muncul tombol – tombol baru untuk menuju halaman isi. Tiap tombolnya diberikan animasi untuk mendeskripsikan tombol saat kursor mengarah ke tombol. Teknik dan actionscript yang digunakan tiap tombolnya pun sama dengan yang digunakan pada halaman menu . Tombol – tombol ini dibuat dengan menggunakan Adobe Photoshop CS3 dan di export ke library, setelah itu animasi dibuat dengan menggunakan motion tween dengan tambahanfade in, yaitu dengan membuat transparent pada awal frame dan mengembalikan tingkat transparent di akhir framedengantool Alpha.

commit to user

26

Gambar 4.4 Pembuatan halaman Sub Menu

Selain itu dibawah tombol sub menu juga dilengkapi dengan tombol home dan tombol exit. Tombol home berfungsi untuk kembali ke halaman menu sedangkan tombol exit berfungsi untuk menutup aplikasi. Kedua tombol tersebut juga menggunakan actionscript untuk dapat berinteraksi. Untuk tombol exit,actionscriptyang digunakan sama dengan pada halaman menu. Sed angkan untuk tombol home, berikut actionscriptnya:

on (release) {

loadMovieNum("main.swf", 0); }

4. Pembuatan Halaman Isi

Halaman ini adalah kelanjutan dari halaman sub menu yang berisi penjelasan tentang hal - hal yang berkaitan dengan lucid dream. Penjelasan dilakukan dengan lengkap dan jelas dan disertai animasi gambar padaheader.Halaman ini juga disertai tombol backuntuk kembali ke menu sebelumnya. Pemberian actionscript pada tombol ini juga terdapat perbedaan yaitu penggunaan fungsi previous frame.

commit to user

27 on (release) { _root.page = p; _root.prevFrame(); }

Sedangkan animasi untuk teks sama dengan halaman sub menu. Berikut adalah tampilan pembuatan halaman isi secara garis besar.

Gambar 4.5 Pembuatan halaman Isi

5. Pembuatan Halaman Kuesioner

Halaman ini termasuk dalam halaman isi, tepatnya berada di Chapter 4. Layout dan juga animasi hampir sama dengan halaman materi yang telah dijelaskan diatas begitu juga dengan cara pembuatannya. Perbedaan berada di isi. Selain itu isi dari halaman kuesioner ini berupa pertanyaan - pertanyaan berbentuk teks dan tombol yang susunannya acak atau random. Selain pertanyaan - pertanyaan, di akhir kuis ini juga terdapat nilai atau score yang didapat ketika menjawab pertanyaan -pertanyaan.

commit to user

28

Gambar 4.6 Pembuatan halaman Kuesioner

Konsep dari pembuatan halaman ini adalah menyediakan 20 pertanyaan, yang nantinya hanya diambil 10 pertanyaan dimana pengambilan pertanyaan secara acak. Pembuatan halaman kuisioner melibatkan 60% actionscript, karena dalam pembuatan halaman ini diperlukan array dan variable penampung dimana dalam Adobe Flash panambahan array dan variable dapat dilakukan dengan menggunakan actionscript.

Pada awal pembuatan adalah menyiapkan scene baru yang kemudian ditambahkan elemen - elemen judul dan tombol untuk memulai kuisioner. Kemudian mempersiapkan array yang nantinya di gunakan untuk membuat soal acak. Pembuatanarray diAdobe Flashmenggunakan actionscriptdan terletak di awalframe. Berikut adalahactionscriptnya :

function acak_soal() { i = 0; for (;;) { if (i >= 10) { return;

commit to user

29 } belum = 0; while (belum == 0) { item = random(20); if (sudah[item] == 0) { belum = 1; sudah[item] = 1; hasil[i] = bank_soal[item] + 1; } } ++i; } } function soal() { ++nm; if (nm < hasil.length) { gotoAndPlay(hasil[nm]); return; } gotoAndPlay(22); } stop(); var benar = 0;

var bank_soal = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);

var sudah = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);

var hasil = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0); acak_soal();

var nm = -1;

Untuk menjalankan actionscript di atas, diperlukan sebuah tombol yang memanggil actionscript tersebut. Maka tombol dibuat, dan diposisikan tepat di tengah. Agar tombol dapat memanggail actionscript diatas, tombol juga di beri actionscript. Berikut adalah actionscript untuk tombol mulai :

on (release) {

commit to user

30

soal(); }

Karena array sudah dibuat, dan pemanggil array tersebut juga sudah dibuat, maka diperlukan wadah untuk menempatkan array. Wadah dibuat menggunakan frame yang berisikan pertanyaan – pertanyaan. Pertanyaan dan jawaban dibuat dengan menggunakan Static Text. Kemudian untuk dapat berinteraksi dibuatlah sebuah tombol yang menutup jawaban agar bisa berinteraksi.

Gambar 4.7 PembuatanFrameUntuk Soal

Tombol yang menutup jawaban juga diberi actionscriptagar dapat berinteraksi dengan actionscriptdi awalframe, dimana jika jawaban benar maka nilai bertambah 1 dan jika salah nilai ditambah 0. Berikut actionscriptuntuk salah satu tombol jawaban :

on (release) { jawaban2 = "benar"; jawaban3 = ""; jawaban = "b"; btn_next.enabled = true; btn_next._alpha = 100; }

commit to user

31

Untuk mengetahui benar atau salah sebuah jawaban, di setiap frame pertanyaan ditambahakan actionscript sebagai kunci jawaban. Berikutactionscriptnya:

stop(); kunci = "b";

Kemudian untuk menampung jawaban sementara, diperlukan sebuah wadah. Disini dibuat 2 buah dynamic text yang nantinya berguna sebagai penampung jawaban sementara dan diberi variable jawaban. Sedangkan untuk menampung benar atau salahnya diberi variable jawaban3. Berikut tampilannya :

Gambar 4.8 TampilanDynamic TextSebagaiVariablePenampung

Di akhir frame akan muncul tampilan score atau nilai. Untuk mendapatkan nilai dari score ini, dibuat 3 dynamic text sebagai penampung dari hasil akhir. Dynamic text pertama diberi instance name bnr untuk menampilkan berapa nilai dari jawaban yang benar , dynamic text yang kedua diberi instance name untuk menampilkan berapa nilai dari jawaban yang salah, dan dynamic text ketiga diberi variable score untuk menampilkan nilai akhir dari semua pertanyaan yang telah di jawab.

commit to user

32

Gambar 4.8 Tampilan Dynamic TextUntuk Menampilkan Nilai

Agar dapat menampilkan nilai , perlu ditambahkan actionscript sebagai pemanggil variable dan perhitungan akhir dari benar dan salah. Actionscript diletakkan di dalam frame dimana 3 dynamic text di atas ditempatkan. Berikutactionscriptnya:

stop();

score = benar * 10; bnr.text = benar; slh.text = 10 - benar; benar = 0;

bank_soal = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);

sudah = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);

hasil = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0);

Selain itu, dibawah score ditambahkan juga sebuah tombol mulai lagi yang berfungsi untuk memulai kembali kuisioner dari awal dan pertanyaan akan tersusun secara acak kembali. Sebagai pemanggilnya, ditambahkan actionscript dalam tombol tersebut. Berikut adalah actionscriptnya:

commit to user

33 on (release) { _root.jumlahFrame = 11; _root.jumpFrame = []; gotoAndStop(1); }

6. MelakukanTestingatau Pengujian

Proses testing dilakukan pada Adobe Flash CS3 dengan menekan tombol kombinasi Ctrl+Enter untuk menghasilkan aplikasi dalam format *.swf.

Gambar 4.10 Tampilan Proses Testing 7. ProsesFinishing

Setelah semua tahap pembuatan aplikasi ini selesai, tahap selanjutnya adalah melakukan test moviedengan tujuan untuk mengetahui apakah aplikasi dapat berjalan dengan baik atau tidak (terjadi error). Apabila masih terdapat kesalahan atau error maka harus dilakukan perbaikan hingga aplikasi berjalan dengan baik. Test movie ini akan menghasilkan file dengan ekstensi .swf.

Setelah selesai dikerjakan dan telah disimpan dalam file flash maka langkah selanjutnya adalah membuat file execution (.exe) agar aplikasi ini

commit to user

34

dapat dijalankan pada semua komputer tanpa terlebih dulu menginstall flash player.

Karena penulis membuat aplikasi ini dengan beberapa file, maka yang akan di publikasikan ad alah file yang pertama, yaitu halaman intro, sedangkan file yang lainnya merupakan pendukung. Cara Publikasi file yaitu pilih perintah menu File >Publish Settings, selanjutnya akan ditampilkan kotak dialog Publish Settings seperti tampak pada gambar dibawah ini :

Gambar 4.11 Tampilan Kotak DialogPublish Settings

4.3 Desain Halaman Aplikasi 1. Halaman Intro

Pada halaman ini memiliki background dengan tekstur kayu yang gelap. Pada permulaan terdapat animasi kemunculan huruf–huruf dengan efek fade-in dari sisi kiri atas. Lalu setelah lengkap tulisan tersebut menghilang. Setelah itu animasi judul dari aplikasi dan satu tombol di bawah judul, yaitu tombol mulai atauenter.

Tombol ini berfungsi untuk masuk langsung ke halaman menu. Selain itu di kanan bawah terdapat tombol exit yang berfungsi untuk keluar dari aplikasi secara langsung.

commit to user

35

Gambar 4.12 HalamanIntro1

commit to user