20.07.2013 Views

Macro-Media-Flash-8-Professional-Tutorial

Macro-Media-Flash-8-Professional-Tutorial

Macro-Media-Flash-8-Professional-Tutorial

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

disusun oleh :<br />

AMäL JAMALUDIN


FLASH<br />

<strong>Macro</strong>media <strong>Flash</strong> adalah program yang sedang populer sekarang ini untuk membuat dan<br />

memanipulasi grafik dan animasi.<br />

Sekarang namanya adalah Adobe <strong>Flash</strong>, yang sebelumnya dikenal sebagai <strong>Macro</strong>media <strong>Flash</strong>.<br />

Software ini adalah salah satu program yang paling umum digunakan untuk membuat halaman web<br />

animasi, video player dan aplikasi audio streaming. File flash berekstensi .SWF atau Shockwave<br />

<strong>Flash</strong>, meskipun banyak jenis file lainnya yang dapat dilihat atau dimanipulasi dengan software ini.<br />

SEJARAH FLASH<br />

Adobe <strong>Flash</strong> (dahulu bernama <strong>Macro</strong>media <strong>Flash</strong>) adalah salah satu perangkat lunak komputer yang<br />

merupakan produk unggulan Adobe Systems. Adobe <strong>Flash</strong> digunakan untuk membuat gambar<br />

vektor maupun animasi gambar tersebut. Berkas yang dihasilkan dari perangkat lunak ini<br />

mempunyai file extension .swf dan dapat diputar di penjelajah web yang telah dipasangi Adobe<br />

<strong>Flash</strong> Player. <strong>Flash</strong> menggunakan bahasa pemrograman bernama ActionScript yang muncul<br />

pertama kalinya pada <strong>Flash</strong> 5.<br />

Sebelum tahun 2005, <strong>Flash</strong> dirilis oleh <strong>Macro</strong>media. <strong>Flash</strong> 1.0 diluncurkan pada tahun 1996 setelah<br />

<strong>Macro</strong>media membeli program animasi vektor bernama FutureSplash. Versi terakhir yang<br />

diluncurkan di pasaran dengan menggunakan nama '<strong>Macro</strong>media' adalah adalah <strong>Macro</strong>media <strong>Flash</strong><br />

8. Pada tanggal 3 Desember 2005 Adobe Systems mengakuisisi <strong>Macro</strong>media dan seluruh<br />

produknya, sehingga nama <strong>Macro</strong>media <strong>Flash</strong> berubah menjadi Adobe <strong>Flash</strong>.


PRODUK FLASH<br />

FutureSplash Animator (10 April 1996)<br />

<strong>Flash</strong> 2 (Juni 1997)<br />

<strong>Flash</strong> 3 (31 Mei 1998)<br />

<strong>Flash</strong> 4 (15 Juni 1999)


<strong>Flash</strong> 5 (24 Agustus 2000) - ActionScript 1.0<br />

<strong>Flash</strong> MX (versi 6) (15 Maret 2002)<br />

<strong>Flash</strong> MX 2004 (versi 7) (9 September 2003) –ActionScript 2.0<br />

<strong>Flash</strong> MX <strong>Professional</strong> 2004 (versi 7) (9 September 2003)


<strong>Flash</strong> Basic 8 (13 September 2005)<br />

<strong>Flash</strong> <strong>Professional</strong> 8 (13 September 2005)<br />

<strong>Flash</strong> Basic 9 & <strong>Flash</strong> <strong>Professional</strong> 9 (2006) - ActionScript 3.0<br />

Adobe <strong>Flash</strong> CS3 (2007)


Adobe <strong>Flash</strong> CS4 (2008)<br />

Adobe <strong>Flash</strong> CS5 (2010)


PENGINSTALAN<br />

Proses Instalasi<br />

Sebelum menjalankan aplikasi <strong>Macro</strong>meda <strong>Flash</strong> 8, terlebih dahulu harus dilakukan proses instalasi.<br />

Proses instalasi berarti memasang software ke dalam sistem komputer kita, agar bisa dijalankan<br />

setiap waktu. Untuk melakukan instalasi program, Anda harus memiliki CD Master <strong>Macro</strong>media<br />

<strong>Flash</strong> 8. CD master aplikasi merupakan CD sarana instalasi program ke dalam komputer kita. Jika<br />

CD master instalasi telah disiapkan, masukkan CD tersebut ke dalam CD ROM dan lakukan<br />

browsing menggunakan Windows Explorer. Untuk lebih detailnya, lakukan langkah-langkah<br />

sebagai berikut :<br />

