MODUL I

ADOBE ANIMATE CC

1.1 Tujuan Pembelajaran

a. Mahasiswa memahami konsep dasar Adobe Animate

b. Mahasiswa memahami komponen-komponen pada Adobe Animate
c. Mahasiswa mampu mengoperasikan tools pada Adobe Animate dan membuat
objek 2D sederhana

1.2 Capaian Pembelajaran

a. Mahasiswa diharapkan mampu menjelaskan konsep dasar Adobe Animate

b. Mahasiswa diharapkan mampu menggunakan komponen-komponen pada
Adobe Animate
c. Mahasiswa diharapkan mampu membuat objek 2D sederhana dengan tool-tool
yang ada pada Adobe Animate

1.3 Materi

a. Animasi 2D
Animasi 2D atau animasi dwi-matra dikenal juga dengan nama flat animation.
Ada beberapa teknik yang dapat digunakan dalam proses pembuatannya, antara lain
dengan sistem: Cell Technique (Film Animasi Teknik Sel) Teknik cell ini
merupakan teknik dasar pembuatan film animasi klasik. Rangkaian gambar dibuat
di atas lembaran transparan yang tembus pandang/sel (cell). Objek utama yang
mengeksploitir gerak dibuat terpisah dengan latar belakang dan depan yang statis.
Dengan demikian, latar belakang (background) dan latar depan (foreground) dibuat
hanya sekali saja. Cara ini dapat menyiasati pembuatan gambar yang terlalu banyak.
Proses pembuatan animasi seperti ini mendominasi seluruh film animasi klasik

1
yang juga masih dapat kita nikmati hingga saat sekarang, seperti Scooby Doo, The
Flintstone, dan lain-lain.
Software animasi 2D adalah software yang digunakan untuk membuat animasi
tradisional (flat animation), umumnya mempunyai kemampuan untuk
menggambar, mengatur gerak, mengatur waktu, beberapa dapat mengimpor suara.
Dari sisi penggunaan umumnya tidak sulit. Contoh dari Software Animasi 2D ini
antara lain: CrazyTalk Animator 3, OpenToonz, Toon Boom Harmony, MOHO
(Studio Anime), Synfig Studio, Tupi, Adobe Animate CC, Stop Motion Studio,
Pivot Animator, Pencil2D, Animaker dan sebagainya.

b. Adobe Animate
Adobe Animate (dulunya Adobe Flash) adalah multimedia yang berguna untuk
membuat animasi dari Adobe Systems
Adobe Animate digunakan untuk merancang grafik vektor dan animasi untuk
program televisi, video online, situs web, aplikasi web, aplikasi internet yang kaya,
dan permainan video. Program ini juga menawarkan dukungan untuk grafik raster,
teks kaya, embedding audio dan video, dan skrip ActionScript. Animasi dapat
diterbitkan untuk HTML5, WebGL, Scalable Vector Graphics (SVG) animasi dan
spritesheets, dan warisan Flash Player (SWF) dan format Adobe AIR.
Ini pertama kali dirilis pada tahun 1996 sebagai FutureSplash Animator, dan
kemudian berganti nama menjadi Macromedia Flash setelah diakuisisi oleh
Macromedia. Itu dibuat untuk berfungsi sebagai lingkungan penulis utama untuk
platform Adobe Flash, perangkat lunak berbasis vektor untuk membuat konten
animasi dan interaktif. Itu berganti nama menjadi Adobe Animate pada tahun 2016
untuk mencerminkan posisi pasarnya dengan lebih akurat, karena lebih dari
sepertiga dari semua konten yang dibuat di Animate menggunakan HTML5
Versi pertama dari Adobe Flash / Adobe Animate adalah FutureSplash
Animator, sebuah program grafik vektor dan animasi vektor yang dirilis pada Mei
1996. FutureSplash Animator dikembangkan oleh FutureWave Software, sebuah
perusahaan perangkat lunak kecil yang produk pertamanya, SmartSketch, adalah
program menggambar berbasis vektor untuk komputer berbasis pena. Dengan

2
ledakan sistem dioperasikan berorientasi pena, itu porting ke Microsoft Windows
serta Classic Mac OS Apple Inc. Pada tahun 1995, perusahaan memutuskan untuk
menambahkan kemampuan animasi ke produk mereka dan untuk membuat
platform animasi berbasis vektor untuk World Wide Web; karenanya FutureSplash
Animator dibuat. (Pada saat itu, satu-satunya cara untuk menyebarkan animasi
semacam itu di web adalah melalui penggunaan Java.) Teknologi animasi
FutureSplash digunakan di situs web seperti MSN, situs web Simpsons, dan Disney
Daily Blast dari The Walt Disney Company.
Pada bulan Desember 1996, Macromedia membeli FutureWave dan mengganti
nama produk tersebut menjadi Macromedia Flash, nama merek yang berlanjut
selama 8 versi utama. Adobe Systems mengakuisisi Macromedia pada tahun 2005,
dan merek-ulang produk Adobe Flash Professional untuk membedakan dari
pemain, Adobe Flash Player. Itu dimasukkan sebagai bagian dari Creative Suite
produk dari CS3 ke CS6, sampai Adobe menghapus jajaran Creative Suite demi
Creative Cloud (CC).
Pada 1 Desember 2015, Adobe mengumumkan bahwa program tersebut akan
diganti nama menjadi Adobe Animate pada pembaruan besar berikutnya. Langkah
ini datang sebagai bagian dari upaya untuk memisahkan program dari Adobe Flash
Player, mengakui peningkatan penggunaannya untuk pembuatan HTML5 dan
konten video, dan upaya untuk mulai mengecilkan penggunaan Flash Player demi
solusi berbasis web standar. Versi pertama dengan nama baru dirilis 8 Februari
2016.

3
c. Komponen Adobe Animate

1. Menu Bar, Berisi kumpulan menu atau perintah - perintah serta

