kata pengantar 2

KATA PENGANTAR

P
enggunaan komputer sebagai media interaktif ternyata mampu
menutupi kelemahan teknik presentasi konvensional, keterbatasan
visualisasi, animasi dan aplikasi web interaktif.dengan kemampuan
yang mendekati sempurna, komputer sebagai media interaktif sangat
membantu para pengguna komunikasi visual, web master dan animator dalam
menggambarkan dan menghasilkan animasi yang professional.
Salah satu aplikasi yang banyak dimanfaatkan para animator untuk membuat
animasi dan media interaktif adalah macromedia Flash. Di antara program-
program animasi, program macromedia Flash merupakan program yang
paling fleksibel dalam pembuatan animasi, seperti Animasi Interaktif,
Presentasi, Company Profile, Game, Web Site, E-Card, Aplikasi Multimedia
hingga Aplikasi Ponsel.

Semoga buku ini memiliki arti bagi pengembangan ilmu.

Belik, April 2010

Khaerul Nurchiyan
kata pengantar 3

BAB I

MENGENAL MACROMEDIA FLASH PRO 8

MEMBUAT DOKUMEN FLASH
Untuk membuat dokumen baru ikuti langkah-langkah sebagai berikut:
1. Pilih Start > All Programs> Macromedia> Maromedia Flash 8
maka akan muncul jendela new document sebagai berikut.

2. Pilih Flash Document maka akan ditampilkan area kerja flash sebagai
berikut.

3. Selanjutnya aturlah docement flash melalui panel properties.

Mengatur kecepatan animasi
Mengatur warna background
Mengatur ukuran stage
kata pengantar 4

4. Untuk menampilkan ruler klik menu View > Rulers atau tekan tombol
ctrl+alt+shift+R pada keyboard. Skala pada ruler sesuai dengan
pengaturan ukuran stage yang Anda lakukan.
5. Untuk menampilkan grid klik menu View > Grid > Show Grid.
Maka akan ditampilkan tanda cek pada show grid dan jika Anda ingin
membuang atau tidak menampilkan grid, hilangkan tanda cek pada
pilihan show grid.

TOOLBOX DALAM MACROMEDIA FLASH PRO 8

Toolbox menampilkan beberapa piranti yang digunakan untuk membuat objek seni,
mewarnai, mengedit dan masih banyak lagi. Berikut beberapa fungsi dan macam tool
di macromedia Flash

Tool Nama Shortcut Fungsi

Selection V Untuk menyeleksi objek

Subselecti A Untuk menyeleksi tepi objek dan

on memodifikasinya
Free Q Untuk mengubah ukuran dan memutar
Transfor objek dengan bebas
m
Lasso L Untuk menyeleksi bagian yang
diinginkan
Pen P Untuk menggambar objek path

Text T Untuk menulis teks

Line N Untuk menggambar garis lurus
Rectangle R Untuk menggambar objek kotak
kata pengantar 5

Tool Nama Shortcut Fungsi

Oval O Untuk menggambar objek oval

Polystar - Untuk menggambar objek polygon dan

bintang
Pencil Y Untuk menggambar dengan bentuk
coretan pensil
Brush B Untuk menggambar dan mewarnai
Paint K Untuk mewarnai bidang objek tertutup
Bucket
Ink Bottle S Untuk mewarnai garis

Eyedropp I Untuk mengkopi warna, baik warna

er garis maupun warna bidang
Eraser E Untuk menghapus objek
Hand H Untuk memindah posisi stage

Zoom M Untuk mengubah ukuran stage

Stoke - Untuk menentukan warna garis pada
Color objek
Fill Color - Untuk menentukan warna dasar pada
objek
Swap - Untuk menukar warna bidang dengan
Color warna garis
Panel Shift+F9 Untuk membuat warna
Warna

TIMELINE
Timeline adalah panel untuk mengatur dan mengontrol jalannya animasi.
Dalam jendela Timeline terdapat pilihan pengaturan kecepatan jalannya
animasi. Masukkan nilai pada frame rate. Semakin besar nilai yang Anda
masukkan maka akan semakin lambat animasi yang berjalan. Jendela Timeline
berisi Layer, Frame, Blank Keyframe dan Keyframe. Berikut adalah contoh
timeline sebuah animasi yang telah jadi.
kata pengantar 6

Timeline header
Playhead
Frame View pop-up menu

Layer masking

Empty keyframe
Layer guide
Frame

Menghapus layer

Emplased time indicator

Animasi frame by frame

Add folder
Frame rate indicator
Animasi tween

Add layer

MENGIMPORT FILE GAMBAR

Macromedia flash pro 8 mendukung berbagai macam format gambar seperti
bmp, jpg, gif, tif, png, wmf, ai, fh, Untuk mengimport gambar Anda tinggal
menekan tombol Ctrl + R atau klik File > Import > Import to Stage atau
Import to Library. Kemudian muncul kotak dialog Import, dan beberapa
pilihan menu diantaranya adalah:
 Import to Stage : jika Anda menggunakan perintah ini maka gambar
