Tutorial Animasi menggunakan macromedia Flash 8

Teknik Multimedia flash Page 2
ANIMASI FRAME TO FRAME
Animasi ini adalah jenis animasi yang paling banyak memakan kapasitas file dan
memori, karena itu lebih baik penggunaan animasi ini hendaknya diminimalis. Animasi
frame per frame menuntut banyak gambar yang harus dibuat. Efek animasi diciptakan
dengan mengganti gambar yang satu dengan gambar yang lain selama beberapa waktu..
Semua gambar yang bergerak dihasilkan dari gambar yang berbeda-beda tiap framenya.
Karena animasi frame per frame harus memiliki gambar yang unik tiap framenya maka
animasi frame per frame sangat ideal untuk membuat animasi yang kompleks yang terdiri
dari banyak perubahan seperti ekspresi wajah.
Membuat animasi frame per frame
Di bawah ini akan ditunjukkan proses pembuatan animasi frame per frame :
1. Buka file baru atau Ctrl+N.
2. Kemudian kita pilih Rectangle Tool (R) pada toolbox dan kita mulai membuat objek
balok pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus
berbeda dari warna background stage.
3. Kemudian klik kanan di frame ke-1, pilih Insert Keyframe atau tekan F6, maka akan
muncul frame ke-2.
4. Pada frame ke-2 kita pilih Free Transform Tool (Q), kemudian kita putar balok sedikit
ke kanan dan letaknya dirubah sedikit kebawah dengan meneka tombol Shift + Panah
bawah satu kali.

5. Kemudian masukan kembali KeyFrame hingga menjadi tiga frame, kemudian putar
kembali balok sedikit ke kanan dan sedikit kebawah.
6. Ulangi langkah di atas sampai frame 8 hingga balok tampak jatuh.
7. Kemudian tekan Enter untuk melihat hasilnya.
ANIMASI MOTION GUIDE
Animasi motion guide adalah animasi yang mempunyai gerakan sesuai dengan jalur yang
kita buat. Animasi ini merupakan lanjutan dari animasi motion tween. Animasi ini sangat
cocok digunakan untuk jenis animasi yang membutuhkan ketelitian dalam pergerakan
yang dikehendaki atau sesuai keinginan pembuat animasi.
Membuat animasi motion guide
Di bawah ini akan ditunjukkan proses pembuatan animasi motion guide :
2. Kemudian kita pilih Oval tool (O) pada toolbox dan kita mulai membuat objek
lingkaran pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus
3. Kemudian klik kanan di frame ke-1, pilih Create motion tween.
4. Pada frame ke-10 klik kanan kita pilih Insert Keyframe, kemudian kita geser lingkaran

ke kanan sehingga tampak seperti pada gambar.
5. Kemudian klik kanan layer 1 kemudian pilih Add Motion Guide, maka akan muncul
layer baru seperti tampak pada gambar.
6. Kemudian dengan layer guide masih terseleksi kita pilih Pencil Tool untuk membuat
jalur yang akan menjadi lintasan animasi dari lingkaran.
7. Agar objek lingkaran dapat bergerak sesuai jalur, maka tengah objek haruslah berada
di tengah jalur.
8. Oleh karena itu, klik frame 1 layer 1, Kemudian pilih Free Transform Tool agar
bulatan tengah objek terlihat. Kemudian pindahkan objek sampai lingkaran tengah objek
berada di ujung awal jalur.
9. Kemudian klik frame 40 layer 1, Kemudian pilih Free Transform Tool agar bulatan
tengah objek terlihat. Kemudian pindahkan objek sampai lingkaran tengah objek berada
di ujung akhir jalur.

