No.

Dokumen : IK-GKM-ILK-Fasilkom-TI-011-PBK
Edisi : 01
MODUL
PRAKTIKUM Revisi : 08
Berlaku Efektif : 14 Maret 2022
Halaman : ii dari ii
DAFTAR ISI

KATA PENGANTAR i
DAFTAR ISI ii
MODUL I PENGENALAN ADOBE ANIMATE DAN MENGAMBAR OBJEK ....
SEDERHANA 1
MODUL II DASAR ANIMASI PADA ANIMATE 16
MODUL III ANIMASI LANJUTAN 28
MODUL IV JS ANIMATION DASAR 30
MODUL V HTML5 COMPONENT DASAR 44
MODUL VI COMPONENT 51
MODUL VII DATABASE I 59
MODUL VIII DATABASE II 65
Laboratorium Multimedia – Modul Praktikum Pengajaran Berbantuan Komputer
 MODUL I

PENGENALAN ADOBE ANIMATE DAN MENGAMBAR OBJEK SEDERHANA

I. Tujuan

1. Praktikan diharapkan dapat mengenal dan paham akan fungsi area kerja pada Adobe
Animate

2. Praktikan diharapkan dapat memahami konsep menggambar pada Animate dan

mengetahui bagaimana menggambar ataupun memanipulasi objek pada Animate
dengan tools yang ada pada Adobe Animate.

II. Teori
2.1. Mengenal Jendela Kerja Adobe Animate

Sebelum membuat karya dengan Animate sebaiknya terlebih dahulu dikenal area pada
Animate dan istilah-istilah didalamnya, karena nantinya akan membantu praktikan
sekalian dalam bekerja pada Animate.

Berikut adalah tampilan awal ketika membuka Animate

Gambar 1.1 Adobe Animate

 Ada empat menu utama ketika pertama sekali program Adobe Animate dibuka yaitu :

● Open a Recent Item adalah data Animate terakhir yang dikerjakan

● Create New digunakan jika ingin membuat file Animate dari awal
● Create from Template digunakan ketika kita ingin membuat file Animate dengan template.
● Learn bagian untuk menjelaskan dasar-dasar penggunaan yang ada di Adobe Animate.

Saat Anda memilih Create New Flash Document, maka akan tampil Area Flash
seperti dibawah ini :

Gambar 1.2 Area Kerja Adobe Animate

Pada umumnya, ada lima bagian(area) penting yang sering digunakan pada Animate
terdiri dari lima bagian utama yaitu :

a. Menu Bar: menu-menu yang mengandung kumpulan instruksi atau

perintah– perintah yang digunakan didalam Animate, seperti file,
edit, insert, modify, text, command, control, debug, window dan
help. Menu Bar Terletak pada bagian atas area Animate (Lihat
Gambar di atas).
b. Flash Stage : Area yang digunakan untuk meletakkan objek atau gambar dalam
Animate. Stage terletak pada bagian tengah area Animate.
c. Toolbox : Area yang berfungsi untuk menyimpan berbagai peralatan
standar yang digunakan dalam membentuk atau memanipulasi bentuk
bentuk yang telah anda buat sebelumnya. Pada umumnya dibagi atas
empat bagian, yaitu Tools, View, Colors, dan Options.

Berikut merupakan fungsi tiap tools pada tool box

Tabel 1.1 Tool box Adobe Animate

Tools Nama Fungsi Shortcut

Selection Tools untuk menyeleksi Objek bersifat titik titik dan untuk
V
Tool mengedit objek saat objek belum diseleksi oleh tool ini.

Menyeleksi objek bersifat garis, objek akan otomatis berisi garis

Subselectio
bantu yang kemudian bisa diedit bentuk nya dengan A
n Tool
menggunakan tool ini.

Free Free Transform, untuk memperbesar ato memperkecil ukuran

Transform objek secara proporsional maupun tidak. Hanya saja ini tidak Q
Tool bisa mengubah titik di ujung garis pembentuk objek.

Lasso Tool, untuk memotong objek dengan freehand (bebas).

Caranya dengan memulai sebuah titik pemotong dan terus
Lasso Tool L
potong hingga akhirnya disambungkan kembali ke titik awal
tadi, kemudian digeser.
3D Rotation 3D Rotation Tool berfungsi untuk melakukan rotasi 3D pada
W
Tool objek berdasarkan sumbu X, Y dan Z.

Pen Tool, untuk membuat objek baru dengan metode pen. Yaitu
Pen Tool membuat satu titik kemudian dihubungkan dengan titik yang P
lain.

Text Tool, untuk membuat objek berupa teks. Pilih tool,

Text Tool T
kemudian klik pada stage dan buat tulisan sesuai keinginan.

berfungsi untuk membuat animasi pertulangan dengan

Bone Tool X
menambahkan titik sendi pada object.

Line Tool, untuk membuat sebuah garis lurus. Dengan mengklik

Line Tool N
di satu titik, kemudian drag ke arah titik berikutnya.

Pencil Tool, untuk membuat objek secara freehand. Setalah

Pencil Tool dibentuk, makan akan muncul titik – titik pada setiap sudut yang Y
dibentuk oleh gambar tadi.

Brush Tool, sama seperti Pencil tool. Tetapi objek yang

Brush Tool B
dibentuk dengan warna fill.

Deco Tool ,untuk menggambar corak dekorasi dengan

Deco Tool U
menggunakan simbol graphic.

Ink Bottle
Ink Bottle Tool, untuk mewarnai stroke pada objek. S
Tool
 Paint Bucket
Paint Bucket Tool, untuk mewarnai fill pada objek. K
Tool

Eyedropper Eyedropper Tool, untuk memilih sampel warna kemudian warna

I
Tool akan dikunci dan bisa diberikan pada objek yang lain.

Eraser Tool, untuk menghapus objek. Pastikan objek berupa

Eraser Tool E
titik – titik atau belum digroup.

Hand Tool, untuk menggeser stage (lembar kerja) layaknya

Hand Tool H
menggeser sebuah kertas diatas meja.

Zoom Tool, untuk memperbesar dan memperkecil tampilan

Zoom Tool Z
stage.

Stroke Color, pemilihan warna untuk garis objek. Pewarnaan

Stroke Color -
dilakukan menggunakan Ink Bottle Tool

Fill Color, pemilihan warna untuk fill objek. Pewarnaan

Fill Color -
dilakukan menggunakan Paint Bucket Tool.

d. Timeline : Area yang terdiri dari Layer dan Frame yang digunakan
untuk mengendalikan objek yang dianimasikan. Layer dan Frame
mempunyai kegunaan yang berbeda. Layer digunakan untuk
membuat dua objek yang berbeda pada stage tetapi terlihat menyatu
atau dapat dianalogikan sebagai sebuah kertas transparan yang
ditumpuk menjadi satu. Sedangkan frame dapat dianalogikan dengan
Film. Film merupakan kumpulan gambar yang dimainkan secara
berurutan dengan kecepatan tertentu sehingga gambar terlihat
bergerak. Timeline terletak dibawah Menu.

Gambar 1.4 Timeline pada Adobe Animate

e. Panels : Bagian ini mengandung kendali fungsi yang dipakai dalam

Flash, yang berfungsi untuk mengganti dan mengubah berbagai atribut
dari objek atau animasi secara cepat dan mudah. Adapun panel-panel
yang umum dipakai pada flash adalah sebagai berikut :
1) Panel Properties

Panel yang berguna bila ingin mengatur ukuran, jenis huruf bila kita menggunakan
Text Tool, mengubah warna dan tebal pinggir (Stroke) pada objek, dan masih banyak lagi.
Tergantung pada jenis Tool yang digunakan.

Gambar 1.5 Panel Properties Adobe Animate

2) Panel Library

Panel ini sangat berguna dan akan sangat sering digunakan. Panel ini berfungsi untuk
menampung semua jenis animasi, gambar, tween (pergerakan MovieClip), lagu dan lainnya.
Dapat dikatakan juga panel ini adalah panel untuk menduplikasi, maksudnya pengguna dapat
berulang kali meletakkan animasi yang sama yang telah dibuat dengan menggunakan Symbol.

Gambar 1.6 Panel Library Adobe Animate

3) Panel Color Mixer

Sesuai dengan namanya, panel ini berguna untuk mengkombinasikan warna bidang
(fill) mapun warna pinggir (stroke) baik dengan tipe warna solid maupun gradasi yang linier
atau radial.

Gambar 1.7 Panel Color Mixer Adobe Animate

4) Panel Action

Salah satu kelebihan animate dibanding dengan perangkat lunak animasi lain yaitu adanya
action script. ActionScript adalah bahasa pemrograman Adobe animate yang digunakan untuk
membuat animasi atau interaksi, ActionScript mengizinkan untuk membuat intruksi
berorientasi action (lakukan perintah) dan instruksi berorientasi logic (analisis masalah
sebelum melakukan perintah). Kita bisa memunculkan panel actionScript dengan cara
menekan tombol
 Gambar 1.8 Panel Action Adobe Animate

F9 pada keyboard. Atau melalui menubar dengan cara klik Window > Actions

Sama dengan bahasa pemrograman yang lain, ActionScript berisi banyak elemen yang
berbeda serta strukturnya sendiri. Kita harus merangkainya dengan benar agar ActionScript
dapat menjalankan dokumen sesuai dengan keinginan. Jika tidak merangkai semuanya
dengan benar, maka hasil yang didapat kan akan berbeda atau file flash tidak akan bekerja
sama sekali. ActionScript juga dapat diterapkan untuk action pada frame, tombol, movie clip,
dan lain-lain.Action frame adalah action yang diterapkan pada frame untuk mengontrol
navigasi movie,frame, atau objek lain-lain.
Salah satu fungsi ActionScript adalah memberikan sebuah konektivitas terhadap
sebuah objek, yaitu dengan menuliskan perintah-perintah didalamnya. Tiga hal yang harus
diperhatikan dalam ActionScript yaitu:

4.1 Event
Event merupakan peristiwa atau kejadian untuk mendapatkan aksi sebuah objek.
Event pada Adobe Animate ada empat, yaitu:
a) Mouse event : Event yang berkaitan dngan penggunaan mouse.
b) Keyboard Event : Kejadian pada saat menekan tombol keyboard.
c) Frame Event : Event yang diletakkan pada keyframe.
d) Movie Clip Event : Event yang disertakan pada movie clip.
4.2 Target
Target adalah objek yang dikenai aksi atau perintah. Sebelum dikenai aksi atau
perintah, sebuah objek harus dikonversi menjadi sebuah simbol dan memiliki nama instan.
Penulisan nama target pada skrip harus menggunakan tanda petik ganda (” ”)

4.3 Action
Pemberian action merupakan lagkah terakhir dalam pembuatan interaksi antar objek.

Action dibagi menjadi dua antara lain:

a) Action Frame: adalah action yang diberikan pada keyframe. Sebuah keyframe akan
ditandai dengan huruf a bila pada keyframe tersebut terdapat sebuah action.
b) Action Objek: adalah action yang diberikan pada sebuah objek, baik berupa tombol
maupun movie clip.

2.2. Konsep Menggambar Pada Animate

2.2.1 Unsur Objek Pada Animate

Animate menyediakan beberapa tool yang digunakan untuk menggambar. Beberapa

tool mempunyai fungsi untuk menggambar suatu bentuk tertentu seperti bulat, kotak, garis
lurus, kurva maupun bintang. Di samping itu, terdapat beberapa tool yang berfungsi untuk
mewarnai bentuk atau objek yang telah tersebut.

Suatu bentuk objek apabila digambarkan pada Animate, seperti lingkaran atau
segiempat, secara otomatis akan menggambarkan dua unsur objek, yaitu bidang (fill) dan
pinggir (stroke). Untuk lebih jelasnya dapat kita lihat pada gambar berikut:

Gambar 1.9 Lingkaran dengan Fill dan Stroke

Adapun pengaturan pada panel properties yang dapat dilakukan untuk setiap objek yaitu :
a) Mempertebal pinggir (stroke), Anda dapat menggeser nilai Stroke Height yang terdapat
pada Panel Properties.

Gambar 1.10 Pengaturan Objek pada Panel Properties

b) Menghilangkan stroke ataupun fill pada object

Gambar 1.11Pengaturan warna pada panel properties

1.2.2 Menggambar Objek pada Animate

a) Mengambar garis dengan Pencil Tool
Penggunaan nya dengan klik dan drag untuk membentuk gambar garis. Pada pencil
tool terdapat tiga pilahan pensil (pencil mode), yaitu :
- Straighten mode: Gunakan mode ini jika ingin membentuk kurva yang datar.
- Smooth mode: Gunakan mode ini untuk membuat kurva yang lebih halus.
b) Menggambar Objek dengan Brush Tool
Penggunaannya hampir sama dengan pencil tool, perbedaannya pada metode
membentuk gambar, pada pencil tool gambar yang dihasilkan hanya stroke saja
sedangkan pada pen tool hanya fill nya saja.
Adapun option pada brush tool yaitu :

Object Drawing Brush L

Mode Brush Shape o
c
k
F
i
l
l
B
r
u
s
h
S
i
z
e

Gambar 1.12 Option mode pada brush

Penjelasan :

- Lock Fill: Berfungsi untuk mengisi warna pada lebih dari dua objek dengan
sebuah gradient atau warna lain. Ini bias digunakan dalam masalah dimana
gradient berperan sebagai highlight, seperti lighting akan di tampilkan
melewati objek-objek yang dipilih.
- Brush Mode: Berfungsi untuk mengontrol bagaimana mode brush yang akan
digunakan. Adapun pembagian Brush mode dibagi 5 modifier, yaitu :
o Paint Normal: Mode brush ini menggambar objek secara bebas.
o Paint Fills: Mode brush ini mengisi warna fill pada objek sedangkan stroke
 nya tidak.
o Paint Behind: Mode brush ini mewarnai hanya pada bagian kosong
dari layer Paints only on the empty areas of the layer.
o Paint Selection: Mode brush ini mewarnai hanya pada area yang
dipilih dari objek.
o Paint Inside: Mode brush ini mewarnai hanya bagian dalam dari
sebuah objek, mode ini hanya bekerja jika brush mulai mewarnai dari
bagian dalam objek.
o Brush Size: Digunakan untuk mengatur ukuran (lebar) dari brush yang
ingin digunakan.
o Brush Shape: Menu untuk memilih bentuk brush yang ingin digunakan.

c) Menghapus objek dengan Eraser Tool

 Penggunaan Eraser tool hampir sama seperti brush tool, namun fungsinya untuk
menghapus objek yang dibuat dengan brush tool.
F
Eraser Mode
u
Eraser Shape a
c
e
t

Gambar 1.13 Option Mode pada Eraser tool

Penjelasan :
- Eraser Mode: Berfungsi untuk mengontrol bagaimana mode eraser yang akan
digunakan. Penggunakan mode pada eraser tool sama seperti mode pada
brush tool.
- Eraser Shape: Menu untuk memilih bentuk erase yang ingin digunakan.
- Faucet: Menu ini untuk menghapus sebuah objek dengan sekali klik.

d) Membentuk Objek secara bebas dengan Pen Tool

Pen tool dapat membuat bentuk secara bebas, Penggunaannya dengan klik
mouse pada animate stage, drag, dan lepas maka akan terbentuk garis. Gerakkan
kembali mouse ke arah yang diinginkan di klik untuk membuat sudut atau anchor
point. Bila bentuknya merupakan kurva tertutup maka dapat diberi warna.

Ada beberapa option pen tool yang berfungsi untuk mengedit objek yang
telah dibuat. Adapun option pada pen tool yaitu :

- Add Anchor Point: Klik pada garis untuk menambahkan point (titik) yang dapat
merubah objek.
- Delete Anchor Point: Klik garis pada bagian point (titik) yang ingin di kurangi
untuk merubah objek.
- Convert Anchor Point: Klik pada titik, untuk merubah jenis point (titik) menjadi
corner point.

e) Menggambar Kotak Bersudut Tumpul

Pada Adobe Animate disediakan sebuah Option pada Rectangle Tool, yaitu Round
Rectangle Radius yang memudahkan kita untuk menciptakan objek kotak bersudut
tumpul.
 Gambar 1.14 Pengaturan besar sudut (corner) objek pada panel properties

f) Menggambar bentuk persegi banyak

Untuk menggambar bentuk persegi banyak, klik dan tahan pada Rectangle tool

Kemudian pilih PolyStar tool

Untuk memilih bentuk persegi banyak atau bintang, Pilih Options pada panel
Properties, kemudian pada jendela dialog Tool Settings yang muncul kita dapat
memilih bentuk yang diinginkan serta dapat mengisikan angka berapa segi banyak
yang akan dibuat.
Untuk menggambarnya, klik mouse pada stage kemudian drag sesuai besarnya
objek yang diperlukan.

Gambar 1.15 Pengaturan banyak sudut (corner) objek pada panel properties
g) Menggambar Objek Proporsi
 Objek yang menurut proporsinya adalah objek yang digambarkan seimbang dalam
ukurannya. Misalnya digambarkan suatu segiempat, maka di keempat sisi-sisinya
mempunyai ukuran yang sama. Begitu juga halnya dalam menggambar lingkaran proposi,
lingkaran yang dihasilkan harus benar-banar bulat. Cara agar objek yang kita gambarkan
seimbang dalam ukurannya (proporsional) dengan menekan tombol shift pada keyboard.
Lihat contoh dibawah ini, perbedaan antara objek proporsional dengan yang tidak
proporsional.

Gambar 1.16 Perbandingan dua buah objek yang proporsional dan tidak
proporsional

h) Melakukan Pengirisan Objek

Pengirisan objek (intersection) adalah penumpukan suatu objek dengan objek lain
untuk memotong atau mengurangi objek yang ditumpuki. Ada hal yang perlu
diperhatikan ketika melakukan pengirisan, yaitu objek yang menumpuk harus berada
dalam satu layer dengan objek yang ditumpuki, dan warna objek yang menumpuk dengan
warna objek yang ditumpuki harus berbeda karena apabila menggunakan warna yang
sama akan menyebabkan penyatuan objek.
 Gambar 1.17
Perbandingan dua buah objek yang belum di iris dan yang sudah teriris

Gambar 1.18
Perbandingan dua buah objek yang belum menyatu dan yang sudah menyatu

1.3 Transformasi Objek

Untuk mentransformasikan objek pada Animate, digunakan alat Free Transform pada
Toolbox. Transformasi objek terdiri dari pemutaran (rotate), perbesaran dan pengecilan
(scale), pendistorsian (distort) dan pembungkusan (envelope) yaitu suatu teknik transformasi
untuk melengkungkan objek.

1.4 Pewarnaan Objek

Dalam memberikan warna pada Animate dapat dibedakan menjadi dua, yaitu warna
soliddan gradasi. Warna solid maksudnya adalah warna yang diberikan pada suatu objek satu
warna saja. Sedangkan warna gradasi adalah warna yang diberikan pada suatu objek yang
terdiri dari campuran antara dua warna atau lebih. Terdapat dua jenis gradasi, yaitu Radial
dan Linier. Radial adalah pewarnaan gradasi yang dimulai dari tengah ke pinggir objek atau
sebaliknya. Sedangkan Linier adalah pewarnaan gradasi yang dimulai dari sisi kiri ke sisi
kanan atau sebaliknya dapat juga dari atas ke bawah atau sebaliknya.

