Bab 8 Multimedia dan Animasi

Bab 8 Multimedia dan Animasi

Webmaster Pro Front Page XP

Daftar Isi Bab 8 1

Video...............................................................................................................249

1.1 1.2 1.3

Memasang Video ........................................................................................... 249 Video plug-in................................................................................................. 253 Mengedit video plug-in .................................................................................. 256

2

Menggunakan suara latar belakang ............................................................257

3

Animasi teks...................................................................................................260

1.1 1.2

Animasi otomatis........................................................................................... 260 Animasi interaktif .......................................................................................... 264

4

Animasi gambar GIF....................................................................................266

5

Animasi halaman ..........................................................................................269

6

Animasi Marquee (Web Component) .........................................................272

6.1 6.2

7

Pembuatan marquee...................................................................................... 272 Mengedit marquee ......................................................................................... 275

Banner Ad Manager .....................................................................................275

7.1 7.2

8

Membuat Banner Ad Manager........................................................................ 275 Mengedit Banner Ad Manager........................................................................ 278

Hover Button.................................................................................................278

8.1 8.2

248

Membuat Hover Button.................................................................................. 278 Mengedit Hover Button.................................................................................. 281


Selain teks dan gambar-gambar yang menarik, masih ada beberapa fasilitas untuk mempercantik halaman. Antara lain video, suara latar belakang ataupun animasi. Untuk menghasilkan animasi, FrontPage XP menyediakan sarana animasi yang dibangun dengan teknik DHTML (Dynamic HyperText Markup Language).

1 Video Video memang memiliki daya tarik yang besar pada halaman web, namun sayangnya video juga menyebabkan ukuran halaman web menggelembung. Selain itu juga membutuhkan waktu yang lama untuk ditransfer ke browser. Sebagai perbandingan, perlu waktu 7 hingga 10 detik untuk video berukuran 0,5 MByte saja (bandingkan dengan kapasitas disket, 1,38 Mbyte). Jika Anda harus memasang video di dalam situs, Anda seharusnya memberikan pilihan kepada pemakai untuk memilih apakah mereka akan menampilkan video atau tidak.

1.1

Memasang Video Adapun langkah memasang video ke halaman adalah: 1. Pilihlah perintah Insert _ Picture _ Video. Kotak dialog Video tampil.

Gambar 8.1 Kotak dialog Video 2. Pada pilihan Files of type tentukan ekstensi file video, misalnya *.avi.

249


3. Anda bisa menggunakan Look in, atau icon-icon di sisi kiri untuk mencari file Anda, misalnya basket.avi. File tersebut disertakan pada CD buku ini, yaitu di folder Web8. 4. Setelah mendapatkan file video pilihan, klik Open, sebuah kotak tempat memutar video akan muncul pada lokasi halaman yang Anda pilih.

Gambar 8.2 Kotak tempat memutar video Setelah Anda menyisipkan video, Anda tidak akan melihatnya pada FrontPage, hanya sebuah kotak. Anda baru bisa melihat video di browser atau di tampilan preview. Selanjutnya Anda dapat mengubah ukuran kotak ini tersebut, memperbesar misalnya. Untuk mengatur properti video, klik kanan kotak tersebut dan pilih Picture Properties. Kotak seperti ditunjukkan dalam Gambar 8.3 akan muncul.

250


Gambar 8.3 Bidang Video dalam kotak dialog Image Properties Berikut ini adalah hal yang dapat Anda atur di dalam kotak dialog Picture Properties tab Video: •

Video Source, Anda dapat mengganti file .avi yang telah Anda pilih dari kotak ini. Gunakan Browse untuk mencari file video pengganti.

•

Show Controls in Browser. Klik kotak cek ini untuk menambahkan sebuah tombol stop dan sebuah slider pada kotak video di dalam browser. Gunanya untuk mengontrol video.

•

Loop. Untuk memberitahu Browser berapa kali harus memainkan video. Secara default video akan dimainkan satu kali.

•

