DARMAWAN SOEGANDAR

Pemrograman Animasi Grafis

Dalam Macromedia Flash MX

FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN

UNINUS

Pengantar Pemrograman Animasi / Darmawan hal 1

 2008
PENGANTAR

Komputer pada masa sekarang tidak lah layak jika sekedar

dipandang sebagai hanya pengganti mesin Tik belaka. Komputer
sebagai alat bantu harus di manfaatkan semaksimal mungkin.
Sesuai bidang tugas dan kerja masing masing user.
Flash MX, adalah sebuah software pemrograman animasi
grafis yang cukup sederhana dan mudah untuk dipelajari. Untuk
menampilkan simulasi cukup dibuat dengan cara yang sederhana,
tanpa bahasa pemrograman yang rumit. Seperti halnya bahasa
pemrograman berbasis numerik umumnya.
Pada pembelajaran kali ini, kita akan meminimalisir penggunaan
bahasa pemrograman ( action script ). Yang akan kita pelajari
secara tersendiri dalam MK Komputer & Pemrograman. Pada buku
ini sendiri akan dipelajari; Pendahuluan, Menggunakan Toolbar
dan Propertiesnya, Mengenal UI Components, Multimedia, Dasar
Dasar Animasi, dan Publish. Pada Pendahuluan kita akan
mengidentifikasi beberapa layout dan tool yang penulis anggap
paling mendasar dan harus diketahui para pengguna buku ini
sebelum melangkah pada bagian berikutnya. Bagi mereka yang
sudah terbiasa memahami software grafis tentu tidak akan

Pengantar Pemrograman Animasi / Darmawan hal 2

mengalami terlalu banyak kesulitan. Begitupun pada bagian UI
Components, para pengguna yang sudah terbiasa dengan bahasa
pemrograman Visual, akan mendapat lebih banyak kemudahan
lagi.
Pada pembahasan Multimedia, para pembaca akan menemukan
beberapa pemahaman yang sangat penting ketika akan
memasukkan multimedia kedalam program yang sedang anda
bangun. Karena, ada beberapa format yang tidak bisa di run dalam
Flash MX. Oleh karena itu pembaca diharapkan memperhatikan
beberapa aturan yang dijelaskan di dalamnya. Bab mengenai dasar-
dasar animasi yang penulis rangkum dari beberapa buku, hanyalah
merupakan dasar-dasarnya saja. Selanjutnya untuk membuat
sebuah program yang bagus, baik itu secara artistik maupun
kegunaannya, tentu saja relatif tergantung pada kreatifitas dari
pembuat program atau pembaca sekalian. Akhirnya mengcompile
atau membuat sebuah publish adalah puncak tertinggi dari
keinginan pembuat program. Para pembaca dipersilahkan
mempelajarinya sebagai pemahaman dasar yang bisa dilengkapi
dengan software resource yang di sediakan oleh Macromedia.
Selanjutnya, selamat berkarya !

Darmawan Soegandar

Pengantar Pemrograman Animasi / Darmawan hal 3

 DAFTAR ISI

1. Pengantar……………………………………………. 1
2. Daftar Isi ……………………………………………. 3
3. BAB I Pendahuluan ……………………………. 4
4. BAB II Menggunakan Toolbar dan Propertiesnya.. 7
5. BAB III Mengenal UI Components ……………….. 20
6. BAB IV Multimedia …………………………… 28
7. BAB V Dasar Dasar Animasi ……………………... 37
8. BAB VI Publish ……………………………………. 54

Pengantar Pemrograman Animasi / Darmawan hal 4

 BAB I
Pendahuluan

Animasi adalah Proses manipulasi gambar agar gambar

tampak lebih menarik atau hidup. Animasi pada Flash MX dibuat
di dalam Simbol. Jadi gambar yang tampak pada stage terpartisi
dalam beberapa sub gambar, objek Flash. Objek Flash inilah yang
akan kita sebut simbol. Simbol terbagi menjadi tiga jenis;
• Movie Clip; animasi objek yang dibuat dalam
beberapa frame sehingga menjadi satu rangkaian
animasi objek
• Button; animasi yang terdapat pada tombol
interaktif
• Graphic; animasi diam yang siap di animasikan
pada layar
Selain itu animasi bisa juga diberikan pada Teks dengan cara
mempartisinya menjadi sebuah simbol dengan perintah Break
Apart (Ctrl + B).
Secara garis besar layout utama untuk membuat sebuah
animasi sederhana dalam Flash tergambar seperti di bawah ini.
Layout sendiri terdiri dari layout designer dan layout developer,

Pengantar Pemrograman Animasi / Darmawan hal 5

 tergantung keperluan kita terhadap Panels, tetapi default layout