menyediakan akses cepat menuju tool - tool yang umum digunakan.
2. Timeline, Merupakan komponen yang digunakan untuk mengatur atau
mengontrol jalannya animasi. Timeline terdiri dari beberapa layer. Layer
digunakan untuk menempatkan suatu atau beberapa objek dalam stage agar
dapat diolah oleh objek lain. Setiap layer terdiri dari frame - frame yang
digunakan untuk mengatur kecepatan animasi. Semakin panjang frame
dalam layer, maka semakin lama animasinya akan berjalan.
3. Toolbar, Panel yang berisi berbagai macam tool yang digunakan untuk
membuat animasi.
4. Layer/Stage, Stage adalah lembar kerja tempat kita yang digunakan untuk
memainkan objek - objek yang akan diberi animasi. Dalam stage ini kita
dapat membuat gambar, teks, memberi warna dan lain - lain.
5. Actions, Panel Action tempat untuk memberikan kode ActionScript untuk
membuat animasi atau interaksi.
6. Properties, Panel propeties akan berubah tampilan dan fungsinya
mengikuti bagian mana yang sedang diaktifkan. Misalnya anda sedang
mengaktifkan Line Tool, maka yang muncul pada jendela properties adalah

4
 fungsi - fungsi untuk mengatur line/garis seperti bentuk garis, besarnya
garis, dan warna garis.
7. Library, Panel Library mempunyai fungsi sebagai perpustakaan
simbol/media yang digunakan dalam animasi yang sedang dibuat. Simbol
merupakan kumpulan gambar baik movie, tombol (button), sound, dan
gambar statis (graphic), dll.

d. Fungsi-Fungsi Tools
Tools yang disediakan pada Adobe Animate ini berfungsi untuk mempermudah
atau membantu kita dalam kegiatan pembuatan animasi. Berikut terdapat beberapa
tools dan fungsinya yang terdapat pada Adobe Animate.
1. Selection Tool

Selection tool berfungsi untuk memilih dan memindahkan objek-objek yang

ada di dalam stage. Bisa diaktifkan dengan shortcut tombol (V) pada
keyboard.
2. Subselection Tool

Subselection tool, mirip dengan Selection Tool, tetapi kita bisa memilih
komponen-komponen terkecil bila objek yang aktif merupakan objek shape.
Bisa diaktifkan dengan shortcut tombol (A) pada keyboard.
3. Free Transform Tool dan Gradient Transform Tool

- Free Transform Tool digunakan untuk memanipulasi objek yang

terpilih. Manipulasi yang bisa kita lakukan antara lain rotate, scaling,
skew, dll. Bisa diaktifkan dengan shortcut tombol (Q) pada keyboard.

5
 - Gradient Transform Tool digunakan untuk memanipulasi warna
gradien yang ada pada objek. Bisa diaktifkan dengan shortcut tombol
(F) pada keyboard.
4. 3D Rotation Tool

3D Rotation berfungsi untuk memanipulasi objek menjadi gambar tiga

dimensi. Bisa diaktifkan dengan shortcut tombol (W) pada keyboard.
5. Lasso Tool

- Lasso Tool digunakan untuk memilih bagian dar objek shape dengan
bentuk yang kita inginkan. Tidak seperti selection Tool yang hanya
memungkinkan kita memilih objek Shape dengan cakupan wilayah
persegi. Bisa diaktifkan dengan shortcut tombol (L) pada keyboard.
- Polygon tool berfungsi untuk membuat persegi dengan sudut
tergantung jumlah lekukan. tool ini bisa menggambar segitiga, segilima
dll. Bisa diaktifkan dengan shortcut tombol (L) pada keyboard.
- Magic Wand Tool berfungsi untuk menteleksi objek berbentuk vector
yang memiliki atribut yang sama seperti warna, garis, gradient. Bisa
diaktifkan dengan shortcut tombol (L) pada keyboard.
6. Pen Tool

- Pen Tool digunakan untuk menggambar objek shape secara manual.

Bisa diaktifkan dengan shortcut tombol (P) pada keyboard.
- Add Anchor Point Tool digunakan untuk menggambar objek shape
secara manual. Bisa diaktifkan dengan shortcut tombol (=) pada
keyboard.

6
 - Delete Anchor Point digunakan untuk menghapus vertex yang ada pada
garis shape. Bisa diaktifkan dengan shortcut tombol (-) pada keyboard.
- Convert Anchor Point berfungsi untuk merubah garis menjadi bentuk
kurva. Bisa diaktifkan dengan shortcut tombol (Shift+C) pada
keyboard.
7. Text Tool

Text Tool digunakan untuk menambahkan komponen teks pada satge,

typenya antara lain Static text, dynamic text, input text. Bisa diaktifkan
dengan shortcut tombol (T) pada keyboard.
8. Line Tool

Line Tool digunakan untuk menggambar garis lurus, hasilnya berupa garis
shape. Bisa diaktifkan dengan shortcut tombol (N) pada keyboard.
9. Rectangle Tool dan Rectangle Primitive Tool

- Rectangle Tool digunakan untuk membuat objek shape berbentuk

persegi. Bisa diaktifkan dengan shortcut tombol (R) pada keyboard.
- Rectangle Primitive Tool digunakan untuk membuat gambar berupa
persegi, yang modifikasinya tetap dipertahankan pada bentuk aslinya,
type gambarnya bersifat vektor tapi bukan shape. Bisa diaktifkan
dengan shortcut tombol (R) pada keyboard.
10. Oval Tool

- Oval Tool digunakan untuk membuat objek shape berbentuk

oval/lingkaran. Bisa diaktifkan dengan shortcut tombol (O) pada
keyboard.

7
 - Oval Primitive Tool digunakan untuk membuat gambar berupa Oval,
yang modifikasinya tetap dipertahankan pada bentuk aslinya, type
gambarnya bersifat vektor tapi bukan shape. Bisa diaktifkan dengan
shortcut tombol (O) pada keyboard.
11. PolyStar Tool