Forever. Beri tanda cek (dengan cara klik) di sini untuk membuat video dimainkan secara berulang-ulang.

•

Loop Delay. Jika akan memainkan file ini lebih dari sekali, Anda dapat berhenti sebelum memulainya kembali. Masukkan angka di sini; 1000 berarti 1 detik.

•

On File Open. Beri cek di sini jika Anda ingin video-nya dimainkan begitu halaman dipanggil. Sebenarnya videonya akan dimainkan secara otomatis

251


jika Anda tidak memberi tanda cek di sini, kecuali Anda memberi tanda cek pada kotak berikutnya. •

On Mouse Over. Cek di sini jika Anda ingin video dimainkan hanya bila pointer mouse berada di atas kotak video.

Selain dengan perintah Insert _ Picture _ Video, Anda juga bisa memasang video ke halaman secara langsung, yaitu dengan drag file video (misalnya basket.avi) ke lokasi halaman yang Anda inginkan. File basket.avi disertakan pada CD buku ini, yaitu di folder Web8. Kemudian untuk mengedit propertinya, klik kanan video yang telah terpasang pada halaman lalu klik perintah Picture properties, kotak dialog Picture Properties tab Video akan terbuka.

Gambar 8.4 Video dimainkan di browser Selanjutnya Anda bisa mencobanya di browswer dengan klik tombol Preview in Browser. Contohnya seperti Gambar 8.4.

252


1.2

Video plug-in Selain dengan teknik di atas, FrontPage XP juga menyediakan cara lain pemasangan video, yaitu dengan plug-in pada web component.. Cara pemasangan Video plug-in adalah: 1. Tentukan lokasi pemasangan video pada halaman. 2. Aktifkan Insert _ Web Component. Muncul kotak dialog Insert Web Component.

Gambar 8.5 Kotak dialog Insert Web Component 3. Pada bidang kiri, klik Advanced Controls . Pada bidang kanan, klik ganda Plugin. Muncul kotak dialog Plug-in Properties.

253


Gambar 8.6 Kotak dialog Hover Button Properties 4. Pada kotak isian Data Source isikan nama file video. Misalnya Sate.avi. Kalau Anda lupa nama dan tempatnya, gunakan tombol Browse… untuk mencarinya.

Gambar 8.7 Pencarian file plug-in 5. Setelah menemukan file tersebut, klik Open. Kembali ke kotak dialog Plug-in Properties.File tersebut disertakan pada CD buku ini, yaitu di folder Web8.

254


6. Pada kotak isian Message for browsers without plug-in support, tuliskan pesan untuk browser yang tidak bisa membuka video ini, misalnya “Browser Anda tidak bisa membuka file video Sate.avi”. 7. Pada kotak isian Border thickness, Anda bisa menuliskan ukuran garis keliling bidang layar video. 8. Kalau Anda ingin mengubah ukuran lebar dan tinggi bidang layar video, tuliskan pada kotak isian Width dan Height. 9. Pada kotak pilihan Alignment, tentukan jenis perataan penempatan bidang layar video. 10. Pada kotak isian Horizontal spacing dan Vertical spacing, Anda bisa menuliskan jarak atau spasi bidang layar video. 11. Klik OK. Contoh hasilnya seperti Gambar 8.8.

Gambar 8.8 Pemasangan plug-in video. Selanjutnya Anda bisa mencobanya pada browser. Contoh hasilnya seperti Gambar 8.9 berikut ini:

255


Gambar 8.9 Tampilan tombol berubah ketika pointer mouse tepat di atasnya Anda bisa menggunakan tombol-tombol yang telah disediakan untuk memainkan video tersebut, seperti tombol Play, Pause, Stop dan seterusnya.

1.3

Mengedit video plug-in Untuk mengubah ukuran tombol, Anda bisa langsung mengubahnya pada halaman, yaitu klik tombol lalu drag handle. Sedangkan untuk pengeditan properti lainnya, Anda harus menggunakan kotak dialog, dengan cara: 1. Pada halaman, klik kanan tombol. 2. Klik perintah Plug-in Properties, muncul kotak dialog Plug-in Properties. 3. Selanjutnya Anda bisa mengubah properti sesuai keperluan. 4. Klik OK.