Catatan : dalam Motion Guide, tengah objek harus berada di tengah (jalur).
TWEENING
Ini adalah tutorial dasar mengenai animasi di flash yaitu tweening. Tweening ada 2 jenis
yaitu Tweening Motion dan Tweening Shape. Tweening Motion adalah animasi objek
yang bergerak (motion) sedangkan Tweening Shape adalah animasi objek yang
berdasarkan bentuk (shape). Langsung saja kita mulai pestanya ..
1. Animasi Motion Tween
Animasi motion tween digunakan apabila kita ingin membuat gerakan animasi yang
teratur. Animasi ini sangat mengurangi waktu karena kita tidak perlu membuat animasi
secara frame per frame. Sebaliknya Anda hanya membuat frame awal dan frame akhir
saja. Dua alasan utama mengapa Animasi motion tween sangat baik yaitu karena
mengurangi pekerjaan mengambar dan meminimalkan ukuran file karena isi dari setiap
frame tidak perlu disimpan.
Membuat animasi motion tween
Di bawah ini akan ditunjukkan proses pembuatan animasi motion tween :
2. Kemudian kita pilih Oval tool (O) pada toolbox dan kita mulai membuat objek
lingkaran pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus

3. Kemudian klik kanan di frame ke-1, pilih Create motion tween.
4. Pada frame ke-10 klik kanan kita pilih Insert Keyframe, kemudian kita geser lingkaran
ke kanan sehingga tampak seperti pada gambar.
5. Kemudian pada frame ke-20 klik kanan kita pilih Insert Keyframe, kemudian kita geser
lingkaran ke bawah sehingga tampak seperti pada gambar.
6. Kemudian pada frame ke-30 klik kanan kita pilih Insert Keyframe, kemudian kita geser
lingkaran ke kiri sehingga tampak seperti pada gambar.

2. Animasi Shape Tween
1. Buat file baru di flash. Di stage buat sebuah objek misalnya lingkaran. Bentuk
lingkaran ini menjadi posisi awal animasi twening.
2. Menentukan kondisi akhir yang berada dalam keyframe lain,klik kanan frame 20 dan
pilih insert keyframe untuk membuat keyframe baru
3. Di dalam frame 20 hapus linkaran yang ada dan buat objek lain. Di sini saya membuat
kotak/persegi.

4. Klik salah satu frame antara frame 1 dan 20.dan perhatikan bahwa objek masih
berbentuk lingkaran
5. Dari panel properties,aktifkan Tween:Shape
6. Perhatikan bahwa di frame 1-20 akan muncul panah dan frame ditandai dengan warna
hijau. Objek yang ada di stage tidak lagi lingkaran tapi perpaduan antara lingkaran dan
kotak.

7. Untuk melihat hasil animasinya kita menekan Ctrl+Enter,maka akan terlihat lingkaran
yang sedikit demi sedikit menjadi kotak
3. Menggabungkan Animasi Motion Tween dan Shape
Tween
1. Kita akan membutuhkan 2 buah objek
dan 3 buah layer. Layer disini prinsipnya
sama seperti photoshop. Layer pertama
adalah background (optional), kemudian
layer kedua adalah tweening motion, dan
ketiga adalah tweening shape.

2. Setelah membuat layer yang diperlukan,
pilih layer background dan buat sembarang
background untuk animasi kalian. Lalu
pilih layer tweening motion dan buat objek
pertama untuk tweening motion. yaitu
lingkaran. Lingkaran ini diberi garis
sehingga tampak seperti gambar disamping.
3. Ubah lingkaran tersebut menjadi sebuah
“Symbol”. Caranya blok semua lingkaran
tersebut beserta garisnya lalu tekan F8. Beri
nama “Symbol 1″. Mengapa harus
dijadikan simbol karena untuk membuat
Tweening Motion objeknya haruslah benar-
benar sama sehingga harus dijadikan
simbol.
4. Lalu klik frame ke-60 di layer twening
motion. Lalu klik kanan, pilih insert key
frame. Ini akan membuat animasi yang
akan dijalankan berdurasi 5 detik karena
secara default kecepatan animasi adalah 12
frame per detik. Setelah itu klik kanan pada
frame ke 60 di layer background di pilih
insert key frame. Maka susunan frame akan
terlihat seperti ini.
5. Pindahkan “Symbol 1″ ke tempat yang
berbeda dari tempat awal. Sekarang apabila
kalian klik frame 1 dan menekan enter
kalian akan melihat “Symbol 1″ diam di
tempat lalu tiba-tiba pindah ke tempat lain.
Gerakan ini yang akan kita buat lebih halus
yaitu dengan Motion Tween. Klik salah
satu frame diantara frame 1 dan 60 namun
tetap di layer tweening motion. Lihat ke
bawah, di bawah ada pilihan Tween : …
Pilih Motion. Rotate : CW , 1 times.
Maksudnya adalah kita akan membuat
animasi gerak dengan objek diputar searah
jarum jam satu kali. Lihat hasilnya dengan
klik di frame 1 lalu tekan enter!