1. Cari file Setup.exe dalam CD <strong>Macro</strong>media <strong>Flash</strong> 8, kemudian klik ganda file tersebut sehingga<br />

muncul gambar berikut :<br />

Setup Awal <strong>Macro</strong>media <strong>Flash</strong> 8<br />

2. Klik Next untuk melanjutkan proses instalasi. Akan muncul License Agreement seperti di<br />

bawah.<br />

License Agreement


3. License Agreement berisi tentang aturan-aturan lisensi yang harus disepakati oleh pengguna<br />

aplikasi ini. Jika Anda setuju dengan aturan lisensi tersebut, pilih opsi I Accept... dan klik Next.<br />

Readme Information<br />

4. Isikan folder tujuan instalasi sesuai keinginan, kemudian tekan tombol Next.<br />

Destination Folder<br />

5. Setelah muncul kotak Ready to Install… klik Next untuk melanjutkan proses.<br />

Installation Process


6. Proses instalasi akan berjalan dan tunggu sampai kotak indikator menunjukkan proses sampai<br />

dengan 100% yang menunjukkan bahwa proses instalasi telah selesai. Klik finish untuk<br />

mengakhiri program penginstalan.<br />

MENJALANKAN PROGRAM<br />

Finish<br />

Jika program <strong>Macro</strong>media <strong>Flash</strong> 8 sudah diinstal dalam komputer Anda, selanjutnya program<br />

tersebut dapat diaktifkan menggunakan Start Menu Program sebagai berikut.<br />

1. Klik menu Start -> Programs -> <strong>Macro</strong>media.<br />

2. Dari daftar pilihan yang muncul, pilih <strong>Macro</strong>media <strong>Flash</strong> 8.<br />

Start Menu Program <strong>Macro</strong>media <strong>Flash</strong> 8<br />

3. Atau dengan cara lain, Anda bisa melakukan klik ganda pada ikon <strong>Macro</strong>media <strong>Flash</strong> yang<br />

muncul pada tampilan desktop komputer Anda.


Ikon <strong>Flash</strong> 8<br />

4. Setelah klik ganda ikon <strong>Macro</strong>media <strong>Flash</strong>, selanjutnya akan muncul tampilan gambar seperti<br />

berikut:<br />

Menu Pembuka SPSS<br />

5. Secara umum tampilan yang muncul pertama kali pada aplikasi <strong>Flash</strong> seperti pada gambar di<br />

atas, menunjukkan tiga kelompok menu yang bisa dipilih, yaitu Open Recent Item, Create New,<br />

dan Create from template seperti berikut.<br />

Open Recent Item<br />

Menu tersebut digunakan untuk membuka kembali proyek-proyek yang pernah dibuat<br />

sebelumnya.<br />

Create New<br />

Bagian .Create New. digunakan untuk membuat proyek baru dengan <strong>Macro</strong>media <strong>Flash</strong>.<br />

Opsi Create New tersebut memiliki beberapa pilihan, antara lain <strong>Flash</strong> Document, <strong>Flash</strong><br />

Slide Presentation, <strong>Flash</strong> Form Application, dan sebagainya.<br />

<strong>Flash</strong> Document, digunakan jika Anda akan membuat dokumen <strong>Flash</strong> Movie.<br />

<strong>Flash</strong> Slide Presentation, digunakan jika Anda akan membuat media presentasi.<br />

<strong>Flash</strong> Form Application, digunakan untuk membuat form aplikasi seperti pendaftaran,<br />

form input data, dan sebagainya.<br />

Action Script File, digunakan untuk membuat program sebagai sarana interaktivitas objekobjek<br />

pada <strong>Flash</strong>.<br />

Create From Template<br />

Digunakan untuk membuat desain baru, tetapi menggunakan bentuk yang sudah disediakan<br />

di dalam template.<br />

6. Untuk masuk ke layar editor <strong>Flash</strong>, pilih Create New -> <strong>Flash</strong> Document dan Anda akan<br />

masuk pada tampilan layar editor <strong>Macro</strong>media <strong>Flash</strong> 8 seperti pada gambar di bawah ini.


Tampilan Utama <strong>Flash</strong><br />

7. Jika layar monitor sudah menunjukkan tampilan seperti di atas, maka proses instalasi program<br />

telah berhasil dilakukan.<br />

Ok, good luck…. ^_^


PENGENALAN DASAR FLASH<br />

STAGE Sebuah area untuk membuat animasi . Stage dpt diibaratkan seperti sebuah kanvas<br />

untuk mengkomposisi frame .frame sehingga membentuk sebuah movie. Stage merupakan<br />

daerah yang bewarna putih, dimana area kerja utama jika anda ingin membuat animasi<br />