256


2 Menggunakan suara latar belakang Apakah Anda ingin menyisipkan suara latar ke halaman? Misalnya sebuah musik yang lembut. Beginilah caranya: 1. Aktifkan perintah File _ Properties. Muncul kotak dialog Page Properties. 2. Pada kotak dialog tersebut klik tab General (Gambar 8.10).

Gambar 8.10 Kotak dialog Page Properties tab General 3. Lalu pada bagian Background sound, tuliskan nama file suara pada kotak isian Location. Kalau lupa nama file, Anda bisa mencari file suara dengan klik Browse. Muncul kotak dialog Background Sound untuk mencari file suara.

257


Gambar 8.11 Kotak dialog Background Sound 4. Perhatikan kotak dialog Background Sound, pada kotak pilihan Files of type , Anda bisa menggunakan suara dalam berbagai format file, seperti .wav, .mid, .aif, .aiff, .aifc, .au, .snd dan lain lain. Misalnya file Musica Windows Start.wav, yang disimpan di dalam folder C:\Windows \Media. Lihat Gambar 8.12 berikut ini.

Gambar 8.12 Pilihan file dan folder 5. Kalau di komputer Anda tidak terdapat file maupun folder tersebut, Anda bisa menggunakan file suara yang ada, silahkan mencari sendiri. Untuk memudahkan pencarian, sebelum menggunakan kotak dialog Background Sound, pakailah kotak dialog Find (Start _Find) dan tuliskan *.wav atau *.mid atau yang lainnya. Setelah mendapatkan informasi file suara dan folder penyimpannya,

258


kembalilah ke kotak dialog Background Sound untuk membuka folder tersebut dan memilih file suara tersebut. 6. Kemudian klik Open, kembali ke kotak dialog Page Properties. 7. Untuk memodifikasi unjuk kerja file suara, misalnya berapa kali suara tersebut dimainkan, pada kotak Loop isikan berapa kali perulangan akan dilakukan. Kalau Anda ingin agar diputar terus selama halaman dibuka di browser, klik kotak cek Forever. 8. Setelah selesai, klik OK. Karena kita menambahkan suara ke halaman, berarti FrontPage akan menyisipkan tag ke bagian header dari halaman tersebut. Untuk memeriksa hal ini, klik tab HTML.Lihat Gambar 8.13.

Gambar 8.13 Penambahan teks HTML Sayangnya, tidak semua browser mampu memainkan suara-suara latar ini. Kalau bisa memainkan, komputer pemakai belum tentu memiliki perangkat suara seperti kartu suara (sound card) atau speaker. Padahal kita sudah mengorbankan waktu pembukaan halaman, tentunya Anda masih ingat bahwa penempelan file ke halaman akan memperlambat pembukaan halaman. Nah, jadi pertimbangkan masak-masak untuk memasang file suara ke halaman Anda, daripada sia -sia, lebih baik tidak menempel file suara. Namun di luar masalah itu, setelah Anda mempelajari teknik penempelan suara ke halaman, bukan tidak ada gunanya, bukan sia -sia, setidaknya Anda menjadi lebih pintar dari sebelumnya. Baiklah, simpan halaman dengan suara latar tersebut, muncul kotak dialog penyimpanan file suara (Save Embedded Files), seperti Gambar 8.14.

259


Gambar 8.14 Kotak dialog Save Embedded Files Klik OK. Anda bisa memeriksa hasilnya dengan klik tab Preview. Kalau Anda sempat mencoba membukanya melalui server, akan Anda rasakan tambahan waktu pembukaan halaman tersebut (lebih lama bila dibandingkan pembukaan halaman tersebut tanpa tempelan suara)