Polystar Tool digunakan untuk membuat objek shape dengan banyak sisi.
12. Pencil Tool

Pencil Tool digunakan Untuk Menggambar garis secara bebas, hasilnya

berupa garis shape. Bisa diaktifkan dengan shortcut tombol (Shift+Y) pada
keyboard.
13. Paint Brush Tool

Paint Brush Tool berfungsi untuk menggambar sesuai keinginan kita seperti
kita sedang menggambar menggunakan kuas namun gambar yang di
hasilnya berbentuk path. Bisa diaktifkan dengan shortcut tombol (Y) pada
keyboard.
14. Brush Tool

Brush digunakan untuk mewarnai stage, seakan layaknya sebuah cat, bentuk
yang dihasilkan merupakan objek shape. Bisa diaktifkan dengan shortcut
tombol (B) pada keyboard.
15. Bone Tool

- Bone Tool digunakan sebagai alat bantu untuk melakukan pergerakan

animasi. Bisa diaktifkan dengan shortcut tombol (M) pada keyboard.

8
 - Bind Tool digunakan untuk mengedit dan memodifikasi titik sendi dari
peranti Bone tool. Bisa diaktifkan dengan shortcut tombol (M) pada
keyboard.
16. Paint Bucket Tool

Paint Bucket Tool digunakan untuk mewarnai pada suatu bidang/objek yang
dipilih. Bisa diaktifkan dengan shortcut tombol (K) pada keyboard.
17. Ink Bottle

Ink Bottle digunakan untuk mewarnai pada tepi/edge dari objek yang
dipilih. Bisa diaktifkan dengan shortcut tombol (S) pada keyboard.
18. Eyedropper Tool

Eyedropper digunakan untuk mengeset warna yang dipilh sebagai warna

aktif untuk Stroke atau Fill Color. Bisa diaktifkan dengan shortcut tombol
(I) pada keyboard.
19. Eraser Tool

Eraser digunakan untuk mengahapus objek shape yang ada dalam stage.
Bisa diaktifkan dengan shortcut tombol (E) pada keyboard.
20. Camera

Camera digunakan untuk membawa objek ke mana yang diinginkan dan

bisa keluar dari kanvas. Bisa diaktifkan dengan shortcut (C) pada keyboard.
21. Hand Tool

Hand Tool digunakan untuk bernavigasi secara bebas. Bisa diaktifkan

dengan shortcut (H) pada keyboard.

9
 22. Zoom Tool

Zoom Tool digunakan untuk memperbesar/memperkecil ukuran semua

objek yang ada pada stage. Bisa diaktifkan dengan shortcut (Z) pada
keyboard.

1.4 Latihan

a) Membuat objek gambar dengan tool Adobe Animated

1. Membuat Bulan
a) Buatlah dokumen baru
b) Gantilah warna backgound selain warna putih (yang gelap)
c) Buatlah sebuah lingkaran berwarna putih tanpa garis. Seleksi lingkaran
tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan bulan
sebagai name dan movie clip sebagai type lalu tekan OK.
d) Seleksi movie clip bulan di stage dan klik filter pada properties
e) Setelah berpindah ke panel filters, tekan add filter dan pilih Glow. Ubah
Blur X menjadi 5, Blur Y menjadi 5, Strength 100%, Quality Low, dan
color berkode #CCCCCC.
f) Tekan add filter lagi dan pilih Glow. Pada Glow yang muncul
masukkan settingan berikut : ubah Blur X menjadi 33, Blur Y menjadi
33, Strength 100%, Quality High, dan color berkode #FFFFFF.

10
2. Membuat Bunga
g) Buatlah sebuah lingkaran lonjong berwarna merah dengan hitam
sebagai warna garisnya.
h) Tekan tombol Free Transform Tool pada toolbox sehingga anda akan
menggunakan tool tersebut.

i) Pastikan anda masih menyeleksi objek lingkaran yg baru saja,

kemudian tekan Ctrl+T maka akan terbuka jendela panel transform,
pada rotate tuliskan angka 40. Jika sudah tekan tombol duplicate
selection and transform sampai membentuk kelopak bunga.
j) Buatlah lingkaran kecil berwarna kuning dengan hitam sebagai warna
garisnya. Letakan lingkaran tersebut di tengah kelopak bunga.

11
 k) Tekan Ctrl+Enter untuk melihat hasilnya.
l) Jika seluruh garis tepi warna hitam dihapus maka hasilnya adalah
seperti ini:

b) Import gambar vector

a) Siapkan gambar vector (*.SVG, *.EPS, *.AI, *.CDR, dll)
b) Masuk ke menu file ➔ import ➔ import to library / import to stage ➔
cari file yg akan di importkan (cth: pedagang.ai)

c) Kemudian seleksi objek dalam gambar yang akan diimportkan ➔

import

12
 d) Objek gambar akan tersimpan kedalam library secara otomatis

1.5 Tugas

Buatlah sebuah tampilan yang menarik dengan menggunakan Adobe Animate

dengan memaksimalkan tools yang ada dan tuliskan tema dari tampilan yang anda
buat.

13
 MODUL II
ANIMASI SEDERHANA ADOBE ANIMATE

2.1 Tujuan Pembelajaran

Mahasiswa memahami jenis-jenis animasi sederhana yang dapat dibuat dalam

Adobe Animate

2.2 Capaian Pembelajaran

Mahasiswa diharapkan mempu membuat animasi-animasi sederhana dengan Adobe

Animate

2.3 Materi