relatif lebih praktis sisanya bisa di tampilkan sesuai kebutuhan.
Bagi mereka yang terbiasa dengan pemrograman GUI yang lain
perbedaannya hanya terletak pada pemisahan components dari
toolbox dan color panels dari properties sisanya secara umum sama
saja baik dari cara penggunaan maupun perintah perintah
programnya. Perintah yang kita masukkan pada objek atau frame
diberikan pada windows action. Kelebihan utama layout flash
terletak pada kemudahan akses pada frame yang tidak terdapat
pada kemudahan akses form pada software pemrograman lainnya.
Menu
Toolbox Panels
Time line

Stage

Properties

Pengantar Pemrograman Animasi / Darmawan hal 6

 Secara umum animasi dalam flash bisa dengan memakai
Action Script, tetapi pada MK Pengantar ini kita akan
membicarakan animasi objek tanpa Action Script, ( Action Script
diberikan pada MK Bahasa pemrograman). Sebagai sebuah
program GUI berbasis Vektor, Flash memang memungkinkan
animasi tanpa memakai bahasa pemrograman yang rumit.

Pengantar Pemrograman Animasi / Darmawan hal 7

 BAB II
Menggunakan Toolbar dan Propertiesnya

Dalam penggunaan Toolbar pada Flash sebenarnya tidak

ada bedanya dengan penggunaan tool sejenis pada software desain
grafis yang lain
arrow subselection

line lasso

pen text

oval rectangle

pencil brush

free transform fill transform

Ink bottle paint bucket

eyedropper eraser
dari beberapa tool yang tersedia ada beberapa tool yang harus di
cermati
a. Line
Tool ini berguna untuk membuat garis. Pada tool ini yang
harus diperhatikan, selain propertiesnya juga perubahan
line yang diakibatkan penggunaan arrow dan subselect tool.

Pengantar Pemrograman Animasi / Darmawan hal 8

warna

ukuran bentuk

• Garis asal;

• Untuk memindahkan garis gunakan subselection;

Pengantar Pemrograman Animasi / Darmawan hal 9

 • Sedangkan jika ingin merubah garis pada titik
tertentu gunakan arrow;

• warna yang dimaksud pada line adalah warna stroke

• ukuran garis berkisar antara 1 – 10
• stylenya sendiri ada 7 pilihan bentuk. Tentu saja
tergantung kebutuhan designer.
b. Lasso
Tool ini berguna untuk memilah bagian tertentu yang ingin
dianimasi. Tool ini terutama sering digunakan pada animasi
cartoon (film kartun 2 dimensi)

Pengantar Pemrograman Animasi / Darmawan hal 10

 bisa di perhatikan bahwa animasinya sendiri hanya pada
bagian kepala dan matanya saja. Prosesnya sendiri dengan
cara memilih bagian tertentu dari gambar yang akan di
jadikan symbol.
c. Text
Teks berguna untuk membuat tulisan baik yang akan
dijadikan input text, dinamik teks ataupun yang statis.

yang dimaksud dinamik teks adalah jika teks yang kita buat
ingin dibuat scrollnya resikonya carakter posisinya hanya
normal saja sehingga jangan harap menuliskan rumus
rumus matematis dengan sempurna pada mode teks ini.

Pengantar Pemrograman Animasi / Darmawan hal 11

 Sedangkan input text berguna untuk menjadi alat masukan
bagi pengguna atas program yang kita buat.

Input text

d. Oval
Oval tool ini berguna jika kita ingin membuat lingkaran
atau elips

stroke

fill
yang harus kita perhatikan
• Lingkaran bulat sempurna akan terbentuk jika
ketika kita sedang membuat lingkaran dibagian

Pengantar Pemrograman Animasi / Darmawan hal 12

 bawah pointer ada lingkaran kecil yang ditebalkan.
Tetapi secara otomatis bisa kita buat dengan cara
menekan tombol shift bersamaan dengan proses
pembuatan lingkaran.
• Gambar yang kita buat akan terdiri dari dua bagian
stroke dan fill, sehingga dalam proses
memindahkan gambar ini harus hal ini diperhatikan.
Fill dan stroke
pindah bersamaan

Fill dan stroke

tidak di pindah
bersamaan

kegagalan pemindahan objek seperti diatas bisa

dihindari dengan cara ctrl + a memblok seluruhnya,
jika objek pada stage sudah komplek caranya
dengan mengklik dua kali pada objek bersangkutan
baru kemudian dipindahkan pada bagian yang kita
inginkan.

Pengantar Pemrograman Animasi / Darmawan hal 13

 e. Rectangle
Pada pembuatan persegi (rectangle) cara dan manipulasinya
hampir sama dengan oval tool. Hal penting yang harus
diingat adalah ketika kita ingin membuat sudut oval pada
sudut sudut rectangle-nya.
Sehingga akan tampak perbedaan sudut,