3 Animasi teks Berdasarkan cara pemakaiannya, kita bisa membedakan dua jenis animasi, yaitu animasi teks otomatis dan animasi teks interaktif. Yang dimaksud interaktif adalah, animasi akan dijalankan apabila ada interaksi dari pemakai. Misalnya animasi akan dijalankan pada suatu teks apabila seseorang melakukan klik pada teks tersebut.

1.1 Animasi otomatis Animasi otomatis adalah suatu animasi yang akan dijalankan tanpa menunggu tindakan dari pemakai, namun berdasarkan kondisi tertentu, misalnya sesaat setelah halaman dibuka. Berikut ini contoh animasi otomatis. Delapan tampilan berurutan yang muncul sesaat setelah halaman ditampilkan.

Gambar 8. 15 Langkah pertama

260


Gambar 8. 16 Langkah kedua

Gambar 8. 17 Langkah ketiga

Gambar 8. 18 Langkah keempat

Gambar 8. 19 Langkah kelima

Gambar 8. 20 Langkah keenam

261


Gambar 8. 21 Langkah ketujuh

Gambar 8. 22 Langkah kedelapan

Berikut ini uraian tentang pembuatan animasi otomatis. 1. Buatlah halaman dengan teks yang akan dipasang animasi. Misalnya seperti berikut ini:

Gambar 8.23 Teks yang akan dipasang animasi 2. Kemudian sorotlah teks tersebut. 3. Aktifkan perintah View _Toolbars _ DHTML Effects. Akan tampil toolbar DHTML Effects.

Gambar 8.24 Toolbar DHTML Effects

262


Perhatikan bahwa animasi yang disediakan oleh FrontPage XP ini merupakan Dynamic HTML (DHTML) dan dihasilkan oleh script Java (JScript, yaitu JavaScript versi Microsoft) Di akhir langkah-langkah ini akan Anda lihat seperti apa script Java. 4. Pada toolbar DHTML Effects, di kotak pilihan On, pilihlah sebuah event, misalnya Page load. Artinya animasi akan dijalankan sesaat setelah halaman (Page ) di buka (di-load). 5. Pada kotak pilihan Apply, pilihlah jenis animasi yang akan dijalankan. Misalnya Spiral. Teks akan digerakkan berpilin seperti bentuk spiral. 6. Simpanlah halaman. Untuk mengujinya, klik tab Preview. Kalau animasi yang dihasilkan terlalu cepat sehingga Anda tidak bisa mengikutinya, tampilkan pada browser. Nah, menarik bukan? Kemudian, seperti apa script Java yang menghasilkan animasi tersebut? Berikut ini cara melihatnya: 1. Tampilkan Folder List jika belum tampil. Perhatikan pada daftar folder dan file tersebut kini ada sebuah file bernama Animate.js .

Gambar 8.25 File animate.js 2. Klik ganda file tersebut, Notepad akan membuka isinya, berupa script pemrograman dalam bahasa Java, seperti Gambar 8.26.

263


Gambar 8.26 Script Java

1.2 Animasi interaktif Tidak seperti animasi otomatis, animasi interaktif akan mengadakan reaksi atas tindakan yang dilakukan oleh pemakai. Tindakan tersebut sering disebut event, contohnya klik, klik ganda, mouse over dan sebagainya. Event bisa dipsangkan ke objek yang akan menjalankan efek animasi, misalnya suatu teks. Apabila teks tersebut di-klik oleh pemakai maka format teks tersebut akan berubah, misalnya berubah warna, ukuran, maupun jenis font. Berikut ini contoh tampilan pertama teks:

Gambar 8.27 Sebelum event (klik) Setelah teks di–klik maka formatnya berubah seperti tampilan kedua berikut ini:

264


Gambar 8.28 Setelah event Proses tersebut bersifat bolak balik (toggle), klik pertama akan menghasilkan tampilan kedua, klik sekali lagi akan kembali ke tampilan pertama dan seterusnya. Cara membuatnya hampir sama dengan pembuatan animasi otomatis, antara lain: 1. Pilihlah teks. 2. Pada toolbar DHTML Effectsm, di kotak pilihan On, pilihlah event yang bukan Page Load, seperti Mouse Over, Click atau Double Click. •