yang Anda import akan muncul pada stage dan masuk dalam panel
library.
kata pengantar 7

 Import to Library : jika Anda menggunakan perintah ini maka

gambar yang Anda import hanya akan masuk dalam library tetapi tidak
muncul dalam stage.
kata pengantar 8

BAB II

BEKERJA DENGAN GAMBAR DAN TEKS

MENGGUNAKAN RECTANGLE TOOL
1. Klik Rectangle Tool
2. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari
objek yang akan Anda buat.
3. Drag pointer mouse di dalam stage untuk membuat bentuk kotak.
Tekan shift jika Anda ingin membuat kotak bujur sangkar atau kotak
dengan sisi yang sama panjang. Hasilnya akan tampak seperti pada
Gambar berikut.

MENGGUNAKAN OVAL TOOL

1. Klik Oval Tool
2. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari
objek yang akan Anda buat.
3. Drag pointer mouse di dalam stage untuk membuat bentuk kotak.
Tekan shift jika Anda ingin membuat lingkaran dengan bentuk yang
proporsional. Hasilnya akan tampak seperti pada Gambar berikut.
kata pengantar 9

MENGGUNAKAN POLYSTAR TOOL

1. Klik Polystar Tool .
2. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari
objek yang akan Anda buat.
3. Klik tombol Option pada Properties sehingga akan muncul kotak
dialog Tool Settings seperti pada Gambar 3.7.

Pada kotak dialog Tool Settings akan tampil option , yaitu:

 Style menyediakan dua bentuk objek yaitu polygon dan Star.
Anda dapat memilihnya untuk membuat objek yang Anda
inginkan.
 Number of sides digunakan untuk mengatur jumlah sisi dari
objek yang akan Anda buat.
 Star point size digunakan untuk mengatur ketajaman sudut
pada objek bintang. Senakin kecil nilai yang nda masukkan maka
akan semakin tajam sudut yang dikasilkan.
4. Jika Anda langsung membuat objek tapa melakukan setting terlebih
dahulu maka objek yang dihasilkan akan sesuai setingan secara default
yaitu setingan dengan bentuk polygon bersisi 5.
5. Drag pointer mouse di dalam stage untuk membuat objek sesuai
setting yang sudah Anda lakukan.

MENGGUNAKAN LINE TOOL

1. Klik Line Tool .
2. Tentukan warna garis (Stroke Color) dari objek yang akan Anda buat.
kata pengantar 10

3. Drag pointer mouse di dalam stage untuk membuat garis. Hasilnya

akan tampak seperti pada Gambar berikut.

4. Untuk membuat garis lengkung, klik Selection Tool dan arahkan

pointer mouse tepat pada garis hingga pointer mouse berubah bentuk
seperti terlihat pada Gambar berikut.

5. Klik dan geser ke arah yang Anda inginkan sehingga garis lurus
tersebut berubah menjadi garis lengkung. Perhatikan Gambar beriukut.

MENGGUNAKAN PENCIL TOOL

1. Klik Pencil Tool
2. Tentukan Pencil Mode seperti Straghten untuk membentuk garis lurus, Smooth
untuk membentuk garis halus, Ink untuk membentuk garis sesuai yang kita buat.
3. Buat garis sesui keinginan Anda. Hasilnya akan tampak seperti pada Gambar
berikut.
sraighten
Smooth
Ink
kata pengantar 11

MENGOLAH OBJEK
MENGGUNAKAN OBJEK DRAWING
Objek drawing mode digunakan untuk membuat objek tanpa mempengaruhi
objek yang lain. Objek yang dibuat menggunakan objek drawing tidak dapt
langsung diedit karena objek bukan berupa objek vektor sehingga untuk
mengeditnya Anda harus mengklik dua kali objek tersebut sehingga Anda
akan masuk dalam stage objek drawing. Berikut adalah contoh penggunaan
objek drawing mode.
1. Pilih salah satu Tool untuk menggambar pada Tools. Misalnya adalah
Polystar Tool.
2. Aktifkan Object Drawing pada Tools atau Anda dapat menggunakan
shortcut yaitu dengan menekan tombol J pada keyboard.
3. Buat dua objek yang saling bersinggungan pada stage.
4. Non aktifkan Objek Drawing Tools kemudian buat dua objek yang
saling bersinggungan pada stage. Perhatikan
Objek dengan mengaktifkan objek drawing
Objek tanpa mengaktifkan objek drawing

5. Klik objek yang berada di atas kemudian pindahkan sehingga hasilnya

akan terlihat seperti pada Gambar berikut.
Objek dengan mengaktifkan objek drawing
Objek tanpa mengaktifkan objek drawing
kata pengantar 12

6. Perhatikan hasilnya dan amati perbedaan antara objek dengan

mengaktifkan objek drawing dengan objek yang tidak mengaktifkan
objek drawing.

MENDUPLIKAT OBJEK
Namun jika Anda ingin menduplikat sebagian objek saja, Adobe Flash CS4
Profesional menyediakan berbagai cara untuk menduplikat suatu objek.
Perhatikan langkah-langkah berikut ini untuk menguasai teknik-teknik
menduplikat objek.
1. Aktifkan Selection Tool lalu pilih objek yang ingin diduplikat.

