Macro-Media-Flash-8-Professional-Tutorial
Macro-Media-Flash-8-Professional-Tutorial
Macro-Media-Flash-8-Professional-Tutorial
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