SUMBER BELAJAR PENUNJANG PLPG 2017

MATA PELAJARAN/PAKET KEAHLIAN

MULTIMEDIA

BAB IX
TEKNIK PEMBUATAN OBJEK DAN PENGGUNAAN
SCENE DALAM ANIMASI DUA DIMENSI

W. S. Gunawan Irianto

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN
2017
 Kompetensi Dasar:
• Memahami teknik pembuatan objek pada aplikasi Animasi 2 dimensi
• Memahami scene pada aplikasi Animasi 2 dimensi
Materi Pokok:
• Pembuatan objek pada aplikasi Animasi 2 dimensi
• Penggunaan Scene

A. Objek pada Animasi 2 Dimensi

Objek adalah suatu tipe data seperti suara, gambar, teks, yang digunakan untuk
mengontrol movie. Semua objek merupakan bagian dari suatu kelas. Objek pada
Flash dapat berupa gambar yang nampak, hingga sesuatu yang abstrak (tidak
nampak), misalnya tanggal, data, atau deteksi input dari mouse. Objek dapat dikenali
dan digunakan setelah terlebih dahulu diberi nama. Proses penamaan suatu objek
disebut instantiating. Selain objek yang didefinisikan, pada Flash terdapat predefined
class, yang terdiri dari objek yang bisa dipakai di dalam movie. Beberapa diantaranya,
yaitu: MovieClip, Color, Sound, Button, Stage, Text Field, dan Text Format.
Terdapat berbagai macam tool dalam Flash untuk membuat suatu objek,
diantaranya, yaitu: oval tool (yang sering digunakan untuk menggambar sebuah
lingkaran) dan rectangle tool (yang sering digunakan untuk menggambar sebuah
bujur sangkar atau persegi panjang).

1. Stroke dan Fill

Kedua objek tool tersebut (oval tool & rectangle tool), terdiri dari 2 (dua)
bagian, yaitu: Outline atau Stroke dan Fill. Outline atau Stroke merupakan bagian
terluar dari objek tersebut, sedangkan Fill merupakan bagian terdalam dari objek
tersebut, yang dapat diisi dengan warna atau gambar. Perhatikan gambar berikut:

1
 Gambar 9.1 Outline dan Fill
Stroke & Fill dapat disatukan dengan cara membuatnya menjadi satu grup,
yaitu dengan perintah: Group (dapat dipilih melalui menu Modify -> Group), atau
dengan cara menekan tombol Ctrl+G secara bersamaan. Tetapi sebelum membuat
Stroke & Fill menjadi satu grup, yang harus lakukan adalah memblok seluruh bagian
Stroke & Fill menggunakan Selection tool, hingga terlihat seperti Gambar 16.2. Jika
telah diblok, maka harus membuatnya menjadi satu grup dengan cara yang telah
dijelaskan di atas.

Gambar 9.2 Memblok Stroke & Fill Menggunakan Selection Tool

2. Membelah Objek dengan Line Tool

Selain itu dalam pemotongan gambar menggunakan Flash sangatlah mudah,
karena dapat menggunakan berbagai macam cara. Misalnya dalam memotong
sebuah Fill dengan menggunakan Line Tool.

Gambar 9.3 Membelah Objek dengan Line Tool

2
3. Menggambar dengan Pencil Tool
Dalam membuat sebuah objek, dapat menggunakan tool yang terdapat pada
Tools Box, yaitu Pencil Tool.

Gambar 9.4 Menggambar dengan Pencil Tool

Jika memilih Straighten, maka objek yang dibuat akan berbentuk bujur sangkar
yang rapi. Tetapi jika memilih Smooth, maka objek yang dibuat akan tampak halus
garisnya, meskipun tidak serapih Straighten. Begitu pula dengan Ink, bentuknya juga
tidak serapih Straighten. Sedangkan yang membedakan antara Ink dengan Smooth
adalah garisnya yang kurang halus (masih terlihat kasar).

4. Menggambar dengan Pen Tool

Pen Tool biasanya digunakan untuk menggambar objek dengan metode edit
points. Untuk menggambar sebuah objek, tinggal menentukan posisi dari edit points
yang diinginkan.

