Diklat Teknis Fungsional

Pembentukan Jabatan Calon Pengawas Madrasah

Angkatan III

Mata Diklat:
ICT: Instalasi Perangkat Lunak Animasi,
Mendesain dan Memasang Animasi Pada Sumber Belajar

Narasumber:

Kasmui

(http://kasmui.com)

Diklat Teknis Fungsional BDK Semarang - 1

 Materi 1:

Membuat Animasi GIF

Menggunakan PhotoScape

PhotoScape adalah salah satu program editing photo yang bisa digunakan untuk membuat Animasi
Kartun bergerak (GIF) dari format JPG, PNG, dan format image lainnya. Kita bisa membuat Animasi GIF
menggunakan photo kartun, stiker, logo, bahkan photo kita sendiri. Dalam menu Editor PhotoScape,
terdapat beberapa keunggulan untuk mengedit photo, diantaranya: Frame, Auto Levels, Sharpen, Film
Effect, dan masih banyak lagi kelebihan – kelebihan lainnya. Jadi tidak heran jika banyak pengguna yang
menggunakan PhotoScape sebagai sarana editing photo, termasuk pembuatan Animasi GIF bergerak.

Software pembuat animasi ini sangat sederhana dan mudah penggunaannya, bahkan kita bisa
mendapatkannya secara gratis. Mempunyai tampilan elegan, namun mempunyai banyak manfaat bagi
pengguna yang menyukai dunia editing photo. Beberapa tampilan dasar PhotoScape, seperti Animated
GIF, Batch Editor, Color Picker, Combine, Editor, Page, Paper Print, Print, Raw Converter, Rename,
Screen Capture, Splitter, dan Viewer. Dari salah satu icon tersebut mempunyai keungulannya masing –
masing, dan tidak kalah menariknya dengan software editing lainnya.

Berikut ini adalah tampilan desktop PhotoScape v3.7

Diklat Teknis Fungsional BDK Semarang - 2

Gambar Fitur PhotoScape:

Diklat Teknis Fungsional BDK Semarang - 3

Langkah-langkah membuat animasi:

1. Persiapkan 4 buah gambar JPG dengan tampilan yang berbeda. Gambar bisa disiapkan
menggunakan software editor gambar, misal menggunakan Photoshop, CorelDrwaw, GIMP,
Paint atau pakai PhotoScape dan software gambar lainnya.
2. Atur urutan tampilan gambar
3. Buka program PhotoScape, dan pilih Animated GIF pada tampilan awal.
4. Pilih Add, dan klik Add a Photo (insert) sebanyak jumlah gambar yang dimasukkan
5. Atur Change time. Jika diklik akan muncul pengaturan Display Time

 Misal jika Display Time = 200 berarti waktu pergantian gambar adalah 200/100 = 2 detik
 Pada radio button bisa dipilih untuk pengaturan suatu frame saja atau semua frame

6. Atur Change effect, mengatur efek pergantian gambar, ada 8 efek termasuk tanpa efek (No
effect)

7. Atur Set canvas size. Ada 4 pilihan ukuran gambar animasi yaitu:
1) Set to first photo size = atur ukuran gambar sesuai ukuran gambar pertama
2) Set to big photo size = atur ukuran gambar sesuai ukuran gambar besar
3) Set to small photo size = atur ukuran gambar sesuai ukuran gambar kecil
4) Set canvas size = atur secara bebas ukuran canvas, ada pilihan terkecil 100 x 100,
terbesar 500 x 500, tapi bisa juga diisi bebas tanpa mengikuti pilihan yang sudah ada.

Diklat Teknis Fungsional BDK Semarang - 4

8. Atur Background color, mengatur warna latar belakang canvas
9. Atur ukuran kertas, yaitu Stretch, Paper Full, Image Full, Image full (No Enlargement)
10. Atur Photo Align, mengatur posisi gambar pada canvas jika pilihannya selain Stretch
11. Simpan gambar dengan menekan tombol Save
12. Hasilnya dapat dilihat dengan klik Web Browser Preview
13. Hasilnya dapat juga diklik dari file *.gif tersimpan.

Diklat Teknis Fungsional BDK Semarang - 5

 Materi 2:

Membuat Animasi Gambar Bergelombang

Menggunakan GIMP

Membuat animasi gambar yang bergelombang menggunakan GIMP sangat mudah. Berikut langkah-
langkahnya

1. Siapkan gambar yang akan dianimasi

2. Buka gambar itu dengan GIMP

3. Melalui menu utama GIMP, pilih Filters –> Animation, seperti gambar di bawah ini

