bab ii landasan teori1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek...

40
5 BAB II LANDASAN TEORI 2.1. Konsep Dasar Animasi 2.1.1. Animasi Menurut Zeembry (2008 : 1) mengemukakan bahwa “Animasi adalah rangkaian gambar yang disusun secara berurutan”. Sedangkan menurut Hidayatullah (2011 : 63) mengemukakan bahwa “Animasi adalah rangkaian gambar yang disusun secara berurutan. Ketika rangkaian gambargambar tersebut ditampilkan dengan kecepatan yang memadai, rangkaian gambar tersebut akan terlihat bergerak”. Kalau kita menarik sebuah kesimpulan untuk pengertian animasi secara garis besar adalah suatu tampilan menarik, grafis statis maupun dinamis, yang disebabkan oleh perubahan tiap frame (frame by frame), perubahan posisi bergerak (motion) maupun perubahan bentuk diikuti gerakan (motion shape). 2.1.2. Multimedia Pembelajaran Interaktif Perkembangan teknologi informasi dan komunikasi terbukti mampu memberikan terobosan positif dan inovatif dalam banyak bidang. Pendidikan merupakan salah satu bidang yang telah memanfaatkan dan mengaplikasikan teknologi tersebut. Perkembangan e-learning yang pesat dikarenakan dukungannya terhadap pembelajaran yang bisa diakses setiap saat dan di segala tempat. Dalam e-learning,

Upload: others

Post on 23-Nov-2020

27 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

5

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Animasi

2.1.1. Animasi

Menurut Zeembry (2008 : 1) mengemukakan bahwa “Animasi adalah

rangkaian gambar yang disusun secara berurutan”. Sedangkan menurut

Hidayatullah (2011 : 63) mengemukakan bahwa “Animasi adalah rangkaian

gambar yang disusun secara berurutan. Ketika rangkaian gambar–gambar tersebut

ditampilkan dengan kecepatan yang memadai, rangkaian gambar tersebut akan

terlihat bergerak”.

Kalau kita menarik sebuah kesimpulan untuk pengertian animasi secara garis

besar adalah suatu tampilan menarik, grafis statis maupun dinamis, yang

disebabkan oleh perubahan tiap frame (frame by frame), perubahan posisi bergerak

(motion) maupun perubahan bentuk diikuti gerakan (motion shape).

2.1.2. Multimedia Pembelajaran Interaktif

Perkembangan teknologi informasi dan komunikasi terbukti mampu

memberikan terobosan positif dan inovatif dalam banyak bidang. Pendidikan

merupakan salah satu bidang yang telah memanfaatkan dan mengaplikasikan

teknologi tersebut.

Perkembangan e-learning yang pesat dikarenakan dukungannya terhadap

pembelajaran yang bisa diakses setiap saat dan di segala tempat. Dalam e-learning,

Page 2: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

6

pengelolaan informasi secara dinamis, yaitu mampu menyimpan atau

memunculkan informasi, seperti menyimpan nilai evaluasi, memunculkan saran

atau solusi, atau informasi lainnya, merupakan hal mendasar. Oleh karena itu, e-

learning perlu dikembangkan agar mampu mendukung kemampuan tersebut.

Terkait dengan perkembangan e-learning, pembelajaran berbasis multimedia yang

merupakan bagian dari e-learning pun memerlukan penggunaan basis data dalam

mengolah kontennya.

Dalam suatu piranti lunak, basis data digunakan untuk mengelola informasi.

Basis data sebagai kumpulan data yang saling berelasi, dan berada di bawah kendali

piranti lunak sistem manajemen basis data (McLeod, 2006:8).

Lebih lanjutnya, manajemen pengelolaan basis data yang dilakukan antara lain

: mengakses (mengambil dan membaca) data, menambah data, mengubah data,

menghapus data (Pakereng, 2004:9).

Beberapa contoh penerapan basis data dalam suatu model pembelajaran

berbasis multimedia adalah penyimpanan dan pemanggilan nilai latihan atau

evaluasi, pengontrolan akses halaman jika konten pembelajaran sifatnya

berjenjang, penyimpanan dan pemanggilan catatan yang dibuat siswa. Basis data

dibedakan ke dalam dua kategori, yaitu basis data server dan diatur oleh suatu

layanan dalam server, yang untuk aksesnya mengharuskan user melakukan koneksi

ke layanan yang mengatur basis data server.

Sedangkan basis data lokal adalah basis data yang tersimpan dalam perangkat

elektronik, seperti komputer, telepon genggam, bahkan termasuk server yang

dibuat dalam format basis data lokal (Alam,2007:11).

Page 3: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

7

2.2.Teori Pendukung

2.2.1. Adobe Flash CS6

Menurut Madcoms (2013 : 1) Adobe Flash CS6 merupakan salah satu produk

terbaru dari Adobe Creative Suite 6 yang banyak diminati oleh kebanyakan orang

karena kehandalannya yang mampu digunakan untuk mengerjakan segala hal yang

berkaitan dengan animasi. Kinerja Flash dapat juga dikombinasikan dengan

program – program lain. Animasi dapat digunakan untuk berbagai keperluan seperti

pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner

iklan, animasi pelengkap halaman website, animasi untuk game, animasi untuk