Dalam memberikan warna pada objek di Animate dapat dilakukan dengan beberapa
cara. Pertama dengan menggunakan Paint Bucket Tool dan Ink Bottle Tool pada Toolbox.
Kedua dengan cara menseleksi objek kemudian memberikan warna. Kedua teknik pewarnaan
tersebut sama dan dapat digunakan sesuai keinginan.

1.6 Mengatur Letak Objek (Aligning Object)

Dalam Adobe Animate tersedia fasilitas Align yang biasanya digunakan untuk
merapihkan tataletak objek dengan objek ataupun objek dengan stage, juga digunakan untuk
mengatur perataan, mengatur jarak antar objek, dan untuk menyamakan ukuran antara satu
objek dengan objek lain atau ukuran objek dengan scene. Dengan ini Anda dapat merapihkan
tampilan dengan cepat dibandingkan manual. Untuk mengatur objek dengan stage Anda
dapat mengaktifkan Align to Stage.

Gambar 1.19 Panel Align

 MODUL II

DASAR ANIMASI PADA ANIMATE

I. Tujuan

1. Praktikan diharapkan dapat memahami konsep animasi pada animate dan membuat
berbagai jenis animasi-animasi sederhana dengan animate.
2. Praktikan diharapkan dapat memahami penggunaan teks tool dan pembuatan animasi
dengan teks.

II. Teori
1.1 Konsep Dasar Animasi

Animasi berasal dari kata Animation yang dalam bahasa Inggris to animate yang
berarti menggerakkan. Jadi animasi dapat diartikan sebagai menggerakkan sesuatu (
gambar atau obyek ) yang diam. Sejarah animasi dimulai dari zaman purba, dengan
ditemukannya lukisan-lukisan pada dinding goa di Spanyol yang menggambarkan “gerak”
dari binatang-binatang. Pada 4000 tahun yang lalu bangsa Mesir juga mencoba
menghidupkan suatu peristiwa dengan gambar-gambar yang dibuat berurutan pada dinding.

Sejak menyadari bahwa gambar bisa dipakai sebagai alternative media komunikasi,
timbul keinginan menghidupkan lambang-lambang tersebut menjadi cermin ekspresi
kebudayaan. Terbukti dengan ditemukannya berbagai artefak pada peradaban Mesir Kuno
2000 sebelum masehi.

Animasi sendiri tidak akan pernah berkembang tanpa ditemukannya prinsip dasar dari
karakter mata manusia yaitu: persistance of vision (pola penglihatan yang teratur). Paul Roget,
Joseph Plateau dan Pierre Desvigenes, melalui peralatan optic yang mereka ciptakan, berhasil
membuktikan bahwa mata manusi cenderung menangkap urutan gambar-gambar pada
tenggang waktu tertentu sebagai suatu pola. Dalam perkembangannya animasi secara umum
bisa didefenisikan sebagai suatu sequence gambar yang diekspos pada tegangan waktu
tertentu sehingga tercipta sebuah ilusi gambar bergerak.
 1.2 Animasi pada Animate

Secara sederhana, dapat dijelaskan bahwa pembuatan animasi di Animate dapat

dilakukan dengan membuat objek atau isi yang berbeda-beda pada setiap frame (kerangka)
dan kemudian Animate akan menjalankan frame-frame tersebut secara berurutan sehingga
seakan-akan objek tersebut bergerak seperti layaknya sebuah movie atau film. Untuk
menggerakkan objek tersebut, Animate menyediakan beberapa metode antara lain metode
Frame to Frame, metode metode Motion Tween, Motion guide dan metode Shape Tween.

a) Animasi Frame by Frame

Animasi Frame by Frame adalah animasi yang memaksimalkan penggunaan

frame. Dalam setiap frame terdapat objek-objek yang berbeda dan mempunyai hubungan
gerakan animasi antara frame awal sampai frame akhir. Akibatnya animasi dengan
menggunakan metode ini mempunyai ukuran yang relatif besar dibandingkan dengan
animasi yang menggunakan metode Tween (Motion atau Shape) dan membutuhkan waktu
yang relatif lama dalam pembuatan animasinya.

Percobaan 1.2a : Animasi Frame by Frame

1) Buatlah suatu lingkaran bewarna merah pada frame 1.

2) Klik kanan pada frame 4, pilih Insert Keyframe atau pilih menu Insert -> Timeline ->
Keyframe.

Gambar 2.1. Insert Keyframe pada frame 4

3) Ubah warna lingkaran menjadi warna kuning.

4) Ulangi langkah 2 dan 3 pada frame 7 tetapi warna lingkaran menjadi warna hijau.
5) Klik kanan pada frame 9, pilih Insert Frame atau pilih menu Insert -> Timeline ->
Frame sehingga bentuk Timeline akan seperti gambar 2.2.
 Gambar 1.2 Bentuk Akhir Timeline

6) Untuk melihat hasil rancangan dan implementasi suatu animasi dapat dilakukan
langkah- langkah berikut :

● Untuk memainkan dari awal sampai akhir: Pilih menu Control ->Play atau tekan
keyboard Enter

● Untuk mengeksekusi secara berulang: Pilih menu Control ->Test Movie.

b) Animasi Motion Tween

Animasi dengan metode tween adalah metode yang paling sering digunakan dalam
membuat animasi di Animate karena metode ini adalah metode yang paling mudah dan
cepat dalam membuat animasi karena hanya dibutuhkan objek di frame awal dan frame
akhir. Kemudian Animate secara otomatis akan membuat frame di antara frame awal dan
frame akhir tersebut sehingga terciptalah gerakan atau animasi. Animasi Tween dibagi
menjadi dua yaitu: Motion Tween dan Shape Tween.

Motion Tween digunakan untuk membuat animasi objek bergerak, berputar,

miring, objek yang membesar/mengecil serta perubahan warna pada objek.

Percobaan 1.2b : Animasi Motion Tween

1) Kliklah objek Rectangle, lalu gambarlah kotak di sebelah kiri layar.

Gambar 1.3 Kotak di Sebelah Kiri Layar

2) Pada Timeline, klik kanan frame 1, pilih Create Motion Tween atau pilih menu Insert
-> Timeline -> Create Motion Tween.

Gambar 1.4 Anak Menu Create Motion Tween

3) Klik kanan pada frame 20, pilih Insert Keyframe. Sehingga Timelineterlihat seperti
pada Gambar 3.5.

Gambar 1.5 Motion Tween dari frame 1 sampai pada frame 20

4) Masih di frame 20, klik Selection Tool (V) dari Toolbox, lalu pindahkan objek kotak
ke sebelah kanan layar.

Gambar 1.6 Kotak di Sebelah Kanan Layar

5) Jalankan animasi.

c) Animasi Motion Guide

Gerakan suatu objek juga dapat diarahkan mengikuti suatu lintasan yang dibuat
dengan menggambarkan sebuah garis. Ikuti langkah-langkah berikut untuk membuat
animasi dengan menggunakan lintasan yang dikenal dengan istilah Motion Guide.

Percobaan 1.2c : Animasi Motion Guide

1) frame 30 pada Layer 1, lalu pilih Insert Frame.

2) Lalu klik kanan pilih Add ClassicMotion Guide atau pilih menu
Insert -> Motion Guide, maka Timeline akan terlihat seperti Gambar
 2.7.

Gambar 1.7 Timeline dengan Motion Guide

3) Pada Layer 1, buatlah objek pada frame 1.

4) Pada Guide: Layer 1, gambarlah garis sesuai yang kamu inginkan.
5) Lalu pilih Create Classic Tween pada frame Layer 1.
6) Pada frame 30, klik kanan lalu pilih Insert KeyFrame

7) Pindahkan objek dengan mengguakan Selection Tool (V)

ke ujung garis yang sudah dibuat. Terlihat seperti gambar 2.8

Gambar 1.8 Perpindahan Garis pada Lintasan Kotak

Jalankan animasi. (maka akan terlihat setelah selesai garis lintasan digambarkan pada
layer Guide: Layer 1, secara otomatis objek di frame 1 akan menempatkan posisinya
pada awal garis dan objek di frame 30 akan menempatkan posisinya di akhir garis.)
d) Animasi Shape Tween
 Animasi Shape Tween berfungsi sebagai pembuat animasi dengan spesialisasi
mengubah bentuk, ukuran, posisi dan warna sebuah objek. Animasi ini juga sering
disebut efek Morph karena mengubah bentuk suatu objek ke bentuk lain yang berbeda.

Percobaan 1.2 d : Animasi Morph

1) Gambarkanlah bulatan berbentuk oval di layar dengan menggunakan Oval Tool (O) pada
Toolbox.

Gambar 1.9 Bentuk Oval

2) Klik kanan frame 20, pilihlah Insert Blank Keyframe. Perhatikan bulatan pada frame 20
adalah kosong.

Gambar 1.10Blank Keyframe pada Frame 20

3) Pada frame 20, gambar bentuk persegi menggunakan rectangle tool

Gambar 1.11 Bentukpersegi

4) Klik frame 1 untuk kembali ke frame 1, lalu klik kanan pilih create shape tween.
 Gambar 1.12 Properties dari Animasi Morph

5) Jalankan animasi.

1.3 Penggunaan Text Tool

Didalam Animate ada tiga jenis text file yang disediakan pada panel properties yaitu
static text, dynamic text, dan input text. Ada perbedaan dari ketiga jenis text yang disediakan
oleh animate tersebut.

a) Static text digunakan untuk menampilkan suatu teks yang sifatnya tidak dapat diubah
secara manual atau dengan script setelah movie dipublish.
b) Dynamic text field digunakan untuk menampilkan text yang secara dinamis bisa
isinya berubah tergantung dari variabel atau isi actionscript.
c) Input text field digunakan untuk memasukkan text pada form. Untuk contoh
penggunaan dynamic text dan input text akan kita bicarakan pada bab berikutnya.