sudut sudut yang tumpul ini bisa di atur pada windows

berikut

caranya dengan memilih option di bawah tool bar

Pengantar Pemrograman Animasi / Darmawan hal 14

 f. free transform
Jika kita ingin merubah ukuran suatu objek, pilihlah free
transform. Pilihan ini lebih sering di gunakan karena kita
bisa langsung fiting di stage terhadap objek lain.

tool ini juga berguna untuk memanipulasi rotasi objek dan

kemiringannya. Perhatikan jika kita mendekatkan pointer
ke salah satu sisi stroke maka pointer akan berubah menjadi
, jika pointer sudah berubah seperti itu cobalah c&d
sehingga rectangle berubah sesuai yang diharapkan

sedangkan jika pointer berubah bentuk menjadi; , artinya

free rotate aktif, maka kita bebas memutar objek sesuai
kebutuhan.

Pengantar Pemrograman Animasi / Darmawan hal 15

 tetapi jika kita membutuhkan putaran dengan akurasi, bisa
menggunakan pasilitas modify > transform > scale and
rotate.

melalui windows ini tinggal masukkan berapa derajat

besarn perputarannya. Windows ini juga bisa memberi
akurasi pembesaran sesuai persentase yang diinginkan.
g. paint bucket
• Pada bentuk oval dan rectangle paint bucket berguna
untuk merubah fill color, dan perintahnyapun tidak ada
yang istimewa. Tinggal klik paint bucket, pilih fill
objek yang ingin dirubah lalu pilih warna yang ingin
dirubah. Bisa menggunakan properties > fill color. Bisa

Pengantar Pemrograman Animasi / Darmawan hal 16

 juga menggunakan color mixer atau color bar di tool
bar

Fungsi nya sama

ingat klik dulu paint bucket tool sebelum memakai ke

tiga tool tersebut.
• Tool ini juga berguna untuk memberi kesan
pencahayaan ketika kita menggunakan color radial atau
linear

Pengantar Pemrograman Animasi / Darmawan hal 17

 sehingga kesan yang tibul menjadi sudut pencahayaan
tertentu. Jika dengan color radial warna asalnya;

jika diberi sentuhan paint bucket tool menjadi;

Perhatikan arah pencahayaannya, arah pencahayaan

tergantung dari sisi mana paint bucket tool diberikan.

Pengantar Pemrograman Animasi / Darmawan hal 18

 h. Eyedropper
Tool ini berguna untuk mengcopy warna suatu objek ke
objek lain. Sehingga ada dua objek yang memiliki warna
sama. Caranya;
• Klik eyedropper tool
• Kemudian klik bagian warna ( stroke ataupun fill) yang
hendak di gandakan. Sehingga paint bucket tool dan
option lock fill aktif. Kemudian nonaktifkan lock fill di
option eyedropper.

Lock fill

• Barulah klik bagian dari objek yang hendak diberi

warna sama, sehingga objek memiliki warna yang
sama.

Pengantar Pemrograman Animasi / Darmawan hal 19

 i. ink bottle
Tool ini berguna untuk memberi atau merubah warna
stroke pada objek;

setelah diberi stroke height 3 point oleh ink bottle dengan ,

menjadi

Pengantar Pemrograman Animasi / Darmawan hal 20

 BAB III
MENGENAL UI COMPONENT

Sesuai kesepakatan sebelumnya kita akan mempelajari UI

Component yang tidak melibatkan action script yang rumit. Pada
bahasan kali ini kita akan mempelajari scroll baik text maupun
image, dan keduanya.
1. Scrollbar
Scroll bar pada teks yang harus di perhatikan adalah jenis
teksnya.
a. Pilihlah dynamic text

Line type

hal yang paling sering di lupakan oleh designer

adalah merubah line typenya.

Pengantar Pemrograman Animasi / Darmawan hal 21

 Dari single menjadi multiline. Tentu saja tulisan
yang terlihat di stage hanya sebagian saja. Yang
secara keseluruhan akan terbaca dengan bantuan
scrollbar
b. Kemudian pilihlah scrollbar pada components UI,
draglah tool scrollbar sampai tampak pointer
berubah menjadi lingkaran kecil tebal, sebagai
tanda posisi pointer sudah tepat.

Horizontal
scrollbar

cara yang paling sederhana adalah dengan

menempatkan scrollbar tepat di tengah tengah garis
pinggir.

Pengantar Pemrograman Animasi / Darmawan hal 22

 c. Jika ingin membuat scrollbar horizontal buat lagi
scrollbarnya tetapi pada properties > horizontal >
ganti menjadi > true. Sehingga didapat.

