Your SlideShare is downloading. ×
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Membuat desain auto run cd dengan flash mx 2004
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Membuat desain auto run cd dengan flash mx 2004

4,664

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,664
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
363
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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 dalamCDROM 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 pribadidan perusahaan, presentasi, atau promosi produk yang dikemas dalam CDROM. Sehingga penggunalebih tertarik melihat profil pribadi/perusahaan Anda, ataupun memanfaatkan berbagai produk yang Anda presentasikan secara visual digital melalui CDROM.
  • 2. BAB 2DESAIN TAMPILAN MUKAAgar isi (content) CD yang dibuat dapat menjadi lebih menarik,maka diperlukan pembuatan rancangan desain yang akanmenjadi tampilan dari program yang dijalankan. Terdapatbeberapa contoh dokumen Flash yang dapat dijadikan contohrancangan desain program. Contoh-contoh tersebut dibagi dalam2 (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 ditemukanketika perusahaan menginginkan visualisasi yang inginditampilkan melalui komputer. Untuk lebih jelasnya, berikut inicontoh yang berhubungan dengan dua kategori di atas. 31
  • 3. 2.1 Membuat Desain Profil PerusahaanSetiap media informasi, baik cetak maupun elektronik, tentunyadiharapkan dapat membantu Anda dalam mempromosikanproduk maupun jasa. Melalui media tersebut masyarakatdiharapakan mengenal dan akhirnya menggunakan produkmaupun jasa yang Anda tawarkan. Akan tetapi mempromosikanproduk maupun jasa tidak harus melulu berbentuk iklan yangmenjajakan dan membujuk masyarakat untuk menggunakanproduk Anda. Ada cara lain yang dapat Anda tempuh, yaitudengan membuat company profile yang memperkenalkanperusahaan maupun organisasi Anda ke masyarakat umum.Informasi yang Anda berikan melalui company profile ini,diharapkan mampu meningkatkan brand image perusahaanmaupun organisasi Anda di mata masyarakat. Dengan demikianmasyarakat akan menjadi percaya dan loyal dengan perusahaanmaupun organisasi Anda dan akhirnya mampu meningkatkannilai jual produk dan jasa yang Anda tawarkan.Jika Anda berminat membuat company profile perusahaanmaupun organisasi Anda, ada beberapa hal yang harus Andaperhatikan, antara lain informasi yang akan ditampilkan.Sebaiknya berikan informasi yang simpel (sederhana) namunmampu mempresentasikan keunggulan perusahaan/organisasiAnda. Jangan memuat semua informasi tentang perusahaan/organisasi Anda dalam company profile, hal ini justru akanmembuat masyarakat sulit menangkap inti company profile iniatau bahkan enggan membacanya. Untuk menarik perhatianmasyarakat, company profile Anda harus didesain semenarikmungkin. Anda dapat memadukan tulisan dan gambar padacompany profile Anda sehingga lebih menarik atau Anda bahkandapat menambahkan animasi di dalamnya.Berikut ini beberapa contoh desain tampilan company profileyang dibuat dengan menggunakan Macromedia Flash MX.Terdapat dua contoh company profile di bawah ini, yaitucompany profile perusahaan mobil “Flashcar” dan companyprofile untuk wedding organizer “Romantic”. Flashcar merupakansalah satu contoh company profile yang sederhana. Companyprofile ini hanya terdiri dari tiga halaman yang berisi32
  • 4. deskripsi/informasi dari sebuah perusahaan pembuat mobil.Halaman pertama berisi sekilas informasi tentang perusahaan ini,halaman berikutnya adalah struktur organisasi yang diharapkanmampu memperlihatkan kekuatan perusahaan, dan yang terakhiradalah rekanan/patner. Untuk lebih lengkapnya, perhatikandesain company profile di bawah ini. Gambar 2.1 Contoh desain tampilan company profileDari desain di atas, company profile yang akan dibuat nantinyaakan memiliki tiga informasi yang diletakkan di halaman terpisahsehingga diperlukan tombol navigasi untuk menuju tiap halamaninformasi tersebut. Judul informasi akan beubah sesuai denganinformasi yang akan diberikan. nformasi tersebut akan muncul dikotak yang berada di tengah halaman. Berikut ini langkah-langkah 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
  • 5. 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 Tool34
  • 6. 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 teks6. 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 Tool7. 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
  • 7. 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 Properties8. 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 langkah- langkah 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 ditam- pilkan. Bukalah panel Properties dan lakukan beberapa peubahan berikut:36
  • 8. þ 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
  • 9. 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 navigasi38
  • 10. Gambar 2.9 Menambahkan Actionscript14. 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 companyprofile perusahaan yang nantinya akan diisi dengan tampilanstruktur organisasi. Desain halaman kedua ini sama denganhalaman pertama. Anda dapat saja mengulangi langkah-langkahdi atas, namun ada cara yang lebih mudah, Anda cukup meng-copy-paste frame-frame yang ada di scene pertama ke scenekedua. 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 yangbertujuan 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
  • 11. 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 duahalaman company profile Anda. Untuk membuat halaman yangke-3, Anda dapat melakukannya dengan cara yang sama sepertisaat Anda membuat halaman ke-2. Gambar 2.10 Hasil akhir Company Profile40
  • 12. Contoh lainnya adalah company profile untuk wedding organizer.Company profile ini nantinya akan terdiri dari empat halamaninformasi yang terpisah, yaitu halaman depan/intro, halamanAbout Us, halaman Service, dan halaman Branch. Jika padacompany profile “Flashcar” perpindahan halaman informasidilakukan secara urut dengan tombol navigasi next dan previous,di company profile kali ini di setiap halaman akan disediakan tigatombol untuk melihat halaman informasi lain sehingga pembacatidak perlu membaca dengan urut. Mereka dapat membacahalaman mana saja yang mereka inginkan terlebih dahulu.Berikut ini adalah desain company profile yang akan dibuat: Gambar 2.11 Desain company profile wedding organizerBerikut ini langkah-langkah implementasinya dengan MacromediaFlash: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
  • 13. 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 profile6. 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
  • 14. 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 Tool9. 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
  • 15. Gambar 2.14 Menambahkan empat gambar10. 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
  • 16. Gambar 2.15 Convert to Symbol16. 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
  • 17. 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 Timeline18. Sampai dengan tahap ini, company profile Anda sudah dapat Anda gunakan. Cobalah melihat hasilnya dengan menekan tombol Ctrl + Enter.46
  • 18. Gambar 2.19 Hasil akhir company profile “romantic”Anda dapat membuat halaman informasi About Us, Service danBranch dengan cara yang sama dengan pembuatan halaman ke-2dan ke-3 pada company profile Flashcar, yaitu dengan copy danpaste dari halaman utama ini. Agar company profile Anda menjadi lebih menarik, Anda dapatmenambah animasi di dalam company profile ini. Anda dapatmembuat berbagai macam animasi dengan Macromedia Flash,salah satunya adalah animasi teks yang muncul dan menghilangdi 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
  • 19. 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 teks4. 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 Symbol5. Klik kanan pada kotak teks yang baru saja Anda ubah menjadi graphic. Pilih Timeline Effects > Effects > Blur.48
  • 20. Gambar 2.23 Menambahkan efek Blur6. Pada jendela Blur yang muncul, ubahlah Effect Duration menjadi 20 dan Resolution menjadi 10. Gambar 2.24 Mengubah effect duration dan resolution 49
  • 21. 7. Lihatlah peubahan yang terjadi di panel Timeline. Nama layer 1 akan berubah menjadi Blur 1. Gambar 2.25 Perubahan pada panel Timeline8. 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 blur10. 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
  • 22. Gambar 2.27 Kondisi terakhir panel Timeline11. Simpan dengan nama weddblur.swf.12. Tes pekerjaan Anda dengan menekan Ctrl + Enter.Untuk menambahkan animasi yang sudah Anda buat ke dalamcompany 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
  • 23. 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 layar6. 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 layar52
  • 24. 2.2 Membuat Desain Informasi ProdukJika pada contoh sebelumnya yang ditampilkan adalah informasitentang profil perusahaan, pada contoh berikut ini yang ditam-pilkan adalah produk dari perusahaan. Di bawah ini terdapatcontoh tampilan informasi produk pada sebuah toko suvenir.Desain ini akan menampilkan beberapa produk yang dijual ditoko dalam bentuk frame atau banner gambar produk yangberganti-ganti dan sebuah kalimat ajakan untuk membeli hadiah.Setiap gambar tersebut nantinya jika diklik akan memunculkanketerangan produk tersebut. Berikut ini adalah rancangan desaintampilan tersebut: Gambar 2.31 Rancangan desain tampilan FlashUntuk membuatnya, Anda dapat mengikuti langkah-langkahberikut 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
  • 25. 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 teks5. 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
  • 26. 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 Symbol9. 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
  • 27. 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 akhirTampilan ini masih bersifat statis. Agar tampilan gambar produkdapat beubah-ubah, Anda dapat mengikuti langkah-langkahberikut:1. Klik kanan pada frame ke-15 di Layer 2 dan pilihlah Insert Keyframe.56
  • 28. Gambar 2.35 Menambahkan keyframe2. 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
  • 29. 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 denganmouse, akan tampil informasi produk yang bersangkutan. Desainini dapat Anda kembangkan sendiri sesuai imajinasi sehinggamenjadi lebih menarik untuk dilihat oleh mitra kerja atau calonkonsumen.Pada bab selanjutnya, akan dibahas mengenai teknik tambahanuntuk mempermudah perusahaan dalam mengganti informasiyang ditampilkan. Teknik-teknik yang dibahas meliputipenggantian informasi berupa gambar, teks, animasi, dan videosecara lebih dinamis.58

×