2. Untuk menduplikat objek tekan tombol Ctrl+D. Hasilnya terlihat pada

Gambar 2.29.
Objek asli
Duplikat objek
kata pengantar 13

3. Anda juga dapat melakukan duplikat dengan cara memilih objek

sambil menahan tombol Ctrl kemudian drag objek ke posisi yang
Anda inginkan.

4. Lepaskan tombol mouse. Hasil duplikat objek akan terlihat seperti

gambar berikut.
Objek asli
Duplikat objek

MEMBUAT OBJEK TEKS

Adobe Flash CS4 Profesinal menyediakan fitur untuk membuat dan mengolah
objek teks. Sebelum membuat objek teks Anda perlu mengatur dulu tipe teks
yang akan Anda gunakan. Caranya mudah Anda hanya perlu memilih tipe teks
pada properties. Perhatikan langkah-langkah berikut untuk membuat suatu
objek teks.
1. Klik Teks Tool pada Tools atau tekan tombol T untuk
mengaktifkan teks tool.
2. Atur tipe teks yang ingin Anda buat melalui panel properties.
Perhatikan Gambar berikut.
kata pengantar 14

• Static Teks adalah tipe teks yang bersifat statis dan tidak dapat
melalui Action Script tetapi dapat dianimasikan.
• Dynamic Teks adalah tipe teks yang dapat berubah secara
dinamis atau dapat dikomunikasikan dengan script terntu.
• Input Teks adalah tipe teks yang dapat digunakan untuk
memasukkan data pada saat dijalankan menggunakan perintah
tertentu. Dengan input teks Anda dapat membuat password untuk
program yang Anda buat.
• Setelah Anda memilih tipe teks misalnya adalah static teks
kemudian klik sekali pada stage. Setalah kursor berubah Anda
dapat menuliskan teks yang Anda inginkan. Perhatikan Gambar
berikut.

MEMBUAT TEKS PARAGRAF

Perhatikan Langkah-langkah berikut untuk membuat teks paragraf.
1. Klik Teks Tool pada Tools.
2. Klik pada stage dan drag pointer susuai lebar paragraf yang akan Anda
buat. Perhatikan Gambar berikut.
3. Ketikkan teks atau Anda bisa mengkopi teks dari file word. Perhatikan
Gambar berikut.
kata pengantar 15

MENGATUR PROPERTIES TEKS

1. Blok teks yang akan Anda atur arah pengetikanya. Perhatikan Gambar
berikut.

2. klik menu Orientation pada panel properties dan pilih pengaturan arah
yang Anda inginkan diantaranya Horizontal, Vertical left to right atau Vertical
right to left.
3. Maka hasil pengaturannya seperti pada gambar berikut.

orientasi horisontal (kiri), Orientasi Vertical, Left to Right (kanan)

Untuk mengatur jarak antarkarakter Anda dapat menggunakan fasilitas
: pada keadaan default jarak antar spasi adalah 0.0 akan tetapi
Anda bisa merubahnya sesuai keinginan. Semakin besar nilai yang
dimasukkan maka akan semakin lebar jarak antar karakternya. Perhatikan
Gambar berikut.
kata pengantar 16

Jarak antar karakter 3.0

Jarak antar karakter 0.0

: Jarak Antarkarakter
Anda juga dapat merubah teks menjadi sebuah obyek vektor dengan langkah
sebagai berikut:.
1. Klik Teks Tool pada Tools, kemudian ketikkan sebuah teks pada objek.
Perhatikan Gambar berikut.

Menuliskan Teks
2. Tekan Ctrl + B satu kali untuk memecah teks. Hasilnya akan tampak
seperti Gambar berikut.

Memecah Teks
3. Tekan Ctrl + B sebanyak dua kali untuk merubah objek teks menjadi
objek vektor. Hasilnya akan terlihat seperti Gambar berikut.
kata pengantar 17

Teks menjadi Objek Vektor

4. Aktifkan Selection Tool. Kemudian klik di area stage lalu tarik bagian
bawah dari huruf W. Perhatikan Gambar berikut.

Memodifikasi Teks
5. Gunakan teknik mengolah garis yang sudah Anda pelajari sehingga
hasilnya akan tampak seperti Gambar berikut.

Hasil Memodifikasi Teks

6. Modifikasi bagian huruf yang lain sesuai keinginan dan kreatifitas
Anda. Agar lebih terlihat menarik rubah juga warnaya sesuai
keinginan Anda
kata pengantar 18

BAB III

MENAMBAHKAN SOUND DAN VIDEO

MENAMBAHKAN SOUND
Macromedia Flash Pro 8mendukung file suara seperti *.wav, *.asnd, *.aif,
*.au, *.mp3. sound yang Anda import akan masuk di panel library dan Anda
dapat menggunakan sound tersebut pada tombol ataupun movie. Untuk
mempelajari cara untuk menambahkan sound pada animasi perhatikan
langkah-langkah berikut.
1. Buat dua layer yang masing-masing diberi nama ”gambar” dan
”musik”. Perhatikan Gambar berikut.