6. Sekarang bagian Tweening Shape. Untuk
tweening shape kita tidak perlu merubah
objek menjadi simbol. Disini aku akan
menggambar wajah pria di awal frame lalu
wajah wanita di akhir frame. Lihat gambar!
Semuanya dikerjakan di layer Tweening
Shape!
7. Klik salah satu frame antara 1 dan 60 lalu
pilih Tween : Shape. Pilih Ease : -100.
Maksudnya adalah kita akan membuat
animasi bentuk wajah dengan kecepatan
yang pelan diawal lalu makin cepat diakhir.
Makin rendah nilai ease maka animasi akan
makin berjalan lambat pada awalnya. Lihat
hasilnya dengan klik frame satu lalu tekan
enter.
8. Itu adalah dua pengetahuan animasi dasar
pada flash, kalian bisa menyimpan animasi
yang kalian buat dalam bentuk .gif atau
.swf. Caranya klik File > Export > Export
Movie. Lalu pilih format yang kalian
inginkan.
Mudah bukan kalian dapat mencobanya sendiri dan mengembangkannya sesuai
kreatifitas kalian.
ANIMASI MASKING
Animasi masking adalah animasi yang pada intinya menampilkan objek yang semula kita
sembunyikan. Animasi masking mempunyai 2 metode dasar yaitu :
1. Area masking yang bergerak, objek yang di mask diam.
2. Area masking yang diam dan objek yang di mask yang bergerak.
Kedua teknik tersebut akan menampilkan hasil animasi yang berbeda.. Selain itu area
masking hanya boleh berupa fill. Jadi untuk outline (garis) tidak diperbolehkan.
Membuat animasi masking
Di bawah ini akan ditunjukkan proses pembuatan animasi masking :
1. Buka file baru atau Ctrl+N.2. Disini kita akan berkerja dengan area background

berwarna hitam, jadi pada properties.kita ubah dulu warna background menjadi warna
hitam
3. Kemudian buat dua buah layer.dengan nama layer “text” yaitu layer yang di mask dan
layer “masked” yaitu layer masking.
4. Pada layer text frame ke-1 buat sebuah tulisan “ANIMASI MASKING” dengan warna
putih seperti pada gambar.
5. Kemudian klik kanan frame 50 pada layer text dan pilih Insert Frame.
6. Pada layer masked frame ke-1, buat sebuah lingkaran berbentuk elips berwarna hitam,
letakkan di samping kiri dari stage.

7. Pada layer masked frame ke-50 klik kanan pilih Insert Keyframe. Lalu ubah posisi
lingkaran elips ke samping kanan stage.
8. Pada layer masked frame ke-1 klik kanan pilih Create Motion Tween.
9. Pada layer masked, klik kanan pilih mask .