Line type

perbedaannya terletak dari penggunaan line type >

single line.
d. Pemakaian arah scrollbar ditentukan pada kebutuan
dan ketersediaan lahan pada stage.
2. ScrollPane
Tool UI ini berguna untuk memberikan scrollbar pada
image karena terbatasnya lahan pada stage.
a. Misalnya kita telah loading atau import image ke
library. File > import to library

Pengantar Pemrograman Animasi / Darmawan hal 23

 b. Berikutnya drag image tersebut dari library ke
stage. (F11)

c. Kemudian rubahlah behavior symbolnya (F8)

menjadi movie clip

sehingga pada stage tampak lingkaran kecil

ditengah image sebagai tanda sudah berubah
menjadi symbol seperti berikut;

Pengantar Pemrograman Animasi / Darmawan hal 24

 d. Selanjutnya kita akan membuat linkagenya. Untuk
itu hapuslah dulu movie clip tersebut. Kemudian
pada window library klik kanan pada icon movie
clip bayiku

Icon movie clip

Pengantar Pemrograman Animasi / Darmawan hal 25

 e. Sehingga tampak kotak dialog linkage properties
isilah sesuai kotak dialog berikut;

f. Berikutnya kita akan membuat UI scrollpanenya

(ctrl+F7) atau tampak pada sebelah kanan layar
default

g. Pilihlah scrollpane dan atur posisi serta ukurannya

sesuai kebutuhan stage kita secara keseluruhan.

Pengantar Pemrograman Animasi / Darmawan hal 26

 h. Pada propertis > scroll content isikan nama linkage
kita ( bayiku_lnk)
i. Untuk memastikan hasilnya sesuai harapan kita
coba lah previewnya ( ctrl + enter)

Pengantar Pemrograman Animasi / Darmawan hal 27

Dengan penggunaan scrollpane kita bisa membuat baris baris
rumus sesuai kaidah yang berlaku syaratnya dengan mengubah
dulu teks yang kita butuhkan menjadi movie clip terlebih dahulu.

Jadi masalah keterbatasan penulisan rumus pada subscript, bisa

diselesaikan dengan solusi scrollpane dengan merubah behavior
ini.

Pengantar Pemrograman Animasi / Darmawan hal 28

 BAB IV
MULTIMEDIA

Proses manipulasi multi media pada flash mx sebetulnya

tergantung pada kreatifitas depeloper atau animatornya.
Maksudnya, hakikat aktifasi sebuah animasi sama saja dengan
aktifasi objek lain pada flash mx.
a. Video
Untuk menampilkan sebuah video dalam flash mx sebetulnya
relatif sederhana. Proses awalnya tentu saja sama dengan
proses import objek lain pada library.
1. Ambilah file video yang dibutuhkan

Pengantar Pemrograman Animasi / Darmawan hal 29

 tentu saja untuk mempermudah pengambilan video
disarankan untuk mengubah jenis file (files of type)
menjadi All Video Formats.
Karena tidak semua jenis video bisa ditampilkan dalam
flash mx.

Formats file Video yang di import

Format video di bawah adalah file yang bisa di import jika

QuickTime 4 telah terinstall (Windows dan Macintosh):

File type Extension Windows Macintosh

Audio Video Interleaved .avi,

Digital Video .dv

Motion Picture Experts .mpg,

Group .mpeg

QuickTime Movie .mov

Pengantar Pemrograman Animasi / Darmawan hal 30

 Format video di bawah adalah file yang bisa di import jika
DirectX 7 atau lebih tinggi telah terinstall (hanya pada
Windows):

File type Extension Windows

Audio Video Interleaved .avi,

Motion Picture Experts Group .mpg, .mpeg

Windows Media File .wmv, .asf

Defaultnya, imports dan exports video pada flash

menggunakan Sorenson Spark codec. A codec adalah
sebuah algoritma compression/decompression yang
mengkontrol bagaimana sebuah file multimedia di
compressed dan decompressed ketika melakukan import
and export file. video yang di import formatnya bisa
supported, tergantung pada codecs yang terinstall pada
system kita.

Jika kita mendapatkan file yang di import formatnya tidak

supported pada system kita , Flash akan menampilkan

Pengantar Pemrograman Animasi / Darmawan hal 31

 warning message bahwa operasi tidak dapat dilaksanakan.
Dalam beberapa kasus, Flash mungkin mengimport video
tetapi audio nya tidak. Sebagai contoh, audio tidak
supported pada MPG/MPEG files yang di import dengan
QuickTime 4. pada kasus lainnya, Flash menampilkan
warning bahwa file audio nya tidak dapat di import. Tetapi
kita tetap bisa mengimport video tetapi tanpa suara (sound).