Diklat Teknis Fungsional BDK Semarang - 6

4. Kemudian pilih Rippling dan atur Rippling strength, Number of frames dan Edge
behavior. Makin besar Rippling strength maka makin kuat gambar bergelombang, makin hancur
gambar karena gelombang. Makin besar Number of frames makin halus gelombang gambarnya,
tetapi konsekuensinya ukuran gambar makin besar. Pilih juga mode Edge behavior. Setelah selesai
pengaturan, klik OK, maka akan muncul proses konversi. Tunggu sampai selesai

5. Setelah proses konversi selesai, simpanlah gambar dengan pilih File –> Export. Beri nama file
dengan ekstensi GIF dan atur juga tipe gambar dengan pilih tipe GIF image (*.gif), lalu klik
button Export.
6. Kemudian centang As animation, lalu klik Export seperti gambar di bawah ini

7. Setelah tersimpan, bukalah file dengan gif player, misalnya IrfanView.

Diklat Teknis Fungsional BDK Semarang - 7

 Materi 3:

MEMBUAT ANIMASI TEKS DAN GAMBAR

MENGGUNAKAN MACROMEDIA FLASH 8

Pendahuluan
A. Macromedia Flash 8
Macromedia Flash adalah software yang banyak dipakai oleh desainer
web karena mempunyai kemampuan yang lebih unggul dalam menampilkan
multimedia, gabungan antara grafis, animasi, suara, serta interaktifitas user.
Macromedia Flash merupakan sebuah program aplikasi standart authoring tool
profesional yang digunakan untuk membuat animasi objek atau text yang sangat
menakjubkan untuk membuat suatu situs web yang interaktif, menarik dan
dinamis. Software ini berbasis animasi vektor yang dapat digunakan untuk
menghasilkan animasi web, presentasi, game, film, maupun CD pembelajaran
interaktif.
Interaksi user dalam movie flash menggunakan Actionscript. Actionscript
adalah suatu bahasa pemrograman yang berorientasi objek yang dipakai dalam
Macromedia Flash 8,. Macromedia Flash 8 menyediakan fasilitas-fasilitas yang
lebih banyak dan menarik yang akan membantu, mempermudah user dalam
mempelajari atau menggunakan software ini dibandingkan dengan Flash versi
sebelumnya. Animasi-animasi dapat dibuat dengan lebih sederhana, cepat dan
lebih menarik menggunakan Flash MX karena adanya kelebihan yang dimiliki
oleh Flash MX.

B. Area Kerja Macromedia Flash 8

Macromedia Flash MX mempunyai area kerja yang terdiri dari enam
bagian pokok yaitu :
Menu
Berisi kumpulan instruksi atau perintah-perintah yang digunakan dalam
Flash MX. Terdiri dari menu File, Edit, View, Insert, Modify, Text, Control,
Window, Help.

Diklat Teknis Fungsional BDK Semarang - 8

 Stage
Stage adalah layer (document dalam word) yang akan digunakan
meletakkan objek-objek dalam Flash.

Title Bar Time Line Menu Bar

Tools Color
Mixer
Panel
Title Bar

Stage

Properties Panel Action Panels

Gambar 1.1 Area Kerja Macromedia Flash MX

Timeline
Timeline berisi frame-frame yang berfungsi untuk mengontrol objek yang
dibuat dalam stage atau layer yang akan dibuat animasinya.
Toolbox
Toolbox berisi tool-tool atau alat yang digunakan untuk membuat,
menggambar, memilih, menulis, memanipulasi objek atau isi yang terdapat dalam
stage (layer) dan timeline. Alat-alat yang terdapat dalam toolbox adalah :
Arrow tool : memilih dan memindahkan object
Subselect tool : memilih titik-titik pada suatu objek atau garis
Line tool : membuat garis

Diklat Teknis Fungsional BDK Semarang - 9

Lasso tool : memilih sebagian dari object atau bagian tertentu dari
object
Pen tool : menggambar garis-garis lurus maupun garis kurva
Text tool : menulis teks
Oval tool : membuat lingkaran
Rectange tool : membuat persegi maupun persegi panjang
Pencil tool : menggambar garis-garis bebas, seperti menggunakan
pensil biasa
Brush tool : berfungsi seperti kuas untuk mengecat mewarnai suatu
object
Fill Transform tool : mengatur ukuran, tengah, arah dari warna gradasi atau
bidang suatu objek
Free Transform tool : mengubah dan memodifikasi bentuk dari objek yang
dibuat bisa berupa memperbesar, memperkecil ukuran
objek.
Ink Bottle tool : menambah, memberi dan mengubah warna pada garis
di pinggir suatu objek (Stroke)
Paint bucket tool : menambah, memberi, mengubah warna pada bidang
objek yang dibuat
Eyedropper tool : mengidentifikasikan warna atau garis dala sauatu objek
Eraser tool : menghapus area yang tidak diinginkan dari suatu objek