Percobaan 2.3a : Animasi Text Rotation

1) Buatlah dokumen animasi baru. Klik File>New

2) Pada frame 1, klik Text Tool pada Toolbox atau tekan ‘T’ pada keyboard, lalu tulislah

“ILKOM” di stage.
3) Seleksi teks tersebut, klik menu Modify > Break Apart untuk memisahkan teks menjadi
huruf-huruf, lalu klik menu Modify lalu Timeline > Distributed to Layers.

Gambar 1.13 Huruf-Huruf pada Layer Berbeda

4) Buatlah keyframe dengan menekan tombol F6 atau fn+F6 pada keyboard di frame 10
pada layer C .
5) Masih pada layer C, klik kanan pada frame 1 > Create Motion Tween. Pada panel
Properties, klik menu Direction dan pilih opsi CW dengan nilai 1 times
6) Buatlah keyframe di frame 13 pada layer O. Pada layer O, klik kanan pada frame
O>Create Motion Tween. Pada panel Properties, klik menu Rotate dan pilih opsi CW
dengan nilai 1 times
7) Ulangi langkah ke – 6 untuk layer M, P, U, T, E dan R pada masing – masing frame 16,
19, dst.

Gambar 1.14 Bentuk Akhir Timeline

8) Untuk melihat hasil rancangan dan implementasi suatu animasi dapat dilakukan langkah-
langkah berikut :
● Untuk memainkan dari awal sampai akhir: Pilih menu Control ->Play
 ● Untuk mengeksekusi secara berulang: Pilih menu Control ->Test Movie.

Percobaan 1.3b : Animasi Fading Text

1) Buatlah dokumen animasi baru. Klik File>New

2) Pada frame 1, klik Text Tool pada Toolbox atau tekan ‘T’ pada keyboard, lalu tulislah
“INDONESIA” di stage.
3) Convert teks sebagai symbol “Graphic”. Modify > Convert to Symbol atau dengan
menekan F8.
4) Insert keyframe pada frame 10 lalu klik kanan pada frame 1 > Create Motion Tween
Kemudian insert kembali keyframe pada frame 5.

Gambar 1.15 Bentuk Akhir Timeline

5) Pada frame 5, klik objek tersebut lalu arahkan pointer ke panel Properties. Pada menu
Color pilih opsi Brightness. Geser slider ‘Bright’ sekitar 84%.

Percobaan 1.3c: Animasi Teks dengan Masking

Klik Text Tool atau tekan ‘T’ pada keyboard, lalu tulislah “MASKING” di stage.

1) Klik kanan pada frame 25, pilihlah Insert Frame atau pilih menu Insert ->Timeline ->
Frame.
2) Klik menu Insert ->Timeline -> Layer untuk membuat layer baru (Layer 2).

Gambar 1.16 Frame dan Layer 2

3) Klik Rectangle Tool atau tekan ‘R’ pada keyboard, lalu gambarlah segiempat bewarna
gradasi kuning-putih disebelah kiri teks.
 Gambar 2.17 Segiempat Gradasi di Sebelah Kiri Teks

4) Pada Timeline, klik kanan pada frame 1 dari Layer 2, pilihlah Create Motion Tween atau
pilih menu Insert -> Timeline -> Create Motion Tween.
5) Klik kanan pada frame 25 dari Layer 2, pilihlah Insert Keyframe atau pilih menu Insert -
> Timeline -> Keyframe.
6) Pindahkan segiempat gradasi ke sebelah kanan teks.

Gambar 1.18 Segiempat Gradasi di Sebelah Kanan Teks

7) Pindahkan Layer 1 ke posisi atas dari Layer 2, dengan cara klik pada Layer 1, tahanlalu
seret ke posisi Layer 2 dan lepas.

Gambar 1.19Posisi Layer 1 diatas Layer 2

8) Klik kanan pada Layer 1 dan pilihlah Mask sehingga teks dan kotak akan hilang dari
layar.
9) Simpan dan jalankan animasi.

Percobaan 1.3d : Animasi Teks Silver

1) Klik Text Tool atau tekan ‘T’ pada keyboard, lalu tulislah “SILVER” bewarna kelabu
(#333333) dengan jenis font Arial Black berukuran 30.
2) Klik kanan pada frame 20 dan pilihlah Insert Frame atau pilih menu Insert -> Timeline -
> Frame.
3) Pilih menu Insert -> Layer untuk membuat Layer 2.
4) Pindahkan Layer 1 ke atas Layer 2.
5) Pada Layer 2, klik Rectangle Tool atau tekan ‘R’ pada keyboard. Aturlah warna
gradasinya pada Color Mixer dengan Fill Style : Linier, warna gradasi hitam-putih-hitam.

Gambar 1.20 Warna Gradasi Hitam – Putih – Hitam

6) Gambarkanlah segiempat dan letakkan warna gradasi putih berada di sebelah kiri teks.
7) Klik Fill Transform Tool atau tekan ‘F’ pada keyboard dan klik segiempat dengan warna
gradasi. Akan muncul satu bulatan kecil di atas dan satu kotak kecil di tengah sebelah
kanan dari segiempat tersebut.
8) Posisikan kursor mouse pada bulatan kecil, klik dan drag lingkaran itu ke bawah sehingga
gradasi putih melintang diagonal.

Gambar 1.21 Warna Gradasi Putih di Sebelah Kiri Teks

9) Masih pada Layer 2, klik kanan pada frame 1, pilihlah menu Create Motion Tween.
10) Klik kanan pada frame 20, pilihlah Insert Keyframe, dan pindahkan segiempat agar
warna gradasi putih berada pada sebelah kanan teks.

Gambar 1.22 Warna Gradasi Putih di Sebelah Kanan Teks

11) Pilihlah menu Insert -> Layer untuk menambahkan layer baru yaitu Layer 3. Posisikan
layer baru itu pada bagian bawah dari Layer 2.
12) Pada Layer 3, tulislah “SILVER” dengan menggunakan Text Tool dengan warna kelabu
yang lebih muda (#999999) dan letakkan sebagai bayangan dari teks pada Layer 1.
13) Pada Timeline, klik kanan pada Layer 1 dan pilih menu mask.

Gambar 1.23 Posisi Akhir Semua Layer

14) Simpan dan jalankan animasi.

 MODUL III

ANIMASI LANJUTAN

I. Tujuan
1. Praktikan diharapkan mengetahui jenis-jenis symbol dan pemanfaatannya
2. Praktikan diharapkan dapat membuat animasi animate dengan symbol
3. Praktikan diharapkan dapat membuat animasi animate dengan pemanfataan suara.

II. Teori
1.1 Pengertian Simbol
A. Graphic
Sebenarnya, animasi-animasi yang telah dilakukan pada semua percobaan
terdahulu juga adalah berupa simbol, yaitu simbol Graphic, tetapi dilakukan dengan
cara yang lebih cepat, tanpa harus melakukan konversi atau pengubahan ke simbol
secara manual. Jadi, ketika diberikan perintah Create Motion Tween, secara otomatis
Animate akan mengubah objek tersebut menjadi simbol.

B. Button (Tombol)
Button (Tombol) adalah salah satu simbol di dalam Animate yang
penanganannya berbeda dengan simbol yang lain. Tombol nantinya akan sangat
banyak digunakan untuk pembuatan animasi yang interaktif.

Tombol (button) merupakan unsur yang berperan penting dalam membuat

animasi. Hal ini terlihat pada bentuk frame-frame di Timeline, karena hanya terdapat 4
(empat) frame, yaitu :

a. Up, Posisi tombol baku, posisi awal tombol ketika dijalankan

b. Over, keadaan ketika kursor mouse melewati atau berada di atas tombol

c. Down, keadaan ketika tombol ditekan atau diklik

d.. Hit, penentuan batas area tombol yang bisa diklik.

Untuk lebih jelas, lakukanlah percobaan 5.4 berikut untuk membuat tombol
sederhana beserta animasinya.
Percobaan 1.1 : Tombol Sederhana

1) Gambarlah sebuah objek kotak bersudut tumpul pada stage.

2) Pilih objek tersebut, lalu klik menu Insert > Convert to Symbol (atau langsung
tekan F8), maka akan tampil kotak dialognya, isikan pada Name: Tombol 1 dan
pilih pada Type: Button.

Gambar 1.1 Kotak Dialog Convert to Symbol

3) Klik menu Edit > Edit Symbols untuk masuk ke dalam modus sunting simbol
button, frame-frame pada Timeline berubah, hanya terdapat empat frame saja.

Gambar 1.2Frame-Frame untuk Tombol

4) Klik kanan frame Over, lalu pilihlah Insert Keyframe. Ubahlah warna kotak sudut
tumpul dengan warna yang berbeda dari sebelumnya.
5) Klik menu Edit > Edit Document untuk kembali ke movie utama, lalu jalankan
animasinya: Control > Test Movie (atau tekan CTRL+Enter), atau klik menu
Control > Enable Simple Buttons, lalu coba arahkan kursor ke atas simbol, maka
warnanya akan berubah sesuai dengan yang didefinisikan di frame Over.

C. Movie Clips
 Movie clip, berguna untuk membuat rangkaian animasi di dalam sebuah
symbol movie clip. Jadi di dalam movie clip, dapat dibuat animasi yang berdiri sendiri.
Dengan movie clip, kita juga bisa menghemat penggunaan frame pada movie utama.

Percobaan 1.2 : Animasi Movie Clip

1) Klik menu Insert > New Symbol (atau tekan CTRL+F8), pada Name: isikan Movie
1 dan pada Behavior: pilih Movie Clip.

Gambar 1.3 Kotak Dialog Create New Symbol