2. Aturlah kualitas gambar yang di inginkan

Pengantar Pemrograman Animasi / Darmawan hal 32

 3. Hasilnya akan terindikasi dengan tampilan pada time line.
Tentu saja panjang frame tergantung pada pengaturan yang
kita lakukan sebelumnya.

4. Sehingga hasilnya akan terlihat putaran jam seperti berikut;

Pengantar Pemrograman Animasi / Darmawan hal 33

b. Sound

Kita dapat menempatkan file sound kedalam Flash dengan

mengimportnya kedalam library didalam docukemnt flash yang
kita buat. Ketika menempatkan sound pada Timeline, di
rekomendasikan untuk menempatkannya pada separate layer.

Format sound file yang bisa di import pada flash adalah:

WAV (Windows only)

AIFF (Macintosh only)
MP3 (Windows or Macintosh)

Jika kita memiliki QuickTime 4 yang terinstall pada system

kita, kita dapat memasukkan file sound file dengan format:

AIFF (Windows or Macintosh)

Sound Designer II (Macintosh only)
Sound Only QuickTime Movies (Windows or Macintosh)
Sun AU (Windows or Macintosh)
System 7 Sounds (Macintosh only)
WAV (Windows or Macintosh)

Pengantar Pemrograman Animasi / Darmawan hal 34

 Flash akan memasukkan sounds yang di import kedalam
library bersama bitmaps dan symbols. sebagai graphic
symbols, kita hanya memerlukan satu buah copy sound untuk
di pergunakan dalam seluruh movie.

Sounds dapat di pergunakan tergantung besarnya disk space

dan RAM. Walau bagaimanapun, data MP3 sound terkompresi
dan lebih kecil dari pada WAV atau AIFF data sound. Secara
umum, ketika menggunakan file WAV atau AIFF files, lebih
baik jika kita menggunakan 16-bit 22 kHz mono sounds (stereo
menggunakan besaran data yang sama besarnya dengan
mono), tetapi Flash dapat mengimport keduanya 8- atau 16-bit
sounds sebagai contoh pada 11 kHz, 22 kHz, atau 44 kHz.
Flash dapat melingkupi sounds ke sample rates yang di export
yang lebih rendah.

Jika kita hendak memasukkan effects sounds kedalam Flash,

lebih baik mengimportnya dalam 16-bit sounds. Jika kita
memiliki RAM yang ter batas, buatlah sound clips kita dengan
pendek atau menggunakan 8-bit sounds sampai 16-bit sounds.

1. Untuk mengimport sebuah sound:

a) Importlah file sound yang dibutuhkan kedalam library

Pengantar Pemrograman Animasi / Darmawan hal 35

 2. Tempatkanlah dalam time line, ingat jika memakai dua file
sound gunakanlah frame yang terpisah, karena nantinya
akan bertumpuk. Dan sound terakhir yang di masukkan lah
yang akan aktif

3. Perbedaannya terlihat seperti pada time line berikut ini

Pengantar Pemrograman Animasi / Darmawan hal 36

 BAB V

Pengantar Pemrograman Animasi / Darmawan hal 37

 DASAR DASAR ANIMASI

a. Animasi Bentuk
Animasi ini bertujuan untuk merubah suatu bentuk simbol
grafik tertentu menjadi bentuk lain, bahkan menjadi teks
(yang akan kita bahas nanti).
o Pertama buatlah sebuah persegi di sebelah kiri stage

o Pada frame 30 buatlah blank Keyframe, Insert >

Blank Keyframe. Tujuannya adalah untuk memesan
beberapa frame kosong sampai frame ke 30. Dan
buatlah sebuah gambar, dengan bentuk apa saja
sesuai imajinasi kita, pada frame ke 30.

Pengantar Pemrograman Animasi / Darmawan hal 38

 o Kembalilah pada frame ke-1. dan pilihlah Tween :
Shape pada properties.

perhatikan Timelinenya menjadi

Sekarang cobalah hasil animasi kita dengan perintah

ctrl + enter atau pilih Control > Test Movie .
b. Animasi Gerak
Untuk lebih memahami animasi jenis ini, kita akan
memilahnya menjadi Animasi Motion Tween, Animasi
Putar dan Animasi Jalur.
1. Animasi Motion Tween, animasi ini adalah animasi
paling mendasar dan paling sering dipakai dalam
Flash. Caranya sederhana sekali, perhatikan contoh
berikut.

Pengantar Pemrograman Animasi / Darmawan hal 39

  Klik oval tool, lalu buatlah gambar
lingkaran. Jika ingin lingkaran yang kita
buat memiliki jari jari yang sama tekan shift.
 Berikutnya kita akan menganimasi lingkaran