Menyiapkan 2 Buah Frame

2. Pada layer ”gambar” isi dengan gambar sesuai yang Anda inginkan
dengan cara Import Bitmap yang sudah dipelajari pada bab sebelumnya.
3. Klik kanan pada frame 10 dan pilih Insert Keyframe. Kemudian
hapus isi pada frame 10 sehingga Time Line akan tampak sebagai berikut.

Mengisi Layer gambar

4. Setelah itu isi frame 10 dengan gambar lain. Kemudian klik kanan
pada frame 20 lalu pilih Insert Frame. Perhatikan Gambar berikut.
kata pengantar 19

Mengisi Layer gambar

5. Pilih layer suara kemudian lakukan Insert Frame pada frame 20 untuk
memperpanjang hingga frame 20. untuk memperpanjang frame hi. Maka
Timeline akan tampak seperti berikut.

Insert Frame pada Leyer Musik

6. Kemudian lanjutkan dengan memilih menu File > Import > Import to
Library. Importto library dipilih karena kita menginginkan sound yang kita
import masuk dalam library saja tidak langsung masuk dalam stage sehingga
kita dapat menentukan frame mana yanga akan kita tambahkan sound.
7. Setelah muncul kotak dialog Import to Library pilih file yang ingin
Anda import diakhiri dengan mengklik tombol Open..

8. Pilih frame pertama pada layer musik. Kemudian pada panel

Properties > Sound > pilih file musik yang Anda inginkan.

Anda juga dapat memassukan file suara dengan cara memilih file suara pada
panel Library lalu drag ke area stage. Jika Anda sudah menambahkan sound
maka Timeline akan terlihat seperti pada Gambar berikut
Gelombang suara
kata pengantar 20

Gelombang Suara pada Layer Suara

MENAMBAHKAN VIDEO
Perhatikan langkah-langkah berikut untuk mengimport video pada lembar
kerja.
1. Klik menu File > Import > Import Video maka akan muncul kotak
dialog Import Video.

2. Klik Browse kemudian pilih file video diakhiri dengan mengklik

Open. Jika Anda mengimport file *.flv maka file dapat langsung Anda
tambahkan ke lembar kerja tapi jika Anda mengimport file dengan tipe lain
maka Anda direkomendasikan untuk mengubah tipe file video tersebut
menggunakan Adobe Media Encoder yang telah disedikan oleh Flash.
3. Pilih Load external video with playback component untuk
menampilkan video lengkap dengan playback-nya namun jika Anda
menginginkan video yang Anda import menjadi movie clip dan masuk dalam
timeline pilih Embed FLV in SWF and play in timeline. Kemudian klik
Next. Pilih jenis skin yang Anda inginkan.
kata pengantar 21

Kotak Dialog Import Video

4. Selanjutnya klik Next Kemudian Finish. Setelah selesai instance FLV
Playback aan muncul dalam stage.
Playback

3. Jika Anda mengingikan movie yang Anda import menjadi sebuah

movie clip dengan memilih opsi Embed FLV in SWF and play in
timeline. Maka akan muncul pengatutan movie seperti pada Gambar
berikut.

Pengaturan embedding
4. Pada opsi Symbol type pilih movie clip. Perhatikan Gambar berikut.
kata pengantar 22

Memilih Type Movie Clip

5. Selanjutnya klik tombol Next dan akan muncul kotak dialog seperti
Gambar berikut.

Kotak Dialog Finish Video Import

6. Perhatikan dalam stage tidak dimunculkan video namun pada panel
library terdapat movie clip dari video yang Anda tambahkan.

Movie Clip Video pada Panel Library

7. Kemudian tambahkan video dalam stage dengan cara mengdrag movie
clip dalam panel library. Perhatikan hasilnya pada video tidak
dimunculkan Instance FLV Playback seperti terlihat pada Gambar
berikut.
kata pengantar 23

BAB IV

MEMBUAT ANIMASI DASAR

ANIMASI SHAPE TWEEN
Animasi shape tween merupakan animasi perubahan bentuk dari bentuk satu
ke bentuk yang lain. Anda dapat dengan mudah merubah dari bentuk kotak
menjadi lingkaran. Akan tetapi Anda juga dapat membuat animasi shape dari
kotak menjadi teks. Hal yang paling penting disini adalah bahwa animasi
shape tween hanya dapat digunakan pada objek vektor saja itu artinya jika
Anda ingin membuat animasi shape tween dengan objek teks atau bitmap
Anda harus mengubahnya menjadi objek vektor dahulu. Untuk lebih jelasnya
berikut ini kita akan membuat animasi shape tween yang paling
dasar.Perhatikan langkah-langkah berikut.

1. Klik Rectangle Tool pada Tools. Kemudian buat objek kotak

pada stage. Perhatikan Gambar berikut.

Membuat Objek Kotak

2. Klik kanan frame 25 dan pilih Insert Blank Keyframe. Sehingga
tampilan Timeline akan Nampak sebagai berikut.