Animasi adalah gambar begerak berbentuk dari sekumpulan objek yang disusun
secara beraturan mengikuti alur pergerakan yang telah ditentukan pada setiap
pertambahan hitungan waktu yang terjadi. Gambar atau objek yang dimaksud bisa
berupa gambar manusia, hewan, maupun tulisan. Ada 2 cara untuk membuat
animasi di dalam Flash yaitu animasi frame by frame dan animasi tweening.
a. Animasi Frame by Frame
Animasi frame by frame adalah membuat sebuah ilusi pergerakan dari sebuah
gambar/objek yang diam (still image) frame demi frame-nya.
b. Animasi Tweening
Animasi tweening adalah suatu pergerakan dari tempat yang satu ke tempat
yang lain yang mungkin pergerakan tersebut bisa berbeda. Animasi tweening dibagi
menjadi 6, yaitu:
1. Animasi Motion
Animasi motion merupakan animasi dengan mode tweening. Untuk
membuat animasi ini, hanya menentukan titik awal dan titik akhir,
selebihnya dikerjakan oleh komputer.
2. Animasi Motion Guide

14
 Animasi motion guide adalah animasi yang mempunyai gerakan sesuai
dengan jalur yang kita buat. Animasi ini sangat cocok digunakan untuk jenis
animasi yang membutuhkan ketelitan dalam pergerakan yang dikehendaki
atau sesuai keinginan pembuat animasi.
3. Animasi Mask
Animasi Mask adalah animasi yang pada intinya menampilkan objek yang
semula kita sembunyikan.
4. Animasi Alpha
Animasi Alpha adalah animasi yang membuat perubahan tampilan objek
menjadi transparan atau sebaliknya.
5. Animasi Transform
Animasi Transform adalah animasi perubahan posisi, baik perpindahan
maupun perputaran.
6. Animasi Shape
Animasi Shape adalah animasi yang digunakan untuk membuat animasi
perubahan bentuk dari satu bentuk ke bentuk yang lain.

2.4 Latihan

a. Membuat animasi Frame by frame

a) Pada layer 1 pilih Teks Tool, Ketikan huruf awal dari kalimat yang akan
dibuat, Misalnya kita akan membuat kata ANIMASI jadi huruf yang
diketikan adalah huruf A.
b) Pada Frame ke 5 klik kanan pilih insert keyframe, kemudian ketikan huruf
kedua yaitu N.
c) Pada Frame ke 10 klik kanan pilih insert keyframe, kemudian ketikan
huruf ketiga yaitu I.
d) Ulangi langkah di atas sampai kalimat yang ingin kita buat selesai.
e) Tekan CTRL + ENTER untuk melihat hasilnya.
b. Membuat animasi Montion
a) Buatlah file baru, pilih menu File –New

15
 b) Buatlah lingkaran pada stage disebelah kiri dengan menggunakan ovale
tools.
c) Klik kanan pada keyframe 1, pilih Create Classic Tween.
d) Klik kanan pada frame 20, pilih insert keyframe.
e) Pada frame 20 pindahkan lingkaran ke sebelah pojok kanan bawah dengan
Selection Tool.
f) Tekan CTRL + ENTER untuk melihat hasilnya.
c. Membuat animasi Montion guide
a) Buatlah file baru, pilih menu File –New
b) Buatlah lingkaran pada stage disebelah kiri dengan menggunakan ovale
tools.
c) Klik kanan pada keyframe 1, pilih Create classic tween.
d) Klik kanan pada frame 60, pilih Insert keyframe.
e) Klik kanan pada layer 1, pilih Add classic motion guide, maka akan
terbentuk sebuah layer baru bernama Motion Guide.
f) Klik frame 1 pada layer Motion guide yang terbentuk kemudian dengan
menggunakan pencil tools buatlah lengkungan sebagai lintasan.
g) Klik pada frame akhir / frame 60 pada layer 1, pindahkan objek (lingkaran)
ke titik terakhir garis menggunakan Selection Tool.
h) Tekan CTRL + ENTER untuk melihat hasilnya.
d. Membuat animasi Mask
a) Buatlah file baru, pilih menu File –New
b) Buatlah tulisan dengan Text Tool, tebalkan dan perbesar tulisan tersebut.
c) Klik kanan pada frame 40, pilih Insert frame.
d) Tambahkan layer baru menggunakan tombol new layer.
e) Pilih layer baru tersebut, buatlah lingkaran menggunakan Ovale tool di
sebelah kiri teks.
f) Klik kanan pada frame 40 layer 2, pilih Insert keyframe.
g) Pindahkan lingkaran ke sebelah kanan teks.
h) Klik kanan pada frame 1 layer 2, pilih create classic tween.
i) Klik kanan pada layer 2, pilih mask.

16
 j) Tekan CTRL + ENTER untuk melihat hasilnya.
e. Membuat animasi Alpha
a) Buatlah file baru, pilih menu File –New
b) Buatlah bentuk persegi dengan menggunakan Rectangle Tool
c) Klik objek persegi, tekan tombol F8 atau klik kanan pilih convert to
symbol, isikan nama symbol kemudian pilih type graphic
d) Klik kanan pada frame 1, pilih create classic tween
e) Klik kanan pada frame 15, pilih insert keyframe
f) Klik objek persegi, kemudian pada Color Effect Properties ubah style dari
none ke alpha, untuk alphanya kita isikan 30% untuk memberi efek
penampakan objek.
g) Tekan CTRL + ENTER untuk melihat hasilnya
f. Membuat animasi Transform
a) Buatlah file baru, pilih menu File –New
b) Buatlah persegi panjang dengan menggunakan Rectangle tools
c) Klik kanan pada frame 1, pilih Create classic tween
d) Klik kanan pada frame 30, pilih insert keyframe
e) Pilih tool Free Transform
f) Klik objek bantu persegi panjang yang terbentuk, transformasikan ke
bentuk yang anda inginkan.
g) Tekan CTRL + ENTER untuk melihat hasilnya
g. Membuat animasi Shape
a) Buatlah file baru, pilih menu File –New
b) Buatlah lingkaran dengan menggunakan ovale tools
c) Klik kanan pada frame 60, pilih Insert Blank Keyframe
d) Buatlah objek kotak dengan menggunakan rectangle tool
e) Klik kana pada timeline diantara frame 1 dan frame 25, pilih create shape
tween
f) Tekan CTRL + ENTER untuk melihat hasilnya