tersebut. Pilihlah lingkaran tersebut dengan
perintah Edit > Select All, perintah ini
diberikan agar fill dan strokenya dipilih
sekaligus.

 Kemudian konversi gambar tersebut menjadi

simbol Insert > Convert to Symbol, dan
pilihlah behaviornya Graphic.

 Kemudian masukkan Keyframe pada frame

ke 30 di Timeline, lalu klik Arrow tool, dan
pindahkan lingkaran ke sisi kanan.

Pengantar Pemrograman Animasi / Darmawan hal 40

  Terakhir pada frame ke-1 pada properties
pilihlah Tween : Motion.

Jika perintah ini berhasil sempurna

perhatikan Timeline berubah menjadi anak
panah tanpa putus.

Pengantar Pemrograman Animasi / Darmawan hal 41

 Sekarang cobalah hasil animasi kita dengan perintah
ctrl + enter atau pilih Control > Test Movie .
2. Animasi putar
Animasi ini bertujuan menggerakkan hasil animasi
sebelumnya sehingga memberi kesan berputar pada
gambar.
 Pertama buatlah sebuah bola, dengan cara
memakai oval tool tetapi diberi warna
gradasi dan pencahayaan dari kiri atas
dengan memakai paint bucket tool pada
bagian yang di inginkan.

 Ubahlah simbol menjadi grafik

 Pada frame ke 30 masukkan Keyframe,
tetapi pindahkan bola ke bagian lain dari
stage.

Pengantar Pemrograman Animasi / Darmawan hal 42

  Kembalilah ke frame 1, berilah animasi
gerak tetapi di tambah dengan rotasi.
Pilihlah ease dan jenis rotasinya sesuai
selera.

Sekarang cobalah hasil animasi kita dengan perintah

ctrl + enter atau pilih Control > Test Movie .
3. Animasi Jalur
Animasi ini sering kali dipakai untuk
menggambarkan gerakan gerakan tertentu dalam
Fisika, seperti gerakan peluru, planet dll.
Kita akan ambil contoh menggambarkan animasi
gerakan pesawat;
 Buatlah dua buah layer, satu layer guide dan
satu layer biasa. Layer guide berguna
sebagai lintasan bagi objek yang akan kita
gerakkan.

Pengantar Pemrograman Animasi / Darmawan hal 43

  Perhatikan pada time line frame disediakan
sampai frame 30 dengan Insert > Frame.
Tetapi sebelum itu buatlah lintasan pada
frame 1 di guide layer 1.

 Kemudian simpanlah objek pada frame 1

layer 1. kemudian Insert > Keyframe pada
frame 30.
 Proses animasinya sendiri dilakukan di
frame 30 dengan cara memindahkan objek
dari ujung kiri lintasan ke ujung kanan

Pengantar Pemrograman Animasi / Darmawan hal 44

 lintasan hati hati proses klik & dragnya tidak
boleh melenceng dari lintasan yang telah di
tentukan. Jika sudah selesai kembali ke
frame 1 di layer 1 dan berikan Tween:
Motion di properties.

Pesawat berawal dari

titik ini, gerakkan
secara hati hati
sampai end point

• Sekarang cobalah hasil animasi kita dengan

perintah ctrl + enter atau pilih Control >
Test Movie .

c. Animasi Warna
Animasi warna seringkali dipakai baik pada teks
maupun simbol. Sekarang kita akan mencoba teks

Pengantar Pemrograman Animasi / Darmawan hal 45

 yang lajim dipakai pada banyak website. Sebagai
cara untuk menarik pengunjung.
o Pertama tama ketikkan sebuah tulisan dengan warna
yang kita sukai pada frame 1 kemudian copykan ke
frame 20 dan 40.
o Kemudian pada frame 20 ganti lah color pada
propertiesnya menjadi alpa 0%, agar memberi efek
menghilang. Dan color tint 100% dengan warna
dirubah dari warna awal. Contoh jika awalnya
merah di frame 1 maka ganti jadi warna biru di
frame 40 dst. Perintah ini selain memberi perubahan
warna, 100% mengakibatkan warna jadi timbul
kembali.

Pengantar Pemrograman Animasi / Darmawan hal 46

 • Sekarang cobalah hasil animasi kita dengan
perintah ctrl + enter atau pilih Control > Test
Movie .

d. Animasi Masking
Animasi ini berguna untuk menutupi suatu objek
dengan objek lain, baik bertujuan untuk mebuat
suatu simbol seakan akan menghilang, atau
memang di tutup dengan simbol yang lain.
• Pertama tuliskan lagi tulisan tadi pada frame
1
• Buatlah satu layer lagi dengan cara Insert >
layer. Dan gambarlah sebuah kotak tanpa garis
pinggir di frame 1 layer 2. ingat fillnya beri warna
putih.
• Copykan frame 1 ke frame 15 dan 30. tapi
pindahkan kotak ke bawah tulisan pada frame 15
dan kembalikan ke posisi semula di frame 30
• Kembali lah ke frame 1 dan beri tween:
Motion pada propertiesnya. Begitupun pada frame
15