2) Klik Rectangle Tool (R) pada Toolbox, lalu gambarlah kotak tepat di tengah stage
(stage dalam modus edit simbol, yaitu di tengah stage ditandai dengan tanda plus).
3) Klik bagian fill (isi) dari kotak, lalu pilih menu Insert>Convert to Symbol, pada
Name: isikan Graphic 1 dan pada Behavior: pilih Graphic.

Gambar 1.4Kotak Dialog Create to Symbol

4) Klik kanan pada frame 10, pilihlah Insert Keyframe. Kemudian klik pada frame 1 untuk kembali
ke frame 1, lalu aturlah Properties pada Tween: pilihkan Motion, pada Rotate: pilihkan CW
dengan nilai 1.
 Gambar 1.5 PropertiesFrame Motion Rotasi

5) Pilih menu Edit>Edit Document untuk kembali ke movie utama (Scene) atau layar
baru terbuka
6) Pilih menu Window>Library untuk menampilkan Panel Library
7) Seret Movie 1 ke layar
8) Jalankan animasi.

1.2 Berbagi Simbol

Salah satu fitur yang sangat bermanfaat dari Animate adalah ketersediaan untuk
melakukan berbagi symbol. Simbol dalam library animate dapat dibagi dengan Movie
animate lainnya. Hal ini sangat menguntungkan Anda ketika bekerja dengan sejumlah
file yang membutuhkan symbol yang sama dalam sejumlah dokumen tersebut. Berikut
ini cara untuk memanfaatkan symbol yang berasal dari movie lain:

a) Buat dokumen baru, perhatikan library dalam keadaan kosong

b) Pilih file > import > Open External Library.
 Gambar 1.6 Prosedur mengimpor file ke library yang lain

c) Library dari file movie yang dipilih akan muncul

d) Drag gambar yang ada pada library ke library file kerja anda.

1.3 Pemanfaatan Suara Pada Animate

Suara (sound) merupakan unsur yang sangat penting dalam suatu animasi. Suara
dapat digunakan untuk mengukuhkan atau menegaskan suatu animasi. Suara dapat
digunakan sebagai suara latar atau disertakan sebagai pengiring animasi yang akan
menambahkan daya tarik dari animasi tersebut, apalagi suaranya disesuaikan dengan
gerakan animasi akan menambahkan animasi menjadi lebih hidup dan bisa
menimbulkan perasaan tertentu.

a) Pilihan Suara
Terdapat banyak pilihan suara yang telah disediakan di dalam komputer saat ini,
apalagi komputer untuk multimedia. Format ekstensi suara dapat dilihat dari jenis data
suara yang telah direkamkan, misalnya mp3 atau wav.

Berikut beberapa suara yang ikut serta pada Microsoft Office yang terdapat pada
direktori :\Program Files\Microsoft Office\Office12\Media.

No. Nama Berkas Nama Suara

1 APPLAUSE.WAV Tepukan tangan secara ramai-ramai

2 ARROW.WAV Gesekan kertas

3 BOMB.WAV Ledakan

4 BREEZE.WAV Lidi dikibaskan

5 CAMERA.WAV Jepretan kamera

6 CASHREG.WAV Lonceng sepeda

 7 CHIMES.WAV Sihir

8 CLICK.WAV Klik

9 COIN.WAV Koin jatuh

DRUMROLL.WAV
10 Pukulan side-drum
EXPLODE.WAV
11 Ledakan meriam
HAMMER.WAV
12 Palu besi
LASER.WAV
13 Laser
PUSH.WAV
14 Dorongan
SUCTION.WAV
15 Kibasan yang mengenai benda
TYPE.WAV
16 Ketikan
VOLTAGE.WAV
17 Ledakan jauh
WHOOSH.WAV
18 Pukulan
WIND.WAV
19 Angin
Tabel 3.1Daftar Suara

Selain itu terdapat banyak nama suara yang lain, misalnya pada direktori
:\Program Files\Messengger. Perlu diperhatikan bahwa data suara dengan ektensi .WAV
dapat bericon seperti Gambar 3.7

Gambar 1.7 Icon untuk Berkas Berekstensi .WAV

b) Menggabungkan Animasi dengan Suara

Percobaan 1.3 : Animasi Type Writer dengan Suara

Buka kembali berkas animasi dari Percobaan 2.3a : Animasi Text Rotation

1) Klik menu File>Import -> Import to Library, lalu pilih berkas suara dengan
ekstensi .WAV dari direktori yang tersedia.
2) Klik menu Window >Library, akan terlihat berkas suara hasil masukan tadi.
 Gambar 1.8 Suara ekstensi .WAV

3) Tambahkan lapisan baru dengan Insert>Timeline -> Layer (Layer 7) terletak di bawah
Layer M.
4) Klik frame 1, lalu seret suara Type pada gambar suara ke dalam layar.

Gambar 1.9 Susunan Suara

5) Jalankan animasi

Efek suara yang sudah ada pada animasi dapat diketahui melalui frame pada
Timeline yang berubah menjadi gelombang suara. Adakalanya gelombang suara lebih
panjang daripada frame yang disediakan untuk animasi, tetapi sebaliknya juga berlaku
pada frame, frame yang disediakan tidak mampu ditutupi oleh gelombang suara.
Sebagai contoh animasi dengan gelombang suara lebih panjang dari frame, kerjakan
percobaan 3.4 dibawah ini.

Percobaan 1.4 : Animasi Masking dengan Suara

1) Buka kembali berkas animasi Percobaan 2.3c pada bab II : Animasi Teks dengan
Masking.
2) Non-aktifkan mask, dengan mengklik kanan pada Layer 1 dan pilih menu Mask.
3) Tambahkan lapisan baru di bawah Layer 2, Insert>Timeline ->Layer.
4) Pilih menu File >Import -> Import to Library, pilih berkas suara.WAV.
 5) Kik frame 1 pada Layer 3, dan buka Window >Library. Seret suara ke dalam layar.