17
 MODUL III
ANIMASI LANJUT DENGAN ADOBE ANIMATE

3.1 Tujuan Pembelajaran

a. Mahasiswa memahami cara mengkombinasikan jenis-jenis animasi sederhana

b. Mahasiswa memahami konsep tombol dalam Adobe Animate
c. Mahasiswa memahami konsep menu dalam Adobe Animate

3.2 Capaian Pembelajaran

a. Mahasiswa mampu mengkombinasikan jenis-jenis animasi sederhana

b. Mahasiswa mampu membuat tombol dalam Adobe Animate
c. Mahasiswa mampu membuat menu dalam Adobe Animate

3.3 Latihan

a. Membuat Animasi Loading

1. Loading lingkaran Frame by Frame
a) Buka aplikasi Adobe Animate kemudian buat proyek baru
b) Buat 2 buah layer sebagai berikut

c) Tambahkan objek kotak dengan kombinasi warna #666666 sebagai

background pada layer BG frame 1, kemudian kunci layer BG agar tidak
berubah.

18
d) Buat objek seperti gambar berikut menggunakan lingkaran pada layer
loading frame 1

e) Seleksi kedua objek tersebut (lingkaran dan text), kemudian convert

menjadi movie clip dengan cara tekan F8 ➔ masukan nama movie clip

f) Double klik movie clip yang baru saja dibuat

g) Di dalam movie clip loading, buat 2 buah layer (lingkaran dan text),
pindahkan text loading tadi ke dalam layer text

19
h) Kemudian buat animasi frame by frame pada layer lingkaran dan text,
i) Perubahan animasi pada layer lingkaran adalah warna putih yang bergeser
setiap framenya.
j) Perubahan animasi pada layer text adalah penambahan titik “.” Setelah text
“loading” ➔ “loading.” (frame selanjutnya) ➔ “loading.” (frame
selanjutnya).

20
k) Tambahkan scene baru kemudian tambahkan text “Selamat Datang” pada
scene 2.

l) Klik kanan frame 1 (scene 2) >> Actions

m) Masukan script stop(); kemudian jalankan aniamsi

21
 n) Kembali ke Scene 1 klik kanan pada frame 75 ➔ insert frame, jalankan
animasi

2. Loading animasi Mask

a) Buka aplikasi Adobe Animate kemudian buat proyek baru
b) Buat 4 buah layer sebagai berikut:

22
c) Tambahkan objek kotak warna hitam sebagai background pada layer BG
frame 1, kemudian kunci layer BG agar tidak berubah.
d) Tambahkan kotakan kecil panjang berwarna putih pada layer Garis frame
1, letakan kotak tersebut ditengah-tengah lembar kerja, kemudian kunci
frame.
e) Tambahkan kotakan kecil (sama seperti langkah d) pada layer Mask
frame 1, letakan kotak tersebut tepat di samping kanan kotakan yang
pertama (langkah d)

f) Tambahkan tulisan 2% pada layer Angka frame 1, letakan tulisan

tersebut di atas kotak pertama (langkah d)

23
g) Klik kanan layer Mask frame 50 ➔ Insert Keyframe, kemudian
pindahkan objek kotakan pada frame 50 hingga menutupi objek yang ada
di layer garis.
h) Klik kanan frame 60 (Mask) ➔ Insert Frame
i) Klik kanan frame 1 (Mask) >> Create Classic Tween

j) Klik frame 1 (Angka) >> tekan F6 pada keyboard, kemudian ganti

angkanya (frame 2) menjadi 4%
k) Klik frame 2 (Angka) >> tekan F6 pada keyboard, kemudian ganti
angkanya (frame 3) menjadi 6%
l) Lakukan langkah di atas (J, K) hingga frame 50 dengan angka 100%
m) Klik kanan frame 60 (Angka) >> Insert Frame

n) Klik kanan layer Mask >> pilih Mask, sehingga tampilan akhir timeline
akan seperti ini

24
 o) Tambahkan scene baru kemudian tambahkan text “Selamat Datang” pada
scene 2
p) Klik kanan frame 1 (scene 2) ➔ Actions
q) Masukan script stop(); kemudian jalankan animasinya
b. Membuat Animasi Text Bersinar
a) Buka aplikasi Adobe Animate kemudian buat projek baru
b) Buat 2 buah layer (BG dan Text1), kemudian atur warna BG pada objek
kotang (layer BG) dan text pada layer Text1 sebagai berikut

25
c) Duplikat layer text1 sebanyak 2x kemudian rubah namanya (text2 dan
text3)
d) Rubah warna text pada layer text2 dan text3 serta rubah sedikit posisinya

e) Tambahkan layer baru (sinar) kemudian beri objek kotakan disebelah kiri
text
f) Klik kanan layer sinar ➔ Create Motion Tween
g) Atur panjang frame pada motion tween layer sinar

h) Geser objek kotak pada layer sinar kesebelah kanan tulisan

i) Klik kanan frame 35 layer text3 ➔ insert frame
j) Lakukan Langkah yang sama pada layer text2, text1 dan BG

26
 k) Klik kanan layer sinar ➔ mask
l) Geser layer text2 hingga masuk ke bagian mask layer sinar (seperti pada
layer text3)

m) Jalankan animasi
c. Membuat Tombol
a) Buka aplikasi Adobe Animate kemudian buat projek baru
b) Buat design awal tombol yg akan dibuat (kotak dan text)

c) Seleksi kedua objek (kotak dan text) ➔ Modify ➔ convertr to symbol

atau tekan tombol F8, kemudian tentukan nama untuk tombol dan pilih
button pada bagian type ➔ OK

27
d) Pada dasarnya tombol sudah jadi dan bisa langsung digunakan, tapi kita
juga bisa mengatur design tampilan tombol saat keadaan normal, saat di
lewati cursor, saat di tekan serta area yang bisa ditekan dalam tombol,
dengan cara sebagai berikut
e) Double klik symbol tombol yang baru saja kita buat