Click adalah klik teks tersebut

•

Double Click berarti klik ganda teks

•

Mouse Over adalah pada saat pointer mouse di atas teks. Misalnya Anda pilih Click.

3. Kemudian pada kotak pilihan Apply, tentukan pilihan Anda. Untuk event Click, ternyata hanya ada dau pilihan, yaitu Fly out atau Formatting. 4. Fly out berarti teks akan diterbangkan ke luar halaman dan menghilang. Sedangkan Formatting berarti teks akan diubah formatnya. Misalnya Anda memilih Formatting. 5. Kemudian pada kotak pilihan di sebelah kotak pilihan Apply, tentukan pilihan detilnya. Tersedia Choose Border… dan Choose Font…. Masing-masing untuk mengatur kotak pembatas teks dan untuk mengatur format font. Misalnya kita pilih yang kedua. Muncul kotak dialog Font.

265


Gambar 8.29 Kotak dialog Font 6. Selanjutnya gunakan kotak dialog Font tersebut untuk mengatur format font sebagai reaksi atas event klik dari pemakai. 7. Setelah selesai, klik OK. Anda bisa mencoba hasilnya dengan klik tab Preview, lalu klik teks tersebut, format baru bagi font tersebut akan diterapkan. Kalau Anda klik sekali lagi teks tersebut, maka akan kembali ke format semula. Jika Anda klik lagi, format baru akan ditampilkan ulang, demikian seterusnya.

4 Animasi gambar GIF Selain kedua jenis animasi tersebut, Anda bisa menggunakan animasi gambar GIF. Animasi ini dihasilkan oleh sekumpulan gambar dengan format .gif. File animasi ini memiliki ekstensi yang sama dengan file gambar gif biasa. Bagimana membedakan keduanya? Clip Organizer akan memberi tanda kuning di pojok kanan bawah bagi file -file animasi ini. Kalau gambar sudah terpasang di halaman? Anda bisa mengaktifkan tab Preview untuk mengujinya. Tampilan preview akan menjalankan animasi. Bailah, mari kita memasang file animasi GIF ini dengan langkah sebagai berikut:

266


1. Buatlah halaman baru. Lalu bukalah Clip Organizer, yaitu aktifkan Insert _ Picture _ Clip Art. Muncul Task Pane topik Insert Clip Art.

Gambar 8.30 Icon Clip Organizer 2. Klik icon Clip Organizer, lihat Gambar di atas. 3. Setelah Clip Organizer tampil, bukalah folder Office Collections _ Animals . 4. Kemudian carilah gambar yang mengandung tanda animasi, yaitu tanda berwarna kuning terletak di pojok kanan bawah, lihat Gambar 8.31.

Gambar 8.32 Tanda animasi file .GIF

267


5. Sorotlah salah satu gambar animasi yang Anda inginkan, misalnya gambar itik. 6. Klik gambar tersebut lalu klik perintah Copy. 7. Kembali ke halaman FrontPage, klik kanan lokasi penyisipan gambar lalu klik perintah Paste. Gambar muncul di lokasi tersebut.

Gambar 8.33 Gambar muncul pada halaman 8. Simpanlah halaman yangmengandung gambar tersebut, pada kotak dialog penyimpanan gambar, klik OK.

Gambar 8.34 Kotak dialog penyimpanan gambar 9. Tampilkan halaman tersebut pada browser, hasilnya halaman animasi itik dan anak-anaknya yang lucu.

268


Gambar 8.35 Urut-urutan animasi GIF Anda bisa memilih gambar lain dengan cara yang sama seperti uraian di atas.