Blank Keyframe
kata pengantar 24

3. Klik frame 25 dan buat objek bintang di sebelah kanan objek kotak
perhatikan Gambar berikut.

Objek Bintang pada Frame 25

5. Klik kanan diantara frame 1 dan frame 25 kemudian pilih Shape pada
properties

6. Jika langkah yang Anda lakukan benar maka timeline akan berwarna
hijau dengan tanda panah dari frame 1 sampai frame 25.

Timeline Shape Tween

7. Tekan Ctrl + Enter untuk menjalankan animasinya.
Animasi shape tween berupa garis panah lurus dengan
background berwarna hijau. Jika garis yang terbentuk
putus-putus maka ada kesalahan, priksa apakah objek
CATATAN
yang anda gunakan merupakan objek vektor atau
bukan.

ANIMASI MOTION TWEEN

Perhatikan langkah berikut untuk mempelajari teknik animasi motion tween.
1. Buat objek sesuai keinginan Anda. Sebagai contoh adalah objek
bintang.
kata pengantar 25

Membuat Objek Bintang

2. Lakukan Insert Keyframe pada frame ke 25. Perhatikan Gambar
berikut.
3. Selanjutnya klik kanan diantara frame 1 dan frame 25 kemudian pilih
Create Motion Tween. Timeline yang dihasilkan memiliki dua titik
objek tidak seperti animasi tween yang hanya memiliki satu titik objek
yaitu pada frame pertama saja.

Timeline Animasi Classic Motion Tween.

4. Pindahkan objek yang berada pada frame 25. Perhatikan Gambar
berikut.

Memindahkan Objek
5. Tekan Ctrl + Enter untuk melihat hasilnya.

ANIMASI MOTION CLASSIC GUIDE

Animasi motion classic guide adalah animasi perpindahan dari satu tempat
yang lain menggunakan lintasan tertentu. Untuk itu, kita akan membuat
animasi elektron yang mengitari inti dengan menggunakan teknik motion
classic guide.
kata pengantar 26

1. Siapkan sebuah lembar kerja baru dengan membuat dua buah layer.
2. Klik kanan pada Layer 2 kemudian pilih Add Motion Classic Guide.
Perhatikan Gambar berikut.
3. Perhatikan tampilan layer motion classic guide sebagai berikut.

Timeline dengan layer guide

4. Buat objek lingkaran pada frame 1 dalam layer 1. Perhatikan Gambar
berikut.

Gambar 4.55 : Membuat Objek Lingkaran

5. Buat garis berbentuk oval pada frame 1 dalam Guide: Layer 2.
Perhatikan Gambar berikut.

Membuat Lintasan
kata pengantar 27

6. Aktifkan Erase Tool kemudian hapus ujung objek garis oval.

Perhatikan Gambar berikut.

Menghapus Objek
7. Panjangkan Frame pada Layer Guide: Layer 2 dengan melakukan
Insert Frame hingga frame 25. Perhatikan Gambar berikut.

Memperpnjang Frame Lintasan

8. Pada Frame 1 dalam Layer 2, buatlah objek lingkaran dengan
mengaktifka Object Drawing tepat pada ujung garis oval. Perhatikan
Gambar berikut.

Membuat Lingkaran
kata pengantar 28

9. Klik pada frame 25 dalam Layer 2 kemudian pilih Insert Keyframe. Perhatikan
tampilan Timeline yang dihasilkan.

Insert Keyframe
10. Klik kanan di antara frame 1 dan frame 25 dalam layer 2 kemudian
pilih Create Motion Tween. Perhatikan tampilan Timeline.

Create Classic Tween

11. Klik frame 25 dalam layer 2 kemudian pindahkan objek lingkaran ke
ujung garis oval. Perhatikan Gambar berikut.

Gambar 4.62 : Memindahkan Objek

12. Panjangkan Frame pada layer 1 hingga layer 25. Perhatikan hasilnya.
kata pengantar 29

Timeline animasi

ANIMASI MASKING
Animasi masking adalah animasi yang berguna untuk menampilkan bidang
yang tertutup dan menyembunyikan bidang yang terbuka. Jika Anda
menggunakan teknik masking maka objek yang dibuat dalam stage akan
tersembunyi dan akan ditampilkan oleh objek yang lain. Animasi masking
biasanya dibuat untuk membuat animasi teropong, animasi opening screen dan
masih banyak animasi-animasi yang kreatif lainnya menggunakan teknik
animasi masking. Untuk membuat animasi masking sangat mudah dan sangat
sederhana namun harus Anda perhatikan teknik dasarnya secara benar karena
salah sedikit saja hasilnya bisa tidak sesuai dengan yang kita inginkanoleh
sebab itu , perhatikan langkah-langkah berikut untuk mempelajari mengenai
animasi masking.
1. Buat lembar kerja dengan pengaturan stage secara default yang
berisikan dua Layer.
2. Ganti nama layer untuk memudahkan Anda membuat animasi
masking. Dengan ketentuan objek yang akan Anda sembunyikan
berada pada bagian bawah sedangkan objek yang digunakan untuk
menampilkan objek yang disembunyikan berada pada layer bagian
atas. Perhatikan Gambar berikut.