presentasi, dan lain sebagainya.

Sampai sekarang Adobe Flash telah sampai ke versi CS6. Adobe Flash CS6

merupakan software (perangkat lunak) yang dirilis oleh perusahaan software

ternama dari Amerika Serikat, Adobe System Incorporated.

Banyak fasilitas dan fitur baru dalam program Adobe Flash CS6 yang akan

membantu para animator (pembuat animasi) untuk membuat animasi semakin

mudah dan canggih. Dengan fitur – fitur terbarunya menjadikan Adobe Flash CS6

sebagai program animasi dan presentasi yang semakin digemari oleh para animator.

Fasilitas 3D effect atau transformations yang telah mampu mengolah teks maupun

objek dengan efek animasi 3 dimensi sehingga membuat animasinya menjadi lebih

menarik.

Fitur terbaru dari Adobe Flash CS6 telah menghadirkan perubahan yang

menarik bagi penggunanya mulai dari perintah animasinya hingga tambahan

beberapa efek pada tool (peralatan) pengolah gambar dan animasi. Berikut ini

beberapa perubahan baru yang terdapat dalam Adobe Flash CS6.

Page 4: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

8

1. Text Layout Framework

Text Layout Framework atau yang disingkat TLF Text merupakan fasilitas baru

pada Adobe Flash CS6 yang digunakan untuk membuat teks dengan pengaturan

properti teks baru. Saat mengaktifkan text tool maka akan ada pilihan TLF Text

dan Classic Text. Classic Text adalah text framework konvensional yang selama

ini dikenal (dynamic, static, dan input text). Sedangkan TLF adalah text

framework yang baru dimana fitur – fiturnya sama dengan TLF extention pada

Adobe Flash CS6, seperti pengaturan multicolomn, international text (vertical

dan right-to-left), ligature dan link container yang berfungsi untuk

menghubungkan lebih dari text field.

Gambar II.1. Pilihan TLF Text dan Classic Text

Salah satu fitur penting yang masih berkaitan dengan teks adalah font

embedding. Untuk menampilkan ini, klik set font embedding option yang berada

di pengaturan character di panel properties.

Page 5: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

9

Gambar II.2. Kotak Dialog Font Embedding

2. Code Editing

Adobe Flash CS6 memiliki banyak fitur yang ditambahkan untuk membantu

dalam penulisan action script, seperti code hinting dan code completion. Selain

itu juga dapat menggunakan panel Code Snippets untuk menampilkannya pilih

menu Window > Code Snippets. Panel Code Snippets memungkinkan non-

programmer untuk menerapkan perintah Code Action script 3.0 tanpa perlu

menguasai Action script.

Gambar II.3. Panel Code Snippets

3. SWF Tool

Dengan SWF Tool ini dapat mengetahui ukuran file swf dari hasil compile file

fla. SWF Tool ini terdapat pada panel properties bagian bawah.

4. Deco Tool

Terdapat penambahan preset pada pengaturan tool ini. Untuk melihatnya Deco

tool ini terdapat pada panel properties.

Page 6: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

10

Gambar II.4. Pengaturan Deco Tool pada panel properties

5. Menambahkan Video

Pada program Adobe Flash CS6 sekarang lebih mudah untuk menambahkan

video dalam lembar kerja.

6. Template Baru

Adobe Flash CS6 menampilkan beberapa template baru yang membuatnya

lebih mudah untuk mendesain sebuah animasi. Template muncul di layar

Welcome dan kotak dialog New Document.

A. Menjalankan Adobe Flash CS6

Hal pertama yang harus dilakukan untuk membuka Adobe Flash CS6 adalah

dengan cara klik Start > All Program > Adobe Flash CS6 Profesional. Kemudian

akan tampil halaman awal atau halaman pembuka dari Adobe Flash CS6 untuk

mengantarkan kita pada fasilitas – fasilitas yang disediakan.

Page 7: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

11

Gambar II.5. Tampilan awal Adobe Flash CS6

B. Pengenalan Tampilan Program Adobe Flash CS6

Tampilan program Adobe Flash CS6 memiliki kesamaan dengan versi

sebelumnya. Gunakan fasilitas Workspace untuk melakukan pengaturan posisi

panel – panel. Selain itu kita juga diberi kebebasan untuk mengubah sendiri

tampilan program dengan cara menggeserkan beberapa bagian ke lokasi lain.

Gambar II.6. Pilihan Workspace

Pengaturan posisi panel ini bertujuan untuk mempermudah dalam pembuatan

proyek. Tampilan berikut ini merupakan tampilan standar program Adobe Flash

CS6.

Page 8: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

12

Gambar II.7. Tampilan area kerja Adobe Flash CS6

C. Area Kerja Adobe Flash CS6

Area kerja Flash pada dasarnya terdiri atas beberapa komponen yaitu Menu Bar,

Tool bar, Timeline, Stage dan Panel.

1. Menu Bar

Menu bar adalah barisan menu berisikan kumpulan menu – menu yang

digunakan sebagai pengaturan utama program. Untuk mengakses Menu Bar ini,

user dapat mengklik langsung pada item pada item Menu Bar yang

bersangkutan. Misalnya untuk mengaktifkan menu File, user dapat mengklik