MEMBUAT NAVIGASI KEYBOARD SEDERHANA
Pada dasarnya tutorial ini dapat dikembangkan untuk membuat sebuah permainanatau game
yang sederhana. Mungkin Anda pernah melihat atau bahkan Anda sudahpernah bermain
game pesawat tempur, untuk menggerakkan pesawat tempur tersebutkita dapat menggunakan
tombol navigasi anak panah yang ada di dalam keyboard.
Tombol anak panah atas, bawah, kiri dan kanan dipakai untuk mengendalikan gerakpesawat.
Tentu Anda bertanya apa sulit untuk membuat navigasi denganmenggunakan keyboard?
Tentu tidak karena Flash telah menyediakan printah-printahpraktis untuk menggerakkan
gambar atau objek apa saja lewat tombol-tombol pada
keyboard.
Berikut langkah-langkah membuat navigasi sederhana dengan menggunakan anak
panah pada keyboard.
1. Buka halaman Flash dan buat 1 buah layer dengan nama layer navigasi
2. Pada layer navigasi klik file>inport>import to library pilih objek yang akan dijadikan
navigasi utama.
3. Klik pada objek yang dijadikan objek navigasi kemudian tekan F9 dan ketikan script di
bawah ini :
onClipEvent (enterFrame) {
if(Key.isDown(Key.UP)) {
this._y -=10;
}
if(Key.isDown(Key.DOWN)) {
this._y +=10;
}
if (Key.isDown(Key.RIGHT)) {
this._x +=10;
}
if (Key.isDown(Key.LEFT)) {
this._x -=10;
}
}

4. Tekan Ctrl+enter untuk melihat hasil
MEMBUAT TOMBOL NAVIGASI SEDERHANA
Pada tutorial kali ini kita akan membahas mengenai bagaimana membuat tombol
navigasi, ngerti kan apa itu tombol navigasi? Tombol navigasi itu berfungsi agar
pengguna dapat berinteraksi dengan movie flash yang kita buat. Misalkan mereka ingin
pergi kebagian tertentu, kita sebagai pembuat telah menyediakan navigasi yang berupa
tombol untuk mereka klik.Langsung saja
1. Buka program flash tentunya, setelah itu buat file baru dengan properties tertentu,
saya pakai ukuran 800x600.

2. Pada frame 1 buat teks dengan Teks Tool dan propertisnya teks statis bertuliskan
“Home”.
3. Klik frame 1, kemudian ganti “Frame label” dengan “home” setelah itu tekan
Enter.
4. Klik kanan frame 10 pilih Insert Blank Keyframe, kemudian buat teks statis
“Materi”. Klik lagi frame 10 dan ganti “Frame label” dengan “materi” dan tekan
Enter.
5. Buat lagi seperti langkah no. 4 diatas pada frame 20 dengan teks statis bertuliskan
“Latihan” dan “Frame label” diganti dengan “latihan”, kemudian pada frame 30
dengan teks statis bertuliskan “Contoh” dan “Frame label” diganti dengan
“contoh”.
6. Buat layer baru dan beri nama layer dengan nama “tutup” dengan cara klik dua
kali pada tulisan “Layer 2”. Kemudian klik frame satu layer “tutup” dan buat teks
statis “Tutup”.

7. Kemudian klik kanan pada tulisan “Tutup” pilih Convert to Symbol pilih type
button dan beri nama “tutup_btn” dan klik ok.
8. Buat layer baru lagi dan beri nama “tombol”.
9. Klik pada frame satu layer “tombol “ kemudian import tobol dari panel
Component. Caranya adalah dengan klik Windows kemudian pilih components.
Dari panel Componens pilih User interface kemudian pilih button. Kemudian
drag(klik tanpa dilepaskan) dan geser kedalam stage.
10. kemudian tutup panel Components dan rubah Instance name dari keempat button
tersebut masing masing “home_btn”, “materi_btn”, “latihan_btn”, “contoh_btn”
dan lebelnya masing masing “home”, “materi”, “latihan”, “contoh” dengan cara
klik satu persatu dan merubahnya pada panel parameters.
11. Buat layer baru lagi dan rubah namanya “skrip”, klik pada frame pertama dan
buka jendela Actions kemudian masukan Action Script di bawah ini :
stop()
home_btn.onPress = function(){
gotoAndStop("home");
}
materi_btn.onPress = function(){
gotoAndStop("materi");
}
latihan_btn.onPress = function(){
gotoAndStop("latihan");
}
contoh_btn.onPress = function(){
gotoAndStop("contoh");
}
12. Kemudian klik kanan tombol tutup dan pilih Actions dan masukan Action Script
di bawah ini :

