Nama: Kelas/No.absen:
BAB V
1 Page
Mengenal perangkat lunak pembuat animasi
5.1 Mengenal Animasi Macromedia Flash
Definisi Animasi
Yang artinya kurang lebih adalah : Animasi adalah sebuah proses merekam
dan memainkan kembali serangkaian gambar statis untuk mendapatkan
sebuah ilusi pergerakan secara terus menerus.
Secara garis besar, animasi computer dibagi menjadi dua kategori, yaitu:
1. Computer Assisted Animation, animasi pada kategori ini biasanya
menunjuk pada system animasi 2 dimensi, yaitu mengkomputerisasi proses
animasi tradisional yang menggunakan gambaran tangan.
Computer digunakan untuk pewarnaan, penerapan virtual kamera dan penataan
data yang digunakan dalam sebuah animasi.
2. Computer Generated Animation, pada kategori ini biasanya digunakan
untuk animasi 3 dimensi dengan program 3D seperti 3D Studio Max, Maya,
Autocad dan lain sebagainya.
Multimedia menurut Rosch didefinisikan sebagai kombinasi dari computer dan
video, menurut McCornick multimedia secara umum merupakan kombinasi
tiga elemen, yaitu suara, gambar dan teks. Menurut Turban, dkk multimedia
adalah kombinasi dari paling sedikit dua media input atau output dari data,
media ini berupa audio (suara, musik), animasi, video, teks, grafik, dan gambar.
Menurut Robin dan Linda multimedia merupakan alat yang dapat menciptakan
presentasi yang dinamis dan interaktif yang mengkombinasikan teks, grafik,
animasi, audio, dan gambar video. Definisi lain dari multimedia yaitu dengan
menempatkan dalam konteks seperti yang dilakukan Hofstetter, multimedia
adalah pemanfaatan computer untuk membuat dan menggabungkan teks, grafik,
audio, gambar bergerak (video dan animasi) dengan menggabungkan link dan
tools yang memungkinkan navigasi, berinteraksi, berkreasi, dan berkomunikasi.
Macromedia Flash
Macromedia Flash merupakan sebuah program yang didesain khusus oleh
Macromedia, saat itu sebagai pengembangnya yang saat ini sudah dibeli oleh
Adobe Incorporated sehingga berubah nama menjadi Adobe Flash, Flash
didesain dengan kemapuan untuk membuat animasi 2 dimensi yang handal dan
ringan sehingga flash banyak digunakan untuk membangun dan memberikan
efek animasi pada website, CD Interaktif dan yang lainnya.
Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit
code pemograman baik yang berjalan sendiri untuk mengatur animasi yang ada
didalamnya atau digunakan untuk berkomunikasi dengan program lain seperti
HTML, PHP, dan Database dengan pendekatan XML.
5.2 Bagian-bagian penting dalam area kerja Macromedia Flash
2 Page
Dibawah ini adalah beberapa Screenshoot Tampilan Utama Flash :
Macromedia Flash 8
1. Menu
Menu pada Macromedia Flash Pro 8 terdiri dari: File, Edit, View, Insert,
Modify, Text Commands, Control, Window dan Help. Anda dapat melihat
submenu yang terdapat pada masing-masing menu dengan mengeklik satu kali
pada menu yang ingin Anda pilih.
4
Timeline atau garis waktu merupakan komponen yang digunakan untuk
Page
mengatur atau mengontrol jalannya animasi. Timeline terdiri dari beberapa
layer. Layer digunakan untuk menempatkan satu atau beberapa objek dalam
stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari frame-frame
yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame
dalam lay er, maka semakin lama animasi akan berjalan.
5
dan shortcut untuk Color Swatches adalah Ctrl+F9.
Page
5.5 Panel Align & Info & Transform
Untuk menampilkan panel ini Anda dapat menekan Ctrl+K pada keyboard.
Panel ini digunakan untuk mengatur posisi objek, ingin diletakkan pada tengah
stage, sebelah kiri atau kanan dan lain-lain. Dengan panel ini Anda juga dapat
memutar objek dengan Transform.
BAB VI
6
6.1. Menjalankan Macromedia Flash
Page
A. Membuat Dokumen Baru
Untuk membuat dokumen baru , ikuti langkah-langkah sebagai berikut :
_ Pilih File, New
_ Muncul jendela New DocumentPilih General, Flash Document,Ok
B. Mengatur Dokumen Flash
Digunakan untuk untuk mengatur tayangan, background.
7
_Muncul Jendela Import
Page
_Pilih open untuk membuka gambar.
Import dapat dilakukan langsung ke library (disimpan di program Flash) dengan
cara Pilih File, Import, Import library.
Agar gambar yang dipilih tersedia/muncul di library, pilih menu Window,
Library.
E. Mengorganisir Layer
Double klik pada layer1 ganti tulisan dengan mengetikkan kata foto, lakukan
double enter untuk mengakhiri.
F. Membuat layer baru
8
Pilih insert layer, double klik layer 2, ketik tulisan teks. Maka terbentuk layer
Page
baru.
G. Membuat Teks
Pilih Text tool (T), tekan dan geser pointer pada gambar (stage) sampai
berbentuk kotak. Klik sebarang lokasi untuk mengakhiri tulisan.
H. Menggambar Obyek (Object Drawing )
Diawali dengan membuka file baru, kali ini menggambar obyek kotak dan
menulis teks.
_Pilih file, New
_Muncul kotak New Document, pada general pilih flash document, akhiri
dengan Ok.
I. Merubah Warna
PRAKTEK 2
1. Lanjutkan membuat layer baru bernama garis, buatlah garis dengan
menggunakan line tool ( )
dengan warna biru.
2. Buatlah layer baru dengan nama teks 3, buatlah teks menggambar garis,
warna biru.
3. Rubahlah ketebalan garis dengan memilih garis, klik stroke height pada
properties ( ),
Rubah juga bentuk garis sesuai keinginan dengan klik stroke style (
).
4. Cek dengan hasil berikut ini.
11
Anda akan menemui gambaran pada area timeline sewaktu membuat frame by
Page
frame animation atau motion tweened animation.
Gambaran keyframe pada area timeline dapat dilihat dalam bentuk titik hitam.
Anda akan melihat berbagai gambaran berikut ini pada area timeline sewaktu
membuat animasi:
Frame-frame tween diwakili oleh panah hitam dengan warna latar biru terang.
Frame-frame yang di tween diwakili oleh panah hitam dengan warna latar hijau
terang.
Garis titik-titik tersebut menandakan bahwa keyframe terakhir tidak ada. Untuk
melihat perubahan dalam suatu animasi, minimal dibutuhkan dua keyfame
Kalau hanya terdapat 1 keyframe, Anda akan seperti melihat gambar-yang diam
tidak bergerak.
Frame-frame yang sama dengan keyframe awal yang diwakili oleh warna abu-
abu terang dan gambar kotak putih menandakan frame terakhir.
Gambar 'a' kecil menandakan bahwa ada perintah atau script agar di frame
tersebut melakukan sesuatu.
Gambar 'bendera merah' menandakan bahwa di frame tersebut berisi atau
komentar.
6.2.1. Animasi Frame by Frame
Frame By Frame Animation animation ini seperti pekerjaan manual yang
dilakukan oleh Manusia bila membuat film kartun dan penggunaannya sangat
cocok untuk animasi yang rumit. Mereka menggambar satu per satu gambar
pada frame dan setelah semuanya baru kemudian dianimasikan.
Cara kerja di Flash pun tidak berbeda seperti yang telah dijelaskan di atas. Kita
menggambar frame per frame di stage, setelah itu baru dijalankan. Animasi
jenis ini ukuran file jauh lebih besar dibanding tweened animation. Oleh karena
itu disarankan bila animasi yang kita buat tidak terlalu rumit, gunakan tweened
animation untuk mengurangi ukuran movie kita.
Berbagai model animasi yang ada, animasi frame to frame merupakan model
yang paling sederhanan.
Praktek 3
Untuk membuat animasi Frame to Frame ikuti langkah-langkah sebagai berikut
1. Membuat Dokumen baru
Pilih File, New, Flash Document, ok, maka muncul gambar seperti berikut.
2. Mengganti layer 1 menjadi garis
12
Lakukan double klik pada layer 1, ganti dengan mengetikkan kata garis, akhiri
Page
dengan double klik.
3. Membuat Garis
Pilih line tool, buat garis vertikal, warna biru, dengan ketebalan 6,75 sehingga
menjadi gambar berikut.
13
Pada stage, Klik kanan, Paste in Place
Page
1
2 3Ulangi 4 kali hingga timeline ke 40.
5. Menyimpan
File, save beri nama frame2frame
Menggeser garis dari titik 1 ke 2
Titik 1 Titik 2
Ulangi 4 kali hingga timeline ke 40, seperti berikut ini.
14Page
6. Menjalankan Animasi
Pilih menu Control, Test Movie. Lihatlah gerakan animasinya.
15
Page
16
Pada animasi ini, Anda mengubah property dari instance, group, atau text block.
Page
Flash dapat men-tween posisi, ukuran, rotasi, dan memiringkan instance, group,
dan tulisan. Flash dapat men-tween warna dari instance dan tulisan, gradasi
warna, fade in atau fade out. Tetapi untuk men-tween warna dari group atau
Tulisan, Anda harus membuat mereka menjadi symbol terlebih dahulu. Untuk
membuat motion tweening, Anda tinggal menentukan keyframe awal dan akhir.
Kemudian Flash otomatis akan men-tween frame-frame di antaranya sehingga
terbentuklah animasi.
Berdasarkan ilustrasi di atas, ikan pada frame kedua, ketiga, dan keempat adalah
hasil tweening yang dibuat oleh Flash berdasarkan pada frame pertama dan
kelima. Frame ke-1 dan ke-5 merupakan frame kunci atau keyframe dalam
proses tweening.
Praktek 4
Langkah-langkah pembuatan animasi Tweening sebagai berikut :
1. Membuat dokumen baru
Pilih menu File, New, Flash Document, Ok.
2. Membuat Layer
Lakukan double klik pada layer name (layer 1), ganti menjadi kotak, akhiri
dengan menekan tombol
keyboard enter.
3. Menggambar kotak
Pilih rectangle tool ( ), buatlah gambar kotak di stage.
4. Convert to Symbol
Pilih gambar kotak pada stage menggunakan selected tool ( ), klik kanan, pilih
convert to symbol.
Muncul jendela convert to symbol, isikan name: kotak 1 dan pilih type graphic,
pilih Ok untuk menutup jendela.
Pilih Frame 25,
Klik kanan mouse, pilih insert keyframe,
Geser kotak ke kanan (panjang sesuai keinginan).
Page 17
Page 18
Geser ke tempat baru
19Page
6. Menyimpan
Simpanlah hasil kerja dengan nama tweening, klik save.
7. Melihat Hasil
Pilih menu control, test movie
Lihatlah gerakan kotak ke kanan, akhiri dengan menekan close.
2. Animasi Motion Shape
20
Animasi bentuk/shape dibedakan menjadi 2 bagian yaitu:
Page
a. Animasi bentuk dengan objek statis/diam di tempat
b. Animasi bentuk dengan objek dinamis/bergerak (ada motion-nya)
Yang perlu diperhatikan ketika Anda akan membuat animasi bentuk baik yang
statis ataupun dinamis adalah bahwa objek tidak perlu di Convert to Symbol.
a. Animasi Bentuk Statis
Praktek 5
Langkah 1:
Buat objek lingkaran dengan Oval Tool.
Langkah 2:
Klik Frame 30, kemudian Insert Keyframe.
Langkah 3:
Ubah bentuk lingkaran menjadi bentuk bukan lingkaran, menggunakan
subselection tool.
Langkah 4:
Klik frame 1, pilih tween-shape di bawah stage.
Langkah 5:
Tekan Enter untuk Play atau Ctrl + Enter untuk Test Movie.
21
Masih di frame 40, buat teks KOTAK, lalu tekan Ctrl + B (2x), agar teks
Page
terkonversi
menjadi objek.
Langkah 5:
Kembali ke frame 1, pilih tween-shape, tekan Enter.
Perhatikan pada Gambar terlihat bahwa objek ikan di atas akan bergerak
mengikut garis atau path.
Animasi selain menggunakan frame toframe, juga dapat menggunakan
tweening. Pembuatan animasi dengan metode tweening atau in betweening
yaitu pengguna hanya perlu membuat adegan awal dan adegan akhir saja,
kemudian computer akan menggenerate secara otomatis frameframe antaranya
yang disebut in between.
22
menggunakan Movie Clip.
Page
Panel Action Script digunakan untuk memberikan perintah action pada sebuah
frame, objek tombol, atau Movie Clip Instance. Langkah untuk membuka
jendela Actions adalah dengan menekan tombol F9 ayau klik menu Windows >
Actions.
Struktur Bahasa ActionScript
Seperti halnya dalam menggunakan bahasa alamiah, kita perlu menempatkan
kata benda, kata sifat, dan kata kerja dalam susunan yang dimengerti orang lain.
Di sini kita menyusun objek, properti dan metode sampai membentuk statement,
atau pernyataan, yang dimengerti Flash.
Flash menggunakan struktur bahasa sintaks dot. Dot atau titik digunakan untuk
menunjukkan properti atau metode yang terkait dengan objek. Contoh:
Ballerina.berat = 50
Flintstone.berat = 65
Pernyataan di atas menetapkan nilai 50 untuk properti berat dari Ballerina, dan
nilai 65 untuk berat dari Flintstone.
Ballerina.pakaian.warna = putih
Pernyataan di atas menjelaskan putih sebagai properti warna pada objek pakaian
yang terkait dengan objek Ballerina. (Di sini properti pakaian milik Ballerina
merupakan objek juga, yang memiliki propertinya tersendiri).
Ballerina.menari()
Pernyataan di atas menjelaskan metode menari yang diterapkan pada objek
Ballerina. Tanda kurung buka dan kurung tutup memberi tanda kalau menari
adalah metode.
Ballerina.menari(cepat)
Ballerina.menari(lambat)
Metode seringkali memiliki argumen atau parameter, yang menerangkan
bagaimana seharusnya metode dijalankan.
Tip: Untuk memudahkan, bacalah dot syntax dari belakang. Misalnya
Ballerina.pakaian.warna = putih dapat dibaca Putih adalah warna pakaian dari
Ballerina.
Kategori ActionScript
Dalam mode normal, action dibagi dalam berbagai kategori, yaitu:
1. Basic Actions. Kategori ini menampung action sederhana yang sering sekali
digunakan untuk movie Flash, seperti navigasi dan perilaku tombol.
2. Actions. Kategori ini meliputi Basic Actions ditambah dengan banyak action
lain yang lebih kompleks.
3. Operators. Kategori ini berisi simbol yang digunakan misalnya untuk operasi
logika dan matematika, seperti tambah, kurang, kali, dll.
4. Functions. Function berisi action yang dapat menerima data tertentu untuk
kemudian menghasilkan informasi yang dapat kita gunakan.
5. Properties. Kategori Properties berisi properti objek yang dapat dimodifikasi.
23
Sebagian besar properti ini digunakan untuk objek klip movie.
Page
6. Objects. Flash memiliki kelas objek yang sudah didefinisikan (predefined
class). Kelas-kelas ini berada dalam kategori Objects di ActionScript.
Navigasi
Salah satu fungsi mendasar dari ActionScript adalah untuk membuat navigasi
movie Flash. Yang dimaksud navigasi ini adalah bagaimana membantu user
untuk masuk ke bagian-bagian movie tertentu misalnya frame atau scene
tertentu. Navigasi ini erat kaitannya dengan sistem menu dan struktur konten
suatu movie Flash.
Untuk navigasi standar, action yang paling banyak digunakan adalah action
yang terdapat dalam kategori Basic Actions, yaitu: Stop, Play, dan GoTo. Stop
digunakan untuk menghentikan movie, Play digunakan untuk menjalankan
movie. Sedangkan GoTo memiliki dua variasi, yaitu gotoAndPlay dan
gotoAndStop. Sesuai dengan namanya gotoAndPlay memerintahkan Flash
untuk masuk ke frame atau scene tertentu dan memainkannya. Action
gotoAndStop adalah kebalikannya.
Praktek 7
Membuat Navigasi Sederhana
Pada dasarnya tutorial ini dapat dikembangkan untuk membuat sebuah
permainan atau game yang sederhana. Mungkin Anda pernah melihat atau
bahkan Anda sudah pernah bermain game pesawat tempur, untuk menggerakkan
pesawat tempur tersebut kita dapat menggunakan tombol navigasi anak panah
yang ada di dalam keyboard.
Tombol anak panah atas, bawah, kiri dan kanan dipakai untuk mengendalikan
gerak pesawat. Tentu Anda bertanya apa sulit untuk membuat navigasi dengan
menggunakan keyboard? Tentu tidak karena Flash telah menyediakan printah-
printah praktis 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) {
24
if(Key.isDown(Key.UP)) {
Page
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;
}
}
25
Menghasilkan Karya dengan Macromedia Flash
Page
Proyek 1. Animasi Ombak
Untuk membuat animasi ombak , ikuti tutorial sebagai berikut :
1. Buka program flash 8
2. Ubah ukuran stage menjadi 768 x 576 pixels.
3. Ganti warna bacground menjadi warna hitam
4. Ganti warna fill color menjadi #336699 dan warna stroke dijadikan
none
5. Klik rectangle tool untuk membuat airnya dengan mendragnya ke stage
sepertigambar dibawah ini.
4. Klik kanan di frame 15 lalu klik insert keyframe, Ubah gambar airnya dengan
cara tarik
26
Page
Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>
27Page
3. Pada layer backround buat desain untuk dijadikan backround.
4. Pada layer dynamic text buat text tool dengan pilihan Dynamic Text.
28
time=new Date(); // time object
Page
var seconds = time.getSeconds()
var minutes = time.getMinutes()
var hours = time.getHours()
if (hours<12) {
ampm = "AM";
}
else{
ampm = "PM";
}
while(hours >12){
hours = hours - 12;
}
if(hours<10)
{
hours = "0" + hours;
}
if(minutes<10)
{
minutes = "0" + minutes;
}
if(seconds<10)
{
seconds = "0" + seconds;
}
Clock_text.text = hours + ":" + minutes + ":" + seconds +" "+ ampm;
7. Pada layer acton ketikan script pada frame 2 gotoAndPlay(1);
8. Insert key frame 2 pada layer dynamic text dan backround