Pembuatan Halaman Pembuatan Halaman Menu Utama

commit to user 24

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 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 menggunakan motion tween, dari kiri ke kanan ataupun sebaliknya. Untuk mempercantik tampilan, maka pembuatan elemen sebelumnya dibuat menggunakan Adobe Photoshop. Gambar 4.1 Pembuatan Halaman Intro Awal Untuk mempercantik transisi ke menu utama, ditambahkan animasi fade out pada tulisan tersebut. Pada akhir frame animasi tulisan ditambahkan 46 frame lagi. Di akhir frame tambahan tersebut, ditambahkan color properties di bagian atas. Kemudian memberikan isi Alpha dengan kapasitas 0. commit to user 25 Setelah itu, animasi akan menuju ke bagian movie clip dimana movie clip tersebut didalamnya memuat beberapa animasi – animasi elemen, judul, dan juga tombol enter untuk masuk ke dalam halaman menu utama. Pada halaman ini juga di iringi dengan sound yang lembut dan dilengkapi dengan tombol exit di sebelah kanan atas yang berfungsi untuk keluar dari aplikasi. Gambar 4.2 Pembuatan Halaman Intro Akhir Agar tombol enter dapat berinteraksi ke halaman menu utama maka perlu diberi actionscript pada tombol tersebut. Berikut adalah actionscript untuk tombol enter : on release { loadMovieNummenu.swf, 0; } Kemudian pada tombol exit juga diberikan actionscript , dimana ketika tombol exit ditekan maka akan secara langsung keluar dari aplikasi. Berikut actionscript untuk tombol exit : onrelease{ fscommandquit; } commit to user 26

2. Pembuatan Halaman Menu Utama

Halaman menu utama ini terdapat tombol-tombol utama dari aplikasi ini, yaitu tombol BAB 1, BAB 2, BAB 3, BAB 4, BAB 5, dan juga BAB 6 yang berinteraksi pada halaman isi. Pada halaman ini terdapat animasi logo lensa yang muncul dari kecil kemudian membesar. Pembuatannya menggunakan motion tween dan menambahkan rotate CW pada panel properties sebanyak 1 kali. Setelah itu akan muncul animasi dari garis menu dari belakang logo. Animasi dibuat menggunakan elemen garis yang sebelumnya dibuat menggunakan Adobe Photoshop CS3 dan dibuat animasi menggunakan motion tween. Kemudian tombol menu utama muncul berurutan tepat di atas garis menu. Tombol menu juga dibuat dengan menggunakan motion tween dengan sedikit tambahan fade in. Fade in dibuat dengan menggunakan tools alpha. Di frame awal, tombol dibuat transparent dengan memberikan nilai alpha 0 dan di akhir frame tombol dikembalikan dengan memberikan nilai alpha 100. Tombol menu utama ada 6 buah, sesuai dengan halaman isi yang terdiri dari 5 halaman materi dan 1 halaman kuisioner. Tombol menu utama inilah yang akan berinteraksi dengan halaman isi. Untuk dapat berinteraksi dengan halaman isi, maka perlu di beri actionscript sesuai dengan halaman yang dituju. Berikut ini adalah actionscriptnya : on release { loadMovieNumbab1.swf, 0; } Actionscript diatas untuk menghubungkan dengan halaman materi BAB 1. Dan untuk menghubungkan dengan materi BAB lain, pada tengah script loadMovieNumbab1.swf, 0; tinggal mengubah bab1.swf sesuai halaman BAB yang dituju. Sebagai contoh untuk menghubungkan dengan halaman kuisioner di BAB 6 maka berikut hasil actionscriptnya : on release { loadMovieNumbab6.swf, 0; commit to user 27 } Selain tombol menu, dibagian kanan atas terdapat juga tombol exit yang berfungsi untuk keluar dari menutup atau keluar dari aplikasi. Sama halnya dengan halaman intro, tombol ini juga menggunakan actionscript untuk dapat berinteraksi keluar dari aplikasi. Gambar 4.3 Pembuatan Halaman Menu

3. Pembuatan Halaman Materi