5 Animasi halaman Masih tentang animasi, FrontPage XP menyediakan animasi untuk pergantian halaman, atau lazim disebut transisi. Animasi ini dipasangkan di antara dua halaman yang dikaitkan dengan hyperlink. Langkah pemekaiannya adalah: 1. Tentukan sebuah halaman sebagai halaman awal, misalnya seperti Gambar 8.37. 2. Tentukan sebuah halaman sebagai halaman tujuan, misalnya seperti Gambar 8.38. Kita sebut saja sebagai halaman kelinci. 3. Pada halaman awal buatlah teks hyperlink ke halaman kelinci. Misalnya “Buka halaman kelinci”. 4. Aktifkan Format _Page Transition. Muncul kotak dialog

269


Gambar 8.36 Pilihan Vertical Blind 5. Pada kotak pilihan Event, pilihlah kejadian yang akan memulai transisi halaman, misalnya Page Exit, artinya efek animasi akan dijalankan pada saat halaman ini ditutup. 6. Dan pada kotak pilihan Transition effect, pilihlah salah satu efek transisi, misalnya Vertical blinds . Lalu OK. 7. Sekarang cobalah tampilkan halaman awal di browser (klik tombol Preview in browser). Hasdilnya seperti Gambar 8.37.

Gambar 8.37 Halaman awal

270


8. Klik hyperlink “Buka halaman kelinci”, browser akan menjalankan animasi transisi dalam proses membuka halaman tujuan link, seperti Gambar 8.38.

Gambar 8.38 Animasi pergantian halaman Setelah beberapa waktu selesailah animasi transisi dan terbukalah halaman tujuan, seperti Gambar 8.39.

Gambar 8.39 Halaman tujuan

271


6 Animasi Marquee (Web Component) Internet Explorer mendukung fasilitas yang dinamakan Marquee, yaitu banner berisi teks bergerak. Marquee juga bisa berisi sebuah link, namun jika Anda tidak ingin terhubung ke manapun, Anda tinggal menghilangkan beberapa langkah awal contoh di bawah ini.

6.1

Pembuatan marquee Cara selengkapnya pembuatan marquee adalah: 1. Pada tampilan Page, klik lokasi pemasangan marquee, atau pilihlah teks yang akan ditampilkan sebagai marquee. 2. Aktifkan Insert _ Web Component. Muncul kotak dialog Insert Web Component.

Gambar 8.40 Kotak dialog Insert Web Component 3. Pada bidang kiri, klik Dynamic Effects . Pada bidang kanan, klik ganda Marquee. Muncul kotak dialog Marquee Properties.

272


Gambar 8.41 Kotak dialog Marquee 4. Pada kotak isian Text, tuliskan teks yang akan dijadikan marquee, misalnya “Cinta uang adalah akar segala kejahatan”. 5. Pada kelompok Direction, tentukan arah pergerakan, yaitu Left dari kanan ke kiri, sedangkan Right dari kiri ke kanan. 6. Tentukan kecepatan pergerakan pada kelompok Speed. •

Delay adalah angka lamanya pengunduran (dalam satuan milidetik). Masing-masing huruf pada marquee memang senantiasa berlompatan.

•

Amount adalah jumlah pixel yang loncat setiap kalinya. Makin kecil kedua angka tersebut maka scrolling-nya akan lebih halus. Delay kecil dikombinasi dengan Amount besar akan menghasilkan scroll lebih cepat.

7. Kemudian tentukan sifat marquee pada kelompok Behavior. •

Pilihlah Scroll untuk membuat teks bergerak ke ujung marquee yang satu dan menghilang di ujung satunya.

•

Pilih Slide untuk membuat teks bergerak ke ujung yang satu dan akan berhenti pada saat teks itu tiba di ujung yang lain.

•

Dan pilihlah Alternate untuk membuat teks bergerak ke sana ke mari di sepanjang marquee.

8. Tentukan ukuran marquee pada kotak Size . Anda bisa mengatur lebarnya dalam persentase tertentu sehingga marquee tersebut tetap berukuran proporsional terhadap window browser. 9. Secara default marquee diatur untuk menggulung terus menerus. Tetapi Anda mungkin ingin agar berjalan beberapa saat lalu berhenti. Untuk itu nonaktifkan

273