Arrow Sub
Line Lasso
Pen Text
Oval Rectange
Pencil Brush
Free Fill
Ink Bottle Paint
Eye Erase
Zoom
Stroke
Fill Color

Modifier

Diklat Teknis Fungsional BDK Semarang - 10

 Objek-
Objek-objek Dalam Macromedia Flash 8

A. Dasar Objek
Ketika menggambar objek dalam Flash seperti objek lingkaran, kotak, oval
dll, secara otomatis Flash akan menyediakan dua unsur objek, yaitu Fill (bidang
objek) dan Stroke (bingkai/pinggir objek).

Fill (bidang) Stroke

Gambar 2. 1 Unsur Objek

B. Memilih atau Menyeleksi Objek

Objek dalam Flash terbagi dalam dua unsur yaitu Fill objek dan stroke objek.

Gambar 2.2 Gambar 2.3 Gambar 2.4 Gambar

2.5

Keterangan :
Gambar 2.2 Objek Belum Diseleksi Gambar 2.4 Stroke Objek Terseleksi
Gambar 2.5 Fill dan Stroke Objek
Gambar 2.3 Fill Objek Terseleksi
Terseleksi

Untuk melakukan penyeleksian objek, dilakukan dengan menggunakan

Arrow Tool yang terdapat dalam Tools Box, kemudian tinggal di klik fill atau
stroke dari objekyang akan diseleksi. Untuk menyeleksi seluruh objek (fill dan
stroke) double klik pada fill objek tersebut.Objek Terseleksi

C. Membuat Gradasi Warna

Untuk membuat contoh suatu gradasi warna ikuti langkah berikut :
1. Buatlah sebuah objek lingkaran pada stage.

Diklat Teknis Fungsional BDK Semarang - 11

 2. Buatlah lingkaran tersebut tanpa stroke.
3. Seleksi objek lingkaran tersebut.
4. Klik tanda segitiga pada Panel Color Mixer. Jika Panel Color Mixer belum
ada klik menu Window > Color Mixer kemudian tempatkan di bagian panel
(bagian kanan stage).
5. Klik Fill Color, pilih warna hitam.
6. Klik Fill Style pilih Radial. Lingkaran akan berubah menjadi gradasi putih-
hitam
7. Ubahlah gradasi putih-hitam menjadi gradasi hitam-putih. Klik Pointer
Gradasi bagian kiri di Bar Gradasi kemudian klik Fill Color dan ganti
warnanya menjadi hitam.
8. Klik Pointer Gradasi bagian kanan lalu klik Fill Color ganti warnanya menjadi
putih.

Gambar 2.10 Panel Color Mixer dengan Gradasi Radial Putih-Hitam

Gambar 2.11 Hasil Gradasi Warna

D. Transformasi Objek
Untuk mengubah skala objek, langkahnya dalah sebagai berikut :
1. Buat objek segiempat di stage.
2. Seleksi seluruh objek.
3. Klik Free Transform tool pada toolbox
4. Drag salah satu titik sudutnya.

Diklat Teknis Fungsional BDK Semarang - 12

 Gambar 2.12 Panel Transform

G. Menata Posisi Objek

1. Seleksi atau pilih objek yang akan dirapikan.
2. Klik Align Panel (Jika belum ada Klik Window > Align).
3. Klik icon To Stage di Align Panel untuK merapikan objek relatif terhadap
ukuran stage.
4. Klik icon-icon yang ada di Align Panel pada perintah Align, Distribute, atau
Amtch Size untuk merapikan objek yang sudah dipilih sesuai dengan
kebutuhan.

Gambar 2.14 Align Panel

III. Mengolah Teks dan Symbol

A. Mengolah Teks
Teks digunakan untuk menerangkan atau menjelaskan sesuatu dalam
bentuk tulisan, pembuatan judul, komponen animasi, keterangan-keterangan
untuk movie interaktif. Teks merupakan bagian yang mempunyai perananl cukup
besar dalam pembuatan animasi. Teks dapat dimanipulasi atau dimodifikasi
seperti halnya objek dalam Flash 8 sesuai dengan kebutuhan sehingga teks yang
dihasilkan mempunyai banyak variasi.