f) Secara default jumlah layer dalam tombol adalah satu/1 (tapi masih bisa
ditambakan lagi)
g) Frame Up, Over, Down dan Hit berfungsi untuk mengatur tampilan pada
tombol nantinya

28
 Up : Tempat untuk mengatur tampilan awal tombol
Over : Tempat untuk mengatur tampilan saat tombol disentuh
Down : Tempat untuk mengatur tampilan saat tombol di klik
Hit : Tempat untuk mengatur area yang dapat di tekan
h) Setiap frame dapat diberi tampilan yang berbeda-beda, tergantung dari
keinginan pengguna

i) Jalankan animasi
d. Membuat Halaman Menu dan Memasukan Suara
a) Buka aplikasi Adobe Animate kemudian buat projek baru
b) Buat 4 buah layer seperti berikut untuk meletakan objek-objeknya:

29
 Action : layer yang digunakan untuk meletakan ActionScript
Text : layer yang digunakan untuk meletakan isi text halaman
Btn : layer yang digunakan untuk meletakan tombol
BG : layer yang digunakan untuk meletakan backGround gambar
c) Buat tampilan halaman (scene) Home dengan menempatkan komponen-
komponen pada layer yang telah dibuat, kemudian atur instance name (IN)
tombol seperti berikut:

30
d) Kemudian Duplicate Scene yang di atas menjadi 4 buah dan rubah nama
tiap scene menjadi seperti berikut:

e) Kemudian rubah isi text setiap halaman untuk membedakan antara scene
satu dengan yang lainnya:

f) Selanjutnya berikan ActionScript berikut pada s_home, layer Action,

frame 1.

31
stop();

function Fsi_home(Fsi_home:MouseEvent):void{
gotoAndPlay(1, "s_home");
}
function Fsi_kompetensi(Fsi_kompetensi:MouseEvent):void{
gotoAndPlay(1, "s_kompetensi");
}
function Fsi_materi(Fsi_materi:MouseEvent):void{
gotoAndPlay(1, "s_materi");
}
function Fsi_kuis(Fsi_kuis:MouseEvent):void{
gotoAndPlay(1, "s_kuis");
}
btn_kompetensi.addEventListener(MouseEvent.CLICK,Fsi_kompetensi);
btn_materi.addEventListener(MouseEvent.CLICK,Fsi_materi);
btn_kuis.addEventListener(MouseEvent.CLICK,Fsi_kuis);

g) Selanjutnya berikan ActionScript berikut pada s_kompetensi, layer

Action, frame 1.
stop();

btn_home.addEventListener(MouseEvent.CLICK,Fsi_home);
btn_materi.addEventListener(MouseEvent.CLICK,Fsi_materi);
btn_kuis.addEventListener(MouseEvent.CLICK,Fsi_kuis);

h) Selanjutnya berikan ActionScript berikut pada s_materi, layer Action,

frame 1.
stop();

btn_home.addEventListener(MouseEvent.CLICK,Fsi_home);
btn_kompetensi.addEventListener(MouseEvent.CLICK,Fsi_kompetensi);
btn_kuis.addEventListener(MouseEvent.CLICK,Fsi_kuis);

i) Selanjutnya berikan ActionScript berikut pada s_kuis, layer Action, frame

1.
stop();

btn_home.addEventListener(MouseEvent.CLICK,Fsi_home);
btn_kompetensi.addEventListener(MouseEvent.CLICK,Fsi_kompetensi);
btn_materi.addEventListener(MouseEvent.CLICK,Fsi_materi);

j) Sehingga daftar ActionScript dalam projek seperti berikut

32
k) Jalankan animasi
l) Ada juga bisa menambahkan sound pada setiap halaman, dengan cara:
- Import sound ke dalam library
- Tentukan frame mana yang akan diberi sound
- Tarik sound dari library ke area kerja atau setting bagian propertis
sound

33
e. Membuat halaman PopUp Exit
a) Buka projek “memuat halaman” pada Langkah sebelumnya
b) Masuk ke scene s_home, tambahkan layer baru dengan nama exit

c) Kemudian buat sebuah movie clip (mc_keluar) pada layer exit frame 1,
berikut movie clipnya
- Buat 3 buah layer pada movie clip untuk meletakan objek-objek dalam
movie clip

- Buat objek kotak sepertiberikut pada layer BG, dan atur alphanya agar
konten dibelakang movie clip nanti tetap terlihat

34
 - Tambahkan kata-kata keterangan dan 2 buah tombol pada layer isi,
kemudian atur instance name (IN) tombol seperti berikut:

- Selanjutnya berikan ActionScript berikut pada layer Action, frame 1

import flash.display.MovieClip;

stop();
var _root:MovieClip = MovieClip(root);

function fsi_tidak(tidak:MouseEvent):void{
_root.mc_keluar.visible = false;
}
function fsi_ya(ya:MouseEvent):void{
fscommand("quit","true");
}

btn_tidak.addEventListener(MouseEvent.CLICK,fsi_tidak);
btn_ya.addEventListener(MouseEvent.CLICK,fsi_ya);

d) Kembali ke scene s_home utama, modifikasi ActionScript pada layer

Action menjadi seperti berikut:

35
 import flash.events.MouseEvent;

stop();

mc_keluar.visible = false;

function fsi_keluar(keluar:MouseEvent):void{
mc_keluar.visible = true;
}
btn_exit.addEventListener(MouseEvent.CLICK,fsi_keluar);

function fsi_home(home:MouseEvent):void{
gotoAndPlay(1, "s_home");
}
…..
…..
…..

e) Kemudian copy layer Exit pada scene S_Home ini ke semua scane
(s_kompetensi, s_materi, dan s_kuis)
f) Kemudian modifikasi ActionScript pada scane s_kompetensi, s_materi
dan s_kuis layer Action menjadi seperti berikut
stop();
mc_keluar.visible = false;
btn_exit.addEventListener(MouseEvent.CLICK,fsi_keluar);

