Adobe Flash Materi

13
1 PANDUAN LATIHAN ADOBE FLASH CS3 PRO (FLASH VERSI 9.0) Introduksi Adobe 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 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, e- card, 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 Gambar 1. Logo Adobe Flash CS3

Transcript of Adobe Flash Materi

Page 1: Adobe Flash Materi

1

PANDUAN LATIHAN ADOBE FLASH CS3 PRO

(FLASH VERSI 9.0)

Introduksi Adobe 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

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, e-

card, 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

Gambar 1. Logo Adobe Flash CS3

Page 2: Adobe Flash Materi

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 CS3 Untuk 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

Gambar 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

1. Start

3. All

Programs

2. Adobe

Flash CS3

Profession

al

Page 3: Adobe Flash Materi

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

Page 4: Adobe Flash Materi

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 Professional Lingkungan kerja Adobe Flash CS3 dapat diberikan dalam gambar di bawah ini

Gambar 5. Lingkungan kerja Adobe Flash CS3

Keterangan :

1. Menu Bar.

2. Timeline.

1

2

3 4

5

6

Page 5: Adobe Flash Materi

5

3. Library Panel.

4. Stage.

5. Tools Panel / Toolbox.

6. Property Inspector Panel.

Mengenal Fasilitas yang Digunakan di Adobe Flash CS3

Tools Panel / Toolbox Tools 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

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. Gambar 7. Tools Panel

Page 6: Adobe Flash Materi

6

Stage Stage 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.

Page 7: Adobe Flash Materi

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.

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 Ruler Untuk 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.

Gambar 9. View Percentage of Stage

Gambar 10. Pembesaran dari menu View dan dari Tools Panel

Page 8: Adobe Flash Materi

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 Timeline Timeline 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

Page 9: Adobe Flash Materi

9

Menggunakan Library Setiap 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

Page 10: Adobe Flash Materi

10

Latihan 1. Animasi CountDown Timer Sebagai 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

Page 11: Adobe Flash Materi

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.

Page 12: Adobe Flash Materi

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 =

Page 13: Adobe Flash Materi

13

Sumber referensi :

1. http://id.wikipedia.org/wiki/Adobe_Flash

2. http://en.wikipedia.org/wiki/Adobe_Flash

3. http://www.adobe.com/designcenter/flash/articles/flacs3it_firstflash_pt1.html

4. http://www.adobe.com/designcenter/flash/articles/flacs3it_firstflash_pt2.html

5. http://webdevfoundations.net/flashcs3/fl1.jpg

6. http://www.adobe.com/designcenter/flash/articles/flacs3_createfla.html

7. 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.