pada bagian kata File.

Gambar II.8. Tampilan Menu Bar

Selain itu dapat pula mengaktifkan menu ini dengan cara menekan tombol Alt

pada keyboard ditambah dengan huruf yang digaris bawahi pada menu ini.

Page 9: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

13

Misalnya untuk mengaktifkan menu File, user dapat menekan tombol Alt

ditambah huruf F.

2. Stage

Stage adalah lembar kerja yang digunakan untuk membuat atau mendesain

objek yang akan di animasikan. Objek yang dibuat dalam lembar kerja dapat

berupa objek vector, teks, movie clip, button, menambahkan suara dan

menempatkan tombol navigasi serta beberapa komponen yang diperlukan untuk

pembuatan proyek. Yang diwakili oleh kotak putih diibaratkan panggung

sandiwara dimana semua aktor tampil dan bermain. Daerah yang berwarna abu

– abu adalah daerah yang tidak akan terlihat oleh penonton.

Gambar II.9. Tampilan Stage

3. Tools

Tools merupakan sebuah panel yang menampung tombol – tombol yang

berguna untuk membuat suatu desain animasi mulai dari tombol seleksi,

cropping, drawing, path, shape, color, dan lain – lain yang digunakan untuk

membuat gambar atau teks, mengatur ukuran objek dan memodifikasi objek.

Gambar II.10. Tampilan Tools

Page 10: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

14

Tabel II.1. Tools Adobe Flash CS6

Icon Nama Kegunaan

Selection Tool Melakukan seleksi terhadap objek

Sub Selection Tool Melakukan pengubahan terhadap objek

melalui titik anchor objek

Free Transform Tool Melakukan berbagai perubahan terhadap

objek seperti memiringkan, memutar,

mengubah letak posisi dan mengatur

ukuran objek

Gradient Transform

Tool

Mengubah transformasi warna gradient

pada objek

3D Rotation Tool Mentransformasikan rotasi pada sumbu x,

y, dan z. Tool ini hanya bekerja pada objek

movie, button, grafik dan objek text

Lasso Tool Melakukan seleksi terhadap sebuah objek

atau area tertentu

Pen Tool Menggambar dan merubah bentuk suatu

objek dengan menggunakan edit points

(lebih teliti dan akurat)

Add Anchor Point

Tool

Menambahkan titik anchor pada sebuah

path

Page 11: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

15

Delete Anchor Point

Tool

Menghapus titik anchor pada sebuah path

Convert Anchor

Point Tool

Mengubah sudut lancip dari sebuah path

menjadi sudut lengkung

Teks Tool Menuliskan kata atau kalimat

Line Tool Membuat garis di dalam stage

Rectangle Tool Menggambar sebuah persegi

Oval Tool Menggambar sebuah lingkaran

Polystar Tool Menggambar sebuah objek polygon

Pencil Tool Menggambar objek sesuai dengan yang

disukai. Tetapi tiap bentuk yang dibentuk

akan diformat oleh Flash menjadi bentuk

sempurna

Brush Tool Memberi warna kepada objek dengan cara

kerja seperti kuas

Spray Brush Tool Menggambar dengan teknik spray, yaitu

menyemprotkan warna atau simbol

Deco Tool Mengubah beberapa simbol kedalam

instant design tool dengan bantuan brush

atau fill tool

Bone Tool Membuat chain-like effect pada sebuah

objek urutan seri atau distort objek tunggal

Page 12: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

16

dengan cepat. Bone tool dapat juga disebut

animasi sendi atau animasi engsel karena

fitur bone tool merupakan fitur yang

digunakan untuk membuat animasi tween

dengan gerakan atau putaran seperti

putaran engsel atau sendi pada lengan

manusia

Bind Tool Melakukan pengeditan dan modifikasi titik

sendi dari piranti Bone Tool

Ink Bottle Tool Mengisi warna pada objek yang bordernya

telah hilang (tidak ada)

Paint Bucket Tool Mengisi warna pada objek yang dipilih

Eyedropper Tool Mengambil warna dari objek lain

Eraser Tool Menghapus objek yang dibentuk

Hand Tool Menggerakkan suatu tampilan objek pada

stage tanpa merubah posisi objek tersebut

pada stage

Zoom Tool Memperbesar tampilan objek pada stage

Stroke Color Tool Memberikan warna outline atau garis tepi

pada suatu objek

Fill Color Tool Memberikan warna pada bagian dalam

objek

Page 13: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

17

Black and White Mengubah warna garis dan bidang menjadi

hitam putih

Swap Color Membalik warna antara warna garis dan

warna bidang objek

Snap to Objects Mengaktifkan atau mematikan fungsi snap

ke suatu objek

4. Time Line

Time line merupakan panel yang terdiri dari layer, Keyframe dan frame yang

digunakan untuk mengatur susunan layer tempat dimana kita dapat mengatur

dan mengontrol durasi, waktu dan bentuk animasi. Time line terdiri atas baris

dan kolom. Kolom berhubungan dengan waktu, sedangkan baris berhubungan

dengan objek.

Gambar II.11. Tampilan Time line

5. Properties

Panel properties adalah suatu panel yang berisi berbagai macam informasi dan

atribut pada suatu objek yang sedang terseleksi yang digunakan untuk mengatur