btn_home.addEventListener(MouseEvent.CLICK,Fsi_home);
…..
…..
…..

g) Kemudian jalankan animasi

3.4 Tugas

Buatlah tampilan multimedia interaktif sederhana yang memuat halaman loading

beberapa scene dan tombol untuk berpindah antar scene

36
 MODUL IV
KUIS DAN PUBLISH APK

4.1 Tujuan Pembelajaran

a. Mahasiswa memahami konsep kuis sederhana dengan Adobe Animate

b. Mahasiswa memahami konsep kuis acak dengan Adobe Animate
c. Mahasiswa memahami konsep pembuatan APK dalam Adobe Animate

4.2 Capaian Pembelajaran

a. Mahasiswa mampu membuat kuis sederhana dengan Adobe Animate

b. Mahasiswa mampu membuat kuis acak dengan Adobe Animate
c. Mahasiswa mampu membuat APK dalam Adobe Animate

4.3 Latihan

a. Kuis Pilihan Ganda Sederhana

a) Buka aplikasi Adobe Animate kemudian buat projek baru
b) Buat 4 buah layer seperti berikut untuk meletakan objek-objeknya:

c) Buat 1 buah tombol pada layer Tombol sebagai tombolo opsi nantinya,
kemudian copy menjadi 4 serta tambahkan text untuk pertanyaan dan opsi
jawaban pada layer Text
d) Kemudian atur instance name (IN) tombol seperti berikut:

37
 e) Selanjutnya berikan ActionScript berikut pada layer Action, frame 1.
stop();
var nilai:int;
function mulai(e:MouseEvent):void{
gotoAndPlay(1);
nilai = 0;
}
function benar(benar:MouseEvent):void{
nilai+=3;
this.nextFrame();
}
a.addEventListener(MouseEvent.CLICK,benar);

function salah(salah:MouseEvent):void{
this.nextFrame();
}
b.addEventListener(MouseEvent.CLICK,salah);
c.addEventListener(MouseEvent.CLICK,salah);
d.addEventListener(MouseEvent.CLICK,salah);

f) Masuk ke frame 2 layer Tombol ➔ tekan F6 / klik kanan pilih insert

Keyframe
g) Atur soal dan jawaban nomor 2 pada frame 2
h) Kemudian atur instance name (IN) tombol seperti berikut:

38
 i) Selanjutnya berikan ActionScript berikut pada layer Action, frame 1.
stop();
a2.addEventListener(MouseEvent.CLICK,salah);
b2.addEventListener(MouseEvent.CLICK,benar);
c2.addEventListener(MouseEvent.CLICK,salah);
d2.addEventListener(MouseEvent.CLICK,salah);

j) Ulangi Langkah f – i sesuai jumlah soal yg diinginkan (pastikan mengganti

instance name setiap tombol masing-masing soal)
k) Tambahkan 1 keyframe baru setelah soal terakhir, kemudian tambahankan
1 tombol dan 1 dynamic text

l) Selanjutnya berikan ActionScript berikut pada layer Action, frame

terakhir

39
stop();
text_skor.text = String(nilai);
btn_mulai.addEventListener(MouseEvent.CLICK,mulai);

m) Jalankan animasi

b. Kuis Pilihan Ganda Acak

a) Buka aplikasi Adobe Animate kemudian buat projek baru dengan ukuran
resolusi handphone
b) Buat 3 buah layer seperti berikut untuk meletakan objek-objeknya:

Layer BG : untuk menempatkan gambar latar belakang

Layer Isi : untuk menempatkan objek-objek kuis (soal, jawaban, dan
tombol)
Layer Action : untuk menempatkan ActionScript
c) Tambahkan 1 tombol pada frame 1 yang mengarah ke frame 2 (bertujuan
untuk memulai kuis)
d) Buatlah sebuah MovieClip untuk membuat tombol pilihan jawaban
e) Kemudian buat 2 buah layer (BG dan text) didalam MovieClip yang baru
saja dibuat
f) Tambahkan dynamic text pada layer text untuk menempatkan jawaban
kemudian rubah instance name menjadi “jawaban_txt”
g) Buatlah kotak background pada layer BG frame 1 untuk efek mouse over
kemudian insert keyframe pada frame 2 dan rubah warna kotakan (*efek
mouse over dapat ditampilkan secara otomatis pada symbol button, akan
tetapi button atau tombol tidak dapat menampilkan objek lain seperti
dynamic text di dalamnya, sehingga kita gunakan objek bertipe MovieClip)

40
h) Kembali ke scene awal frame 2 kemudian tambahkan MovieClip yang baru
saja dibuat sebanyak 4 buah serta tambahkan 2 buah dynamic text untuk
tempat penulisan soal dan tempat nilai, kemudian setting instance name
masing-masing objek sebagai berikut;

i) Buat Movieclip lagi untuk menunjukan pesan benar dan salah

j) Pastikan anda centang opsi Export for ActionScript pada saat membuat
MovieClip ini

41
k) Masuk ke frame 2 MovieClip hasil_mc kemudian rubah design untuk
jawaban yang salah

l) Kembali ke scene utama kemudian masuk ke frame 3 dan tambahkan 1

dynamic text untuk menampilkan skor akhir kuis dan 1 tombol untuk
mengulang kuis dari awal

42
 m) Selanjutnya berikan ActionScript berikut pada layer Action, frame 1
stop();
function Fsi_Btn_UK_PG(Fsi_Btn_UK_PG:MouseEvent):void{
gotoAndPlay(2);
}

Btn_UK_PG.addEventListener(MouseEvent.CLICK,Fsi_Btn_UK_PG);

n) Selanjutnya berikan ActionScript berikut pada layer Action, frame 2