Gambar 9.5 Menggambar dengan Pen Tool

5. Mewarnai objek dengan Brush Tool

Brush yang artinya adalah sikat/kuas, digunakan untuk mewarnai sebuah
objek secara keseluruhan. Ada 5 metode pemberian warna dengan Brush Tool (lihat
gambar di bawah ini).

3
 Gambar 9.6 Pemberian Warna dengan Brush Tool

6. Mengubah Bentuk Objek dengan Selection Tool

Untuk mengubah bentuk suatu objek dapat menggunakan Selection Tool.
Dengan Selection Tool, kita hanya mengubah bentuk suatu objek dengan meng-
gerakkan outline (garis objek) dari objek tersebut.

Gambar 9.7 Mengubah Bentuk Objek dengan Selection Tool

7. Mengubah Bentuk Objek dengan Subselection Tool

Dengan Subselection Tool, kita dapat mengubah suatu objek tool menjadi
suatu objek yang inginkan. Perhatikan Gambar 16.7, yang telah dipilih dengan
menggunakan Subselection Tool.

Gambar 9.8 Mengubah Bentuk Objek dengan Subselection Tool

4
 8. Meng-import Gambar dan Menggambar Ulang
Import gambar biasa dilakukan dalam menggunakan Flash. Hal ini diperlukan
untuk menjadikan gambar tersebut sebagai background ataupun untuk menggambar
ulang. Caranya adalah dengan memilih: Menu File -> Import -> Import to Stage, lalu
pilihlah gambar yang dikehendaki. Apabila akan menggambar ulang gambar tersebut,
maka letakkan gambar tersebut di layer bawah dan buat kembali layer di atasnya
untuk membuat gambar yang baru.

9. Mewarnai Objek pada Flash

Untuk memberikan efek yang baik pada suatu Animasi ada kalanya kita harus
mengatur warna suatu objek agar terlihat menarik. Dalam pewarnaan suatu objek
pada Flash dapat menggunakan berbagai macam tools, diantaranya yaitu:
• Color Mixer • Ink Bottle Tools
• Color Swatches • Brush Tools
• Paint Bucket Tools
Jika menginginkan Animasi yang dibuat mempunyai tampilan menarik dan indah,
maka harus diberi efek warna yang baik pula. Pada materi ini akan dibahas tentang
bagaimana cara menggunakan tools untuk memberikan efek warna pada suatu obyek agar
terlihat lebih menarik dan indah.
Berikut ini merupakan tampilan pada tool Color Mixer

Gambar 9.9 Tool Color Mixer

Di dalam Color Mixer, terdapat 5 macam type fill, yaitu:
• None – tidak memberi warna apapun pada fill.
• Solid – memberi warna padat pada fill.

5
• Linier – memberi warna berbentuk linier pada fill.
• Radial – memberi efek warna radial pada fill.
• Bitmap – memberi image pada fill (untuk mengimpor file gambar, gunakan Import to
Library pada file menu).
Untuk memberi warna pada objek yang ditentukan, harus menggunakan tools yang
bernama Paint Bucket Tool. Biasanya yang diberi warna pada obyek adalah fill-nya saja.
Untuk memberi warna pada Stroke, harus menggunakan Ink Bottle Tool. Pada pojok kanan
Window Color Mixer terdapat R, G, B (yang biasa disebut sebagai penentu warna). R (Red)
digunakan untuk memberi nilai seberapa besar kemerahan warna objek tersebut. G (Green)
digunakan untuk memberi nilai seberapa besar kehijauan warna objek tersebut. B (Blue)
digunakan untuk memberi nilai seberapa besar kedalaman warna biru pada objek tersebut.
Alpha memberi efek warna transparan pada objek yang dituju.
Berikut ini merupakan tampilan pada Tool Color Swatches.

Gambar 9.10 Tool Color Swatches

Pada Tool Color Swatches untuk memberi warna pada obyek, prinsipnya sama
dengan Tool Color Mixer, yang membedakannya adalah pada Tool Color Mixer kita dapat
mencampurkan berbagai warna sekaligus memodifikasinya menjadi suatu efek warna
sesuai dengan keinginan, sedangkan pada Tool Color Swatches efek warna sudah ditentu-
kan oleh sistem.