properti dari objek yang dibuat. Seperti mengatur ukuran suara dan letak objek.

Panel properties akan berubah – ubah sesuai dengan objek yang kita seleksi

seperti pada gambar.

Page 14: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

18

Gambar II.12. Tampilan Properties

6. Color Window

Merupakan window yang digunakan untuk mangatur warna pada objek yang

anda buat. Color window dibagi menjadi 2, yaitu :

a. Color Mixer

Digunakan untuk memodifikasi warna pada objek terpilih. Selain itu warna

yang diolah akan digunakan sebagai stroke color dan fill color. Panel color

menyediakan dua pilihan warna yaitu warna solid dan warna gradasi.

b. Color Swatches

Digunakan untuk menentukan warna bidang objek. Warna yang dipilih

melalui panel ini akan berpengaruh pada warna yang berada pada tombol

fill color atau warna yang berada dalam panel color.

Page 15: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

19

Gambar II.13. Color Mixer Gambar II.14. Color

Swatches

7. Panel Action

Merupakan suatu perintah dalam animasi Flash yang digunakan menuliskan

Action script agar membuat sebuah animasi yang atraktif, lebih hidup dan

menarik.

Gambar II.15. Tampilan Panel Action

Page 16: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

20

8. Library dalam Flash

Panel Library adalah panel yang berisi kumpulan simbol, file suara dan file

gambar yang terdapat dalam suatu proyek. Panel Library menampung simbol

yang pernah dibuat di dalam stage, seperti : simbol graphic, button, dan movie

clip. Selain itu digunakan untuk menampilkan objek – objek yang kita import

dari luar lingkungan Flash. Untuk menggunakannya kita dapat menekan tombol

F11 pada keyboard atau dari menu Window pilih Library.

Gambar II.16. Tampilan Library

9. Layer

Layer berfungsi sebagai dinding pemisah stage antara objek yang satu dengan

objek yang lain sehingga pada saat mengerjakan proyek dengan menggunakan

banyak objek, maka user tidak akan mengalami kesulitan karena gambar yang

bertumpuk. Prinsip kerja layer adalah seperti kertas tembus pandang yang

disusun dan dijadikan satu.

Page 17: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

21

Gambar II.17. Tampilan Layer

10. Keyframe

Keyframe adalah bagian dari frame yang merupakan kunci dari sebuah frame

itu sendiri. Keyframe ditandai dengan frame yang mempunyai lambang

lingkaran atau titik di tengah frame.

11. Frame

Frame adalah sebuah tempat untuk meletakkan gambar pada masing – masing

frame yang dibuat berurutan dan bila dijalankan maka akan menampilkan suatu

gerakan animasi dari gambar yang tersusun tersebut.

12. Blank Keyframe

Blank Keyframe adalah Keyframe yang ditandai dengan warna putih, blank

Keyframe dapat dibuat dengan mengklik kanan pada frame lalu pilih insert

blank Keyframe pada menu.

13. Motion Tween

Motion Tween merupakan cara otomatis untuk membuat animasi yang

dijalankan dari titik awal ke titik akhir. Dengan motion tween pengguna dapat

membuat animasi bergerak dari posisi satu ke posisi yang lain atau perubahan

ukuran pada gambar.

14. Motion Shape

Page 18: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

22

Motion Shape pada umumnya hampir sama dengan motion tween, namun

perbedaannya adalah motion shape digunakan pada saat memerlukan animasi

bentuk gambar yang berubah. Seperti contoh pada animasi bentuk ombak.

Motion shape ditandai dengan frame yang berwarna hijau dan terdapat gambar

panah kearah kanan.

Sebenarnya masih banyak komponen – komponen dalam Adobe Flash CS6, namun

komponen yang tadi dijelaskan adalah komponen utama yang sering digunakan

dalam pembuaatan animasi.

D. Mengenal Simbol pada Adobe Flash CS6

Didalam Flash terdapat 3 jenis simbol, yaitu :

1. Movie Clip

Jenis simbol yang bisa dibuat animasi. Untuk membuat simbol movie clip ini

yaitu dengan cara klik menu Insert → New Symbol atau dengan menekan

CTRL+F8 pada keyboard lalu pilih movie clip. Selain itu untuk membuat movie

clip dengan cara convert shape, line atau sebagainya ke dalam simbol.

2. Button

Jenis simbol yang digunakan sebagai tombol. Dalam presentasi tentunya jenis

simbol ini wajib ada karena digunakan sebagai navigasi untuk pindah antar

slide. Untuk membuat jenis simbol ini caranya sama seperti membuat movie

clip, yang beda hanya kita memilih button pada kotak dialog.

Page 19: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

23

Gambar 11.18. Tampilan Library

3. Grafik

Jenis simbol sebagai sebuah gambar yang tidak bisa diberi action script. Untuk

membuat jenis simbol ini sama halnya dengan membuat simbol movie clip dan

button dengan cara pilih menu Insert → New Symbol pilih tipe grafik pada

behavior. Atau bisa dengan convert gambar, seleksi gambar kemudian pilih

modify → convert to symbol.

E. Metode Pembuatan Animasi Pada Adobe Flash CS6

