PERANCANGAN APLIKASI 3 DIMENSI BUNGA KERING BERBASIS MULTIMEDIA PADA CV. BONSAI INTERIOR
Oleh :
DESTY WIDIATI KURNIANINGSIH 206091004033
PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2011 i
PERANCANGAN APLIKASI 3 DIMENSI BUNGA KERING BERBASIS MULTIMEDIA PADA CV. BONSAI INTERIOR Skripsi Sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer Pada Fakultas Sains Dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta Oleh : DESTY WIDIATI KURNIANINGSIH 206091004033 Menyetujui,
Pembimbing I
Pembimbing II
Yusuf Durachman, M.Sc, MIT
Elsy Rahajeng, S.Kom, M.T.I
NIP. 19710522 20064 1 002
Mengetahui, Ketua Program Studi Teknik Informatika
Yusuf Durrachman, M.Sc, MIT. NIP. 19710522 200604 1 002
ii
PENGESAHAN UJIAN Skripsi yang berjudul ”Perancangan Aplikasi 3 Dimensi Bunga Kering Berbasis Multimedia Pada CV. Bonsai Interior”, yang ditulis oleh Desty Widiati Kurnianingsih, NIM 206091004033 telah diuji dan dinyatakan lulus dalam sidang Munaqosyah, Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta pada hari Senin tanggal 27 Juni 2011. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer Strata Satu (S1) Pada Program Studi Teknik Informatika Jakarta, Juni 2011 Tim Penguji, Penguji I
Penguji II
Ir. Bakri La Katjong, MT,M.Kom NIP. 470 035 765
Arini, MT NIP. 197601312009012001
Tim Pembimbing, Pembimbing I
Pembimbing II
Yusuf Durachman, M.Sc,MIT NIP. 19710522 200641002
Elsy Rahajeng, S.Kom,M.T.I
Mengetahui, Dekan Fakultas Sains dan Teknologi
Dr. Syopiansyah Jaya Putra, M.Sis NIP. 19680117 2001121001
Ketua Program Studi Teknik Informatika
Yusuf Durrachman, M.Sc,MIT NIP. 19710522 2006041002 iii
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENARBENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGAI
SKRIPSI
ATAU
KARYA
ILMIAH
PADA
PERGURUAN
TINGGI ATAU LEMBAGA MANAPUN.
Jakarta, Juni 2011
Desty Widiati Kurnianingsih NIM : 206091004033
iv
LEMBAR PERNYATAAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS Sebagai Mahasiswa Universitas Islam Negeri Syarif Hidayatullah Jakarta, yang bertanda tangan dibawah ini saya : Nama NIM
: Desty Widiati Kurnianingsih : 206091004033
Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Islam Negeri Syarif Hidayatullah Jakarta Hak Bebas Royalti NonEkslusif (Non-exclusive Free Right) atas karya ilmiah saya yang berjudul : Perancangan Aplikasi 3 Dimensi Bunga Kering Berbasis Mulrimedia Pada CV. Bonsai Interior. Dengan Hak Bebas Royalti Non Ekslusif ini Universitas Islam Negeri Syarif Hidayatullah Jakarta berhak untuk menyimpan, mengalihmedia/format-kan, mengelola dalam bentuk pangkalan data (database), mendistribusikannya, dan menampilkan/mempublikasikannnya di Internet atau media lain untuk kepentingan akademis tanpa perlu meminta ijin dari saya selama tetap mencantumkannama saya sebagai peneliti/ pencipta. Saya bersedia untk menanggung secara pribadi, tanpa melibatkan pihak Universitas Islam Negeri Syarif Hidayatullah Jakarta, segala bentuk tuntutan hukum yang timbul atas pelanggaran Hak Cipta dalam karya ilmiah saya ini. Demikian pernyataan ini saya buat dengan sebenarnya. Dibuat di Pada tanggal
: Jakarta : 27 Juni 2011
Yang menyatakan
(Desty Widiati Kurnianingsih)
v
ABSTRAK DESTY WIDIATI KURNIANINGSIH,
Perancangan Aplikasi 3 Dimensi
Bunga Kering Berbasis Multimedia Pada CV. Bonsai Interior. (Di bawah bimbingan Yusuf Durachman, M.Sc, MIT dan Elsy Rahajeng, S.Kom, M.T.I) Perkembangan multimedia berjalan sangat pesat seiring dengan perkembangan teknologi komputer. Multimedia banyak diterapkan dalam dunia bisnis, contohnya bidang periklanan, pendidikan, promosi produk, media presentasi dan lain-lain. Teknologi multimedia merupakan salah satu metode yang efektif untuk digunakan sebagai media penyampaian informasi karena memberikan kemudahan-kemudahan bagi pengguna dan aplikasi multimedia mudah dijalankan. Dalam hal ini, CV. Bonsai Interior ingin ikut serta memanfaatkan aplikasi multimedia untuk dapat membantu peningkatan hasil penjualan dalam bentuk aplikasi 3 Dimensi produk bunga kering. Tujuan perancangan aplikasi 3D bunga kering ini adalah membantu perusahaan memberikan informasi kepada konsumen agar lebih memahami produk yang dipasarkan. Metode penelitian yang digunakan dalam pembuatan aplikasi 3D bunga kering berbasis multimedia ini yaitu metode pengumpulan data meliputi studi kepustakaan, studi lapangan meliputi observasi, wawancara dan kuesioner. Dalam pengembangan aplikasi perancangan 3 Dimensi bunga kering ini dikembangkan dengan metode pengembangan aplikasi multimedia menurut Luther yaitu concept, design, material collecting, assembly, testing dan distribution. Hasil aplikasi 3 Dimensi bunga kering ini dikemas dalam bentuk CD (Compact Disc) interaktif sebagai media penyampaian informasi yang berbeda. Kata Kunci : Multimedia, 3D, Interaktif
vi
KATA PENGANTAR
Segala puji dan syukur penulis panjatkan kehadirat Allah SWT dan atas segala karunia Allah yang telah melimpahkan rahmat dan nikmat-Nya, sehingga penulis dapat menyelesaikan skripsi dan dapat menyusun skripsi yang dapat bermanfaat bagi diri penulis pada khususnya dan bermanfaat bagi adik-adik kelas. Penyusunan skripsi ini dibuat untuk memenuhi salah satu syarat kelulusan pada Fakultas Sains dan Teknologi program studi Strata-1 (S1) Teknik Informatika Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta. Pembahasan yang penulis bahas mengenai “PERANCANGAN APLIKASI 3 DIMENSI BUNGA KERING BERBASIS MULTIMEDIA PADA CV. BONSAI INTERIOR”. Penulis menyadari bahwa dalam penyusunan skripsi ini masih banyak kekurangan sehinggga penulis banyak mendapat dorongan, bimbingan dan pengarahan dari berbagai pihak. Pada kesempatan ini, penulis mengucapkan terima kasih dengan tulus kepada semua pihak yang telah membantu terselesaikannya penulisan ini, yaitu kepada : 1. Kedua orangtuaku tercinta dan adikku yang selalu memberikan motivasi, dukungan dan do’a kepada penulis untuk segera menyelesaikan penyusunan skripsi ini. 2. Bapak Prof. DR. Komarudin Hidayat selaku Rektor Universitas Islam Negeri Syarif Hidayatullah Jakarta.
vii
3. Bapak DR. Syopiansyah Jaya Putra, M. Sis selaku Dekan Fakultas Sains dan Teknologi UIN Jakarta. 4. Bapak Yusuf Durachman, M.Sc, M.IT selaku Ketua Program Studi Teknik Informatika dan sekaligus dosen Pembimbing I penulis. 5. Ibu Viva Arifin, MMSi, selaku Sekretaris Jurusan Teknik Informatika 6. Ibu Elsy Rahajeng, S.Kom, M.T.I. selaku dosen Pembimbing II yang bersama-sama dengan Bapak Yusuf Durachman, M.Sc, M.IT selaku dosen Pembimbing I. 7. Seluruh staf Akademik Fakultas Sains dan Teknologi. 8. Teman-teman TI A dan B serta teman-teman SI angkatan 2006 : Dewi, Dian, Lutfi, Agung, Oki, Jatendra, Dj, Hasan, Anom, Indah, Gita, Rohadi, Once, Dara, Eka, Ncil, Indi dan semuanya yang tidak bisa penulis sebutkan satu persatu. Jangan menyerah ya semangat 9. Sepupuku Mba santi dan Bang Toni yang sudah menyediakan penginapan selama Penulis menyelesaikan Studi Lapangan di Bandung. 10. Bapak H. Drs. Anwar selaku Direktur CV. Bonsai Interior. 11. Seluruh Karyawan CV. BONSAI INTERIOR, terimakasih atas semua informasi dan bantuan dalam proses penyusunan skripsi ini. 12. Rekan-rekan dan semua pihak yang tidak dapat disebutkan oleh penulis satu-persatu , yang telah memberikan bantuan secara langsung maupun tidak langsung dalam menyelesaikan laporan skripsi ini.
viii
Penulis menyadari bahwa masih banyak kelemahan dan kekurangan yang terdapat dalam skripi ini, yang masihharus diperbaiki. Akhir kata penulis berharap skripsi ini dapat bermanfaat bagi kita semua. Wassalam. Jakarta,
20 Juni 2011 Penulis
ix
DAFTAR ISI HALAMAN JUDUL……………………………………………………….. i LEMBAR PENGESAHAN PEMBIMBING……………………………… ii LEMBAR PENGESAHAN UJIAN ……….……………………………… iii LEMBAR PERNYATAAN……………………………………………….. iv ABSTRAK…………………………………………………………………. v KATA PENGANTAR…………………………………………………….. vi DAFTAR ISI………………………………………………………….…..... ix DAFTAR GAMBAR……………………………………………………….xiv DAFTAR TABEL…………………………………………………………. xvii DAFTAR LAMPIRAN……………………………...……………………..xviii
BAB 1
PENDAHULUAN 1.1
Latar Belakang……………………………………………... 1
1.2
Rumusan Masalah…………………………………………..2
1.3
Batasan Masalah…………………………………………… 3
1.4
Tujuan dan Manfaat………………………………………... 3 1.4.1 Tujuan Penulisan……………………………………3 1.4.2 Manfaat Penulisan…………………………………..4 1.4.2.1 Bagi Penulis………………………………... 4 1.4.2.2 Bagi Universitas…………………………….4 1.4.2.3 Bagi Pihak Lain.…………………………….5
1.5
Metodologi Penelitian………………………………………5 x
1.5.1 Metode Pengumpula Data…………………………..5 1.5.2 Metode Pengembangan Multimedia……………...... 6 1.6 BAB II
Sistematika Penulisan……………………………………… 8 LANDASAN TEORI
2.1
Multimedia………………………………………………….10 2.1.1 Definisi Multimedia………………………………... 10 2.1.2 Komponen Multimedia ...………………………….. 11 2.1.3 Tujuan Penggunaan Multimedia…...………………. 14 2.1.4 Manfaat Penggunaan Multimedia...………………... 15
2.2
Multimedia Interaktif…………………………………….… 16 2.2.1 Kriteria Multimedia Interaktif………………………17
2.3
Interaksi Manusia dan Komputer…...………………………18 2.3.1 Interaksi……………………………………………..18 2.3.2 Manusia.……………………………………………..18 2.3.3 Komputer……………………………………………19 2.3.4 Definisi Interaksi Manusia dan Komputer………......19 2.3.5 Pengertian Antarmuka Pemakai……………………..20
2.4
Perancangan………………………………………………... 20
2.5
Desain 2 Dimensi…………………………………………….21
2.6
Desain 3 Dimensi…………………………………………….21
2.7
Teknik 3 Dimensi…………………………………………….21
2.8
State Transition Diagram (STD)………………………….....28
2.9
Storyboard………..………………………………………….30 xi
2.10
Flowchart View……………………………………………..30
2.11
Flowchart (Bagan Alir)……………………………………..33
2.12
Struktur Navigasi………………………………………….. 35
2.13
3D Studio Max……………………………………………...36
2.14
Macromedia Flash 8………………………………………...39
2.15
Adobe Photoshop CS 3……………………………………..43 2.15.1 Memulai Adobe Photoshop CS 3………………….. 44 2.15.2 Area Kerja Adobe Photoshop CS 3……………….. 45
2.16
Adobe Premiere Pro CS 3………………………………….. 49
2.17
Nero Express 8……………………………………………... 51
2.18
Studi Sejenis………………………………………………... 51
BAB III 3.1
METODOLOGI Metode Pengumpulan Data…………………………………57 3.1.1 Studi Kepustakaan ……………………...…………. 57 3.1.2 Studi Lapangan ………………………….………… 58
3.2
a.
Observasi………...………………………….58
b.
Wawancara………...………………………..59
c.
Kuesioner………...………………………….60
Metode Pengembangan Aplikasi Multimedia……………
60
3.2.1 Alasan penggunaan Luther………………………… 60 3.2.1 Mekanisme Alur Penelitian ……………………… 61 a.
Konsep (Concept)……..…………………………… 63 xii
BAB IV 4.1
b.
Perancangan (Design)…………………………….. 63
c.
Pengumpulan Bahan (Material Collecting)………... 64
d.
Pembuatan (Assembly)……………………………... 64
e.
Pengujian (Testing)………………………………….64
f.
Distribusi (Distribution)…………………………... 65
PERANCANGAN DAN IMPLEMENTASI Gambaran Umum………………………………...………….66 4.1.1 Profil Perusahaan………………………………….....66 4.1.2 Struktur Organisasi………………………………......68 4.1.3 Visi…………………………………………..……….68 4.1.4 Misi……………………………………………….......69
4.2
Konsep (Concept)………………………………………….....69
4.3
Perancangan (Design)………………………………………...72 4.3.1 Perancangan Storyboard……………………………...72 4.3.2 Perancangan Flowchart……………………………....77 4.3.3 Perancangan Struktur Navigasi…………………….....81 4.3.4 Perancangan STD (State Transition Diagram)…...…..82 4.3.5 Perancangan Antarmuka Pemakai (User Interface).......89
4.4
Pengumpulan Bahan (Material Collecting)………………….97
4.5
Pembuatan (Assembly)……………………………………....100
4.6
Tes (Testing)……………………………………………..…..118 4.6.1 Running Program……………………………………119 xiii
4.6.2 Blackbox Testing…………………………………….122 4.7
Distribusi dan Evaluasi……………………………….……...126 4.7.1 Spesifikasi Untuk Menjalankan Program………..…..126 4.7.2 Cara Pengoperasian Program…………………….......127 4.7.3 Evaluasi…………………………………………........127
BAB V
PENUTUP
5.1
Kesimpulan……………………………………………….....129
5.2
Saran……………………………………………………… 130
DAFTAR PUSTAKA……………………………………………………. 131 LAMPIRAN
xiv
DAFTAR GAMBAR
Gambar 2.1
Antarmuka Pemakai………………………………………...20
Gambar 2.2
Proses Translasi 3 Dimensi………….…………...…………26
Gambar 2.3
Proses Rotasi 3 Dimensi ………………………...………… 27
Gambar 2.3
Proses Penskalaan 3 Dimensi …………………………….. 27
Gambar 2.4
Struktur Navigasi Linear ……………………………….
Gambar 2.5
Struktur Navigasi Hierarkis………………………….......... 35
Gambar 2.6
Struktur Navigasi Nonlinier………………………….......... 36
Gambar 2.7
Struktur Navigasi Komposit………………………….......... 36
Gambar 2.8
Area Kerja 3D Studio Max………………………...……… 37
Gambar 2.9
Logo Flash 8……………………………………………….. 39
35
Gambar 2.10 Area Kerja Flash 8………………………………………... 41 Gambar 2.11 Start Page Photoshop…………………………………….... 44 Gambar 2.12 Area Kerja Photoshop CS 3……………………………… 45 Gambar 2.13 Area Kerja Adobe Premiere Pro………………………...…. 50 Gambar 2.14 Start Page Nero 8…………………………………………... 51 Gambar 3.1
Siklus Pengembangan Aplikasi Multimedia……………….. 61
Gambar 3.2
Tahapan Perencanaan Alur Aplikasi…………..……………62
Gambar 4.1
Struktur Organisasi CV. Bonsai Interior............................. 68
Gambar 4.2
Storyboard Layar Intro.......................................................... 72
Gambar 4.3
Storyboard Layar Home...................................................... 73
Gambar 4.4
Storyboard Layar Profile..................................................... 73 xv
Gambar 4.5
Storyboard Layar Produk Bunga Kering................................74
Gambar 4.6
Storyboard Layar Gallery.......................................................74
Gambar 4.7
Storyboard Layar Video......................................................... 75
Gambar 4.8
Storyboard Layar Contact.................................................... 75
Gambar 4.9
Storyboard Layar Author....................................................... 76
Gambar 4.10 Flowchart Menu Utama......................................................... 77 Gambar 4.11 Flowchart Menu Produk Bunga Kering................................. 78 Gambar 4.12 Flowchart Menu Gallery.........................................................79 Gambar 4.13 Flowchart Menu Video...........................................................80 Gambar 4.14 Struktur Navigasi Hierarchiecal Model..................................81 Gambar 4.15 Rancangan STD Menu Utama................................................82 Gambar 4.16 Rancangan STD Menu Profile................................................83 Gambar 4.17 Rancangan STD Menu Produk Bunga Kering........................84 Gambar 4.18 Rancangan STD Menu Gallery................................................85 Gambar 4.19 Rancangan STD Menu Video................................................. 86 Gambar 4.20 Rancangan STD Menu Contact...............................................87 Gambar 4.21 Rancangan STD Menu Author................................................88 Gambar 4.22 Rancangan Intro......................................................................89 Gambar 4.23 Rancangan Menu Utama.........................................................90 Gambar 4.24 Rancangan Menu Home..........................................................91 Gambar 4.25 Rancangan Menu Profile.........................................................92 Gambar 4.26 Rancangan Menu Produk Bunga Kering.................................93 Gambar 4.27 Rancangan Menu Gallery........................................................94 xvi
Gambar 4.28 Rancangan Menu Video..........................................................95 Gambar 4.29 Rancangan Menu Contact.......................................................96 Gambar 4.30 Rancangan Menu Author........................................................97 Gambar 4.31 Background Aplikasi............................................................. 101 Gambar 4.32 Intro Aplikasi......................................................................... 101 Gambar 4.33 Pengkodean Program............................................................. 102 Gambar 4.34 Pemodelan Bunga Kering...................................................... 104 Gambar 4.35 Tampilan Menu Material........................................................105 Gambar 4.36 Tampilan Menu Omni Light...................................................106 Gambar 4.37 Pemberian Camera pada Gambar............................................107 Gambar 4.38 Pemberian Animasi pada Bunga............................................ 108 Gambar 4.39 Tampilan Menu Render..........................................................108 Gambar 4.40 Hasil 3 Dimensi Bunga Kering.............................................. 109 Gambar 4.41 Penggabungan Video dan Suara............................................ 112 Gambar 4.42 Penggabungan Komponen Multimedia................................. 112 Gambar 4.43 Halaman Intro........................................................................ 113 Gambar 4.44 Halaman Home.......................................................................114 Gambar 4.45 Halaman Profile......................................................................114 Gambar 4.46 Halaman Produk Bunga Kering............................................ 115 Gambar 4.47 Halaman Gallery.................................................................... 116 Gambar 4.48 Halaman Video...................................................................... 116 Gambar 4.49 Halaman Contact.................................................................... 117 Gambar 4.50 Halaman Author..................................................................... 118 xvii
Gambar 4.51 Running Intro......................................................................... 119 Gambar 4.52 Running Home....................................................................... 119 Gambar 4.53 Running Profile..................................................................... 120 Gambar 4.54 Running Produk Bunga Kering............................................. 120 Gambar 4.55 Running Video 3 Dimensi......................................................121 Gambar 4.56 Running Contact.....................................................................121 Gambar 4.57 Running Author..................................................................... 122
xviii
DAFTAR TABEL
Tabel 2.1
Simbol Input / Output……………………………..……….. 31
Tabel 2.2
Simbol Processing……………………...…………………...32
Tabel 2.3
Simbol Pembantu……………………...……………….…... 32
Tabel 2.4
Simbol Flowchart……………………...…………………... 33
Tabel 2.5
Simbol Menggambar Flowchart…………….……………... 34
Tabel 4.1
Deskripsi Konsep Aplikasi………………………………... 69
Tabel 4.2
Pengujian Blackbox ………………...……………………... 126
Tabel 4.3
Hasil Kuesioner……………………...……………………...128
xix
DAFTAR LAMPIRAN
LAMPIRAN 1 : Wawancara……………………………..………………. 133 LAMPIRAN 2 : Kuesioner……………………...…………………........... 135 LAMPIRAN 3 : Pembuatan Aplikasi…………………..…………….…... 136 LAMPIRAN 4 : Material Collecting……………………………………... 139 LAMPIRAN 5 : Blackbox Testing…..………………….………………... 146 LAMPIRAN 6 : SK Penelitian……..………………….………………... 170 LAMPIRAN 7 : SourceCode Program………………….………………... 171
xx
BAB 1 PENDAHULUAN
1.1
Latar Belakang Kemajuan teknologi saat ini telah mempengaruhi berbagai segi kehidupan, Hal ini dibuktikan dengan banyaknya perubahan yang mengarah pada kemajuan, khususnya pada sektor ekonomi. Teknologi informasi yang merupakan bagian penting dalam proses bisnis, telah membawa perubahan pada setiap perusahaan. Dengan demikian menuntut setiap
perusahaan
untuk
dapat
beradaptasi
dengan
baik
demi
mempertahankan kelangsungan perusahaan itu sendiri. Perubahan ini menyebabkan perkembangan dunia usaha menjadi semakin pesat yang pada gilirannya menimbulkan persaingan yang ketat antar perusahaan dalam menjaring konsumen. Adanya persaingan ini menuntut perusahaan untuk dapat membuat perencanaan dan menentukan kebijakan yang tepat sehinggga dapat menghadapi persaingan demi mempertahankan kelangsungan perusahaan. Perancangan Aplikasi 3 Dimensi merupakan salah satu cara yang dapat digunakan untuk kepentingan perusahaan, sehingga dengan demikian perusahaan dapat mempertahankan eksistensinya.
1
Multimedia sebagai salah satu bagian dari kemajuan teknologi informasi, dapat dijadikan sebagai alat presentasi bisnis, dalam hal ini bisnis dibidang bunga kering. Perusahaan yang bergerak dibidang bunga kering ini diharapkan akan lebih berkembang apabila memanfaatkan kemajuan teknologi yang berbentuk Aplikasi 3 dimensi yang berbasiskan Multimedia. Penggunaan multimedia akan dapat membuat terobosan baru dalam menciptakan kemasan data dengan menyajikan informasi melalui cara yang berbeda, bukan dengan teks biasa tetapi dengan animasi teks, gambar, suara dan video. Berdasarkan
uraian
diatas,
penulis
mengembangkan
topik
mengenai “Perancangan Aplikasi 3 Dimensi Bunga Kering Berbasis Multimedia Pada CV. Bonsai Interior”.
1.2
Perumusan Masalah Berdasarkan latar belakang tersebut, penulis mengidentifikasi masalah yang ada sebagai berikut: Bagaimana membuat suatu aplikasi multimedia 3 Dimensi dengan teknik modeling, texturing dan lighting mengenai produk bunga kering pada CV. Bonsai Interior untuk membantu penyebaran informasi produk?
2
1.3
Batasan Masalah Dalam penulisan skripsi ini, penulis membatasi pembahasan hanya pada: 1.
Perancangan bunga kering 3 Dimensi CV. Bonsai Interior
2.
Aplikasi ini menampilkan informasi tentang CV. Bonsai Interior antara lain : Home, Profile, Visi dan misi, Struktur Organisasi, Produk Bunga Kering, Gallery, Video Rendering bunga kering dan Contact.
3.
Aplikasi ini tidak menampilkan video keseluruhan produk bunga kering secara lengkap, namun menampilkan video produk bunga kering yang dianggap dapat mewakili beberapa jenis bunga kering.
4.
Penggunaan perangkat lunak Macromedia Flash, 3D Studio Max dalam pembuatan bunga kering 3 dimensi.
5.
Perancangan bunga kering 3 Dimensi dengan tahap modelling, material atau texturing pada objek bunga kering dan Lighting dengan omni.
1.4
Tujuan dan Manfaat 1.4.1 Tujuan Tujuan penyusunan skripsi ini yaitu : 1. Pengembangan aplikasi 3 dimensi yang mampu memudahkan dalam menyampaikan informasi tentang produk bunga kering.
3
2. Memahami dalam pembuatan aplikasi bunga kering 3 dimensi, dari tahapan metode Luther. 3. Membantu perusahaan dalam proses pemasaran produk sehingga dapat
meningkatkan kualitas perusahaan dalam
proses bisnis yang lebih baik. 1.4.2 Manfaat Bagi Penulis 1. Mengimplementasikan ilmu yang penulis peroleh selama di bangku perkuliahan dan di aplikasikan kedalam bentuk penulisan karya ilmiah, dengan membuat suatu program aplikasi berbasis multimedia. 2. Bertambahnya
wawasan
penulis
tentang
aplikasi
pengembangan sarana promosi bunga kering menggunakan 3D Studio Max dan Actionscript. 3. Sebagai salah satu syarat dalam menyelesaikan studi Program Studi Teknik Informatika Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta.
Bagi Universitas 1.
Menambah koleksi hasil penulisan.
2.
Mengetahui kemampuan mahasiswa dalam menguasai materi yang telah diperoleh di Universitas.
4
Bagi Pihak Lain 1. Memberikan penyebaran informasi bunga kering 3D yang interaktif dan efisien. 2. Mempermudah dalam menyampaikan informasi produknya. 3. Meningkatkan daya saing dengan perusahaan lain yang sejenis dalam mendapatkan konsumen.
1.5
Metodelogi Penelitian 1.5.1 Metode Pengumpulan Data 1.
Studi Kepustakaan Dilakukan dengan cara membaca dan mempelajari bukubuku yang berhubungan dengan multimedia serta bukubuku yang mendukung dengan topic yang akan dibahas dalam penyusunan skripsi ini. Selain itu penulis juga mengumpulkan
data
dari
situs-situs
internet
yang
berhubungan dengan skripsi penulis. 2.
Studi Lapangan a. Observasi Yaitu melakukan pengumpulan data informasi tentang bunga kering yang ada di CV. Bonsai Interior.
b. Wawancara 5
Yaitu
dengan
melakukan
wawancara
dengan
Direktur CV. Bonsai Interior. c. Kuesioner Dilakukan dengan membagikan kuesioner / angket kepada konsumen yang datang ke CV. Bonsai Interior dan pihak CV. Bonsai Interior.
1.5.2
Metode Pengembangan Multimedia Menurut Luther (Dalam Ariesto Hadi Sutopo, 2003 : 32) pengembangan system multimedia dilakukan berdasarkan 6 tahap, yaitu : 1. Konsep (Concept) Tahap konsep (concept) yaitu menentukan tujuan, termasuk identifikasi audien, macam aplikasi (presentasi, interaktif dan lain-lain), tujuan aplikasi (informasi, hiburan, pelatihan dan lain-lain),
dan
spesifikasi
umum.
Dasar
aturan
untuk
perancangan juga ditentukan pada tahap ini ,seperti ukuran aplikasi, target dan lain-lain. 2. Perancangan (Design) Maksud dari tahap perancangan (design) adalah
membuat
spesifikasi secara rinci mengenai arsitektur proyek, gaya dan kebutuhan bahan (material) untuk proyek, seperti perancangan storyboard, perancangan flowchart, perancangan struktur 6
navigasi, perancangan diagram transisi, perancangan tampilan dan lain-lain. 3. Pengumpulan Bahan (Material Collecting) Pada tahap ini dilakukan pengumpulan bahan (material) seperti: clipart, image, animasi, audio, video, berikut pembuatan grafik, foto, dan lain-lain yang diperlukan untuk tahap berikutnya. Pengumpulan material dapat dilakukan paralel dengan tahap pembuatan (assembly). 4. Pembuatan (Assembly) Tahap pembuatan (assembly) merupakan tahap dimana seluruh objek multimedia dibuat. Pembuatan aplikasi berdasarkan flowchart, storyboard, struktur navigasi atau diagram objek yang berasal dari tahap design. 5. Pengujian (Testing) Tahap testing dilakukan setelah tahap pembuatan dan seluruh bahan (material) telah dimasukkan. Biasanya pada tahap awal dilakukan testing secara modular untuk memastikan apakah hasilnya seperti yang diinginkan. Aplikasi yang telah dihasilkan harus dapat berjalan dengan baik di lingkungan pengguna (client), dimana pengguna dapat merasakan adanya kemudahan dan manfaat dari aplikasi tersebut serta dapat menjalankan sendiri terutama untuk aplikasi yang interaktif.
7
6. Distribusi (Distribution) Pada tahap ini akan digunakan dengan mesin yang berbeda, penggandaan menggunakan floppy disk, CD-ROM atau media penyimpanan lainnya. Tahap distribusi juga merupakan tahap evaluasi terhadap suatu produk multimedia, diharapkan akan dapat dikembangkan sistem multimedia yang lebih baik di kemudian hari.
1.6
Sistematika Penulisan Dalam penyusunan skripsi ini, pembahasan yang penulis sajikan terbagi dalam : BAB I
PENDAHULUAN Bab ini berisi tentang latar belakang masalah, rumusan masalah, batasan masalah, tujuan dan manfaat penulisan, metodologi penelitian, dan sistematika penulisan.
BAB II
LANDASAN TEORI Bab ini berisi tentang teori-teori yang digunakan dalam penulisan skripsi ini , pengertian multimedia, konsep multimedia, elemen dan implementasi multimedia serta perangkat lunak pendukung multimedia.
8
BAB III
METODOLOGI PENELITIAN Pada bab ini berisi mengenai metodologi perancangan yang digunakan dalam mengembangkan aplikasi promosi produk multimedia.
BAB IV
PERANCANGAN DAN IMPLEMENTASI Pada bab ini berisikan tentang gambaran umum perusahaan, dan
perancangan
konsep
pengembangan
aplikasi.
Spesifikasi sistem yang digunakan dalam pembuatan aplikasi baik software maupun hardware serta implementasi program promosi produk berbasiskan multimedia. BAB V
PENUTUP Bab ini merupakan bab terakhir yang menjelaskan kesimpulan-kesimpulan dan saran- saran perbaikan yang berhubungan dengan masalah yang dibahas oleh penulis.
9
BAB II LANDASAN TEORI
2.1
Multimedia 2.1.1 Definisi Multimedia 1.
Menurut Ariesto Hadi Sutopo, suatu komputer multimedia adalah komputer yang mempunyai alat output seperti biasanya yaitu display dan hardcopy, dengan rekaman audio berkualitas tinggi, animasi dan rekaman video
2.
Menurut
Rosch, multimedia adalah kombinasi
dari
komputer dan video 3.
Menurut McCormick, multimedia secara umum merupakan kombinasi tiga elemen yaitu suara, gambar dan teks
4.
Menurut Turban dkk, multimedia adalah kombinasi dari paling sedikit dua media input dan output dari data, media ini dapat berupa audio (suara dan musik), animasi, video, teks, grafik dan gambar
5.
Menurut Robin dan Linda, multimedia merupakan alat yang dapat menciptakan presentasi yang dinamis dan interaktif yang mengkombinasikan teks, grafik, animasi, audio dan video.
10
6.
Menurut Fred T Hofstetter, multimedia adalah pemanfaatan komputer untuk membuat dan menggabungkan teks, grafik, audio, gambar bergerak (video dan animasi) dengan menggunakan link dan tool yang memungkinkan pemakai melakukan
navigasi,
berinteraksi,
berkreasi
dan
berkomunikasi (M. Suyanto, 2003) 7.
Dari beberapa definisi multimedia, dapat disimpulkan bahwa Multimedia merupakan kombinasi dari teks, grafis, seni, suara animasi dan video yang dikirimkan oleh komputer atau peralatan elektronik lain.
2.1.2 Komponen Multimedia Menurut Ariesto Sutopo Hadi (2003), multimedia terdiri dari beberapa komponen, yaitu : 1. Teks Teks merupakan dasar dari pengolahan kata dan informasi berbasis
multimedia.
membutuhkan
tempat
Media
paling
penyimpanan
sederhana paling
dan kecil.
Dipresentasikan dengan jenis huruf yang beragam agar harmonis dengan elemen multimedia lainnya. 2. Gambar Bitmap Gambar merupakan sarana yang sangat baik untuk menyajikan informasi. Bitmap adalah representasi spasial dari objek yang 11
disusun sebagai matriks nilai numerik yang merepresentasikan setiap titik atau piksel. Bitmap baik digunakan untuk gambargambar rumit yang membutuhkan rincian halus. 3. Grafik Vektor Vektor merupakan representasi spasial dari objek yang disusun dari bangun-bangun grafis seperti garis, persegi panjang, elip, segi banyak dan sebagainya. Yang ditempatkan secara matematis dengan koordinat, ukuran, ketebalan sisi dan pola pengisian pada bidang. Vektor baik untuk menyimpan kartun dan gambar-gambar yang tidak fotorealistik. 4. Animasi Animasi adalah penayangan frame-frame gambar secara cepat untuk menghasilkan kesan gerakan. Teks dan gambar memiliki keterbatasan dalam menyampaikan suatu informasi, dengan menggunakan animasi dapat membantu menyajikan informasi yang sulit disampaikan dalam bentuk teks atau gambar saja.
Macam-macam animasi, antara lain : a. Animasi Motion Tween, merupakan animasi yang dibuat dengan perubahan gerak sebuah objek secara halus, kita hanya membuat keyframe awal dan keyframe akhir sebagai pergerakan objek. 12
b. Animasi Frame by Frame, merupakan animasi yang dibuat dari beberapa rangkaian frame tunggal yang membentuk setiap gerakan, misalnya serangkaian frame bergerak 12 frame per detik. Karena 12 frame per detik merupakan ambang batas, kurang dari itu maka yang akan kita lihat adalah gambar kabur. c. Animasi Color Tween, merupakan animasi yang menampilkan color tween berupa perubahan warna (tint) dan alpha atau penggabungan antara animasi motion tween dan alpha. d. Animasi Shape Tween, merupakan animasi yang menampilkan perubahan objek satu ke objek yang lain sering juga disebut dengan efek morphing. 5. Suara atau Audio Suara atau audio adalah fenomena fisik yang dihasilkan oleh pergetaran materi. Kategori-kategori audio yaitu ucapan (suara orang berbicara), musik (hasil perdengaran alat musik), efek suara (suara lainnya,seperti tembakan, gelas pecah, halilintar, dll). Audio membantu memperjelas pengertian dari informasi dari suatu teks, gambar atau video dan memberikan efek dramatis. 6. Video
13
Video seperti animasi, tetapi disimpan dalam format khusus yang dapat menyimpan adegan dunia nyata atau rekaan dengan komputer. Dari elemen multimedia lainnya video yang paling kompleks, paling memerlukan persyaratan hardware yang tinggi dan membutuhkan penyimpanan yang jauh lebih besar. Video dapat menyajikan gambar bergerak dengan kualitas tinggi. 2.1.3 Tujuan Penggunaan Multimedia Menurut Ariesto Sutopo Hadi (2003), multimedia dapat digunakan untuk bermacam-macam bidang pekerjaan, tergantung dari kreatifitas untuk mengembangkannya. Setelah mengetahui definisi dari multimedia serta elemen-elemen multimedia yang ada, maka dapat diketahui bahwa tujuan dari penggunaan multimedia adalah sebagai berikut : 1. Multimedia
dalam
penggunaanya
dapat
meningkatkan
efektivitas dari penyampaian suatu informasi 2. Penggunaan multimedia dalam lingkungan dapat mendorong partisipasi, keterlibatan serta eksplorasi pengguna tersebut. 3. Aplikasi multimedia dapat merangsang panca indera, karena dengan penggunaannya multimedia akan merangsang beberapa indera penting manusia. 4. Dalam pengaplikasiaanya multimedia akan sangat membantu penggunanya, terutama bagi pengguna awam. 14
2.1.4 Manfaat Penggunaan Multimedia Menurut M. Suyanto, aplikasi multimedia di perusahaan di berbagai bidang bisnis yaitu : 1. Bidang produksi Multimedia dalam bidang produksi, khususnya dalam rumah produksi seperti film, televisi, radio dan musik melibatkan peralatan multimedia. 2. Bidang Pemasaran Penerapan multimedia di perusahaan yang menonjol tertuju pada aktifitas pemasaran, khususnya aktifitas promosi. Aktivitas promosi meliputi periklanan, promosi penjualan, public relation dan penjualan langsung termasuk penjualan melalui internet. Kelebihan multimedia adalah menarik indera dan menarik minat, karena merupakan gabungan antara penglihatan atau pandangan, suara dan gerakan.
3. Bidang Publishing Banyak informasi dapat dipublikasikan secara elektronik dan tersedia untuk pemakai. Menyajikan setiap materi yang ringkas dalam kualitas yang lebih baik dengan menggunakan grafik, animasi, audio dan video. Biaya untuk membuat dan mendistribusikan sebuah dokumen lebih rendah daripada menggunakan metode tradisional berupa cetakan. Dengan 15
multimedia, dokumen dapat dikelola, diupdate dan dipelihara lebih mudah dan lebih murah. Dibandingkan materi cetak, publikasi multimedia dapat memberikan nilai tambah bagi pemakai, lebih dapat tersedia pada setiap waktu dan setiap tempat, interaktif, transparan dengan menggunakan hyperlink dan format multimedia.
2.2
Multimedia Interaktif Menurut Sutopo (2003), media presentasi pada umumnya tidak dilengkapi alat untuk mengontrol yang dilakukan oleh pengguna. Presentasi berjalan sekuensial (berurutan) sebagai garis lurus sehingga disebut linier multimedia (multimedia linier). Contoh multimedia jenis ini adalah program tv dan film. Presentasi linier sesuai digunakan bila jumlah audiens lebih dari satu orang. Tetapi bila menggunakan satu komputer untuk satu orang, maka diperlukan untuk kontrol dengan keyboard, mouse, atau alat penunjuk lainnya. Hal ini disebut interaktif, dan multimedia yang dapat menangani interaktif pengguna disebut interactive multimedia (multimedia interaktif). Dalam bayak aplikasi, pengguna dapat memilih apa yang akan dikerjakan selanjutnya, bertanya dan mendapatkan jawaban yang mempengaruhi komputer untuk mengerjakan fungsi selanjutnya. Setiap pilihan interaktif dapat dibuat dengan software multimedia.
16
Multimedia interaktif adalah suatu multimedia yang dilengkapi dengan alat pengontrol yang dapat dioperasikan oleh pengguna, sehingga pengguna dapat memilih apa yang dikehendaki untuk proses selanjutnya. 2.2.1
Kriteria Multimedia Interaktif Thorn (1995) mengajukan 6 kriteria untuk menilai suatu multimedia interaktif, antara lain : 1. Kemudahan navigasi, yaitu sebuah program harus dirancang sesederhana mungkin, sehingga user tidak perlu belajar komputer lebih dahulu 2. Kandungan pengetahuan yang jelas 3. Pengetahuan dan presentasi informasi, untuk menilai isi dari program itu sendiri. Apakah program telah memenuhi kebutuhan si user atau belum 4. Integrasi media dimana media harus mengintegrasikan aspek pengetahuan 5. Artistik dan Estetika, yakni program harus mempunyai tampilan yang menarik dan estetika yang baik 6. Fungsi secara keseluruhan, program yang dikembangkan harus memberikan informasi yang diinginkan oleh user
17
2.3
Interaksi Manusia dan Komputer 2.3.1
Interaksi Interaksi membantu manusia, apa yang terjadi antara user dan sistem komputer. Sistem interaksi menerjemahkan antara apa yang diinginkan oleh user terhadap sistem yang ada. Diilustrasikan bahwa jika user ingin membuat kalimat “Human and Computer Interaction” maka user harus terlebih dahulu tahu program apa yang dapat digunakan untuk menuliskan kalimat tersebut. Jika user tidak mengetahui program apa yang harus digunakannya maka akan terjadi kesalah-pahaman antara user dengan sistem. Jika user menggunakan program yang tepat, user akan dapat mengetikkan kalimat tersebut dengan menggunakan piranti keyboard. Hubungan antara user dan komputer dijembatani oleh antarmuka pengguna (user interface). (Sudarmawan dan Ariyusandi, 2007)
2.3.2
Manusia Manusia dipandang sebagai system yang memproses informasi yang bisa dijelaskan sebagai berikut : a. Informasi diterima dan ditanggapi dengan proses masukan keluaran (input-output) b. Informasi disimpan didalam ingatan (memory) c. Informasi diproses dan diaplikasikan dengan berbagai cara
18
2.3.3
Komputer Komputer didefinisikan sebagai peranti elektronik yang dapat dipakai untuk mengolah data dengan perantaraan sebuah program yang mampu memberikan informasi dan hasil dari pengolahan tersebut. Komputer dapat pula diartikan sebagai suatu mesin yang menerima input untuk diproses dan menghasilkan output. (Sudarmawan dan Ariyusandi, 2007)
2.3.4
Definisi Interaksi Manusia dan Komputer Menurut Irfan Subakti (2006), tidak ada teori umum dan terpadu mengenainya, tetapi menurut Hewett 1996, Interaksi Manusia Komputer (IMK) atau Human Computer Interaction (HCI) adalah sebuah disiplin ilmu yang mempelajari perancangan, implementasi dan evaluasi sistem komputasi interaktif dan berbagai aspek terkait (Insap Santoso, 2004). Menurut Sudarmawan dan Ariyusandi (2007), Human Computer
Interaction
(HCI)
adalah
antarmuka
pengguna
(interface), yang merupakan bagian dari sistem yang dikendalikan oleh user untuk mencapai dan melaksanakan fungsi-fungsi suatu sistem. Suatu sistem interaktif yang baik akan menghasilkan suatu rancangan yang baik pula, sehingga pemakai dapat menggunakan sistem interaktif tersebut dengan lancer. Sebaliknya, sistem 19
interaktif yang kurang baik akan menghasilkan rancangan yang kurang baik pula, sehingga menyebabkan pemakai mendapatkan kesulitan dalam menggunakannya karena tampilan yang tidak user friendly. User friendly maksudnya tampilan yang memudahkan pemakai (user) untuk mengakses atau berinteraksi secara mudah dan tidak menyusahkan si pemakai.
2.3.5 Pengertian Antarmuka Pemakai Fokus interaksi manusia dan komputer adalah perancangan dan evaluasi antarmuka pemakai (user interface). Antarmuka pemakai adalah bagian sistem komputer yang memungkinkan manusia berinteraksi dengan komputer. Manusia
Antarmuka Pemakai
Komputer
Gambar 2.1 Antarmuka Pemakai
2.4
Perancangan Perancangan itu adalah proses penerapan berbagai teknik dan prinsip yang bertujuan untuk mendefinisikan sebuah peralatan, satu proses atau satu sistem secara detail yang membolehkan dilakukan realisasi fisik (Pressman, 2001). Perancangan adalah aktifitas kreatif menuju sesuatu yang baru dan berguna yang tidak ada sebelumnya (Soewondo B. Soetedjo) 20
2.5
Desain 2 Dimensi Desain 2 Dimensi adalah ruang yang hanya mengenal dua parameter dimensi, yaitu panjang dan lebar (Arief Ramadhan, S.Kom dkk, 2006) Dalam konsep 2 Dimensi, kita tidak bisa mendapatkan dimensi ketebalan. Dalam 2 Dimensi, kita akan mengenal dua sumbu koordinat atau axis, yaitu sumbu X dan sumbu Y.
2.6
Desain 3 Dimensi Berbeda dengan desain 2 Dimensi yang hanya mengenal 2 paramater yaitu panjang dan lebar. Dalam konsep 3 Dimensi, kita bisa mendapatkan dimensi ketebalan. Objek 3 Dimensi dipresentasikan didalam sebuah bidang yang terbilang memiliki 3 buah koordinat axis yang terdiri dari sumbu X, Y dan Z. Axis X adalah axis mendatar atau horizontal, axis Y adalah axis tegak atau vertical, sedangkan axis Z adalah axis yang menembus layar monitor ke dalam (menunjukkan kedalaman ruang).
Manfaat Desain 3 Dimensi Menurut Aditya (2008), manfaat Desain 3 dimensi antara lain : 1. Architecture Design Dengan 3 dimensi, orang arsitek akan sangat terbantu dalam menuangkan ide-ide kreatif desain dengan sangat cepat dan 21
mudah. Berbeda bila hanya mengandalkan kemampuan konvensional seperti sketsa yang mempunyai keterbatasan dalam memandang ke view 3 dimensi, maka dengan 3D akan dapat melihat bentuk rancangan bangunan dari segala sisi pandangan. Disamping itu dengan 3 dimensi dapat diberikan texture maupun lighting menyerupai seperti kondisi aslinya. 2. Interior Design Sama halnya seperti Arsitek, designer Interior pun juga akan sangat terbantu dengan Teknologi 3D. Sebagai seoran Visualizer pun dapat menjadi pendamping dari seorang sang designer Interior dalam memvisualisasikan rancangan ruangruang yang akan diwujudkan nantinya. Dengan 3 dimensi, setiap ruang yang dirancang akan dapat divisualisasikan ruang yang sebenarnya. Layaknya bermain game The Sims mendekati yang dapat menata perabotan, elemen dekoratif interior lainnya seperti lukisan, foto, patung dan lainnya dengan sangat leluasa dan mudah.
3. Landscape Design Dalam mewujudkan design landscape pun, baik seorang Arsitek Landscape ataupun Visualizer, 3 D akan mampu memvisualkan secara jelas dan detail sekalipun. Penataan kontur tanah, vegetasi, perkerasan, gazebo, kolam maupun 22
elemen landscape yang lainnya, akan membuat pekerjaan desain anda menjadi mudah dan menyenangkan.
4. Cartoon Design Kalau dulu kartun (cartoon) dibuat dengan sketsa tangan lalu meningkat ke aplikasi software 2D, sekarang kartun menapaki era baru dengan teknologi 3D. Trend ini semakin meningkat dikarenakan dengan 3D, cartoon akan semakin tampak hidup dan nyata, beratraksi menghibur penonton yang melihatnya. Aplikasi 3D saat ini, sudah semakin memudahkan para designer dan animator, bahkan yang pemula sekalipun untuk membuat kartun 3D, karena sudah banyak fitur-fitur penunjang pembuat kartun yang disediakan oleh setiap aplikai 3D. 5. Logo Design Tidak hanya cartoon, design dan animasi logo pun saat ini sudah memasuki era 3D. Artinya logo-logo saat ini sudah banyak yang ditampilkan dengan bentuk dan tampilan 3D. Sehingga logo terlihat lebih hidup, menarik dan tampil lebih memikat. Aplikasinya dapat dijumpai dibanyak hal seperti dibidang broadcast
atau TV, advertising, perkantoran,
industry, merk (brand), percetakan dan sebagainya. Intinya setiap
perusahaan
dan
juga
produk-produk
sangat
23
membutuhkan logo sebagai citra visual mereka dan 3D merupakan solusi tepat dalam memvisualkannya. 6. Stage Design Desain panggung (stage), biasanya banyak diperuntukkan untuk secara besar seperti : pernikahan (wedding), pameran, expo, seminar, workshop, pelatihan, peresmian (launching) dan lain sebagainya. Event-event tersebut sangat membutuhkan keberadaan
panggung
sebagai
sarana
utama
maupun
pendukungnya. Sehingga tentu membutuhkan sebuah design panggung yang bagus dan menarik yang akan menunjang bagi suksesnya sebuah event atau acara yang digelar. 7. Product Design Product design mencakup berbagai barang seperti produk Industri, pecah belah, mainan, komputer, alat komunikasi dan sebagainya, telah menjadikan 3D sebagai standar dalam memvisualkan design terbaru dari setiap produk yang akan dirilis dipasaran. Sebagai contoh misalkan sebuah perusahaan pembuat laptop yang akan mengeluarkan sebuah design laptop terbaru, maka bentuk design, material, tampilannya akan terlebih dahulu diwujudkan dengan media 3D. Sehingga bila telah disetujui, tinggal dibuat kedalam manufakturnya. Ini tentu saja akan menghemat biaya anggaran disamping juga dapat menghemat waktu dan tenaga produksi. 24
8. Stand Design Design stand biasanya berkolerasi dan berhubungan dekat dengan
sebuah
event,
walaupun
tidak
semua
event
menampilkan panggung. Untuk acara-acara besar yang juga menampilkan panggung umumnya akan membutuhkan 3D dalam memvisualkan bentuk dan design stand yang menarik dan tampil bagus nantinya. 9. Game Design Saat ini hamper semua game sudah ditampilkan dalam bentuk 3D. Ini dimaksudkan agar game dapat tampil lebih atraktif, hidup dan memikat hati para gamer. Dengan 3D, para gamer akan mendapat sensasi bermain game yang luar biasa, yang berdampak pada semakin meningkatnya minat, animo maupun antusiasme dalam memainkan game. 10. Furniture Design Dibidang desain furniture sudah banyak yang menggunakan teknologi 3D dalam merancang dan menampilkan bentuk dari suatu desain furniture terbaru. Pembuatan design yang detail dan rumit sekalipun dapat diselesaikan dengan pendekatan aplikasi 3D. Begitu juga dengan penerapan material yang dapat mendekati material aslinya sehingga design akan tampil lebih real dan hidup.
25
2.7
Teknik 3 Dimensi a. Penggeseran Sembarang titik pada bidang xyz bisa digeser ke sembarang tempat dengan menambah besaran pada arah sumbu x, y, dan sumbu z.
Gambar 2.2 Proses Translasi 3D b. Rotasi Pemutaran atau rotasi 3 dimensi lebih rumit dibandingkan pemutaran 2 dimensi, tetapi pada dasarnya sama yaitu bahwa pemutaran bisa dilaksanakan dengan memelih salah satu sumbu koordinasi sebagai sumbu putar.
26
Gambar 2.3 Proses Rotasi 3D c. Penskalaan Proses pembesaran atau perkecil gambar. Penskalaan bisa dilaksanakan ke arah x saja, ke arah y saja, ke arah z saja, atau kombinasi ketiga-tiganya.
Gambar 2.4 Proses Penskalaan 3D
27
2.8
State Transaction Diagram (STD) STD merupakan keadaan atau atribut yang mencirikan seseorang atau suatu benda pada waktu tertentu, bentuk keberadaan ataupun kondisi tertentu, misalkan menunggu instruksi berikutnya, menunggu mengisi password, dll. Menurut Kowal James (1998) STD merupakan suatu modeling tool yang menggambarkan sifat ketergantungan pada waktu dari suatu sistem. Pada mulanya hanya digunakan untuk menggambarkan suatu sistem yang memiliki sifat real-time, seperti : 1. Process control 2. Telephone switching system 3. High speed data acquisition system 4. Military command and control system
Keadaan Sistem Setiap kotak mewakili suatu keadaan dimana sistem mungkin berada didalamnya. State disimbolkan dengan symbol segi empat. Simbol State :
Perubahan Sistem
28
Untuk menghubungkan suatu keadaan dengan keadaan lain. Digunakan jika sistem memiliki transisi dalam perilakunya, maka hanya suatu keadaan dapat berubah menjadi keadaan tertentu. Simbol Transition State :
Kondisi dan Aksi Untuk melengkapi STD dibutuhkan dua hal tambahan, yaitu : kondisi sebelum keadaan berubah dan aksi dari pemakai untuk merubah keadaan.
Dibawah ini adalah ilustrasi dari kondisi dan aksi yang
ditampilkan disebelah anak panah yang menghubungkan dua keadaan.
Keadaan 1 Kondisi Awal
Keadaan 2
29
2.9
Storyboard Storyboard merupakan serangkaian sketsa (gambaran kartun) dibuat berbentuk persegi panjang yang menggambarkan suatu urutan (alur cerita) elemen-elemen yang diusulkan untuk aplikasi multimedia. (M. Suyanto). Menurut Iwan Binanto, storyboard merupakan pengorganisasian grafik, contohnya adalah sederetan ilustrasi atau gambar yang ditampilkan berurutan untuk keperluan visualisasi awal dari suatu file, animasi, atau urutan media interaktif termasuk interaktivitas web. (Binanto, 2010)
2.10
Flowchart View Flowchart view disebut juga diagram tampilan adalah diagram yang memberikan gambaran alir dari satu scene (tampilan) ke scene lainnya. Dalam flowchart view dapat dilihat komponen yang terdapat dalam suatu scene dengan penjelaan yang diperlukan. Flowchart view banyak digunakan dalam pengembangan multimedia interaktif. Hotkey yang dapat berbentuk teks, image atau button digunakan untuk menghubungkan dengan scene yang ditentukan. (Ariesto Hadi Sutopo, 2003) 1. Sistem Flowchart menurut Suyanto (2003) : a. Simbol untuk Input / Output Simbol
Keterangan Simbol dokumen file yang berupa kertas, misalnya : hasil print out, formulir, dsb
30
Simbol disk / drum yang merupakan direct acces storage untuk Input / Output Simbol hard disk yang merupakan direct acces storage untuk Input / Output
Simbol
pita
magnetic
yang
merupakan
sequential storage untuk Input / Output
Simbol Visual Display Unit (VDU) / Cathode Ray Tube (CRT) sebagai Input / Output
Tabel 2.1 Simbol Input / Output b. Simbol Untuk Processing Simbol
Keterangan
Menggambarkan proses
Proses penggabungan (Merge)
31
Proses pengurutan
Proses secara manual Proses pemasukan data melalui keyboard
Tabel 2.2 Simbol Processing
c. Simbol Pembantu Simbol
Keterangan Arah data / arus data Sambungan pada halaman yang sama
Sambungan pada halaman berbeda
Sambungan komunikasi
Tabel 2.3 Simbol Pembantu 32
d. Simbol Flowchart Simbol
Keterangan Mulai (START) atau Selesai (STOP)
Persiapan (PREPARATION ? INTIALIZTION Proses : Proses perhitungan (aritmatika), Proses Shift dan sebagainya Proses INPUT / OUTPUT
Keputusan (DECISION)
SUBROUTINE
Tabel 2.4 Simbol Flowchart
2.11
Flowchart (Bagan Alir) Flowchart adalah penggambaran tahapan proses dari suatu sistem, termasuk sistem multimedia (Suyanto 2003). Tabel 2.5 menunjukkan simbol yang digunakan dalam menggambar flowchart.
33
SIMBOL
NAMA
FUNGSI
TERMINATOR
Permulaan / akhir program
GARIS ALIR (FLOW LINE)
Arah aliran program
PREPARATION
Proses inisialisasi / pemberian harga awal
PROSES
Proses perhitungan / proses pengolahan data
INPUT / OUTPUT
Proses input / output data
DATA PREDEFINED PROCESS
Permulaan sub program / proses menjalankan sub program
VISUAL DISPLAY
Untuk menampilkan input /
UNIT (VDU)
output Perbandingan
DECISION
pernyataan,
penyeleksian
data
yang
memberikan
pilihan
untuk
langkah selanjutnya
ON PAGE CONNECTOR
Penghubung bagian-bagian flowchart yang berada pada satu halaman
Tabel 2.5 Simbol menggambar Flowchart
34
2.12
Struktur Navigasi Mendesain struktur navigasi, struktur navigasi memberikan gambaran link dari suatu halaman ke halaman lainnya struktur navigasi digunakan pada multimedia nonlinear. Terdapat 4 struktur navigasi dasar pada proyek mulltimedia, yaitu (Vaughan, 2004) a. Linier : Pengguna melakukan navigasi secara berurutan, dari frame atau bite informasi satu ke yang lainnya.
Gambar 2.5 Struktur Navigasi Linier
b. Hierarkis : Disebut juga ”linier dengan percabangan”, karena pengguna melakukan navigasi sepanjang cabang pohon struktur yang terbentuk oleh natural logic dari isi.
Gambar 2.6 Struktur Navigasi Hierarkis c. Nonlinier : Pengguna melakukan navigasi dengan bebas melalui isi proyek, tidak terikat dengan rute yang ditetapkan sebelumnya.
35
G Gambar 2.7 Struktur Navigasi Nonlinier d. Komposit : Pengguna melakukan navigasi dengan bebas (secara nonlinier), tetapi terkadang dibatasi oleh presentasi linier film atau informasi kritis dan atau pada data yang paling terorganisasi secara logis dalam suatu hierarki.
Gambar 2.8 Struktur Navigasi Komposit
2.13
3D Studio Max 8 3D Studio Max adalah software aplikasi yang dapat menghasilkan desain grafis 3 dimensi dengan kualitas dan kemampuan 36
professional. 3D Studio Max ini merupakan software pengolahan graphic yang dapat mewujudkan gagasan dan karya dalam bidang arsitektur menggunakan bantuan komputer (Andi, 2007) Area Kerja 3D Studio Max 8
Tittlebar
Menu bar
Main Toolba r
Comman d Pannel
Viewpor t
Keyframe
ViewportControl
Animation Control Gambar 2.9 Area Kerja 3D Studio Max 8
37
Keterangan : a. Main Toolbar Main toolbar merupakan toolbar yang berisi ikon-ikon untuk mengakses perintah 3D Studio Max 8. Main toolbar terdiri atas beberapa tombol. b. Menu Bar Menu bar merupakan menu utama dari 3D Studio Max yang terdapat perintah-perintah pokok seperti membuat file baru, menyimpan file dan sebagainya. c. Viewport Merupakan bidang kerja dari 3D Studio Max yang secara default viewport ini dibagi dalam empat bagian yaitu, top, front, left dan perspective. d. Command Pannel Command Pannel digunakan untuk melakukan pengaturan terhadap objek 3D Studio Max yang dibuat menggunakan parameter objek. Command panel dapat pula digunakan untuk mengakses perintah sebagaimana yang terdapat dalam menu bar atau menu tab. Hampir separuh fasilitas 3D Studio Max dapat diatur pada command panel. e. Animation Control Fasilitas untuk melakukan pengaturan objek animasi, berupa durasi dari animasi dan menjalankan animasi.
38
f. Viewport Control Merupakan navigasi viewport yang dapat memperbesar tampilan gambar atau objek dengan cara memperbesar viewport yang sedang aktif dan melihat bidang objek pada viewport yang tidak terlihat karena keterbatasan bidang.
2.14
Macromedia Flash 8
Gambar 2.10 Logo Flash 8 Macromedia Flash adalah software aplikasi untuk membuat animasi baik untuk keperluan internet, pembuatan film animasi, media presentasi, company profile, dsb. Dengan Macromedia Flash, web dapat dilengkapi dengan bermacam animasi, audio, dll. Animasi hasil dari Macromedia Flash dapat diubah kedalam format lain untuk digunakan pada pembuatan desain web yang tidak langsung mengadaptasi Flash. Macromedia Flash memiliki pemrograman ActionScript, dan dapat merupakan authoring tool berbasis timeline dan terstruktur . Macromedia Flash 8 merupakan kelanjutan dari Macromedia Flash MX 2004 (Flash 7). Pada Macromeia Flash 8 tersedia fasilitas yang dapat memudahkan kita untuk membuat animasi special effect seperti blur, explode, transisi ataupun transformasi.
39
Movie Flash terdiri atas grafik, teks, animasi dan aplikasi untuk situs web maupun presentasi multimedia. Semuanya tetap menggunakan grafik berbasis vector. Jadi aksesnya lebih cepat dan akan terlihat halus pada resolusi layar berapapun, selain itu juga mempunyai kemampuan untuk mengimport video, gambar, suara dan suara dari luar. Dengan
demikian
dapat
digunakan
pada
pengembangan
multimedia interaktif untuk produksi CD, jaringan, maupun penggunaan pada Web. Dalam multimedia dapat dilihat teks, gambar, animasi dan digital video bersama-sama tampil pada satu saat dan penggunaan button sebagai alat interaktif. Perkembangan multimedia yang pesat dapat dilihat dengan makin diperlukannya presentasi bisnis, menampilkan newsletter dalam internet dan menambahkan audio, video, teks dan lain-lain. Macromedia Flash adalah salah satu authoring tool untuk produksi multimedia dan internet. Flash tidak hanya menggabungkan elemen multimedia kedalam portable movie, tetapi disamping itu dengan ActionScript, Flash mempunyai kemampuan dalam membuat interactive scripting. (Ariesto Hadi Sutopo, 2003) Memulai Macromedia Flash 8 Untuk memulai program Macromedia Flash, klik tombol Start pada taskbar Windows XP. Kemudian klik All Program > Macromedia Flash 8.
40
Toolbar Menu Layer
Panel TimeLine
Panel Properties
Panel Properties
Tools
Panel Tambahan Frame
Panel Action
Panel Action
Stage
Gambar 2.11 Area Kerja Flash 8
Keterangan : a.
Toolbar Menu Toolbar Menu berisi perintah-perintah umum yang digunakan untuk mengoperasikan Macromedia Flash. Menu bar ini dapat diakses dengan cara mengklik langsung pada item menu bar yang bersangkutan. Misalnya untuk mengaktifkan menu File, dengan mengklik pada bagian kata File. 41
Selain itu dapat pula mengaktifkan menu ini dengan cara menekan tombol Alt pada keyboard ditambah dengan huruf yang digaris bawahi pada menu ini. Misalnya untuk mengaktifkan menu File, dengan menekan tombol Alt ditambah huruf F. b.
Tools Tools merupakan alat untuk membuat obyek animasi pada kanvas (stage). Tools merupakan komponen penting sehingga keberadaannya pada layar monitor sangat diperlukan.
c.
Panel Properties Berisi properties dari tools yang digunakan, yaitu antara lain ukuran serta posisi dari obyek yang ada di kanvas, efek color, dan lain-lain.
d.
Panel Action Merupakan tempat untuk menulis ActionSript. Macromedia Flash menggunakan ActionScript yang sudah mendukung OOP (Object Oriented Programming).
e.
Stage Stage (kanvas) digunakan sebagai obyek pembuatan animasi. Ukuran dan warna kanvas dapat diubah-ubah sesuai dengan keperluan.
f.
Time Line Time Line digunakan sebagai pengatur waktu dan pembentukan frame-frame animasi. Time Line merupakan komponen yang bertugas membuat pergerakan dari tiap-tiap item animasi, menggandakan 42
animasi, membuat lapisan (layer) animasi maupun pengatur waktu animasi. g.
Frame Frame berada di dalam Time Line. Frame bisa diubah menjadi keyframe dan sebaliknya. Keyframe adalah frame dimana kita mendefinisikan perubahan animasi termasuk frame action untuk memodifikasi movie.
h.
Layer Layer adalah seperti lembaran transparan yang bediri sendiri dan terlepas antara satu layer dengan layer lainnya. Jumlah layer yang dapat dibuat bergantung pada memori computer. Banyaknya layer tidak menambah ukuran File saat melakukan publish movie.
i.
Panel Tambahan Panel tambahan terdiri dari Color Mixer, Component, Library, Behaviour dan lain-lain. Bisa dimunculkan atau di sembunyikan. Panel-Panel tambahan tersebut berada pada ToolBar menu windows.
2.15
Adobe Photoshop CS 3 Adobe
Photoshop
CS
merupakan
kelanjutan
dari
Adobe
Photoshop 7.0. adalah perangkat lunak standar editing gambar professional,
yang
membantu
pengguna
bekerja
lebih
efisien,
mengeksploitasi kreatifitas dan menghasilkan gambar dengan kualitas 43
tertinggi untuk cetakan web atau yang lainnya. Adobe Photoshop menciptakan gambar menjadi mudah diakses kedata file, memperlancar desain web, lebih cepat dalam mengolah foto dan lebih banyak lagi. (M. Suyanto,2003)
2.15.1 Memulai Adobe Photoshop CS Untuk memulai program Adobe Photoshop CS , klik tombol Start pada taskbar Windows XP, kemudian klik All Program > Adobe Photoshop CS
Gambar 2.12
Start Page Photoshop
44
2.15.2 Area Kerja Adobe Photoshop CS 3 Menu Bar Tool Option
Wall Pallete
Toolbox Canvas
Pallete
Gambar 2.13 Area Kerja Photoshop a. Menu Bar Menu bar berisi semua menu yang disusun berdasarkan kesamaan tipe. Misalnya untuk memulai project baru, menyimpan file, semua menu yang berkaitan dengan layer berada di dalam menu layer, yang berkaitan dengan efek berada dalam menu filter dan sekumpulan perintah pada Photoshop.
45
b.
Tool option Tool option berisi pilihan tambahan yang berubah sesuai dengan tool yang digunakan.
c.
Wall Pallete Berisi kumpulan pallete-pallete yang disusun secara berurutan untuk
memudahkan
dalam
mengakses
pallete
yang
bersangkutan. d.
Toolbox Berisi berbagai macam tools yang digunakan untuk melakukan manipulasi gambar dalam Adobe Photosop, seperti : Marquee Tool Terdiri dari rectangular, elliptical, single row, dan single column marquee tool berfungsi untuk membuat seleksi pixel. Move Tool Berfungsi untuk menyeleksi atau mengaktifkan suatu obyek. Lasso Tool Terdiri dari lasso tool untuk menyeleksi obyek secara bebas, polygon lasso untuk membuat seleksi dengan cara mengklik pada masing-masing sudut obyek sehingga berbentuk suatu seleksi dan magnetic lasso tool yang 46
berfungsi untuk membuat seleksi berdasarkan kesamaan nilai warna pixel. Crop Tool Berfungsi untuk memotong dokumen berdasarkan area yang diseleksi dengan Crop Tool. Brush Tool Berfungsi untuk membuat obyek dengan model sapuan kuas. Slice dan Slice Select Tool Slice tool untuk membuat slice pada area kanvas tertentu, sedangkan slice select tool untuk menyeleksi slice yang ada di kanvas. Pencil Tool Berfungsi untuk membuat obyek dengan garis tegas seperti goresan pensil. Patch Tool Berfungsi untuk memperbaiki area gambar berdasarkan sample pixel tertentu. Eraser Tool Berfungsi untuk menghapus area pixel tertentu, Eraser tool terdiri dari Background Eraser tool dan Magic Eraser tool. Line Tool Untuk membuat obyek path berbentuk garis lurus. 47
Gradient Tool Berfungsi untuk mengisi area pixel tertentu dengan warna gradient secara linear, radial, dengan sudut tertentu (angle gradien), dengan warna gradien yang memantul (reflected gradien), atau dengan warna gradien berbentuk diamond. Paint Bucket Tool Berfungsi untuk mengisi area tertentu dengan warna solid berdasarkan warna foreground yang sedang aktif. Blur Tool Untuk mengaburkan area pixel tertentu pada gambar. Sharpen Tool Untuk menajamkan area pixel tertentu pada gambar. Selection Tool Terdiri dari Path dan Direct selection Tool berfungsi untuk menyeleksi poin-poin pada suatu obyek path. Type Tool Berfungsi untuk menulis teks. Pen Tool Berfungsi untuk menggambar obyek path. Ellips Tool Untuk membuat obyek path berbentuk bulat atau elips. Rectangle Tool Untuk membuat obyek path berbentuk segi empat. 48
Rounded Rectangle Tool Untuk membuat obyek path berbentuk segi empat engan sudut membulat Custom Shape Tool Untuk membuat obyek path dengan bentuk yang telah ditentukan dalam preset yang ada. Hand Tool Untuk menggerak-gerakkan area kanvas. Zoom Tool Untuk mengatur besar kecil tampilan yang sedang dikerjakan. Color Tool Berfungsi untuk menentukan warna foreground (latar depan) dan background (latar belakang). Jump to Image Ready Untuk berpindah ke program Image Ready. e.
Canvas Canvas adalah tempat
untuk membuat
dan mengedit
(mendesain) gambar / foto.
2.16
Adobe Premiere Pro CS 3 Adobe Premiere merupakan software editing video milik Adobe yang cukup popular sekarang ini. Dengan Adobe Premiere, kita bisa 49
mengolah video untuk iklan, video klip, film, maupun dokumentasi pribadi menjadi sangat menarik dengan mudah. Adobe Premiere Pro CS 3 merupakan versi terbaru Adobe Premiere yang dirilis 1 Juli 2007 yang lalu –versi 3.0. Kemudian pada 18 Oktober 2007 dikeluarkan versi 3.1.0. (Andi, 2008)
Area Kerja Adobe Premiere Pro CS 3 Panel Monitor Panel Project
Panel Effect
Panel Timeline
Tool Box
Gambar 2.14 Area Kerja Adobe Premiere Pro CS 3
50
2.17
Nero Express 8 Perangkat lunak yang akan digunakan untuk melakukan proses burning adalah Nero Express 8. Perangkat lunak ini diperlukan untuk mentrasfer file-file video ke dalam formal video CD.
Gambar 2.15 Start Page Nero 8
2.18
Studi Sejenis Telah terdapat beberapa penelitian yang merupakan rujukan dalam penelitian ini yaitu oleh Al Hadi Mustaqim pada tahun 2005 dengan judul Aplikasi Promosi Produk CV. R. Badasso Group Bandung Berbasis Multimedia dengan menggunakan metode pengembangan sistem menurut Luther. Hasil dari aplikasi tersebut mudah digunakan dengan navigasi menu
yang
cukup
mudah
dan
tidak
membingungkan
dalam 51
penggunaannya. Saran agar menggunakan spesifikasi perangkat keras yang dianjurkan untuk meningkatkan kinerja dari program aplikasi promosi tersebut. Dalam penelitian lain oleh Sapardiman pada tahun 2007 dengan judul Perancangan Profil Produk PT. Yamaha Motor Kencana Indonesia berbasis Multimedia dengan menggunakan metode pengembangan sistem aplikasi menurut M. Suyanto. Hasil dari aplikasi tersebut adalah CD produk profil PT. Yamaha Motor Kencana Indonesia, aplikasi ini mudah digunakan baik untuk kalangan dewasa ataupun anak-anak. Saran agar penambahan materi yang ada perlu dibuat lebih menarik seperti memasukkan iklan Yamaha untuk memikat konsumen dan agar aplikasi dikembangkan dalam berbasis web. Dalam penelitian lain oleh Muhammad Indra Wahyuddin pada tahun 2009 dengan judul Pengembangan Aplikasi Interaktif Dengan Teknologi Multimedia (Study Kasus : Dokumenn Ibadah Haji Departemen Agama) dengan menggunakan metode pengembangan system aplikasi menurut Luther. Hasil dari aplikasi tersebut adalah CD Interaktif yang menyajikan video perjalanan haji sehingga setiap calon jamaah haji akan mudah mempelajari dan memahami tata cara perjalanan haji yang sesuai dengan tuntunan Rasulullah. Saran agar aplikasi ini dapat dikembangkan dengan mengemas hasil aplikasi dalam bentuk DVD dan dapat dikembangkan dengan melengkapi dalil-dalil shahih yang berhubungan
52
dengan perjalanan haji atau untuk mengembangkan materilainnya sesuai kebutuhan. Pada
umumnya
penelitian-penelitian
lain
tentang
CD
Pembelajaran. Dalam penelitian oleh Hasyim Azhari pada tahun 2008 dengan judul Aplikasi Tuntunan Shalat berbasis Multimedia dengan menggunakan metode pengembangan sistem aplikasi menurut Luther. Hasil dari aplikasi ini adalah sebagai alat bantu ajar, berupa animasi cara melaksanakan shalat dengan baik dan benar. Saran agar tampilan lebih diperbesar untuk mempermudah umat yang memiliki masalah dalam penglihatan, agar aplikasi ditampilkan tidak hanya menampilkan animasi shalat untuk pria tetapi menampilkan animasi shalat untuk wanita juga. Dalam penelitian lain oleh Patmawati pada tahun 2008 dengan judul Perancangan Dan Implementasi Aplikasi Pembelajaran Dimensi Tiga Berbasis Multimedia Untuk Kelas X Sekolah Menengah Atas (Studi Kasus : MAN 12 Jakarta Barat) dengan menggunakan metode pengembangan sistem aplikasi menurut M. Suyanto. Hasil dari aplikasi ini yaitu alat bantu pembelajaran dimensi tiga yang dapat digunakan sebagai salah satu metode pembelajaran yang menarik minat belajar siswa. Saran dibutuhkan hardware speaker untuk mendengarkan suara atau musik sebagai pendukung aplikasi berbasis multimedia dan untuk pengembangan dapat diterapkan pada materi-materi pelajaran yang lainnya. Dalam penelitian lain oleh Fitriyani pada tahun 2008 dengan judul Aplikasi Pembelajaran perkembangan Tumbuhan Berbasis Multimedia 53
dengan menggunakan metode pengembangan sistem aplikasi menurut Luther yaitu concept, desain, material collecting, assembly, testing dan distribution. Pada skripsi ini penulis membahas tentang perkembangan tumbuhan seperti fotosintesis. Pengguna dari aplikasi ini dapat berinteraksi langsung di dalam proses pembelajarannya sehingga belajar menjadi lebih menyenangkan,
mudah
diingat,
dan
tidak
cepat
bosan
karena
menggunakan elemen-elemen multimedia. Dalam penelitian lain oleh Arif Rahman Hakim pada tahun 2009 dengan judul Aplikasi Pembelajaran Modus Pengalamatan Dan Operasi Aritmatika Pada Mikroprosesor Intel 8088 / 8086 dengan menggunakan metode
pengembangan
sistem
aplikasi
dengan
model
Waterfall
(perencanaan system, analisis, perancangan, pemrograman, pengujian, operasi dan pemeliharaan. Hasil dari aplikasi ini adalah perangkat lunak yang dijadikan sebagai media pendukung dalam proses pembelajaran mikroprosesor dasar. Saran agar modus pengalamatan yang dibahas dapat diperbanyak seperti menambahkan modus pengalamatan langsung, tidak langsung, base-plus-index, register relative dan indeks berkala. Serta operasi yang dibahas dalam perangkat lunak dapat diperbanyak, seperti menambahkan operasi aritmatika lainnya, operasi perbandingan dan sebagainya. Dalam penelitian lain oleh Abdul Basit pada tahun 2009 dengan judul Perancangan Aplikasi Kitab Dalail Al-Khairat Berbasis Multimedia dengan menggunakan metode pengembangan sistem aplikasi menurut 54
Luther. Hasil dari aplikasi ini yaitu aplikasi pembacaan kitab yang menampilkan
informasi
tentang
bacaan
amalan
harian
beserta
Muqaddimah, Asmaul Husna dan Asmaun Nabi SAW dan Doa, beberapa surat dalam Al-Quran, Qashidah Burdah, video dan gambar-gambar yang berkaitan dengan kitab Dalail Al-Khairat, serta bacaan ibadah lainnya. Saran agar tata bahasa Indonesianya perlu disempurnakan lagi terutama kata-kata yang berhubungan dengan istilah-istilah bahasa Arab dan agar aplikasi pembacaan kitab ini bisa dibuat lebih menarik lagi untuk dilihat. Dalam penelitian lain oleh Tri Ismiyani pada tahun 2009 dengan judul Aplikasi Pembelajaran Tajwid Untuk Madrasah Ibtidaiyah Kelas IV Berbasis Multimedia. Menggunakan metode pengembangan sistem dengan tahap Perancangan, Pra Pemrograman serta tahap Pengembangan dan Evaluasi. Hasil dari aplikasi ini adalah perangkat ajar yang mempelajari tajwid yang dapat menarik minat siswa karena mudah dipahami dan bersifat interaktif. Saran agar suara panduan dibuat lebih jelas lagi dan penambahan materi ilmu tajwid diluar materi yang sudah dibahas dan soal evaluasi disertai dengan rangking nilai tertinggi untuk memacu motivasi dan semangat siswa belajar lebih baik lagi. Dalam penelitian lain oleh Isna Marliana pada tahun 2010 dengan judul Aplikasi Pembelajaran HTML Berbasis Multimedia dengan Metode Computer Assisted Instruction untuk SMA 1 Barunawati Jakarta. Aplikasi ini menggunakan metode pengembangan sistem desain CAI oleh Roblyer dan Hall yang terdiri dari 3 fase yaitu : perancangan, pra-pemrograman 55
dan pemrograman. Pada skripsi ini dapat memberikan informasi secara jelas dan menarik mengenai pembuatan hal web, interaktif karena pengguna dapat berinteraksi langsung didalam proses pembelajarannya, dengan metode CAI menjadi lebih mudah memahami sehingga meningkatkan minat siswa belajar, dan aplikasi ini dapat digunakan kapan saja. Saran agar dapat menggunakan database untuk soal dan dapat diterapkan untuk pelajaran teknologi informasi dan komunikasi.
56
BAB III METODOLOGI
Metodologi yang digunakan oleh penulis dalam menyusun skripsi ini adalah metode pengumpulan data dan metode pengembangan sistem.
3.1
Metode Pengumpulan Data Dalam rangka menyusun skripsi ini, diperlukan data-data serta informasi yang relatif
lengkap sebagai bahan yang dapat mendukung
kebenaran materi uraian dan pembahasan. Oleh karena itu sebelum menyusun skripsi ini, dalam persiapannya terlebih dahulu dilakukan riset atau penelitian untuk mendapatkan data serta informasi atau bahan materi yang diperlukan. Metode pengumpulan data yang digunakan oleh penulis dalam pembuatan skripsi meliputi studi kepustakaan dan studi lapangan.
3.1.1 Studi Kepustakaan Dilakukan dengan cara membaca dan mempelajari bukubuku, artikel-artikel yang mendukung dengan topik yang akan dibahas dalam penyusunan skripsi ini serta mengumpulkan data dari situs-situs internet yang berhubungan dengan skripsi penulis. Menurut Komidar : 1952, pemanfaatan perpustakaan ini diperlukan baik untuk penelitian lapangan maupun penelitian 57
bahan dokumentasi (data sekunder). Nyata sekali bahwa tidak mungkin suatu penelitian dapat dilakukan dengan baik tanpa orientasi pendahuluan di perpustakaan (Masri Singarimbun dkk, 1985)
3.1.2 Studi Lapangan a. Observasi Metode
observasi
mengumpulkan
data
yaitu
dengan
digunakan
melakukan
untuk
pengamatan
dengan datang langsung ke CV. Bonsai Interior, guna memperoleh keterangan atau data yang diperlukan untuk pembuatan sarana promosi bunga kering pada 24 Juli 2010. Adapun data yang penulis kumpulkan antara lain informasi tentang bunga kering, foto-foto produk bunga kering dan lokasi outlet. Seperti yang dikemukakan oleh Moh. Nazir, Ph. D dalam
bukunya
Pengumpulan
yang
data
berjudul
dengan
Metode
observasi
Penelitian.
atau
dengan
pengamatan langsung adalah cara pengambilan data dengan menggunakan mata tanpa ada pertolongan alat standar lain untuk keperluan tersebut.
58
b. Wawancara Salah
satu
metode
pengumpulan
data
yang
digunakan oleh penulis adalah dengan cara wawancara. Metode wawancara ini merupakan salah satu bagian yang penting dalam setiap penelitian. Tanpa wawancara, peneliti akan kehilangan informasi yang hanya dapat diperoleh dengan cara bertanya langsung kepada pihak yang terkait. Wawancara dilakukan dengan Direktur CV. Bonsai Interior Bapak Drs. Anwar pada tanggal 20 Desember 2010 pukul 13.00 WIB di lantai dua Sowroom CV. Bonsai Interior Bandung. Tujuan penulis melakukan wawancara adalah
untuk
mendapatkan
informasi
tentang
pempromosian pada perusahaan terebut. Isi wawancara terlampir pada Lampiran 1. Menurut Dr. Lexy J. Moleong, wawancara adalah percakapan dengan maksud tertentu. Percakapan itu dilakukan oleh dua pihak yaitu pewawancara (interviewer) yang mengajukan pertanyaan dan yang diwawancarai (interviewee) yang memberikan jawaban atas pertanyaan itu.
59
c. Kuesioner Penulis membagikan kuesioner / angket kepada 30 orang konsumen yang datang ke showroom CV. Bonsay Interior. Kuesioner ini dilakukan untuk mendapatkan respon mengenai aplikasi sarana promosi bunga kering 3D ini dan untuk mengetahui sejauh mana CD sarana promosi yang dirancang dapat bermanfaat bagi pengguna.
3.2
Metode Pengembangan Aplikasi Multimedia 3.2.1 Alasan penggunaan Luther 1.
Ada tahapan material collecting elemen multimedia
2.
Lebih cocok untuk pembuatan aplikasi berbasis multimedia
3.
Memudahkan untuk tahap pengembangan selanjutnya
Menurut Luther (dalam Ariesto Hadi Soetopo,2003) untuk pengembangan suatu program aplikasi multimedia diperlukan enam tahap pengembangan multimedia, yaitu concept (konsep), design (desain), material collecting (pengumpulan bahan), assembly (pembuatan), testing (pengujian) dan distribution (implementasi dan evaluasi).
60
Design
Concept
Material Colleting
Distribution
Assembly
Testing
Gambar 3.1 Siklus Pengembangan Aplikasi Multimedia
3.2.2
Mekanisme Alur Penelitian Merupakan tahapan-tahapan mengenai alur penelitian dan perancangan system yang akan di bangun.
61
Perencanaan Skripsi Perumusan Masalah
Metode Luther
Studi Pustaka
Pengumpulan Data Studi Lapangan Tujuan
Concept
Audiens Macam Aplikasi Storyboard
Design
Desain Struktur Navigasi Flowchart View Perancangan Diagram Transisi (STD)
Material Collecting Assembly
User Interface Pengumpulan File-File Tahap Pemrograman Alpha dan Betha Testing Blackbox Testing
Testing
Implementasi Distribution Evaluasi Gambar 3.2 Tahapan Perencanaan Alur Aplikasi 62
a. Konsep (Concept) Tahap konsep (concept) yaitu menentukan tujuan, identifikasi audien, spesifikasi umum, dasar aturan untuk perancangan seperti ukuran aikasi, target dan lain-lain. Yang perlu diperhatikan pada tahap konsep yaitu : Menentukan tujuan, pada tahap ini ditentukan tujuan dari pembuatan aplikasi, serta audiens yang menggunakannya. Deskripsi konsep aplikasi yang akan dibuat dengan menentukan jenis aplikasi (presentasi, interaktif dan lain-lain), dan spesifikasi umum (judul, audien dan lain-lain).
b. Perancangan (Design) Pada tahap perancangan (design) ini adalah membuat spesifikasi secara rinci mengenai arsitektur proyek, gaya dan kebutuhan material untuk proyek. Spesifikasi yang akan dibuat berdasarkan pada tahap berikutnya Perancangan storyboard Perancangan bagan alir (flowchart view) Perancangan diagram transisi (State Transition Diagram) Desain struktur navigasi Perancangan antarmuka (user interface)
63
c. Pengumpulan Bahan (Material Collecting) Pengumpualan bahan (material collecting) dikerjakan parallel dengan tahap assembly. Pada tahap ini dilakukan pengumpulan bahan seperti video, animasi, audio, foto dan lain-lain yang diperlukan pada tahap selanjutnya. Bahan-bahan diperoleh dari berbagai sumber seperti internet, dari pihak CV. Bonsai Interior dan penulis membuat sendiri. Material collecting terlampir pada Lampiran 4.
d. Pembuatan (Assembly) Tahap pembuatan (assembly) merupakan tahap dimana seluruh objek multimedia dibuat. Pembuatan aplikasi berdasarkan storyboard, flowchart view, stuktur navigasi, atau diagram transisi berasal dari tahap desain.
e. Pengujian (Testing) Tahap pengujian (testing) dilakukan setelah selesai tahap pembuatan dan seluruh data telah dimasukkan. Pertama-tama dilakukan pengujian Alpha test yaitu pengujian dilakukan oleh pembuat atau pengembang system untuk memastikan apakah hasilnya seperti yang diinginkan. Setelah Alpha test lolos kemudian dilakukan Betha test yaitu pengujian dengan melibatkan partisipasi oleh pengguna akhir. Serta blackbox testing yang terlampir pada Lampiran 5.
64
f. Distribusi (Distribution) Pada tahap distribusi (distribution) merupakan tahap dimana dilakukan implementasi dan evaluasi terhadap produk multimedia dan setelah semuanya selesai produk multimedia ini akan digandakan menggunakan CD-RW. Penggandaan menjadi CD ini dipilih karena membuat produk yang akan di promosikan lebih ekslusif karena tidak semua orang bisa mendapatkannya dan CD lebih mengarah ke multimedia. Kalau web umum sifatnya sehingga semua orang dapat melihat dan web lebih ke programming. Dengan dilakukan evaluasi, maka akan dapat dikembangkan sistem yang lebih baik dikemudian hari. Beberapa tahap implementasi dan evaluasi yang penulis lakukan adalah : 1. Spesifikasi perangkat keras dan perangkat lunak yang dibutuhkan untuk mengeksekusi aplikasi 2. Cara pengoperasian program 3. Menjelaskan hasil tampilan 4. Evaluasi program
65
BAB IV
PERANCANGAN DAN IMPLEMENTASI
4.1
Gambaran Umum
4.1.1 Profil Perusahaan CV. Bonsay Interior adalah sebuah perusahaan yang bergerak di dalam bisnis home industri kreatif bunga kering dan artificial. CV. Bonsay Interior dirintis oleh Drs. H. Anwar, S.Hi di Bandung sejak tanggal 15 September 1996. Tidak puas menjadi karyawan perusahaan milik orang lain, ayah 3 anak ini yang juga lulusan dari IAIN, yang pada saat ini bernama Universitas Islam Negeri (UIN) jurusan Pidana Perdata Islam, memutuskan menjadi pengrajin yang fokus pada industri bunga kering. Keunikan produksi bunga kering ini adalah idenya, sangat identik dengan alam. Beliau sangat menyukai alam, imajinasinya sangat natural. Disamping itu beliau memang menyukai seni desain. Dirinya tersebut memilih menjadi perajin bunga kering atas dasar ingin mengubah sesuatu yang telah menjadi sampah menjadi sesuatu yang bernilai tinggi dan menghasilkan uang. Dengan modal Rp. 600.000,- pada saat itu, mulailah ia memproduksi industri 66
bunga kering. Banyak cobaan yang dihadapi oleh beliau. Toko industri bunga keringnya pernah terbakar. Namun bapak H. Anwar tidak putus asa dan terus berusaha lagi untuk membangun bisnis industri tersebut. Lambat laun Bapak H. Anwar bersama para karyawannya mulai menghasilkan tanaman hias dengan banyak model dan desain yang kreatif, sangat indah dan bernilai jual tinggi. Jika mempunyai ide dan kreasi, barang yang tadinya dianggap tidak bernilai ekonomi, maka dapat memiliki nilai jual. Beliau memakai bahan baku dari pelepah jagung untu berkreasi dalam membentuk kelopak bunga. Dari pelepah tersebut, Bapak H. Anwar mampu menghasilkan bentuk-bentuk bunga sesuai dengan jenis yang ada. Kemudian ia menyusunnya dengan berbagai bahan lain yang alami sehingga membentuk rangkaian bunga. Produk bunga kering yang di produksi dan dijual oleh Bapak H. Anwar ini memang sangat mirip dengan bunga sungguhan. CV. Bonsay Interior terletak di Jalan Cigending No.9 Kelurahan Cigending Kecamatan Ujung Berung Bandung Timur. Tempat usaha toko / showroom ini dibangun dengan luas tanah 400 m² dan luas bangunan 280 m². Sedangkan tempat produksi di bangun dengan luas tanah 1000 m² dan luas bangunan 350 m². Saat ini produk dari Bonsay Interior telah beredar di berbagai Department Store besar. Tak hanya di kota Bandung saja, tetapi juga di kota lainnya seperti di Sukabumi dan Jakarta 67
4.1.2 Struktur Organisasi
Direktur Drs. H. Anwari
Wakil Direktur Dra. Hj. Husniati
Staff Administrasi Ratna
Divisi Produksi Iswanto
Divisi Pemasaran Cucu
Divisi Penagihan Sunarti
Gambar 4.1 Struktur Organisasi CV. Bonsai Interior
4.1.3 Visi Memproduksi bunga kering yang berkualitas tinggi dan mengembangkan usaha dalam bidang industry bunga kering yang diakui dunia serta mempunyai daya saing baik produk serta model yang unik dan indah. 68
4.1.4 Misi Melahirkan suatu produk, terutama dalam bidang industry bunga kering yang mampu bersaing dan mempunyai kualitas tinggi sehingga konsumen merasa puas.
4.2
Konsep (Concept) Perancangan aplikasi ini menggunakan teknologi multimedia yang berbentuk CD interaktif dan akan digunakan sebagai media promosi yang nantinya akan diberikan kepada CV. Bonsai Interior. Deskripsi konsep aplikasi multimedia interaktif sebagai sarana promosi produk bunga kering CV. Bonsai Interior seperti table 4.1 berikut:
Judul
: Perancangan Aplikasi 3 Dimensi Bunga Kering Berbasiskan Multimedia Pada CV. Bonsai Interior
Audiens
: CV. Bonsai Interior, Konsumen
Tujuan
: Informasi tentang Produk bunga kering CV. Bonsai Interior
Image
: Menggunakan file berformat JPG dan png
Audio
: Menggunakan file berformat wav dan mp3
Video
: Menggunakan file berformat avi dan flv
Animasi
: Animasi teks dan gambar dibuat oleh penulis sendiri
Button
: Enter, next dan dari satu topik ke topik lain
Tabel 4.1 Deskripsi Konsep Aplikasi
69
Berikut adalah keterangan secara lengkap mengenai konsep aplikasi di atas : 1.
Interaktif ada 6 yaitu Kemudahan navigasi, Kandungan pengetahuan yang jelas, Pengetahuan dan presentasi informasi, Integrasi media dimana media harus mengintegrasikan aspek pengetahuan, Artistik dan Estetika serta Fungsi secara keseluruhan.
2.
Menggunakan file image berformat *jpeg karena :
dukungan warna yang lebih dari 16 juta atau 24 bit, sehingga hasil yang maksimal dari sebuah gambar dapat diperoleh
fitur kompresi kualitas gambar yang ditawarkan membuat penulis dapat memilih besar kecilnya file gambar yang akan dihasilkan nantinya
3.
Menggunakan file image berformat *png karena :
teknik kompresi lossless yang digunakan akan menghasilkan ukuran file yang kecil dengan tidak mengalami penurunan kualitas gambar, bandingkan dengan JPEG yang menggunakan teknik kompresi lossy yang dipastikan akan membuat kualitas gambar menurun.
4.
Backgroundnya dapat dibuat transparan
Menggunakan file video berformat *avi karena :
Format file-nya berlaku untuk standard Windows.
Gambarnya lebih tajam dibandingkan dengan ASF.
70
Banyak pilihan jenis kompresi yang dapat digunakan, semakin baik jenis kompresinya, semakin baik kualitasnya.
5.
Menggunakan file video berformat *flv karena :
File yang di support dengan Flash
Ukurannya lebih kecil
Berbagai jenis file video dengan mudah dapat dikonversi ke format Flash file Berbagai jenis dan dapat video format Artikel Baru Cari Syarat masuk dikonversi ke Flash.
6.
Menggunakan file audio berformat *wav karena File *wav merupakan file yang di support oleh Flash
71
4.3
Perancangan (Design) Pada tahap ini penulis melakukan perancangan aplikasi berupa perancangan storyboard, perancangan flowchart, desain struktur navigasi, perancangan STD (State Transition Diagram) dan perancangan antarmuka pemakai (User Interface). 4.3.1
Peracangan Storyboard Storyboard merupakan serangkaian sketsa (gambaran kartun) dibuat persegi panjang yang menggambarkan suatu urutan (alur cerita) elemen-elemen yang diusulkan untuk aplikasi multimedia (M. Suyanto, 2003 : 375). Secara umum, rancangan storyboard yang dibuat oleh penulis terdiri dari 8 buah scene, yang terdiri dari : a. Scene 1
Intro
Menampilkan layar intro Storyboard Layar Menu Intro
Modul : Layar Intro Nama File: Intro Frame No : 1 Gambar : Video : Audio :Scottwills_streets.mp3 Super music_4.mp3 Ada on / off volume
Video Animasi
Navigasi
Enter : Skip Intro
Enter
Gambar 4.2 Storyboard Layar Intro 72
a. Scene 2
Home
Menampilkan animasi bunga CV. Bonsai Interior Storyboard Layar Menu Home Modul : Layar Menu Utama Nama File: Halaman Utama Frame No : 1 Gambar : Buatan Sendiri Video : Audio : Scottwills_streets.mp3 Super music_4.mp3 Ada on / off volume
On / Off Music
Animasi Gambar Produk CV. Bonsay Interior
Navigasi Home Profile Produk Gallery Video Contact Author
: Tombol : Tombol : Tombol : Tombol : Tombol : Tombol : Tombol
Max . Min Layar
Animasi Logo
Tombol Menu
Exit
Gambar 4.3 Storyboard Layar Home b. Scene 3
Profile
Menampilkan visi dan misi serta struktur organisasi CV. Bonsai Interior. Storyboard Layar Menu Profile Modul : Layar Menu Utama Nama File: Profil Frame No : 1 Gambar : Buatan Sendiri Video :Audio :Scottwills_streets.mp3 Super music_4.mp3 Ada on / off volume
On / Off Music
Teks Profil, Visi dan Misi serta Struktur Organisasi CV. Bonsay Interior
Navigasi Home Profile Produk Gallery Video Contact Author
: Tombol : Tombol : Tombol : Tombol : Tombol : Tombol : Tombol
Max / Min Layar
Animasi Logo
Tombol Menu
Gambar 4.4 Storyboard Layar Profile
Exit
73
a. Scene 4
Produk Bunga Kering
Menampilkan gambar produk bunga kering, harga, warna dan keterangan dari produk. Storyboard Layar Menu Produk Bunga Kering Modul : Layar Menu Utama Nama File: Produk Frame No : 1 Gambar : Buatan Sendiri Video :Audio :Scottwills_streets.mp3 Super music_4.mp3 Ada on / off volume
Tombol Sub Menu Produk Bunga
Max / Min Layar
Gambar dan Teks Keterangan Produk Bunga Kering
Navigasi
: Ke halaman menu Produk bunga berikutnya Home : Tombol Profile : Tombol Produk : Tombol Gallery : Tombol Video : Tombol Contact : Tombol Author : Tombol
On / Off Music
Next
Animasi Logo
Tombol Menu
Exit
Gambar 4.5 Storyboard Layar Produk Bunga Kering b. Scene 5
Gallery
Menampilkan gambar-gambar tentang jenis bunga, showroom, tempat produksi dan lokasi outlet. Storyboard Layar Menu Gallery Modul : Layar Menu Utama Nama File: Gallery Frame No : 1 Gambar : Buatan Sendiri Video :Audio : Scottwills_streets.mp3 Super music_4.mp3 Ada on / off volume
Navigasi Next
: Ke halaman menu image berikutnya Home : Tombol Profile : Tombol Produk : Tombol Gallery : Tombol Video : Tombol Contact : Tombol Author : Tombol
Tombol Sub Menu Gallery
On / Off Music
Max / Min Layar
Image Jenis bunga, Showroom, Bahan Baku, Tempat Produksi dan Lokasi Outlet
Animasi Logo
Tombol Menu
Gambar 4.6 Storyboard Layar Gallery
Exit
74
a. Scene 6
Video
Menampilkan video produk bunga kering tiga dimensi serta teknik kamera. Storyboard Layar Menu Video Modul : Layar Menu Utama Nama File: Video Frame No : 1 Gambar : Buatan Sendiri Video : Buatan Sendiri Audio : Scottwills_streets.mp3 Super music_4.mp3 Ada on / off volume
Navigasi Next
: Ke halaman menu video berikutnya Home : Tombol Profile : Tombol Produk : Tombol Gallery : Tombol Video : Tombol Contact : Tombol Author : Tombol
Tombol Sub Menu Video Bunga
On / Off Music
Max / Min Layar
Informasi mengenai video dan teks Produk Bunga Kering
Animasi Logo
Tombol Menu
Exit
Gambar 4.7 Storyboard Layar Video b. Scene 7
Contact
Menampilkan halaman informasi pemesanan yang dapat dihubungi oleh calon konsumen Storyboard Layar Menu Contact Modul : Layar Menu Utama Nama File: Contact Frame No : 1 Gambar : Buatan Sendiri Video :Audio : Scottwills_streets.mp3 Super music_4.mp3 Ada on / off volume
Navigasi Home Profile Produk Gallery Video Contact Author
: Tombol : Tombol : Tombol : Tombol : Tombol : Tombol : Tombol
On / Off Music
Image Direktur CV. Bonsai Interior
Animasi Logo
Max / Min Layar
Informasi mengenai alamat dan nomor telepon yang dapat dihubungi Tombol Menu
Gambar 4.8 Storyboard Layar Contact
Exit
75
a. Scene 8
Author
Menampilkan informasi penulis Storyboard Layar Menu Author Modul : Layar Menu Utama Nama File: Author Frame No : 1 Gambar : Buatan Sendiri Video :Audio : Scottwills_streets.mp3 Super music_4.mp3 Ada on / off volume
On / Off Music
Image penulis
Max / Min Layar
Informasi mengenai penulis
Navigasi Home Profile Produk Gallery Video Contact Author
: Tombol : Tombol : Tombol : Tombol : Tombol : Tombol : Tombol
Animasi Logo
Tombol Menu
Exit
Gambar 4.9 Storyboard Layar Author
76
4.3.2 Perancangan Flowchart M u la i T a m p ila n L a y a r In tro T a m p ila n L a y a r H a la m a n U ta m a
P ilih M enu
P ilih M e n u Hom e
Ya
T a m p ila n Layar H om e
Ya
T a m p ila n L a y a r P ro file
T id a k P ilih M e n u P ro file T id a k P ilih M e n u P ro d u k B u n g a K e rin g
Ya
A
T id a k P ilih M e n u G a lle ry
Ya
B
Ya
C
T id a k P ilih M e n u V id e o T id a k P ilih M e n u C o n ta c t
Ya
T a m p ila n Layar C o n ta c t
Ya
T a m p ila n Layar A u th o r
T id a k P ilih M e n u A u th o r T id a k
S e le s a i
Gambar 4.10 Flowchart Menu Utama
77
A
T a m p ila n L a y a r M e n u P r o d u k B u n g a K e r in g
P ilih M enu
P ilih P r o d u k B K . R a n tin g
Y a
T a m p ila n P ro d u k B K . R a n tin g
Y a
T a m p ila n P r o d u k B K . T in g g i B in ta n g
Y a
T a m p ila n P ro d u k B K . G o ld e n S how er
Y a
T a m p ila n P ro d u k B K . P a k ir B a r u
Y a
T a m p ila n P ro d u k B K . M a ta h a ri
Y a
T a m p ila n P ro d u k B K . S o rg u m
Y a
T a m p ila n P ro d u k B K . H a n je li
T id a k P ilih P r o d u k B K . T in g g i B in ta n g
T id a k P ilih P r o d u k B K . G o ld e n S how er
T id a k P ilih P r o d u k B K . P a k ir B a ru
T id a k
P ilih P r o d u k B K . M a ta h a ri T id a k P ilih P r o d u k B K . S o rg u m T id a k P ilih P r o d u k B K . H a n je li
T id a k
K e lu a r
Gambar 4.11 Flowchart Menu Produk Bunga Kering
78
B
Layar M enu G a lle ry
T a m p ila n
P ilih M enu G a lle ry
P ilih M e n u J e n is B u n g a
Ya
T a m p ila n L a y a r J e n is Bunga
Ya
T a m p ila n Layar S h o w ro o m
Ya
T a m p ila n Layar Tem pat P ro d u k s i
Ya
T a m p ila n Layar Lokasi O u tle t
T id a k
P ilih M e n u S h o w ro o m
T id a k
P ilih M e n u Tem pat P ro d u k s i
T id a k
P ilih M e n u L o k a s i O u tle t
T id a k
S e le s a i
Gambar 4.12 Flowchart Menu Gallery
79
C
Layar M e n u V id e o
T a m p ila n
P ilih M enu
P ilih V id e o B K . R a n tin g
Ya
T a m p ila n V id e o B K . R a n tin g
Ya
T a m p ila n V id e o B K . T in g g i B in ta n g
Ya
T a m p ila n V id e o B K . G o ld e n Shower
Ya
T a m p ila n V id e o B K . P a k ir B a r u
Ya
T a m p ila n V id e o B K . M a ta h a ri
Ya
T a m p ila n V id e o B K . S o rg u m
Ya
T a m p ila n V id e o B K . H a n je li
T id a k P ilih V id e o B K . T in g g i B in ta n g
T id a k P ilih V id e o B K . G o ld e n Shower
T id a k P ilih V id e o B K . P a k ir B a ru
T id a k
P ilih V id e o B K . M a ta h a ri T id a k P ilih V id e o B K . S o rg u m T id a k P ilih V id e o B K . H a n je li
T id a k
K e lu a r
Gambar 4.13 Flowchart Menu Video
80
4.3.3 Perancangan Struktur Navigasi Struktur navigasi yang digunakan adalah hierarchiecal model. Pada model ini dapat dilihat penggunaan setiap scene yang dihubungkan dengan scene lainnya. Untuk lebih jelasnya dapat dilihat pada Gambar 4.13.
Intro
Menu Utama
c
c
c
c
Home
Profile
Produk Bunga Kering
Gallery
Video
Contact
Author
Animasi Gambar Produk CV. Bonsay Interior
Profil CV. Bonsay Interior
Produk Bunga Kering
Gallery / image pada CV. Bonsay Interior
Produk Bunga video 3D
Kontak Penjualan
Tentang Penulis
Bunga Kering Ranting
Jenis Bunga
Video BK. Ranting
Bunga Kering Tinggi Bintang
Showroom
Video BK. Tinggi Bintang
Bunga Kering Golden Shower
Tempat Produksi
Video BK. Golden Shower
Bunga Kering Pakir Baru Bunga Kering Matahari
Lokasi Outlet
Video BK. Pakir Baru Video BK. Matahari
Bunga Kering Sorgum
Video BK. Sorgum
Video BK. Hanjeli
Video BK. Hanjeli
Gambar 4.14 Struktur Navigasi Hierarchiecal Model
81
4.3.4 Perancangan STD (State Transition Diagram)
a.
STD Rancangan Menu Utama Intro
Produk Bunga Kering
Profile
Gallery
Klik “Produk Bunga Kering” Tampilkan Produk Bunga Kering
Klik “Home” Tampilkan Home
Klik “Home” TampilkanHome
Klik “Home” Tampilkan Home
Klik “Gallery” Tampilkan Gallery
Home
Klik “Profile” Tampilkan Profile
Klik “Home” Tampilkan Home
Klik “Contact” Tampilkan Contact
Klik “Author” Tampilkan Author
Klik “Video” Tampilkan Video
Contact Video
Klik “Home” Tampilkan Home
Klik “Home” Tampilkan Home
Klik “Exit” Keluar dari program
Author
Exit
Gambar 4.15 Rancangan STD Menu Utama
82
STD Rancangan Menu Profile
b.
Intro
Produk Bunga Kering
Home
Gallery
Klik “Produk Bunga Kering” Tampilkan Produk Bunga Kering
Klik “Profile” Tampilkan Profile
Klik “Profile” Tampilkan Profile
Klik “Profile” Tampilkan Profile
Klik “Gallery” Tampilkan Gallery
Profile
Klik “Home” Tampilkan Home
Klik “Profile” Tampilkan Profile
Klik “Author” Tampilkan Author
Klik “Video” Tampilkan Video
Contact Video
Author Klik “Profile” Tampilkan Profile
Klik “Profile” Tampilkan Profile Klik “Exit” Keluar dari program
Exit
Gambar 4.16 Rancangan STD Menu Profile
83
c.
STD Rancangan Menu Produk Bunga Kering
Home
Intro
Ranting
Tinggi Bintang
Profile
Produk Bunga Kering
Golden Shower
Gallery
Pakir Baru Video
Contact
Matahari
Author Sorgum
Exit
Hanjeli
Gambar 4.17 Rancangan STD Menu Produk Bunga Kering 84
STD Rancangan Menu Gallery
d.
Intro
Klik “Jenis Bunga” Tampilkan Jenis Bunga
Home
Jenis Bunga
Showroom Profile
Gallery Tempat Produksi
Produk Bunga Kering
Lokasi Outlet Video
Contact
Author
Exit
Gambar 4.18 Rancangan STD Menu Gallery
85
e.
STD Rancangan Menu Video
Home
Intro
Ranting
Tinggi Bintang
Profile
Golden Shower
Video Produk Bunga Kering
Pakir Baru Gallery
Contact
Matahari
Author Sorgum
Exit
Hanjeli
Gambar 4.19 Rancangan STD Menu Video 86
f.
STD Rancangan Menu Contact Intro
Profile
Produk Bunga Kering
Home
Contact
Video Gallery
Author
Exit
Gambar 4.20 Rancangan STD Menu Contact
87
g.
STD Rancangan Menu Author Intro
Profile
Produk Bunga Kering
Home
Author
Video Gallery
Contact
Exit
Gambar 4.21 Rancangan STD Menu Author
88
4.3.5 Perancangan Antar Muka Pemakai (User Interface) Rancangan antarmuka pemakai (user interface) yang akan ditampilkan pada aplikasi multimedia ini disesuaikan dengan kebutuhan CV. Bonsai Interior. Pada program aplikasi ini terdapat 9 rancangan layar yaitu : 1. Rancangan Intro Rancangan ini merupakan tampilan awal sebelum masuk ke tampilan utama program. Pada tampilan intro ini terdapat tombol enter untuk melanjutkan ke menu utama.
Gambar 4.22 Rancangan Intro
89
2.
Rancangan Menu Utama Rancangan menu ini berfungsi sebagai tampilan utama program yang menyediakan beberapa tombol menu yaitu : on / off music, home, profile, produk bunga kering, gallery, video, contact, author dan exit.
CV. Bonsai Interior
On/off music
Gambar 4.23 Rancangan Menu Utama
L og o
CV.Bonsai Interior
01 HOME 02 PROFILE 03 PRODUK
04 GALLERY
05 VIDEO 06 CONTACT 07 AUTHOR
Gambar 4.23 Rancangan Menu Utama 3.
Rancangan Menu Home Pada rancangan menu ini akan ditampilkan ucapan selamat datang dan animasi bunga CV. Bonsai Interior.
90
X
CV. Bonsai Interior
On/off music
Animasi bunga
Gambar 4.24 Rancangan Menu Home
L og o
CV.Bonsai Interior
01 HOME
02 PROFIL
03 PRODUK
04 GALLERY
05 VIDEO 06 KONTAK 07PENULIS
Gambar 4.24 Rancangan Menu Home
4.
Rancangan Menu Profile Rancangan menu ini berfungsi sebagai tampilan menu profile yang akan menampilkan Visi dan Misi perusahaan serta struktur organisasi CV. Bonsai Interior
91
X
2. Profile
CV. Bonsai Interior
On/off music
Teks
Gambar 4.24 Rancangan Menu Home
L og o
CV.Bonsai Interior
01 HOME
02 PROFIL
03 PRODUK
04 GALLERY
05 VIDEO 06 KONTAK 07PENULIS
Gambar 4.25 Rancangan Menu Profile
5.
Rancangan Menu Produk Bunga Kering Rancangan menu ini berfungsi sebagai tampilan menu produk bunga kering. Pada rancangan ini akan menampilkan tujuh tombol untuk menampilkan informasi produk bunga kering yang diinginkan yaitu : tombol bunga kering ranting, tombol tinggi bintang, tombol golden shower, tombol pakir baru, tombol matahari, tombol sorgum dan tombol hanjeli serta menyediakan tombol button next untuk berpindah ke gambar 92
X
produk bunga kering lainnya. Dengan memilih salah satu tombol ini, maka akan langsung masuk ke jenis produk.
03 PRODUK Ranting Tinggi Bintang Golden Shower Pakir Baru Matahari Sorgum Hanjeli
CV. Bonsai Interior On/off music
Teks dan gambar
Gambar 4.26 Rancangan Menu Produk Bunga Kering
L og o
CV.Bonsai Interior
01 HOME 02 PROFILE
03 PRODUK 04 GALLERY
05 VIDEO 06 CONTACT 07 AUTHOR
Gambar 4.26 Rancangan Menu Produk Bunga Kering
6.
Rancangan Menu Gallery Rancangan menu ini berfungsi sebagai tampilan menu gallery. Pada rancangan menu ini terdapat 4 tombol yaitu : tombol jenis
93
X
bunga, tombol showroom, tombol tempat produksi dan tombol lokasi outlet serta menyediakan tombol button next.
04 GALLERY
Jenis Bunga Showroom Tempat Produksi
Lokasi Outlet
CV. Bonsai Interior On/off music
Gambar
Gambar 4.26 Rancangan Menu Produk Bunga Kering
L og o
CV.Bonsai Interior
01 HOME 02 PROFILE
03 PRODUK 04 GALLERY
05 VIDEO 06 CONTACT 07 AUTHOR
Gambar 4.27 Rancangan Menu Gallery
7.
Rancangan Menu Video Rancangan menu Video digunakan untuk menampilkan video 3D produk bunga kering. Pada rancangan menu video terdapat tujuh tombol yaitu video bunga kering ranting, video bunga kering tinggi bintang, video bunga kering golden shower, video 94
X
bunga kering pakir baru, video bunga kering matahari, video bunga kering sorgum dan video bunga kering hanjeli.
05 VIDEO
Ranting Tinggi Bintang Golden Shower Pakir Baru Matahari Sorgum Hanjeli
CV. Bonsai Interior
Video dan Teks
Gambar 4.28 Rancangan Menu Video
L og o
CV.Bonsai Interior
01 HOME 02 PROFILE 03 PRODUK
04 GALLERY
05 VIDEO 06 CONTACT 07 AUTHOR
Gambar 4.28 Rancangan Menu Video
8.
Rancangan Menu Contact Rancangan menu ini berfungsi sebagai tampilan menu kontak yang akan menampilkan informasi alamat dan nomer telepon CV. Bonsai Interior yang dapat dihubungi oleh pembeli.
95
X
06 CONTACT
CV. Bonsai Interior
On/off music
Gambar dan Teks
Gambar 4.29 Rancangan Menu Contact
L og o
CV.Bonsai Interior
01 HOME 02 PROFIL
03 PRODUK
04 GALLERY 05 VIDEO 06 CONTACT 07 AUTHOR
Gambar 4.29 Rancangan Menu Contact
9.
Rancangan Menu Author Rancangan menu ini berfungsi sebagai tampilan menu Penulis yang akan menampilkan biodata penulis.
96
X
07 AUTHOR
CV. Bonsai Interior
On/off music
Gambar dan Teks
Gambar 4.29 Rancangan Menu Contact
L og o
CV.Bonsai Interior
01 HOME 02 PROFIL
03 PRODUK
04 GALLERY 05 VIDEO 06 CONTACT 07 AUTHOR
Gambar 4.30 Rancangan Menu Author
4.4
Pengumpulan Bahan (Material Collecting) Pengumpulan bahan-bahan berupa file-file audio, video, foto, teks dilakukan dengan cara mengambil dari berbagai sumber dan membuatnya sendiri. Kemudian spesifikasi perangkat keras dan perangkat lunak dalam membangun program serta spesifikasi dalam pengetesan program. Bahanbahan berupa file gambar dan foto produk bunga kering penulis peroleh 97
X
dari perusahaan, file audio penulis peroleh dari internet, koleksi audio pribadi dan membuatnya sendiri. Sedangkan file video penulis sendiri yang membuatnya. Material collecting terlampir pada Lampiran 4. Di bawah ini spesifikasi perangkat lunak dan perangkat keras yang penulis butuhkan dalam perancangan 3D bunga kering CV. Bonsai Interior yaitu : 1. Spesifikasi Perangkat Lunak Untuk mengembangkan aplikasi ini penulis membutuhkan spesifikasi perangkat lunak sebagai berikut : a. Adobe Photoshop CS, digunakan sebagai perangkat lunak untuk mempekecil ukuran file foto yang digunakan dalam aplikasi serta untuk mendesain gambar tampilan layar program, editing gambar atau foto. b. 3Ds Max 8, digunakan sebagai perangkat lunak untuk perancangan bunga kering tiga dimensi dan untuk menganimasikan bunga tiga dimensi menggunakan animasi kamera. c. Macromedia Flash Professional 8, digunakan sebagai perangkat lunak untuk pengembangan animasi dan sebagai perangkat lunak pengembangan utama yang berfungsi menggabungkan semua komponen program yang telah dibuat dengan menggunakan perangkat lunak ini maupun perangkat lunak pengembangan lainnya.
98
d. Adobe premiere CS, digunakan untuk mengedit video agar terlihat lebih menarik. e. Nero, digunakan untuk burn atau proses pembuatan CD Interaktif. 2. Spesifikasi Perangkat Keras
Untuk membuat sistem ini penulis membutuhkan spesifikasi perangkat kera sseperti berikut : a. Intel Core 2 Dou 2,00 GHz b. Memori RAM 2,00 GB c. Graphic Card d. CD-RW, berfungsi untuk penyimpanan program ke dalam bentuk kepingan CD. e. Mouse, berfungsi sebagai alat interaksi penggunaan perangkat lunak pengembangan dan secara umum sebagai alat interaksi yang penting dalam pembuatan aplikasi ini. f. Keyboard, berfungsi untuk penulisan listing program dan secara umum sebagai alat interaksi yang penting pada pembuatan program ini. g. Active Speaker, berfungsi untuk mendengarkan suara pada program ini.
99
h. Monitor 13”, berfungsi sebagai media interface (antarmuka) atau penghubung antara user dengan computer sehingga tampilan program dapat dilihat penulis.
Spesifikasi komputer yang digunakan untuk pengetesan sistem yaitu :
4.5
a.
Processor Intel Pentium IV 2,40 GHz
b.
Memori SD RAM 256 MB
c.
Hard Disk 40 GB
d.
VGA Card onboard
e.
Monitor 17”
f.
Keyboard
g.
Optical Mouse
h.
Active speaker
Pembuatan (Assembly) Tahap pembuatan menggunakan perangkat lunak yang telah disiapkan. Beberapa tahapan penting selama pengembangan program ini akan dibahas di bawah ini. 1.
Membuat background Pada Adobe Photoshop CS Tahap awal dengan cara tampilan layar program di desain dengan menggunakan Adobe Photoshop CS. Untuk mendapatkan tampilan 100
yang diinginkan, desain tampilan layar program ini dibuat dengan menggunakan layer yang berbeda tekstur dan bentuknya. Hal ini bertujuan untuk membuat suatu efek gambar yang sangat baik dan bagus.
Setelah
itu,
tampilan
layar
ini
disimpan
dengan
menggunakan format “jpg”.
Gambar 4.31 Background Aplikasi
2.
Membuat Intro Pada Halaman Utama Setelah pembuatan background telah selesai dibuat, maka langkah selanjutnya yaitu pembuatan intro pada halaman utama dengan menggunakan Macromedia Flash. Kemudian di beri tombol-tombol navigasi sehingga user dapat terhubung ke halaman lain.
101
3.
Gambar 4.32 Intro pada CS Aplikasi Pengkodean Menggunakan Dreamweaver Dilakukan
pengkodean
menggunakan
pengkodean ini terdapat penggabungan
XML.
Pada
tahap
pengkodean antara
javascript, actionscript untuk menampilkan elemen-elemen yang ditampilkan pada program.
Gambar 4.33 Pengkodean Program 102
4.
Pemodelan 3 dimensi Langkah awal dari pembuatan bunga kering 3 dimensi yaitu dengan pembuatan objek pot 3 dimensi dengan cara : Buatlah objek tube dengan ukuran sembarang pada front viewport. Aktifkan tab modify, ubah nilai radius 1 = 24, radius 2 = 22, height = 61, height segment = 10, cap segment = 10, sides = 60, aktifkan smooth. Setelah selesai di modifier list pilih Taper dan setting ukuran paramaters amount = 0.41, curve = 0.0, Taper axis primary = Z dan effect = XY. Kemudian ubah Tube, klik kanan mouse pada objek dan konversikan menjadi Editable poly. Setelah itu buatlah objek cylinder dengan ukuran radius = 20, height = 56, height segments = 15, cap segments = 15, sides = 63, aktifkan smooth dan tempatkan di dalam tube. Lalu klik modifier, pilih Taper dengan parameter Taper amount = 0.5, curve = 0.0, Taper axis primary = Z, effect = XY. Kemudian masukkan noise modifier dengan parameter noise seed = 8, scale = 100, aktifkan fractal roughness = 0.0, iterations = 6. Strength X = 0, Y= 0 dan Z = 13.82. Setelah itu objek akan terlihat seperti gambar d bawah ini.
103
Kemudian untuk bunga kering itu sendiri, penulis memfoto bunga kering dengan camera digital dengan menghasilkan output file berformat .jpg. Kemudian gambar bunga .jpg itu di gambar dengan menggunakan Adobe Ilustrator. Seleksi seluruhnya lalu simpan klik File > Save as type .ai, diberi nama “Bunga.ai”. Langkah berikutnya buka program 3DS Max 8 kemudian klik Import > Seleksi file “Bunga.ai” > Open. Muncul kotak dialog : Ai import : pilih “Completely replace current scene” > Ok
Shape import : pilih “Single object” > Ok
Maka akan tampak tampilan seperti di bawah ini :
104
Gambar 4.34 Pemodelan Bunga Kering Pemberian Material Proses pemberian material pada bunga dan pot, tekan M untuk memunculkan material editor. Kemudian pilih slot map yang kosong lalu klik kotak abu-abu disamping pilihan difuse. Lalu pilih bitmap, browse dan pilih material pot serta material bunga yang digunakan. Kemudian tarik material slot ke arah permukaan layar pot. Demikian juga dengan material untuk bunga.
105
Gambar 4.35
Tampilan Menu Material
Pemberian Cahaya Proses pemberian cahaya menggunakan Omni Light yang dibuat sebanyak 2 buah dan diletakkan mengelilingi objek bunga. Pemberian efek cahaya bertujuan untuk menggambarkan suasana yang lebih nyata dan hidup.
106
Gambar 4.36 Tampilan Menu Omni Light
Pemberian Animasi dan Kamera Proses pemberian animasi dan kamera, dengan cara : buatlah objek free camera pada Left view.
Gambar 4.37 Pemberian Kamera pada Gambar
107
Pada perspective view klik kiri pada tulisan perspective view, lalu pilih pada View > Camera01. Lalu buat keyframe animasinya dengan mengaktifkan tombol autokey hingga berwarna merah, kemudian dalam keadaan objek group bunga terseleksi geser keyframe ke akhir frame yakni pada frame 600. Pindahkan timeline ke titik tertentu untuk membuat animasi, perhatikan timeline tidak terlalu dekat dan tidak terlalu jauh untuk mengontrol kecepatan animasi
Gambar 4.38 Pemberian animasi pada bunga
Rendering Setelah animasi kamera bunga selesai, lalu merender dengan cara pilih menu rendering atau tekan F10 pada keyboard. Kemudian pada commont paramaters klik range = 0 to 600, output size dimensi dengan ukuran 640 x 480. Lalu pilih render.
108
Gambar 4.39 Tampilan Menu Render
Gambar 4.39 Tampilan Menu Render Bunga kering 3 dimensi yang telah di render terlihat pada hasil di bawah ini :
Gambar 4.40 Hasil 3 dimensi bunga kering Untuk objek bunga yang lain menggunakan langkah-langkah yang kurang lebih sama dalam pembuatannya. Dalam merancang aplikasi 3 Dimensi bunga kering ini, penulis menggunakan tahapan yang terdiri dari : 109
a. Modelling Modelling adalah istilah spesifik yang menyangkut konsep dan teknik yang cukup banyak. Dengan kata lain modeling adalah proses pembuatan bentuk-bentuk objek untuk pelengkap. Terbentuknya objek-objek tergantung pada variable yang cukup banyak, termasuk bentuk objek, bagaimana objek akan bergerak, bagaimana teksturnya dan lainnya. Sebelum adanya proses animasi, pencahayaan, pewarnaan dan lainnya harus sudah ada model objek yang akan dikerjakan. b. Texturing Texturing adalah proses pemberian karakteristik permukaan pada objek. Maksud dari karakteristik adalah pewarnaan, kilauan dan lainnya. Pada umumnya texturing adalah pemberian warna pada permukaan objek atau pengecatan. c. Lighting Lighting adalah pencahayaan pada objek atau model. Dengan teknik pencahayaan dapat menutupi kekurangan dari model
yang dibuat. Efek pencahayaan dapat
menonjolkan kelebihan dengan objek atau model. Dalam pencahayaan, cahaya tidak bersifat cahaya asli, tetapi dapat didesain mendekati cahaya asli. Teknik pencahayaan dalam 3D Max terbagi dalam beberapa tipe cahaya yang berbeda 110
dan dari masing-masing tipe memiliki karakteristik yang berbeda. Tipe pencahayaan antara lain :
Omni yaitu jenis pencahayaan lampu pijar yang mengarah ke semua arah dan hanya mempunyai sumber cahaya.
Spot Light atau lampu sorot yaitu pencahayaan yang mengarah dari sumber cahaya dan mempunyai ukuran cahaya yang dapat disesuaikan serta memiliki target atau sasaran tertentu.
Direct Light yaitu jenis pencahayaan yang langsung mengarah ke objek yang disinari dan tidak mengalami penyebaran cahaya.
d. Rendering Setelah proses-proses di atas selesai dilakukan maka dapat dilakukan realisasi. Proses rendering yaitu proses untuk menentukan detail seluruh komponen, seperti pencahayaan, seberapa besar gambar hasil render, pergerakan dan lainlain. Pewarnaan di dalam 3 Dimensi termasuk di dalam texturing, yaitu proses pemberian karakteristik permukaan pada model atau objek. 111
5.
Penggabungan Video dan Suara Dilakukan penggabungan video 3 dimensi dan suara menggunakan Adobe Premiere. Pada tahap ini penggabungan video 3D tersebut dan suara yang berformat “wav” dengan menggunakan Adobe Premiere CS.
Kemudian di export. Setelah itu video yang
berformat “avi” tersebut, di convert menjadi format “flv” agar dapat digabungkan ke dalam software flash.
Gambar 4.41 Penggabungan Video dan Suara 6.
Penggabungan Komponen Multimedia Setelah semua komponen dari program ini selesai dibuat, maka tahap berikutnya adalah penggabungan komponen pada perangkat lunak utama yaitu Maxromedia Flash 8. Pada perangkat ini penulis
112
membuat
listing program
yang berguna untuk mengatur,
menjalankan dan menampilkan data sesuai dengan rancangan.
Gambar 4.42 Penggabungan Komponen multimedia Gambar berikut ini merupakan halaman-halaman program yang telah diintegrasikan dengan elemen-elemen multimedia yang telah dibangun :
Gambar 4.43 Halaman Intro
Gambar 4.43 Halaman Intro
113
Pada halaman layar intro, terdapat tombol enter untuk masuk ke halaman utama dan tersedia 7 menu diantaranya menu home, menu profile, menu produk bunga kering, menu gallery, menu video 3 dimensi, menu contact dan menu author.
Gambar 4.44 Halaman Home Halaman home ini terdapat ucapan selamat datang dan animasi tentang CV. Bonsai Interior. 114
Gambar 4.45 Halaman Profile Pada Gambar 4.44 merupakan halaman Profile yang terdapat Visi dan Misi perusahaan serta struktur organisasi pada CV. Bonsai Interior.
115
Gambar 4.46 Halaman Produk Bunga kering
Pada halaman produk bunga kering terdapat tujuh tombol untuk menampilkan informasi produk bunga kering yaitu : tombol bunga kering ranting, tombol bunga kering tinggi bintang, tombol bunga kering golden shower, tombol bunga kering pakir baru, tombol bunga kering matahari, tombol bunga kering sorgum dan tombol bunga kering hanjeli. Dengan memilih salah satu tombol bunga kering, user dapat mengetahui informasi bunga kering tersebut.
Gambar 4.47 Halaman Gallery
Pada halaman Gallery terdapat empat tombol untuk menampilkan gambar mengenai CV. Bonsai Interior yaitu : tombol jenis bunga, tombol showroom, tombol tempat produksi dan tombol lokasi outlet. 116
Gambar 4.48 Halaman Video Pada gambar 4.47 terdapat halaman Video 3 dimensi yang menyediakan tujuh tombol yaitu video bunga kering ranting, video bunga kering tinggi bintang, video bunga kering golden shower, video bunga kering pakir baru, video
bunga kering matahari, video bunga kering
sorgum dan video bunga kering hanjeli.
117
Gambar 4.49 Halaman Contact
Pada halaman Kontak, berfungsi menampilkan informasi alamat, nomer telepon dan email CV. Bonsai Interior.
Gambar 4.50 Halaman Author
Pada halaman Author, berfungsi menampilkan informasi tentang penulis yang akan menampilkan halaman biodata penulis.
118
4.6
Tes (Testing) Pada tahap ini penulis melakukan pengujian (testing) terhadap program aplikasi yang telas selesai dibuat. Langkah awal pengujian dilakukan sendiri (Alpha testing). Selanjutnya sebagai standar pengetesan program, dilakukan pengetesan terhadap aplikasi untuk memastikan apakah hasilnya seperti yang diinginkan. Pengujian dilakukan pada komputer yang memiliki spesifikasi berbeda, dengan tujuan untuk mengetahui spesifikasi komputer yang dibutuhkan agar program aplikasi dapat berjalan dengan baik. 4.6.1 Running Program
Gambar 4.51 Running Intro
119
Gambar 4.52 Running Home
Gambar 4.53 Running Profile
120
Gambar 4.54 Running Produk Bunga Kering
Gambar 4.55 Running Video 3 dimensi
121
Gambar 4.56 Running Contact
Gambar 4.57 Running Author
4.6.2 Blackbox Testing No
Rancangan Proses
Hasil yang
Hasil
Keterangan
diharapkan 1.
Klik “home”
Menampilkan home
OK
Menampilkan 122
halaman home 2.
Klik “Profile”
Menampilkan profile
OK
Menampilkan halaman profile
3.
Klik “Produk Bunga Menampilkan Kering”
OK
produk bunga kering
Menampilkan halaman
produk
bunga kering 4.
Klik “Bunga kering Menampilkan bunga ranting”
OK
kering ranting
Menampilkan halaman
bunga
kering ranting 4.
Klik “Bunga kering Menampilkan bunga ranting”
OK
kering ranting
Menampilkan halaman
bunga
kering ranting 5.
Klik “Bunga kering Menampilkan bunga Tinggi Bintang”
OK
kering tinggi bintang
Menampilkan halaman
bunga
kering
tinggi
bintang 6.
Klik “Bunga kering Menampilkan bunga Golden Shower”
kering
OK
golden
shower
Menampilkan halaman
bunga
kering
golden
shower 7.
Klik “Bunga kering Menampilkan bunga pakir baru”
kering pakir baru
OK
Menampilkan halaman
bunga
123
kering pakir baru 8.
Klik “Bunga kering Menampilkan bunga matahari”
OK
kering matahari
Menampilkan halaman
bunga
kering matahari 9.
Klik “Bunga kering Menampilkan bunga sorgum”
OK
kering sorgum
Menampilkan halaman
bunga
kering sorgum 10.
Klik “Bunga kering Menampilkan bunga hanjeli”
OK
kering hanjeli
Menampilkan halaman
bunga
kering hanjeli 11.
Klik “Gallery”
Menampilkan
OK
Gallery 12.
Klik “Jenis Bunga”
Menampilkan
Menampilkan halaman Gallery
jenis
OK
bunga
Menampilkan halaman
jenis
bunga 13.
Klik “Showroom”
Menampilkan
OK
showroom
Menampilkan halaman showroom
14.
Klik
“Tempat Menampilkan tempat
Produksi”
OK
produksi
Menampilkan halaman
tempat
produksi 15.
Klik “Lokasi Outlet”
Menampilkan lokasi outlet
OK
Menampilkan halaman
lokasi 124
outlet 16.
Klik “Video Bunga Menampilkan video Kering”
OK
bunga kering
Menampilkan halaman
video
bunga kering 17.
Klik “Bunga kering Menampilkan video ranting”
OK
kering ranting
Menampilkan halaman
video
kering ranting 18.
Klik “Bunga kering Menampilkan video Tinggi Bintang”
OK
Menampilkan
bunga kering tinggi
halaman
bintang
bunga
video kering
tinggi bintang 19
Klik “Bunga kering Menampilkan video Golden Shower”
OK
Menampilkan
bunga kering golden
halaman
shower
bunga
video kering
golden shower 20.
Klik “Bunga kering Menampilkan video pakir baru”
OK
Menampilkan
bunga kering pakir
halaman
baru
bunga
video kering
pakir baru 21.
Klik “Bunga kering Menampilkan video matahari”
bunga matahari
kering
OK
Menampilkan halaman
video
bunga
kering
matahari 125
22
Klik “Bunga kering Menampilkan video sorgum”
OK
bunga kering sorgum
Menampilkan halaman bunga
video kering
sorgum 23
Klik “Bunga kering Menampilkan video hanjeli”
OK
bunga kering hanjeli
Menampilkan halaman bunga
video kering
hanjeli 24.
Klik “Contact”
Menampilkan
OK
contact 25.
Klik “Author”
Menampilkan author
Menampilkan halaman contact
OK
Menampilkan halaman Author
Tabel 4.2 Pengujian Blackbox
4.7
Distribusi dan Evaluasi Setelah melakukan pengetesan terhadap aplikasi, tahap selanjutnya adalah distribusi. Program aplikasi multimedia ini akan dikemas dalam bentuk CD (Compact Disk), yang memiliki besar ukuran (size) 69.1 MB. Dan selanjutnya akan diberikan kepada CV. Bonsai Interior sebagai media promosi untuk para konsumen. 4.7.1 Spesifikasi Untuk Menjalankan Program
126
Program aplikasi ini akan dapat berjalan dengan baik dengan spesifikasi persyaratan minimum hardware dan software sebagai berikut : 1.
Processor Intel Pentium IV
2.
Memori SD RAM 256 MB
3.
Monitor Resolusi 800 x 600 pixels, 32 bit
4.
Kapasitas Harddisk minimum 3 GB
5.
Keyboard
6.
Mouse
7.
Active Speaker
8.
Sistem Operasi Windows XP
4.7.2 Cara Pengoperasian Program Cara pengoperasian dari program aplikasi multimedia ini sangat mudah. Tidak perlu instalasi, cukup memasukkan CD yang berisi program aplikasi ini akan berjalan sendiri (autorun) dan langsung masuk ke halaman intro. Setelah itu user dapat memilih menu yang diinginkan. Namun, bila program aplikasi ini di copy ke komputer, maka user harus mendouble klik pada file “bonsaiinterior.exe” untuk menjalankan aplikasi ini.
4.7.3 Evaluasi Setelah semua tahap telah dilakukan maka selanjutnya adalah melakukan evaluasi terhadap program. Evaluasi dilakukan 127
untuk mengetahui kekurangan dan kelebihan
yang ada pada
program ini dan faktor-faktor lain yang dapat digunakan untuk pengembangan program ini selanjutnya.
Penulis melakukan evaluasi dengan melakukan demo program dan membagikan kuesioner kepada pihak CV. Bonsai Interior serta konsumen yang datang ke showroom CV. Bonsai Interior dengan sample sebanyak 30 orang.
Hasil dari kuisioner tersebut dapat dilihat pada tabel 4.2 berikut : No
Pertanyaan
1.
Apakah anda mengetahui tentang aplikasi berbasis multimedia? Apakah anda pernah menggunakan aplikasi berbasis multimedia? Apakah anda dapat menggunakan aplikasi 3
2. 3.
Jawaban Ya Tidak 25 5 25
5
30
0
30
0
2
28
27
3
28
2
Dimensi bunga kering berbasis multimedia ini? 4.
Apakah tampilan Aplikasi 3 Dimensi bunga kering ini menarik?
5. 6. 7.
Apakah anda mengalami kesulitan dalam menggunakan aplikasi ini? Apakah aplikasi ini mudah digunakan (user friendly)? Apakah informasi yang disediakan di aplikasi ini jelas dan lengkap?
128
8. 9.
Apakah diperlukan adanya penuntun untuk menggunakan aplikasi ini? Apakah perlu adanya simulasi proses cara pembuatan bunga kering pada aplikasi berbasis multimedia ini?
11
19
21
9
Tabel 4.3 Hasil Kuesioner Dari evaluasi tersebut, maka penulis menghasilkan kesimpulan antara lain : 1.
Program dapat berjalan dengan baik dan sesuai dengan kebutuhan CV. Bonsai Interior
2.
Perlu adanya simulasi pembuatan bunga kering, agar konsumen mengetahui cara pembuatan dari awal sampai menjadi bentuk bunga kering BAB V PENUTUP
5.1
Kesimpulan Setelah diuraikan proses penelitian pada bab-bab sebelumnya, penulis dapat mengambil kesimpulan dalam beberapa point : 1.
Aplikasi ini dapat membantu CV. Bonsai Interior dalam membantu menginformasikan produk bunga kering, sehingga mampu bersaing dengan perusahaan lain yang sejenis.
2.
Aplikasi 3 Dimensi bunga kering ini mudah digunakan dengan navigasi menu yang cukup mudah dan tidak membingungkan dalam penggunaannya dan tidak perlu instalasi. 129
3.
Tampilan dari aplikasi dibuat sedemikian rupa untuk menarik minat konsumen dalam membeli bunga kering CV. Bonsai Interior.
5.2
Saran Saran-saran yang dapat penulis berikan untuk pengembangan lebih lanjut dari aplikasi 3D bunga kering berbasis multimedia sebagai berikut : 1. Menggunakan
spesifikasi
komputer
yang
dianjurkan,
untuk
meningkatkan kinerja dari program aplikasi tersebut. 2. Bagi yang ingin mengembangkan skripsi, disarankan untuk membuat simulasi 3 Dimensi proses pembuatan bunga kering.
130
131
DAFTAR PUSTAKA
Aditya.
Manfaat
yang
bisa
dibuat
dengan
3D
Max.
http://www.ilmugrafis.com/3dmax~studio.php?page=manfaat~yang~bisa~dibuat ~ dengan~3d. 2008. Binanto, Iwan. 2010. Multimedia Digital Dasar Teori dan Pengembangannya. Penerbit Andi. Yogyakarta. Hadi Sutopo, Ariesto. 2003. Multimedia Interaktif dengan Flash. Penerbit Graha Ilmu. Yogyakarta. Kottler, Philip dan Armstrong, Gary. Dasar-Dasar Pemasaran (Principle of Marketing 7e) Jilid 2. Jakarta : PT. Prenhallindo. 1997. Madcoms. 2008. Adobe Premiere Pro CS3 untuk Pemula. Penerbit Andi. Yogyakarta. Moleong, Lexy. 2000. Metodologi Penelitian Kualitatif. Penerbit PT Remaja Rosdakarya. Bandung. Nazir Moh, Ph.D. 2005. Metode Penelitian. Penerbit Ghalia. Indonesia. Philipus, Erwin. 2008. 1st Step to Be Designer : Flash. Yogyakarta : C.V. Andi Offset. Santoso, Insap. 2009. Interaksi Manusia dan Komputer edisi 2. Penerbit Andi. Yogyakarta. Simarmata, Janner. 2007. Grafika Komputer. Penerbit CV. Andi Offset. Yogyakarta 131
Singarimbun, Masri. Effendi S. 1985. Metode Penelitian Survai. LP3LS. Jakarta. Sopandi, Ajang. S.Kom. 2005. Perancangan Aplikasi Company Profile PT. Mesana Group Berbasis Multimedia. UIN Jakarta. Suyanto, M. 2004. Analisis & Desain Aplikasi Multimedia untuk Pemasaran. Penerbit Andi. Yogyakarta. Suyanto, M. 2003. Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing. Penerbit Andi. Yogyakarta. Tim Wahana Komputer. 2007. Buku Latihan Teknik Mengolah Foto Digital dengan Adobe Photoshop CS3. Penerbit PT Elex Media Komputindo. Jakarta. Vaughan, Tay. 2006. Multimedia : Making It Work Edisi 6. Penerbit Andi. Yogyakarta. Wahana Komputer. 2007. Panduan Aplikatif : 3D Studio Max untuk Pemodelan Interior Bangunan. Penerbit Andi. Yogyakarta. Wahana Komputer. 2008. Pengolahan Video Kreatif dengan Adobe Premiere Pro. Penerbit Andi. Yogyakarta.
132
LAMPIRAN 1
Hasil wawancara dengan Direktur CV. Bonsai Interior Bapak H. Anwar, S.Hi pada 20 Desember 2010 1.
T : Kapan CV. Bonsai Interior didirikan? J : CV ini didirikan 14 tahun ke belakang, tepatnya 15 September 1996
2.
T : Menurut pendapat bapak, apakah komputerisasi diperlukan bagi
CV.
Bonsai Interior sat ini? J : Ya sangat diperlukan sekali. Karena dapat digunakan untuk menyimpan data, memudahkan untuk mengaplikasi barang-barang yang dimiliki. Jika tidak
ada komputerisasi, maka akan kesulitan harus membuka buku-buku
untuk melihat data. Sudah tidak zaman lagi pada saat ini 3.
T : Pernahkah bapak mendengar tentang aplikasi 3 dimensi berbasiskan Multimedia? J : Pernah
4.
T : Apakah perusahaan bapak
sudah
menggunakan aplikasi dengan
teknologi multimedia 3D produk bunga kering? J : Belum 5.
T : Bagaimana jika diadakan penelitian mengenai informasi tentang bunga kering dengan 3D pada CV. Bonsai Interior? J : Ya sangat baik, apalagi jika
dilengkapi
dengan
profil
perusahaan
serta informasi yang lengkap 6.
T : Bagaimana menurut bapak apabila aplikasi dengan menggunakan 3D 133
diterapkan pada CV. Bonsai nilai
Interior berupa CD agar dapat memiliki
yang lebih dalam menginformasikan produk?
J : Iya saya setuju karena dengan
adanya
penggunaan
teknologi 3D
berbasis multimedia, perusahaan akan lebih memiliki nilai lebih dan dapat diterima di masyarakat umum atau pembeli sehingga memudahkan pembeli dalam melihat sample produk sehingga dapat bersaing dengan perusahaan lain serta mempertahankan eksistensi perusahaan kami.
134
Kuisioner Evaluasi “Perancangan Aplikasi 3 Dimensi Bunga Kering Berbasis Multimedia Pada CV. Bonsai Interior” Nama : Pekerjaan : Berilah tanda Checklist (√) pada jawaban yang anda pilih! 1. Apakah anda mengetahui tentang aplikasi berbasis multimedia? ( ) Ya ( ) Tidak 2. Apakah anda pernah menggunakan aplikasi berbasis multimedia? ( ) Ya ( ) Tidak 3. Apakah anda dapat menggunakan aplikasi 3 Dimensi bunga kering berbasis multimedia ini? ( ) Ya ( ) Tidak 4. Apakah tampilan Aplikasi 3 Dimensi produk bunga kering ini menarik? ( ) Ya ( ) Tidak 5. Apakah anda mengalami kesulitan dalam menggunakan aplikasi ini? ( ) Ya ( ) Tidak 6. Apakah aplikasi ini mudah digunakan (user friendly)? ( ) Ya ( ) Tidak 7. Apakah informasi yang disediakan di aplikasi ini jelas dan lengkap? ( ) Ya ( ) Tidak 8. Apakah diperlukan adanya penuntun untuk menggunakan aplikasi ini? ( ) Ya ( ) Tidak
9. Apakah perlu adanya simulasi proses cara pembuatan bunga kering pada aplikasi berbasis multimedia ini? 135
LAMPIRAN III Proses Pembutan Aplikasi
1.
Proses pengecilan file foto menggunakan Adobe Photoshop CS
Gambar proses pengeditan gambar
2.
Proses pembuatan objek 3D dengan menggunakan 3DS Max 8
136
3.
Proses pengeditan video menggunakan Adobe Premiere CS Gambar bunga 3 Dimensi
Gambar proses pengeditan video
Gambar proses pengeditan video
4.
Proses
penggabungan
semua
objek multimedia yang telah dibuat sehingga menjadi sebuah aplikasi yang menarik dan interaktif
137
Gambar proses penggabungan objek multimedia
Gambar Aplikasi Telah Jadi 138
LAMPIRAN 4 File Audio : 1. Scottwills_streets.mp3
File Video : 1. Ranting.flv
139
2. Tinggi bintang.flv
3. Golden shower.flv
140
4. Pakir baru.flv
5. Matahari.flv
141
6. Sorgum.flv
7. Hanjeli.flv
142
File animasi : Animasi tulisan yang penulis buat sendiri
143
144
File Gambar : Foto produk bunga kering CV. Bonsai Interior
145
No 1.
Tittle
LAMPIRAN 5 Tampil Halaman Intro
Purpose
Menampilkan halaman awal sebelum masuk ke tampilan utama
Procedure
Klik bonsaiinterior.exe
Expected Result Actual Result
View Layar halaman intro
Verification
146
2.
Tittle
Tampil Halaman Home
Purpose
Menampilkan halaman ucapan selamat datang dan animasi bunga CV. Bonsai Interior Klik tombol home
Procedure Expected Result Actual Result
View Layar halaman Home
Verification
147
3.
Tittle
Tampil Halaman Profile
Purpose
Menampilkan Profil singkat, Visi dan Misi serta Struktur Organisasi CV. Bonsai Interior Klik tombol profile
Procedure Expected Result Actual Result
View Layar halaman profile
Verification
148
4.
Tittle
Tampil Halaman Produk Bunga Kering Ranting
Purpose
Menampilkan gambar dan keterangan produk Bunga Kering Ranting
Procedure
Klik tombol bunga kering ranting
Expected Result Actual Result
View Layar halaman Bunga Kering Ranting
Verification
149
5.
Tittle
Tampil Halaman Produk Bunga Kering Tinggi Bintang
Purpose
Menampilkan gambar dan keterangan produk Bunga Kering Tinggi Bintang Klik tombol bunga kering tinggi bintang
Procedure Expected Result Actual Result
View Layar halaman Bunga Kering Tinggi Bintang
Verification
150
6. Tittle Purpose Procedure Expected Result Actual Result
Tampil Halaman Produk Bunga Kering Golden Shower Menampilkan gambar dan keterangan produk Bunga Kering Golden Shower Klik tombol bunga kering golden shower View Layar halaman Bunga Kering Golden Shower
Verification
151
7. Tittle
Tampil Halaman Produk Bunga Kering Pakir Baru
Purpose
Menampilkan gambar dan keterangan produk Bunga Kering Pakir Baru
Procedure
Klik tombol bunga kering pakir baru
Expected Result Actual Result
View Layar halaman Bunga Kering Pakir Baru
Verification
152
8.
Tittle
Tampil Halaman Produk Bunga Kering Matahari
Purpose
Menampilkan gambar dan keterangan produk Bunga Kering Matahari
Procedure
Klik tombol bunga kering matahari
Expected Result Actual Result
View Layar halaman Bunga Kering Matahari
Verification
153
9.
Tittle
Tampil Halaman Produk Bunga Kering Sorgum
Purpose
Menampilkan gambar dan keterangan produk Bunga Kering Sorgum
Procedure
Klik tombol bunga kering sorgum
Expected Result Actual Result
View Layar halaman Bunga Kering Sorgum
Verification
154
10. Tittle
Tampil Halaman Produk Bunga Kering Hanjeli
Purpose
Menampilkan gambar dan keterangan produk Bunga Kering Hanjeli
Procedure
Klik tombol bunga kering hanjeli
Expected Result Actual Result
View Layar halaman Bunga Kering Hanjeli
Verification 155
11. Tittle
Tampil Halaman Gallery Jenis Bunga
Purpose
Menampilkan gambar jenis-jenis bunga CV. Bonsai Interior
Procedure
Klik tombol jenis bunga
Expected Result Actual Result
View Layar halaman Jenis Bunga
Verification 156
12. Tittle
Tampil Halaman Gallery Showroom
Purpose
Menampilkan gambar showroom CV. Bonsai Interior
Procedure
Klik tombol showroom
Expected Result Actual Result
View Layar halaman Showroom
157
Verification
13. Tittle
Tampil Halaman Gallery Tempat Produksi
Purpose
Menampilkan gambar tempat produksi bunga kering
Procedure
Klik tombol tempat produksi
Expected Result Actual Result
View Layar halaman Tempat Produksi
158
Verification
14. Tittle Purpose Procedure Expected Result Actual Result
Tampil Halaman Gallery Lokasi Outlet Menampilkan Gambar Peta Lokasi Outlet yang menjual Produk Bunga Kering CV. Bonsai Interior Klik tombol lokasi outlet View Layar halaman Lokasi Outlet
159
Verification
15. Tittle
Tampil Halaman Video Ranting
Purpose
Menampilkan video 3D Ranting
Procedure
Klik tombol ranting
Expected Result Actual Result
View Layar halaman Ranting
160
Verification
16. Tittle
Tampil Halaman Video Tinggi Bintang
Purpose
Menampilkan video 3D Tinggi Bintang
Procedure
Klik tombol tinggi bintang
Expected Result Actual Result
View Layar halaman Tinngi Bintang
161
Verification
17. Tittle
Tampil Halaman Video Golden Shower
Purpose
Menampilkan video 3D Golden Shower
Procedure
Klik tombol golden shower
Expected Result Actual Result
View Layar halaman Golden Shower
162
Verification
18. Tittle
Tampil Halaman Video Pakir Baru
Purpose
Menampilkan video 3D Pakir Baru
Procedure
Klik tombol pakir baru
Expected Result
View Layar halaman Pakir Baru 163
Actual Result
Verification
19. Tittle
Tampil Halaman Video Matahari
Purpose
Menampilkan video 3D Matahari
Procedure
Klik tombol matahari 164
Expected Result Actual Result
View Layar halaman Matahari
Verification
20. Tittle Purpose
Tampil Halaman Video Sorgum Menampilkan video 3D Sorgum 165
Procedure
Klik tombol sorgum
Expected Result Actual Result
View Layar halaman Sorgum
Verification
21. Tittle
Tampil Halaman Video Hanjeli 166
Purpose
Menampilkan video 3D Hanjeli
Procedure
Klik tombol hanjeli
Expected Result Actual Result
View Layar halaman Hanjeli
Verification
167
22. Tittle Purpose Procedure Expected Result Actual Result
Tampil Halaman Contact Menampilkan halaman informasi alamat dan nomer telepon CV. Bonsai Interior yang dapat dihubungi oleh pembeli Klik tombol contact View Layar halaman Contact
Verification
168
23. Tittle
Tampil Halaman Author
Purpose
Menampilkan video Author
Procedure
Klik tombol author
Expected Result Actual Result
View Layar halaman Author
Verification
169
LAMPIRAN 6 SK Penelitian Skripsi
170
LAMPIRAN 7 Coding Program Action Script PREVIEW
Layer 35 : fscommand("showmenu", "false");
SourceCode Music :
//Declare and initialize variables fade_volume=sound_volume=90; fade_in=fade_out=0; pause_pos=0; muted=false; my_sound=new Sound(); //pause_pos=0; mov_upper.mov_copy.mov_equalizer.flag="loop"; mov_upper.mov_copy.mov_equalizer.onRollOut = function() //Rollout button event { show_tooltip(false); } mov_upper.mov_copy.mov_equalizer.onRollOver = function() //Rollover button event { show_tooltip(true, xml_file.firstChild.attributes.music_title, this); } mov_upper.mov_copy.mov_equalizer.onRelease=function() { if (muted==true) muted=false else muted=true; if (sound_volume>0) { mov_upper.mov_copy.mov_equalizer.flag="noloop"; mov_upper.mov_copy.mov_equalizer.gotoAndPlay(51); mov_controls.mov_sound.slideTo(x,-10,0.5); sound_volume=0; pause_pos=my_sound.position/1000; my_sound.stop(); } else { mov_upper.mov_copy.mov_equalizer.flag="loop"; mov_upper.mov_copy.mov_equalizer.gotoAndPlay(1); mov_controls.mov_sound.slideTo(x,0,0.5);
171
sound_volume=90; } my_sound.setVolume(sound_volume); if (pause_pos>0) my_sound.start(pause_pos); } //Play function function play_song() { my_sound.setVolume(sound_volume); my_sound.loadSound(xml_file.firstChild.attributes.musi c_path, true); fade_in=1; my_sound.onSoundComplete = function() {if (sound_volume>0) play_song();} } //Create tooltips mov_tip._visible=false; show_tooltip = function (tooltip, tooltipText, button) { if (tooltip) {//Showing tooltip this.createEmptyMovieClip("hovertooltip", this.getNextHighestDepth()); mov_tip.desc.text=tooltipText;//Get text from XML file mov_tip.desc.autoSize=true; mov_tip.bar._width=Math.round(mov_tip.desc._width+6); //mov_tip.bar._width=7*mov_tip.desc.text.length;//Adju st number 7 if you use another font mov_tip.triangle._x=Math.round(mov_tip.bar._width-15); hovertooltip.onEnterFrame = function() { mov_tip._x=Math.round(this._xmousemov_tip.bar._width+15); mov_tip._y=Math.round(this._ymouse+30); mov_tip._visible=true; }; } else { delete hovertooltip.onEnterFrame; mov_tip._visible=false; } } //Fade in e out volume when there's a video mov_upper.onEnterFrame = function () { //Fade In if (fade_in==1) { if (sound_volume==0)
172
{
sound_volume=90; my_sound.start(pause_pos);
mov_upper.mov_copy.mov_equalizer.flag="loop";
}
mov_upper.mov_copy.mov_equalizer.gotoAndPlay(1); } my_sound.setVolume(fade_volume); fade_volume=fade_volume+3; if (fade_volume>=sound_volume) { fade_in=0; fade_volume=sound_volume=90; my_sound.setVolume(sound_volume); } } //Fade Out if (fade_out==1) { my_sound.setVolume(fade_volume); fade_volume=fade_volume-3; mov_upper.mov_copy.mov_equalizer.flag="noloop"; if (fade_volume<=0) { pause_pos=my_sound.position/1000; my_sound.stop(); fade_out=fade_volume=sound_volume=0; my_sound.setVolume(fade_volume); } }
SourceCode Scroll :
function update_row() { in_width=Stage.width; curr_width=Stage.width; if (mov_row._width<curr_width) { new_xpos=Math.round(in_width/2-mov_row._width/2); } else { repos_cont(); new_xpos=Math.round(Stage.width/2-mov_row._width/2); } }; update_row(); //Function to determine new row position when mouse is moving and over row this.onMouseMove=function() { if (this._xmouse>Math.floor((in_width-curr_width)/2) && this._xmouse<Math.floor(in_width+2*((curr_widthin_width)/2)) && this._ymouse>mov_row._y && this._ymouse<(mov_row._y+mov_row._height))
173
{
if (mov_row._width>curr_width) repos_cont();
} } //Function to determine new row position when mouse is moving and over row function repos_cont() { mouse_perc=(this._xmouse+(curr_widthin_width)/2)/curr_width; new_mov=mov_row._width-curr_width; new_xpos=Math.floor(-mouse_perc*new_mov)-(curr_widthin_width)/2; }; if (mov_row._width > curr_width) new_xpos=Math.floor((in_width-curr_width)/2); else new_xpos = Math.floor(in_width/2-mov_row._width/2); holder=mov_row._x; //Function to create and ease row movement function ease_it() { if (new_xpos!=mov_row._x) { destx=new_xpos; posx=holder; velx=(destx-posx)/4; holder=holder+velx; mov_row._x=Math.round(holder); } } //Function to keep row position updated mov_row.onEnterFrame=function() { ease_it(); }; update_row(); Action 2 //This frame checks if XML file is fully loaded before creating the first stripe of images this.onEnterFrame = function() { if(xml_file.loaded && first_loads==2) { delete this.onEnterFrame; gotoAndPlay(3);//Where the first stripe of images will be created and shown } } stop(); Action 3 mov_menu["mov_menu_button"+relative_pos].number_txt.colorTo( _global.color_on,0,"linear");
174
mov_menu["mov_menu_button"+relative_pos].but_txt.colorTo(0xF FFFFF,0,"linear",0.1); switch (menu_align) { case "left" : mov_menu._x=15+mov_lower.mov_logo._width+10; mov_lower.mov_logo._x=15; break; case "center" : mov_menu._x=Math.round(Stage.width/2mov_menu._width/2+mov_lower.mov_logo._width/2); mov_lower.mov_logo._x=Math.round(Stage.width/2mov_menu._width/2-mov_lower.mov_logo._width/2-5); break; case "right" : mov_menu._x=Math.round(Stage.width-mov_menu._width15); mov_lower.mov_logo._x=Math.round(Stage.widthmov_menu._width-15-mov_lower.mov_logo._width-10); break; } mov_lower.mov_glow._x=mov_lower.mov_logo._x+10; mov_lower.mov_mask_logo._x=mov_lower.mov_logo._x-15; mov_lower.slideTo(x,Math.round(Stage.height60),0.6,"easeOutExpo",1.1); mov_upper.slideTo(x,0,0.6,"easeOutExpo",1.1); if (xml_file.firstChild.attributes.welcome_note=="true") mov_menu.alphaTo(100,1,"linear",1.6,function(){show_no te();play_song();}); else mov_menu.alphaTo(100,1,"linear",1.6,function(){change_ layout();play_song();}); stop();
SourceCode Menu About Us
Scroll : function make_scroll() { var scroll_height:Number=mov_mask._height; // how much of the movie can be scrolled var scroll_area:Number=mov_text._heightmov_mask._height; var initContentPos:Number=mov_text._y; var left:Number=mov_bar._x; var top:Number=mov_bar._y; var right:Number=mov_bar._x; var bottom:Number=mov_bar._y+mov_bar._heightmov_dragger._height; mov_dragger._y=top; new_text_pos=""; //If the content is smaller than mask hide scroller if (scroll_area<0) { mov_dragger._visible=false; mov_bar._visible=false;
175
} else {
return;
mov_dragger._visible=true; mov_bar._visible=true;
} // Updates the contents position function updateContentPos() { var percent_scrolled:Number=(mov_dragger._yinitContentPos)/(scroll_height-mov_dragger._height); new_text_pos=Math.round(initContentPos(percent_scrolled*scroll_area)) } mov_dragger.onRollOver = function() { this.mov_h_back.alphaTo(70,0.5); } mov_dragger.onRollOut = function() { this.mov_h_back.alphaTo(40,0.5); } mov_dragger.onPress = function() { this.mov_h_back.alphaTo(70,0.5); startDrag(this, false, left, top, right, bottom); this.onMouseMove = function() { updateContentPos(); }; }; mov_dragger.onMouseUp = function() { this.mov_h_back.alphaTo(40,0.5); stopDrag(); delete this.onMouseMove; } var mouseListener:Object = new Object(); mouseListener.onMouseWheel = function(wheelNum:Number) { if (mov_dragger._y>=top && mov_dragger._y<=bottom) { mov_dragger._y-=wheelNum*5; if (mov_dragger._y
bottom) mov_dragger._y=bottom; updateContentPos(); } }; Mouse.addListener(mouseListener); } //Ease text movement
176
mov_text.onEnterFrame = function() { //6 number defines speed. Bigger number=more easing mov_text._y=Math.round(mov_text._y-((mov_text._ynew_text_pos)/4)); } Action : #include "mc_tween2.as" import flash.display.*; //Load information from XML file if (!_global.color_on) {_global.color_on="0xCC0066"};//Set new color if it doesn't exist already mov_dragger.mov_h_back.colorTo(_global.color_on,0); title_txt.colorTo(_global.color_on,0); mov_dragger._alpha=0; mov_bar._alpha=0; mov_text._alpha=0; title_txt._alpha=0; var xml_file = new XML(); xml_file.ignoreWhite = true; xml_file.onLoad = function() { title_txt.text=xml_file.firstChild.firstChild.attribut es.title; var format:TextFormat = new TextFormat(); format.letterSpacing=2; title_txt.setTextFormat(format); title_txt.autoSize=true; mov_text.text_field.htmlText=xml_file.firstChild.first Child.firstChild.nodeValue;//0 position corresponds to Home on XML file mov_text.text_field.autoSize="left"; mov_dragger.alphaTo(100,0.6,"linear",1); mov_bar.alphaTo(20,0.6,"linear",1); mov_text.alphaTo(100,0.4,"linear",0.8); title_txt.alphaTo(75,0.4,"linear",0.8); make_scroll(); //load_img_about(this.firstChild.firstChild.attributes .image,mov_holder); } //+++++++++++++++++++++++++IMPORTANT++++++++++++++++++++++++ +++++++++++ //Load XML file. If you want to use Static text remove or comment the next line xml_file.load("about_us.xml"); //xml_file.load("about_us.xml"+"?"+new Date().getTime());//Load XML file //Function to stop some procedures when menu button is pressed receiving = new LocalConnection(); receiving.stopMessage=function() { //delete mov_text.onEnterFrame; }
177
receiving.connect("stopConnection"); stop();
SourceCode Menu Author
Action : // include tween engine and turn on broadcasting #include "mc_tween2.as" Stage.align = "TL"; menu_buttons_spacing=15; function align_services() { } //Stage listener creation this.stageListener = {}; this.stageListener.onResize = function() { align_services(); } Stage.addListener(this.stageListener); //Initialize variables if (!_global.color_on) {_global.color_on="0xCC0066"};//Set new color if it doesn't exist already if (!_global.outsider_pos) _global.outsider_pos=0//Set new color if it doesn't exist already already_loaded=false; //Initialize content but_next.mov_line_l.colorTo(_global.color_on,0); but_prev.mov_line_r.colorTo(_global.color_on,0); mov_news.mov_imgloader.colorTo(_global.color_on,0); mov_news.txt_title.colorTo(_global.color_on,0); but_next.mov_line_r.colorTo(_global.color_on,0); but_prev.mov_line_r.colorTo(_global.color_on,0); mov_set_buttons.mov_set_button._visible=false; mov_news.mov_entries.mov_entry._visible=false;//Hide the model button mov_news.mov_imgloader._alpha=0; mov_news.mov_imgloader._width=0; mov_news.mov_maskloader._width=0; mov_news.mov_maskloader._height=0; //Function to load image function load_image(imagem:String,clip:MovieClip) { //Set loader behaviours var fileLoader:MovieClipLoader = new MovieClipLoader(); var fileListener:Object = new Object(); fileListener.onLoadStart=function() { clip._alpha=0; mov_news.mov_imgloader._width=0; mov_news.mov_maskloader._width=0; mov_news.mov_maskloader._height=0; }
178
//Set behavious when image loading is in progress fileListener.onLoadProgress=function(m_clip:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void { //mov_news.mov_imgloader._width=Math.round(bytesLoaded /bytesTotal*350); mov_news.mov_imgloader._width+=Math.round((Math.round( bytesLoaded/bytesTotal*350)mov_news.mov_imgloader._width)/8); if (bytesLoaded/bytesTotal<0.5) mov_news.mov_imgloader._alpha=100; }; //Set behavious when file is fully loaded fileListener.onLoadComplete=function() { mov_news.mov_imgloader._width=350; mov_news.mov_imgloader.alphaTo(0,0.3,"linear"); mov_news.mov_maskloader.scaleTo(100,1); clip.alphaTo(100,0.1,"linear"); } fileLoader.addListener(fileListener); fileLoader.loadClip(imagem,clip); } //Function to load all the info on the middle function load_item(new_pos:Number,control:Boolean) { mov_news.body_txt._x=100; if (control==true) _global.from_outside=false; else _global.from_outside=true; mov_news._parent._parent._parent.edit_swf(); load_image(news_xml.firstChild.childNodes[new_pos].att ributes.image,mov_news.mov_thumb); mov_news.txt_title.text=news_xml.firstChild.childNodes [new_pos].attributes.title;//Assign button title var format:TextFormat = new TextFormat(); format.letterSpacing=2; mov_news.txt_title.setTextFormat(format); mov_news.txt_title.autoSize=true; mov_news.body_txt.htmlText=news_xml.firstChild.childNo des[new_pos].firstChild.nodeValue;//Assign button title mov_news.txt_title.alphaTo(75,0.4); mov_news.body_txt.slideTo(370,y,0.5); } //Assingn XML information to movieclips var news_xml = new XML(); news_xml.ignoreWhite = true; news_xml.onLoad = function() { //Remove previous menu buttons for (var i=0; i<50; i++) {
179
if (mov_news._parent._parent._parent.mov_set_buttons["mov_set_b utton"+i]==undefined) { limit=i; i=49; } } for (var i=0; i
180
mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].but_txt.autoSize=true; but_x+=mov_news._parent._parent._parent.mov_set_button s["mov_set_button"+i].but_txt._width+12; //Set button properties //mov_news.mov_entries["mov_entry"+i].body_txt.htmlTex t=entries[i].firstChild.nodeValue;//Assign button title mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].pos=i;//Assign news XML relative position. Usefull for button events //At the last entry create the scroll if (i==(entries.length-1)) { mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].but_txt.colorTo(_global.co lor_on,0,"linear",0.1); load_item(0); mov_news._parent._parent._parent.mov_set_buttons._visi ble=true; mov_news._parent._parent._parent.mov_set_buttons.alpha To(100,0.6,"linear",0.8); } //Set button events mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].onRollOver = function() { if (this.pos!=_global.outsider_pos) this.colorTo(0x999999,0.5,"linear"); } mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].onRollOut = function() { if (this.pos!=_global.outsider_pos) this.colorTo(0x666666,0.5,"linear") } mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].onRelease = function() { if (this.pos!=_global.outsider_pos) { mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"line ar"); _global.outsider_pos=this.pos;
181
mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(_global.color_on,0 .5,"linear"); cont=this.pos; mov_news.body_txt.slideTo(640,y,0.3,"linear"); mov_news.txt_title.alphaTo(0,0.3,"linear"); mov_news.mov_thumb.alphaTo(0,0.3,"linear"); mov_news.alphaTo(100,0,"linear",0.4,function(){load_it em(cont);}); } } } already_loaded=true; } //Define XML path and load it news_xml.load("author.xml"); //news_xml.load("author.xml"+"?"+new Date().getTime());//Load XML file //Function to stop some procedures when menu button is pressed receiving = new LocalConnection(); receiving.menuMessage=function() { align_services(); mov_news._parent._parent._parent.ctrl_txt2.text="receb i msg"+_global.outsider_pos+_global.insider_pos; if (already_loaded==true) load_item(_global.outsider_pos,true); } receiving.connect("menuConnection"); //Set button events but_next.onRelease = function() { mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"line ar"); _global.outsider_pos++; if (_global.outsider_pos==news_xml.firstChild.childNodes.length ) _global.outsider_pos=0; mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(_global.color_on,0 .5,"linear"); mov_news.body_txt.slideTo(640,y,0.3,"linear"); mov_news.txt_title.alphaTo(0,0.3,"linear"); mov_news.mov_thumb.alphaTo(0,0.3,"linear");
182
mov_news.alphaTo(100,0,"linear",0.4,function(){load_it em(_global.outsider_pos);}); } but_next.onRollOut = function() { this.mov_line_l.colorTo(_global.color_on,1); } but_next.onRollOver = function() { this.mov_line_l.colorTo(0xFFFFFF,1); } but_prev.onRelease = function() { mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"line ar"); _global.outsider_pos--; if (_global.outsider_pos==-1) _global.outsider_pos=news_xml.firstChild.childNodes.le ngth-1; mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(_global.color_on,0 .5,"linear"); mov_news.body_txt.slideTo(640,y,0.3,"linear"); mov_news.txt_title.alphaTo(0,0.3,"linear"); mov_news.mov_thumb.alphaTo(0,0.3,"linear"); mov_news.alphaTo(100,0,"linear",0.4,function(){load_it em(_global.outsider_pos);}); } but_prev.onRollOut = function() { this.mov_line_r.colorTo(_global.color_on,1); } but_prev.onRollOver = function() { this.mov_line_r.colorTo(0xFFFFFF,1); } stop();
SourceCode Menu Contact
Action : #include "mc_tween2.as" if (!_global.color_on) {_global.color_on="0xCC0066"};//Set new color if it doesn't exist already phone_title.text.colorTo(_global.color_on,0); email_title.text.colorTo(_global.color_on,0); sendit_title.text.colorTo(_global.color_on,0); mov_imgloader.colorTo(_global.color_on,0); title_txt.colorTo(_global.color_on,0); mov_imgloader._width=0; //Function to load image
183
function load_image(imagem:String,clip:MovieClip) { //Set loader behaviours var fileLoader:MovieClipLoader = new MovieClipLoader(); var fileListener:Object = new Object(); fileListener.onLoadStart=function() { clip._alpha=0; mov_imgloader._width=0; mov_maskloader._width=0; mov_maskloader._height=0; } //Set behavious when image loading is in progress fileListener.onLoadProgress=function(m_clip:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void { //mov_news.mov_imgloader._width=Math.round(bytesLoaded /bytesTotal*350); mov_imgloader._width+=Math.round((Math.round(bytesLoad ed/bytesTotal*445)-mov_imgloader._width)/8); if (bytesLoaded/bytesTotal<0.5) mov_imgloader._alpha=100; }; //Set behavious when file is fully loaded fileListener.onLoadComplete=function() { mov_imgloader._width=445; mov_imgloader.alphaTo(0,0.3,"linear"); mov_maskloader.scaleTo(100,1); clip.alphaTo(100,0.1,"linear"); } fileLoader.addListener(fileListener); fileLoader.loadClip(imagem,clip); } //Load information from XML file var xml_file = new XML(); xml_file.ignoreWhite = true; xml_file.onLoad = function() { title_txt.alphaTo(100,0,"linear",1,function(){load_ima ge(xml_file.firstChild.firstChild.attributes.image,mov_holde r)}); title_txt.text=xml_file.firstChild.firstChild.attribut es.title; var format:TextFormat = new TextFormat(); format.letterSpacing=2; title_txt.setTextFormat(format); title_txt.autoSize=true; title_txt._alpha=75; adress1_txt.text=xml_file.firstChild.firstChild.attrib utes.line1; adress2_txt.text=xml_file.firstChild.firstChild.attrib utes.line2;
184
adress3_txt.text=xml_file.firstChild.firstChild.attrib utes.line3; phone_txt.text=xml_file.firstChild.firstChild.attribut es.phone; email_txt.text=xml_file.firstChild.firstChild.attribut es.email; email_txt.autoSize="left"; but_send_mail._width=email_txt._width; phone_title.colorTo(_global.color_on,0); email_title.colorTo(_global.color_on,0); } //+++++++++++++++++++++++++IMPORTANT++++++++++++++++++++++++ +++++++++++ //Load XML file. If you want to use Static text remove or comment the next line xml_file.load("contact.xml"); //xml_file.load("contact.xml"+"?"+new Date().getTime());//Load XML file //Set send mail button properties but_send_mail.onRollOver=function() { email_txt.colorTo(_global.color_on,0.4); } but_send_mail.onRollOut=function() { email_txt.colorTo(0xFFFFFF,0.4); } but_send_mail.onRelease=function() { getURL("mailto:"+txt_email); } //Function to stop some procedures when menu button is pressed receiving = new LocalConnection(); receiving.stopMessage=function() { } receiving.connect("stopConnection"); stop();
SourceCode Menu Intro
Tooltip : //Create tooltips mov_tip._visible=false; show_tooltip = function (tooltip, tooltipText, button) { if (tooltip) {//Showing tooltip this.createEmptyMovieClip("hovertooltip", this.getNextHighestDepth()); mov_tip.desc.text=tooltipText;//Get text from XML file mov_tip.desc.autoSize=true; mov_tip.bar._width=Math.round(mov_tip.desc._width+6);
185
//mov_tip.bar._width=7*mov_tip.desc.text.length;//Adju st number 7 if you use another font mov_tip.triangle._x=Math.round(mov_tip.bar._width/2mov_tip.triangle._width/2); hovertooltip.onEnterFrame = function() { mov_tip._x=Math.round(this._xmousemov_tip.bar._width/2); mov_tip._y=Math.round(this._ymouse-30); mov_tip._visible=true; }; } else { delete hovertooltip.onEnterFrame; mov_tip._visible=false; } } Actions : #include "mc_tween2.as" //Initialize variables if (!_global.color_on) _global.color_on="0xCC0066";//Set new color if it doesn't exist already if (!_global.outsider_pos) _global.outsider_pos=0;//Set new color if it doesn't exist already if (!_global.insider_pos) _global.insider_pos=0;//Set new color if it doesn't exist already play_mode="play"; mov_imgloader._alpha=0; mov_holder_fake._visible=false; this.mov_set_buttons.mov_set_button._visible=false; mov_set_buttons.mov_play_pause.colorTo(_global.color_on,0); mov_imgloader.colorTo(_global.color_on,0); //Function to perform a few actions right after the image has fadedout in function fadedout() { if (play_mode=="play") { mov_set_buttons["mov_set_button"+_global.insider_pos]. colorTo(0xFFFFFF,0.5); //Fade out and load next image _global.insider_pos++; if (xml_file.firstChild.childNodes[_global.insider_pos].attribu tes.path==undefined) _global.insider_pos=0;
186
mov_set_buttons["mov_set_button"+_global.insider_pos]. colorTo(_global.color_on,0.5); load_bk(xml_file.firstChild.childNodes[_global.insider _pos].attributes.path,mov_holder_fake); } } function load_bk(imagem:String,clip:MovieClip) { //Set loader behaviours var fileLoader:MovieClipLoader = new MovieClipLoader(); var fileListener:Object = new Object(); //Set behavious when image loading is in progress fileListener.onLoadStart = function(clip:MovieClip):Void { mov_imgloader._alpha=100; mov_imgloader._width=0; //mov_holder_home._alpha=0; }; fileListener.onLoadProgress=function(m_clip:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void { mov_imgloader._width=bytesLoaded/bytesTotal*784; }; //Set behavious when file is fully loaded fileListener.onLoadComplete=function() { mov_holder_fake._visible=false; mov_set_buttons._parent._parent._parent.edit_swf(); mov_imgloader.alphaTo(0,0.3,"linear"); mov_holder_home.alphaTo(0,0.3,"linear",0,function(){bi t_loader.loadClip(xml_file.firstChild.childNodes[_global.ins ider_pos].attributes.path,mov_holder_home)}); } fileLoader.addListener(fileListener); fileLoader.loadClip(imagem,clip); } //MovieClipLoader for bitmap image loading var bit_loader:MovieClipLoader = new MovieClipLoader(); var bit_listener:Object = new Object(); //Initialize variables for loading bit_listener.onLoadStart = function(mov_holder_home:MovieClip):Void { }; //Update preloader bar during loading process bit_listener.onLoadProgress = function(mov_holder_home:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void
187
{ }; //At the end display loaded image using a crossfade and check queue bit_listener.onLoadInit = function(mov_holder_home:MovieClip):Void { mov_holder_home.alphaTo(100,0.3,"linear"); if (play_mode=="play") { mov_set_buttons.mov_clock.mov_pointer.rotateTo(360,xml _file.firstChild.childNodes[_global.insider_pos].attributes. display_time,"linear") mov_holder_home.slideTo(3,3,0.1,"linear",xml_file.firs tChild.childNodes[_global.insider_pos].attributes.display_ti me,function(){fadedout()}); } }; bit_loader.addListener(bit_listener); //Load information from XML file var xml_file = new XML(); xml_file.ignoreWhite = true; xml_file.onLoad = function() { load_bk(xml_file.firstChild.childNodes[_global.insider _pos].attributes.path,mov_holder_fake); my_x=0; for (i=0;i<xml_file.firstChild.childNodes.length;i++) { mov_set_buttons.mov_set_button.duplicateMovieClip("mov _set_button"+i, i);//Create item button //Set button properties mov_set_buttons["mov_set_button"+i]._x=my_x; mov_set_buttons["mov_set_button"+i].txt_numb.text=i+1; true;
mov_set_buttons["mov_set_button"+i].txt_numb.autoSize= mov_set_buttons["mov_set_button"+i].pos=i;
mov_set_buttons["mov_set_button"+i].txt_cat=xml_file.f irstChild.childNodes[i].attributes.title; dth;
my_x+=mov_set_buttons["mov_set_button"+i].txt_numb._wi
mov_set_buttons["mov_set_button"+i].onRollOut = function() //Rollout button event { show_tooltip(false); } mov_set_buttons["mov_set_button"+i].onRollOver = function() //Rollover button event {
188
show_tooltip(true, this.txt_cat, this); } mov_set_buttons["mov_set_button"+i].onRelease = function() //Release button event { mov_holder_home.stopTween(); mov_set_buttons["mov_set_button"+_global.insider_pos]. colorTo(0xFFFFFF,0.5); this.colorTo(_global.color_on,0.5); _global.insider_pos=Number(this.pos); load_bk(xml_file.firstChild.childNodes[_global.insider _pos].attributes.path,mov_holder_fake); } } mov_set_buttons["mov_set_button"+_global.insider_pos]. colorTo(_global.color_on,0); mov_set_buttons.mov_play_pause._x=Math.round(mov_set_b uttons["mov_set_button"+(i-1)]._x+20); //mov_set_buttons.mov_clock._x=mov_set_buttons.mov_pla y_pause._x+38; mov_set_buttons._x=790-mov_set_buttons._width-5; } //Load XML File xml_file.load("intro.xml"); //xml_file.load("intro.xml"+"?"+new Date().getTime());//Load XML file mov_set_buttons.mov_play_pause.onRelease=function() { mov_holder_home.stopTween(); if (play_mode=="play") { mov_set_buttons.mov_play_pause.gotoAndStop(2); play_mode="pause"; } else { mov_set_buttons.mov_play_pause.gotoAndStop(1); play_mode="play"; //Fade out and load next image mov_set_buttons["mov_set_button"+_global.insider_pos]. colorTo(0xFFFFFF,0.5); _global.insider_pos++; if (xml_file.firstChild.childNodes[_global.insider_pos].attribu tes.path==undefined) _global.insider_pos=0; mov_set_buttons["mov_set_button"+_global.insider_pos]. colorTo(_global.color_on,0.5); load_bk(xml_file.firstChild.childNodes[_global.insider _pos].attributes.path,mov_holder_fake); }
189
} //Function to stop some procedures when menu button is pressed receiving = new LocalConnection(); receiving.stopMessage=function() { mov_holder_home.stopTween(); } receiving.connect("stopConnection"); stop();
SourceCode Menu Product
Action : //Include tween engine and turn on broadcasting #include "mc_tween2.as" Stage.align = "TL"; menu_buttons_spacing=15; function align_services() { //but_prev._x=Math.round(-but_prev._width-20); //but_next._x=Math.round(Number(mov_news._parent._pare nt._parent.xml_file.firstChild.childNodes[mov_news._parent._ parent._parent.relative_pos].attributes.or_width)+20); } //Stage listener creation this.stageListener = {}; this.stageListener.onResize = function() { align_services(); } Stage.addListener(this.stageListener); //Initialize variables //Initialize content mov_news.txt_client._y=10; mov_news.txt_date._y=41; mov_news.txt_url._y=72; mov_set_buttons.mov_set_button._visible=false; mov_news.mov_imgloader._alpha=0; mov_news.mov_imgloader._width=0; mov_news.mov_maskloader._width=0; mov_news.mov_maskloader._height=0; if (!_global.color_on) {_global.color_on="0xCC0066"};//Set new color if it doesn't exist already if (!_global.outsider_pos) _global.outsider_pos=0//Set new color if it doesn't exist already if (!_global.insider_pos) _global.insider_pos=0//Set new color if it doesn't exist already mov_news.txt_title.colorTo(_global.color_on,0); mov_news.sub1.colorTo(_global.color_on,0); mov_news.sub2.colorTo(_global.color_on,0); mov_news.sub3.colorTo(_global.color_on,0); mov_news.sub4.colorTo(_global.color_on,0); but_prev.mov_line_r.colorTo(_global.color_on,0);
190
but_next.mov_line_l.colorTo(_global.color_on,0); mov_news.mov_left.colorTo(_global.color_on,0); mov_news.mov_right.colorTo(_global.color_on,0); mov_news.sub1._alpha=75; mov_news.sub2._alpha=75; mov_news.sub3._alpha=75; mov_news.sub4._alpha=75; already_loaded=false; mov_news.mov_imgloader.colorTo(_global.color_on,0); mov_news.mov_entries.mov_entry._visible=false;//Hide the model button //Function to load image function load_image(imagem:String,clip:MovieClip) { //Set loader behaviours var fileLoader:MovieClipLoader = new MovieClipLoader(); var fileListener:Object = new Object(); fileListener.onLoadStart=function() { clip._alpha=0; mov_news.mov_imgloader._width=0; mov_news.mov_maskloader._width=0; mov_news.mov_maskloader._height=0; } //Set behavious when image loading is in progress fileListener.onLoadProgress=function(m_clip:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void { //mov_news.mov_imgloader._width=Math.round(bytesLoaded /bytesTotal*280); mov_news.mov_imgloader._width+=Math.round((Math.round( bytesLoaded/bytesTotal*280)mov_news.mov_imgloader._width)/8); if (bytesLoaded/bytesTotal<0.5) mov_news.mov_imgloader._alpha=100; }; //Set behavious when file is fully loaded fileListener.onLoadComplete=function() { mov_news.mov_imgloader._width=280; mov_news.mov_imgloader.alphaTo(0,0.3,"linear"); mov_news.mov_maskloader.scaleTo(100,1); clip.alphaTo(100,0.1,"linear"); } fileLoader.addListener(fileListener); fileLoader.loadClip(imagem,clip); } //Function to load all the info on the middle function load_item(new_set:Number,new_pos:Number,control:Boolean) { trace ("loadar "+new_set+" "+new_pos); _global.insider_pos=new_pos;
191
cont=Number(new_pos)+1; load_image(news_xml.firstChild.childNodes[new_set].chi ldNodes[new_pos].attributes.image,mov_news.mov_thumb); this.mov_news.txt_view.text="Photo "+cont+" dari "+news_xml.firstChild.childNodes[new_set].childNodes.length; if (_global.outsider_pos!=new_set) { mov_news.txt_client._y=10; mov_news.txt_date._y=41; mov_news.txt_url._y=72;
} _global.outsider_pos=new_set; if (control==true) _global.from_outside=false; else _global.from_outside=true; mov_news._parent._parent._parent.edit_swf(); mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(_global.color_on,0 .1,"linear"); mov_news.txt_title.alphaTo(75,0.5); mov_news.txt_client.slideTo(x,44,0.5); mov_news.txt_date.slideTo(x,75,0.5); mov_news.txt_url.slideTo(x,106,0.5); mov_news.txt_description.alphaTo(100,0.5); mov_news.txt_title.text=news_xml.firstChild.childNodes [new_set].attributes.title;//Assign title var format:TextFormat = new TextFormat(); format.letterSpacing=2; mov_news.txt_title.setTextFormat(format); mov_news.txt_title.autoSize=true; mov_news.txt_client.text=news_xml.firstChild.childNode s[new_set].attributes.client;//Assign title mov_news.txt_date.text=news_xml.firstChild.childNodes[ new_set].attributes.date;//Assign date mov_news.txt_url.text=news_xml.firstChild.childNodes[n ew_set].attributes.url;//Assign URL if available if (news_xml.firstChild.childNodes[new_set].attributes.url!="") { mov_news.mov_url.enabled=true; } else mov_news.mov_url.enabled=false; mov_news.txt_description.text=news_xml.firstChild.chil dNodes[new_set].attributes.description;//Assign description text } //Assingn XML information to movieclips var news_xml = new XML(); news_xml.ignoreWhite = true; news_xml.onLoad = function() { //Remove previous menu buttons
192
for (var i=0; i<50; i++) { if (mov_news._parent._parent._parent.mov_set_buttons["mov_set_b utton"+i]==undefined) { limit=i; i=49; } } for (var i=0; i
193
mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i]._x=but_x; mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].but_txt.text=entries[i].attributes.title; mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].but_txt.autoSize=true; but_x+=mov_news._parent._parent._parent.mov_set_button s["mov_set_button"+i].but_txt._width+12; //Set button properties //mov_news.mov_entries["mov_entry"+i].body_txt.htmlTex t=entries[i].firstChild.nodeValue;//Assign button title mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].pos=i;//Assign news XML relative position. Usefull for button events //At the last entry create the scroll if (i==(entries.length-1)) { mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].but_txt.colorTo(_global.co lor_on,0,"linear",0.1); load_item(_global.outsider_pos,_global.insider_pos); mov_news._parent._parent._parent.mov_set_buttons._visi ble=true; mov_news._parent._parent._parent.mov_set_buttons.alpha To(100,0.6,"linear",0.8); } //Set button events mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].onRollOver = function() { if (this.pos!=_global.outsider_pos) this.colorTo(0x999999,0.5,"linear") } mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].onRollOut = function() { if (this.pos!=_global.outsider_pos) this.colorTo(0x666666,0.5,"linear") } mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+i].onRelease = function() {//Fade out if (this.pos!=_global.outsider_pos)
194
{ mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"line ar"); mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+this.pos].colorTo(_global.color_on,0.5,"linear") ; cont=this.pos; mov_news.txt_client.slideTo(x,59,0.2,"linear"); mov_news.txt_date.slideTo(x,90,0.2,"linear"); mov_news.txt_url.slideTo(x,121,0.2,"linear"); mov_news.txt_title.alphaTo(0,0.3,"linear"); mov_news.mov_thumb.alphaTo(0,0.3,"linear"); mov_news.txt_description.alphaTo(0,0.3,"linear",0,func tion(){load_item(cont,0);}); } } } already_loaded=true; } //Define XML path and load it news_xml.load("product.xml"); //news_xml.load("product.xml"+"?"+new Date().getTime());//Load XML file mov_news.mov_left.onRelease=function() { _global.insider_pos--; if (_global.insider_pos==-1) _global.insider_pos=0; else mov_news.mov_thumb.alphaTo(0,0.3,"linear",0,function() {load_item(_global.outsider_pos,_global.insider_pos)}); } mov_news.mov_right.onRelease=function() { _global.insider_pos++; if (_global.insider_pos==news_xml.firstChild.childNodes[_global .outsider_pos].childNodes.length) _global.insider_pos=news_xml.firstChild.childNodes[_gl obal.outsider_pos].childNodes.length-1; else mov_news.mov_thumb.alphaTo(0,0.3,"linear",0,function() {load_item(_global.outsider_pos,_global.insider_pos)}); }
195
mov_news.mov_url.onRollOver=function() { mov_news.txt_url.colorTo(_global.color_on,0.3,"linear" ); } mov_news.mov_url.onRollOut=function() { mov_news.txt_url.colorTo(0xFFFFFF,0.3,"linear"); } mov_news.mov_url.onRelease=function() { getURL("http://"+news_xml.firstChild.childNodes[_globa l.outsider_pos].attributes.url,"_blank"); } //Function to stop some procedures when menu button is pressed receiving = new LocalConnection(); receiving.menuMessage=function() { mov_news._parent._parent._parent.ctrl_txt2.text="msg projectos"; align_services(); if (already_loaded==true) load_item(_global.outsider_pos,_global.insider_pos,tru e); } receiving.connect("menuConnection"); //Set button events but_next.onRelease = function() { mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"line ar"); cont=_global.outsider_pos; cont++; if (cont==news_xml.firstChild.childNodes.length) cont=0; mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+cont].colorTo(_global.color_on,0.5,"linear"); //mov_set_buttons["mov_set_button"+_global.outsider_po s].colorTo(0x666666,0.5,"linear"); mov_news.txt_client.slideTo(x,59,0.2,"linear"); mov_news.txt_date.slideTo(x,90,0.2,"linear"); mov_news.txt_url.slideTo(x,121,0.2,"linear"); mov_news.txt_title.alphaTo(0,0.3,"linear"); mov_news.mov_thumb.alphaTo(0,0.3,"linear"); mov_news.txt_description.alphaTo(0,0.3,"linear",0,func tion(){load_item(cont,0);}); } but_next.onRollOut = function() { this.mov_line_l.colorTo(_global.color_on,1); } but_next.onRollOver = function() {
196
this.mov_line_l.colorTo(0xFFFFFF,1); } but_prev.onRelease = function() { mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"line ar"); cont=_global.outsider_pos; cont--; if (cont==-1) cont=news_xml.firstChild.childNodes.length-1; mov_news._parent._parent._parent.mov_set_buttons["mov_ set_button"+cont].colorTo(_global.color_on,0.5,"linear"); mov_news.txt_client.slideTo(x,59,0.2,"linear"); mov_news.txt_date.slideTo(x,90,0.2,"linear"); mov_news.txt_url.slideTo(x,121,0.2,"linear"); mov_news.txt_title.alphaTo(0,0.3,"linear"); mov_news.mov_thumb.alphaTo(0,0.3,"linear"); mov_news.txt_description.alphaTo(0,0.3,"linear",0,func tion(){load_item(cont,0);}); } but_prev.onRollOut = function() { this.mov_line_r.colorTo(_global.color_on,1); } but_prev.onRollOver = function() { this.mov_line_r.colorTo(0xFFFFFF,1); } stop();
SourceCode Menu Video
Action : //Include MC Tween #include "mc_tween2.as" //Initialize variables Stage.align = "TL"; menu_buttons_spacing=15; if (!_global.color_on) {_global.color_on="0xCC0066"};//Set new color if it doesn't exist already if (!_global.outsider_pos) _global.outsider_pos=0//Set new color if it doesn't exist already if (!_global.insider_pos) _global.insider_pos=0//Set new color if it doesn't exist already already_tried=false; //Initialize content mov_content.mov_videos.mov_entries.mov_entry._visible=false; mov_set_buttons.mov_set_button._visible=false; mov_content.mov_videos.mov_video._alpha=0;
197
mov_content.mov_videos.mov_dragger.mov_h_back.colorTo(_globa l.color_on,0); mov_content.mov_videos.title_txt.colorTo(_global.color_on,0) ; but_next.mov_line_l.colorTo(_global.color_on,0); but_prev.mov_line_r.colorTo(_global.color_on,0); mov_content.mov_videos.title_txt._alpha=75; mov_content.mov_videos.mov_video.mov_video_controls.mov_time .colorTo(_global.color_on,0); mov_content.mov_videos.mov_video.mov_video_controls.mov_righ t_controls.mov_volume.mov_bars.colorTo(_global.color_on,0); function align_services() { } function recreate_right_panel(new_pos:Number) { //Remove previous thumbs for (i=0;i<xml_file.firstChild.childNodes[_global.outsider_pos]. childNodes.length;i++) removeMovieClip(mov_content.mov_videos.mov_entries["mo v_entry"+i]); _global.outsider_pos=new_pos; mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+_global.outsider_pos].colorTo(_global.color_o n,0.1,"linear"); var nodes:Array = xml_file.firstChild.childNodes[new_pos]; var entries=nodes.childNodes; title_txt.text=nodes.attributes.title;//Get title text for (var i=0; i<entries.length; i++) { //Create a new button for each entry mov_content.mov_videos.mov_entries.mov_entry.duplicate MovieClip("mov_entry"+i, i); mov_content.mov_videos.mov_entries["mov_entry"+i]._x=0 ;//Assign button x position mov_content.mov_videos.mov_entries["mov_entry"+i]._y=i *(mov_content.mov_videos.mov_entries.mov_entry._height1);//Assign button y position ha=60;
mov_content.mov_videos.mov_entries["mov_entry"+i]._alp
mov_content.mov_videos.mov_entries["mov_entry"+i].body _txt.htmlText=entries[i].firstChild.nodeValue;//Assign button title mov_content.mov_videos.mov_entries["mov_entry"+i].titl e_txt.colorTo(_global.color_on,0.1);
198
mov_content.mov_videos.mov_entries["mov_entry"+i].titl e_txt.text=entries[i].attributes.title.toUpperCase();;//Assi gn button title mov_content.mov_videos.mov_entries["mov_entry"+i].mov_ thumb.loadMovie(entries[i].attributes.image); mov_content.mov_videos.mov_entries["mov_entry"+i].pos= i;//Assign news XML relative position. Usefull for button events //At the last new set correct color for all buttons if (i==entries.length-1) { mov_content.mov_videos.mov_entries.alphaTo(100,1,"ease InOutExpo",0,function(){mov_content.mov_videos.load_video(_g lobal.insider_pos)}); mov_content.mov_videos.make_scroll(); trace ("carregar video netries-1") ; } //Set button events mov_content.mov_videos.mov_entries["mov_entry"+i].mov_ hidden.onRollOver = function() {//Fade in this._parent.alphaTo(100,1); //this._parent.mov_line.alphaTo(20,1); } mov_content.mov_videos.mov_entries["mov_entry"+i].mov_ hidden.onRollOut = function() {//Fade out this._parent.alphaTo(60,1,"easeOutExpo",0.2); ;
this._parent.mov_line.alphaTo(100,1,"easeOutExpo",0.2) }
mov_content.mov_videos.mov_entries["mov_entry"+i].mov_ hidden.onRelease = function() {//Load video _global.insider_pos=this._parent.pos; ear"); ");
mov_content.mov_videos.body_txt.slideTo(890,y,0.2,"lin mov_content.mov_videos.title_txt.alphaTo(0,0.3,"linear
mov_content.mov_videos.mov_video.mov_video_screen.alph aTo(0,0.3,"linear");
199
mov_content.mov_videos.new_stream.close(); mov_content.mov_videos.alphaTo(100,0.3,"linear",0.1,fu nction(){mov_content.mov_videos.load_video(_global.insider_p os);}); } } } //Assingn XML information to movieclips //Define XML path and load it var xml_file = new XML(); xml_file.ignoreWhite = true; xml_file.contentType = "text/xml"; xml_file.onLoad = function(success) { //Remove previous menu buttons for (var i=0; i<50; i++) { if (mov_content._parent._parent._parent.mov_set_buttons["mov_se t_button"+i]==undefined) { limit=i; i=49; } } for (var i=0; i
200
but_x=mov_content._parent._parent._parent.mov_set_butt ons.mov_menu_button._width+menu_buttons_spacing; var nodes:Array = xml_file.firstChild; var entries=nodes.childNodes; for (var i=0; i<entries.length; i++) { //Create a new button for each entry mov_content._parent._parent._parent.mov_set_buttons.mo v_set_button.duplicateMovieClip("mov_set_button"+i, i);//Create item button mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+i]._x=but_x; mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+i].but_txt.text=entries[i].attributes.title; mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+i].but_txt.autoSize=true; but_x+=mov_content._parent._parent._parent.mov_set_but tons["mov_set_button"+i].but_txt._width+12; //Set button properties //mov_content.mov_entries["mov_entry"+i].txt_body.html Text=entries[i].firstChild.nodeValue;//Assign button title mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+i].pos=i;//Assign news XML relative position. Usefull for button events //At the last entry create the scroll if (i==(entries.length-1) || entries.length==0) { mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+_global.outsider_pos].but_txt.colorTo(_global .color_on,0,"linear",0.1); recreate_right_panel(_global.outsider_pos); mov_content._parent._parent._parent.mov_set_buttons._v isible=true; mov_content._parent._parent._parent.mov_set_buttons.al phaTo(100,0.6,"linear",0.8); } //Set button events mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+i].onRollOver = function() { if (this.pos!=_global.outsider_pos) this.colorTo(0x999999,0.5,"linear"); }
201
mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+i].onRollOut = function() { if (this.pos!=_global.outsider_pos) this.colorTo(0x666666,0.5,"linear") } mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+i].onRelease = function() {//Fade out if (this.pos!=_global.outsider_pos) { mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"l inear"); mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+this.pos].colorTo(_global.color_on,0.5,"linea r"); cont=this.pos; mov_content.mov_videos.mov_video.mov_video_screen.alph aTo(0,0.3,"linear"); mov_content.mov_videos.new_stream.close(); ear"); "); ar"); ar"); ;
mov_content.mov_videos.body_txt.slideTo(890,y,0.2,"lin mov_content.mov_videos.title_txt.alphaTo(0,0.3,"linear mov_content.mov_videos.mov_entries.alphaTo(0,0.3,"line mov_content.mov_videos.mov_dragger.alphaTo(0,0.3,"line mov_content.mov_videos.mov_bar.alphaTo(0,0.3,"linear") mov_content.mov_thumb.alphaTo(0,0.3,"linear");
mov_content.alphaTo(100,0.3,"linear",0,function(){recr eate_right_panel(cont);}); } } } already_loaded=true; } xml_file.load("videos.xml");//Load XML file //xml_file.load("videos.xml"+"?"+new Date().getTime());//Load XML file //Set button events
202
but_next.onRelease = function() { mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"l inear"); cont=_global.outsider_pos; cont++; if (cont==xml_file.firstChild.childNodes.length) cont=0; mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+cont].colorTo(_global.color_on,0.5,"linear"); mov_content.mov_videos.mov_video.mov_video_screen.alph aTo(0,0.3,"linear"); mov_content.mov_videos.new_stream.close(); ear"); "); ar"); ar"); ;
mov_content.mov_videos.body_txt.slideTo(890,y,0.2,"lin mov_content.mov_videos.title_txt.alphaTo(0,0.3,"linear mov_content.mov_videos.mov_entries.alphaTo(0,0.3,"line mov_content.mov_videos.mov_dragger.alphaTo(0,0.3,"line mov_content.mov_videos.mov_bar.alphaTo(0,0.3,"linear") mov_content.mov_thumb.alphaTo(0,0.3,"linear");
mov_content.alphaTo(100,0,"linear",0.4,function(){recr eate_right_panel(cont);}); } but_next.onRollOut = function() { this.mov_line_l.colorTo(_global.color_on,1); } but_next.onRollOver = function() { this.mov_line_l.colorTo(0xFFFFFF,1); } but_prev.onRelease = function() { mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+_global.outsider_pos].colorTo(0x666666,0.5,"l inear"); cont=_global.outsider_pos; cont--; if (cont==-1) cont=xml_file.firstChild.childNodes.length-1
203
mov_content._parent._parent._parent.mov_set_buttons["m ov_set_button"+cont].colorTo(_global.color_on,0.5,"linear"); mov_content.mov_videos.mov_video.mov_video_screen.alph aTo(0,0.3,"linear"); mov_content.mov_videos.new_stream.close(); ear"); "); ar"); ar"); ;
mov_content.mov_videos.body_txt.slideTo(890,y,0.2,"lin mov_content.mov_videos.title_txt.alphaTo(0,0.3,"linear mov_content.mov_videos.mov_entries.alphaTo(0,0.3,"line mov_content.mov_videos.mov_dragger.alphaTo(0,0.3,"line mov_content.mov_videos.mov_bar.alphaTo(0,0.3,"linear") mov_content.mov_thumb.alphaTo(0,0.3,"linear");
mov_content.alphaTo(100,0,"linear",0.4,function(){recr eate_right_panel(cont);}); } but_prev.onRollOut = function() { this.mov_line_r.colorTo(_global.color_on,1); } but_prev.onRollOver = function() { this.mov_line_r.colorTo(0xFFFFFF,1); } //Function to stop some procedures when menu button is pressed receiving = new LocalConnection(); receiving.menuMessage=function() { mov_content._parent._parent._parent.ctrl_txt2.text="re cebi msg"+_global.outsider_pos+_global.insider_pos; align_services(); if (already_tried==true) { trace ("carregar video msg"); mov_content.mov_videos.mov_video.mov_video_screen.alph aTo(0,0.1,"linear"); mov_content.mov_videos.new_stream.close(); if (already_tried==true) mov_content.mov_videos.alphaTo(100,0.1,"linear",0,func tion(){mov_content.mov_videos.load_video(_global.insider_pos ,true);}); else
204
} else
already_tried=true; delete mov_content.mov_entries.onEnterFrame; Mouse.removeListener(mouseListener);
already_tried=true; } receiving.connect("menuConnection"); receiving2 = new LocalConnection(); receiving2.stopMessage=function() { mov_content.mov_videos.new_stream.close(); delete mov_content.videos.mov_entries.onEnterFrame; mov_content.mov_videos.audio.setVolume(0); Mouse.removeListener(mouseListener); } receiving2.connect("stopConnection"); stop();
SourceCode Menu Welcome Script : stop();
Action : #include "mc_tween2.as" if (!_global.color_on) {_global.color_on="0xCC0066"};//Set new color if it doesn't exist already title_txt.colorTo(_global.color_on,0); mov_normal.mov_right.colorTo(_global.color_on,0); mov_fullscr.mov_right.colorTo(_global.color_on,0); //Set close button functions mov_close.onRollOver=function() { this.colorTo(_global.color_on,0.2,"linear"); } mov_close.onRollOut=function() { this.colorTo(0xCCCCCC,0.2,"linear"); } mov_close.onRelease=function() { //this._parent._parent._parent.relative_pos=0; this._parent._parent._parent.change_layout(); } //Set lower menu buttons functions mov_normal.onRollOver=function() { this.mov_right.colorTo(0xCCCCCC,0.2,"linear"); this.txt_field.colorTo(_global.color_on,0.2,"linear"); } mov_normal.onRollOut=function() { this.mov_right.colorTo(_global.color_on,0.2,"linear"); this.txt_field.colorTo(0xCCCCCC,0.2,"linear"); }
205
mov_normal.onRelease=function() { //this._parent._parent._parent.relative_pos=0; this._parent._parent._parent.change_layout(); } mov_fullscr.onRollOver=function() { this.mov_right.colorTo(0xCCCCCC,0.2,"linear"); this.txt_field.colorTo(_global.color_on,0.2,"linear"); } mov_fullscr.onRollOut=function() { this.mov_right.colorTo(_global.color_on,0.2,"linear"); this.txt_field.colorTo(0xCCCCCC,0.2,"linear"); } mov_fullscr.onRelease=function() { //this._parent._parent._parent.relative_pos=0; this._parent._parent._parent.go_full(); this._parent._parent._parent.change_layout(); } mov_fake_back._alpha=0; mov_fake_back.useHandCursor=false; mov_fake_back.onRelease=function() { } //Load information from XML file var xml_file = new XML(); xml_file.ignoreWhite = true; xml_file.onLoad = function() { title_txt.text=xml_file.firstChild.firstChild.attribut es.title; description_txt.htmlText=xml_file.firstChild.firstChil d.childNodes[0].nodeValue; } //+++++++++++++++++++++++++IMPORTANT++++++++++++++++++++++++ +++++++++++ //Load XML file. If you want to use Static text remove or comment the next line xml_file.load("welcome.xml"); //xml_file.load("welcome.xml"+"?"+new Date().getTime());//Load XML file
206
XML XL TEMPLATE
<set title="Jenis Bunga"> - 1 - Jenis Bunga Kering.]]>
- 2 - Jenis Bunga Kering Tinggi Baru @Rp. 250.000,-.]]>
- 3 - Jenis Bunga Kering.]]>
-
207
color='#33CCCC'>4 - Jenis Bunga Kering Tinggi Golden Shower @Rp. 225.000,-.]]> - 5 - Jenis Bunga Kering Tinggi Golden Shower @Rp. 225.000,-.]]>
- 6 - Jenis Bunga Kering.]]>
- 7 - Jenis Bunga Kering Tinggi Ranting Rose @Rp 250.000,-.]]>
- 8 - Jenis Bunga Kering Tinggi Ranting Tulip @Rp 250.000,-.]]>
- 9 - Jenis Bunga Kering Hanjeli @Rp 175.000,-.]]>
- 10 - Jenis Bunga Artificial.]]>
- 11 - Jenis Bunga Kering.]]>
- 12 - Jenis Bunga Artificial.]]>
- 13 - Jenis Bunga Kering.]]>
- 14 - Jenis Bunga Kering Mix.]]>
- 15 - Jenis Bunga Kering Ranting @Rp 150.000,-.]]>
208
th_path="items/portfolio/jenisbunga/th16.jpg">16 - Jenis Bunga Matahari @Rp 275.000,-.]]> - 17 - Jenis Bunga Kering Pakir Baru @Rp 250.000,-.]]>
- 18 - Jenis Bunga Kering Sorgum @Rp 198.000,-.]]>
- 19 - Jenis Bunga Kering.]]>
- 20 - Jenis Bunga Kering.]]>
<set title="Showroom"> - 1 - Showroom.]]>
- 2 - Showroom.]]>
- 3 - Showroom.]]>
- 4 - Showroom.]]>
- 5 - Showroom.]]>
<set title="Bahan Baku"> - 1 - Bahan Baku.]]>
- 2 - Bahan Baku.]]>
209
th_path="items/portfolio/bahanbaku/th3.jpg">3 - Bahan Baku.]]> - 4 - Bahan Baku.]]>
- 5 - Bahan Baku.]]>
- 6 - Bahan Baku.]]>
- 7 - Bahan Baku.]]>
- 8 - Bahan Baku.]]>
- 9 - Bahan Baku.]]>
- 10 - Bahan Baku.]]>
<set title="Tempat Produksi"> - 1 - Tempat Produksi.]]>
- 2 - Tempat Produksi.]]>
- 3 - Tempat Produksi.]]>
- 4 - Tempat Produksi.]]>
- 5 - Tempat Produksi.]]>
- 6 - Tempat Produksi.]]>
210
- 7 - Tempat Produksi.]]>
- 8 - Tempat Produksi.]]>
<set title="Lokasi Outlet"> - 1 - Bandung Trade Center.]]>
- 2 - Giant Hypermarket Bekasi.]]>
- 3 - Kelapa Gading Mal.]]>
- 4 - Ramayana Supermarket Sukabumi.]]>
- 5 - Yogya Department Store Bandung.]]>
- 6 - Yogya Department Store Subang.]]>
- 7 - Yogya Department Store Sukabumi.]]>
- 8 - Yogya Department Store Sumedang.]]>
- 9 - Yogya Department Store Tasikmalaya.]]>
211
SourceCode Menu About Us
- VISI
Memproduksi bunga kering yang berkualitas tinggi, unik dan indah. MISI
Bunga kering dan artificial tidak akan tidak laku selagi masih ada wanita di dunia ini. DIREKTUR
Drs. H. Anwar WAKIL DIREKTUR
Dra. Hj. Husniati STAF ADMINISTRASI
Ratna DIVISI PRODUKSI
Iswanto DIVISI PEMASARAN
Cucu DIVISI PENAGIHAN
Sunarti
]]>
SourceCode Menu Author
<entry title="Biodata" image="items/author/penulis.jpg">Nama Lengkap : Desty Widiati
212
Kurnianingsih
NIM : 206091004033
TTL :
color='#ff00ff'>Jakarta, 17 Desember 1989
Jurusan : Teknik
Informatika
Universitas : UIN Syarif Hidayatullah Jakarta
Alamat : Condet Kramat Jati, Jakarta Timur
Telepon :
color='#ff00ff'>085714712900
E-mail : [email protected] ]]>
SourceCode Menu Contact
-
SourceCode Menu Intro
SourceCode Menu Welcome
-
213
SourceCode Menu Product Bunga Kering
- <set title="Bunga Kering Ranting" client="Merah, Coklat, Putih, Silver" date="Rp. 150.000,-" url="BK001" description="Bunga kering tinggi Ranting ini terbuat dari bongkaran akar pohon yang dikupas. Kemudian dibentuk sesuai keinginan. Sehingga menjadi rangkaian ranting yang cantik."> <entry image="items/product/bk001/bk001a.jpg" /> <entry image="items/product/bk001/bk001b.jpg" /> <set title="Tinggi Bintang" client="Oranye, Coklat, Merah" date="Rp. 200.000,-" url="BK002" description="Bunga kering tinggi bintang terbuat dari bahan kulit jagung yang dikeringkan. Dan dicetak untuk di bentuk menjadi kelopak bunga yang menyerupai bentuk bintang."> <entry image="items/product/bk002/bk002a.jpg" /> <entry image="items/product/bk002/bk002b.jpg" /> <set title="Golden Shower" client="Ungu, Putih, Pink" date="Rp. 225.000,-" url="BK003" description="Bunga kering tinggi golden shower ini daun dan bunganya berbahan dasar polipon (gabus) dan ranting pohon yang di bentuk dengan cetakan yang menhasilkan bentuk yang diinginkan."> <entry image="items/product/bk003/bk003a.jpg" /> <entry image="items/product/bk003/bk003b.jpg" /> <set title="Pakir Baru" client="Merah, Hijau Muda" date="Rp. 250.000,-" url="BK004" description="Bunga Kering pakir baru terdiri dari bahan baku : Kulit jagung dikeringkan dan batang ranting dari akar pohon yang diberi warna abu-abu."> <entry image="items/product/bk004/bk004a.jpg" /> <entry image="items/product/bk004/bk004b.jpg" /> <set title="Matahari" client="Kuning" date="Rp. 275.000,-" url="BK005" description="Bunga kering matahari ini terbuat dari kulit jagung yang dikeringkan dan di bentuk seperti bunga matahari sungguhan."> <entry image="items/product/bk005/bk005a.jpg" /> <set title="Sorgum" client="Kuning" date="Rp. 198.000,-" url="BK006" description="Bunga kering sorgum ini juga berbahan dasar kulit jagung yang dikeringkan dan kemudian di cetak seperti daun-daun kecil. Batangnya dari ranting yang dibentuk lurus."> <entry image="items/product/bk006/bk006a.jpg" /> <set title="Hanjeli" client="Kuning, Pink, Merah, Oranye" date="Rp. 198.000,-" url="BK007" description="Bunga kering hanjeli, rumputnya terbuat dari bahan dasar kulit jagung yang di keringkan. Daun atau bunganya berbahan dasar daun nangka yang juga di keringkan dan diberi bahan kimia pewarna tekstil. Pilihan warna rumput : Coklat, Hijau. "> <entry image="items/product/bk007/bk007a.jpg" />
214
<entry image="items/product/bk007/bk007b.jpg" />
SourceCode Menu Video
<set title="Ranting"> <entry title="Ranting"
image="items/videos/1_ranting.jpg" path="items/videos/1_ranting.flv">
Warna:
Merah, Coklat, Putih, Silver
Harga: Rp. 150.000,-
size="20" color="#ff00ff">Kode: BK001
Deskripsi: Bunga kering tinggi Ranting ini terbuat dari bongkaran akar pohon yang dikupas. Kemudian dibentuk
sesuai keinginan. Sehingga
menjadi rangkaian ranting yang cantik.]]>
<set title="Tinggi Bintang"> <entry title="Tinggi Bintang"
image="items/videos/2_tinggibintang.jpg" path="items/videos/2_tinggibintang.flv">
Warna:
Oranye, Coklat, Merah
Harga: Rp. 200.000,-
size="20" color="#ff00ff">Kode: BK002
Deskripsi: Bunga kering tinggi bintang terbuat dari bahan kulit jagung yang
dikeringkan. Dan dicetak untuk di bentuk menjadi kelopak bunga yang menyerupai bentuk bintang.]]>
<set title="Tinggi Golden Shower">
<entry title="Golden Shower"
image="items/videos/3_goldenshower.jpg" path="items/videos/3_goldenshower.flv">
Warna:
Ungu, Putih, Pink
215
color="#ff00ff">Harga: Rp. 225.000,-
Kode: BK003
size="20" color="#ff00ff">Deskripsi: Bunga kering tinggi golden shower ini daun dan bunganya berbahan dasar polipon (gabus) dan ranting pohon yang di bentuk dengan
cetakan yang menhasilkan bentuk yang diinginkan.]]>
<set title="Pakir Baru"> <entry title="Pakir Baru"
image="items/videos/4_pakirbaru.jpg"
path="items/videos/4_pakirbaru.flv"> Warna:
Merah, Hijau Muda
color="#ff00ff">Harga: Rp. 250.000,-
size="20" color="#ff00ff">Kode: BK004
Deskripsi: Bunga Kering pakir baru terdiri dari bahan baku : Kulit jagung
dikeringkan dan batang ranting dari akar pohon yang diberi warna abu-abu.]]>
<set title="Matahari"> <entry title="Matahari"
image="items/videos/5_matahari.jpg"
path="items/videos/5_matahari.flv">
Warna:
Kuning
Harga: Rp. 275.000,-
color="#ff00ff">Kode: BK005
Deskripsi: Bunga kering matahari ini terbuat dari kulit jagung yang dikeringkan dan di bentuk seperti bunga matahari sungguhan.]]>
<set title="Sorgum"> <entry title="Sorgum"
image="items/videos/6_sorgum.jpg"
path="items/videos/6_sorgum.flv"> Warna:
Kuning
Harga:
216
Rp. 198.000,-
Kode: BK006
color="#ff00ff">Deskripsi: Bunga kering sorgum ini juga berbahan dasar kulit jagung yang dikeringkan dan
kemudian di cetak seperti daun-daun kecil. Batangnya dari ranting yang dibentuk lurus.]]>
<set title="Hanjeli"> <entry title="Hanjeli"
image="items/videos/7_hanjeli.jpg"
path="items/videos/7_hanjeli.flv"> Warna
Bunga: Kuning, Pink, Merah, Oranye
Warna Rumput: Coklat, Hijau.
Harga: Rp. 175.000,
Kode: BK007
Deskripsi: Bunga kering hanjeli, rumputnya terbuat dari bahan dasar kulit jagung yang di keringkan. Daun atau bunganya
berbahan dasar daun nangka yang juga di keringkan dan diberi bahan kimia pewarna tekstil.]]>
217
