Spesifikasi: Ukuran: 14x21 cm Tebal: 113 hlm Harga: Rp 28.800 Terbit pertama: Mei 2005 Sinopsis singkat: Saat ini banyak perusahaan yang menginginkan untuk menampilkan profil perusahaannya dalam CDROM yang dapat dijalankan secara otomatis melalui komputer. Dengan Flash, keinginan tersebut dapat dipenuhi dengan memuaskan. Berbagai teknik yang dikuasai oleh desainer Flash ditambah dengan kemampuan mengintegrasikan keinginan manajemen perusahaan, akan dihasilkan profil perusahaan yang indah dan dinamis. Buku ini mengupas tentang pemanfaatan Flash MX 2004 untuk pembuatan company profile pribadi dan perusahaan, presentasi, atau promosi produk yang dikemas dalam CDROM. Sehingga pengguna lebih tertarik melihat profil pribadi/perusahaan Anda, ataupun memanfaatkan berbagai produk yang Anda presentasikan secara visual digital melalui CDROM.
BAB 2
DESAIN TAMPILAN MUKA
Agar isi (content) CD yang dibuat dapat menjadi lebih menarik, maka diperlukan pembuatan rancangan desain yang akan menjadi tampilan dari program yang dijalankan. Terdapat beberapa contoh dokumen Flash yang dapat dijadikan contoh rancangan desain program. Contoh-contoh tersebut dibagi dalam 2 (dua) kategori, yaitu: Informasi Profil Perusahaan (Company Profile) Merupakan rancangan tampilan yang memberikan informasi mengenai data diri, fakta, dan kelebihan yang ada dalam sebuah perusahaan. Informasi Detail Produk (Product Preview) Merupakan rancangan tampilan yang memberikan informasi mengenai data produk, kelebihan, dan harga yang dibayarkan jika ingin membelinya. Keduanya merupakan dua kepentingan yang sering ditemukan ketika perusahaan menginginkan visualisasi yang ingin ditampilkan melalui komputer. Untuk lebih jelasnya, berikut ini contoh yang berhubungan dengan dua kategori di atas.
31
2.1 Membuat Desain Profil Perusahaan Setiap media informasi, baik cetak maupun elektronik, tentunya diharapkan dapat membantu Anda dalam mempromosikan produk maupun jasa. Melalui media tersebut masyarakat diharapakan mengenal dan akhirnya menggunakan produk maupun jasa yang Anda tawarkan. Akan tetapi mempromosikan produk maupun jasa tidak harus melulu berbentuk iklan yang menjajakan dan membujuk masyarakat untuk menggunakan produk Anda. Ada cara lain yang dapat Anda tempuh, yaitu dengan membuat company profile yang memperkenalkan perusahaan maupun organisasi Anda ke masyarakat umum. Informasi yang Anda berikan melalui company profile ini, diharapkan mampu meningkatkan brand image perusahaan maupun organisasi Anda di mata masyarakat. Dengan demikian masyarakat akan menjadi percaya dan loyal dengan perusahaan maupun organisasi Anda dan akhirnya mampu meningkatkan nilai jual produk dan jasa yang Anda tawarkan. Jika Anda berminat membuat company profile perusahaan maupun organisasi Anda, ada beberapa hal yang harus Anda perhatikan, antara lain informasi yang akan ditampilkan. Sebaiknya berikan informasi yang simpel (sederhana) namun mampu mempresentasikan keunggulan perusahaan/organisasi Anda. Jangan memuat semua informasi tentang perusahaan/ organisasi Anda dalam company profile, hal ini justru akan membuat masyarakat sulit menangkap inti company profile ini atau bahkan enggan membacanya. Untuk menarik perhatian masyarakat, company profile Anda harus didesain semenarik mungkin. Anda dapat memadukan tulisan dan gambar pada company profile Anda sehingga lebih menarik atau Anda bahkan dapat menambahkan animasi di dalamnya. Berikut ini beberapa contoh desain tampilan company profile yang dibuat dengan menggunakan Macromedia Flash MX. Terdapat dua contoh company profile di bawah ini, yaitu company profile perusahaan mobil “Flashcar” dan company profile untuk wedding organizer “Romantic”. Flashcar merupakan salah satu contoh company profile yang sederhana. Company profile ini hanya terdiri dari tiga halaman yang berisi 32
deskripsi/informasi dari sebuah perusahaan pembuat mobil. Halaman pertama berisi sekilas informasi tentang perusahaan ini, halaman berikutnya adalah struktur organisasi yang diharapkan mampu memperlihatkan kekuatan perusahaan, dan yang terakhir adalah rekanan/patner. Untuk lebih lengkapnya, perhatikan desain company profile di bawah ini.
Gambar 2.1 Contoh desain tampilan company profile
Dari desain di atas, company profile yang akan dibuat nantinya akan memiliki tiga informasi yang diletakkan di halaman terpisah sehingga diperlukan tombol navigasi untuk menuju tiap halaman informasi tersebut. Judul informasi akan beubah sesuai dengan informasi yang akan diberikan. nformasi tersebut akan muncul di kotak yang berada di tengah halaman. Berikut ini langkahlangkah penerapannya dengan Macromedia Flash: 1. Buat file baru melalui menu File > New. Pilih item menu Flash Document. 2. Tambahkan scene melalui Insert > Scene sebanyak dua kali untuk meletakkan tiga halaman informasi. 3. Ubahlah ketiga nama scene tersebut menjadi “utama”, “organisasi” dan “partner” melalui menu Window > Design Panels > Scene atau dengan menekan Shift+F2 hingga muncul 33
jendela yang berisi nama-nama scene. Klik ganda salah satu nama scene untuk mengubah namanya. 4. Pada scene utama, masukkan gambar yang akan Anda gunakan sebagai background melalui File > Import > Import to Stage... atau dengan menekan tombol keyboard Ctrl + R. Pilih gambar background yang mempresentasikan perusahaan Anda.
Gambar 2.2 Menambahkan latar belakang
Letakkan gambar di tengah kanvas. Jika gambar yang Anda masukkan terlalu besar, Anda dapat mengecilkannya dengan menekan icon Free Transform Tool pada panel Tools, lalu klik pada gambar sehingga tampak kotak kecil hitam di setiap sisi gambar. Tekan salah satu titik dan drag ke arah tengah.
Gambar 2.3 Free Transform Tool
34
5. Klik kanan pada Layer 1, kemudian pilihlah Insert Layer untuk membuat layer baru. Layer ini nantinya akan digunakan untuk meletakkan judul dan teks informasi. Ubahlah nama “Layer 2” menjadi “teks” dengan cara mengklik ganda pada layer tersebut untuk mempermudah pengeditan.
Gambar 2.4 Insert layer teks
6. Pada layer teks frame ke-1, tambahkan kotak teks untuk menuliskan deskripsi/informasi tentang perusahaan Anda dengan menekan icon Text Tool pada kotak Tools.
Gambar 2.5 Text Tool
7. Arahkan mouse pada stage/background, tekan dan drag mouse sehingga membentuk sebuah kotak. Aturlah besar font menjadi 15 dan beri warna teks menjadi putih agar sesuai dengan warna background. Anda dapat mengatur jenis font, ukuran font, dan style font dengan menu Text atau melalui panel Properties. Setiap kotak teks hanya dapat menggunakan 35
satu jenis pengaturan/properties saja sehingga jika Anda ingin menulis dengan pengaturan berbeda seperti jenis atau ukuran font yang berbeda, Anda harus membuat kotak teks yang terpisah.
Gambar 2.6 Panel Properties
8. Sekarang Anda dapat mengetikkan sekilas informasi tentang perusahaan Anda di kotak teks tersebut. Ada cara lain yang dapat dilakukan untuk menampilkan isi informasi tersebut. Anda cukup menyimpan informasi tentang perusahaan Anda di file teks berekstensi *.txt dan membuat Flash memanggil file teks tersebut dan menampilkan isinya di layar kerja Anda. Hal ini akan mempermudah Anda jika terjadi peubahan. Anda cukup mengubah file teks Anda tanpa mengubah file Flash company profile Anda. 9. Agar file teks Anda dapat dipanggil dan ditampilkan di halaman company profile Anda, berikut ini adalah langkahlangkah yang harus dilakukan: Tambahkan layer baru di atas layer “teks” dan namakan layer tersebut sebagai “script”. Tulislah action berikut ini pada frame pertama di layer script: loadVariables("tentangkami.txt","");
Action ini berfungsi untuk memanggil file tentangkami.txt. Klik kotak teks tempat di mana informasi akan ditampilkan. Bukalah panel Properties dan lakukan beberapa peubahan berikut:
36
þ þ
Pada kotak Text Type, ubahlah menjadi Dynamic Text. Pada kotak Var, ketikkan nama variabel “isi”.
Gambar 2.7 Mengisi Properties kotak teks
Pada frame ke-2, tambahkan action berikut ini: isi=teks.slice(1,500);
Kemudian bukalah Textpad dan ketik informasi tentang perusahaan Anda dimulai dengan tulisan “teks=”. Simpan dengan nama tentangkami.txt. Pada layer script frame ke-3, tambahkan action berikut: gotoAndPlay(2);
Sampai saat ini Anda belum dapat melihat tampilan isi file teks tentangkami.txt di layar kerja Anda. Hasil kerja Anda baru akan terlihat pada saat dilakukan Test Movie. 10. Kembali lagi ke layer teks frame ke-1, jangan lupa untuk tambahkan judul teks “Tentang Kami” di atas kotak informasi. Ubah besar font menjadi 28 dengan warna abu-abu. 11. Buat layer baru untuk meletakkan tombol navigasi dan ubahlah nama layer tersebut menjadi “tombol”. 12. Pada layer tombol frame ke-1, tambahkan tombol navigasi untuk berpindah halaman. Anda dapat menggunakan instance symbol tombol dengan melalui Window > Other Panels > Common Libraries > Buttons. Pilihlah Circle Buttons, Circle
37
Button – Next. Drag tombol tersebut ke layar kerja Anda dan letakkan di ujung kiri bawah layar.
Gambar 2.8 Teks Tentang Kami
Oleh karena halaman ini merupakan halaman pertama dari company profile, Anda cukup meletakkan satu tombol navigasi Next saja untuk berpindah ke halaman (scene organisasi) berikutnya. 13. Agar tombol ini dapat berfungsi, Anda harus menambahkan action berikut ini pada panel Action: on (release){ gotoAndPlay("organisasi",1); }
Dengan action ini, pembaca dapat berpindah ke halaman yang berisi struktur organisasi perusahaan Anda dengan menekan tombol navigasi
38
Gambar 2.9 Menambahkan Actionscript
14. Pada tahap ini halaman pertama dari company profile Anda sudah selesai. Anda dapat melihat hasilnya dengan menekan tombol Ctrl + Enter. Selanjutnya Anda dapat membuat halaman kedua dari company profile perusahaan yang nantinya akan diisi dengan tampilan struktur organisasi. Desain halaman kedua ini sama dengan halaman pertama. Anda dapat saja mengulangi langkah-langkah di atas, namun ada cara yang lebih mudah, Anda cukup mengcopy-paste frame-frame yang ada di scene pertama ke scene kedua. Berikut ini langkah-langkahnya: 1. Klik kanan salah satu frame yang ada di scene utama, lalu pilih Select All Frames hingga seluruh frame terpilih. Klik kanan lagi pada frame tersebut dan pilih Copy Frames. 2. Buka scene organisasi dan klik kanan frame ke-1 pada Layer 1, lalu pilih Paste Frames. Saat ini tampilan scene organisasi sama persis dengan scene utama. Anda cukup melakukan beberapa perubahan tanpa harus mengulang seluruh langkah. Selanjutnya lakukan beberapa langkah di bawah ini yang bertujuan untuk mengubah isi dari salinan frame di atas: 1. Ubahlah judul informasi menjadi “Struktur Organisasi” dengan cara klik icon Text Tool pada panel Tools, kemudian klik teks judul di scene organisasi, lalu hapus isi dari kotak teks tersebut dan ketikkan “Struktur Organisasi”. 2. Klik pada layer script frame ke-1 dan ubahlah nama file .txt sesuai dengan nama file teks yang berisi struktur organisasi. 39
3. Ubahlah action pada tombol Circle Button – Next menjadi: on (release){ gotoAndPlay("patner",1);
4. Tambahkan instance symbol tombol Circle Button – Previous melalui Window > Other Panels > Common Libraries > Buttons. Drag tombol tersebut ke layar kerja Anda dan letakkan bersebelahan dengan tombol Circle Button – Next yang sudah Anda buat sebelumnya. 5. Berikan action pada tombol Circle Button – Previous agar tombol ini dapat berpindah ke scene sebelumnya: on (release){ gotoAndPlay("utama",1); }
Sampai dengan tahap ini, Anda sudah menyelesaikan dua halaman company profile Anda. Untuk membuat halaman yang ke-3, Anda dapat melakukannya dengan cara yang sama seperti saat Anda membuat halaman ke-2.
Gambar 2.10 Hasil akhir Company Profile
40
Contoh lainnya adalah company profile untuk wedding organizer. Company profile ini nantinya akan terdiri dari empat halaman informasi yang terpisah, yaitu halaman depan/intro, halaman About Us, halaman Service, dan halaman Branch. Jika pada company profile “Flashcar” perpindahan halaman informasi dilakukan secara urut dengan tombol navigasi next dan previous, di company profile kali ini di setiap halaman akan disediakan tiga tombol untuk melihat halaman informasi lain sehingga pembaca tidak perlu membaca dengan urut. Mereka dapat membaca halaman mana saja yang mereka inginkan terlebih dahulu. Berikut ini adalah desain company profile yang akan dibuat:
Gambar 2.11 Desain company profile wedding organizer
Berikut ini langkah-langkah implementasinya dengan Macromedia Flash: 1. Buat file baru melalui File > New. 2. Tambahkan tiga scene melalui Insert > Scene sebanyak tiga kali. Melalui menu Window > Design Panels > Scene atau dengan menekan Shift+F2, ubahlah keempat nama scene tersebut menjadi “utama”, “about”, “service” dan “branch”. 41
3. Pada scene utama, ubahlah nama Layer 1 menjadi “utama”. 4. Pada frame ke-1, masukkan gambar yang akan dipakai sebagai background melalui File > Import > Import to Stage... atau dengan menekan tombol keyboard Ctrl + R. Pada gambar background ini, logo perusahaan sudah termasuk di dalamnya. Akan tetapi jika pada gambar yang Anda punya tidak terdapat logo perusahaan, Anda dapat membuatnya sendiri dengan Flash. Anda dapat menggunakan animasi atau hanya sekedar teks statis yang dapat dibuat dengan Text Tool. 5. Masih di frame ke-1, tambahkan juga teks statis yang berisi alamat kantor di ujung kiri bawah layar.
Gambar 2.12 Latar belakang desain tampilan company profile
6. Tambahkan layer baru di atas layer utama, dan beri nama pict. Layer ini nantinya akan Anda gunakan untuk menampilkan gambar-gambar pendukung company profile ini.
42
7. Untuk menampilkan gambar pendukung tersebut, klik pada layer pict frame ke-1, lalu pilih menu File > Import > Import to Stage... atau tekan Ctrl + R. Pilih gambar yang sesuai dengan image perusahaan dan letakkan di bagian bawah di tengah layar. 8. Gunakan icon Free Transform Tool yang di panel Tools. Pilih icon Scale di panel option untuk mengecilkan gambar, kemudian pilih icon Rotate and skew untuk memutar gambar sebesar 30°.
Gambar 2.13 Free Transform Tool
9. Masukkan gambar ke-2, 3 dan 4 dengan mengulangi langkah ke-7 dan ke-8. Atur gambar sehingga tampak proposional. Berikut ini adalah tampilan layar kerja Anda setelah Anda selesai memasukkan gambar ke-4.
43
Gambar 2.14 Menambahkan empat gambar
10. Tambahkan layer baru di atas layer pict dan beri nama “about” untuk membuat tombol yang menuju halaman informasi “About Us”. 11. Masukkan gambar dengan menekan Ctrl + R. Aturlah besar gambar dan letakkan di sisi kiri layar. 12. Dengan Text Tool, buat tulisan “About Us” di bawah gambar. 13. Buat agar gambar dan teks menjadi satu kesatuan dengan mengklik frame ke-1 layer about kemudian memilih menu Modify > Group atau dengan menekan Ctrl + G. 14. Gunakan icon Free Transform Tool yang ada di panel Tools. Pilih icon Rotate and Skew untuk memutar gambar sebesar 30°. 15. Buatlah tombol dengan gambar tersebut. Klik kanan gambar tersebut dan pilih Convert to Symbol.. Pada jendela yang muncul, isi kotak Name dengan “about” dan pilih Radiobutton pada pilihan Behavior. Klik OK. Sekarang gambar Anda sudah berubah menjadi tombol.
44
Gambar 2.15 Convert to Symbol
16. Klik tombol yang baru saja Anda buat. Tekanlah panel action yang ada di bawah layar kerja Anda dan ketikkan script action berikut ini: on (release){ gotoAndPlay("about",1); }
Gambar 2.16 Menambahkan actionscript pada tombol about
45
Saat ini tombol yang Anda buat sudah dapat digunakan untuk berpindah ke halaman About Us. 17. Tambahkan layer baru lagi di atas layer about dan berikan nama “service”. Lalu, ulangi langkah ke-11 hingga langkah ke-16 untuk membuat tombol “Service” dan “Branch”. Jangan lupa untuk menambahkan script action di setiap tombol yang Anda buat sehingga di panel action akan tampak ketiga tombol yang sudah Anda buat.
Gambar 2.17 Actionscript pada setiap tombol
Di jendela panel Timeline akan terdapat lima buah layer seperti tampak pada gambar berikut ini:
Gambar 2.18 Lima layer dalam panel Timeline
18. Sampai dengan tahap ini, company profile Anda sudah dapat Anda gunakan. Cobalah melihat hasilnya dengan menekan tombol Ctrl + Enter. 46
Gambar 2.19 Hasil akhir company profile “romantic”
Anda dapat membuat halaman informasi About Us, Service dan Branch dengan cara yang sama dengan pembuatan halaman ke-2 dan ke-3 pada company profile Flashcar, yaitu dengan copy dan paste dari halaman utama ini. Agar company profile Anda menjadi lebih menarik, Anda dapat menambah animasi di dalam company profile ini. Anda dapat membuat berbagai macam animasi dengan Macromedia Flash, salah satunya adalah animasi teks yang muncul dan menghilang di tengah layar. Berikut ini cara pembuatannya: 1. Buat file baru melalui File > New. 2. Pada panel Properties, ubah warna background layar kerja Anda menjadi hitam.
Gambar 2.20 Mengubah warna latar belakang
47
3. Klik Text Tool dan bukalah panel Properties yang terletak di bawah layar. Ubahlah warna teks menjadi putih, italic, dan perbesar ukuran teks menjadi 28. Kemudian, buatlah tulisan “exclusive” di layar kerja Anda.
Gambar 2.21 Mengubah ukuran dan warna teks
4. Agar teks dapat muncul dan kemudian menghilang, teks Anda harus diubah dulu menjadi graphic. Untuk mengubah teks tersebut menjadi graphic, klik kanan kotak teks tersebut dan pilih Convert to Symbol, kemudian pilih radiobutton Graphic pada pilihan Behavior. Klik OK.
Gambar 2.22 Convert to Symbol
5. Klik kanan pada kotak teks yang baru saja Anda ubah menjadi graphic. Pilih Timeline Effects > Effects > Blur. 48
Gambar 2.23 Menambahkan efek Blur
6. Pada jendela Blur yang muncul, ubahlah Effect Duration menjadi 20 dan Resolution menjadi 10.
Gambar 2.24 Mengubah effect duration dan resolution
49
7. Lihatlah peubahan yang terjadi di panel Timeline. Nama layer 1 akan berubah menjadi Blur 1.
Gambar 2.25 Perubahan pada panel Timeline
8. Tambahkan layer baru di atas layer Blur 1. 9. Pada frame ke-15 layer yang baru, tambahkan keyframe. Tambahkan teks “excitingly” di bawah teks yang pertama, kemudian ubahlah menjadi graphic dan tambahkan effect blur seperti pada teks pertama.
Gambar 2.26 Menambahkan efek blur
10. Lakukan lagi langkah ke-9 dengan teks “unforgettable”. Jika Anda melakukan langkah-langkah di atas dengan benar, Anda akan melihat jendela timeline Anda tampak seperti gambar berikut ini: 50
Gambar 2.27 Kondisi terakhir panel Timeline
11. Simpan dengan nama weddblur.swf. 12. Tes pekerjaan Anda dengan menekan Ctrl + Enter. Untuk menambahkan animasi yang sudah Anda buat ke dalam company profile, ikuti langkah-langkah berikut ini: 1. Buka file company profile Anda. 2. Tambahkan layer dan beri nama animtext. 3. Pilih menu File > Import > Import to Library.. dan pilihlah file weddblur.swf. 4. Kemudian tekan F11 atau menu Window > Library, maka akan muncul jendela panel Library.
Gambar 2.28 Menambahkan weddblur.swf ke dalam library
51
5. Pilih library weddblur.swf, lalu klik dan drag library tersebut dan letakkan di tengah layar.
Gambar 2.29. Drag library weddblur.swf ke tengah layar
6. Tes hasil kerja Anda dengan menekan tombol Ctrl + Enter. Sekarang ada animasi teks yang muncul dan hilang secara bergantian di company profile Anda.
Gambar 2.30 Animasi teks berjalan di tengah layar
52
2.2 Membuat Desain Informasi Produk Jika pada contoh sebelumnya yang ditampilkan adalah informasi tentang profil perusahaan, pada contoh berikut ini yang ditampilkan adalah produk dari perusahaan. Di bawah ini terdapat contoh tampilan informasi produk pada sebuah toko suvenir. Desain ini akan menampilkan beberapa produk yang dijual di toko dalam bentuk frame atau banner gambar produk yang berganti-ganti dan sebuah kalimat ajakan untuk membeli hadiah. Setiap gambar tersebut nantinya jika diklik akan memunculkan keterangan produk tersebut. Berikut ini adalah rancangan desain tampilan tersebut:
Gambar 2.31 Rancangan desain tampilan Flash
Untuk membuatnya, Anda dapat mengikuti langkah-langkah berikut ini: 1. Buat file baru melalui File > New. 2. Pada layer 1, masukkan gambar yang akan Anda gunakan sebagai background melalui File > Import > Import to Stage... atau dengan menekan tombol keyboard Ctrl + R. 53
3. Tambahkan kotak teks untuk memasukkan kalimat ajakan untuk membeli produk dengan menekan icon Text Tool pada kotak Tools. Arahkan mouse pada stage/background, lalu tekan dan drag mouse sehingga membentuk kotak untuk menulis. Di kotak ini, Anda dapat menuliskan ajakan untuk membeli atau menggunakan produk yang Anda tawarkan, misalnya dengan tulisan: “Meriahkan saat-saat istimewa... bersama orang yang Anda cintai, dengan bingkisan istimewa... “ 4. Tambahkan juga alamat toko ini di bawah kotak teks informasi yang baru saja Anda buat.
Gambar 2.32 Menambahkan teks
5. Klik kanan pada Layer 1, kemudian pilihlah Insert Layer untuk membuat layer baru. Layer ini nantinya akan digunakan untuk menampilkan banner gambar produk. 6. Klik frame pertama pada Layer 2 dan masukkan satu gambar produk dengan menekan tombol Ctrl + Enter. 54
7. Letakkan gambar yang baru saja Anda impor di sisi kiri atas. Jika gambar tersebut ukurannya terlalu besar, Anda dapat menggunakan tool Free Transform Tool dengan opsi Scale untuk mengecilkan gambar. Klik gambar, kemudian klik dan drag ujung gambar ke arah tengah hingga ukurannya sesuai dengan yang Anda inginkan. 8. Ubahlah gambar tersebut menjadi tombol sehingga dapat digunakan untuk menampilkan halaman preview produk. Klik kanan gambar tersebut dan pilih Convert to Symbol.
Gambar 2.33 Klik Convert to Symbol
9. Pada jendela yang muncul, pilih radiobutton Button pada pilihan Behavior, kemudian klik OK. 10. Klik tombol tersebut dan bukalah panel action yang ada di bawah layar kerja Anda dan ketikkan script action berikut ini: 55
on (release){ gotoAndPlay("produk",1);
Dengan ditambahkannya action di atas tombol, gambar yang Anda buat sudah dapat digunakan untuk melihat halaman produk. 11. Masih bekerja di frame ke-1Layer 2, tambahkan lagi 2 gambar produk dengan mengulangi langkah ke 7. Letakkan gambar ke-2 dan ke-3 di bawah gambar pertama. 12. Ubahlah kedua gambar tersebut menjadi tombol dengan mengulangi langkah ke-8 hingga langkah ke-10. Berikut ini adalah tampilan yang sudah Anda buat sampai saat ini.
Gambar 2.34 Tampilan akhir
Tampilan ini masih bersifat statis. Agar tampilan gambar produk dapat beubah-ubah, Anda dapat mengikuti langkah-langkah berikut: 1. Klik kanan pada frame ke-15 di Layer 2 dan pilihlah Insert Keyframe.
56
Gambar 2.35 Menambahkan keyframe
2. Hapus ketiga tombol gambar yang muncul dan gantikan dengan tiga gambar produk yang berlainan. Jangan lupa untuk mengubah gambar-gambar tersebut menjadi tombol dengan mengulangi langkah ke-7 hingga langkah ke-10. 3. Ulangi lagi langkah ke-1 dan ke-2 pada frame ke-30, ke-45, dan ke-60. Sampai saat ini banner gambar Anda akan berganti-ganti setiap 15 frame. Jika masih ada produk lain yang ingin ditampilkan, Anda dapat menampilkan gambar produk tersebut dengan mengulangi langkah ke-1 dan ke-2 hingga gambar produk yang akan Anda tawarkan habis. 4. Tambahkan juga dan pilihlah keyframe pada frame ke-60 Layer 1. Hal ini perlu dilakukan agar gambar background akan terus tampak selama proses berlangsung.
Gambar 2.36 Menambahkan keyframe sampai frame ke-60
57
5. Jalankan company profile yang baru saja Anda buat dengan menekan tombol Ctrl + Enter. Anda akan melihat sebuah presentasi produk yang bergantian. Apabila salah satu produk yang ditampilkan dipilih dengan mouse, akan tampil informasi produk yang bersangkutan. Desain ini dapat Anda kembangkan sendiri sesuai imajinasi sehingga menjadi lebih menarik untuk dilihat oleh mitra kerja atau calon konsumen. Pada bab selanjutnya, akan dibahas mengenai teknik tambahan untuk mempermudah perusahaan dalam mengganti informasi yang ditampilkan. Teknik-teknik yang dibahas meliputi penggantian informasi berupa gambar, teks, animasi, dan video secara lebih dinamis.
58