Diklat Teknis Fungsional BDK Semarang - 13

 Teks dalam Flash ditulis dengan memggunakan bantuan Text Tool pada
Toolbox. Teks yang dihasilkan dapat di setting dengan menggunakan Propeties
Panel. Propeties Panels untuk teks berisi menu atau atribut-atribut untuk membuat
dan mengedit suatu teks.
Bold Style
Italic Style
Text (fill) color Change Direction of Text
Instance Name Char Spacing Font Size Rotation
Aligment
Text Type Font Auto Kern

Weight-Height Line type Selectable Border Variable Edit Format

X-Y Location Option
Edit Char
Render Text as HTML
URL Link Option
Gambar 3.1 Properties Panels Target

Flash 8 mempunyai tiga tipe teks yang masing-masing mempunyai fungsi

yang berbeda. Tipe teks tersebut adalah sebagai berikut :
1. Static Text adalah jenis teks yang mempunyai karakter-karakter seperti teks
biasa pada umumnya.
2. Dynamic Text adalah jenis teks yang dapat menampilkan sifat teks yang dinamis
dan bisa dikontrol, contohnya skor pertandingan olah raga yang yang dapat
berganti sesuai dengan perolehan nilai dari pertandingan, nilai kurs mata uang
dalam bursa efek, dll.
3. Input Text adalah jenis teks yang dapat diisi oleh pengguna atau user dalam
sebuah form isian atau Input Text digunakan untuk menerima berbagai input dari
user.
Teks yang ditulis atau dibuat dalam Flash orientasi dapat diubah sesuai
dengan kebutuhan. Orientasi teks dalam flash ada tiga macam, yaitu horizontal ,
Vertical Left-to-Right dan Vertical Right-to-Left

Diklat Teknis Fungsional BDK Semarang - 14

 Vertical Left-to-Right Horizontal Vertical Right-to-Left

Gambar 3.2 Orientasi Teks

B. Symbol Instance
1. Membuat Simbol
• Pastikan tidak ada objek yang terseleksi pada stage.
• Klik menu Insert > New Symbol.
• Akan tampil kotak dialog Create New Symbol.
• Simbol yang baru dibuat akan diletakkan dalam Library Panel,
kemudian tampilan Stage akan berubah ke Mode Edit Simbol.

Nama

Gambar 4.3 Library Panel

• Pada mode Edit simbol buatlah sebuah objek dengan bantuan tool-tool
untuk menggambar yang ada pada Toolbox.
• Setelah simbol dibuat, klik tombol Back untuk kembali ke Scene 1 atau
kembali ke stage utama.

Diklat Teknis Fungsional BDK Semarang - 15

 2. Mengubah atau Mengonversi Objek Menjadi Simbol
Simbol dapat dibuat dengan mengonversi atau mengubah objek tersebut
menjadi simbol. Langkah-langkah untuk mengonversi objek menjadi simbol
adalah sebagai berikut :
• Pilih salah satu objek yang ada di stage untuk dikonversi menjadi simbol.
• Klik menu Insert > Convert to Symbol. Dapat juga dengan menekan F8
pada keyboard.

Gambar 4.4 Konversi objek ke simbol

• Ketikkan nama untuk simbol tersebut pada kotak isian Name pada
Convert to Symbol.
• Tentukan jenis simbol tersebut dengan memilih opsi yang ada pada
pilihan Behavior.
• Pilih opsi Registration, tentukan titik registrasi dari simbol yang dibuat
dengan meng-klik pada salah satu kotak kecil dari sembilan kotak yang
ada.
• Klik tombol OK.
• Objek telah menjadi simbol ditandai dengan tanda kotak yang
mengelilingi objek pada stage dan simbol akan masuk pada Library
Panel.

Gambar 4.5 Hasil Convert to Symbol

3. Membuat Instance
Instance dapat dibuat dari simbol-simbol yang ada pada Library Panel.
Langkah-langkahnya adalah sebagai berikut :
• Buka Library Panel. Jika belum ada klik menu Window > Library.

Diklat Teknis Fungsional BDK Semarang - 16

 • Pilih salah satu simbol simbol yang ada pada Library Panel.
• Klik dan drag nama simbol atau simbolnya ke stage.

Klik and drag

Klik and drag

Gambar 4.6 Membuat Instance dari Library Panel

IV. Animasi Dalam Flash 8

A. Membuat Animasi Motion Tween