maupun aplikasi flash lainnya. Seluruh objek/gambar/animasi yang ada di stage nantinya<br />

akan tampil di flash movie, dan sebaliknya apabila objek/gambar tersebut berada di daerah<br />

abu-abu di pinggiran Stage tidak akan terlihat di flash movie.<br />

TIMELINE PANEL sebuah panel yang digunakan untuk mengatur sebuah movie. Pada panel<br />

ini kita dapat mengatur kapan sebuah objek muncul dan kapan sebuah objek hilang. terdiri<br />

dari baris dan kolom. Kolom berhubungan dengan waktu, baris berhubungan dengan objek.<br />

Setiap software animasi pasti memliki timeline untuk mencatat aktivitas objek kapan harus<br />

tampil di stage dan kapan harus menghilang.<br />

PROPERTY INSPECTOR panel yg digunakan utk mengubah atribut-atribut objek. Tampilan<br />

property inspector selalu berubah tergantung dari objek yang kita pilih.<br />

PANEL<br />

Merupakan kumpulan kotak-kotak yang berfungsi untuk mengubah, mengatur dan<br />

mempercantik objek yang ada di stage. Misalkan memberi warna gradasi, meletakan objek<br />

persis di tengah stage, dan merotasi objek dengan sudut yang tepat.<br />

TOOLBOX Merupakan kumpulan alat gambar dan mewarnai sesuatu yang ada di stage.<br />

Tempat tool-tool yg sering digunakan utk membuat dan memodifikasi objek, membuat teks,<br />

mengolah warna, dan mengatur stage.


Toolbox<br />

TOOLBOX


Keterangan :<br />

Tool Nama Fungsi Shortcut<br />

Selection Tool Memilih dan memindahkan objek V<br />

Subselection<br />

Tool<br />

Free Transform<br />

Tool<br />

Gradient<br />

Transform Tool<br />

Mengubah bentuk objek dengan edit points A<br />

Mengubah ukuran atau memutar bentuk objek sesuai<br />

keinginan<br />

Mengubah warna gradasi F<br />

Line Tool Membuat garis N<br />

Lasso Tool Menyeleksi bagian objek yang akan diedit L<br />

Pen Tool<br />

Membuat bentuk objek secara bebas berupa dengan<br />

titik-titik sebagai penghubung<br />

Text Tool Membuat teks (kata atau kalimat) T<br />

Oval Tool Membuat objek elips atau lingkaran O<br />

Ractangle Tool<br />

Membuat objek berbentuk segi empat<br />

atau segi banyak<br />

Pencil Tool Menggambar objek secara bebas Y<br />

Brush Tool<br />

Menggambar objek secara bebas dengan<br />

ukuran ketebalan dan bentuk yang sudah<br />

disediakan<br />

Ink Bottle Tool Memberi warna garis tepi (outline) S<br />

Paint Bucket Tool Memberi warna pada objek secara bebas K<br />

Eyedropper Tool Mengambil contoh warna I<br />

Eraser Tool Menghapus objek E<br />

Hand Tool Menggeser stage H<br />

Zoom Tool Memperbesar atau memperkecil objek M atau Z<br />

Stroke Color Memberi warna pada garis/garis tepi<br />

Fill Color Memberi warna pada pada objek<br />

Option tool Mengatur fungsi tambahan dari tool yang sedang aktif<br />

Q<br />

P<br />

R<br />

B


Istilah-Istilah :<br />

ARTWORK artwork dpt berupa objek gambar vektor, gbr bitmap, teks, video, atau objek<br />

lain<br />

FRAME bagian dari animasi yg menunjukkan setiap perubahan yg terjadi<br />

ANIMASI proses bergeraknya objek atau beberapa objek dari suatu posisi ke posisi lain<br />

MOVIE hasil animasi/ serangkaian animasi dapat membentuk sebuah movie<br />

LAYER lapisan-lapisan yang memuat artwork<br />

Memanfaatkan Grid, Ruler dan guide<br />

GRID<br />

Garis- garis yang membentuk pola kotak-kotak pada stage, yang berguna untuk<br />

mempermudah membuat dan mengolah gambar.<br />

Menampilkan Grid: View- Grid>show grid.<br />

Mengedit Grid View- edit grid.


RULER<br />

Penggaris yang digunakan untuk mempermudah membuat dan mengolah gambar<br />

bentuk yang tepat.<br />

Menampilkan dan menyembunyikan RULER : View > ruler.<br />

Mengubah satuan ruler : Modify >Document.


GUIDES<br />