kotak cek Continuously dan ketikkan sebuah angka dalam kotak Times. Perha tikan, jika Anda menggunakan pengaturan Slide , marquee ini akan bergerak sekali, meskipun kotak cek Continuously dalam keadaan terpilih. 10. Kalau Anda ingin memasang warna latar belakang, gunakan Background Color. Jika browser tidak dapat menampilkan marquee, maka warna latar juga akan hilang. 11. Klik OK. Kemudian Anda bisa mencobanya dengan klik tab Preview. Berikut ini contoh uruturutan tiga tampilan marquee yang bergerak dari kanan ke kiri, Gambar 8.42 sampai dengan Gambar 8.44.

Gambar 8.42 Tampilan pertama

Gambar 8.43 Tampilan urutan berikutnya

Gambar 8.44 Tampilan urutan beriutnya

274


Setelah mencobanya, kembali ke tab Normal, Anda bisa mengatur format teks sesuai selera Anda. Untuk mengedit marquee, pada halaman klik kanan marquee lalu klik perintah Marquee properties. Kotak dialog akan tampil dan bisa Anda gunakan untuk mengedit marquee.

6.2

Mengedit marquee Untuk mengubah ukuran tombol, Anda bisa langsung mengubahnya pada halaman, yaitu klik marquee la lu drag handle. Sedangkan untuk pengeditan properti lainnya, Anda harus menggunakan kotak dialog, dengan cara: 1. Pada halaman, klik kanan marquee. 2. Klik perintah Marquee Properties, muncul kotak dialog Marquee Properties. 3. Selanjutnya Anda bisa mengubah properti sesuai keperluan. 4. Klik OK.

7 Banner Ad Manager Banner adalah teks melintang dari kiri ke kanan halaman. Pada banner kita bisa mengatur agar teks yang terpasang bisa bergerak sehingga lebih menarik perhatian. Hal ini suadh kita bahas sebelumnya, yaitu marquee. Selanjutnya kita akan membahas pemakaian banner lainnya, yaitu Banner Ad Manager. Perbedaan banner ini dibandingkan marquee adalah mampu menampilkan beberapa gambar secara bergantian dan bisa membuka halaman lain karena mempunyai link.

7.1

Membuat Banner Ad Manager Sarana pembuatnya juga sama dengan pembuat marquee, yaitu Web Component. Cara pembuatannya adalah: 1. Tentukan halaman yang akan digunakan sebagai tujuan link, kalau perlu buatlah sebuah halaman baru. Misalnya halaman Kelinci.htm. 2. Aktifkan Insert _ Web Component. Muncul kotak dialog Insert Web Component.

275


Gambar 8.45 Kotak dialog Insert Web Component 3. Pada bidang kiri, klik Dynamic Effects . Pada bidang kanan, klik ganda Banner Ad Manager. Muncul kotak dialog Banner Ad Manager Properties.

Gambar 8.46 Kotak dialog Banner Ad Manager Properties 4. Pada kotak isian Width dan Height isikan ukuran lebar dan tinggi banner. 5. Pada kotak pilihan Transition Effect, tentukan jenis animasi transisi penampilan gambar.

276

•

None , transisi tanpa efek.

•

Blinds Horizontal, efek berupa beberapa palang horisontal yang memutar untuk mengganti gambar.


•

Blinds Vertical, efek berupa beberapa palang vertikal yang memutar untuk mengganti gambar.

•

Dissolve , efek memudarnya gambar sampai berganti gambar.

•

Box in, efek munculnya kotak dengan gambar lama yang mengecil ke arah tengah gambar lalu menghilang sehingga gambar baru yang bertugas sebagai latar belakang bisa tampak penuh.

•

Box out, efek munculnya kotak dengan gambar baru dari tengah gambar yang membesar sehingga menutup seluruh gambar lama.