Animasi Motion Tween adalah animasi yang paling banyak digunakan
dalam membuat suatu animasi Tween. Langkah-langkahnya adalah sebagai
berikut.
1. Buka sebuah movie flash baru.
2. Klik Oval tool pada toolbox untuk mengambar sebuah lingkaran tanpa
stroke, beri warna lingkaran tersebut dengan warna gradasi.
3. Seleksi seluruh lingkaran.
4. Klik menu Insert > Convert to Symbol untuk mengubah objek menjadi
simbol atau tekan F8 pada keyboard.
5. Beri nama simbol tersebut pada kotak dialog Convert to Symbol dengan
mengetikkan nama pada kotak Name.
6. Pilih Behavior Graphic dengan mengklik lingkaran di katak dialog,
kemudian klik OK.
7. Ganti nama Layer 1 menjadi Lingkaran dengan double klik layer 1
kemudian ketikkan nama layer.

Gambar 5.1 Mengganti Nama Layer

Diklat Teknis Fungsional BDK Semarang - 17

8. Klik frame 35 di kotak Timeline.
9. Klik menu Insert > Keyframe atau klik kanan tombol mouse kemudian pilih
Insert Keyframe.

Gambar 5.2 Insert Keyframe

10. Masih di frame 35, klik Arrow tool pada Toolbox kemudian pilih lingkaran
dan pindahkan ke bagian kanan layar ( tempat animasi berakhir).
11. Klik frame 1 di Timeline, kemudian klik Properties panel pada bagian
bawah layar. Pilihlah bagian Tween dan klik Motion atau klik frame 1
kemudian klik kanan tombol mouse dan pilih Create Motion Tween.

Gambar 5.3 Create Motion Tween

12. Klik Frame 35, Lingkaran akan berpindah ke bagian kanan layar.
13. Lakukan Test Movie dengan menekan Ctrl+Enter pada keyboard.

B. Membuat Animasi Motion Tween dengan Objek Mengikuti Alur (Path)

1. Buat sebuah movie flash baru.
2. Ganti nama layer menjadi objek.
3. Buatlah sebuah objek lingkaran atau kotak dengan menggunakan Oval
Tool atau Rectange Tool pada Toollbox.
4. Ubahlah objek tersebut menjadi simbol dengan behavior Graphic.
5. Klik frame 35 pada Timeline dan berilah sebuah Keyframe.
6. Buat sebuah layer baru, beri nama layer ini dengan nama Lintasan,
letakkan di bawah layer objek.
7. Buatlah sebuah lintasan pada layer ini dengan menggunakan Pencil Tool
pada Toolbox.
8. Klik frame 1 Layer objek, dan pindahkan objek pada awal lintasan.

Diklat Teknis Fungsional BDK Semarang - 18

 Gambar 5.4 Posisi Awal dan Akhir Objek
9. Klik frame 35 Layer Objek dan pindahkan objek pada akhir lintasan yang
telah dibuat.
10. Kembali ke frame 1, klik menu Insert > Create Motion Tween atau klik
kanan mouse dan pilih Create Motion Tween.
11. Klik kanan Layer Lintasan dan klik Guide, terdapat gambar palu pada
Layer lintasan.
12. Klik Layer Objek, tahan dan drag/geser layer objek sehingga berada di
bawah Layer lintasan, gambar palu berubah pada Layer lintasan.

Gambar 5.5 Layer Guide

13. Lakukan test movie.

C. Membuat Animasi Motion Shape

Animasi motion shape untuk membuat animasi perubahan bentuk satu ke
bentuk lainnya, misalnya bentu kotak ke bentuk lingkaran, teks menjadi lingkaran,
manusia menjadi binatang , dll.
1. Buatlah sebuah movie flash baru.
2. Buatlah objek kotak di stage dengan Rectange tool.
3. Klik Frame 35, lalu klik menu Insert > Blank Keyframe.
4. Klik Text Tool, dan ketikkan kalimat MULTIMEDIA dengan font Arial ukuran
60 Bold.

Diklat Teknis Fungsional BDK Semarang - 19

 Gambar 5.6 Insert Blank Kyframe
5. Klik Modify > Break A Part sebanyak dua kali.
6. Klik frame 1, klik Properties dan pilih Shape pada bagian Tween .
7. Lakukan test movie.

D. Animasi Masking
Animasi masking animasi yang berfungsi seperti topeng yang menutupi
wajah. Animasi masking berguna untuk menutupi objek satu dengan objek
lainnya, sehingga objek yang menutupi terlihat transparan. Misalkan kita ingin
membuat objek tulisan yang akan terlihat jika tertutup oleh objek lain.
1. Buat sebuah movie flash baru.
2. Buat tulisan MULTIMEDIA dengan menggunkan Text Tool.
3. Klik frame 50 lalu klik menu Insert > Keyframe.
4. Klik menu Insert > Layer untuk membuat layer baru sehingga terdapat
dua layer dalam timeline.
5. Klik Layer 2 untuk berpindah dari Layer 1.
6. Buat persegi panjang dengan Rectange Tool, persegi panjang dibuat di
atas tulisan MULTIMEDIA.