Dalam membuat animasi di Flash terdapat dua metode yang digunakan, yaitu

Frame by Frame Animation dan Tweened Animation.

1. Frame by Frame Animation

Frame by frame Animation merupakan suatu metode pembuatan animasi dalam

flash yang menggunakan beberapa frame pada timeline. Biasanya animasi yang

dibuat dengan metode ini prinsipnya sama dengan membuat sebuah film pada

windows movie maker, tetapi bedanya pada flash kita harus menyesuaikan

kuncinya (Keyframe) terlebih dahulu dan meletakkan film tersebut pada kunci

yang telah dibuat dan disesuaikan.

2. Tweened Animation

Page 20: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

24

Tweened Animation merupakan suatu animasi yang memanfaatkan fasilitas

motion dari flash. Untuk membuat suatu animasi motion sangatlah mudah

karena anda tinggal menentukan panjang lama animasi tersebut dijalankan lalu

menggerakkan dari satu sisi ke sisi lainnya. Biasanya objek yang telah di tween

pada timeline akan terlihat tanda panah.

F. Konsep Dasar Action script Adobe Flash CS6

1. Sejarah Action script Flash

Bahasa action script flash sampai sekarang sudah sampai ke versi Action script

3.0 yang dimiliki oleh Adobe Flash CS3, CS4, CS5 dan CS6. Berikut adalah sejarah

singkat mengenai peningkatan versi dari Action script.

Action script 1.0 dirilis pertama kali pada Macromedia Flash 5 yang merupakan

pengembangan dari Action di Macromedia Flash 4 dan masih digunakan hingga

Flash MX atau Flash 6.

Kemudian muncul Action script 2.0 yang dirilis pada Macromedia Flash MX

2004 atau Flash 7, sampai Macromedia Flash 8. Sebagai generasi penerus Action

script 1.0 dengan kelebihannya yang mempunyai kemampuan compile time

checking.

Action script 3.0 mulai digunakan pada Adobe Flash CS3 dan sampai sekarang

Adobe Flash CS6. Action script 3.0 adalah puncak dari tahun pembangunan, karena

setiap versi flash keluar, para pengembang mendorong untuk membatasinya.

Namun dalam membuat animasi disini penulis menggunakan Action script 2.0

karena kemudahannya dalam memprogramnya.

2. Sintaks Dasar dalam Action script Adobe Flash CS6

Page 21: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

25

Seperti dalam bahasa, tulisan memiliki tanda baca untuk mengakhiri kalimat

atau mengelompokkan berbagai kalimat menjadi satu paragraf.

Curly branches atau kurung kurawal ( { } ) digunakan untuk melakukan

pengelompokkan, sedangkan semicolon atau titik koma ( ; ) digunakan untuk

mengakhiri suatu statement. Perhatikan contoh berikut ini :

On (release){

StopAllSounds();

Play();

}

Dalam script diatas, kedua metode stop all sounds dan play akan dieksekusi saat

tombol mouse dilepaskan karena berada dalam satu kelompok. Semicolon berfungsi

seperti tanda akhir kalimat yang setelah kalimat pertama berakhir kemudian beralih

ke kalimat berikutnya. Di dalam Action script, setiap statement di eksekusi dari atas

ke bawah secara berurutan. Dalam contoh, setelah metode stop all sounds selesai

baru kemudian play.

Comment adalah keterangan yang ditambahkan dalam script untuk

menjelaskan apa arti kode tersebut. Comment dapat membantu memahami script

apabila user hendak me-review kembali ke kode tersebut untuk perbaikan.

Comment ditandai dengan doubleslash (//)

On (release)

//matikan semua suara

StopAllSounds();

//mainkan

Play(); }

Page 22: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

26

A. Adobe Illustrator CS6Gambar Bitmap dan Vector

Dalam dunia grafis ada dua macam gambar yang dapat diproses secara digital,

yaitu:

1. Gambar Bitmap

Gambar bitmap adalah gambar yang dibentuk dari sekumpulan titik yang

disebut pixel (picture element). Titik – titik akan terlihat sebagai sebuah gambar

secara utuh (satu kesatuan) apabila kita melihatnya dari jauh. Jika melakukan

pembesaran tertentu pada gambar, maka kita akan melihat sederetan kotak yang

berhimpitan dengan arah vertical horizontal. Banyaknya titik sangat

menentukan tingkat kejelasan dan kualitas gambar yang ada (disebut resolusi).

Semakin tinggi tingkat resolusi, semakin tinggi pula tingkat detail dan

keakuratan warna yang dihasilkan. Tolak ukur resolusi disebut dengan dpi (dots

per inch) atau ppi (pixel per inch).

2. Gambar Vector

Gambar vector adalah gambar yang tidak tergantung pada resolusi. Jadi, saat

user melakukan pembesaran atau pengecilan, gambar tetap mempunyai kualitas

yang sama. Gambar vector merupakan hasil garis, kurva dan bidang. Setiap

unsur mempunyai fill dan stroke yang dapat kita edit sesuai kreasi. Yang

tergolong dalam gambar vector adalah AI, CDR, CMX, COM. Adapun program

komputer grafis umum yang menghasilkan gambar vector adalah Adobe

Illustrator, Corel Draw, dan Macromedia Freehand.