Menyiapkan dua Layer

3. Pada Layer teks tuliskan teks Selamat Datang. Seperti pada Gambar
berikut.
kata pengantar 30

Menuliskan Teks
4. Lakukan Insert Frame sampai Frame 30 sehingga Timeline akan
tampak sebagai berikut.

Memperpanjang Layer Teks

5. Buat objek yang digunakan untuk menampilkan objek yang akan
disembunyikan, miaslkan objek bintang. Letakkan objek bintang pada
Frame 1 dalam layer masking dan letakkan objek lingkaran di sisi kiri
tulisan yang sudah Anda buat.

6. Selanjutnya buat animasi tween pada objek bintang agar objek yang
tersembunyi nanti akan muncul seiring berjalannya animasi pada objek
yang menutupinya. Klik kanan pada Frame 30 dalam Layer masking
kemudian pilih Insert Keyframe.
7. Klik kanan di antara frame 1 dan frame 30 kemudian pilih Create
Motion Tween.
kata pengantar 31

8. Klik Frame 30 kemudian geser objek ke sisi sebelah kanan teks.

Perhatikan Gambar berikut.

Objek Bintang Berada di Sebelah Kanan Teks

9. Klik kanan pada Layer masking kemudian pilih Mask. perhatikan
perubahan layer yang dihasilkan. Jika layer tampak seperti pada
berikut berarti cara yang Anda lakukan sudah benar.

Layer Untuk Animasi Masking

10. Tekan Ctrl + Enter untuk menjalankan animasi dan perhatikan hasilnya.

ANIMASI FRAME PER FRAME

Animasi Frame per Frame merupakan teknik animasi yang sederhana, teknik
ini sama seperti teknik animasi dengan menggunakan buku yanga berisi
gambar-gambar yang saling berhubungan dan digerakkan secara serentak dan
cepat. Teknik animasi ini menuntut ketelitian dan kekreatifan Animator karena
animasi frame per frame bisa juga dikatan sebagai animasi konvensional yaitu
tiap gerakan dihasilkan dari tiap gambar atau objek yang dibuat. Semakin
banyak frame yang digunakan atau semakin detail objek yang dibuat maka
hasil animasinya semakin halus. Sebaliknya semakin sedikit detail dari objek
yang digunakan maka animasi akan terlihat putus-putus. Akan tetapi walaupun
animasi ini merupakan animasi yang sederhana teknik ini juga dapat
digunakan untuk membuat animasi untuk film-film kartun. Berikut ini kita
kata pengantar 32

akan membuat animasi perhitungan mundur. Perhatikan langkah-langkah

berikut.
1. Siapkan lembar kerja baru yang berisi 2 Layer.

Dua Buah Layer Kosong

2. Pada Frame 1 dalam Layer 1buat objek kotak degan sedikit variasi. Kemudian
ketikkan angka 5 tepat di tengah objek kotak. Sehingga hasil tampak sebagai
berikut.

Membuat Objek Kotak (kiri), Menuliskan Angka pada Objek Kotak (kanan)
3. Lakukan Insert Keyframe pada frame ke 3. Selanjutnya ubah objek
frame 3 menjadi seperti Gambar 4.86 kanan.

Memodifikasi Objek Kotak

4. Klik Frame 1 kemudian tekan Ctrl + C untuk mengkopi seluruh objek
pada frame 1.
5. Lakukan Insert Blank Keyframe pada frame ke-5 kemudian tekan
Ctrl + Shift + V. untuk memaste objek pada tempat objek itu dikopi
sehingga posisi objek tidak berubah.
6. Ganti angka 5 dengan angka 4. Perhatika Gambar beikut.
kata pengantar 33

Mengganti Angka dalam Objek Kotak

7. Klik frame kedua dan tekan Ctrl + C untuk mengkopi seluruh objek pada frame
2.
8. Lakukan Insert Blank Keyframe pada frame ke-7 kemudian tekan Ctrl + Shift
+ V. untuk memaste objek pada tempat objek itu dikopi sehingga posisi objek
tidak berubah.
9. Lakukan cara 6 sampai 10 hingga angka dalam kotak berisi angka 1 dan timeline
akan Nampak sebagai berikut.
kata pengantar 34

BAB V

MENGGUNAKAN SIMBOL

s imbol adalah sebuah objek yang ada dalam Library. Setiap objek seni
yang Anda buat baik itu gambar, teks, sound, button movie semua
akan tersimpan dalam panel Library dan objek-objek yang ada dalam
library tersebut kita namakan sebagai simbol

Tipe Simbol
 Movie Clip : merupakan simbol yang berisi animasi maupun objek
seni. Movie Clip dapat dijalankan dengan handle Action Script.
 Button : merupakan simbol yang berfungsi sebagai tombol untuk
mengatur jalannya animasi atau sebagai navigasi dalam flash.
 Graphic : merupakan simbol yang berisi objek seni. Graphic tidak