B. Membuat Objek 2 Dimensi pada Flash

Berikut ini merupakan contoh pembuatan objek dua dimensi berupa karakter atau
Avatar beserta Animasi ekspresi wajah.
1) Buat project baru menggunakan Action Script 2.0.
2) Buat layer terlebih dahulu untuk memudahkan pengeditan.

6
 Gambar 9.11 Membuat Layer
3) Buat objek wajah menggunakan Pen Tool

Gambar 9.12 Menggunakan Pen Tool

4) Atur lagi menggunakan Convert Anchor Point Tool

Gambar 9.13 Menggunakan Convert Anchor Point Tool

5) Beri warna coklat dengan menggunakan Paint Bucket Tool

7
 Gambar 9.14 Menggunakan Paint Bucket Tool
6) Atur stroke color menjadi hitam

Gambar 9.15 Mengatur Stroke Color

7) Tambahkan efek jerawat menggunakan Oval Tool, kemudian atur Fill Color-nya men-
jadi merah

Gambar 9.16 Menggunakan Oval Tool

8) Buat objek rambut dengan menggunakan Pen Tool.

8
 Gambar 9.17 Menggunakan Pen Tool
Sempurnakan menggunakan Convert Anchor Point Tool, agar tidak terkesan kaku.
Hasilnya menjadi seperti ini:

Gambar 9.18 Menggunakan Convert Anchor Point Tool

9) Atur Fill Color menjadi coklat tua. Hasilnya:

Gambar 9.19 Mengatur Fill Color Menjadi Coklat Tua

10) Untuk elemen wajah yang lain caranya sama, yaitu dibuat menggunakan Pen Tool dan
Convert Anchor Point Tool untuk merapikan objek agar tidak terkesan kaku. Hasilnya
seperti gambar di bawah ini:

9
 Gambar 9.20 Penggunaan Pen Tool dan Convert Anchor Point Tool
11) Selanjutnya buat leher juga menggunakan Pen Tool.

Gambar 9.21 Penggunaan Pen Tool untuk Membuat Leher

12) Selanjutnya membuat baju.

Gambar 9.22 Penggunaan Pen Tool untuk Baju

13) Berikan Fill Color biru dan Stroke Color hitam

10
 Gambar 9.23 Pemberian Fill Color Biru dan Stroke Color Hitam
Membuat objek tangan kiri, rapikan menggunakan Convert Anchor Point Tool

Gambar 9.24 Membuat Objek Tangan

14) Copy obyek tangan kiri dan paste sebagai obyek tangan sebelah kanan, posisikan
dengan efek terbalik (mirror). Hasilnya:

Gambar 9.25 Copy Obyek Tangan Kiri dan Paste Sebagai Obyek Tangan
15) Kemudian, beri efek brush pada bagian baju dengan menggunakan Deco Tool.
16) Atur properties-nya seperti gambar di bawah ini

11
 Gambar 9.26 Pengaturan Properties
17) Ubah warna dokumen atau stage melalui menu Modify -> Document menjadi kuning.
Hasil akhir Avatar adalah sebagai berikut:

Gambar 9.27 Hasil Akhir Avatar

18) Selanjutnya adalah membuat Animasi-nya. Untuk memudahkan, satukan kembali se-
mua obyek yang berbeda layer tadi ke dalam satu layer. Caranya pilih semua obyek
(Ctrl + A) dan copy (Ctrl + C), kemudian paste ke dokumen baru (Ctrl + V).
19) Pada frame 1, tambahkan key frame. Kemudian ubah bentuk mata dan mulut Avatar
menjadi seperti gambar di bawah ini. Tentunya menggunakan Pen Tool.

Gambar 9.28 Mengubah Bentuk Mata dan Mulut Avatar

12
20) Tambahkan lagi key frame pada frame ke-20 dengan bentuk Avatar menjadi seperti di
bawah ini.

Gambar 9.29 Mengubah Bentuk Avatar

21) Tambahkan lagi key frame pada frame ke 40 dan ke 55. Bentuk Avatar seperti saat
pembuatan Avatar pertama tadi.