Adalah garis bantu yg digunakan mempermudah membuat dan mengolah gambar bentuk.<br />

Membuat guide : Klik di ruler dan tarik ke arah stage.<br />

Menyembunyikan guide : View - Guides > show guides.<br />

Menghilangkan guide : drag ke arah ruler.


TUTORIAL 1<br />

ANIMASI GERAK DENGAN PERGESERAN TEMPAT<br />

Untuk membuat animasi sebuah objek yang dapat bergerak/ bergeser dari suatu tempat ke<br />

tempat lain (ke samping , ke atas, ke bawah dan sebagainya) langkah-langkahnya sebagai<br />

berikut:<br />

1. Setelah membuat file baru, pilih Oval tool ( ) pada toolbar (atau tool yang lain<br />

sesuai bentuk objek yang akan dibuat).<br />

2. Buat sebuah lingkaran pada layar kerja.<br />

3. Pilih Selection tool ( ), kemudian double-klik pada lingkaran untuk mengaktifkan<br />

lingkaran.<br />

4. Pilih Modify > Convert to symbol<br />

5. Pada kotak dialog yang tampil isikan seperti berikut:<br />

6. Pilih OK<br />

7. Klik mouse di frame 30 pada Timeline, kemudian pilih Insert > Timeline > Keyframe<br />

atau Klik kanan mouse pilih Insert Keyframe.


8. Klik mouse pada lingkaran, kemudian geser lingkaran ke sembarang tempat ( sebagai<br />

contoh di sini digeser ke arah kanan )<br />

9. Blok pada Timeline dari frame 1 hingga frame 30.<br />

10. Pilih jendela Properties, pada pilihan Tween pilih Motion.<br />

Atau Klik kanan mouse pada Timeline pilih Create Motion tween<br />

Sekarang coba jalankan animasinya dengan cara pilih Control > Play atau tekan Enter<br />

pada keyboard<br />

Catatan :<br />

Anda dapat merubah gerakan awal dan akhir dengan cara:


TUTORIAL 2<br />

Klik mouse pada frame 1 (untuk awal gerakan) kemudian ubah letak lingkaran pada<br />

layar, dan klik mouse pada frame 30 (untuk akhir gerakan) kemudian ubah letak<br />

lingkaran.<br />

Untuk mempercepat gerakan animasi geser keyframe akhir ke kiri (30).<br />

ANIMASI GERAK DENGAN BERPUTAR<br />

Untuk membuat animasi gerak dengan berputar, lakukan langkah yang sama dengan pembuatan<br />

animasi pergeseran tempat hingga langkah ke 10.<br />

Pilih Selection tool ( ), kemudian double-klik pada lingkaran atau klik kanan mouse pada<br />

lingkaran, pilih Edit in Place.<br />

Pilih Paint Bucket Tool ( )<br />

Pilih Window > Color Mixer<br />

Pada jendela Color Mixer pilih Radial pada pilihan Type


Kemudian arahkan kursor ke lingkaran (jangan ditengah-tengah) dan klik mouse. Catatan:<br />

Langkah di atas bertujuan agar saat lingkaran diputar terlihat gerakkannya.<br />

Tutup jendela lingkaran dan kembali ke jendela Scene 1 dengan cara klik pada tab Scene 1.<br />

Kemudian klik frame 30 pada Timeline.<br />

Pilih Modify > Transform > Rotate and Scale<br />

Pada jendela Scale and Rotate isi kolom Rotate dengan 180 (angka ini menunjukkan berapa<br />

derajat objek akan berputar)<br />

Pilih OK Jalankan animasi<br />

Catatan:<br />

Untuk membuat animasi yang dapat bergerak berputar sambil membesar atau mengecil, Anda<br />

dapat mengisikan nilai Scale dan Rotate secara bersamaan pada jendela Scale and Rotate.


TUTORIAL 3<br />

ANIMASI PERUBAHAN BENTUK<br />

Buat sebuah file baru.<br />

Dengan menggunakan Oval Tool ( ) buatlah sebuah bentuk oval.<br />

Klik di frame 40 pada timeline, klik kanan mouse pilih Insert Blank Keyframe.<br />

Di posisi frame ke-40, buatlah sebuah persegi.<br />

Klik mouse pada bagian tengah timeline, pilih jendela Properties, pada opsi Tween pilih Shape.<br />

Jalankan animasi.<br />

Untuk memperoleh animasi yang gerakannya lebih teratur, dapat digunakan Shape Hints.<br />

Sebagai contoh dapat dipraktekkan pada animasi yang baru saja kita buat.<br />

Klik mouse pada frame pertama.<br />

