1

PANDUAN LATIHAN ADOBE FLASH CS3 PRO (FLASH VERSI 9.0)IntroduksiAdobe Flash (dahulu bernama Macromedia Flash) adalah salah satu perangkat lunak komputer yang merupakan produk unggulan Adobe Systems. Adobe Flash digunakan untuk membuat gambar vektor maupun animasi gambar tersebut. Berkas yang dihasilkan dari perangkat lunak ini mempunyai file extension *.swf dan dapat diputar di penjelajah web yang telah dipasangi Adobe Flash Player. Flash menggunakan bahasa pemrograman bernama ActionScript yang muncul pertama kalinya pada Flash 5. Sebelum tahun 2005, Flash dirilis oleh Macromedia. Flash 1.0 diluncurkan pada tahun 1996 setelah Macromedia membeli Gambar 1. Logo Adobe Flash CS3 program animasi vektor bernama FutureSplash. Versi terakhir yang diluncurkan di pasaran dengan menggunakan nama 'Macromedia' adalah Macromedia Flash 8. Pada tanggal 3 Desember 2005 Adobe Systems mengakuisisi Macromedia dan seluruh produknya, sehingga nama Macromedia Flash berubah menjadi Adobe Flash. Adobe Flash merupakan sebuah program yang didesain khusus oleh Adobe dan program aplikasi standar authoring tool professional yang digunakan untuk membuat animasi dan bitmap yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan dinamis. Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk membuat animasi logo, movie, game, pembuatan navigasi pada situs web, tombol animasi, banner, menu interaktif, interaktif form isian, ecard, screen saver dan pembuatan aplikasi-aplikasi web lainnya. Dalam Flash, terdapat teknik-teknik membuat animasi, fasilitas action script, filter, custom easing dan dapat memasukkan video lengkap dengan fasilitas playback FLV. Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan Database dengan pendekatan XML, dapat dikolaborasikan dengan web, karena mempunyai keunggulan antara lain kecil dalam ukuran file outputnya Movie-movie Flash memiliki ukuran file yang kecil dan dapat ditampilkan dengan ukuran layar yang dapat disesuaikan dengan keingginan. Aplikasi Flash merupakan sebuah standar aplikasi industri perancangan animasi web dengan peningkatan pengaturan dan perluasan kemampuan integrasi yang lebih baik. Banyak fiture-fiture baru dalam Flash yang dapat meningkatkan kreativitas dalam pembuatan

2 isi media yang kaya dengan memanfaatkan kemampuan aplikasi tersebut secara maksimal. Fiture-fiture baru ini membantu kita lebih memusatkan perhatian pada desain yang dibuat secara cepat, bukannya memusatkan pada cara kerja dan penggunaan aplikasi tersebut. Flash juga dapat digunakan untuk mengembangkan secara cepat aplikasi-aplikasi web yang kaya dengan pembuatan script tingkat lanjut. Di dalam aplikasinya juga tersedia sebuah alat untuk men-debug script. Dengan menggunakan Code hint untuk mempermudah dan mempercepat pembuatan dan pengembangan isi ActionScript secara otomatis.

Memulai Adobe Flash CS3Untuk memulai menggunakan Adobe Flash CS3, dapat dilakukan dengan meng-klik ganda ikon Adobe Flash CS3 yang ada di Desktop atau dari menu Start All Programs Adobe Flash CS3 Professional

2. Adobe Flash CS3 Profession al

3. All Programs

1. StartGambar 2. Menjalankan Adobe Flash CS3

Untuk dapat menjalankan program ini dengan baik, kebutuhan hardware dan system minimum yang dibutuhkan sebagai berikut : Prosesor Intel Pentium 4, Pentium Centrino, Intel Xeon, atau Intel Core Duo (atau yang kompatibel) Sistem Operasi (OS) Microsoft Windows XP SP2, atau Microsoft Windows Vista Home Premium, Business, Ultimate, atau Enterprise (dengan system yang mendukung 32 bit bukan 64 bit) RAM 512MB, direkomendasikan 1GB 2,5 GB ruang hard disk kosong dengan tambahan ruang kosong saat penginstalan awal