Pengantar Pemrograman Animasi / Darmawan hal 47

 • Terakhir klik kanan pada layer 2, dan berilah
perintah mask, untuk memberikan efek masking.

Pengantar Pemrograman Animasi / Darmawan hal 48

 • Sekarang cobalah hasil animasi kita dengan
perintah ctrl + enter atau pilih Control > Test
Movie .
e. Animasi Teks
Yang di maksud namimasi teks di sini adalah proses
animasi dengan cara mendistribusikan hurup sesuai animasi
yang di inginkan.
• Ketiklah hurup FPMIPA pada frame 1 layer
1, kemudian rubahlah menjadi simbol teks terpartisi
dengan memberi perintah modify > break apart

Pengantar Pemrograman Animasi / Darmawan hal 49

 • Kemudian distribusikan dalam beberapa
layer dengan perintah modify > distribute to layer
agar hurup hurup yang sudah terpartisi di pisah
dalam beberapa layer sehingga masing masing bisa
di beri perintah animasi yang berbeda sesuai
kebutuhan.

• Setelah memberikan perintah animasi pada

masing masing hurup, cobalah hasil pekerjaan kita.

f. Animasi Tombol

Pengantar Pemrograman Animasi / Darmawan hal 50

 Animasi tombol adalah animasi dasar terakhir yang
diperlukan bagi animator yang bertujuan untuk alat
navigasi antar frame atau memberikan perintah action
script pada objek anime.
• Pertema tama buatlah dua buah frame.
Frame yang pertama

• Frame yang kedua

Pengantar Pemrograman Animasi / Darmawan hal 51

 • Kemudian kita akan menganimasikan
tombol tersebut dengan proses animasi yang paling
sederhana.

1. Rubahlah teks tombol maju menjadi symbol

Button
2. Kemudian klik dua kali tombol tadi untuk
memberikan animasinya. Sehingga akan tampak
layer tombol,

3. Tampak ada 4 posisi dalam tombol

 Up; maksudnya tampilan awal dari tombol
atau statis teks
 Over; adalah posisi ketika pointer berada di
atas tombol

Pengantar Pemrograman Animasi / Darmawan hal 52

  Down; adalah ketika user dalam keadaan
menekan / mengklik tombol
 Hit; area yang akan bereaksi jika mouse di
klik.
4. Berikanlah key frame pada over dan down,
untuk meng-insert frame yang sama
5. Kemudian rubah lah warna masing masing
simbolnya dengan warna yang berbeda.
• Berikutnya kita akan memberikan action script.
Caranya pada tombol yang sudah kita berikan
animasi standar tadi klik kanan dan pilihlah action.
Sehingga tampak windows berikut;

• Pilihlah layout normal bagi kebanykan pemula.

Pilihan ini lebih sederhana. Kemudian pilih
lambang (+) kemudian pilih actions > movie
control > goto.

Pengantar Pemrograman Animasi / Darmawan hal 53

 • Masukkan lah nama frame kita (Ahir) jangan lupa
memberi tanda petik!
• Berikan perintah yang sama pada tombol
berikutnya.
• Sekarang cobalah hasil kerja kita.

Secara umum dasar dasar animasi sebetulnya hanya yang telah

disebut diatas. Sisanya tinggal kreatifitas menggabung gabungkan
beberapa jenis animasi. Jika mau bisa juga memanfaatkan action
script lebih banyak. Tentu saja untuk itu diperlukan pemahaman
bahasa pemrograman yang baik. Hakikatnya bahasa yang dipakai
dalam bahasa pemrograman itu itu juga. Biasanya perbedaannya
terletak pada penggunaan tanda baca, misalnya , . : : “ ‘ dst. Untuk
itu akan di bahas dalam MK Khusus.

Pengantar Pemrograman Animasi / Darmawan hal 54

 BAB VI
PUBLISH

Cara untuk mempublish sebuah program Flash adalah File

> Publish. Tetapi seringkali bagi mereka yang advance mensetting
publish adalah sesuatu yang penting. Karena default setting
publish hanya mempublish fla menjadi swf dan html saja.
Publish setting
a. Format setting

Pengantar Pemrograman Animasi / Darmawan hal 55

 pada setting ini yang paling sering kita perlukan adalah