Gambar 9.30 Mengubah Bentuk Avatar Seperti Bentuk Pertama

22) Pembuatan Animasi Avatar telah selesai.

C. Membuat Menu Interaktif pada Animasi 2 Dimensi

Berikut ini merupakan contoh pembuatan Flash KTM menggunakan menu interaktif
pada Adobe Flash.
1) Buat project baru.
2) Berikut ini adalah layer yang akan digunakan.

13
 Gambar 9.31 Membuat Layer Baru
3) Pada layer background, import gambar dari komputer, dan jadikan sebagai back-
ground. Hasilnya seperti gambar di bawah ini.

Gambar 9.32 Layer Background

4) Masih di layer yang sama, buat objek kotak menggunakan Rectangle Tool dengan pro-
perties:

Gambar 9.33 Membuat Kotak Menggunakan Rectangle Tool

5) Gambarkan ke stage. Hasilnya seperti Gambar 16.33.

14
 Gambar 9.34 Menggambar Kotak ke Stage
6) Tambahkan teks “KARTU MAHASISWA”, “Universitas Negeri Malang”, dan logo UM di
tiga layer yang berbeda.

Gambar 9.35 Menambahkan Teks “KARTU MAHASISWA”

7) Tambahkan teks dan objek-objek seperti pada gambar di bawah ini:

Gambar 9.36 Menambahkan Teks dan Obyek

Gambar foto diperoleh dari latihan sebelumnya. Untuk bingkai diimport dari file gam-
bar dari komputer.

15
8) Tambahkan button beserta teks nya. Buat dari Rectangle Tool terlebih dahulu

Gambar 9.37 Menambahkan Button Berserta Teks

9) Kemudian convert keempat tombol yang dibuat dari Rectangle Tool tadi menjadi
button. Blok elemen yang akan di-convert lalu klik kanan  convert to symbol

Gambar 9.38 Meng-convert Keempat Tombol

10) Ubah type-nya menjadi button.

Gambar 9.39 Mengubah Type Menjadi Button

11) Insert-kan key frame pada frame ke-1, 2, 3, dan 4

16
12) Kemudian untuk frame 2, atur menjadi seperti gambar di bawah ini:

Gambar 9.40 Mengatur Frame 2

13) Untuk frame 3:

Gambar 9.41 Mengatur Frame 3

14) Untuk frame 4:

Gambar 9.42 Mengatur Frame 4

15) Pada layer button dan di posisi frame 1, klik kanan lalu pilih action.
16) Ketikkan script seperti gambar di bawah ini.

17
 Gambar 9.43 Membuat Script di Layer Button dan di Posisi Frame 1
17) Dengan demikian, link telah berhasil dibuat.
18) Langkah selanjutnya adalah mengedit button. Klik kanan pada button, lalu pilih Edit.
19) Kemudian muncul timeline untuk pengeditan button.

Gambar 9.44 Timeline

20) Pada bagian over, ubah warna button menjadi seperti di bawah ini.

Maksud dari over ini adalah ketika mouse diarahkan ke button, maka button akan
berubah sesuai dengan yang kita atur.
21) Flash KTM telah berhasil dibuat. Hasil akhirnya adalah sebagai berikut:

Gambar 9.45 Hasil Akhir Flash KTM yang Berhasil Dibuat