3 Monitor dengan resolusi 1024 x 768 dengan video card 16 bit DVD-Rom (untuk instalasi) Quick Time 7.1.2 untuk fitur-fitur multimedia DirectX 9.0c

Gambar 3. Gambar Splash Screen Adobe Flash CS3

Gambar 3 di atas merupakan gambar splash screen saat menjalankan Adobe Flash CS3. Sesaat setelah splash screen tersebut, akan muncul gambar yang menunjukkan menu awal Adobe Flash CS3 Professional.

Gambar 4. Menu awal Adobe Flash CS3

4 Mulai edisi CS3 (Flash 9), disediakan opsi bagi pengguna apakah akan menggunakan fasilitas ActionScript 2.0, atau ActionScript 3.0. Penjelasan tentang ActionScript akan diberikan pada bagian yang lain. Untuk saat ini, pilih saja Flash File (ActionScript 3.0).

Mengenal Lingkungan Kerja Adobe Flash CS3 ProfessionalLingkungan kerja Adobe Flash CS3 dapat diberikan dalam gambar di bawah ini

1

2

4

3

5

6

Gambar 5. Lingkungan kerja Adobe Flash CS3

Keterangan : 1. Menu Bar. 2. Timeline.

5 3. 4. 5. 6. Library Panel. Stage. Tools Panel / Toolbox. Property Inspector Panel.

Mengenal Fasilitas yang Digunakan di Adobe Flash CS3Tools Panel / ToolboxTools panel/Toolbox akan sering digunakan pada saat desain menggunakan Adobe Flash CS3. Tools panel memiliki banyak piranti yang dapat digunakan misalnya pointer untuk memilih, pewarnaan, dan piranti-piranti yang lain. Setiap kali salah satu tools dipilih (diklik), maka isi dari Property Inspector Panel juga akan berubah menyesuaikan dengan properties dari masing-masing tools yang kita pilih. Hal ini perlu dicermati saat kita ingin menggunakan suatu tools dengan karakteristik yang tertentu pula. Sebagai contoh adalah pada saat kita ingin meletakkan teks di dalam Stage, maka kita akan mengklik tools T. Secara otomatis, Property Inspector Panel akan berubah isinya menyesuaikan dengan properties dari tools T, antara lain pemilihan jenis huruf, besarnya huruf, tebal tipisnya huruf, cetak miring, garis bawah, warna huruf, dan perilaku yang lain. Contoh lain yakni saat tombol pensil diklik untuk menggambar garis. Saat pertama kali Adobe CS3 dijalankan, setting untuk tombol pensil adalah menggambar garis dengan jenis garis lurus tipis. Sehingga saat menggambar garis dengan fasilitas ini, maka yang tergambar adalah garis lurus tipis. Saat jenis garis, tebal tipisnya, sifatnya akan diubah, maka hal tersebut dapat dilakukan pada bagian Property Inspector Panel.

Gambar 6. Property dari Pencil Tools

Gambar 7. Tools Panel

Pada Gambar 7., di atas merupakan salah satu contoh tampilan Property Inspector Panel saat memilih Pencil Tool. Terlihat pada Gambar 7 tersebut, beberapa properties dapat diatur ulang, misalnya warna garis, jenis garis, kehalusan garis, bentuk ujung awal dan akhir, dan lain sebagainya.

6

StageStage merupakan tempat dimana kita akan bekerja menempatkan berbagai jenis objek yang akan dianimasikan. Istilah sederhananya adalah Stage merupakan kertas kerja maya.

Gambar 8. Stage

Terdapat beberapa cara untuk mengubah cara memandang stage di Adobe Flash CS3. Salah satu cara yang paling mudah adalah dengan mengubah nilai menu drop down yang terletak di sudut kanan atas stage. Menu ini memiliki sejumlah nilai yang dapat digunakan untuk mengubah ukuran pandangan stage (beberapa diantaranya dalam persen, %), seperti terlihat pada Gambar 9. Pilihan yang lain diantaranya adalah Show Frame yang menghilangkan pandangan kecuali pada bagian stage saja dan Show All yang memungkinkan kita untuk melihat setiap hal yang berada di dalam atau di luar stage. Cobalah letakkan beberapa objek di bagian yang berwarna putih dan berwarna abu-abu kemudian cobalah fitur ini.