menampilkan format executable (.exe) format ini
menjadi penting agar program animasi yang kita buat
bisa di tampilkan di semua PC lain walaupun
Macromedia Flash MX tidak terinstalasi.
b. Flash setting
Pada setting flash, bagian yang penting adalah pada
• Protect from import; item ini bertujuan
menghindari penjiplakan karya karena
dimungkinkannya perubahan dari film flash
kembali menjadi dokument flash yang
berekstensi .fla
• Sedangkan pada item password ditujukan
untuk menghindari akses software yang kita
buat oleh user yang tidak kita harapkan.
• Jika dalam animasi kita menggunakan fasilitas
suara, audio stream dan audio event juga
penting untuk diperhatikan sebagai alat
kompresi file
• Untuk mengurangi ukuran file, JPEG Quality
juga harus diperhatikan. Hal ini agar gambar

Pengantar Pemrograman Animasi / Darmawan hal 56

 memiliki kualitas kompersi sesuai kebutuhan
saja. Ingat flash berbasis Vektor.

c. Html
Karena kita baru fokus pada pemrograman grafis
animasi sebagai pengantar, maka kita akan memakai
default seting pada bagian ini. Yang harus lebih
menjadi perhatian adalah pada dimension, maksudnya
jika kita ingin menampilkan dengan ukuran tertentu
bisa menggunakan pixels dan percent

Pengantar Pemrograman Animasi / Darmawan hal 57

Pengantar Pemrograman Animasi / Darmawan hal 58
 Daftar Pustaka

Afrizal Mayub, (2005). e-Learning Fisika, Yogyakarta: Graha

Ilmu.

Asnawir. (2005). Media Pembelajaran, Jakarta. Ciputat Press.

Chandra (2005). Menu interaktif Flash MX, Palembang, Maxikom.

Erhans A. (2003). Flash MX, Cirebon: e-Con & WIT.

Jensen and Sandlin (1997). Electronic Teaching and Learning:

Trends in Adapting to Hypertext, Hypermedia, and

Networks in Higher Education, San Antonio,

www.trinity.edu.

John Stenzel, Andy Jones (1997,2005). The Computer – Aided

Instruction Program, UCDAVIS, www.cai-

ucdavis.edu.

Lukmanul Hakim, dkk (2003). Teknik Jitu menguasai Flash MX,

Jakarta, Elekmedia Komputindo.

Pengantar Pemrograman Animasi / Darmawan hal 59

Macromedia (2005). Software source Macromedia Flash MX,

ContextHelp.htm, Macromedia

Macromedia (2005). http://www.macromedia.com/support/flash/,

Macromedia.

Rathiphong Pittayanupakom (1999). Computer Aided Instruction,

Thailand, www.kmitnb.ac.th

Winastwan Gora S. (2005). Membuat CD Multimedia Interaktif,

Jakarta: Elekmedia Komputindo

Pengantar Pemrograman Animasi / Darmawan hal 60

Tentang Penyusun

Darmawan Soegandar, lahir di Tasikmalaya,

Jawa Barat tahun 1976. Pendidikan;
Pendidikan Matematika di IKIP
Bandung(1994), Teknik Tekstil di STT
Tekstil(1998) dan Managment Telekomunikasi
dan Informatika di STMB Divlat PT. Telkom
Bandung(2000). Sempat juga belajar di
Matematika Uninus yang kemudian menjadi
tempatnya belajar mengajar. Dan sekarang
pulang kampung untuk menyelesaikan studi di
Sekolah Pascasarjana Universitas Pendidikan Indonesia (IKIP)
Bandung
Buku-buku yang sudah disusun diantaranya:
• Algoritma untuk SMU, SMUN 3 Bandung, 1997.
• Visual Basiq untuk SMU, SMUN 3 Bandung, 1997.
• Memahami Windows for people with disabilities
(penglihatan, pendengaran atau mobilitas yang terbatas),
untuk lingkungan sekolah sekolah berbasis kesehatan dan
luar biasa, ESENES, 2003.
• Pemahaman Dasar Hardware, Bintang Merah, 2004.
• Perbaikan Hardware, Bintang Merah, 2004.
• Plan for Enterpreaneurs, Bintang Merah, 2004.
• Modul TIK SMP Kelas VII-IX, MGMP TIK Ciamis, 2004.
• Belajar dan Pembelajaran Matematika, UNINUS, 2005
• Modul Belajar IHT Komputer di lingkungan MI Depag Kab.
Bandung, 2005.
• Analisa Kepuasan Siswa terhadap Matematics Computer
Aided Instruction, UNINUS, 2006.
• eMath Book untuk Madrasah Aliyah, DEPAG, 2006
• Pengantar Pemrograman Animasi, Bintang Merah, 2006.
• Aplikasi Komputer untuk Pendidikan, Bintang Merah, 2007

Pengantar Pemrograman Animasi / Darmawan hal 61