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.

Teknik Multimedia flash Page 3

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 :

1. Buka file baru atau Ctrl+N.

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

berbeda dari warna background stage.

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

Teknik Multimedia flash Page 4

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.

Teknik Multimedia flash Page 5

10. Kemudian tekan Enter untuk melihat hasilnya.

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 :

1. Buka file baru atau Ctrl+N.

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

berbeda dari warna background stage.

Teknik Multimedia flash Page 6

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.

7. Kemudian tekan Enter untuk melihat hasilnya.

Teknik Multimedia flash Page 7

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.

Teknik Multimedia flash Page 8

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.

Teknik Multimedia flash Page 9

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.

Teknik Multimedia flash Page 10

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!

Teknik Multimedia flash Page 11

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

Teknik Multimedia flash Page 12

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.

Teknik Multimedia flash Page 13

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 .

10. Kemudian tekan Enter untuk melihat hasilnya.

Teknik Multimedia flash Page 14

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;

}

}

Teknik Multimedia flash Page 15

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.

Teknik Multimedia flash Page 16

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

Teknik Multimedia flash Page 17

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 :

Teknik Multimedia flash Page 18

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.

Teknik Multimedia flash Page 19

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 :

Teknik Multimedia flash Page 20

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

onClipEvent (enterFrame) {

if (hitTest(_root.bola)) {

_root.bola.kecepatanx = -_root.bola.kecepatanx;

}

}

MOVIE ATAS

onClipEvent (enterFrame) {

if (hitTest(_root.bola)) {

_root.bola.kecepatany = -_root.bola.kecepatany;

}

}

onClipEvent (enterFrame) {

if (Key.isDown(Key.CONTROL)) {

_x -= 10;

}

if (Key.isDown(Key.SPACE)) {

_x += 10;

}

{

atas

bawah

kiri

kanan

bola

Main

Lagi

Teknik Multimedia flash Page 21

if (this.hitTest(_root.kanan)) {

this._x -= 10;

}

{

if (this.hitTest(_root.kiri)) {

this._x -= -10;

}

}

}

}

MOVIE BAWAH

onClipEvent (enterFrame) {

if (hitTest(_root.bola)) {

_root.bola.kecepatany = -_root.bola.kecepatany;

}

}

onClipEvent (enterFrame) {

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;

}

onClipEvent (enterFrame) {

_x += kecepatanx;

_y += kecepatany;

}

BUTTON MAIN LAGI

on(release){

gotoAndPlay(1);

}

LAYER SCRIPT frame 1 dan 2

Stop();