`
Gambar 1.10 Gelombang Suara .WAV

6) Aktifkan kembali topeng: klik kanan pada Layer 1 dan pilih menu Mask.
7) Jalankan animasi.

c) Sinkronisasi Suara dan Animasi

Kemungkinan suara yang lebih lama atau panjang dari animasi yang harus
diiringinya akan sering terjadi apabila menggunakan gelombang suara yang berasal dari
berkas .MP3. Misalkan animasi hanya memiliki 10 frame sedangkan suaranya 20 frame.
Maka yang terjadi adalah animasi selesai dimainkan tetapi suara tetap berbunyi, dan ini
menyebabkan animasi dan suara tidak sesuai dan tidak cocok sebagai pengiring animasi.

Salah satu cara untuk mengatasi hal tersebut adalah dengan cara kemudahan
yang disediakan oleh Animate, yaitu Sync Stream, yang berfungsi untuk men-
sinkroniasi-kan antara animasi dan suara, misalnya suara lebih panjang dari animasi
maka suaranya akan berhenti ketika animasi dimainkan akan berhenti. Jika suara lebih
pendek dari animasi, suaranya akan melompati beberapa kerangka. Untuk melakukan
sinkronisasi dapat dilakukan percobaan 3.5 berikut.

Percobaan 1.5 : Sinkronisasi Suara dan Animasi

1) Buka kembali Percobaan 3.3 : Animasi Masking dengan Suara.

2) Non-aktifkan mask, dengan mengklik kanan pada Layer 1 dan pilih Mask.
3) Dapat dilihat bahwa panjang kerangka untuk suara sudah sama dengan animasi.
Tetapi jika dijalankan suara masih tidak sesuai dengan animasinya.
 Gambar 1.11 Suara Lebih Panjang dari Animasi

4) Klik frame 1 untuk lapisan suara (Layer 3), lalu atur Properties pada bagian Sync: pilih
Stream.

Gambar 1.12 Properties Sync Stream

Selain kemudahan Sync, Animate juga menyediakan kemudahan Effect, yang

berfungsi untuk memberikan efek pada suara, seperti fade in, fade out, mematikan
speaker sebelah kanan atau kiri, dan dapat juga untuk menentukan efek-efek suara yang
sesuai dengan keinginan.

1.3 Penggunaan easing pada animasi

Dalam membuat animasi, prinsip animasi berupa gaya gravitasi harus pula
diperhatikan. Apakah bola yang dilempar ke atas semakin kencang atau sebaliknya.
Prinsip kecepatan gravitasi ini dapat digambarkan sebagai fungsi easing pada animasi.
Easing dibagi menjadi 2 : Ease In terjadi jika sebuah gerakan diawali secara lambat
kemudian menjadi cepat. Ease Out terjadi jika sebuah gerakan yang relatif cepat
kemudian melambat.
 Percobaan 1.6: Animasi Objek berputar dengan easing

1) Buat new layer > buat objek > insert frame dan key frame hingga frame 30 pada
timeline >Buatlah motion tween pada objek >klik frame pertama pada timeline >
Ubah easing hingga 100 pada panel properties > Ubah rotate menjadi CW.
Easing bernilai 100 merupakan ease out (berputar dari cepat ke lambat) dan
easing bernilai -100 merupakan ease in (berputar dari lambat ke cepat).

1.3 Onion Skining

Gambar 1.13 Menu Onion Skining

Onion skinning merupakan fitur pada program yang dapat memberikan

kemudahan bagi animator dalam membuat animasi gambar. Dengan fitur ini animator
melihat tampilan gambar pada frame sebelumnya sehingga animator dapat membuat
beberapa gambar dengan memperhatikan kesamaan gambar. Menu onion skinning ini
berada di bawah panel timeline.

Gambar 1.14 Contoh Penggunaan Onion Skinning

 MODUL IV

JS ANIMATION DASAR

I. Tujuan
1. Praktikan diharapkan dapat membuat animasi dengan menggunakan HTML5-
Javascript Animation.
2. Praktikan diharapkan dapat membuat simulasi pada media pembelajaran dengan
menggunakan HTML5-Javascript Animation.

II. Teori

1.1 JavaScript untuk Membuat Animasi

Ketika kita menggunakan HTML5 Canvas, membuat animasi terasa mudah, dimana
kita hanya perlu mengatur frame, objek, dan lainnya. Akan tetapi, itu hanya untuk animasi
yang pendek. Sekarang bayangkan, apabila kita ingin membuat satu animasi dimana suatu
objek berputar 1000 kali. Apakah ini berarti kita harus membuat 1000 keyframe? Tentu akan
sangat merepotkan, bukan? Disitulah JavaScript hadir. Sebagai rekan yang akan membantu
membuat HTML5 semakin interaktif dan hemat tempat. Animasi yang tadinya membutuhkan
1000 keyframe, kini hanya membutuhkan beberapa baris Javascript saja.

JavaScript bisa membuat animasi HTML5 menjadi jauh lebih dinamis dan interaktif.
Akan tetapi, tentu ada kekurangannya. Yaitu, kita harus menguasai penuh JavaScript
interaktif itu sendiri, yang dimana kerumitannya cukup sulit apabila kita ingin membuat suatu
animasi dengan tingkat interaktif yang tinggi. Disini, kita akan mencoba membuat beberapa
percobaan dasar animasi menggunakan HTML5 Canvas dan JavaScript.

Percobaan 1.1 : Animasi Pergerakan Kursor

1) Klik menu Insert > New Symbol, pilih pada Type : Movie Clip, dan beri nama:
MouseCursor, lalu klik OK. Selanjutnya pada modus penyuntingan simbol Movie Clip.
Gambarlah bentuk kursor seperti diinginkan.
2) Klik menu Edit > Edit Document untuk kembali ke movie utama, lalu pada library, drag
simbol kursor yang telah dibuat ke area luar stage, pilih kursor tersebut, kemudian pada
panel Properties, isikan pada Instance Name: pointer.

3) Setelah kursor diberi Instance Name, kemudian klik kursor, lalu buka panel “Action”.
Lalu, pilih “Code Snippets”. Saat panel Code Snippets muncul, pilih HTML5 Canvas >
Actions > Custom Mouse Cursor.
4) Adobe Animate akan secara otomatis menambahkan layer “Action” baru yang berisi baris
kode untuk custom mouse cursor.

5) Jalankan Animasi dengan CTRL+Enter.

Percobaan 1.2 : Animasi Rotasi

1) Buat gambar tiang dan 3 buah baling-baling, yang mana setiap baling-baling diberi
instance name yang berbeda. Contoh : baling1, baling2, dan baling3. Kemudian buat
menjadi kincir angin, seperti gambar berikut.(setiap baling di jadikan symbol movieclip).
 2) Klik baling1, lalu bukalah Panel Actions”. Lalu, pilih “Code Snippets”. Saat panel
Code Snippets muncul, pilih HTML5 Canvas > Animation > Rotate Continuously.

3) Adobe Animate akan secara otomatis menambahkan layer “Action” baru yang berisi baris
kode untuk rotasi terus menerus dengan kecepatan 10.
4) Karena kita memiliki 3 baling-baling untuk digerakkan, tambahkan juga untuk baling2
dan baling3.

5) Jalankan animasi dengan CTRL+Enter.

Percobaan 1.3 : Animasi Drag and Drop

1) Pilih menu Insert, kemudian New Symbol. Isikan Name dengan “Bola”. Kemudian, pada
area kerja Symbol, gambarlah bola yang diinginkan.

2) Kembali ke layer dokumen dengan menekan memilih dari menu Edit kemudian pilih Edit
Document atau dengan menekan Ctrl+E

3) Buat layer baru untuk action

4) Klik frame 1 pada layer action , lalu bukalah Panel Actions, Kemudian ketikan perintah
berikut
5) Jalankan animasi dengan CTRL+Enter, klik dan tahan pada objek bola, lalu pindahkan ke
tempat yang diinginkan, lalu letakkan objek bola tersebut di tempat tersebut dengan
melepas klik mouse.

Bola sebelum dan sesudah dipindahkan dengan click and drag mouse.
 MODUL V

HTML5

COMPONENT

I. Tujuan
1. Praktikan diharapkan dapat memakai komponen untuk menyisipkan video di HTML5
Canvas.
2. Praktikan diharapkan dapat menggunakan Component dalam aplikasi pembelajaran.

II. Teori
Kita telah belajar sebelumnya tentang dasar menggunakan JavaScript untuk animasi.
Pada bab ini, kita akan belajar lebih jauh, bagaimana memakai komponen/component yang
ada pada HTML5 Canvas.

1.1 Video
Pada HTML5 Canvas, kita bisa menyisipkan video pada aplikasi kita. Kita akan
menggunakannya melalui Components. Components bisa ditampilkan melalui menu
Window > Components atau dengan menekan CTRL+F7.

Tampilan Components.
Kali ini, kita akan mencoba bagaimana menggunakan Component video pada Animasi
HTML5.
1) Buat suatu tampilan semacam billboard menggunakan Rectangle Tool (R) sesuai
imajinasi kalian.

Contoh Billboard
2) Kemudian pilih Components > Video, lalu klik dua kali pada Video. Object Video
akan muncul pada Stage. Kemudian, pada properties, atur ukuran dan posisi objek
sesuai apa yang kita mau. Disini kita coba untuk meletakkannya didalam
billboard.

Object Video yang sudah diatur ukuran serta posisinya.

3) Kemudian, klik objek video tersebut, lalu pilih Properties, lalu klik “Show
Parameters. . .”, kotak dialog parameter akan keluar seperti dibawah.
 Component Parameters.
4) Pada kotak Component Parameters, ada beberapa menu dan pilihan sebagai
berikut:
● Source: Lokasi/sumber video yang akan kita masukkan.
● Autoplay: Apakah video yang kita masukkan langsung diputar otomatis atau tidak.
● Controls: Apakah kita hendak menampilkan tombol kontrol pada video.
● Muted: Apakah kita hendak membisukan video yang dimasukkan.
● Loop: Apakah video yang kita putar ingin diulang terus-menerus.
● Poster image: Apakah ingin memasukkan thumbnail dari video tersebut.
● Preload: Apakah ada animasi preload sebelum video diputar.
● Class: Menentukan kelas dari objek video tersebut. Default = “video”.
Pilih sesuai kebutuhan kalian. Disini, kita coba dengan mematikan control dan
menghidupkan mute serta loop. Sisanya dibiarkan sesuai default.
5) Pilih source, kemudian pilih dan cari video yang akan dimasukkan. Centang
“Match Source Dimension” apabila kalian ingin memasukkan video sesuai
dimensi aslinya. Karena kita ingin memasukkan video sesuai dimensi billboard,
maka tidak usah dicentang. Lalu, klik OK.
6) Jalankan animasi dengan CTRL+Enter.

1.2 Mengenal Component User Interface

User Interface adalah satu dari 3 grup komponen dasar yang ada di HTML5 Canvas
pada Adobe Animate CC yaitu User Interface, Video, dan jQuery UI. Untuk Component User
Interface sendiri, berisikan banyak hal yang bisa kita pakai dalam membangun suatu aplikasi
pembelajaran seperti Button, Checkbox, Combobox, Image, Label, List, dan masih banyak
lagi. Semuanya dapat diaplikasikan dalam pembuatan aplikasi pembelajaran, kita akan coba
beberapa.
 Component User Interface

1.3 Pemanfaatan Component pada Aplikasi Pembelajaran

a. Membuat Tombol Link

Link sering digunakan untuk memanggil URL atau alamat internet tertentu. Biasanya
link dibuat dengan menggunakan teks. Disini, kita akan membuat tombol yang akan
mengarahkan pada satu link yang kita inginkan, kita akan gunakan “Button” dari
Component User Interface.

1) Dari menu Component > User Interface, pilih dan tarik “Button” ke dalam stage.
2) Kemudian pilih Component Parameters, pada label, tulis “Klik Disini”
3) Kemudian pilih Properties, pada Instance name, tulis “linkbtn”
4) Klik button tadi, kemudian buka panel actions, lalu Code Snippets. Pilih HTML5
Canvas > Components > User Interface, lalu klik dua kali pada “Button Click
Event”
 5) Ubah kode pada panel actions dari:

6) Menjadi:

(“http://www.adobe.com” pada baris 12 adalah link yang akan dituju, kalian bisa
menggantinya sesuka hati).
7) Jalankan animasi.

b. Mengontrol Suara

Secara default, pada HTML5 Canvas hanya menyediakan 3 macam component sesuai yang
telah disebutkan diatas. Untuk audio, kita perlu memasang plugin component tambahan yaitu
audio. Plugin component tambahan ini bisa kalian dapatkan secara gratis di website Adobe
yaitu: https://exchange.adobe.com/creativecloud.details.100555.html. Setelah terpasang,
kalian bisa melihat ada Component tambahan di Adobe Animate kalian.
Sekarang, kita akan coba menggunakan component Audio. Caranya sama dengan component
Video yang telah kita bahas di modul sebelumnya.

1) Pilih dan tarik komponen audio kedalam stage.

2) Klik objek audio tadi, kemudian pilih Component Parameters. Isi parameter sesuai
kebutuhan kalian.
3) Jalankan animasi.
Kalian bisa menghidupkan kontrol audio dengan mengaktifkan “Controls” pada Component
Parameters. Tapi, bagaimana jika kita ingin membuat kontrol audio manual? Memungkinkan
kita membuat button custom yang bisa mem-play atau mem-pause audio?

1) Buat dua buah symbol. Gambarlah tombol play dan pause. Letakkan kedua symbol
tersebut dibawah audio. Untuk Symbol play, berikan instance name playbtn, untuk
Symbol pause, berikan instance name pausebtn pada properties masing-masing.

2) Untuk Audio, berikan instance name lagu.

3) Ketikkan kode dibawah.

4) Jalankan animasi.
Secara default, JavaScript-HTML5 Animation tidak menyediakan fungsi stop() pada media.
Namun, kalian bisa mengakalinya dengan menggunakan kode sebagai berikut (catatan:
tidak berlaku di sebagian versi browser):

Tips: fungsi kontrol media audio ini bisa juga diterapkan pada component Video.
 MODUL VI

HTML5 COMPONENT DAN NAVIGASI

III.Tujuan
3. Praktikan diharapkan mengerti penggunaan label dan navigasi dalam animasi HTML5
Canvas.
4. Praktikan diharapkan dapat mengaplikasikan penggunaan JavaScript pada objek dan
komponen untuk membuat suatu aplikasi pengajaran yang interaktif.

IV. Teori
Kita telah belajar sebelumnya tentang component dalam Adobe Animate. Kali ini, kita
akan lebih dalam lagi belajar tentang component dan pengaplikasiannya dalam pembuatan
aplikasi pembelajaran.

1.1. Label dan Navigasi

Pemberian label pada suatu frame diperlukan ketika suatu frame akan ditandai atau
dinamai. Misalnya, di dalam frame tersebut berisi objek segitiga, maka beri nama frame
tersebut dengan segitiga, sehingga dapat membantu dan memberitahu bahwa dalam frame
tesebut berisi objek segitiga. Hal ini sangat berguna apabila terdapat banyak objek di frame
yang berbeda. Label frame banyak digunakan untuk mempermudah penamaan di JavaScript
terutama saat membuat navigasi, karena apabila frame sudah diberi nama, untuk menunjuk
frame tersebut hanya cukup dengan memanggil namanya saja.

Sementara itu, pada Animate, navigasi berfungsi untuk membawa pengunjung

menjelajah dari satu halaman ke halaman lainnya melalui media jalinan, tombol atau menu.
Navigasi dalam Animate dapat dilakukan dengan berbagai cara, seperti navigasi antar frame,
navigasi antar scene, navigasi antar movie dan navigasi melalui URL. Namun, di antara
keempat cara tersebut yang paling bagus adalah cara navigasi antar frame, karena ukuran
berkas yang dihasilkan paling kecil di antara cara navigasi lainnya, sehingga akan
mempengaruhi kecepatan pemuatan yang sangat diutamakan dalam sebuah animasi ataupun
situs web.
Ada banyak sekali navigasi yang bisa kalian gunakan dengan mudah pada Adobe Animate.
Kalian bisa melihat pada panel Actions, kemudian Add using wizards. Disana kalian bisa
melihat banyak sekali contoh-contoh navigasi yang bisa kalian gunakan dengan mudah.

Navigasi Timeline pada HTML5 Actions Wizard

Beberapa contoh Navigasi Timeline yang bisa kalian pakai adalah sebagai berikut:
frameNumber:
window.open:

_this.gotoAndPlay:

Bisa juga menggunakan button seperti contoh dibawah:

_this.gotoAndStop:

Memindahkan objek:
Sumbu y
Sumbu x

_this.play():

_this.stop():

objek.x / objek.y:

rotation+:
 visible:

Ticker:
Memulai animasi secara keseluruhan:

Menghentikan animasi secara keseluruhan:

Dan masih banyak lagi jenis-jenis navigasi yang bisa kalian gunakan pada HTML5
Canvas di Adobe Animate. Kalian bisa menggunakan semuanya seperti kalian
membuat tombol kontrol media atau tombol kontrol url. Kalian bisa menggunakan
semuanya sebebas mungkin untuk mengontrol User Interface dari aplikasi
pembelajaran kalian.

1.2 Pembuatan Media Pembelajaran Interaktif

Setelah mengetahui cara menggunakan komponen, kita akan mencoba
mengaplikasikannya dalam satu model media pembelajaran interaktif. Adapun komponen-
komponen yang terdapat pada media pembelajaran antara lain yaitu : Teori, Contoh Soal dan
Tes. Langkah-langkah untuk membuat komponen-komponen tersebut dapat dilakukan dengan
mengikuti percobaan-percobaan berikut ini :

Percobaan 1.2.A : Menampilkan Teori yang Interaktif

1) Buatlah sebuah dokumen baru dengan memilih menu File -> New ->HTML5 Canvas
2) Aturlah ukuran stage menjadi berukuran 500x400 pada bagian Panel Properties.
3) Pada bagian Layer 1 frame 1, gunakan Text Tool(T), pilih Text Type: Static Text lalu
berilah tulisan judul “Pluto” pada stage. Kemudian buat tulisan Static Text lagi dengan
memasukkan deskripsi Planet Pluto.
4) Kemudian, pada menu Components > User Interface, pilih dan tarik Image ke dalam
stage. Kemudian, di Component Parameters, pilih source, kemudian pilih gambar Pluto di
komputer kalian.
5) Lalu, masih dari Component User Interface, pilih dan tarik Button ke dalam stage.
6) Atur sedemikian rupa sesuai keinginan kalian.

7) Kalian bisa mencoba menjalankan animasi. Akan terlihat suatu aplikasi pembelajaran
yang menampilkan informasi dan gambar tentang pluto. Namun, ini belum interaktif. Kita
akan membuat aplikasi ini lebih interaktif.
8) Kembali ke Adobe Animate, pilih Button yang tadi kita masukkan, tulis instance name
teoribtn, dan label Component Parameters “Teori”.
9) Pilih teks teori yang kita masukkan tadi juga, pada Properties, ubah menjadi Dynamic
Text dan berikan instance name teori.
10) Tuliskan kode dibawah:

11) Jalankan animasi. Sekarang, animasi hanya akan menampilkan gambar pluto saja. Teori
hanya akan muncul ketika tombol Teori ditekan oleh pengguna.

Percobaan 1.2.B : Membuat Contoh Soal Interaktif

1) Buatlah tampilan seperti berikut :

2) “Apa Praktikum Yang Kita Pelajari Saat Ini?” dan “Jawaban Kamu:” adalah Static Text.
3) Pilihan A, B, C, dan D, serta XXX dibagian bawah adalah Dynamic Text.
4) Perbedaan antara Static Text dan Dynamic Text bisa kalian tandai dengan melihat garis
putus-putus yang mengitari Dynamic Text.
5) Beri masing-masing pilihan jawaban instance name: btnA, btnB, btnC, btnD, dan untuk
XXX beri instance name hasil.
6) Buatlah layer action dan masukkan script berikut :

7) Jalankan animasi.
 MODUL VII

DATABASE I

I. Tujuan

1. Praktikan dapat menghubungkan antara aplikasi yang dibuat menggunakan

Animate dengan database MySQL via PHP,

II. Teori
Untuk dapat menghubungkan antara MySQL dan Animate, kita membutuhkan sebuah
file PHP. PHP berguna sebagai jembatan antara Animate dan MySQL. Dalam arti yang lebih
sederhana, Animate berguna untuk mendapatkan data dari user, lalu data tersebut dikirim ke
sebuah file PHP untuk diproses selanjutnya. Hasil dari proses file PHP tersebut akan ditulis
dengan format yang sesuai dengan ketentuan Animate. Data yang ditulis inilah yang
kemudian akan diterima oleh Animate. Proses ini lebih kurang sama dengan proses yang
terjadi pada pembuatan aplikasi web yang menggunakan HTML, PHP dan MySQL. Dimana
fungsi HTML digantikan oleh Animate. Untuk dapat melakukan praktikum ini, pastikan
komputer yang digunakan untuk praktik sudah mendukung PHP dan MySQL (dapat dibantu
dengan menggunakan XAMPP).

1.1 Mengambil Data dari Database

Buka Animate dan buat sebuah File baru (ActionScript 3.0).
Langkah pertama, buatlah sebuah database dengan nama dbSoal
Lalu buat sebuah table dengan nama daftarSoal :

1. CREATE TABLE daftarSoal (

2. no int(2) primary key,
3. pertanyaan varchar(50),
4. opsiA varchar(20),
5. opsiB varchar(20),
6. opsiC varchar(20),
7. opsiD varchar(20),
8. jawaban varchar(20),
9. status int(1));

Tambahkan sebuah record ke dalam table :

1. INSERT INTO daftarSoal VALUES (1,

2. 'Siapa Presiden pertama Indonesia ?',
3. 'Soekarno',
4. 'Soeharto',
5. 'Megawati',
 6. 'Habibie',
7. 'Soekarno',
8. 0);

Buatlah interface sebagai berikut dengan menggunakan component flash :

Gambar 1.1 Tampilan Aplikasi Animate

Dengan rincian :
Tipe Text Instance Name
Percobaan Menghubungkan Flash
Static Text -
dan Database MySQL
Component - Button Send Request btnSubmit
Component - Label Hasil Request -
Component - Label No Soal : -
Component - Text Area - taHasil
Component – Numeric Stepper noSoal

Tambahkan baris program berikut pada frame 1 :

1. import flash.events.MouseEvent;
2. import flash.net.URLLoader;
3. import flash.net.URLRequest;
4. import flash.net.URLVariables;
5. import flash.net.URLLoaderDataFormat;
6. import flash.net.URLRequestMethod;
7. import flash.events.Event;
8.
9. btnSubmit.addEventListener(MouseEvent.CLICK,sendData);
10.
11. function sendData(event:MouseEvent):void
12. {
13. var alamatRequest:URLRequest = new URLRequest(“http://127.0.0.1/Soal.php”);
Tujuan dari baris program di atas adalah :
1. Menambahkan EventListener berupa MouseClick pada btnSubmit
btnSubmit.addEventListener(MouseEvent.CLICK,sendData);

2. Membuat fungsi sendData yang befungsi untuk melakukan komunikasi dengan file
PHP. Langkah komunikasi dengan PHP adalah sebagai berikut :
a. Baris 13 – 14 : Dibuat sebuah variabel yang menangani konfigurasi
pengiriman data. Pada baris 13 diset url dari file PHP yang digunakan. Pada
baris 14 metode yang digunakan, baik itu POST maupun GET. Dalam kasus
ini kita menggunakan POST
b. Baris 16 – 17 : Dibuat sebuah URLLoader yang berfungsi untuk melakukan
komunikasi data, lalu ditentukan format data yang digunakan yaitu variables.
c. Baris 20 : Dalam variable yang dikirim kita buat sebuah variable bernama
nosoal, variabelKirim.nosoal = noSoal.value; Nama ‘nosoal’ ini akan diakses
pada file PHP dengan cara memanggil $_POST[‘nosoal’];
d. Baris 22 : Untuk menyatakan bahwa variables yang dikirim adalah
variabelKirim
e. Baris 24: Ditambahkan sebuah EventListener jika proses komunikasi dengan
file PHP selesai, dan ditangani oleh : function selesai(event:Event):void{…}
f. Baris 25 : Melakukan komunikasi
g. Baris 30 : Hasil komunikasi dengan file PHP akan ditampung dalam sebuah
variabel dan ditampilkan pada TextArea taHasil
Buat sebuah file PHP dan simpan di htdocs/ dengan nama Soal.php, isi dari Soal.php adalah
sebagai berikut :
1.2 Menambahkan pilihan berganda pada program
Tambahkan beberapa komponen sebagai berikut :
Tipe Text / Label Instance Name
Component - Button Opsi A btnOpsiA
Component – Button Opsi B btnOpsiB
Component – Button Opsi C btnOpsiC
Component – Button Opsi D btnOpsiD
Component - Label Status Jawaban Anda labelStatus

Gambar 1.2 Tampilan setelah ditambahkan Opsi Jawaban

 Tambahkan Baris Program yang bercetak tebal :

1. import flash.events.MouseEvent;
2. import flash.net.URLLoader;
3. import flash.net.URLRequest;
4. import flash.net.URLVariables;
5. import flash.net.URLLoaderDataFormat;
6. import flash.net.URLRequestMethod;
7. import flash.events.Event;
8.
9. btnSubmit.addEventListener(MouseEvent.CLICK,sendData);
10.
11. function sendData(event:MouseEvent):void
12. {
13. var alamatRequest:URLRequest = new URLRequest("http://127.0.0.1/Soal.php");
14. alamatRequest.method = URLRequestMethod.POST;
15.
16. var pengaturData:URLLoader = new URLLoader;
17. pengaturData.dataFormat = URLLoaderDataFormat.VARIABLES;
18.
19. var variabelKirim:URLVariables = new URLVariables();
20. variabelKirim.nosoal = noSoal.value;
21.
22. alamatRequest.data = variabelKirim;
23.
24. pengaturData.addEventListener(Event.COMPLETE,selesai);
25. pengaturData.load(alamatRequest);
26. }
27.
28. function selesai(event:Event):void
29. {
30. var hasilRequest:URLVariables = new URLVariables(event.target.data);
31. // Bagian yang ditambahkan
32. try {
33. taHasil.text = hasilRequest.soaldariPHP;
34.
35. btnOpsiA.label = hasilRequest.opsiAPHP;
36. btnOpsiB.label = hasilRequest.opsiBPHP;
37. btnOpsiC.label = hasilRequest.opsiCPHP;
38. btnOpsiD.label = hasilRequest.opsiDPHP;
39.
40. btnOpsiA.addEventListener(MouseEvent.CLICK, tekanJawaban(btnOpsiA));
41. btnOpsiB.addEventListener(MouseEvent.CLICK, tekanJawaban(btnOpsiB));
42. btnOpsiC.addEventListener(MouseEvent.CLICK, tekanJawaban(btnOpsiC));
43. btnOpsiD.addEventListener(MouseEvent.CLICK, tekanJawaban(btnOpsiD));
44.
45. jawaban = hasilRequest.kunciJawaban;
46. }
47. catch (error:Error){
48. reset();
49. trace(error.toString());
50. }
51. };
52.
53. var jawaban:String = "";
54. function tekanJawaban(mv:Button):Function {
55. return function(e:MouseEvent):void{
56. if(jawaban != ""){
57. if(mv.label == jawaban){
58. labelStatus.text = "Jawaban anda benar !";
59. }
60. else {
61. labelStatus.text = "Jawaban anda salah !";
62. }
63. }
 64. }
65. };
66.
67. function reset():void{
68. btnOpsiA.label = "Opsi A";
69. btnOpsiB.label = "Opsi B";
70. btnOpsiC.label = "Opsi C";
71. btnOpsiD.label = "Opsi D";
72.
73. labelStatus.text = "Status Jawaban Anda";
74. jawaban = "";
75. }

Dan lakukan modifikasi pada file PHP yang sudah kita buat :

3. $row = mysqli_fetch_array($doQuery);
4. if(count($row) != 0){
5. $hasil .= "soaldariPHP=" . $row['pertanyaan'];
6. $hasil .= "&opsiAPHP=". $row['opsiA'];
7. $hasil .= "&opsiBPHP=". $row['opsiB'];
8. $hasil .= "&opsiCPHP=". $row['opsiC'];
9. $hasil .= "&opsiDPHP=". $row['opsiD'];
10. $hasil .= "&kunciJawaban=". $row['jawaban'];
11. echo $hasil;
12. } else …

III. Tugas
1. Buat sebuah aplikasi seperti yang sudah dijelaskan sebelumnya, dimana opsi pilihan
berganda diganti dengan pilihan singkat, soal dan jawaban di ambil dari database!
 MODUL VIII

DATABASE II
1. Tujuan

1. Praktikan dapat memanfaatkan fungsi database untuk membuat ensiklopedia dinamis.

2. Teori

Ensiklopedia yang akan kita bahas pada kali ini merupakan sebuah ensiklopedia
sederhana, dimana ensiklopedia ini memuat informasi yang diambil dari database.

1.1 Membuat Interface

Buat sebuah database :

CREATE DATABASE dbhewan;

Buat sebuah table dengan nama dataHewan :

CREATE TABLE dataHewan (

id int(2) primary key,
nama varchar(20),
keterangan varchar(200),
urlSuara varchar(100),
urlGambar varchar(100));

Buat sebuah record sederhana :

INSERT INTO dataHewan VALUES (1,'Angsa',

'Angsa adalah burung air berukuran besar dari genus Cygnus famili Anatidae.
Bebek dan Angsa berleher pendek juga terdapat di famili Anatidae.',

'http://localhost/angsa.jpg');

Pastikan di /htdocs/ sudah terdapat angsa.mp3 dan angsa.jpg

Buatlah sebuah File baru (ActionScript 3.0), lalu tambahkan komponen berikut :

Tipe Text / Label Instance Name

Component – Text Input Ketikkan nama hewan di sini tbPencarian

Component - Button Cari btnCari

Component - Label Nama Hewan labelNama

Component – UI Loader - loaderGambar

Component – TextArea - taKeterangan

Component - PlayButton - btnPlay

 Component – Label Jalankan Suara -

Tambahkan baris program berikut pada frame 1 :

import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequestMethod;
import flash.events.Event;

var urlSuara:String = "";

var urlGambar:String = "";
var ket:String = "";
var nHewan:String = "";
var kontrol:SoundChannel = new SoundChannel();
var suaraHewan:Sound = new Sound();
var mulaiSuara:int = 0;

btnPlay.addEventListener(MouseEvent.CLICK,putarSuara);
function putarSuara(event:MouseEvent):void
{
if(mulaiSuara == 0){
kontrol = suaraHewan.play();
mulaiSuara = 1;
} else {
kontrol.stop();
mulaiSuara = 0;
}
}

btnCari.addEventListener(MouseEvent.CLICK,sendData);
function sendData(event:MouseEvent):void
{
reset();
var alamatRequest:URLRequest = new URLRequest("http://127.0.0.1/Ensiklopedia.php");

alamatRequest.method = URLRequestMethod.POST;
 var pengaturData:URLLoader = new URLLoader;
pengaturData.dataFormat = URLLoaderDataFormat.VARIABLES;

var variabelKirim:URLVariables = new URLVariables();

variabelKirim.namaHewan = tbPencarian.text.toString();

alamatRequest.data = variabelKirim;

pengaturData.addEventListener(Event.COMPLETE,selesai);
pengaturData.load(alamatRequest);
}

function selesai(event:Event):void
{
try {
var hasilRequest:URLVariables = new URLVariables(event.target.data);
urlSuara = hasilRequest.suara;
urlGambar = hasilRequest.gambar;
ket = hasilRequest.keterangan;
nHewan = hasilRequest.namahewan;

if(urlGambar != ""){
loaderGambar.load(new URLRequest(urlGambar));
}

if(urlSuara != ""){
suaraHewan.load(new URLRequest(urlSuara));
}
labelNama.text = nHewan;
taKeterangan.text = ket;

}
catch (error:Error){
reset();
}
}

function
reset():void{
urlSuara = “”;
urlGambar = “”;
ket = “”;
nHewan = “”;
suaraHewan = new Sound();
kontrol = new SoundChannel();
}

Buat sebuah file PHP dan simpan di htdocs/ dengan nama Soal.php, isi dari Soal.php adalah
sebagai berikut :
 if(count($row) != 0){
$hasil .= "suara=" . $row['urlSuara'];
$hasil .= "&gambar=". $row['urlGambar'];
$hasil .= "&keterangan=". $row['keterangan'];
$hasil .= "&namahewan=". $row['nama'];
echo $hasil;
}
}
?>

3. Tugas
1. Buatlah sebuah ensiklopedia bertema bebas dengan 2 tampilan gambar, dan
minimal 10 record !