Gambar 5.7 Persegi panjang di atas teks

7. Seleksi persegi panjang tersebut dan ubah menjadi simbol dengan
behavior Graphic.
8. Klik frame 25 Layer 2, kemudian klik Insert > Keyframe dan pindahkan
persegi panjang di bawah tulisan.

Diklat Teknis Fungsional BDK Semarang - 20

 Gambar 5.8 Persegi panjang di bawah teks
9. Klik Frame 50 dan pindahkan persegi panjang kembali di atas tulisan.
10. Klik frame 1, kemudian klik Insert > Create Motion Tween atau klik
kanan mouse dan pilih Create Motion Tween atau klik Properties dan
pada calon

Gambar 5.9 Animasi Mask Layer 2

13. Test movie dengan menekan Ctrl + Enter.

E. Animasi Tombol
Tambol atau button dalam Falsh MX dapat diberi animasi sehingga tombol
akan terlihat lebih menarik dan interaktif pada waktu tombol ditekan atau
disentuh dengan mouse pointer.
1. Buka movie flash baru.
2. Buatlah persegi panjang dengan Rectange tool. Klik Rectange Tool dan atur
sudut dari persegi panjang tersebut dengan klik Round Rectange Radius
pada bagian bawah Toolbox (properties).

Diklat Teknis Fungsional BDK Semarang - 21

 Gambar 5.11 Round Rectange Tool
3. Atur sudut-sudut persegi panjang dengan mengganti nilai pada Round
Rectange Radius sebesar 30 point.

Gambar 5.12 Rectange Setting

4. Beri warna persegi panjang dengan warna gradasi,
5. Klik Teks Tool dan ketikkan MENU. Letakkan teks di atas persegi
panjang.
6. Aturlah letak persegi panjang dan teks dengan Allign Panel.

Gambar 5.13 Tombol dan Teks

7. Seleksi seluruh objek (persegi panjang dan teks) dengan drag mouse
sampai seluruh objek berada dalam radius mouse drag atau klik Edit >
Select All.
8. Klik menu Insert > Convert to Symbol atau tekan F8, beri nama
simbol dan pilih Behavior : Button.
9. Klik Edit > Edit Symbol untuk masuk ke menu Edit Symbol atau
Double Klik simbol tersebut.
10. Terdapat empat buah frame pada mode Edit Symbol, yaitu Up, Over,
Down, Hit. Frame-frame ini mempunyai sifat yang berbeda, yaitu :
Up : Keadaan tombol standar.
Ove : Keadaan ketika mouse berada di atas tombol atau melewati
tombol

Diklat Teknis Fungsional BDK Semarang - 22

 Down: Keadaan tombol ketika ditekan
Hit : Penentuan area tombol yang bisa diklik dengan mouse.
11. Klik frame Up kemudian beri Keyframe dengan Insert > Keyframe
atau klik kanan mouse dan pilih Insert Keyframe. Pilih teksnya saja
dan ganti warnanya.
12. Klik frame Over dan beri keyframe. Klik persegi panjang dan ubahlah
warna persegi panjang dan teksnya.
13. Klik Frame Down dan berilah Keyframe. Ubah warna persegi panjang.
Kemudian pilih Teksnya dan ganti tulisan sekaligus warnanya
menjadi DAFTAR.
14. Klik frame Hit dan Insert Keyframe.
15. Klik menu Insert > Layer untuk menambah layer baru. Klik Frame Hit dan
beri Keyframe.
16. Masih di Layer 2, klik Rectange tool dan buat kotak di stage dengan ukuran
lebih besar dari tombol. Atur letaknya dengan Align Panel.

over down hit

Gambar5.14 Keadaan Tombol Pada Masing-Masing Frame

17. Pindahkan posisi Layer 2 di bawah layer 1 dengan klik layer 2 dan drag ke
bawah sampai layer 1.

Gambar 5.15 Posisi Layer 2 dan Keadaan Frame-Frame Layer 2

18. Klik Scene 1 untuk kembali ke stage utama.

19. Lakukan Test Movie.

Diklat Teknis Fungsional BDK Semarang - 23

 Materi 3:

Cara Membuat Animasi Bergerak