B. Pilihan Warna CMYK dan RGB

Page 23: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

27

RGB merupakan komposisi dari tiga warna spektrum, yaitu red, green dan blue.

Komposisi dari ketiga warna tersebut digunakan oleh komputer dan tampilan pada

monitor untuk menciptakan warna tersendiri. Nilai 100% masing – masing menjadi

tampilan putih (white screen), sedangkan 0% menjadi tampilan warna gelap (dark

screen). Palet RGB menggunakan 255 tingkat warna gradasi.

CMYK merupakan komposisi dari empat warna spektrum, yaitu cyan, magenta,

yellow dan black. Keempatnya merupakan dasar warna yang digunakan pada

pengoperasian printer. Komposisi warna CMYK hanya sebatas 100 tingkat gradasi.

Dengan demikian, apabila kita mengerjakan dokumen dengan menggunakan warna

RGB, maka ada detail – detail warna yang tidak terbaca oleh printer. Warna CMYK,

digunakan pada penerbitan untuk mencetak buku. Untuk detail warna yang tidak

dapat tercetak oleh printer (out of gamut), Adobe Illustrator (pallet color) akan

memunculkan tanda segitiga sebagai tanda peringatan. Apabila kita mengklik

tanda, maka secara otomatis akan terpilih warna lain yang mendekati untuk proses

cetak.

Gambar II.19. Warna RGB Gambar II.20. Warna CMYK

C. Lembar Kerja Adobe Illustrator

Page 24: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

28

Gambar II.21. Tampilan halaman kerja Adobe Illustrator

Tampilan halaman kerja Adobe Illustrator secara umum mempunyai beberapa

bagian penting berikut :

1. Menu Bar

Terdiri atas menu utama yang meliputi File, Edit, Object, Type, Select, Filter,

Effect, View, Window, dan Help. Pada setiap menu, kita dapat memilih untuk

memunculkan sub mana yang ada di dalamnya dengan mengklik kursor pada

salah satu menu utama.

Gambar II.22. Sub menu dari menu utama View

2. Toolbox

Page 25: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

29

Merupakan perangkat – perangkat yang digunakan untuk menggambar,

menyeleksi dan memanipulasi objek serta membuat teks, agar tampak lebih

unik dan menarik.

Gambar II.23. Tampilan Toolbox

Penjelasan masing – masing tools :

a. Selection tool

Merupakan perangkat yang sangat berguna dalam menyeleksi objek terpilih.

Dengan perangkat ini, kita dapat mengubah setiap bagian objek secara

terpisah pada fill dan stroke yang dikehendaki.

Kelompok selection tool meliputi :

1. Selection Tool (V), menyeleksi objek atau gambar keseluruhan

Page 26: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

30

2. Direct Selection Tool (A), menyeleksi point atau path objek

a. Group Selection Tool, menyeleksi objek yang telah di group

Gambar II.24. Anggota Direct Selection Tool

b. Magic Wand Tool (Y), menyeleksi objek berdasarkan kesamaan

warna dan bentuk

c. Lasso Tool (Q), menyeleksi bagian – bagian path objek

b. Drawing Tool

Adalah perangkat yang dapat kita gunakan untuk keperluan pembuatan dan

pengolahan objek yang terdiri atas beberapa path. Sebuah path tersusun atas

line segment dan anchor point yang dapat kita edit dengan perangkat gambar

yang telah tersedia. Anggota lain dalam kelompok drawing tool adalah :

1. Pen Tool (P)

a. Pen Tool (P), membentuk garis lurus dan garis lengkung untuk

membuat objek

b. Add Anchor Point Tool (+), menambah anchor point di path

c. Delete Anchor Point Tool (-), untuk menghapus anchor point di path

d. Convert Anchor Point Tool (Shift + C), mengubah smooth points

menjadi corner points atau kebalikannya.

Gambar II.25. Anggota Pen Tool

Page 27: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

31

2. Type Tool (T)

a. Type Tool (T), membuat teks secara horizontal

b. Area Type Tool, membuat teks dalam path yang terbuka maupun

path yang tertutup secara horizontal

c. Type On a Path Tool, membuat teks mengikuti garis path secara

horizontal

d. Vertical Type Tool, membuat teks secara vertical (dari atas ke

bawah)

e. Vertical Area Type Tool, mengganti teks dalam path yang tertutup

ke teks vertical

f. Vertical Type On a Path Tool, mengganti teks mengikuti garis path

secara vertical (dari atas ke bawah)

Gambar II.26. Anggota Type Tool

3. Line Segment Tool

a. Line Segment Tool ( \ ), menggambar garis lurus

b. Arc Tool, menggambar garis lengkung atau cembung

c. Spiral Tool, menggambar garis berbentuk spiral

d. Rectangural Grid Tool, menggambar grid persegi

e. Polar Grid Tool, menggambar grid lingkaran

Page 28: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

32

Gambar II.27. Anggota Line Segment Tool

4. Rectangle Tool (M)

a. Rectangel Tool (M), menggambar bentuk segi empat

b. Rounded Rectangle Tool, menggambar segi empat dengan sudut

lengkung

c. Ellipse Tool (L), menggambar lingkaran dan garis oval

d. Polygon Tool, menggambar segi dengan sisi yang banyak

