Menggambar objek sederhana dengan Aplikasi Animasi 2D

A. Materi
1. Apresepsi
Objek dalam animasi 2D adalah suatu tipe data berupa suara, gambar, atau teks.
Seluruh objek yang berada pada suatu animasi merupakan bagian dari suatu kelas. Objek
pada animasi 2D digunakan untuk mengontrol movie. Pada adobe flash, terdapat
predefined class, yang terdiri dari objek yang dapat digunakan di dalam movie, yaitu
movie clip, color, sound, button, stage, text field, and text formar.
Adobe Flash merupakan sebuah program yang didesain khusus oleh Adobe dan
program aplikasi standar authoring tool professional yang digunakan untuk membuat
animasi dan bitmap yang sangat menarik untuk keperluan pembangunan situs web yang
interaktif dan dinamis. Flash didesain dengan kemampuan untuk membuat animasi 2
dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun
dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya.
Objek pada animasi 2D terdiri dari vektor dan image (bitmap). Objek dengan
gambar vektor adalah gambar yang di buat dari unsur garis dan kurva. Kumpulan dari
beberapa garis dan kurva ini akan membentuk suatu objek atau gambar. Sementara objek
dengan gambar image/bitmap adalah objek grafis yang tersusun atas pixel di mana setiap
pixel dalam objek tersebut membuat informasi berupa warna yang akan ditampilkan.
Terdapat beberapa macam tools objek di dalam adobe flash yaitu oval tool,
rectangle tool, pen, brush, dan sebagainya yang digunakan untuk memudahkan dalam
menggambar objek pada aplikasi adobe flash.
Objek merupakan bagian penting dalam animasi 2 dimensi. Objek adalah suatu tipe data
seperti suara, gambar, teks, dan lain sebagainya. Gambar objek pada animasi 2 dimensi
terdiri gambar vektor dan gambar image/bitmap.
2. Materi inti
a. Jenis objek pada animasi 2 dimensi
1) Gambar vektor

Gambar 1. Vektor

Gambar vektor adalah gambar yang dibuat dari unsur garis dan kurva yang
selanjutnya akan membentuk suatu objek atau gambar. Gambar berbasis vektor
tidak tergantung pada resolusi, sehingga saat gambar tersebut diperbesar atau
 diperkecil, kualitas gambar akan tetap sama tanpa kehilangan detai gambarnya.
Gambar vektor merupakan gambar digital berbasis persamaan matematis. Gambar
vektor umumnya memiliki ukuran yang lebih kecil jika dibandingkan dengan
gambar image/bitmap.
2) Gambar bitmap

Gambar 2.Bitmap
Gambar bitmap adalah objek grafis yang terdiri dari kumpulan beberapa
pixel. Setiap pixel pada gambar tersebut memuat informasi berupa warna yang
akan ditampilkan. Pixel pada gambar bitmap atau yang dikenal juga dengan
gambar raster merupakan elemen gambar yang membentuk titik-titik kecil pada
tampilan layer. Jumlah pixel pada gambar bitmap yang akan menentukan resolusi
gambar. Gambar bitmap berbeda dengan gambar vector dimana kualitas gambar
bitmap dipengaruhi oleh resolusi.

b. Mengoprasikan aplikasi obyek sederhana

1) Mengenal aplikasi animasi 2D adobe flash
Aplikasi yang sering digunakan untuk membuat membuat animasi 2
dimensi adalah adobe flash.
Objek pada adobe flash
Terdapat beberapa objek yang dapat dibuat dengan menggunakan Adobe Flash.
Berikut adalah pengetahuan dasar mengenai objek pada adobe flash.
a) Stroke dan Fill

Gambar 3. Stroke and fill

 Kedua objek tool tersebut (oval tool & rectangle tool) terdiri dari 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.
b) Menggambar objek dengan pen tool

Gambar 4. Pen tool

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 inginkan.
c) Mengubah bentuk objek dengan selection tool

Gambar 5. Selection tool

Merubah Bentuk Objek dengan Selection Tool Merubah dalam flash 8

sangatlah mudah dan efisien. Untuk mengubah bentuk suatu objek dapat
menggunakan selection tool. Dengan selection tool tinggal mengubah suatu
objek dengan menggerakkan outline (garis objek) dari objek tersebut.

2. Aplikasi adobe flash cs6