dapat di handle dengan Action Script.

MOVIE CLIP
Movie clip akan sangat berguna sekali jika Anda ingin membuat animasi.
Dalam movie clip inilah animasi-animasi yang anda buat ditampung sehingga
akan terlihat lebih sederhana daripada Anda membuat animasi dalam scene.
Movie clip akan tersimpan di dalam panel library sehingga dapat Anda pakai
berulang-ulang Berikut ini kita akan membuat animasi mendidihkan air
menggunakan movie.
1. Gunakan teknik yang sudah diajarka pada bab sebelumnya dan buatlah
Gambar seperti Gambar di bawah ini.
kata pengantar 35

Membuat Objek Diam

2. Buatlah objek api di samping gambar pertama seperti pada Gambar
berikut.

Membuat Objek Api

3. Seleksi objek api kemudian tekan F8 sehingga akan muncul kotak
dialog Convert to Simbol. Lakukam pengaturan seperti Gambar
berikut.

Mengubah Objek Menjadi Movie Clip

4. Pindahkan movie api tepat di atas tungku dan sesuaikan ukurannya.
kata pengantar 36

Membuat Animasi Api

5. Kemudian lanjutkan dengan klik ganda objek api atau klik kanan
kemudian pilih Edit in Place.
6. Lajutkan dengan Klik kanan pada frame 5 kemudian pilih Insert
Keyframe.

7. Selanjutnya modifikasi objek api pada frame 5. Perhatikan Gambar

berikut.

Mengubah Bentuk Gambar Api

8. Lakukan Insert Keyframe pada frame 8. Sehingga timeline akan
tampak seperti Gambar berikut.
kata pengantar 37

Menambahkan Keyframe
9. Klik di antara frame 1 dan frame 5 kemudian buat animasi tween. Lakukan
hal yang sama da antara frame 5 dan frame 8.

Timeline Shape Tween

10. Tekan Ctrl + Enter untuk melihat hasil animasinya.

SIMBOL BUTTON
Simbol button digunakan sebagai tombol navigasi dalam animasi interaktif.
Flash 8 menyediakan simbol tombol yang dapat Anda gunakan akan tetapi
Anda juga bisa membuat tombol secara manual sesuai kreasi dan kreatifitas
Anda. Anda dapat membuat simbol button dari graphic, bitmap maupun
movie. Berikut kita akan membuat button yang sederhana dengan tampilan
berbeda saat tersentuh pointer mouse ataupn saat button tersebut diklik.
Perhatikan langkah-langkah berikut.
1. Gunakan piranti yang terdapat pada Toolbox untuk membuat objek
segitiga dan kotak kemudian gabungkan keduanya sehingga hasilnya
akan tampak seperti Gambar berikut.

2. Seleksi seluruh bagian objek kemudian tekan F8 atau klik menu

Modify > Convert to Simbol. Sehingga akan ditampilkan dialog
convert to simbol seperti pada Gambar berikut.
kata pengantar 38

3. Pada kotak Name ketikkan nama dari button yang akan anda buat dan
pada opsi Type Anda pilih Button. Akhiri dengan mengklik OK.
4. Klik ganda pada objek button yang baru Anda buat dan perhatikan
hasilnya.

Timeline Tombol
• Pada stage yang terseleksi bukan lagi simbol button melainkan
suatu objek dan pada Timeline terdapat empat frame yaitu Up, Over,
Down, Hit. Berikut keterangan dari masing-masing bagian frame
tersebut.
• Up : merupakan tampilan awal pada saat tidak tersentuh atau diklik.
• Over : merupakan tampilan saat pointer mouse berada di atas tombol.
• Down : merupakan tampilan saat tombol diklik.
• Hit : merupakan area klik pada tombol
• Pada frame Up perbesar ukuran garis dan ubah warnanya menjadi hitam
kemudian tambahkan tulisan Next. Perhatikan Gambar berikut.
kata pengantar 39

Mengatur Tampilan Button pada Frame Up

5. Klik kanan pada frame Over kemudian pilih Insert Keyframe.
Sehingga dalam frame Over berisi objek yang sama dengan objek
yang berada pada frame Up.
6. Ubahlah warna garis menjadi kuning dan warna tulisan menjadi
merah. Artinya jika pointer mouse berada di atas tombol akan berubah
warna perhatikan Gambar berikut.

Objek pada frame Over

7. Klik kanan pada frame Down kemudian pilih Insert Keyframe.
8. Selanjutnya pada frame Down ubah ukuran objek menjadi lebih kecil
sehingga ketika tombol diklik tombol akan mengecil. Ubah juga warna
garis menjadi hitam.
kata pengantar 40

Tampilan Objek pada Frame Down

9. Pada frame Hit klik kanan kemudian pilih Insert Key Keyframe.

Tampilan Area klik