18
D. Penggunaan Scene pada Adobe Flash
Scene ini bisa diartikan semacam membuat Flash document baru, namun dengan
setting-an Flash document pertama yang kita buat. Scene ini cocok digunakan bagi kita
yang membuat presentasi, pembelajaran interaktif, dan game yang membutuhkan pem-
bagian beberapa menu seperti: opening, main menu, dan ending.
Sebenarnya dengan menggunakan sebuah scene hal tersebut bisa dilakukan, tetapi
frame-nya akan menjadi sangat panjang. Oleh karena itu, apabila kita menggunakan
beberapa menu, sebaiknya gunakan scene tambahan. Karateristik scene yang perlu kita
ketahui adalah ketika frame pada timeline scene pertama habis untuk dimainkan, ma-
ka secara otomatis akan langsung berpindah ke frame pada timeline scene kedua. Apabila
frame pada timeline scene kedua habis untuk dimainkan, maka otomatis akan memainkan
frame pada timeline scene ketiga, dan begitu seterusnya. Untuk mengatasinya kita perlu
menggunakan actionscript, misalnya stop().
Untuk menggunakan scene, hal pertama yang kita lakukan adalah memunculkan
panel scene terlebih dahulu dengan menekan Shift+F2 atau melalui menu bar Window ->
Other Panels -> Scene. Setelah panel scene muncul, kita dapat menambahkan scene pada
Flash document, dengan menekan tombol + pada panel scene tersebut. Untuk mendupli-
kasi scene yang sudah ada, kita dapat menekan tombol duplicate scene yang berada di
sebelah kiri tanda +. Untuk membuka scene, klik sekali nama scene yang diinginkan pada
panel scene. Untuk mengubah nama scene, klik dua kali (double klik) nama scene pada
panel scene yang ingin diubah namanya. Kemudian, ubah namanya sesuai keinginan kita.
Untuk menghapus scene, seleksi terlebih dahulu scene yang kita ingin hapus dengan
meng-klik-nya pada panel scene. Kemudian tekan tombol delete scene yang terletak di
sebelah kanan tombol + pada panel scene.
Untuk penggunaannya, perhatikan contoh berikut:
1) Buatlah sebuah Flash document.
2) Buatlah 1 buah dynamic text bertuliskan Pindah Scene. Seleksi dynamic text tersebut,
dan tekan Ctrl+F3. Pada panel properties akan muncul nonaktifkan tombol selectable.
Dan aktifkan tombol show border arround text.
3) Pastikan kita masih menyeleksi dynamic text tadi, kemudian tekan F8. Pada panel yang
muncul masukkan pindah_btn sebagai name dan button sebagai type, lalu tekan OK.

19
4) Selesi botton pindah_btn, dan pada panel properties-nya masukkan pindah_btn se-
bagai instance name.
5) Klik frame 1 dan tekan F9. Pada panel actions yang muncul, masukkan script berikut:
1 //menghentikan jalannya frame
2 stop();
3 //ketika pindah_btn ditekan
4 pindah_btn.onPress = function() {
5 //mainkan frame 1 Scene 2
6 gotoAndPlay("Scene 2", 1);
7 };
6) Tekan Shift+F2 dan pada panel scene yang muncul tekan tombol + sekali, maka akan
muncul scene baru bernama Scene 2 dan sekaligus kita akan berpindah ke scene baru
tersebut.
7) Pada stage scene baru, buatlah sebuah static text bertuliskan Ini adalah scene 2.
8) Klik frame 1 dan tekan F9. Pada panel actions yang muncul, masukkan script berikut:
1 //menghentikan jalannya frame
2 stop();
9) Tekan Ctrl+Enter untuk melihat hasilnya.
Silahkan tekan tombol pindah scene, kita secara otomatis akan berpindah ke scene 2.

20
Sajian Sumber Belajar ini disusun untuk kepentingan belajar, yang dirujuk/disa-
lin/disarikan/diadaptasi dari:
Oprekzone. 2016. 12 Prinsip Dasar Animasi, (Online), (http://oprekzone.com/12-prinsip-
animasi/), diakses 13 Juli 2016.
Purnomo, Wahyu. 2013. Animasi 2D untuk SMK/MAK Kelas XII Semester 1. Jakarta: Ke-
mendikbud.
Williams, R. 2012. The Animator's Survival Kit: A Manual of Methods, Principles and
Formulas for Classical, Computer, Games, Stop Motion and Internet Animators.
New York: Farrar, Straus, and Giroux.
Maragiannis, A. Tanpa Tahun. Adobe Flash and Photoshop Tutorials. (Online). (http://
www.coursestuff.co.uk/DESI1182/docs/Flash%20tutorials.pdf), diakses 13 Juli
2016.
Adobe Flash. 2015. Adobe Flash Professional CC Help. (Online). (https://helpx.adobe.
com/pdf/flash_reference.pdf), diaksses 13 Juli 2016.

21