Pada saat program adobe flash cs6 diaktifkan, maka jendela utama akan
muncul. Dimana jendela utama memiliki komponen-komponen yang akan
dipakai dalam pembuatan program.komponen – komponen yang terdapat pada
adobe flash cs6.
 Gambar 6. Program adobe flash cs6

a.Tab dokumen, merupakan tabulasi dari lembar kerja atau stage yang sedang
dikerjakan.
b. Workspace, merupakan komponen yang berfungsi untuk mengatur
tampilan area kerja adobe flash cs6.
c.Menu bar, merupakan kumpulan perintah dalam bentuk teks.
d. Stage, merupakan area untuk membuat atau memodifikasi seluruh objek
dalam program flash.
e.Timeline, berfungsi untuk mengatur bagian untuk mengatur dan mengontrol isi
dokumen dalam layer dan frame.
f. Scala view, berfungsi untuk mengatur skala lembar kerja.
g. Nama panel, berisi panel properties dan panel library yang digunakan
untuk mengatur objek, frame, stage, dan symbol.
h. Panel tool, merupakan bagian yang berisi tool-tool untuk membuat,
mengatur, dan mendesain objek.
Menggambar objek sederhana
Dalam membuat Objek sederhana pada aplikasi adobe flash professional cs6
dapat dilakukan menggunakan panel tools rectangle tool, oval tool, polystar tool,
dan sebagainya.
1. Menggambar objek sederhana
Objek yang dapat dibuat pada aplikasi adobe flash professional cs6 di
antaranya adalah garis, kotak, lingkaran, dan lain-lain.

a) Manggambar garis

Gambar 7. Line tool

Garis adalah bentuk geometri atau objek yang terdiri dari titik yang
bergerak. Garis hanya memiliki satu dimensi yaitu Panjang. Untuk membuat
objek garis pada adobe flash cs6 dapat menggunakan line tool. Berikut adalah
properties pada line tool beserta dangan fungsinya.
1) Stroke color, digunakan untuk memberi warna garis.
2) Stroke height, digunakan untuk mengatur ketebalan garis.
3) Style, digunakan untuk memilih jenis atau bentuk garis.
4) Cap, digunakan untuk menentukan ujung garis.
b) Menggambar kotak

Gambar 8. Rectangle tool

 Untuk menggambar objek kotak pada adobe flash dapat menggunakan
rectangle tool. Berikut adalah properties pada rectangle tool berserta dengan
funsinya.
1) Fill color, digunakan untuk memberikan warna pada objek.
2) Rectangle corner radius, digunakan untuk mengatur kelengkungan sudut
kotak.

c) Menggambar lingkaran

Gambar 9. Oval tool

Untuk menggambar objek lingkaran pada adobe flash dapat menggunakan

oval toll. Berikut adalah properties pada oval tool besertadengan fungsinya.
1) Start angle, digunakan untuk memotong oval dari batas awal objek.
2) End angle, digunakan untuk memotong oval dari batas akhir objek.
3) Inner radius, digunakan untuk membentuk potongan dari pusat objek.
d) Menggambar polystar

Gambar 10. Polystar tool

 Untuk menggambar objek lingkaran pada adobe flash dapat menggunakan
polystar tool. Berikut adalah properties pada polystar tool besertadengan
fungsinya.
1) Style, digunakan untuk memilih jenis polygon atau star.
2) Number of sides, digunakan untuk mengatur jumlah sisi yang akan
digunakan pada polystar tool.
3) Star point size, digunakan untuk mengatur ketajaman sudut pada objek
bintang.
2. Menggunakan fasilitas adobe flash untuk menggambar objek
Menggunakan fasilitas adobe flash untuk menggambar objek di antaranya
adalah melengkungkan garis objek, brush, spray brush deco, dan sebagainya.
a) Melengkungkan garis dapat dilakukan dengan selection tool atau tekan v
pada keybord.
b) Membuat objek dengan brush dapat dilakukan dengan menggunakan brush
tool atau tekan b pada keybord. Selain untuk membuat objek, brush juga
dapat digunakan untuk mewarna objek.
c) Spray brush digunakan untuk membuat percikan objek. Untuk menggunakan
spray brush dengan cara mengaktifkan spray brush tool atau tekan b pada
keybord. Spray brush tool juga dapat diubah dengan menggunakan symbol
yang diinginkan.
d) Deco merupakan fasilitas yang dapat memberikan dekorasi pada objek
ataupun animasi. Membuat dekorasi dengan deco dapat dapat dilakukan
menggunakan deco tool atau tekan u pada keybord.
 ANIMASI FRAME BY FRAME