Pilih Modify > Shape > Add Shape Hint, akan muncul bulatan kecil berwarna merah.


Ulangi sebanyak tiga kali kemudian drag masing- masing titik a, b, c, d sesuai gambar.<br />

Klik mouse pada frame terakhir.<br />

Pindahkan masing-masing titik a, b, c dan d, sesuai gambar. Titik akan berubah menjadi hijau.<br />

Klik kembali mouse pada frame pertama. Dapat dilihat bahwa titik berubah menjadi kuning,<br />

artinya, Shape Hint telah berhasil.


Jalankan animasi.<br />

TUTORIAL 3<br />

MEMBUAT ANIMASI SEDERHANA DENGAN PERMAINAN KEYFRAME<br />

Langkah 1<br />

Buka Program <strong>Flash</strong><br />

Lalu pilih new... <strong>Flash</strong> Document<br />

Langkah 2<br />

Menentukan besarnya STAGE<br />

Caranya:<br />

1. Klik Size pada Properties<br />

2. Akan Muncul Document Properties<br />

Atur dimensions:<br />

disini saya menggunakan 300 x 200 px<br />

3. Tekan OK


Langkah 3<br />

1. Tekan R pada keyboad lalu gambar kotak di Stage<br />

2. Lakukan pewarnaan dengan menekan V pada keyboard dan klik kotak lalu pilih Fill yang ada<br />

tanda nomor 2 di gambar<br />

3. Pilih warna disini saya menggunakan warna biru dongker dengan nilai hexadecimal #000066<br />

Langkah 4<br />

Tekan T pada keyboard untuk menggunakan Text Tool lalu ketik terserah namun disini saya<br />

mengeti huruf "F"


Langkah 5<br />

Lihat Kotak Timeline<br />

Di situ kita akan bermain... ;P<br />

Baiklah sekarang tekan F5 pada keyboard... hasilnya frame akan bertambah<br />

hal ini untuk mengatur ritme dari animasi<br />

OK tekan sebanyak 5 X<br />

Hasilnya:<br />

lalu Tekan F6 pada keyboard... hasilnya key Frame (untuk animasi) akan muncul<br />

jika sudah tambahkan huruf pada stage


Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan FLASH


TUTORIAL 4<br />

Animasi Shine - Mobil Mengkilap Bercahaya.<br />

Langkah - Langkahnya:<br />

1. Masukkan (import) gambar ke dalam stage<br />

misalnya gambar mobil seperti gambar di bawah ini<br />

2. Setelah gambar berada pada stage, atur besarnya stage sesuai dengan ukuran gambar yang telah<br />

di import tadi misalnya 500 px (width) dan 315 px (height)


3. Ganti nama layer1 menjadi mobil<br />

4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek.<br />

5. Klik icon rectangle tool ( tekan huruf R di keyboard ), kemudian gambar persegi panjang<br />

melebihi gambar mobil, seperti gambar di bawah ini.<br />

6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna persegi panjang<br />

seperti gambar di bawah ini


7. Kemudian untuk mendapatkan efek cahaya yang mengkilap, lakukan pengaturan warna persegi<br />

panjang seperti gambar di bawah ini<br />

8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan satu layer lagi,<br />

kemudian ganti nama layer tersebut dengan animasi<br />

9. Masih di layer animasi kill icon Pen tool


10. Kemudian buatlah bagian yang akan dianimasikan misalnya seperti gambar di bawah ini.<br />

11. Setelah area yang dianimasikan selesai dibuat, maka langkah selanjutnya yaitu klik kanan pada<br />

layer animasi pilih menu mask


12. Klik frame 30 pada setiap layer, kemudian tekan F6 untuk memberikan insert keyframe<br />

13. Klik kanan antara frame 1 – 30 pada layer efek, kemudian pilih menu create motion tween<br />

14. Klik frame 30 pada layer efek, kemudian pindahkan gambar persegi panjang ke sebelah kanan<br />

dari gambar mobil, seperti gambar di bawah ini<br />

15. Tekan ctrl + enter untuk melihat hasilnya…


DAFTAR PUSTAKA<br />

1. http://vhiie-threeya-blogs.blogspot.com/2009/05/pengenalan-macromedia-flash-8.html<br />

2. http://fakhri9.wordpress.com/2009/10/24/tutorial-1-%E2%80%93-pengenalan-dasar-<br />

macromedia-flash-8/<br />

3. http://www.guidebookgallery.org/splashes/flash<br />

4. http://www.ilmugrafis.com<br />

5. http://eng.wikipedia.org/adobe_flash<br />

AMäL JAMALUDIN<br />

amal_tuqeeck99@yahoo.com

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!