e. Star Tool, menggambar bintang

f. Flare Tool, membuat efek seperti pancaran sinar lensa

Gambar II.28. Anggota Rectangle Tool

5. Pencil Tool

a. Pencil Tool (N), untuk menggambar dan mengubah garis secara

manual

b. Smooth Tool, untuk memperhalus objek

c. Path Eraser Tool, untuk menghapu objek

Page 29: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

33

Gambar II.29. Anggota Pencil Tool

6. Paint Brush Tool (B), untuk membuat kreasi garis secara manual

7. Blob Brush Tool (Shift + B), untuk menggambar bebas seperti melukis

8. Eraser Tool

a. Eraser Tool, menghapus semua area objek

b. Scissors Tool, memotong path di point yang diinginkan

c. Knife Tool, memotong objek dari path

Gambar II.30. Anggota Eraser Tool

Beberapa perangkat lain yang digunakan untuk mengedit dan

mentransformasi objek yaitu :

1. Rotate Tool (R)

a. Rotate Tool (R), merotasikan objek pada pusatnya

b. Reflect Tool (O), mencerminkan objek

Gambar II.31. Anggota Rotate Tool

2. Scale Tool (S)

a. Scale Tool (S), menskalakan objek (mengecilkan atau

memperbesar)

Page 30: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

34

b. Shear Tool, memiringkan objek pada satu titik tetap

c. Reshape Tool, untuk memilih anchor point dan memastikan

keseluruhan alur tiap path

Gambar II.32. Anggota Scale Tool

3. Warp Tool (Shift+R)

a. Warp Tool (Shift+R), menekuk objek dengan menggerakkan

cursor pada objek

b. Twirl Tool, menciptakan putaran distorsi pada suatu objek

c. Pucker Tool, menurunkan bentuk objek dengan

menggerakkan control point pada cursor

d. Bloat Tool, memompa objek dengan control point pada

corner degerakkan menjauhi objek

e. Scallop Tool, menambahkan detail bengkokan kurva garis

luar suatu objek

f. Crystalize Tool, menambahkan detail acak garis tepi suatu

objek

g. Wrinkle Tool, memberikan detail mengerut pada garis tepi

suatu objek

Page 31: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

35

Gambar II.33. Anggota Warp Tool

4. Free Transform Tool (E), untuk langsung mengubah dimensi,

memutar atau memiringkan (skew) objek setelah diseleksi

5. Symbol Sprayer Tool (Shift+S)

a. Symbol Sprayer Tool (Shift+S), menempatkan Instance

Symbol seperti di semprotkan

b. Symbol Shifter Tool, membentuk Instance Symbol

c. Symbol Scruncher Tool, memindahkan Instance Symbol

yang berdekatan atau yang berjauhan secara bersama – sama

d. Symbol Sizer Tool, merubah ukuran Instance Symbol

e. Symbol Spinner Tool, merotasikan Instance Symbol

f. Symbol Stainer Tool, mewarnai Instance Symbol

g. Symbol Screener Tool, mentransparankan Instance Symbol

h. Symbol Styler Tool, merubah style Instance Symbol sebagai

contoh symbol tersebut diberi efek bayangan

Page 32: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

36

Gambar II.34. Anggota Symbol Sprayer Tool

6. Coloumn Graph Tool (J)

a. Coloumn Graph Tool (J), membuat grafik dengan

menggunakan kolom vertical

b. Stacked Coloumn Graph Tool, membuat grafik kolom

vertical tetapi kolom satu dengan yang lainnya saling

bertumpuk

c. Bar Graph Tool, membuat grafik dengan menggunakan

kolom horizontal

d. Stacked Bar Graph Tool, membuat grafik kolom horizontal

tetapi kolom satu dengan yang lainnya saling bertumpuk

e. Line Graph Tool, membuat grafik garis dengan

menggunakan point

f. Area Graph Tool, membuat grafik warna dengan

menggunakan point

g. Scatter Graph Tool, membuat grafik dengan menggunakan

koordinat antara x dan y

h. Pie Graph Tool, membuat grafik lingkaran

Page 33: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

37

i. Radar Graph Tool, membuat grafik berbentuk jaringan

Gambar II.35. Anggota Symbol Column Graph Tool

Beberapa perangkat lain yang berhubungan dengan pewarnaan :

1. Mesh Tool (U), membuat dan mengubah efek mesh pada warna

2. Gradient Tool (G), mewarnai objek dengan warna gradasi secara

keseluruhan

3. Eyedrop Tool (I)

a. Eyedrop Tool (I), mengambil warna sample dari objek

b. Measure Tool, mengukur jarak diantara dua point

Gambar II.36. Anggota Eyedropper Tool

4. Blend Tool, untuk mencampur warna (blend) objek

5. Live Point Bucket Tool (K)

a. Shape Builder Tool (Shift+M), menggabungkan beberapa

area sekaligus. Fitur width memudahkan dalam mengambil

stroke standar dan mengubah lebar secara dinamis. Stroke

dapat ditambahkan dengan cara memilih option

Page 34: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

38

b. Live Paint Bucket Tool (K), mengisi warna fill pada objek

yang terpilih atau terseleksi

c. Live Paint Selection Tool (Shift+L), menyeleksi warna fill