on(release){
fscommand("quit","true");
}
13. Langkah terakhir adalah menyimpan dokumen, beri nama Tombol navigasi.
14. Kemudian Klik Ctrl+Enter. Dan lihat hasilnya pada tempat dimana kita
menyimpannya, selesai.

IMPLEMENTASI MULTIMEDIA DALAM BENTUK GAME SEDERHANA
TEKNIK MULTIMEDIA FLASH
MEMBUAT GAME BOLA TEKTOK SEDERHANA
DENGAN FLASH
1. Buka program macromedia flash 8, ubah ukuran default menjadi 500x400 px
2. Pada layer 1 rubah nama menjadi button, kemudian tambahkan object button beri
nama mulai pada frame pertamanya. (untuk desain button silahkan buat sesuai
selera).
3. Tambahkan layer baru beri nama batas, pada frame ke-2 (tambah blank keyframe)
selanjutnya sisipkan 2 buah objek persegi panjang dengan menggunakan
rectanggle tool kemudian convert menjadi movie dan beri nama kiri dan kanan
( termasuk instance name).
4. Tambahkan layer kembali beri nama bola, pada frame ke-2 (tambah blank
keyframe) dengan menggunakan oval tool buatlah lingkaran kemudian convert
menjadi movie dan beri nama bola( termasuk instance name).
5. Tambahkan 2 layer beri nama player1 dan player 2, kemudian pada frame ke-2
(tambah blank keyframe) tambahkan objek kotak convert menjadi movie dan beri
nama atas dan Bawah untuk masing-masing layernya (termasuk instance name).
6. Kembali pada layer button pada frame ke-2 tambahkan button main lagi.
7. Dan tahap terakhir untuk persiapan pembuatan game ini tambahkan layer baru
beri nama script.
Sehingga hasil dari rancangan nya sebagai berikut :

GAMBAR PADA LAYER BUTTON FRAME PERTAMA
GAMBAR PADA MASING MASING LAYER FRAME KE-2
SCRIPT PROGRAM
 BUTTON PLAY
on (release){
gotoAndPlay(2)
}
 MOVIE KIRI dan KANAN
if (hitTest(_root.bola)) {
_root.bola.kecepatanx = -_root.bola.kecepatanx;
}
}
 MOVIE ATAS
_root.bola.kecepatany = -_root.bola.kecepatany;
}
}
if (Key.isDown(Key.CONTROL)) {
_x -= 10;
}
if (Key.isDown(Key.SPACE)) {
_x += 10;
}
{
atas
bawah
kiri
kanan
bola
Main
Lagi

if (this.hitTest(_root.kanan)) {
this._x -= 10;
}
{
if (this.hitTest(_root.kiri)) {
this._x -= -10;
}
}
}
}
 MOVIE BAWAH
_root.bola.kecepatany = -_root.bola.kecepatany;
}
}
if (Key.isDown(Key.LEFT)) {
_x -= 10;
}
if (Key.isDown(Key.RIGHT)) {
_x += 10;
}
{
if (this.hitTest(_root.kanan)) {
this._x -= 10;
}
{
if (this.hitTest(_root.kiri)) {
this._x -= -10;
}
}
}
}
 MOVIE BOLA
onClipEvent (load) {
kecepatanx = 20;
kecepatany = 20;
}
_x += kecepatanx;
_y += kecepatany;
}
 BUTTON MAIN LAGI
on(release){
gotoAndPlay(1);
}
 LAYER SCRIPT frame 1 dan 2
Stop();

Tutorial Animasi menggunakan macromedia Flash 8

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Tutorial Animasi menggunakan macromedia Flash 8

Similar to Tutorial Animasi menggunakan macromedia Flash 8 (20)

More from Farichah Riha

More from Farichah Riha (20)

Recently uploaded

Recently uploaded (20)

Tutorial Animasi menggunakan macromedia Flash 8