PERANCANGAN SISTEM
3.6 Desain Layout Menu dan Daftar Hadits Arba’in di Adobe Flash CS
Untuk mulai merancang suatu animasi ini maka harus jalankan software atau aplikasi Adobe Flash CS3 lalu kemudian pilih new flash document, lalu akan muncul lembar kerja dari Adobe Flash CS3. Dalam bagian ini terdapat 5 buah layer seperti layer background, sound pengantar, botton menu. tombol botton next, tombol botton next Berikut tahapannya.
Adapun hal-hal yang harus di persiapakan dalam permbuatan desain menu dan daftar isi hadits arba’in padaaplikasi hadits arba’in adalah :
1. Membuat dokumen baru dengan tipe “Flash File (ActionScript 2.0) klik Ok. Kemudian penulis edit ukuranya menjadi panjangnya 650 px dan lebarnya 1100 px atau dengan tombol shortkey (ctrl+N).
2. Untuk background penulis, mengambil suatu wallpaper yang sudah tersedia dengan cara klik file>import>import to stage dan pilih wallpaper yang telah tersedia. Setelah gambar masuk ke library, pilih gambar tersebut dan tarik gambar tersebut sampai ke layer background maka otomatis akan muncul di latar belakang. Atur ukuran gambar sesuai dengan ukuran stage hingga menutupi background. Tekan Ctrl + Alt 9 dan Ctrl + Alt 7 untuk mengatur
posisi gambar tepat berada pada stage baik secara vertical,horizontal maupun center. Kemudian penulis importflie gambar desain layout menu.Jpeg
3. Setelah itu penulis menginsert text sebanyak 25 text yang berformat ”Hadits 1 hingga Hadits 2” dan letakkan sesuai posisi sebelah kanan yang sudah disediakan oleh gambar background.
4. Kemudian kita klik kanan kemudian pilih convert to symbol->Pilih Botton- >Klik Ok. Setelah itu kita double klik pada simbol Klik Mulai tersebut setelah itu kita setting Overnya dengan cara klik kiri->pilih insert keyframe kemudian penulis tarik file audio yang terdapat di library ke halaman kerja, agar apabila botton di Klik akan muncul suaranya dan akan menglink ke halaman yang ingin kita lihat.
format actionscript :
on (release) {
loadMovieNum("Hadist 1.swf", 0); }
Dan seterusnya hingga hadits 25.
5. Kemudian insert gambar audio, penulis mengambil suatu logo yang sudah tersedia dengan cara klik file>import>import to library dan pilih logo yang telah tersedia. Setelah logo masuk ke library, pilih logo tersebut dan tarik logo tersebut sampai ke layer background maka otomatis akan muncul di latar belakang. Kemudian klik kanan pada logo audio tersebut kemudian pilih convert to symbol->Pilih Botton->Klik Ok. Setelah itu kita double klik pada simbol Klik Mulai tersebut setelah itu kita setting Overnya dengan cara klik kiri->pilih insert keyframe kemudian penulis tarik file audio yang terdapat di library ke halaman kerja, agar apabila botton di klik akan muncul suaranya sesuai hadits ke berapa pada layer tersebut.
6. Kemudian insert gambar next, penulis mengambil suatu logo yang sudah tersedia dengan cara klik file>import>import to library dan pilih logo yang telah tersedia. Setelah logo masuk ke library, pilih logo tersebut dan tarik logo tersebut sampai ke layer yang telah disesuaikanmaka otomatis akan muncul di halaman kerja. Kemudian klik kanan pada logo next tersebut kemudian pilih convert to symbol->Pilih Botton->Klik Ok. Setelah itu kita double klik pada
simbol Klik Mulai tersebut setelah itu kita setting Overnya dengan cara klik kiri->pilih insert keyframe kemudian penulis tarik file audio yang terdapat di library ke halaman kerja, agar apabila botton di klik akan muncul suaranya dan akan menglink ke hadits arba’in selanjutnya.
format actionscript :
on (release) {
loadMovieNum("Hadist 1.swf", 0); }
dan akan menglink ke hadits arba’in selanjutnya.
7. Kemudian insert gambar back, penulis mengambil suatu logo yang sudah tersedia dengan cara klik file>import>import to library dan pilih logo yang telah tersedia. Setelah logo masuk ke library, pilih logo tersebut dan tarik logo tersebut sampai ke layer yang telah disesuaikanmaka otomatis akan muncul di halaman kerja. Kemudian klik kanan pada logo back tersebut kemudian pilih convert to symbol->Pilih Botton->Klik Ok. Setelah itu kita double klik pada simbol Klik Mulai tersebut setelah itu kita setting Overnya dengan cara klik kiri->pilih insert keyframe kemudian penulis tarik file audio yang terdapat di library ke halaman kerja, agar apabila botton di klik akan muncul suaranya dan akan menglink ke hadits arba’in sebelumnya.
format actionscript :
on (release) {
loadMovieNum("Hadist 25.swf", 0); }
dan akan menglink ke hadits arba’in sebelumnya.
8. Kemudian membuat botton menu dengan proses klik pencil tool->pilih oval tool kemudian kita buat dihalaman kerja sesuai ukuran yang diinginkan, kemudian insert text dengan format ”MENU” dan proses klik text tool kita ketik dihalaman kerja. Kemudian klik kanan pada logo menu tersebut kemudian pilih convert to symbol->Pilih Botton->Klik Ok. Setelah itu kita double klik pada simbol Klik Mulai tersebut setelah itu kita setting Overnya dengan cara klik kiri->pilih insert keyframe kemudian penulis tarik file audio
yang terdapat di library ke halaman kerja, agar apabila botton di klik akan muncul suaranya dan akan menglink ke halaman awal.
format actionscript :
on (release) {
loadMovieNum("Halaman Awal.swf", 0); }
9. Akhirnya selesai disesain sesuia keiginan penulis kemudian penulis save dengan format “Halaman Awal.swf”. Sehingga muncullah sesuai gambar dibawah ini :
Gambar 3.10 Desain Layout Menu dan Daftar Hadits Arba’in.swf
Selain tombol pilihan daftar hadits arba’in ,didalam menu juga terdapat beberapa tombol navigasi tambahan, yaitu tombol kembali ke awal “Halaman Awal.swf” , tombol sound yang terdapat pada hadits arba’in ini, tombol ke halaman berikutnya “Hadits 2.swf” dan tombol ke halaman sebelumnya “Hadits 1.swf”.