pada sebuah objek

Gambar II.37. Anggota Live Point Bucket Tool

6. Fill (X), memilih warna dalam

7. Stroke (X), memilih warna garis tepi

8. Color (<), mengaktifkan pallete color

9. None (/), menyatakan tidak ada warna sama sekali

3. Pallete

Sangat berguna dalam membantu kerja perangkat dalam toolbox untuk

mengedit objek. Keberadaan pallete dapat ditampilkan dan

disembunyikan sesuai kebutuhan user.

Page 35: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

39

Gambar II.38. Cara menampilkan pallete dari menu utama Window

Gambar II.39. Contoh tampilan pallete

4. Halaman Kerja

Kita dapat memulai bekerja dalam halaman kerja dengan membuka

program Adobe Illustrator. Setelah kotak dialog awal tampilan program

muncul, pilih New Document untuk memulai dokumen baru atau pilih

Open Document untuk membuka file dokumen kerja yang telah

tersimpan sebelumnya.

Page 36: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

40

a. Title Bar

Menyebutkan nama dokumen yang sedang dibuka, persentase

tampilan dan pilihan mode warna yang sedang digunakan.

b. Status Bar

Memberikan informasi tentang apa yang sedang kita kerjakan di

halaman kerja.

D. Membuka Halaman Kerja

Untuk memulai bekerja dalam area Adobe Illustrator, pilih menu utama File

dan sub menu New untuk membuka halaman kerja baru dan lakukan pengaturan

pada kotak dialog sesuai dengan kebutuhan kita. Pemberian nama dokumen,

pengaturan ukuran halaman kerja, serta mode pilihan warna (CMYK atau RGB).

Apabila kita hendak membuka dokumen hasil kerja yang telah tersimpan sebagai

file, pilih sub menu Open atau Open Recent Files.

Gambar II.40. Membuka halaman kerja

Page 37: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

41

Gambar II.41. Kotak dialog pengaturan halaman kerja baru

E. Menyimpan Dokumen Kerja

Setiap selesai bekerja dengan Adobe Illustrator, kita perlu melakukan

penyimpanan dokumen kerja sebagai sebuah file. Pada menu utama, pilih Edit

kemudian klik sub menu Save untuk memulai awal penyimpanan atau Save As

untuk menyimpan dokumen dengan nama file yang lain. Setelah muncul kotak

dialog, tulis nama file dan pilih format penyimpanan (untuk Adobe Illustrator,

format penyimpanan file adalah *.AI).

Page 38: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

42

Gambar II.42. Menyimpan dokumen kerja

Gambar II.43. Pilihan penyimpanan versi file *.AI

F. Menutup Halaman Kerja

Pada saat selesai bekerja dengan Adobe Illustrator, kita perlu menutupnya dan

keluar dari aplikasi program. Pilih menu utama lalu klik pada sub menu Exit.

Alternatif lain untuk keluar dari program adalah mengklik tanda silang (close)

halaman kerja sudut kanan atas, kemudian mengklik tanda silang (Exit) pada ruang

kerja Adobe Illustrator.

Page 39: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

43

Gambar II.44. Menutup halaman kerja

Gambar II.44. Alternatif menutup halaman kerja

2.2.3. Storyboard

Pengertian storyboard menurut Halas dalam Sutopo (2003:36) merupakan

rangkaian gambar manual yang dibuat secara keseluruhan, sehingga

menggambarkan suatu cerita. Sedangkan menurut Luther dalam Sutopo (2003:36)

storyboard merupakan deskripsi dari setiap scene yang menggambarkan secara

jelas komponen multimedia serta perilakunya.

Adapun manfaat Story Board menurut Halas dalam Sutopo (2003:36)

a. Penggunaan storyboard bermanfaat bagi pembuat multimedia, pemilik

multimedia dan sponsor.

b. Bagi pengembang dan pemilik, multimedia merupakan visual test yang pertama

– tama dari gagasan dimana secara keseluruhan dapat dilihat apa yang akan

disajikan.

c. Bagi staf pembuat multimedia, storyboard merupakan pedoman dari aliran

pekerjaan yang harus dilakukan.

Bagi sponsor, storyboard merupakan gambaran suatu multimedia yang diharapkan

akan diproduksi.

2.2.4. Testing Program

Page 40: BAB II LANDASAN TEORI1).pdf · pembuatan film animasi kartun, animasi interaktif, efek – efek animasi, banner iklan, animasi pelengkap halaman website, animasi untuk game, animasi

44

Menurut Nidhra dan Dondeti (2012:1), black box testing atau juga disebut

functional testing merupakan sebuah teknik pengujian fungsional yang merancang

test case berdasarkan informasi dari spesifikasi sebuah sistem.

Dengan kata lain, black box testing adalah pengujian sistem yang di

fokuskan terhadap tampilan sistem, apa yang dapat dilakukan oleh sistem. Berbeda

halnya dengan pengujian white box yang terfokuskan terhadap koding program.

Berdasarkan penjelasan diatas dapat kita simpulkan bahwa pengujian ini

menggunakan kuisioner yang di berikan terhadap penggunanya untuk mengetahui

apakah sistem yang dibuat sudah layak digunakan atau belum.