Menggunakan Macromedia Flash

Langkah-langkah membuat animasi bergerak dengan Macromedia Flash.

A. Membuat animasi gerak dengan pergeseran tempat

Untuk membuat objek bergerak dan dapat bergeser ketempat lain langkah-langkannya sebagai
berikut:

1. Buka dukumen baru (Flash Document), File  New…  Flash Document

2. Pilih Oval Tool (O) pada tolbar

Diklat Teknis Fungsional BDK Semarang - 24

3. Buatlah bentuk lingkaran

4. Pilih Selection tool

5. Pilih Modify > Convert to Symbol

6. Pada kontak dialog tampilkan seperti berikut

7. Pilih OK
8. Klik mouse di frame 30 timeline, kemudian pilih Insert > Timeline > Keyframe atau klik
kanan pilih Insert Keyframe

9. Klik mouse pada lingkaran kemudian geser

Diklat Teknis Fungsional BDK Semarang - 25

10. Blok pada timeline dari frame 1 hingga frame 30
11. Pilih jendela Propertis, pada pilihan Tween pilih Motion

12. Kemudian Enter atau Play

B. Animasi gerak dengan pembesaran atau pengecilan bentuk

1. Caranya hampir sama dengan yang di atas.

2. Kemudian klik frame 30 pada timeline
3. Pilih Free Trasform Tool arahkan kursor ke salah satu titik sudut yang muncul pada
lingkaran, sambil menekan tombol shift. Lalu tarik mouse ke luar hingga lingkaran
membesar.

4. Jalankan animasi dengan tekan Enter.

C. Animasi bergerak dengan berputar

1. Pilih Selection tool, klik kanan pada mouse di lingkaran, pilih Edit in place.

Diklat Teknis Fungsional BDK Semarang - 26

2. Pilih Paint Bucket Tool
3. Pilih Window  Color Mixer
4. Pada jendela Color Mixer pilih Radial pada pilihan Type

5. Kemudian arahkan kursor ke lingkaran (jangan tengah-tengah) dan klik mouse.

6. Tutup jendela lalu kembali ke Scene 1 dengan cara klik pada tab Scene 1.

7. Kemudian klik frame 30 pada timeline

8. Pilih Modify > Transform > Rotate and Scale
9. Pada jendela Rotate and Scale isi kolom rotate dengan 180
10. Pilih OK, lalu jalankan animasi.

Diklat Teknis Fungsional BDK Semarang - 27

D. Animasi Shape Tween

Animasi shape tween merupakan animasi perubahan bentuk dari bentuk satu ke bentuk yang lain,
misal dari bentuk kotak ke bentuk lingkaran. Hal yang paling penting adalah bahwa animasi
shape tween hanya dapat digunakan pada obyek vektor saja, artinya jika akan membuat animasi
shape tween dengan obyek teks atau bitmap maka terlebih dahulu harus mengubahnya menjadi
obyek vektor.

Perhatikan langkah-langkah berikut:

1. Klik Rectangle Tool (R) pada Tools. Lalu buatlah obyek kotak pada ruang stage

2. Klik kanan pada frame 25 dan pilih Insert Blank Keyframe.

3. Klik frame 25 dan buatlah obyek dengan bentuk yang berbeda di sebelah kanan obyek
kotak. Contoh

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

5. Jika langkah di atas benar maka pada Timeline akan berwarna hijau dengan tanda panah
dari frame 1 sampai frame 25.

6. Tekan Enter untuk menjalankan animasinya.

Diklat Teknis Fungsional BDK Semarang - 28

E. Animasi Motion Tween

Langkah-langkah:
1. Buatlah obyek sembarang, sebagai contoh adalah obyek bintang

2. Lakukan Insert Keyframe pada frame 25

3. Selanjutnya klik kanan diantara frame 1 dan frame 25, kemudian pilih Create Motion
Tween. Timeline yang dihasilkan memiliki dua titik obyek tidak seperti animasi tween
yang hanya memiliki satu titik obyek yaitu pada frame pertama saja.

4. Pindahkan obyek yang berada pada frame 25 ke tempat lain

5. Tekan Enter untuk menjalankan animasi

F. Animasi Motion Classic Guide

Animasi ini adalah animasi perpindahan dari satu tempat ke tempat lainnya menggunakan
lintasan tertentu. Untuk itu kita akan membuat animasi bumi atau planet yang mengitari matahari
dengan menggunakan teknik motion classic guide.

Diklat Teknis Fungsional BDK Semarang - 29

Langkah-langkahnya:

1. Siapkan sebuah dokumen baru dengan dua buah layer baru

2. Klik kanan pada layer 2, lalu pilih Add Motion Guide

3. Buatlah obyek lingkaran pada frame 1 dalam layer 1

4. Buatlah garis berbentuk oval pada frame 1 dalam Guide: Layer 2.

5. Aktifkan Erase Tool, lalu hapus ujung obyek garis oval

6. Panjangkan frame pada Layer Guide: Layer 2 dengan melakukan klik kanan dan Insert
Frame pada frame 25

Diklat Teknis Fungsional BDK Semarang - 30

7. Pada frame 1 dalam Layer 2, buatlah obyek lingkaran dengan mengaktifkan Object
Drawing tepat pada ujung garis oval

8. Klik pada frame 25 dalam Layer 2, lalu pilih Insert Keyframe

9. Klik kanan diantara frame 1 dan frame 25 dalam layer 2, lalu pilih Create Motion
Tween

10. Klik frame 25 dalam layer 2, lalu pindahkan obyek lingkaran ke ujung garis oval

Diklat Teknis Fungsional BDK Semarang - 31

 11. Panjangkan frame pada layer 1 dengan melakukan klik kanan dan Insert Frame pada
frame 25

12. Tekan Enter untuk menjalankan animasi.

G. Animasi Masking

Animasi masking adalah animasi yang berguna untuk menampilkan bidang yang tertutup dan
menyembunyikan bidang yang terbuka.

Langkah-langkahnya:

1. Bukalah dokumen baru dengan dua layer baru

2. Ganti nama layer, dengan ketentuan obyek yang akan disembunyikan berada pada bagian
bawah sedang obyek yang digunakan untuk menampilkan obyek yang disembunyikan
berada pada payer bagian atas. Ubah Layer 1 = Teks dan Layer 2 = Masking

Diklat Teknis Fungsional BDK Semarang - 32

3. Pada Layer Teks tuliskan teks “Selamat Datang”

4. Lakukan Insert Frame sampai frame 30 pada Layer Teks

5. Buatlah obyek yang digunakan untuk menampilkan obyek yang akan disembunyikan,
misalnya obyek bintang. Letakkan obyek bintang pada Frame 1 dalam Layer Masking
dan letakkan obyek lingkaran di sisi kiri tulisan yang sudah dibuat.

6. Selanjutnya buatlah animasi tween pada obyek bintang agar obyek yang tersembunyi
nanti akan muncul seiring berjalannya animasi pada obyek yang menutupinya. Klik
kanan pada frame 30 dalam Layer Masking, kemudian pilih Insert Keyframe.

7. Klik kanan diantara frame 1 dan frame 30 kemudian pilih Create Motion Tween.

Diklat Teknis Fungsional BDK Semarang - 33

 8. Klik frame 30, lalu geser obyek ke sisi sebelah kanan teks

9. Klik kanan pada Layer Masking kemudian pilih Mask. Perhatikan perubahan layer yang
dihasilkan.

10. Klik Enter untuk menjalankan animasi

H. Animasi dengan ActionScript

Membuat animasi yang digerakkan menggunakan ActionScript. ActionScript adalah bahasa

pemrograman di Flash. ActionScript digunakan untuk mengontrol obyek, navigasi, animasi dan
lain-lain untuk membuat program yang dibuat lebih interaktif.

Langkah-langkahnya:

1. Buka halaman baru File  New…  Flash Document

2. Pada menu Properties tentukan size atau ukuran stage 550 x 200 piksel, warna
background putih dan jumlah frame per detik 12.
3. Buatlah sebuah lingkaran seperti contoh berikut:

Diklat Teknis Fungsional BDK Semarang - 34

4. Klik kiri gambar bola dengan Selection Tool (V), lalu klik kanan pada gambar dan pilih
Convert to Symbol. Lihat gambar di atas.
5. Isi nama symbol dengan nama bola dan tipe symbol Movie clip

6. Tampilan movie clip bola sebagai berikut

7. Atur koordinat movie clip bola seperti contoh gambar

Diklat Teknis Fungsional BDK Semarang - 35

8. Klik kanan movie clip bola dan pilih actions

9. Ketikkan script berikut ini di halaman script, caranya lihat gambar berikut

Diklat Teknis Fungsional BDK Semarang - 36

 Klik tanda +  Global Functions  Movie Clip Control  onClipEvent 
enterFrame, lalu selesaikan script seperti gambar berikut:

10. Lakukan test Movie dengan Ctrl + Enter.

Diklat Teknis Fungsional BDK Semarang - 37