(*code berwarna merah dengan tanda “//” didepannya hanya baris
komentar dan bisa diabaikan)
stop();
var nilai:Number = 0;
var no_soal:Number = 0;
var max_soal:Number = 6; //jumlah soal yang ditampilkan
var hasil:hasil_mc;
// struktur soal 0. Soal 1-4 jawaban, Jawaban benar diletakkan no 1
var soal:Array = [["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi
Salah 3"],
["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah 3"],
["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah 3"],
["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah 3"],
["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah 3"],
["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah 3"],
["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah 3"],
["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah 3"]];

var temp_soal:Array;
var temp_jawaban:Array;

43
function acak_soal():void{
//mengacak soal
temp_soal = soal.slice(0, soal.length);
for (var i:Number = 0; i < soal.length; i++){
var acak:Number = Math.floor(Math.random()*soal.length);
var temp:Array = temp_soal[acak];
temp_soal[acak] = temp_soal[i];
temp_soal[i] = temp;
}
}
function restart():void{
//restart kuis, semua variabel dikembalikan ke posisi semula
acak_soal();
nilai = 0;
no_soal = 0;
max_soal = 6; //jumlah soal yang ditampilkan
score_txt.text = "0";
}

function tampilkan_soal():void{
//tampilkan soal
soal_txt.text = temp_soal[no_soal][0];
//acak jawaban
temp_jawaban = temp_soal[no_soal].slice(1, 5);
for (var i:Number = 0; i < temp_jawaban.length; i++){
var acak:Number = Math.floor(Math.random()*temp_jawaban.length);
var temp:String = temp_jawaban[acak];
temp_jawaban[acak] = temp_jawaban[i];
temp_jawaban[i] = temp;
}
//tampilkan jawaban
jawaban_1.jawaban_txt.text = temp_jawaban[0];
jawaban_2.jawaban_txt.text = temp_jawaban[1];
jawaban_3.jawaban_txt.text = temp_jawaban[2];
jawaban_4.jawaban_txt.text = temp_jawaban[3];
}

function setup_awal():void{
restart();
tampilkan_soal();
//mengatur jawaban
jawaban_1.stop();
jawaban_2.stop();
jawaban_3.stop();
jawaban_4.stop();
jawaban_1.addEventListener(MouseEvent.CLICK, cek_jawaban);
jawaban_2.addEventListener(MouseEvent.CLICK, cek_jawaban);
jawaban_3.addEventListener(MouseEvent.CLICK, cek_jawaban);
jawaban_4.addEventListener(MouseEvent.CLICK, cek_jawaban);
//listener untuk efek tombol
jawaban_1.addEventListener(MouseEvent.MOUSE_OVER, mouse_over);
jawaban_2.addEventListener(MouseEvent.MOUSE_OVER, mouse_over);
jawaban_3.addEventListener(MouseEvent.MOUSE_OVER, mouse_over);
jawaban_4.addEventListener(MouseEvent.MOUSE_OVER, mouse_over);
//mouse out
jawaban_1.addEventListener(MouseEvent.MOUSE_OUT, mouse_out);
jawaban_2.addEventListener(MouseEvent.MOUSE_OUT, mouse_out);
jawaban_3.addEventListener(MouseEvent.MOUSE_OUT, mouse_out);
jawaban_4.addEventListener(MouseEvent.MOUSE_OUT, mouse_out);
}

44
function mouse_over(e:MouseEvent):void{
e.currentTarget.gotoAndStop(2);
}

function mouse_out(e:MouseEvent):void{
e.currentTarget.gotoAndStop(1);
}

function cek_jawaban(e:MouseEvent):void{
var no_jawaban:Number = Number(e.currentTarget.name.substr(8))-1;
if (temp_jawaban[no_jawaban] == temp_soal[no_soal][1]){
//jawaban benar
tampilkan_hasil(1);
//penambahan score untuk setiap soal yg benar
nilai+=5;
score_txt.text = String(nilai);
}else{
//jawaban salah
tampilkan_hasil(2);
}
}

function tampilkan_hasil(tp:Number):void{
hasil = new hasil_mc();
hasil.x = 236,4;
hasil.y = 433,5;
hasil.gotoAndStop(tp);
hasil.scaleX = 0.2;
hasil.scaleY = 0.2;
hasil.waktu = 0;
hasil.tp = tp;
hasil.addEventListener(Event.ENTER_FRAME, gerak_hasil);
addChild(hasil);
}

function gerak_hasil(e:Event):void{
var ob:Object = e.currentTarget;
if (ob.scaleX < 1){
ob.scaleX+=0.1;
ob.scaleY+=0.1;
}
if (ob.waktu > -1 && ob.tp < 3){
ob.waktu++;
if (ob.waktu > 25){
ob.waktu = -1;
//tambah no soal
no_soal++;
ob.removeEventListener(Event.ENTER_FRAME, gerak_hasil);
removeChild(DisplayObject(ob));
if (no_soal < max_soal){
tampilkan_soal();
}else{
gotoAndStop(3);
//tombol restart kuis
Btn_ulang.addEventListener(MouseEvent.CLICK,Fsi_Btn_UK_PG);
}
}
}
}
setup_awal();

45
 o) Selanjutnya berikan ActionScript berikut pada layer Action, frame 3
stop();
score_txt.text = String(nilai);

p) Jalankan animasi

c. Publish APK
a) Buka projek flash yang akan dipublish dalam bentuk apk, pastikan
ActionScript yang digunakan adalah ActionScript 3
b) Masuk ke menu file ➔ Publish Setting
c) Klik tombol Player Setting (icon kunci) sebelah targer

d) Masuk ke menu Deployment ➔ Create certificate (jika belum punya)

e) Isi data pada certificate baru yang dibuat

46
f) Kembali ke menu Deployment kemudian masukan password certificate
yang baru saja dibuat

g) Kemudian publish

47
 h) Tunggu hingga proses publish selesai, secara default file .apk akan
tersimpan difolder yang dengan dengan file projek .fla nya

2.4 Projek Adobe Animate

Buatlah Multimedia Interaktif lengkap dengan Adobe Animate kemudian publis

dalam bentuk .swf dan .apk

48