7203030032
96
!! "#$ %%
Transcript of 7203030032
PROYEK AKHIR
PEMBUATAN WEB TUTORIAL PENGENALAN BAHASA JAWAUNTUK ANAK SEKOLAH DASAR
(DESAIN GLOBAL DAN FLASH ACTIONSCRIPT)
Iva Nur DianaNRP.7203.030.032
Dosen Pembimbing:Tri Budi Santoso, MT
NIP. 132 128 464
Ir. Nonot Harsono, MTNIP. 131 964 535
JURUSAN TELEKOMUNIKASIPOLITEKNIK ELEKTRONIKA NEGERI SURABAYA
SURABAYA 2006
ii
PEMBUATAN WEB TUTORIAL PENGENALAN BAHASA JAWA UNTUK ANAK SEKOLAH DASAR(DESAIN GLOBAL DAN FLASH ACTIONSCRIPT)
Oleh:
IVA NUR DIANA7203.030.032
Proyek Akhir ini Diajukan Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Ahli Madya (A.Md.)
diPoliteknik Elektronika Negeri Surabaya
Institut Teknologi Sepuluh Nopember Surabaya
Disetujui oleh
Tim Penguji Proyek Akhir: Dosen Pembimbing:
1. Drs. Miftahul Huda, MT 1. Tri Budi Santoso, MTNIP. 132 055 257 NIP. 132 128 464
2. Sritrusta Sukaridhoto, ST 2. Ir. Nonot Harsono, MT NIP. 132 300 372 NIP. 131 964 535
3. Ari Wijayanti, ST NIP. 132 303 877
Mengetahui:Ketua Jurusan Telekomunikasi
Drs. Miftahul Huda, MTNIP. 132 055 257
iii
ABSTRAK
Di propinsi Jawa Tengah dan Jawa Timur, pelajaran Bahasa Daerah, dalam hal ini Bahasa Jawa, pada umumnya bukan sebuah mata pelajaran favorit bagi para murid di sekolah. Oleh karena itu, pada Proyek Akhir ini kami mencoba membuat sebuah web tutorial untuk mengenalkan perbendaharaan kata dalam bahasa Jawa untuk anak Sekolah Dasar yang diambil dari buku ”Pepak Basa Jawa” yang sesuai dengan kurikulum SD.Diharapkan web tutorial ini dapat menarik minat anak untuk mempelajari Bahasa Jawa.
Dalam Proyek Akhir ini dibuat tampilan web yang dilengkapi dengan animasi untuk membuat web ini menjadi lebih menarik, sehingga anak menjadi berminat mempelajarinya. Animasi-animasi ini, baik berupa gambar maupun text dibuat dengan menggunakan perangkat lunak Macromedia Flash MX,dan dalam sistem navigasinya dibuat sederhana agar mudah dalam pengaksesannya. Pada Proyek Akhir ini disediakan menu yang berisi kategori-kategori perbendaharaan kata agar lebih terperinci, contohnya seperti Nama Hewan & Anaknya (Jenenge Kewan & Anake), Kata Krama Inggil (Tembung Krama Inggil), Peribahasa (Paribasan-Bebasan-Saloka), dan masih banyak lagi.
Untuk mengetahui seberapa jauh si anak (atau pengguna) mengenal kata dalam Bahasa Jawa dan mengerti letak penggunaannya, dalam Proyek ini disediakan juga sebuah latihan atau kuis dengan pilihan ganda yang menggunakan bahasa pemrograman PHP. Di akhir kuis ini diberikan nilai dari soal-soal yang sudah terjawab dan diberikan juga jawaban yang benarsebagai review.
Kata Kunci : Bahasa Jawa, Macromedia Flash, web tutorial.
iv
ABSTRACT
As we know, in Middle and East Java, a Javanese language subject is the least favourite subject for the students at school. That is why we are making a web based tutorial to introduce the vocabulary in Javanese language to Elementary School studentswhich is taken from the “Pepak Basa Jawa” book, which is suitable for the local curriculum. With this tutorial hopefully could bring students interest to higher level in studying Javanese language.
For this Final Project, the web layout is made with animations to make it more interesting, hopefully the students will have more interest to study it. This animations, in the shape of moving pictures or text, are made using Macromedia Flash MX software. And a simple navigation system is made to make it easier to access. That is why we provide a menu in this Project which include the vocabulary categories, such as Names of Animal and Their Babies (Jenenge Kewan & Anake), Krama Inggil words (Tembung Krama Inggil), Proverb (Paribasan-Bebasan-Saloka), and much more.
To know how far the student recognize the words in Javanese language and also know how to use it in a sentence, in this Project we also provide a quiz with multiple choice which is made using PHP programming language. And at the end of the quiz, a score and the answers are given as a review.
Keywords : Javanese language, Macromedia Flash, tutorial website.
v
KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Allah SWT yang telah melimpahkan rahmat serta hidayah-NYA, penulis dapat menyelesaikan penyususunan dan pembuatan laporan dari Tugas Akhir dengan judul:
PEMBUATAN WEB TUTORIAL PENGENALAN BAHASA JAWA UNTUK ANAK SEKOLAH DASAR(DESAIN GLOBAL DAN FLASH ACTIONSCRIPT)
Tugas Akhir ini merupakan salah satu kegiatan yang berkaitan dengan kurikulum perkuliahan dengan beban sebesar duabelas SKS (12 jam mata kuliah), yang harus dipenuhi sebagai persyaratan guna menyelesaikan studi di Politeknik Elektronika Negeri Surabaya Jurusan Teknik Telekomunikasi.
Untuk memahami penyusunan dari Tugas Akhir ini hendaknya pembaca terlebih dahulu mengerti latar belakang dan batasan masalah yang dibahas agar mengetahui hal-hal apa saja yang akan dibahas dalam buku ini.
Dalam menyelesaikan Tugas Akhir ini, penulis selesaikan berdasarkan dari teori-teori yang telah penulis peroleh dalam perkuliahan, membaca literatur, dan bimbingan dari dosen pembimbing serta pihak-pihak yang telah banyak memberikan semangat dan bantuan.
Penulis menyadari sepenuhnya bahwa masih banyak kekurangan yang dimiliki sehingga menyebabkan kurang sempurnanya laporan Tugas Akhir ini. Untuk itulah penulis minta maaf serta mengharapkan saran beserta kritik yang membangun demi kesempurnaan laporan dari Tugas Akhir ini. Semoga buku laporan Tugas Akhir yang penulis buat ini dapat memberikan manfaat bagi pengembangan ilmu pengetahuan dan bagi semua pihak pada umumnya serta bagi penulis sendiri pada khususnya.
Surabaya, Juli 2006
Penulis
vi
UCAPAN TERIMA KASIH
Alhamdulillah kami panjatkan kehadirat Alllah SWT, atas limpahan rahmat, berkah dan hidayah-Nya, sehingga penulis dapat menyelesaikan Proyek Akhir ini tepat pada waktunya, tentu saja dengan segala kelebihan dan kekurangannya. Penulis sadar dalam terwujudnya Proyek Akhir ini tak lepas dari bantuan, bimbingan dan dukungan dari berbagai pihak.
Oleh karena itu, dengan segala kerendahan hati, penulis mengucapkan terima kasih kepada :
1. Teruntuk Ayah dan Ibu tercinta yang selalu berdo’a dan berdo’atanpa henti demi kesuksesan penulis, serta perhatian yang begitu berharga, dengan segala kasih sayang yang begitu berarti sehingga penulis dapat menyelesaikan Proyek Akhir tepat pada saatnya.
2. AdikQ Vina, ”Thanx yach uda di-ketikkan ampe harus begadang sgala (this is for the first time lho..), makasih juga kamu uda jadi tempatku curhat (ampe pusing ndiri ya..), ’n akhirnya...Congretdeh for STATISTIK-ITSnya.... CHAYOOOOO!!!”
3. AdikQ Fika, ”Makasih yee buat spirit ma perhatiannya, berguna banget apalagi waktu aku sedang down (jadi tersandungneh,hehehe..). Aku do’ain smoga tahun ini kamu juga bisa lulus dengan NEM yang OKE (Amin..), ’n yang paling penting lulus SPMBnya (Amiiiiiin...!!!). GUTE LUCK!!!!”
4. Bapak Dr.Ir. Titon Dutono selaku Direktur PENS-ITS.5. Bapak Drs. Miftahul Huda, MT selaku Kepala Jurusan Teknik
Telekomunikasi.6. Bapak Tri Budi Santoso, ST, MT selaku Dosen Pembimbing I
yang telah banyak meluangkan waktu guna membantu terselesaikannya Proyek Akhir ini.
7. Bapak Ir. Nonot Harsono, MT selaku Dosen Pembimbing II yang telah banyak memberikan masukan dalam penyelesaian Proyek Akhir penulis.
8. Tim Dosen Penguji Proyek Akhir yang telah banyak memberikan saran dan kritik yang bersifat membangun guna penyempurnaan Proyek Akhir.
9. Seluruh Bapak dan Ibu Dosen yang telah membimbing penulis selama tiga tahun dalam mengikuti perkuliahan di PENS-ITS.
10. Mas Viphi yang banyak memberikan masukan sewaktu penulis kebingungan mencari ide selanjutnya.
vii
11. Mas Catur ”pakdhe” yang telah berbaik hati dalam menyumbangkan suara serta banyak menyita waktu guna membantu penulis.
12. Teman-teman 3TA ”COMTA” yang banyak sekali memberikan support dan do’anya. ”Thanks for everything guys.......!!!!!!”
13. Sahabat-sahabatku, ”Jesika”, ”Breky”, ”Sitong”, ”Tsune”, ”Nenek””, ”Twiki”, ma ”Budhe”, ”Thanx yach buat spiritnya...”Spesialnya buat Jesi ma Breky ”Makasih yach uda mau meluangkan waktu mendengarkan semua keluhanku terutama dihari-hari terakhir deadline sidang, (hiks, hiks, hiks...)”. Untuk Breky ”Makasih yach malam-malam terakhir kamu uda nelponin aku cuma buat kasih support. WISH U ALL THEBEST!!!
14. Sahabat-sahabatku di SMA yang selalu memberikan spirit serta do’a, ”I just want to say that I MISS U....”
15. Komputer dan si pemiliknya yang menghuni Gedung D4 lt.1 dan lt.3 (siapapun itu!!!), ”Sori ya uda ngerepotin kalian dan makasih buanyak uda minjemin komp-nya”
16. Komputer tersayang milik penulis, yang akhir-akhir ini selalu menjadi objek penderita
17. Rumah baru yang penulis tempati, Jl. Kalijudan Taruna II no.66C, ”You’re My Sweetest Place in the world...!!!!!”
18. Keluarga besar yang selalu memberikan support, khususnya kepada mbah Ti yang selalu mendo’akan penulis setiap saat.
19. Lala, yang selalu mendo’akan penulis dengan tulus, ”Te, makasih yach uda ngedo’ain mbak Pip terus menerus...”
20. Ponakan-ponakanku tersayang, Willy, Audry, Jamie, Rian, Kayla, etc...”Keep in touch with me..”
21. Of courrse...Partner PA-ku, Laras ”Cindyl” , ”Thanx banget udawork together with me, tempat berbagi suka dan duka, teman shopping paling asyik, ’n suoriii dech kalau aku tiba-tiba jadi naik pitam (maap yach..). However you are my trully friend that I’ve meet...ciyeeeee.....!!!!!”
22. The last but not least, for My BeLoved, who’s still be Misteri Illahi...”I just wanna be with you untill the end of the time...AMIN.”
23. Semua pihak yang tidak mungkin disebutkan satu persatu ”Terima kasih untuk semuanya...”
viii
DAFTAR ISI
HALAMAN JUDUL ......................................................................... i
LEMBAR PENGESAHAN .............................................................. ii
ABSTRAK ...................................................................................... iii
ABSTRACT .................................................................................... iv
KATA PENGANTAR ...................................................................... v
UCAPAN TERIMA KASIH ............................................................ vi
DAFTAR ISI ................................................................................. viii
DAFTAR GAMBAR ...................................................................... xi
DAFTAR TABEL ........................................................................... xv
BAB 1 PENDAHULUAN .............................................................. 1
1.1 Latar Belakang ............................................................. 1
1.2 Tujuan .......................................................................... 1
1.3 Permasalahan ............................................................... 2
1.4 Batasan Masalah ........................................................... 2
1.5 Metodologi ................................................................... 2
1.6 Sistematika Pembahasan .............................................. 3
BAB 2 TEORI DASAR .................................................................. 5
2.1 Umum ........................................................................... 5
2.2 Macromedia Flash MX ................................................ 5
2.2.1 Istilah-istilah Umum dalam Program Flash ........... 6
2.2.2 Mengenal Timeline dan Frame .............................. 7
2.2.3 Animasi Dalam Flash ............................................. 8
2.2.4 Aplikasi ActionScript di Flash ............................. 10
2.3 Macromedia Fireworks MX ....................................... 13
ix
2.3.1 Mengenal Toolbar ............................................... 13
2.3.2 Mengenal Panel ................................................... 13
2.4 Macromedia Dreamweaver MX ................................. 14
2.4.1 Fasilitas dalam Dreamweaver MX ...................... 14
2.5 PHP ............................................................................ 15
2.5.1 Pengenalan PHP .................................................. 15
2.5.2 Tag dalam PHP .................................................... 15
2.5.3 Variabel dan Tipe Data ........................................ 16
BAB 3 PERENCANAAN SISTEM ............................................. 17
3.1 Desain Global Sistem ................................................. 17
3.2 Perencanaan Layout Menu ......................................... 20
3.3 Perencanaan Kategori ................................................. 23
3.4 Perencanaan Kuis ....................................................... 29
3.5 Proses Keseluruhan Pembuatan Sistem ...................... 29
BAB 4 PEMBUATAN DAN ANALISA SISTEM ...................... 33
4.1 Perencanaan Software yang digunakan....................... 33
4.2 Pengumpulan Data ...................................................... 33
4.2.1 Pengambilan dan Pengolahan Gambar ................. 33
4.2.2 Perekaman Suara .................................................. 37
4.2.3 Pembuatan Menu .................................................. 38
4.2.1.3 Cara Kerja Pageflip V_2.13 ........................... 38
4.2.4 Pembuatan Kategori ............................................. 40
4.2.4.1 Kategori Hewan & Anaknya .......................... 40
4.2.4.1.1 File nim_1.swf s/d nim_6.swf ................. 40
4.2.4.1.2 File Kolam.swf ........................................ 43
4.3 Pengujian Sistem......................................................... 44
4.3.1 Kuisioner Untuk Pengujian Sistem....................... 46
x
BAB 5 PENUTUP ........................................................................ 51
5.1 Kesimpulan ................................................................. 51
5.2 Saran ........................................................................... 51
DAFTAR PUSTAKA ..................................................................... 53
LAMPIRAN .................................................................................... 55
RIWAYAT HIDUP PENULIS ....................................................... 83
xi
DAFTAR GAMBAR
Gambar 2.1 Gambar dari frame ...................................................... 6
Gambar 2.2 Gambar dari keyframe dan blank keyframe ................ 7
Gambar 2.3 Contoh animasi frame ................................................. 8
Gambar 2.4 Tampilan animasi motion tween ................................. 9
Gambar 2.5 Contoh animasi shape tween ....................................... 9
Gambar 2.6 Tampilan saat layer di-masking ................................ 10
Gambar 2.7 Gambar untuk panel action frame ............................. 10
Gambar 2.8 Contoh untuk panel action button .............................. 11
Gambar 3.1 Blok diagram sistem - Hewan, Buah dan Pohon ....... 17
Gambar 3.2 Blok diagram sistem - Jenis Kata .............................. 18
Gambar 3.3 Blok diagram sistem - Sastra, Apa dan
Perumpamaan ............................................................ 19
Gambar 3.4 Blok diagram sistem - Nama Sebutan dan
Kebudayaan Jawa ...................................................... 20
Gambar 3.5 Dynamic page flip – original ..................................... 21
Gambar 3.6 Tampilan halaman terdepan (cover) .......................... 21
Gambar 3.7 Tampilan halaman penunjuk penggunaan ................. 22
Gambar 3.8 Tampilan button – kategori ....................................... 22
Gambar 3.9 Tampilan pilihan kuis ................................................ 23
Gambar 3.10 Tampilan halaman akhir .......................................... 23
Gambar 3.11 Kategori Hewan ...................................................... 24
Gambar 3.12 Kategori Buah ......................................................... 25
Gambar 3.13 Kategori Pohon ....................................................... 25
Gambar 3.14 Kelompok Jenis Kata .............................................. 26
xii
Gambar 3.15 Kelompok Sastra ..................................................... 27
Gambar 3.16 Kelompok Apa?? ..................................................... 28
Gambar 3.17 Kelompok Perumpamaan ........................................ 28
Gambar 3.18 Kelompok Nama Sebutan ........................................ 28
Gambar 3.19 Kelompok Kebudayaan Jawa .................................. 29
Gambar 3.20 Gambaran sistem kerja dari kuis ............................. 29
Gambar 3.21 Proses pembuatan sistem secara global (a) ............. 30
Gambar 3.22 Proses pembuatan sistem secara global (b) ............. 31
Gambar 4.1 Gambar perubahan bentuk bebek ............................... 34
Gambar 4.2 Gambar bebek original .............................................. 34
Gambar 4.3 Tampilan pop-up yang keluar bersamaan .................. 35
Gambar 4.4 Movie clip perubahan bentuk bebek .......................... 36
Gambar 4.5 Tampilan button bebek............................................... 36
Gambar 4.6 Movie clip perpindahan bebek ................................... 36
Gambar 4.7 Tcl Wavesurfer 1.7.6................................................... 37
Gambar 4.8 Sinyal suara yang akan dipotong................................ 37
Gambar 4.9 Sinyal suara yang sudah dipotong.............................. 37
Gambar 4.10 Menu; Pageflip yang sudah di edit ........................... 38
Gambar 4.11 Timeline dari pageflip v2.13 .................................... 38
Gambar 4.12 Tampilan file nim_1.swf ........................................... 41
Gambar 4.13 Page khusus kidang.swf ............................................ 41
Gambar 4.14 Tampilan perubahan bentuk kijang .......................... 41
Gambar 4.15 Tampilan peletakkan file suara ................................ 42
Gambar 4.16 Animasi motion guide pada kelinci.......................... 42
Gambar 4.17 Tampilan file Kolam.swf ......................................... 43
Gambar 4.18 Tampilan peletakkan file suara .wav........................ 44
xiii
DAFTAR TABEL
Tabel 1 Tabel pengujian sistem 1 ................................................... 44
Tabel 2 Tabel pengujian sistem 2 ................................................... 48
1
BAB IPENDAHULUAN
1.1. Latar BelakangPelajaran bahasa daerah, dalam hal ini adalah bahasa Jawa, hanya
diberikan sewaktu kita menginjak bangku Sekolah Dasar (SD) serta Sekolah Menengah Pertama (SMP). Seperti halnya sekarang ini, penggunaan Bahasa Jawa semakin teralihkan akibat adanya arus globalisasi. Karena apabila seseorang ingin mengikuti perkembangan zaman, maka sebaiknya orang tersebut harus dapat beradaptasi dengan segala sesuatunya, termasuk dengan penggunaan bahasa sebagai alat komunikasi dengan semua negara-negara yang berada di belahan bumimanapun.
Semakin lama ketertarikan orang untuk mempelajari Bahasa Jawa semakin menurun. Hal ini seperti yang dikatakan oleh kebanyakan para murid bahwa pelajaran Bahasa Daerah bukanlah merupakan salah satu ”bidang studi favorit”. Pada dasarnya dalam mengerjakan Proyek Akhir ini, s elain untuk memperkenalkan perbendaharaan kata yang terdapat dalam Bahasa Jawa, kita juga dapat menambah wawasan mengenai dunia maya yaitu internet. Karena pada pembuatan proyek akhir ini, penulis mencoba mempresentasikannya melalui sebuah web tutorial sehingga dapat diakses oleh siapapun melalui internet.
Dalam pembuatan proyek akhir ini, penulis ingin menunjukkan bahwa masih ada penerus bangsa yang memiliki keinginan untuk belajar lebih banyak lagi mengenai Bahasa Jawa, dimana merupakan bahasa daerah bagi penduduk di Pulau Jawa, yang sebagian besar bertempat tinggal di Propinsi Jawa Tengah dan Jawa Timur. Melestarikan serta mengembangkan kebudayaan daerah adalah sebuah tujuan yang mulia, karena ”Kebudayaan daerah merupakan bagian dari kebudayaan nasional”
1.2. TujuanAdapun tujuan pembuatan web tutorial ini adalah untuk
memperkenalkan perbendaharaan kata yang terdapat dalam bahasa Jawa, sekaligus membantu memberikan kemudahan kepada anak SD, karena pada tutorial ini akan dilengkapi dengan pengucapan serta animasi agar dapat memperjelas wacana para pembacanya. Adapun tujuan lainnya yaitu untuk memperkenalkan internet kepada generasi muda kita.
2
1.3. PermasalahanPermasalahan yang akan ditangani adalah bagaimana membuat
sebuah web tutorial pengenalan Bahasa Jawa untuk anak Sekolah Dasar yang menarik. Dan seperti yang dapat kita lihat minimnya tool pembelajaran Bahasa Jawa merupakan salah satu kendala yang harus dihadapi.
1.4. Batasan MasalahDalam pembuatan “Proyek Akhir” ini lebih menitikberatkan pada
desain global tampilan web-animasinya dengan menggunakan software Macromedia Flash MX dan Macromedia Fireworks MX, serta ActionScript sebagai bahasa pemrogramannya. Perbendaharaan kata yang ada, diambil dari Pepak Basa Jawa. Selain itu penulis juga memberikan pembatasan masalah mengenai buku menu yang digunakan, yaitu pageflip_v213, dimana sistem yang dipakai penulis adalah open source.
1.5 MetodologiDalam penyelesaian Proyek Akhir ini terdapat beberapa prosedur
yang telah dilakukan, yaitu :
1. Studi literaturePada tahapan ini, penulis mencari tahu serta mempelajari segala bentuk literatur yang berhubungan dengan Proyek Akhir ini, seperti halnya pembuatan animasi dan pembuatan kuis, karena disini penulis akan memilih output-an yang atraktif, sehingga dapat menarik minat masyarakat terutama anak-anak Sekolah Dasar.
2. Pengumpulan dataData yang dikumpulkan oleh penulis adalah berupa data gambar yang tidak nyata (kartun), perbendaharaan kata dalam Bahasa Jawa, data suara yaitu suara hewan (jika ada) dan pengucapan tiap kata dalam Bahasa Jawa yang diperlukan, serta kumpulan soal-soal yang sesuai untuk bab latihan/kuis. Semua data yang ada digunakan untuk membuat web lebih menarik dan berwawasan.
3
3. DesainPada tahap ini penulis mulai memasuki dunia software-nya, dimana penulis juga mulai melakukan desain global untuk tampilan menu book-nya dan begitu juga desain tampilan untuk masing-masing kategorinya. Selain itu penulis juga mulai membuat database pertanyaan-pertanyaan untuk kuis serta jawaban-jawabannya.
4. Pembuatan dan Analisa SistemSemua prosedur yang telah dilakukan dikombinasikan menjadi satu, yang kemudian dilakukan pembuatan sistem secara keseluruhan dan menganalisanya serta dilakukan pengujian atas sistem tersebut, melalui pengoperasian web tutorial dari awal hingga proses berakhir untuk melihat apakah system berjalan seperti yang diharapkan.
5. Pembuatan LaporanPada tahap ini ketika semua proses sudah berhasil dibuat serta dijalankan, maka penulis mulai menyusun dan menyelesaikan pembuatan buku Proyek Akhir ini.
1.6 Sistematika PembahasanAdapun sistematika studi pembahasan dari Proyek Akhir ini
direncanakan sebagai berikut :
BAB 1 PENDAHULUANPada bab Pendahuluan ini akan menguraikan mengenai latar belakang, tujuan, permasalahan serta batasan masalah yang akan ditangani, metodologi, dan sistematika pembahasan.
BAB 2 DASAR TEORI Dalam menyelesaikan Proyek Akhir yang berjudul ”Pembuatan Web Tutorial Pengenalan Bahasa Jawa Untuk Anak Sekolah Dasar (Desain Global dan Pemrograman Web)”, pada bab ini penulis akan memberikan teori-teori dasar yang digunakan untuk mendukung kesempurnaan dalam tahap pengerjaannnya.
BAB 3 PERENCANAAN SISTEMDalam bab ini akan dijelaskan tentang perancangan sistem yang dibuat. Disini penulis akan menjelaskan beberapa tahap yang
4
harus dilalui ketika proses awal pembuatan sistem, seperti pengumpulan data yang berupa gambar, suara, kumpulan soal dan jawaban, desain untuk tampilan page-nya, hingga pengolahan objek-objek tersebut untuk mendapatkan hasil akhir yang diharapkan.
BAB 4 PEMBUATAN DAN ANALISA SISTEMPada bab ini sistem mulai direalisasikan, disini akan dijelaskan tentang pembuatan sistem dari proses awal hingga akhir. Dalam proses pembuatan ini juga dilakukan analisa untuk mengetahui apakah kinerja dari setiap bagian sistem yang telah dibuat dapat berjalan dengan baik sehigga output yang ada sudah sesuai seperti yang diharapkan oleh penulis.
BAB 5 PENUTUPSetelah dilakukan proses pembuatan dan analisa sistem, maka penulis akan memberikan beberapa kesimpulan dari seluruh proses pembuatan sistem. Selain itu, guna penyempurnaan dari pembuatan proyek akhir ini, penulis juga akan memberikan beberapa saran yang membangun.
DAFTAR PUSTAKADaftar Pustaka adalah mengenai kumpulan dari beberapa referensi yang penulis gunakan sebagai acuan yang dapat mendukung terselesaikannya pembuatan Proyek Akhir ini, baik dalam aplikasinya maupun secara teori.
5
BAB IITEORI DASAR
2.1 UMUMPada bab ini akan diberikan teori dasar yang melandasi permasa-
lahan dan penyelesaiannya yang diangkat dalam proyek akhir ini. Teoridasar yang diberikan meliputi: Macromedia Flash, yang akan menerangkan tentang fasilitas-fasilitas yang dimiliki Macromedia Flash serta macam-macam cara animasi menggunakan Flash MX. Dan juga akan diberikan sedikit pengenalan tentang Macromedia Fireworks MX, Macromedia Dreamweaver MX, dan bahasa pemrograman PHP.
2.2 Macromedia FlashMacromedia Flash MX merupakan salah satu program yang
digunakan untuk mendesain tampilan web seperti yang banyak digunakan saat ini. Saat membuka situs atau halaman internet tertentu, biasanya terdapat animasi objek grafis yang bergerak dari besar menjadi kecil, dari terang menjadi tampak lebih redup, dari bentuk satu menjadi bentuk yang lain, dan masih banyak lagi yang lain. Adapun animasi-animasi objek grafis tersebut dapat dikerjakan dengan menggunakan Macromedia Flash MX. Flash MX juga mengenalkan bagaimana membuat movie clip, animasi frame, animasi tween motion, serta perintah action-nya.
Flash MX mempunyai banyak fasilitas yang sangat berdaya guna, tetapi mudah digunakan seperti membuat interface / form menggunakan komponen dengan drag and drop saja, efek-efek spesial animasi timeline yang sudah built-in, behavior yang juga sudah siap pakai untuk menambahkan interaktifitas pada animasi tanpa perlu menuliskan kode pemrograman, dan masih banyak lagi yang lainnya
Flash MX adalah program yang fleksibel untuk membuat animasi, sehingga banyak para Desainer yang memakainya. Para Desainer tersebut sering menggabungkan Macromedia Flash dengan Macromedia Dreamwever, Frontpage, Adobe Photoshop, CorelDraw, dan lain-lain, untuk mendapatkan desain yang menarik.
Movie Flash terdiri dari grafik, teks, animasi dan aplikasi untuk situs web. Pada Movie Flash juga bisa memasukkan unsur interaktif dalam movie-nya dengan bahasa pemrograman ActionScript, untuk memudahkan user berinteraksi dengan mouse dan keyboard, mengontrol
6
movie, memindahkan objek-objek, memasukkan informasi melalui form, dan begitu juga dengan operasi-operasi yang lainnya.
Adapun beberapa kemampuan Flash lainnya adalah sebagai berikut:� Dapat membuat tombol interaktif dengan sebuah movie atau
objek yang lain� Dapat membuat perubahan transparansi warna dalam movie� Dapat membuat perubahan animasi dari satu bentuk ke bentuk
yang lain� Dapat membuat gerakan animasi dengan mengikuti alur yang
telah ditetapkan� Dapat membuat animasi logo, animasi form, presentasi
multimedia, game, kuis interaktif, simulasi / visualisasi� Dapat membuat situs web, aplikasi web, pengaturan halaman
web� Dapat dikonversi dan di-publish ke dalam beberapa tipe
seperti .swf, .html, .gif, .jpg, .png, .exe, .mov.
2.2.1 Istilah-istilah Umum dalam Program Flasha. PropertiesSuatu cabang perintah dari suatu perintah yang lain.
b. AnimasiSebuah gerakan objek maupun teks yang diatur sedemikian rupa sehingga kelihatan menarik.
c. ActionScriptSuatu perintah yang diletakkan pada suatu frame atau objek sehingga frame atau objek tersebut akan menjadi interaktif.
d. Movie ClipSuatu animasi yang dapat digabungkan dengan animasi atau objek yang lain.
e. Frame
Frame
Gambar 2.1 Gambar dari frame
7
Suatu bagian dari layer yang digunakan untuk mengatur pembuatan animasi.
f.TimelineBagian dari program Macromedia Flash MX yang digunakan untuk menampung layer. Berikut ini adalah tampilan dari timeline.
g. MaskingSuatu perintah yang digunakan untuk menghilangkan sebuah isi dari suatu layer dan isi layer tersebut akan tampak saat movie dijalankan.
h. LayerSebuah nama tempat yang digunakan untuk menampung satu gerakan objek sehingga jika ingin membuat gerakan lebih dari satu objek sebaiknya diletakkan pada layer tersendiri.
i. KeyframeSuatu tanda yang digunakan untuk membatasi suatu gerakan animasi.
Blank Keyframe Keyframe
Gambar 2.2 Gambar dari keyframe dan blank keyframe
2.2.2 Mengenal Timeline dan Frame Timeline terdiri atas Layer dan Frame. Fungsi utamanya adalah sebagai tempat pengaturan timing atau waktu animasi dan penggabungan objek-objek dari masing-masing layer. Frame dapat diumpamakan seperti film. Film merupakan kumpulan gambar yang dimainkan secara berurutan dengan kecepatan tertentu sehingga gambar tersebut terlihat bergerak. Misalnya di Frame 1 terdapat objek di sebelah kiri layar dan di Frame 10 terdapat objek di sebelah kanan layar, maka ketika kumpulan frame tersebut digerakkan secara berurutan akan terlihat seolah-olah objek tersebut bergerak dari kiri ke kanan layar. Keyframe merupakan frame yang berisi objek. Ada perintah Insert Keyframe yang artinya apabila di frame 1 sudah terdapat objek lingkaran, kemudian kita masukkan keyframe di Frame 10, maka di Frame 10 pun
8
terdapat objek lingkaran yang sama dengan frame 1. Keyframe dilambangkan dengan titik bulat hitam pada frame Blank Keyframe artinya kita mempersiapkan frame kosong untuk diisi objek baru. Apabila kita menggambar objek maka Blank Keyframe berubah menjadi Keyframe karena frame tersebut sudah berisi objek. Blank Keyframe dilambangkan dengan titik bulat putih pada frame. Action Frame, artinya terdapat ActionScript pada frame tersebut. Action Frame dilambangkan dengan huruf “a” di frame.
2.2.3 Animasi Dalam Flash Adapun beberapa animasi yang dipakai dalam pembuatan proyek akhir ini, diantaranya adalah :a. Animasi dengan FrameAnimasi frame adalah animasi yang dibuat dengan menggunakan frame. Frame adalah suatu bagian dari Layer yang digunakan untuk mengatur pembuatan animasi. Metode yang dipakai adalah secara manual, dimana kita diharuskan membuat setiap objek yang berbeda pada setiap frame untuk menghasilkan animasi. Meskipun animasi yang dihasilkan terlihat lebih bagus dan halus daripada animasi metode tween, akan tetapi jarang digunakan karena pembuatan animasinya memerlukan ketelitian dan ukuran file animasi pun lebih besar. Pada contoh dibawah ini, Anda akan belajar bagaimana cara membuat animasi frame dengan memainkan warna huruf.
Animasi Frame
Gambar 2.3 Contoh animasi frame
b. Animasi Create Motion TweenAnimasi Create Motion Tween adalah animasi yang digunakan untuk menggerakkan objek berdasarkan batas suatu keyframe tertentu. Metode ini paling sering digunakan karena paling mudah dan cepat. Kita hanya perlu membuat atau menentukan objek di frame awal dan
9
objek di frame akhir, kemudian secara otomatis Flash akan membuat frame diantara frame awal dan frame akhir, sehingga terbentuklah animasi. Berikut ini contoh animasi yang dibuat dengan menggunakan Create Motion Tween.
Animasi Motion Tween
Gambar 2.4 Tampilan animasi motion tween
c. Animasi Shape TweenAnimasi Shape Tween adalah animasi yang digunakan untuk mengubah satu bentuk ke bentuk yang lain. Shape Tween juga disebut dengan efek morph. Berikut ini contoh animasi yang dibuat menggunakan Shape Tween.
Animasi Shape
Gambar 2.5 Contoh animasi shape tween
10
d. Properti MaskProperti Mask digunakan untuk menyembunyikan atau menutupi suatu objek dengan objek lain. Objek yang menutupi terlihat transparan dan menyatu dengan objek yang ditutupi sehingga hanya objek yang ditutupi yang dapat dilihat. Berikut ini adalah contoh animasi yang dibuat menggunakan properti Mask.
MaskingGambar 2.6 Tampilan saat layer di-masking
2.2.4 Aplikasi ActionScript di Flasha. Script di FrameScript yang diletakkan di frame disebut framescript. Untuk meletakkan
script di frame caranya yaitu :1. Tentukan frame berapa yang ingin diberi script. Peletakkan
harus di keyframe. Kalau di frame tersebut belum ada keyframe, Anda harus membuatnya dulu dengan menekan tombol F6 (Insert Keyframe).
2. Setelah itu baru tekan tombol F9 untuk menampilkan Panel Action.
Gambar 2.7 Gambar untuk panel action framePastikan informasi lokasi di Panel Action menunjukkan tulisan
“Frame” untuk menghindari kesalahan lebih lanjut. Setelah selesai
11
mengetik script, tutup Panel Action, Anda akan menemukan tanda “a” di frame (keyframe) yang telah diletakkan script. Suatu waktu jika ingin mengubah script tersebut, klik tanda “a” di frame (keyframe) dan tekan tombol, (titik hitam). Layer tidak ada hubungannya dengan script.
b. Script di ButtonScript yang diletakkan di button disebut script. Untuk meletakkan
script di tombol caranya :1. Pastikan tombol yang dimaksud sudah terpilih (di-klik).
Perhatikan juga informasi yang terdapat pada gambar dibawah, di Property Inspector apakah benar tombol tersebut yang dimaksud.
2. Setelah semuanya dipastikan, tekan F9 untuk menampilkan Panel Action.
Gambar 2.8 Contoh untuk panel action button
b.1 Event di ButtonScript di tombol harus ada pemicunya. Kalau di frame hanya
mempunyai satu pemicu, di tombol memiliki banyak event, antara lain :� press : kejadian saat tombol mouse ditekan� release : kejadian saat tombol mouse ditekan dan kemudian
dilepas� rollOver : kejadian saat kursor mouse masuk dalam area objek
tombol. Pada saat ini tombol mouse belum ditekan� roolOut : kejadian saat kursor mouse masuk kemudian keluar
dari area objek tombol. Pada saat ini tombol mouse belum ditekan
b.2 Syntax di Button
12
Untuk mengetik script di tombol, Anda harus tahu tata bahasa atau syntax agar perintah dapat berjalan dengan benar. Di bawah ini adalah syntax untuk buttonscript.
on (nama_event) {perintah atau handler
}Pada buttonscript memiliki banyak sekali event sehingga Anda harus
mengetik nama event-dulu dan baru kemudian mengetik perintah.
c. Fungsi-Fungsi NavigasiFungsi stop(); digunakan untuk menghentikan movie flash pada
frame yang diberi script ini.Fungsi play(); digunakan untuk menjalankan movie flash pada frame yang diberi script ini.Syntax dalam Flash ActionScript merupakan case sensitif jadi terdapat perbedaan antara huruf kapital dan huruf kecil.
d. KomentarScript merupakan bahasa komputer yang sulit dibaca untuk mereka
yang masih pemula. Oleh karena itu, kita bisa memberinya komentar di tengah-tengah perintah.
� Cara ke-1 :// Perintah untuk berhenti pada frame tertentu gotoAndStop(10);
� Cara ke-2 :/* Perintah untuk pergi ke frame tertentu dan kemudian tetap dijalankan*/gotoAndPlay(10);
Cara ke-1 dengan tanda ”//” untuk memberi komentar perbaris. Cara ke-2 yang dimulai dengan tanda ”/*” dan diakhiri tanda ”*/” untuk memberi komentar lebih dari satu baris. Tulisan komentar akan berwarna abu-abu.
13
e. Event di MovieclipAda banyak event yang terdapat di movie clip, tetapi hanya dua event
saja yang sering digunakan, yaitu :� load : kejadian saat movie clip pertama kali muncul di stage� enterFrame : kejadian saat movie clip masih berada di dalam
stage
2.3 MACROMEDIA FIREWORKS MXFireworks MX adalah salah satu software untuk membuat desain
grafis yang atraktif. Software ini merupakan program aplikasi untuk membuat, mengedit dan mengoptimalkan tatanan desain grafis web. Dalam Fireworks juga menyediakan berbagai tombol perintah untukmembangun web. Anda dapat membuat dan mengedit grafik, memberi efek, serta memotong image untuk mengurangi ukuran file. Setelah halaman web di-edit, Anda dapat mengekspornya ke format JPEG, GIF atau format lain yang kompatibel.
2.3.1 Mengenal ToolbarToolbar merupakan baris perintah yang berisi tombol-tombol
perintah yang sering digunakan di dalam pengeditan. Toolbar dapat ditampilkan maupun disembunyikan dengan perintah Window ����Toolbar dan kemudian pilih nama toolbar.
2.3.2 Mengenal PanelBagian Panel berisi berbagai panel yang terbagi menjadi enam, yaitu
Select, Bitmap, Vektor, Colors dan View.� Select Tool (Tombol Pemilih>
Select tool berisi tombol-tombol perintah untuk memilih objek. Objek dapat digerakkan, diubah skala-nya, diputar atau dipotong dengan tool ini. Contoh dari tombol Select antara lain Pointer, Scale, dan Crop.
� Bitmap Tool (Tombol Bitmap)Tombol Bitmap digunakan untuk memanipulasi objek bitmap, seperti membuat objek bimap, melakukan pengeditan, dan memberi warna. Contoh dari tombol Bitmap antara lain Magic Wand, Brush, Eraser dan Paint Bucket.
� Vector Tool (Tombol Vektor)Tombol Vektor digunakan untuk melakukan pengeditan pada objek vektor. Manipulasi yang dapat dilakukan antara lain membuat garis atau kurva, mengedit garis atau kurva, membuat tulisan dan
14
memotong garis pada bidang kerja. Contoh dari tombol Vectorantara lain Rectangle, Ellipse dan Text.
� Color Tool (Tombol Warna)Tombol Color digunakan untuk mengubah warna objek. Fungsi utama dari tombol Color adalah untuk mengatur warna stroke dan fill pada objek gambar. Contoh dari tombol Color antara lain Stroke Colors Option, Fill Colors Option, dan No Stroke or Fill.
� View Tool (Tombol View)Tombol View digunakan untuk mengatur ukuran tampilan pada bidang kerja, umumnya digunakan untuk mengatur bidang kerja atau halaman web yang besar. Contoh dari tombol View antara lain Standard Screen Mode, Hand, dan Zoom.
2.4 MACROMEDIA DREAMWEAVER MX2.4.1 Fasilitas dalam Dreamweaver MX
Macromedia Dreamweaver MX adalah program aplikasi profesional untuk mengedit HTML secara visual dan mengelola Website serta pages. Karena tampil secara visual, program aplikasi Macromedia Dreamweaver MX mudah untuk dioperasikan. Program ini menyediakan banyak perangkat yang dapat meningkatkan kemampuan user di dalam membuat Web.
Program aplikasi Dreamweaver MX menyertakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript Reference dan JavaScript Debugger. Selain ini program aplikasi ini juga memungkinkan pengeditan JavaScript, XML dan dokumen teks lainnya secara langsung, yaitu dengan menggunakan fasilitas Code Editors.
Program aplikasi ini juga dapat mengimpor image atau movie yang dibuat dengan program aplikasi lainnya, seperti Macromedia Flash maupun Macromedia Fireworks.
Adapun beberapa kemampuan Dreamweaver MX lainnya adalah sebagai berikut:
� Mempunyai tampilan interface standar yang lebih konsisten dengan produk athor Web Macromedia lainnya.
� Panel-panelnya ditempelkan pada jendela kerja sehingga memudahkan user bekerja.
� Fasilitas yang terdapat dalam kotak dialog New Document dapat memungkinkan user untuk memilih layout halaman maupun
15
code yang akan digunakan, seperti Framesets, CSS Style Sheets, Template Page, dll.
� Fasilitas Code View menyediakan fitur-fitur seperti autoediting, live syntax coloring untuk HTML dan JavaScript, toolbar dengan code yang lebih terorientasi.
� Pada saat melakukan peng-code-an, menu pop-up akan muncul memberikan petunjuk tentang code sesuai item yang dipilih user.
� Memberikan fitur-fitur untuk Web Developer yang di dalamnya termasuk ColdFusion MX Support, ASP.NET Support, PHP Support, Web Services Introspections.
2.5 PHP2.5.1 Pengenalan PHP
PHP merupakan akronim dari “PHP : Hypertext Presprocessor”. PHP merupakan bahasa script yang biasa digunakan untuk web development yang dapat diselipkan dalam bahasa script HTML. Berbeda dengan script-script lainnya seperti JavaScript atau VB script, PHP dieksekusi di lingkungan server, sedangkan client hanya menerima hasil dari script yang telah dieksekusi tanpa bisa mengetahui kode yang digunakan.
2.5.2 Tag dalam PHPBanyak cara untuk menyisipkan PHP dalam script HTML, antara
lain:
� Cara 1<?php....?>
� Cara 2 ���� tag yang biasa dan banyak digunakan<?....?>
� Cara 3<script language=”php”>....</script>
16
2.5.3 Variabel dan Tipe DataPenulisan variabel dalam PHP diawali dengan karakter ‘$’, kemudian
diikuti dengan huruf sebagai karakter pertama, dan setelah itu bisa dilanjutkan dengan kombinasi huruf dan angka. Variabel pada PHP bersifat case sensitif dan tidak boleh mengandung spasi maupun tanda baca di dalamnya.
17
B A B 3PERENCANAAN SISTEM
3.1 Desain Global Sistem
Gambar 3.1 Blok diagram sistem - Hewan, Buah dan Pohon
18
Gambar 3.2 Blok diagram sistem - Jenis Kata
19
Gambar 3.3 Blok diagram sistem - Sastra, Apa dan Perumpamaan
20
Gambar 3.4 Blok diagram sistem - Nama Sebutan dan Kebudayaan Jawa
Gambar blok-blok diagram dari sistem diatas menerangkan pengelompokan dari kategori-kategori yang diambil dari ‘Pepak Basa Jawa’. Sedangkan yang akan ditampilkan pada menu adalah pilihan kategori tersendiri, bukan berdasarkan pengelompokannya.
3.2 Perencanaan Layout MenuLayout pada menu dibuat dengan menggunakan sistem page flip.
Sistem dasar diambil dari Dynamic Pageflip v2.13 yang dibuat oleh Macc/iparigrafika yang merupakan open source yang dapat di download secara gratis dari internet. Dengan menggunakan page flip ini penulis cukup membuat tampilan per page yang akan ditampilkan dalam page flip, bisa berupa .swf maupun .jpg, dan kemudian page-page ini dimasukkan ke dalam page flip dengan mengedit kode yang telah disediakan. Page flip ini bekerja dengan sistem XML sehingga lebih mudah bagi kita untuk mengedit content yang ingin ditampilkan.Gambar 3.5 berikut ini merupakan tampilan original dari page flip versi 213.
21
Gambar 3.5 Dynamic page flip – original
Berikut ini adalah rancangan layout dari menu yang akan penulis buat dengan menggunakan sistem page flip.
Gambar 3.6 Tampilan halaman terdepan (cover)
22
Gambar 3.7 Tampilan halaman penunjuk penggunaan
Ket: adalah gambar button
Gambar 3.8 Tampilan button – kategori
Tampilan untuk pilihan seluruh kategori sama seperti pada Gambar3.8, sedangkan berikut ini yaitu Gambar 3.9 adalah tampilan page yang berisi beberapa kategori dan button untuk kuis. Dan Gambar 3.10 merupakan tampilan pada halaman akhir yang berisi foto dan nama penulis (profile penulis).
23
Gambar 3.9 Tampilan pilihan kuis
Gambar 3.10 Tampilan halaman akhir
3.3 Perencanaan KategoriUntuk mengetahui apa saja yang ada dalam tiap kategori maka berikut
ini akan digambarkan secara umum berdasarkan pengelompokannya.
24
Gambar 3.11 Kategori Hewan
Pada Gambar 3.11, untuk kategori Hewan, penulis menyiapkan dua pilihan yaitu gambar dan pengucapan (lafalnya). Pada awal pengaksesan kategori ini disediakan beberapa gambar binatang dan pilihan button untuk page selanjutnya maupun button untuk kembali ke ‘menu’. Saat sebuah gambar binatang di klik akan keluar sebuah page baru yang berisi gambar binatang itu sendiri. Disini juga disediakan popup yang berisi keterangan-keterangan seperti yang sudah dijelaskan pada Gambar 3.11disertai dengan pengucapannya. Pada page ini juga diberikan button untuk kembali ke page sebelumnya yaitu yang berisi beberapa gambar binatang.
Sistem kerja pada kategori Buah seperti pada Gambar 3.12 hampir sama dengan sistem kerja kategori Hewan, yaitu penulis juga menyediakan pilihan berupa gambar dan suara (pengucapan). Pada awal pengaksesannya akan disediakan button untuk kembali ke menu dan button untuk melanjutkan ke page berikutnya.
25
Pada Gambar 3.13, yaitu mengenai kategori Pohon yang akan menguraikan nama pohon tersebut beserta jenisnya. Disini, penulis akan memberikan keterangan seperti pada blok diagram dan pilihan button seperti pada kategori sebelumnya.
Gambar 3.12 Kategori Buah
Gambar 3.13 Kategori Pohon
26
Gambar 3.14 Kelompok Jenis Kata
Pada Gambar 3.14 yaitu kelompok dari beberapa kategori Jenis Kata yang terdapat dalam Pepak Bahasa Jawa, seperti Bilangan, Krama Inggil, Entar, Sinonim, Antonim, dan seterusnya seperti yang telah dicantumkan
27
dalam blok diagram. Saat memasuki menu, kategori akan berdiri sendiri sebagai button. Apabila kita mengklik salah satu dari kategori tersebut, maka penulis akan menyediakan pilihan berupa suara (pengucapan) disertai dengan keterangan yang terdapat pada Pepak Basa Jawa. Setelah itu, penulis juga memberikan button untuk kembali ke menu utama atau ke halaman berikutnya (jika ada).
Sistem seperti ini juga berlaku pada Kelompok Sastra pada Gambar 3.15, Kelompok Apa ?? pada Gambar 3.16, Kelompok Perumpamaan Gambar 3.17, Kelompok Nama Sebutan Gambar 3.18 dan Kelompok Kebudayaan Budaya pada Gambar 3.19.
Gambar 3.15 Kelompok Sastra
28
Gambar 3.16 Kelompok Apa??
Gambar 3.17 Kelompok Perumpamaan
Gambar 3.18 Kelompok Nama Sebutan
29
Gambar 3.19 Kelompok Kebudayaan Jawa
3.4 Perencanaan KuisKuis ini merupakan fasilitas ekstra dalam sistem yang berguna untuk
melatih seberapa jauh anak bisa menggunakan kata dalam sebuah kalimat. Gambaran sistem kerja untuk kuis ini adalah sebagai berikut.
Gambar 3.20 Gambaran sistem kerja dari kuis
3.5 Proses Keseluruhan Pembuatan SistemBerikut ini adalah gambaran keseluruhan proses dalam pembuatan
sistem. Seperti yang kita ketahui, sebelum suatu sistem dibuat pasti sebelumnya ada sebuah ide yang melatar belakangi penulis untuk
30
membuat sistem tersebut, hal ini telah dijelaskan oleh penulis pada Bab 1 tentang Latar Belakang. Kemudian untuk membuat suatu sistem juga dibutuhkan sebuah sketsa sistem yang akan dibuat, penulis telah menjabarkannya pada Bab 3, yaitu tentang perencanaan sistem. Setelah ide dan desain sudah ada selanjutnya proses realisasi bisa dilakukan.
Gambar 3.21 Proses pembuatan sistem secara global (a)
31
Gambar 3.22 Proses pembuatan sistem secara global (b)
32
----------- halaman ini sengaja dikosongkan
33
B A B 4PEMBUATAN DAN ANALISA SISTEM
Dalam pembuatan sistem dilakukan beberapa tahap seperti yang akan dijelaskan berikut ini.
4.1 Perencanaan Software yang DigunakanDalam pembuatan Proyek Akhir ini penulis menggunakan
produk-produk program aplikasi Macromedia, karena Macromedia menyediakan program-program aplikasi yang cukup lengkap, dimana antar program aplikasi tersebut dapat berkorelasi.
Untuk Proyek Akhir ini digunakan Macromedia Flash MX Professional 2004 versi 7.0.1 yang merupakan program dasar dari keseluruhan Proyek Akhir. Untuk menjalankan hasil program Flash MX ini dibutuhkan Macromedia Flash Player 7 yang sudah terinstal secara otomatis ketika kita menginstal Macromedia Flash MX Pro 2004. Penulis memilih menggunakan program ini karena Macromedia Flash MX mempunyai banyak kelebihan-kelebihan yang mendukung pengerjaan Proyek Akhir ini, terutama dalam membuat animasi. Tetapi kelemahannya adalah pada saat file Flash (.fla) dibuka di Macromedia Flash MX yang berbeda versinya (lebih tinggi atau lebih rendah) terkadang file Flash ini tidak dapat dibuka.
Selain Macromedia Flash MX, penulis juga menggunakan Macromedia Fireworks MX untuk pembuatan dan pengeditan gambar maupun background, serta digunakan juga program Tcl Wavesurfer untuk perekaman dan pengeditan suara yang akan digunakan dalam sistem ini. Kemudian untuk pembuatan kuis, penulis menggunakan Macromedia Dreamweaver MX dengan gabungan bahasa pemrograman PHP dan database MySQL, karena Dreamweaver MX merupakan web developer yang dinamis dan mensupport pemrograman dengan PHP & MySQL.
4.2 Pengumpulan Data4.2.1 Pengambilan dan Pengolahan Gambar
Data-data gambar diambil dengan cara searching di internet dan mendownloadnya. Ada banyak gambar yang tersedia di internet yang dapat kita gunakan secara gratis. Penulis memilih gambar-gambar yang tidak nyata atau kartun karena memiliki bentuk yang lebih
34
bermacam-macam dan beraneka warna sehingga terlihat lebih menarik. Akan tetapi tidak semua gambar-gambar yang penulis cari dapat ditemukan, sehingga untuk memenuhi kebutuhan tersebut, penulis melakukan scanning gambar yang berasal dari Pepak Basa Jawa, seperti gambar gamelan, wayang, dsb.
Gambar-gambar ini sebagian besar di edit kembali sesuai dengan keinginan penulis menggunakan Macromedia Fireworks MX, dan kemudian di import ke dalam Macromedia Flash MX untuk dijadikan gambar yang beranimasi atau bergerak.
Adapun Gambar 4.1 (a) sampai dengan Gambar 4.1 (d) merupakan Gambar perubahan bentuk bebek yang dapat dianalisa oleh penulis, dimana dengan melalui proses pengeditan menggunakan Fireworks MX.
Gambar 4.1 (a) Gambar 4.1 (b) Gambar 4.1 (c) Gambar 4.1 (d)
Keempat gambar diatas adalah merupakan hasil editan dari penulis, dengan tujuan agar membuat bebek terlihat seperti berjalan ketika sudah di-import di Flash MX. Adapun seperti dibawah ini merupakan gambar bebek yang asli (sebelum di-edit).
Gambar 4.2 Gambar bebek original
Setelah gambar berhasil diolah di Fireworks MX, penulis meng-importnya ke Flash agar dapat dibuka melalui file .fla untuk dibuat animasinya. Tidak hanya itu saja, penulis juga akan memberikan sebuah pop-up menu yang berisi keterangan (seperti pada Pepak Basa Jawa). Pada awalnya penulis mengalami kesulitan ketika harus membuat pop-up, karena penulis harus menduplikatkan pop-up tersebut sesuai kebutuhan.
35
Pop-up dengan keterangan yang bersimbol movie clip tersebut tidak dapat diletakkan dengan dua kondisi yang berbeda. Maksudnya, penulis tidak bisa mengcopy paste pop-up beserta keterangannya, untuk dipergunakan pada fungsi yang berbeda-beda, karena keterangan dalam pop-up tersebut akan sama semua. Hal ini dikarenakan pop-up (berupa movie clip) beserta keterangan (berupa graphic) terdapat pada layer yang sama, maka penulis harus meletakkan kedua objek tersebut pada layer yang berbeda.
Setelah keduanya diletakkan pada layer yang berbeda, penulis masih saja menghadapi permasalahan. Ketika gambar bebek di-klik, ternyata pop-up dari hewan yang lainnya juga ikut muncul, dimana dalam page yang berisi bebek tersebut juga terdapat binatang lainnya seperti angsa, siput dan kura-kura. Setelah dianalisa ternyata kesalahan berada pada penempatan frame-nya. Penulis meletakkan pop-upnya pada frame yang sama, meskipun layernya berbeda, maka secara otomatis ketiga pop-up akan muncul bersamaan. Adapun tampilan dari penjelasan diatas pada Gambar 4.3 dibawah ini.
Gambar 4.3 Tampilan pop-up yang keluar bersamaan
Kemudian hal tersebut dapat diatasi, yaitu dengan menempatkan kejadian (dimana pop-up muncul) pada frame yang berbeda, atau bisa juga mendefinisikan setiap objek pada sebuah layer tersendiri. Maksudnya, objek bebek berada di layer Bebek, dan begitu juga untuk yang lainnya. Dalam layer Bebek ini berisikan sebuah movie clip, yang kemudian diconvert kedalam bentuk button, dan diconvert lagi menjadi sebuah movie clip. Penulis mengerjakannya mulai dari movie clip yang paling dalam, dimana berisi perubahan bentuk satu persatu dari bebek, yang sebelumnya sudah direncanaka dan di-edit dalam Fireworks MX, tanpa menggunakan animasi apapun. Hal ini dimaksudkan agar bebek tidak berjalan kesana kemari, hanya untuk mengubah perubahan bentuknya saja, perhatikan Gambar 4.6.
36
Gambar 4.4 Movie Clip perubahan bentuk Bebek
Gambar 4.5 Tampilan button Bebek
Gambar 4.6 Movie Clip perpindahan Bebek
Disini, simbol button menunjukkan bahwa gambar bebek tersebut juga dapat diklik untuk memunculkan pop-upnya, perhatikan Gambar 4.5. Untuk movie clip yang berada diluar mewakilkan gambar dalam tampilan awalnya yaitu berupa movie yang dapat bergerak dari satu tempat ke tempat yang lain, perhatikan Gambar 4.6.
37
4.2.2 Perekaman SuaraPada tahap perekaman suara ini software yang digunakan adalah Tcl
Wavesurfer 1.7.6. Dengan program ini kita dapat merekam suara maupun mengeditnya. Program lain yang dapat digunakan adalah Sound Recorder, tetapi penulis lebih memilih untuk menggunakan Tcl Wavesurfer karena file suara lebih mudah di edit dari noise maupun dipotong ke size yang kita inginkan. Dengan program ini suara yang ada juga dapat di ubah-ubah sampling ratenya, jadi suara tersebut dapat menjadi lebih tinggi maupun rendah. Tipe file yang tersimpan dari program ini berupa .wav.
Gambar 4.7 Tcl Wavesurfer 1.7.6
Untuk perekaman suara, penulis merekam pengucapan tiap kata yang dibutuhkan dalam sistem. Dalam satu kategori dibuat satu file yang berisi banyak rekaman, sehingga file ini nantinya harus dipotong untuk masing-masing kata dan disimpan menjadi single file.
Berikut ini merupakan contoh pemotongan file suara:
Gambar 4.8 Sinyal suara yang akan dipotong
Gambar 4.9 Sinyal suara yang sudah dipotong
38
4.2.3 Pembuatan MenuTampilan pada menu dibuat dengan menggunakan konsep page flip.
Sistem dasar diambil dari pageflip_v213. Kemudian page flip ini di-edit sesuai dengan yang diharapkan.
Page flip yang telah di-edit, pada menunya akan disediakan pilihan-pilihan kategori berupa button-button yang mewakili kategori-kategori tersebut. Pada setiap button terdapat keterangan mengenai isi dari kategorinya, yang akan muncul ketika pointer mouse diletakkan diatas button tersebut. Untuk menuju ke sebuah kategori cukup meng-klik button yang berupa sebuah gambar yang mewakili setiap kategorinya.
Gambar 4.10 Menu ; Pageflip yang sudah di edit
4.2.3.1 Cara Kerja Pageflip V_2.13Berikut akan dijelaskan cara kerja dari pageflip versi 2.13 yaitu dalam
proses loading dan flipping pages. Gambar 4.11 menunjukkan layer dan frame-frame yang ada pada timeline pageflip. Dapat dilihat pada layer Actions terdapat tanda α di atas blank keyframe, hal ini menunjukkan bahwa pada frame-frame tersebut terdapat ActionScript untuk selanjutnya dapat dieksekusi.
Gambar 4.11 Timeline dari pageflip v2.13
39
Dalam frame 1 terjadi proses dimana preloader ditampilkan secara visual dan source untuk halaman-halaman yang akan ditampilkan mulai diload yaitu dari file pages.xml, file ini juga berhubungan dengan folder pages yang berisi file-file halaman yang sudah jadi. Saat preloader sudah mencapai 100% maka preloader akan menghilang dan akan langsung menuju frame inisialisasi (frame 5: initialize).
Pada frame 5, file import_xml.as dimasukkan ke dalam sistem atau diload. File ini akan menyiapkan tempat dan bentuk untuk halaman-halaman yang ada pada file pages.xml, seperti tinggi dan lebar halaman, hard cover, transparansi, maupun page order-nya. Pada frame ini halaman-halaman belum ditampilkan karena nilai pages._visible = 0.
Setelah frame 5 maka timeline akan menuju ke frame 6 dan seterusnya dimana fungsi-fungsi pembentukan halaman, perhitungan preloader, pendeteksian pointer mouse, serta perhitungan untuk proses flipping dimulai (start). Pada frame 6, kondisi untuk halaman pada pageflip ditentukan kemudian proses pembentukan halaman pageflip dilakukan yaitu dengan membentuk halaman dari file pages.xml kedalam movie clip yang kemudian akan disusun sesuai dengan urutannya. Disini juga dilakukan pembentukan untuk halaman yang hard cover baik bagian depan maupun belakang, serta perhitungan untuk preloader yang akan me-load halaman-halaman yang ada dalam sistem.
Frame 7 berisi kode-kode dasar dalam pembentukan page flip. Disini semua fungsi-fungsi penting untuk pengaksesan page flip dilakukan. Awalnya dilakukan pengesetan untuk panjang halaman, daerah penekanan untuk flipping, kecepatan flipping, serta variabel-variabel yang akan digunakan dalam fungsi-fungsi yang akan dibentuk selanjutnya. Fungsi-fungsi tersebut antara lain adalah sebagai berikut; fungsi reset() yaitu untuk menginisalisasi halaman-halaman, fungsi untuk menginisialisasi mouse click handler atau pendeteksian pointer mouse yaitu untuk memberikan perhitungan dan kondisi yang terjadi apabila mouse berada di suatu area untuk autoflip maupun preflip, fungsi hittest() yaitu untuk menentukan arah flipping dari sebuah halaman, serta fungsi oef() yang memberikan kondisi saat terjadi preflip, autoflip, flipping maupun tearing. Untuk kondisi flipping normal yaitu pada halaman yang bukan hard cover maka dalam perhitungannya digunakan fungsi calc(x,y), sedangkan untuk flipping halaman yang hard cover maka digunakan fungsi scalc(obj,x).
Pada frame 8 diberikan beberapa fungsi untuk mengeset ukuran masking tiap halaman, mengaktifkan pendeteksian mouse (Mouse.addListener(mousecontroll)) yang harus direset setiap kali
40
dilakukan loading, serta removeML() yang akan mereset mouse listener tersebut. Saat enter frame atau pertama kali masuk, fungsi oef() akan langsung dijalankan untuk mengontrol flipping dari halaman-halaman page flip.
Jadi proses kerja page flip secara umum yaitu sebagai berikut. Pertama, dilakukan pengesetan preloader dan loading semua halaman yang akan dimasukkan pada page flip. Kemudian dilakukan pembentukan halaman dan eksekusi fungsi-fungsi untuk flipping tiap halaman serta pendeteksian mouse pointer. Terakhir, saat semua kode sudah dieksekusi dan sampai pada frame 9 maka page flip yang sudah jadi akan ditampilkan dan siap digunakan atau diakses.
4.2.4 Pembuatan KategoriTampilan untuk setiap kategori dibuat dengan menggunakan banyak
animasi, berwarna-warni dan beragam, guna menarik minat dari anak untuk mempelajarinya. Isi dari tiap kategori disesuaikan dengan perbendaharaan kata pada masing-masing kategori tersebut. Perbendaharaan kata yang ada diambil dari buku Pepak Basa Jawa kurikulum SD. Pada beberapa kategori akan diberikan pengucapan untuk tiap kata yang dianggap penting.
4.2.4.1 Kategori Hewan & AnaknyaPada kategori “Jenenge Kewan & Anake”, disebutkan nama hewan &
anaknya, suara, senjata (ciri khas), cara makan, tingkah laku, “ulese” serta bagaimana cara memanggil hewan tersebut “ngundange”, (dengan catatan jika keterangan-keterangan tersebut tersedia dalam Pepak Basa Jawa). Dalam kategori Hewan & Anaknya, penulis memberikan tiga jenis pengaksesan yang berbeda.
4.2.4.1.1 File nim_ 1.swf s/d nim_6.swfGambar 4.12 merupakan salah satu contoh untuk file nim.swf.,
dimana untuk file tersebut terhitung untuk nim_1.swf sampai dengan nim_6.swf, yang didalamnya terdapat gambar hewan yang beragam. Apabila gambar dari hewan tersebut di-klik,maka akan me-link ke sebuah page baru yang berisi gambar spesifik dari hewan yang dimaksud.
Disini, hewan akan bergerak dari satu tempat ke tempat yang lain, dan apabila mouse di-roll over pada gambar hewan tersebut, maka akan keluar suara dari hewan yang dimaksud (jika tersedia), kemudian untuk mendengarkan pengucapan (lafalnya), penulis menyediakan sebuah tombol (dalam gambar-tombol merah), maka akan terdengar
41
pengucapannya. Selain tombol merah, penulis juga menyediakan sebuah tombol untuk kembali ke halaman sebelumnya.
Gambar 4.12 Tampilan file nim_1.swf Gambar 4.13 Page khusus kijang.swf
Adapun jenis animasi yang dipakai oleh penulis yaitu Animasi Motion Tween. Keunggulan dari animasi ini adalah penulis hanya meletakkan keyframe di awal dan akhir gerakannya saja, kemudian diberi tweening. Untuk backgroundnya, animasi ini diletakkan saat penulis menciptakan sebuah awan yang bergerak dari kanan ke kiri. Selain itu juga digunakan untuk membuat hewan bergerak dari satu tempat ke tempat yang lainnya, dan terkadang juga dibutuhkan ketika harus membuat perubahan bentuk dari hewan yang dimaksud. Adapun Gambar 4.14 (a) sampai dengan Gambar 4.14 (d) adalah Tampilan perubahan bentuk kijang.
Untuk memberikan file suara yang berupa .wav pada program ini (baik suara hewan yang dimaksud maupun suara untuk pengucapannya), penulis dapat mengimportnya kedalam library terlebih dahulu. Kemudian jika frame untuk file suara sudah ditentukan, penulis dapat langsung meletakkan file tersebut, disini pilihan berupa file suara akan muncul pada panel properties.Adapun contoh peletakkan untuk file suaranya dapat dilihat pada Gambar 4.15
Gambar 4.14 (a) Gambar 4.14 (b)
42
Gambar 4.14 (c) Gambar 4.14 (d)
Animasi yang terdapat pada page kidang.swf dalam file nim_1.swfadalah hampir sama seperti pada page untuk kangguru.swf, kuda.swf, anjing.swf, ayam.swf, tikus.swf, kucing.swf, tokek.swf, ular.swf, gajah.swf, unta.swf, jerapah.swf, kerbau.swf, sapi.swf, banteng.swf, beruang.swf, monyet.swf, babi.swf, koala.swf, macan.swf dan singa.swf.
Gambar 4.15 Tampilan peletakkan file suara
Pada Gambar 4.16 adalah merupakan salah satu contoh animasi Motion Guide dalam file nim.swf, yaitu yang terdapat pada page kelinci.swf , lawa.swf dan burung.swf penulis menambahkan animasi Motion Guide untuk penentu arah ketika hewan tersebut akan berjalan, disamping animasi Motion Tween.
Gambar 4.16 Animasi motion guide pada kelinci
43
4.2.4.1.2 File Kolam.swf
Gambar 4.17 Tampilan file Kolam.swf
Untuk tampilan awal halaman file Kolam.swf, gambar hewan akan berjalan dari satu tempat ke tempat yang lain, dan jika di-klik maka hewan tersebut akan berhenti, kemudian muncul pop-up yang disertai dengan speaker untuk mendengarkan suara hewan yang dimaksud. Apabila ingin menutup pop-up maka disediakan pilihan button yang siap untuk di-klik sewaktu-waktu, lalu hewan-pun akan kembali berjalan. Sama seperti sebelumnya, penulis juga menyediakan tombol untuk kembali ke menu utama, tombol kembali ke halaman sebelumnya dan tombol untuk melanjutkan ke halaman berikutnya.
Untuk jenis animasi yang digunakan dalam file Kolam.swf adalah animasi motion tween. Salah satu contoh hewan yang akan dibahas penulis adalah bebek. Animasi Motion Tween digunakan pada saat penulis harus membuat bebek berpindah dari satu tempat ke tempat yang lain, sedangkan untuk perubahan bentuk bebek sendiri tidak diperlukan. Hal ini dikarenakan bentuk perubahannya sangat cepat sekali, sedangkan jika harus menggunakan animasi motion tween, berarti masih ada delay untuk membuat suatu perubahan ke bentuk yang lain. Perlu ditambahkan juga, untuk membuat pop-up yang berisi keterangan dari bebek, penulis juga mempergunakan animasi motion tween.
Apabila ingin kembali ke awal, penulis juga menyediakan tombol klik, dimana pop-up akan menjadi semakin kecil dan lama kelamaan akan menghilang. Hal ini disebabkan karena nilai alpha untuk pop-up semakin menurun, dan ketika pop-up sudah tidak terlihat lagi, hal itu berarti nilainya sudah tidak ada atau nol persen.
44
Gambar 4.18 Tampilan peletakan file suara .wav
Peletakkan file suara untuk file Kolam.swf hampir sama dengan file nim.swf, yaitu ditempatkan pada frame yang dimaksud. Semua sistem yang sudah dijelaskan oleh penulis pada file Kolam.swf, baik jenis animasinya maupun peletakkan file suara, dimana dengan bebek sebagai objek yang dicontohkan, juga akan berlaku untuk semua hewan yang berada dalam komunitas Kolam.swf
4.3 Pengujian SistemBerikut adalah tabel pengujian sistemnya, yang menunjukkan
keberhasilan pengaksesan antara menu dan kategorinya.
KondisiKeterangan Berhasil GagalIndex � Menu V -Menu � Kat. Jenenge Kewan&AnakeMenu � Kat. Jenenge Kewan&Anake
VV
-
Menu � Kat. Jenenge GodhongMenu � Kat. Jenenge Godhong
VV
-
Menu � Kat. Jenenge WitMenu � Kat. Jenenge Wit
VV
-
Menu � Kat. Jenenge PanggonanMenu � Kat. Jenenge Panggonan
VV
-
Menu � Kat. Jenenge PenggaweanMenu � Kat. Jenenge Penggawean
VV
-
Menu � Kat. Jenenge Satriya lan KesatriyaneMenu � Kat. Jenenge Satriya lan Kesatriyane
VV
-
45
Menu � Kat. Jenenge BocahMenu � Kat. Jenenge Bocah
VV
-
Menu � Kat. Tegese BangetMenu � Kat. Tegese Banget
VV
-
Menu � Kat. Prenahe SadulurMenu � Kat. Prenahe Sadulur
VV
-
Menu � Kat. Ambune Apa Menu � Kat. Ambune Apa
VV
-
Menu � Kat. Rasane Apa Menu � Kat. Rasane Apa
VV
-
Menu � Kat. Tembung WilanganMenu � Kat. Tembung Wilangan
VV
-
Menu � Kat. Tembung Garba (Sandi)Menu � Kat. Tembung Garba (Sandi)
VV
-
Menu � Kat. Tumrape ApaMenu � Kat. Tumrape Apa
VV
-
Menu � Kat. Cacade AwakMenu � Kat. Cacade Awak
VV
-
Menu � Kat. Tembung Krama InggilMenu � Kat. Tembung Krama Inggil
VV
-
Menu � Kat. Paribasan-Bebasan-SalokaMenu � Kat. Paribasan-Bebasan-Saloka
VV
-
Menu � Kat. PanyandraMenu � Kat. Panyandra
VV
-
Menu � Kat. PepindhanMenu � Kat. Pepindhan
VV
-
Menu � Kat. Tembung-tembungMenu � Kat. Tembung-tembung
VV
-
Menu � Kat. Tembung SarojaMenu � Kat. Tembung Saroja
VV
-
Menu � Kat. Tembung Kosok BalenMenu � Kat. Tembung Kosok Balen
VV
-
Menu � Kat. Tembung KawiMenu � Kat. Tembung Kawi
VV
-
Menu � Kat. PurwakanthiMenu � Kat. Purwakanthi
VV
-
Menu � Kat. ParikanMenu � Kat. Parikan
VV
-
46
Menu � Kat. Tembung CamboranMenu � Kat. Tembung Camboran
VV
-
Menu � Kat. CangkrimanMenu � Kat. Cangkriman
VV
-
Menu � Kat. ParamasastraMenu � Kat. Paramasastra
VV
-
Menu � Kat. Aksara Jawa Menu � Kat. Aksara Jawa
VV
-
Menu � Kat. Gamelan JawaMenu � Kat. Gamelan Jawa
VV
-
Menu � Gladhen (pilihan tingkat)Menu � Gladhen (pilihan tingkat)
VV
-
Pilihan tingkat � pertanyaanPilihan tingkat � pertanyaan
VV
-
Pertanyaan � nilaiPertanyaan � nilai
VV
-
Tabel 1 Tabel pengujian sistem 1Dari tabel diatas dapat diketahui bahwa link-link yang diberikan pada
button-button yang ada dalam sistem berhasil menuju ke target (per kategori) yang sesuai dengan settingan, sehingga sistem dapat diakses dengan benar tanpa ada error ketika menghubungkannya.
4.3.1 Kuisioner Untuk Pengujian SistemMengadakan kuisioner secara langsung pada yang bersangkutan
adalah salah satu bentuk pengujian sistem selanjutnya guna mengetahui apakah Web Tutorial Pengenalan Bahasa Jawa ini sudah dapat diterima (minimal disukai) oleh anak-anak Sekolah Dasar atau masih ada kekurangannya. Dimana, responden untuk pengujian sistem ini adalah dengan mengambil data dari 10 anak Sekolah Dasar, untuk range usia antara 9-12 tahun, yang terdiri dari 4 laki-laki serta 6 perempuan. Demo dilakukan tidak pada sekolah formal tetapi cukup non-formal, dengan syarat media yang digunakan untuk mendemokan web tutorial ini tersedia, berikut spesifikasi yang dapat mensupport jalannya sistem dengan baik sehingga responden juga dapat mengakses dengan mudah dan tanpa menemukan error saat mengaksesnya. Adapun tampilan dari kuisioner yang diberikan oleh penulis untuk responden adalah sebagai berikut :
47
KUISIONER WEB TUTORIAL PENGENALAN BAHASA JAWA
Berilah tanda V pada kolom penilaian yang sesuai dengan kamu. Adapun keterangan penilaiannya adalah sebagai berikut :1 : kurang 2 : cukup3 : baik4 : baik sekali
PenilaianNo Pertanyaan
1 2 3 4
1. Apakah menurut kamu tutorial ini menyenangkan ?
2. Apakah menurut kamu tutorial ini mudah dimengerti?
3. Apakah menurut kamu tampilannya menarik ?
4. Apakah menurut kamu tutorial ini mudah digunakan ?
5.Apakah setelah menggunakan tutorial ini, kamu jadi tertarik pelajaran Bahasa Daerah ?
48
Dari kuisioner di atas didapatkan hasil pengujian sebagai berikut :
PenilaianNo Pertanyaan1 2 3 4
1. Apakah menurut kamu tutorial ini menyenangkan ? - - 40% 60%
2. Apakah menurut kamu tutorial ini mudah dimengerti? - 20% 50% 30%
3. Apakah menurut kamu tampilannya menarik ? - - 30% 70%
4. Apakah menurut kamu tutorial ini mudah digunakan ? - - 60% 40%
5.Apakah setelah menggunakan tutorial ini, kamu jadi tertarik pelajaran Bahasa Daerah ?
- 40% 40% 20%
Tabel 2. Tabel pengujian sistem 2
Untuk pertanyaan pertama, dari data yang ada ternyata 60% dari jumlah responden yang turut berpartisipasi, menyatakan bahwa tutorial ini sangat menyenangkan, dengan memeberikan nilai 4 (6 responden). Sedangkan pada pertanyaan kedua, penulis memperoleh nilai 3 (baik) dari 50% responden, dan dapat diartikan bahwa web tutorial ini mudah dimengerti. Pertanyaan selanjutnya adalah ”Apakah menurut kamu tampilannya menarik ?”, ternyata persentase dari jumlah responden yang ada ialah 70% memberikan nilai ”baik sekali” atas pertanyaan tersebut. Hal ini berarti responden sangat tertarik sekali dengan tampilan yang dibuat penulis.
Pertanyaan ke-4 yaitu ”Apakah menurut kamu tutorial ini mudah digunakan ?”, dan hasilnya adalah 60% responden memberikan nilai ”baik”, sedangkan sisanya adalah ”baik sekali”. Hal ini dapat diartikan bahwa responden masih belum menemukan kesulitan yang berarti dalam memainkan web tutorial ini. Sedangkan untuk pertanyaan yang terakhir yaitu dari data yang ada diperoleh bahwa 40% responden memberikan nilai ”cukup”, 40% berikutnya menilai ”baik”, dan sisanya memberikan nilai ”baik sekali”.
Adapun kemungkinan yang terdapat pada pertanyaan ke-5 ialah beberapa responden merasa masih kurang tertarik akan pelajaran Bahasa Daerah (dalam hal ini Bahasa Jawa), sedangkan yang lainnya sudah lebih memiliki ketertarikan untuk mempelajarinya. Hal seperti ini dapat terjadi
49
karena beberapa faktor, misalnya saja faktor waktu. Pada saat mendemokan web tutorial ini, ketika sebuah halaman sudah berhasil di-akses, dengan segera penulis beralih ke halaman selanjutnya guna mempersingkat waktu. Hal ini terjadi karena banyaknya materi (kategori) yang akan ditunjukkan. Seandainya saja responden memiliki waktu yang jauh lebih banyak untuk memainkan web tutorial ini, penulis yakin bahwa responden-responden tersebut akan lebih tertarik untuk mempelajarinya.
50
----------- halaman ini sengaja dikosongkan
51
B A B 5PENUTUP
5.1 KESIMPULAN1. Macromedia Flash MX 2004 merupakan perangkat lunak yang
cukup kompleks, dari pembuatan background sampai rekayasa image agar menjadi sebuah animasi serta penambahan ActionScript, dimana semuanya dapat dikerjakan pada tempat yang sama.
2. Keunggulan animasi Motion Tween adalah file yang dibutuhkan tidak terlalu besar, karena hanya memasukkan keyframe di awal dan akhir saja.
3. PHP adalah bahasa script web development yang kompatibel dengan HTML, dan untuk menjalankannya diperlukan web server.
4. PHP bekerja pada server-side sehingga client hanya menerima hasil tanpa mengetahui kode yang digunakan.
5. Hasil Kuisioner menunjukkan bahwa web tutorial ini sangat menyenangkan, mudah dimengerti, dan tampilannya sangat menarik.
6. Web tutorial ini dapat diakses melalui internet sehingga dapat menambah wawasan dan pengetahuan secara meluas, khususnya bagi anak Sekolah Dasar.
7. Jumlah animasi yang terlalu banyak akan mempengaruhi waktu loading, hal ini tergantung dari processor masing-masing PC.
5.2 SARAN1. Saat membuat objek bergerak, sebaiknya objek tersebut
di-convert terlebih dahulu ke movie clip, agar dapat menambahkan animasi-animasi lainnya.
2. Pengelompokkan layer animasi per objek / jenis dilakukan dengan tujuan untuk mempermudah pembuatan animasinya.
3. Penempatan syntax harus ditempatkan secara benar, baik ketika berada dalam frame maupun objek itu sendiri.
4. Proyek Akhir yang dibuat penulis dapat dikembangkan beragam lagi mengenai ragam animasi serta pemrograman web yang lebih efektif.
52
5. Dalam pengembangan Proyek Akhir, disarankan penulis untuk mengganti letak flipping di bagian atas halamannya, sehingga terlihat seperti membuka sebuah kalender.
6. Lamanya waktu loading sebenarnya dapat diatasi, yaitu dengan memberikan loader pada setiap page-nya.
7. Proyek Akhir yang dibuat oleh penulis dapat digunakan sebagai bahan pembelajaran, khusunya dalam mata pelajaran Bahasa Daerah.
8. Penulis berharap semoga Proyek Akhir ini dapat memberikan manfaat bagi siapapun yang mempelajarinya.
53
DAFTAR PUSTAKA
1. Abikusno, “Pepak Basa Jawa”, Penerbit Express Surabaya, Surabaya, 1996.
2. Baba, “Animasi Kartun dengan Flash MX”, PT. Elex Media Komputindo, Jakarta, 2003.
3. Hadi, Moch. Zen S, ”Modul Pembelajaran Praktikum Bengkel Internet”, PENS-ITS, Surabaya, 2005.
4. Hakim, Lukmanul, “Cara Ampuh Menguasai Macromedia Flash MX 2004”, PT. Elex Media Komputindo, Jakarta, 2004.
5. Herlambang, Ferry, “ Trik Explorasi Dreamweaver MX”, PT. Elex Media Komputindo, Jakarta, 2005.
6. Kelompok Kerja Pengawas Sekolah (KKPS), ”Program Semester”, Dinas Pendidikan Kota Surabaya, Surabaya, 2006.
7. Komputer, Wahana, “Membuat Website Interaktif dengan Macromedia Dreamweaver MX”, PT. Elex Media Komputindo, Jakarta, 2002, 2004.
8. MADCOMS, “Mahir dalam 7 hari: Macromedia Fireworks MX 2004”, ANDI, Yogyakarta, 2005.
9. MADCOMS, ”Seri Aplikasi Macromedia Flash MX 2004: Membuat Animasi Movie Clip dengan Actions Script“, ANDI, Yogyakarta, 2004.
10. Reinhardt, Robert, and Lott, Joey, “Flash MX 2004 ActionScript Bible”, Wiley Publishing, Inc, Indianapolis, Indiana, Canada, 2004.
11. Salim, Ali, “Trik Membuat Animasi Teks dengan Macromedia Flash MX 2004”, PT. Elex Media Komputindo, Jakarta, 2005.
12. Sukardjo, Drs. Sudjatmoko H, “Horison Pengetahuan Sosial”, Yudhistira, Jakarta, 2004.
13. Sukendro, Drs. Tresno, Drs. Santoso, dan Riyadi, Drs. Imam, “TUTUR BASA kanggo kelas 2 SD – 6 SD”, Yudhistira, Bogor, 1994.
14. Ulrich, Katherine, “Visual Quick Start Guide: Macromedia Flash MX for Windows and Macintosh”, Peachpit Press, USA, 2002.
15. Wijaya, Didik, “Tip & Trik Macromedia Flash 5.0 dengan ActionScript”, PT. Elex Media Komputindo, Jakarta, 2002.
16. Zeembry, “123 Tip dan Trik ActionScript Flash MX 2004”, PT. Elex Media Komputindo, Jakarta, 2005.
54
----------- halaman ini sengaja dikosongkan
55
LAMPIRAN
� ActionScript untuk frame 1stop();
_quality = "BEST";Stage.scaleMode = "noScale";
onEnterFrame = function() {LB = getBytesLoaded();TB = getBytesTotal();PC = (LB/TB)*100;
loaderbar.setbar(PC);
if(TB>4 && PC == 100) {delete onEnterFrame;gotoAndPlay("initialize")
}}
// specify content sourceif(_level0.xmlFile==undefined) {
_level0.xmlFile = "xml/pages.xml";}
� ActionScript untuk frame 5pages._visible = 0;#include "import_xml.as"stop();
56
� ActionScript pada frame 6// create array so we can refer to page MCs easilypageClips = new Array();pageClips[1] = pages.p1.page.pf.ph.pic;pageClips[2] = pages.flip.p2.page.pf.ph.pic;pageClips[3] = pages.flip.p3.page.pf.ph.pic;pageClips[4] = pages.p4.page.pf.ph.pic;if(transparency) {
pageClips[0] = pages.p0.page.pf.ph.pic;pageClips[5] = pages.p5.page.pf.ph.pic;
}
// load page assets (ie. JPG, SWFs) into page MCsvar init = (transparency)? 0 : 1;for(var i=init;i<pageClips.length;i++) {
for(var j=0;j<pageOrder.length;j++) {var p =
pageClips[i].createEmptyMovieClip("p"+(j+1),j);p._x = j*pw;p.loadMovie(pageOrder[j]);
}}// for the hard cover pagesvar tm = pages.flip.hfliph.attachMovie("sph","sp2",0);tm.ph.pic.pic._x = -pw/2;tm.ph.pic.mask._x = -pw/2;tm.ph.pic.pic._y = -ph/2;tm.ph.pic.mask._y = -ph/2;for(var j=0;j<pageOrder.length;j++) {
var p = tm.ph.pic.pic.createEmptyMovieClip("p"+(j+1),j);p._x = j*pw;p.loadMovie(pageOrder[j]);
}
57
var tm = pages.flip.hfliph.attachMovie("sph","sp3",1);tm.ph.pic.pic._x = -pw/2;tm.ph.pic.mask._x = -pw/2;tm.ph.pic.pic._y = -ph/2;tm.ph.pic.mask._y = -ph/2;for(var j=0;j<pageOrder.length;j++) {
var p = tm.ph.pic.pic.createEmptyMovieClip("p"+(j+1),j);p._x = j*pw;p.loadMovie(pageOrder[j]);
}
onEnterFrame = function() {var isLoaded = 1;var loadedCount = 0;var init = (transparency)? 0 : 1;for(var k=init;k<pageClips.length;k++) {
for(m=0;m<pageOrder.length;m++) {var p = eval(pageClips[k]+".p"+(m+1));
if(p.getBytesLoaded()==p.getBytesTotal()&&.getBytesTotal()>100) {
isLoaded*=1;loadedCount++;
} else {isLoaded*=0;
}}
}if(isLoaded) {
play();delete onEnterFrame;
}
58
loadedText.text=Math.floor(loadedCount/pageClips.length)+"of +pageOrder.length+"pages loaded";}
stop();
� ActionScript pada frame 7//pageflip version 2.13 (200504272050)////0427: - removeML() function added, see details at frame 15// - new page definition system, hope it is easier to use!// - no need to adjust the mask size!//0418: now it is AS2/FLash7 Compatible (The bug was the variable flipOff/flipoff)//skip page option added to gotoPage function //(for the latest version, always check at http://www.iparigrafika.hu/pageflip)////this code is written by Macc 2004.11.01//[email protected]////this code is opensource////free use!//but a small credit would be nice:)
//these values can be changed: ----------------------
page=0; //first page (normally it is 0 = the page before the cover = blank page)
59
maxpage=pageOrder.length; //last page (back cover, should be even number)
clickarea = 0.25*pw; //pixel width of the click sensitive area at the edges..afa = 0.2*pw; //width of the autoflip starter square.
gs = 2; //goto page flip speedps = 5; //mouse pursuit speedes = 3; //flip speed after mouse btn release
if(pageOrder.length>1) {canflip = true; //page flipping enabled
} else {canflip = false; //no page flipping
}
//do not change these values: ----------------------
_global.mcnt = 0; //counter (used on a page where is an animation)gpage = 0; //gotoPage Nogflip = false; //gotoPage flipgdir = 0; //goto direction...gskip = false; //skip pages ***gtarget = 0; //target when skipping
aflip = false; //auto flipflip = false; //pageflipflipOff = false; //terminateflipflipOK = false; //good flip
60
hflip = false; //hardflip (the cover of the book)rotz = -30; //hardflip max y difference
preflip = false; //corner flip statusctear = false; //actual page statustear = false;teard = 0;tlimit = 80;removedPages = new Array(); //list of removed pages!
mpx = 0, mpy = 0; //mousepos at clicksx = sy = 0; //startpoint when flippingx = 0; //mouse x,yy = 0;ax = 0; //auto x,yay = 0;acnt = 0;aadd = 0;aamp = 0;
AM = Math.PI/180;
//pageflip code by Macc -----------------------------
function reset() { //initializing pages... ----------------------------------pages.p0.page._x = -pw;pages.p0._x = 0;pages.p1.page._x = -pw;pages.p1._x = 0;
pages.flip.p2.page._x = -pw;pages.flip.p2._x = pw;
61
pages.flip.p3.page._x = -pw;pages.flip.p3._x = 0;
pages.p4.page._x = -pw;pages.p4._x = pw;pages.p5.page._x = -pw;pages.p5._x = pw;
pages.pgrad._visible = pages.mask._visible = pages.flip._visible = false;
pages.flip.p3mask._width = pages.pgmask._width = pw*2;
pages.center._height = pages.flip.p3mask._height = pages.pgmask._height = ph;
pages.flip.fmask.page.pf._width = pw;pages.center._width = 6;pages.flip.fmask.page.pf._height = ph;
pages.mask._height = pages.pgrad._height = pages.flip.p3shadow._height = pages.flip.flipgrad._height = 2*Math.sqrt(ph*ph+pw*pw);
pageNumber = new Array();for(i=0;i<=(maxpage+1);i++) pageNumber[i] = i;
}
mousecontroll = new Object(); //initializing mouse click handler -------------------
mousecontroll.onMouseDown = function() {if(flip && !aflip) {// && !preflip) {
flipOK = false;if(sx<0 && pages._xmouse>0) flipOK = true;
62
if(sx>0 && pages._xmouse<0) flipOK = true;flipOff = true;flip = false;
} else if((flipOff || aflip || !canflip) && !preflip) {trace("donothing");
} else {var oox = ox;var ooy = oy;var osx = sx;var osy = sy;var hit = hittest(); //hittestif(hit) {
anim._visible = false;flip = true;flipOff = false;tear = false; //not
tearing yet...ox = sx = hit*pw;if(preflip) {
aflip = preflip = false;ox = oox, oy = ooy;sx = osx, sy = osy;
}pages.flip.setMask(pages.mask);mpx = pages._xmouse, mpy =
pages._ymouse;//_quality = "MEDIUM"; //it is
the place to degrade image quality while turning pages if the performance is too low.
}}
}mousecontroll.onMouseUp = function() {
63
if(flip && !tear) {if((Math.abs(pages._xmouse)>(pw-afa)&&
Math.abs(pages._ymouse)>(ph/2-afa) && Math.abs(pages._xmouse-mpx)<afa) || preflip) {
flip = false;preflip = false;autoflip();
} else if(!preflip) {preflip = false;flipOK = false;if(sx<0 && pages._xmouse>0) flipOK =
true;if(sx>0 && pages._xmouse<0) flipOK =
true;flipOff = true;flip = false;
}}
}
function hittest() { //hittest at mouse clicks, if click is over the book -> determining turning direction -----------------------
var x=pages._xmouse;var y=pages._ymouse;var pmh = ph/2;
if(y<=pmh && y>=-pmh && x<=pw && x>=-pw) {//ha a megadott intervallumban klikkelunk, akkor lapozhatunk
var r = Math.sqrt(x*x+y*y);var a = Math.asin(y/r);var y = Math.tan(a)*pw;
64
if(y>0 && y>ph/2) y = ph/2;if(y<0 && y<-ph/2) y = - ph/2;oy = sy = y;r0 = Math.sqrt((sy+ph/2)*(sy+ph/2)+pw*pw);r1 = Math.sqrt((ph/2-sy)*(ph/2-sy)+pw*pw);
pageN = eval("pages.flip.p2.page");pageO = eval("pages.flip.p3");offs = -pw;pages.flip.fmask._x = pw;
if(x<-(pw-clickarea) && page>0) {//>-----> flip backward
pages.flip.p3._x = 0;hflip = checkCover(page,-1);setPages(page-2,page-1,page,page+1);ctear = pageCanTear[page-1];return -1;
}if(x>(pw-clickarea) && page<maxpage) {
//<-----< flip forwardpages.flip.p3._x = pw;hflip = checkCover(page,1);setPages(page,page+2,page+1,page+3);ctear = pageCanTear[page+2];return 1;
}} else return 0; //wrong click
}function checkCover(p,dir) {
if(hcover) {if(dir>0) {
if(p==(maxpage-2) || p==0) return true;
65
} else {if(p==maxpage || p==2) return true;
}}return false;
}function corner() {
var x = Math.abs(pages._xmouse);var y = Math.abs(pages._ymouse);if(x>(pw-afa) && x<pw && y>(ph/2-afa) && y<(ph/2)) {
return true;}return false;
}
function oef() {_global.mcnt++; //main counter incrase (need
for some page effect);
if(!flip && corner()) { //corner mouseoverpreflip = true;if(!autoflip()) preflip = false;
}if(preflip && !corner()) {
preflip = false;flip = false;flipOK = false;flipOff = true;
}getm();if(aflip && !preflip) {
y = (ay += (sy-ay)/(gflip? gs: ps ));
66
acnt += aadd;ax -= aadd;if(Math.abs(acnt)>pw) {
flipOK = true;flipOff = true;flip = false;aflip = false;
}}if(flip) { //page turning is in
progress...if(tear) {
x = tox;y = (toy += teard);teard *= 1.2;if(Math.abs(teard)>1200) {
flipOff = true;flip = false;
}} else {
x = (ox += (x-ox)/(gflip? gs: ps ));y = (oy += (y-oy)/(gflip? gs: ps ));
}calc(x,y); //positioning pages and
shadows}if(flipOff) { //terminating page turning
effect... (comlplete turning... dropped on the other side)if(flipOK || tear) {
x = (ox += (-sx-ox)/(gflip? gs: es ));y = (oy += (sy-oy)/(gflip? gs: es ));calc(x,y);
67
if(x/-sx > 0.99 || tear) {//we are done with turning, so stop all turning issue...
flip = false;flipOK = flipOff = false;pages.pgrad._visible =
pages.flip._visible = false;//_quality = "BEST"; //if
quality is decrased during turning effect, you must reset its default value!
if(tear) { //if tear: remove page!!!
removePage((sx<0)? page: page+1);
page += (sx<0)? -2: 0;} else {
page += (sx<0)? -2: 2;//and tourning pages at pagenumber level...
}if(gskip) page = gtarget;setPages(page,0,0,page+1);tear = false;
if(gpage>0 && !gskip) {//gotoflip active -> is there another flipping left?
gpage--;autoflip();
} else gflip = gskip = false;}
} else { //terminating page turning effect... (incomlplete turning... dropped on the dragged side)
x = (ox += (sx-ox)/3);
68
y = (oy += (sy-oy)/3);calc(x,y);if(x/sx > 0.99) { //we
are done with turning, so stop all turning issue...flip = false;flipOff = false;aflip = false;pages.pgrad._visible =
pages.flip._visible = false;//_quality = "HIGH"; //if
quality is decrased during turning effect, you must reset its default value!
setPages(page,0,0,page+1);//no change at pagenumbers..
}}
}}
function calc(x,y) { //positioning pages and shadows by x,y reference points ------
if(hflip) { //hardflip...var xp = (sx<0)? -x: x;if(xp>0) {
sp2._visible = false;sp3._visible = true;scalc(sp3,x);
} else {sp3._visible = false;sp2._visible = true;scalc(sp2,x);
}pages.flip.setMask(null);
69
pages.flip._visible = true;pages.flip.fgrad._visible = false;pages.flip.p2._visible = pages.flip.p3._visible =
false;return;
} else pages.flip.fgrad._visible = true;
//normal flipping process--------------------var rr0 = Math.sqrt((y+ph/2)*(y+ph/2)+x*x);var rr1 = Math.sqrt((ph/2-y)*(ph/2-y)+x*x);if((rr0>r0 || rr1>r1) && !tear) {// we can tear off pages
now:) // so reference points must be recalculated!if(y<sy) { // k1-gyel kell osszehasonlitani!
var a = Math.asin((ph/2-y)/rr1);y = (ph/2-Math.sin(a)*r1);x = (x<0)? -Math.cos(a)*r1:
Math.cos(a)*r1;if(y>sy) {
if((sx*x)>0) y = sy, x = sx;else y = sy, x = -sx;
}if((rr1-r1)>tlimit && ctear) {
teard = -5;tear = true;tox = ox = x;toy = oy = y;
}} else { // k0-val kell osszehasonlitani!
var a = Math.asin((y+ph/2)/rr0);y = Math.sin(a)*r0-ph/2;x = (x<0)? -Math.cos(a)*r0:
Math.cos(a)*r0;if(y<sy) {
70
if((sx*x)>0) y = sy, x = sx;else y = sy, x = -sx;
}if((rr0-r0)>tlimit && ctear) {
teard = 5;tear = true;tox = ox = x;toy = oy = y;
}}
}if((sx<0 && (x-sx)<10) || (sx>0 && (sx-x)<10)) {
if(sx<0) x = -pw+10;if(sx>0) x = pw-10;
}
//calculating flipping processpages.flip._visible = true;pages.flip.p3shadow._visible = pages.pgrad._visible
= !tear;pages.flip.p2._visible = pages.flip.p3._visible = true;//equation of the linevar vx = x-sx;var vy = y-sy;var a1 = vy/vx;var a2 = -vy/vx;
cx = sx+(vx/2);cy = sy+(vy/2);//trigonometriai szamitasok//calculating rotation of the page, and the masksvar r = Math.sqrt((sx-x)*(sx-x)+(sy-y)*(sy-y));var a = Math.asin((sy-y)/r);
71
if(sx<0) a = -a;ad = a/AM; //in degreepageN._rotation = ad*2;r = Math.sqrt((sx-x)*(sx-x)+(sy-y)*(sy-y));rl = (pw*2);if(sx>0) { //flip forward
pages.mask._xscale = 100;nx = cx-Math.tan(a)*(ph/2-cy);ny = ph/2;if(nx>pw) {
nx = pw;ny =
cy+Math.tan(Math.PI/2+a)*(pw-cx);}pageN.pf._x = -(pw-nx);pages.flip.fgrad._xscale = (r/rl/2)*pw;pages.pgrad._xscale = -(r/rl/2)*pw;pages.flip.p3shadow._xscale = (r/rl/2)*pw;
} else { //flip backwardpages.mask._xscale = -100;nx = cx-Math.tan(a)*(ph/2-cy);ny = ph/2;if(nx<-pw) {
nx = -pw;ny =
cy+Math.tan(Math.PI/2+a)*(-pw-cx);}pageN.pf._x = -(pw-(pw+nx));pages.flip.fgrad._xscale = -(r/rl/2)*pw;pages.pgrad._xscale = (r/rl/2)*pw;pages.flip.p3shadow._xscale = -(r/rl/2)*pw;
}pages.mask._x = cx;
72
pages.mask._y = cy;pages.mask._rotation = ad;pageN.pf._y = -ny;pageN._x = nx+offs;pageN._y = ny;pages.flip.fgrad._x = cx;pages.flip.fgrad._y = cy;pages.flip.fgrad._rotation = ad;pages.flip.fgrad._alpha = (r>(rl-50))? 100-(r-(rl-50))*2:
100;pages.flip.p3shadow._x = cx;pages.flip.p3shadow._y = cy;pages.flip.p3shadow._rotation = ad;pages.flip.p3shadow._alpha = (r>(rl-50))?
100-(r-(rl-50))*2: 100;pages.pgrad._x = cx;pages.pgrad._y = cy;pages.pgrad._rotation = ad+180;pages.pgrad._alpha = (r>(rl-100))? 100-(r-(rl-100)): 100;pages.flip.fmask.page._x = pageN._x;pages.flip.fmask.page._y = pageN._y;pages.flip.fmask.page.pf._x = pageN.pf._x;pages.flip.fmask.page.pf._y = pageN.pf._y;pages.flip.fmask.page._rotation = pageN._rotation;
}
function scalc(obj,x) { //hardflip calcif(x<-pw) x=-pw;if(x>pw) x=pw;var a = Math.asin( x/pw );var rot = a/AM/2;var xs = 100;var ss = 100*Math.sin( rotz*AM );
73
x = x/2;var y = Math.cos(a)*(pw/2)*(ss/100);placeImg(obj, rot, ss, x, y)pages.pgrad._visible = pages.flip._visible = true;pages.pgrad._xscale = x;pages.pgrad._alpha = pages.flip.p3shadow._alpha = 100;pages.flip.p3shadow._xscale = -x;pages.flip.p3shadow._x = 0;pages.flip.p3shadow._y = 0;pages.flip.p3shadow._rotation = 0;pages.pgrad._x = 0;pages.pgrad._y = 0;pages.pgrad._rotation = 0;
}
function placeImg(j, rot, ss, x, y) {var m = Math.tan( rot*AM );var f = Math.SQRT2/Math.sqrt(m*m+1);var phxs = 100*m;var phRot = -rot;;var xs = 100*f;var ys = 100*f;j.ph.pic._rotation = 45;j.ph.pic._xscale = (phxs<0)? - xs: xs;j.ph.pic._yscale = ys*(100/ss);j.ph._rotation = phRot;j.ph._xscale = phxs;j._yscale = ss;j._x = x;j._y = y;j._visible = true;
}
74
function setPages(p1,p2,p3,p4) { //attach the right page "image" at the right place:)
p0 = p1-2; //pages for transparency...p5 = p4+2;if(p0<0) p0=0;if(p5>maxpage) p5=0;
if(p1<0) p1=0; //visible pagesif(p2<0) p2=0;if(p3<0) p3=0;if(p4<0) p4=0;trace("setpages ->("+p0+") "+p1+","+p2+","+p3+","+p4+"
("+p5+")");
if(transparency) {pages.p0.page.pf.ph.pic._x = -(p0-1)*pw;pages.p0.page.pf.ph._y = -ph/2;
}
pages.p1.page.pf.ph.pic._x = -(p1-1)*pw;pages.p1.page.pf.ph._y = -ph/2;
if(hflip) { //hardflip pages are specials!!! pages.flip.hfliph.sp2._visible = 1;pages.flip.hfliph.sp3._visible = 1;
sp2 = eval("pages.flip.hfliph.sp2");sp2.ph.pic.pic._x = -(p2-1)*pw - pw/2;
sp3 = eval("pages.flip.hfliph.sp3");sp3.ph.pic.pic._x = -(p3-1)*pw - pw/2;
} else {
75
pages.flip.hfliph.sp2._visible = 0;pages.flip.hfliph.sp3._visible = 0;
sp2 = eval("pages.flip.p2.page.pf.ph.pic");pages.flip.p2.page.pf.ph.pic._x = -(p2-1)*pw;pages.flip.p2.page.pf.ph._y = -ph/2;
sp3 = eval("pages.flip.p3.page.pf.ph.pic");pages.flip.p3.page.pf.ph.pic._x = -(p3-1)*pw;pages.flip.p3.page.pf.ph._y = -ph/2;
}
pages.p4.page.pf.ph.pic._x = -(p4-1)*pw;pages.p4.page.pf.ph._y = -ph/2;
if(transparency) {pages.p5.page.pf.ph.pic._x = -(p5-1)*pw;pages.p5.page.pf.ph._y = -ph/2;
}}
function resetPages() {setPages(page,0,0,page+1);
}
function autoflip() { //start auto flip!if(!aflip && !flip && !flipOff && canflip) {//only when all conditions fits our needs...
acnt = 0aamp = Math.random()*(ph/2)-(ph/4);var x= gflip? (gdir*pw)/2: ((pages._xmouse<0)?
-pw/2: pw/2);
76
var y= Math.random()*ph-(ph/2);//random starty
var y = Math.random()*(ph/2)-(ph/4);var pmh = ph/2;var r = Math.sqrt(x*x+y*y);var a = Math.asin(y/r);var yy = Math.tan(a)*pw;if(y>0 && y>ph/2) y = ph/2;if(y<0 && y<-ph/2) y = - ph/2;oy = sy = yy;ax = (pages._xmouse<0)? -pw/2: pw/2;var l = ((ph/2)-y);ay = y+((Math.random()*2*l)-l)/2; //page
turnig style randomizing
//trace("autoflip from "+ax+","+ay);offs = -pw;var hit = 0;if(x<0 && page>0) {
pages.flip.p3._x = 0;hflip = (hcover && gskip)? gtarget==0:
checkCover(page,-1);if(!(preflip && hflip)) {
if(gskip) setPages(gtarget,gtarget+1,page,page+1);
else setPages(page-2,page-1,page,page+1);
}hit = -1;
}if(x>0 && page<maxpage) {
pages.flip.p3._x = pw;
77
hflip = (hcover && gskip)? gtarget==maxpage: checkCover(page,1);
if(!(preflip && hflip)) {if(gskip)
setPages(page,gtarget,page+1,gtarget+1);else
setPages(page,page+2,page+1,page+3);}hit = 1;
}if(hflip && preflip) {
hit = 0;preflip = false;return false;
}if(hit) {
anim._visible = false;flip = true;flipOff = false;ox = sx = hit*pw;pages.flip.setMask(pages.mask);aadd = hit*(pw/(gflip? 5:10 ));
//autoflip takes 10 frames to be done!!!aflip = true;pages.flip.fmask._x = pw;if(preflip) {
oy = sy = (pages._ymouse<0)? -(ph/2): (ph/2);
}r0 =
Math.sqrt((sy+ph/2)*(sy+ph/2)+pw*pw);r1 =
Math.sqrt((ph/2-sy)*(ph/2-sy)+pw*pw);
78
pageN = eval("pages.flip.p2.page");pageO = eval("pages.flip.p3");oef();return true;
}} else return false;
}
function getm() { //get x,y reference points depending of turning style: manual/auto
if(aflip && !preflip) {x = ax;y = ay;
} else {x = pages._xmouse;y = pages._ymouse;
}}
function gotoPage(i,skip) { //quickjump to the page number i
i = getPN(i); //i = target page
gskip = (skip==undefined)? false: skip; //skip pages
if(i<0) return false;var p = int(page/2);var d = int(i/2);if(p!=d && canflip && !gflip) {//target!=current page
if(p<d) { //go forwardgdir = 1;gpage = d-p-1;
79
} else { //go backwardgdir = -1
gpage = p-d-1;}gflip = true;if(gskip) gtarget = d*2, gpage = 0;autoflip();
} else gskip = false;}function getPN(i) { //get the right page number
var find = false;for(j=1;j<=maxpage;j++) {
if(i==pageNumber[j]) {i=j;find = true;break;
}}if(find) return i;else return -1;
}function removePage(i) {
trace("remove page "+i);i = (Math.floor((i-1)/2)*2)+1;removedPages.push(pageNumber[i], pageNumber[i+1]);
// remove dynamic clips from pagesvar init = (transparency)? 0 : 1;for(var k=init;k<pageClips.length;k++) {
for(var m=i;m<=pageOrder.length;m++) {p = eval(pageClips[k]+".p"+m);if(m==i || m==i+1) p.removeMovieClip();else p._x += -pw*2;
80
}}// same for hard coversfor(var k=i;k<=pageOrder.length;k++) {
var p2 = eval("pages.flip.hfliph.sp2.ph.pic.pic.p"+k);
var p3 = eval("pages.flip.hfliph.sp3.ph.pic.pic.p"+k);
if(k==i || k==i+1) p2.removeMovieClip(), p3.removeMovieClip;
else p2._x += -pw*2, p3._x += -pw*2;}
for(j=(i+2);j<=(maxPage+1);j++) {pageOrder[j-2]=pageOrder[j];pageCanTear[j-2]=pageCanTear[j];pageNumber[j-2]=pageNumber[j];
}trace("removed pages "+i+","+(i+1));trace(removedPages.join(", "));maxPage -= 2;
}
//----------------- PUT YOUR CODE HERE ----------
/* you can use these functions:
gotoPage( destinationPageNo, skip ); //quick jump to the page number: destinationPageNo; values = 0-maxpages; skip: boolean; if true, pages will be skipped to the destination!
81
autoflip();//start autoflip (direction is calculated
from _xmouse)
canflip //it's a variable. setting itsvalue to false disables flipping
other functions of page turning is automatic;
WARNING!!!if you want to unload/reload tha pageflip,
before unloading call function: removeML(); to remove mouse listener!*/
� ActionScript pada frame 8// remove clip to track loading of pagesloader.removeMovieClip();
// set the masks for each page to the correct sizevar init = (transparency)? 0 : 1;for(var i=init;i<pageClips.length;i++) {
pageClips[i]._parent.mask._width = pw;pageClips[i]._parent.mask._height = ph;
}pages.flip.hfliph.sp2.ph.pic.mask._width = pw;pages.flip.hfliph.sp2.ph.pic.mask._height = ph;
pages.flip.hfliph.sp3.ph.pic.mask._width = pw;pages.flip.hfliph.sp3.ph.pic.mask._height = ph;
Mouse.addListener(mousecontroll);
82
onEnterFrame = oef; //main function: handles page turning-------------------------------resetPages();reset();
function removeML() { //removes mouse listener//Call this function before
unloading the pageflip//if you don't do that, the next
time you load a//pageflip, the mouselistener
will not work!Mouse.removeListener(mousecontroll);
}
� ActionScript pada frame 9// everything is loaded and initiated,// set pages to visible and stop playheadpages._visible = 1;stop();
83
RIWAYAT HIDUP PENULIS
Penulis dilahirkan di Surabaya dari pasangan Mochammad Munif dan Ismiasih. Penulis merupakan anak pertama dari tiga bersaudara. Penulis mempunyai motto hidup : ”Friendship is the golden thred that ties all hearts together.” Penulis gemar membaca buku-buku non-fiksi, mempunyai kepribadian yang rendah hati dan selalu bersemangat, serta seseorang yang suka menolong siapa saja yang membutuhkan.
Riwayat Pendidikan :• SDN Pacarkeling 4 Surabaya• SLTP Negeri 9 Surabaya• SMU Negeri 7 Surabaya• PENS ITS – Tehnik Telekomunikasi
Pelatihan yang pernah diikuti :• Oracle Intro to SQL• Cisco Router• Applied Electronics
Nama : Iva Nur DianaTTL : Surabaya, 22 Oktober 1984
Alamat : Jl. Kalijudan Taruna II No.66c
Surabaya
No. Telp: 031 71367119 / 085648142952
Hobi : Mendengarkan musik, membaca buku fiksi.
E-mail : [email protected]