Sebelum mempelajari lebih lanjut tentang animasi frame by frame, ada baiknya peserta mengetahui

tentang berbagai aplikasi software yang biasa digunakan dalam membuat animasi 2 dimensi. Aplikasi

tersebut terdiri dari aplikasi yang berbayar dan aplikasi yang tidak berbayar. Aplikasi berbayar contohnya

Adobe Flash Pro (sekarang namanya diganti menjadi Adobe Animate pada seri Creative Cloud),

Harmony, Anime Studio,dan lain-lain. Sedangkan untuk aplikasi yang tidak berbayar contohnya adalah

Synfig, Tupi, Pencil 2D, Flipnote Studio, dan masih banyak lagi. Baik aplikasi yang berbayar maupun

yang tidak berbayar mempunyai kelebihan dan kekurangan masing-masing.

1. Pengertian frame

Frame adalah satuan terkecil dalam video sedangkan pada program flash, frame diumpamakan seperti

kertas hvs yang telah digambar, dan contoh apabila framenya kita perpanjang sebanyak 5 frame,

maka diumpamakan seperti 5 kertas hvs dengan gambar yang sama. Apabila kita merubah gambar

salah satu frame, maka frame yang lain akan mengikuti perubahan gambar tersebut, karena frame

tidak dapat berdiri sendiri.

Animasi frame merupakan animasi yang paling sederhana, dimana animasinya didapatkan dari

rangkaian gambar yang bergantian ditunjukan, pergantian gambar ini diukur dalam satuan fps (frame

per second). Contoh animasi frame adalah ketika kita membuat rangkaian gambar yang berbeda pada
tepian sebuah buku, kemudian kita buka buku tersebut sedemikian rupa menggunakan jempol, maka

gambar akan terlihat bergerak.

Animasi frame by frame menuntut banyak gambar yang harus dibuat. Efek animasi diciptakan dengan

mengganti gambar yang satu dengan gambar yang lain selama beberapa waktu.Semua gambar yang

bergerak dihasilkan dari gambar yang berbeda-beda tiap framenya.

Keyframe adalah frame dimana Anda menentukan perubahan pada tombol atau animasi. Pada animasi

tween, Saudara membuat keyframe hanya pada titik yang penting di dalam Timeline. Keyframe

ditandai oleh titik di dalam frame. Keyframe yang tidak berisi gambar di dalam layer ditandai oleh

titik kosong.

BlankKeyframe artinya kita mempersiapkan frame kosong untuk diisi objek baru, dan apabila kita

menggambar objek, blank keyframe tersebut sudah berisi objek. Blank keyframe dilambangkan

dengan titik bulat putih pada frame.

2. Membuat animasi frame per frame

Langkah – langkah pembuatan animasi frame per frame :

1. Buka file baru pada software flash atau Ctrl+N. Pilih ActionScript 3.0, kemudian klik “OK”

Gambar 1 Rectangle Tool

2. Kemudian kita pilih Rectangle Tool [R] pada toolbox dan kita mulai

membuat objek balok pada stage dengan mengklik dan drag, jangan lupa warna fiil objek

balok harus berbeda dari warna background stage.

 1 2

Warna=fill
Rectangle Tool (warna isi obejek)

Gambar 2Rectangle Tool

keyframe

Gambar 3Posisi keyframe

3. Kemudian klik kanan di frame ke-1, pilih Insert Keyframe atau tekan F6, maka akan muncul

frame ke-2.Pada frame ke-2 kita pilih Free Transform Tool [Q], kemudian kita putar balok

sedikit ke kanan dan letaknya dirubah sedikit kebawah dengan meneka tombol Shift + Panah

bawah satu kali.

Insert keyframe
2 3
Free Transform tool

Posisi balok diputar sedikit ke kanan

Gambar 4Free Transform Tool

4. Kemudian masukan kembali KeyFrame hingga menjadi tiga frame, kemudian putar kembali

balok sedikit ke kanan dan sedikit kebawah.

Insert keyframe

Gambar 5Free transform tool

5. Ulangi langkah di atas sampai frame 8 hingga balok tampak jatuh.

Frame 1 Frame 2 Frame 3 Frame 4

 Frame 5 Frame 6 Frame 7 Frame 8

Gambar 6Alur Gerak Kotak pada Frame 1 s.d. 8

6. Kemudian tekan Enter untuk melihat hasilnya.