7 Selain menggunakan fasilitas tersebut di atas, cara lain yang dapat digunakan untuk menghilangkan pandangan adalah dengan menggunakan menu View yang terletak di Menu Bar. Pada menu bar ini disediakan serangkaian nilai pilihan pembesaran, seperti diperlihatkan pada Gambar 10. Bagaimanapun pilihannya, kedua metode tersebut dapat digunakan untuk menghasilkan tampilan yang sesuai dengan keinginan user. Apabila dirasa masih kurang nyaman, Adobe Flash CS3 menyediakan fasilitas untuk membuat zoom dari Tools Panel.

Gambar 9. View Percentage of Stage

Gambar 10. Pembesaran dari menu View dan dari Tools Panel

Hand Tool memungkinkan user untuk menggeser stage hingga diperoleh view stage yang ingin difokuskan. Magnifying Glass Tool memungkinkan user untuk zoom in atau zoom out. Untuk zoom in dengan cara mengklik pada stage dengan alat ini, sedangkan untuk zoom out tekan tombol Alt saat mengklik pada stage.

Guide, Grid dan RulerUntuk membantu user membuat susunan objek-objek pada stage, Adobe Flash CS3 menawarkan sejumlah peralatan yang terletak pada menu View. Peralatan tersebut dijelaskan sebagai berikut: Guide. Guides mirip dengan grid dalam hal bantuannya untuk mensejajarkan objek di dalam stage. Untuk menambahkan guide, maka ruler harus dalam keadaan hidup (terlihat). Klik pada salah satu ruler, kemudian drag menuju ke stage. Sebuah guide akan muncul dan dapat diposisikan pada stage. Guide dapat ditambahkan sebanyak yang diperlukan. Untuk menghapus guide, drag guide yang akan dihapus ke ruler kembali.

8 Grid. Saat grid dihidupkan, grid akan muncul di stage. Grid ini hanyak akan terlihat saat mendesain di stage dan tidak akan terlihat pada film. Grid dapat diedit warna dan jaraknya, serta dapat dinyalakan fasilitas snap objek terhadap gridnya. Ruler. Saat pilihan ini dinyalakan pada menu View, penggaris muncul pada bagian atas dan kiri dari stage. Piranti ini sangat berguna untuk menempatkan objek-objek pada jarak tertentu.

Memahami TimelineTimeline berisi sejumlah frame-frame animasi dan akan menampilan frame tersebut tataran sekuen dari sebelah kiri ke kanan. Saat animasinya diperlihatkan, viewer akan melihat frame-frame tersebut dalam urutan sekuensial mulai dari frame 1. Flash secara otomatis akan menjalankan animasi dari Frame 1 dan akan berlanjut sepanjang timeline hingga mencapai frame aktif yang terakhir. Apabila telah dibuat sejumlah scene, Flash akan bekerja secara sekuensial ke seluruh frame pada scene yang pertama dan kemudian akan berpindah ke scene yang kedua dan seterusnya. Apabila diinginkan user untuk dapat berinteraksi dengan berkas Flash, perlu ditambahkan action dan tombol ke dalam film Flash tersebut.

Gambar 11. Fitur-fitur Timeline

9