10. Klik Scene 1 untuk kembali ke lembar kerja utama.
Macromedia Flash 8 juga menyediakan fasilitas tombol yang siap digunakan
dan Anda dapat Merubah tombol-tombol tersebut sesuai keinginan Anda jika
Anda kurang menyukai pengaturan tombol secara default. Gunakan langkah-
langkah berikut untuk menggunakan tombol yang terdapat dalam panel library
Button.
1. Klik menu Window > Common Libraries > Buttons.
2. Klik tanda > disamping folder tombol atau klik ganda pada folder
button sehingga akan terlihat seperti Gambar berikut.
kata pengantar 41

Macam-macam Button dalam Folder Button

3. Klik salah satu jenis button yang Anda inginkan kemudian drag ke
area stage.

Menggunakan Library Button

kata pengantar 42

BAB VI

ACTION SCRIPT

A
ction script adalah bahasa pemrograman untuk menghandle
aktifitas pada Flash movie. Action merupakan sebuah perintah
yang akan dibaca atau dijalankan saat playhead melewati frame
atau keyframe yang diberi perintah Action tersebut. Dalam
macromedia flash 8 kita dapat menempatkan script pada frame, button atupun
movie.berikut contoh penulisan scriptnya.

Script dalam frame, Movie dan Button

Perhatikan langkah2 berikut untuk menggunakan script dalam frame.
1. Buat file animasi sebagai contoh file animasi perubahan bentuk.
Seperti gambar berikut.

Jika animasi Anda jalankan maka playhead akan berjalan terus menerus atau
akan mengulang lagi dari awal ketika sudah sampai pada frame terakhir
animasi. Untuk itu kita perlu memberikan perintah Stop untuk
menghentikannya.
2. Klik frame terakhir kemudian tekan F9 atau klik menu Window >
Actions untuk menampilkan panel Actions.
kata pengantar 43

3. Klik kemudian pilih Global Function > Timeline Control >

Stop().

4. Perhatikan tampilan frame yang telah diberi script.

5. Takan Ctrl + Enter dan perhatikan hasilnya.

GOTO ANDSTOP DAN GOTO ANDPLAY

Perintah gotoAndStop berfungsi untuk menuju ke frame atau scene tertentu
dan berhenti pada frame tersebut. Sedangkan perintah gotoAndPlay berfungsi
untuk menuju ke frame atau scene tertentu dan menjalankan isi dari frame
tersebut. Berikut ini akan dibahas mengenai perintah gotoAndStop dan
gotoAndPlay untuk frame. Perhatikan langkah-langkah berikut untuk
menggunakan gotoAndStop dan gotoAndPlay.
1. Buat animasi perubahan bentuk kemudian tambahkan 1 layer untuk
menempatkan Button. Perhatikan Gambar berikut.

2. Klik frame 1 pada layer 2 kemudian buat 2 buah tombol sebagai

berikut.
kata pengantar 44

3. Hentikan animasi pada frame 1.

4. Klik tombol gotoAndStop kemudian tampilkan panel Action.

5. Klik Global Function > Movie Clip Control > On. Maka akan
tampak sebagai berikut.

6. Pilih release kemudian tempatkan kursor dibelakang tanda { dan klik

Global Function > Timeline Control > gotoAnd Stop( ).

7. Isikan angka pada frame berapa kita akan berpindah dan berhenti.
Misalkan pada frmae5 maka ketikkan angka 5. Perhatikan gambar
berikut.
kata pengantar 45

8. Klik tombol gotoAndPlay kemudian isikan script sebagai berikut.

9. Perintah di atas berguna untuk berpindah ke frame ke 2 dan

menjalankan animasi dari frame tersebut. Kemudian tekan Ctrl +
Enter untuk menjalankan animasi.

Penulisan script dalam flash terpengaruh dengan besar

CATATAN kecil huruf yang digunakan.
kata pengantar 46

Sekilas Tentang Penulis

Pria Bernama Lengkap Khaerul Nurchiyan lahir pada tanggal 19
November 1987 di sebuah desa yang berada di Kecamatan Belik
Kabupaten Pemalang. Lulus dari Sekolah Dasar Negeri 1 Belik
pada tahun 1999 kemuadian meneruskan sekolah Menengah di
SLTP N 1 Belik. Keinginannya untuk meneruskan di SMK
Otomotif akhirnya harus kandas karena orang tua lebih memilih
untuk menyekolahkannya di SMA N 1 Randudongkal. Pada
tahun 2005 pendidikannya dilanjutkan di Unniversitas Negeri
Semarang pada Jurusan Pendidikan Kimia FMIPA dan berhasil
menyelesaikan Study dengan meraih gelar SI Pendidikan kimia
pada bulan oktober 2009.
Semasa Kuliah di Kampus Kimia Penulis juga aktif dalam berbagai macam kegiatan
kemahasiswaan salah satunya adalah Triple-C (Computational Chemistry Club) dari
situlah penulis mulai mendalami komputer terutama pada komputasi kimia dan animasi
sehingga pada November 2009 Penulis langsung bekerja di SMA N 11 Semarang sebagai
guru pengganti dan tim pengembangan pembelajaran kimia berbasis IT. Dan Pada Agustus
2010 Bergabung dengan SMK Perintis 29 Ungaran hingga Saat ini.