6. Tentukan lama munculnya gambar pada kotak isian Show each picture for (seconds):. 7. Pada kotak Link to, tuliskan adress halaman tujuan link. Anda bisa menggunakan tombol Browse untuk mencarinya. 8. Masukkan gambar-gambar yang akan ditampilkan ke banner. Gunakan tombol Add… untuk memcari gambar-gambar tersebut. 9. Klik OK. Anda bisa mencobanya pada browser, perhatikan bahwa banner akan menampilkan gambar-gambar secara bergantian sesuai urutan yang Anda pasangkan pada kotak Pictures to Display di kotak dialog Banner Ad Manager. Kalau Anda klik banner tersebut maka halaman tujuan link akan ditampilkan.

Gambar 8.47 Tampilan Banner Ad Manager di browser

277


7.2

Mengedit Banner Ad Manager Untuk mengubah ukuran banner, Anda bisa langsung mengubahnya pada halaman, yaitu klik banner lalu drag handle. Sedangkan untuk pengeditan properti lainnya, Anda harus menggunakan kotak dialog, dengan cara: 1. Pada halaman, klik kanan banner. 2. Klik perintah Banner Ad Manager Properties, muncul kotak dialog Banner Ad Manager Properties, 3. Anda bisa mengubah pilihan jenis transisi, mengedit lama tampilan atau mengubah tujuan link. 4. Anda bisa mengatur urutan gambar dengan tombol Move Up dan Move Down. 5. Untuk menghapus gambar klik Remove. 6. Klik OK.

8 Hover Button Satu lagi animasi yang bisa kita manfaatkan dari FrontPage XP, yaitu animasi pada tombol yang disebut Hover Button. Tombol jenis ini memiliki perilaku khusus, yaitu akan mengubah tampilan tombol sebagai reaksi atas keadaan tertentu. Misalnya warna tombol akan berubah jika pointer mouse berada tepat di atasnya.

8.1

Membuat Hover Button Cara pembuatan Hover Button adalah: 1. Tentukan halaman tujuan link. Misalnya halaman Itik.htm. 2. Aktifkan Insert _ Web Component. Muncul kotak dialog Insert Web Component.

278


Gambar 8.48 Kotak dialog Insert Web Component 3. Pada bidang kiri, klik Dynamic Effects. Pada bidang kanan, klik ganda Hover Button. Muncul kotak dialog Hover Button Properties.

Gambar 8.49 Kotak dialog Hover Button Properties 4. Pada kotak isian Button Text isikan judul tombol. Misalnya “Animasi itik”. 5. Pada kotak Link to, tuliskan adress halaman tujuan link, dalam contoh ini Itik.htm. Anda bisa menggunakan tombol Browse untuk mencarinya. 6. Pada kotak pilihan Button color, tentukan warna tombol.

279


7. Pada kotak pilihan Background color, tentukan warna latar. 8. Pada kotak pilihan Effec t, tentukan jenis efek, misalnya Glow. 9. Pada kotak pilihan Effect color, tentukan warna efek. 10. Pada kotak isian Width dan Height isikan ukuran lebar dan tinggi tombol. 11. Klik OK. Anda bisa mencobanya pada browser, hasilnya akan tampak seperti Gmbar 8.50.

Gambar 8.50 Tampilan awal Sekarang, cobalah gerakkan pointer mouse ke tombol tersebut, maka tampilannya akan berubah seperti Gambar 8.51.

280


Gambar 8.51 Tampilan tombol berubah ketika pointer mouse tepat di atasnya Kalau Anda klik tombol tersebut maka halaman tujuan link akan ditampilkan.

8.2

Mengedit Hover Button Untuk mengubah ukuran tombol, Anda bisa langsung mengubahnya pada halaman, yaitu klik tombol lalu drag handle. Sedangkan untuk pengeditan properti lainnya, Anda harus menggunakan kotak dialog, dengan cara: 1. Pada halaman, klik kanan tombol. 2. Klik perintah Hover Button Properties, muncul kotak dialog Hover Button Properties.

281


Gambar 8.49 Kotak dialog Hover Button Properties 3. Selanjutnya Anda bisa mengubah properti sesuai keperluan. 4. Klik OK.

282

Bab 8 Multimedia dan Animasi

Recommend Documents