Menggunakan LibrarySetiap berkas Flash yang dibuat memiliki library-nya sendiri-sendiri dimana di dalam library tersebut dapat disimpan simbol-simbol atau media yang digunakan pada keseluruhan berkas Flash. Library menaungi keseluruhan media yang diimpor, misalnya foto, clipart, video dan berkas suara. Untuk membuka library di Flash dengan memilih menu Window Library, atau tekan F11. Selain itu, media yang telah dibuat di Flash dapat diubah menjadi symbol. Contohnya di Gambar 12, symbol moz1 diperlihatkan. Hal tersebut merupakan symbol tombol dimana fiturnya adalah mengeluarkan dengung nyamuk. Item di Library dapat dijalankan/digunakan sebanyak yang diketahui di sempanjang animasi. Keuntungan lain menggunakan library antara lain jika kita mengedit symbol library, maka secara otomatis tambahan update tersebut akan diberikan kepada bagian-bagian yang merupakan kumpulan dari symbol tersebut. Istilah-istilah yang digunakan dalam library sebagai berikut : Symbol merupakan nama dari setiap objek yang disimpan di dalam library. Symbol dapat digunakan berkali-kali dalam flash movie. Instance merupakan satu salinan dari sebuah symbol yang digunakan dalam flash movie. Instances dapat merupakan nama yang diberikan dalam panel property dan akan berubah saat symbol yang asli di edit.

Gambar 12. Library

10

Latihan 1. Animasi CountDown TimerSebagai latihan pertama, akan dibuat animasi Flash sederhana yaitu animasi angka yang akan menampilkan angka secara berurutan mulai dari 1 sampai dengan 5.

Gambar 13. Animasi Angka

Langkah-langkahnya sebagai berikut : 1. Buat sebuah berkas (file) baru. Dari menu File New atau langsung tekan Ctrl+N 2. Pada panel Property Inspector klik tombol Document Properties dan ubah ukuran stage-nya menjadi 300x300 pixel.

Gambar 14. Setting Document Properties

11 3. Ubah background color menjadi berwarna hitam (#000000), biarkan ukuran Frame rate tetap pada nilai 12 fps (frame per second) dan Ruler units tetap pada satuan Pixels, akhiri dengan tombol OK.

Gambar 15. Mengubah Background Color

4. Tekan tombol T pada Tools Panel untuk mengaktifkan text tool.

Gambar 16. Setting Font

5. Pada Panel Property Inspector, pilih beberapa hal sebagai berikut: a. Font : Arial Black b. Size : 200 c. Text (fill)color : putih (#FFFFFF) 6. Pilih tombol Align Center agar diperoleh teks rata tengah. 7. Ketikkan angka 1 pada area stage dan kotak hitam.

8. Pilih Frame 12 kemudian klik kanan dan pilih Insert KeyFrame.

12

Gambar 17. Membuat KeyFrame pada frame 12

9. Ubah teksnya menjadi angka 2. Pilih frame 24 kemudian klik kanan dan pilih Insert Keyframe.

Gambar 18. Membuat keyframe pada frame 24

10. Ubah teks angkanya menjadi angka 3. Pilih frame 36 lalu kemudian pilih Insert Keyframe. 11. Ubah teks angkanya menjadi 4. Pilieh fram 48 lalu kemudian pilih Insert Keyframe. 12. Ubah teks angkanya menjdai 5. Pilih frame 60 lalu kemudin pilih Inser Frame.

Gambar 19. Keseluruhan Frame

13. Tekan ENTER untuk melihat jalannya adimasi angka dari frame 1 s/d 60. 14. Simpan dengan nama Animasi Angka.

= Terima Kasih =

13 Sumber referensi : 1. 2. 3. 4. 5. 6. 7. http://id.wikipedia.org/wiki/Adobe_Flash http://en.wikipedia.org/wiki/Adobe_Flash http://www.adobe.com/designcenter/flash/articles/flacs3it_firstflash_pt1.html http://www.adobe.com/designcenter/flash/articles/flacs3it_firstflash_pt2.html http://webdevfoundations.net/flashcs3/fl1.jpg http://www.adobe.com/designcenter/flash/articles/flacs3_createfla.html Chandra, 2006, Flash Professional 8 untuk Orang Awam 7 Jam Belajar Interaktif, Maxikom, Palembang. 8. Kopelke, Kristine, tanpa tahun, Flash Classroom Tutorial Exploring the Flash CS3 Interfaces, available online at http://www.flashclasroom.com/ 9. Vogeleer, D., Wilson, E., and Barber L., 2005, Macromedia Flash Professional 8 UNLEASHED, Sams Publishing, New York.