BAHAN AJAR KURIKULUM 2013paulusharsadi.com/wp-content/uploads/2018/04/MODUL-ANIMASI.pdf · BAHAN...

[email protected] paulusharsadi.com

1

BAHAN AJAR

KURIKULUM 2013

ANIMASI

OLEH :

PAULUS HARSADI, S.Kom, M.Kom

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

SINAR NUSANTARA

SURAKARTA

2015


2

HALAMAN PENGESAHAN

BAHAN AJAR ANIMASI

STMIK SINAR NUSANTARA

Digunakan Pada Mata Kuliah Animasi

Surakarta, 1 Maret 2015

Penyusun,

PAULUS HARSDI, S.Kom, M.Kom

Mengetahui dan Menyetujui :

Ketua Jurusan

Bebas Widada, S.Si, M.Kom


3

KATA PENGANTAR

Puji syukur kami panjatkan kehadiran Tuhan Yang Maha Esa atas terselesaikannya modul

praktikum Animasi ini. Modul ini disusun berdasarkan rancangan pembelajaran yang telah ada,

dengan harapan modul ini bermanfaat sebagai penunjang kelancaran proses pembelajaran..

Akhir kata penulis dengan senang hati menerima koreksi dari pembaca dalam penyempurnaan

modul praktikum ini.

Penulis


4

BAB I

PENDAHULUAN

1.1 Animasi

Animasi dapat diartikan sebagai sebuah objek yang bergerak dinamis dan tidak statis. Objek

dapat berupa teks maupun bentuk-bentuk yang lainnya. Bentuk-bentuk gerak animasi sangat

banyak jenisnya, dan tentu saja tidak dapat dihitung.

Animasi adalah proses penciptaan efek gerak atau efek perubahan bentuk yang terjadi selama

beberapa waktu. Animasi bisa berupa gerak sebuah objek dari tempat yang satu ke tempat

yang lain, perubahaan warna, atau perubahan bentuk (yang dinamakan morphing

Ada 3 macam efek animasi yang digunakan dalam multimedia:

1. Animasi berbasis Piksel

Pada dasarnya adalah kumpulan dari gambar berbasis piksel yang dimainkan

berurutan berkelanjutan yang menimbulkan kesan sebuah gerakan. Hal ini biasanya

membentuk sebuah file gambar bergerak baik terkompres maupun tidak, seperti

berkas MPEG, file .mov QuickTime , AVI atau tipe berkas lain yang serupa.

2. Animasi berbasis Vektor

Animasi Flash adalah format standar industri untuk animasi berbasis vektor. Tidak

mengandalkan transisi piksel antar gambar secara individual, animasi dihasilkan

dengan manipulasi penentuan geometri dan vektor gambar.

3. Animasi Hibrid

Animasi berdasarkan pergerakan piksel dan atau elemen-elemen yang berbasis vektor,

gambar atau film oleh authoring software. Contoh dari ini adalah kemampuan untuk

menganimasikan gambar piksel dan teks berbasis vektor dengan sebuah gambar latar

dalam sebuah media presentasi yang interaktif.

1.2 Jenis-jenis Animasi

sejarah animasi sangatlah panjang. Animasi yang dulunya mempunyai prinsip yang sederhana,

sekarang telah berkembang menjadi beberapa jenis. Dan berikut adalah sedikit ulasan dari

jenis animasi.

1. Animasi Clay / Stop motion animation

Animasi Clay (tanah liat) atau bisa juga disebut dengan film animasi stop motion adalah

teknik film animasi paling sederhana yang dilakukan dengan cara memotret gerakan demi

gerakan yang digerakkan satu demi satu sehingga objek terlihat bergerak. Teknik ini


5

termasuk salah satu teknik yang paling mudah untuk dipraktekkan. Film animasi terkenal

2. Animasi 2D

Animasi 2D adalah animasi dua dimensi. Pada animasi 2D, figur animasi tersebut dibuat dan

diedit di komputer dengan menggunakan 2D bitmap graphics atau 2D vector graphics. Film

animasi yang dihasilkan cenderung datar tanpa terlihat dimensi ekstra yang membuat

sebuah gambar terlihat nyata. Beberapa contoh karya dari film animasi 2D adalah kartun-

kartun seperti Tom and Jerry, Scooby Doo, anime seperti Doraemon, Sailor Moon dan lain-

lain

3. Animasi 3D

Disebut tiga dimensi karena jenis ini memiliki sifat kedalaman/ruang pada objeknya. Secara

sepintas kita akan mudah mengenali film animasi dengan jenis tiga dimensi ini. karena

bentuknya yang halus, pencahayaan yang lebih rill dan kesan ruang yang lebih terasa. Semua

itu bisa dilakukan karena dibantu dengan teknologi komputer masa kini yang sudah canggih.

dalam jenis animasi ini objek yang akan dianimasikan bisa dilihat dari semua sudut/sisinya.

seperti halnya boneka sungguhan namun objek dibuat secara digital dengan menggunakan

software khusus.

1.3 Teknik pembuatan animasi

Teknik pengerjaan animasi pun telah berubah seiring dengan perkembangan teknologi komputer.

Dahulu pembuatan animasi dilakukan dengan membuat gambar-gambar yang digabungkan

sehingga merupakan gambar yang bergerak. Untuk membuat satu durasi animasi memerlukan

jumlah gambar (frame) yang cukup banyak. Jumlah frame tiap detik (frame per second /fps)

merupakan satuan yang akan menghasilkan kualitas animasi. Makin banyak frame per detik,

makin baik kualitas animasi yang dihasilkannya.

Efisiensi pengerjaan pembuatan animasi telah dilakukan sejak diperkenalkannya teknik animasi

cell (celluloid sheet, semacam kertas transparan). Gagasan dasar dari cell adalah satu gambar

dibuat untuk satu frame. Perubahan kecil dibuat dalam frame-frame berikutnya, sampai

perubahan yang berarti merupakan keyframe. Animasi yang dibentuk oleh frame-frame antara

dua keyframe disebut in-between animation, biasanya dibuat oleh seorang animator tesendiri.

Teknik animasi cell menjadi dasar pembuatan semua animasi. Dengan komputer, yang perlu

ditentukan adalah keyframe, sedangkan frame-frame di antaranya akan diselesaikan oleh

komputer.


6

1.4 Sejarah FLASH

FLASH pertama kali diperkenalkan oleh Jonathan Gay, direktur Macromedia pada tahun 1996.

Popularitasnya berkembang dengan cepat dan semakin meluas menjadi sebuah tool standar

untuk membuat aplikasi high-end multimedia web site dan presentasi. FLASH terlahir

dari aplikasi Macromedia lainnya seperti FutureSplash dan Director. Macromedia Director

memiliki sejarah yang lebih lama dari pada FLASH, namun tool ini hanya dapat digunakan untuk

membuat aplikasi multimedia yang disimpan dalam CD-ROM, film-film dan televisi. File yang

dibuat oleh Director terlalu besar untuk disimpan secara efektif di atas web.

FLASH menawarkan banyak fitur-fitur dinamik yang ditawarkan oleh Director. Namun FLASH

dapat mengkompresi ukuran file sehingga memungkinkan untuk membuat aplikasi atau

konten media-rich yang disimpan di atas web dengan waktu download yang cepat.

Pada tahun 2007 Adobe System membeli software ini dan memberi nama Adobe Flash

CS3 Professional, versi ke 9 dari FLASH. Kemudian FLASH menjadi Adobe Flash CS4 Professional

yang diluncurkan pada tanggal 15 Oktober 2008 sebagai versi 10 dari FLASH dengan tambahan

fitur inverse kinematic (bones), manipulasi dasar objek 3D, animasi berbasis objek dan

dukungan ActionScript 3.0. Dan saat ini Adobe Flash yang terbaru sudah sampai Adobe

Animate CC.

1.5 Apa itu FLASH ?

FLASH adalah sebuah tool yang digunakan oleh para disainer dan pengembang untuk membuat

presentasi, aplikasi, dan konten lainnya yang melibatkan interaksi user. Sebuah projek FLASH

dapat melibatkan animasi, video, presentasi komplek, aplikasi dan sebagianya. Secara umum,

bagian individu dari konten yang dibuat dengan FLASH disebut aplikasi, walaupun hanya berisi

sebuah animasi sederhana. Anda dapat membuat aplikasi FLASH yang kaya akan media dengan

melibatkan gambar, suara, video, dan special effect.

FLASH sangat sesuai untuk membuat konten aplikasi berbasis internet, karena ukuran file-nya

yang sangat kecil. Namun demikian penggunaan grafik bitmap akan berakibat ukuran

file menjadi lebih cepat membesar bila dibandingkan dengan menggunakan grafik vektor.

Grafik vector membutuhkan sedikit memori untuk menyimpan data dibandingkan dengan

bitmap.

Selain itu, text pada aplikasi web berbasis FLASH tidak dapat dibaca oleh sistem pencarian di

internet seperti Google, Yahoo, Altalavista, dan sebagainya.

Ketika anda bekerja dalam FLASH, pekerjaan anda akan disimpan dalam sebuah file dokumen

FLASH dengan ektensi .fla (FLA). Sebuah dokumen FLASH mempunyai 4 (empat) bagian utama,

yaitu bagian:


7

Stage, adalah tempat dimana semua grafik, video, tombol, dll. (yang anda buat)

akan tampil selama playback.

Timeline, adalah tempat dimana FLASH akan menampilkan semua grafik dan

elemen lainnya sesuai dengan kehendak anda. Timeline ini dapat berisi beberapa layer,

dimana grafik yang disimpan pada layer tertinggi akan tampil di atas grafik yang

disimpan di layer bawahnya.

Library, adalah panel dimana FLASH memperlihatkan daftar dari elemen media

dalam dokumen FLASH anda.

ActionScript, adalah bahasa pemrograman yang memungkinkan anda menambah

interactivity ke dalam dokumen FLASH anda. Sebagai contoh anda dapat

menambahkan kode untuk mengaktifkan sebuah tombol untuk menampilkan image

baru ketika user menekan tombol tersebut.

Pada saat anda menyelesaikan dokumen FLASH, anda dapat mem-publish-nya menggunakan

perintah File > Publish. Dengan ini menghasilkan sebuah file terkompresi dengan ekstensi .swf

(SWF). Kemudian anda dapat meggunakan Flash Player untuk menjalankan file SWF dalam

sebuah web browser atau sebagai sebuah aplikasi stand-alone.

1.6 Animasi dalam Flash

Multimedia terdiri dari dua kategori, yaitu linier dan non linier (interaktif). Movie non linier

dapat berinteraksi dengan aplikasi web yang lain melalui penekanan sebuah tombol navigasi,

pengisian form dan lain-lain. Desainer Web membuat movie non linier dengan membuat

tombol navigasi, animasi logo, animasi form dengan sinkronisasi suara. Flash movie adalah

grafik dan animasi untuk situs web yang merupakan grafik vektor dengan ukuran file kecil,

sehingga dapat di-load dalam waktu singkat. Pada dasarnya animasi terdiri dari grafik vektor,

tetapi dapat juga dilengkapi dengan bitmap dan suara.

Flash movie dapat dijalankan dengan Flash Player melalui browser atau pada aplikasi

stand alone. Flash dapat digunakan untuk membuat animasi interaktif, di mana pengunjung

dapat memasukkan data, kemudian Flash mengevaluasi dan menampilkan hasilnya.


8

BAB II

PENGENALAN ADOBE FLASH CS3 PROFESSIONAL

2.1 Mengatifkan Program Flash

Klik Start All Program Adobe Master Collection CS3 Adobe Flash CS3 Professional

Tunggu beberapa saat maka akan keluar layar kerja dari Flash sebagai berikut :

Dari pilihan diatas anda dapat memilih :

Create New Untuk membuat file yang baru pilih Flash File (ActionScript 2.0)

Open a Recent Item Untuk membuka file yang pernah dibuat pilih Open

Create from Template Untuk membuat file dari template yang sudah ada, pilih

berdasarkan kategori.

Catatan : Karena anda baru pertama kali membuka Flash maka pilih Flash File

(ActionScript 2.0) untuk membuat file yang baru


9

2.2 Pengenalan Area Kerja Flash

Beberapa Komponen Penting dalam Area Kerja Adobe Flash

1. Toolbar

Merupakan panel yang berisi berbagai macam tool. Tool-tool tersebut dibagi dalam 4

kelompok.

a. Tools berisi tombol-tombol untuk membuat dan mengedit gambar

b. View, untuk mengatur tampilan kerja

c. Colors, menentukan warna yang dipakai saat mengedit

d. Option, alat bantu lain untuk mengedit gambar

Lebih lengkapnya dapat dilihat lebih jelas pada tabel dibawah ini :


10


11

2. Time Line

Digunakan untuk mengatur dan mengontrol suatu animasi. Semakin panjang frame dalam

layer maka semakin lama animasi akan berjalan.

3. KeyFrame

Pada time line anda akan mengenal keyframe dalam membuat animasi. Keyframe

adalah sekumpulan frame-frame yang berisi objek di dalam timeline. Keyframe yang berisi

objek ditandai dengan bulatan hitam. Sedangkan Keyframe yang tidak diisi objek ditandai

dengan bulatan kosong dan disebut Blank Keyframe.

4. Stage

Merupakan area kerja, didalamnya anda bisa membuat objek, memasukkan gambar, teks,

memberi warna. Didalam Stage ini anda menempatkan objek yang akan dibuat animasi.

5. Panel

Beberapa panel penting dalam dalam Adobe Flash CS3

Professional, diantaranya panel properties, Filter dan parameter,

Action, library, color & align info & Transform


12

6. Properties

Panel properties akan berubah tampilan dan fungsinya mengikuti bagian mana yang

sedang diaktifkan. Misalnya anda mengaktifkan line tool, maka yang muncul pada jendedla

properties adalah fungsi-fungsi untuk mengatur line/garis, seperti warna garis, bentuk garis,

besarnya garis

7. Library

Berfungsi sebagai perpustakaan simbol/media yag akan

digunakan dalam animasi yang sedang dibuat. Simbol

merupakan kumpulan gambar baik movie, tombol

(button), sound dan gambar static (grafik)

8. Document Properties

Untuk melakukan pengaturan ukuran layar, warna backgorund, frame rate dan dimensi dari

animasi yang dibuat. Untuk memanggil kotak dialog Document Properties, pilih jendela

properties dibawah layar, kemudian pilih tombol size.


13

BAB III

PENGGAMBAR BENTUK DASAR

3.1 Dasar Objek pada Adobe Flash

Ketika menggambar objek dalam Flash, seperti objek lingkaran, kotak, oval, dan

lain secara otomatis Flash akan menyediakan dua unsur objek, yaitu Fill (bidang objek) dan

Stroke (garis tepi). Buat objek persegi panjang dengan menggunakan Rectangle Tool.

1. Buka Flash.

2. Pilih Create New Flash File (ActionScript 2.0) untuk membuka jendela baru.

3. Klik tool rectangle, letakkan kursor di stage. Drag and drop sehingga terbentuk persegi

panjang.

Stroke (garis tepi, warna hitam)

Fiil (Bidang, warna hijau)

Menyeleksi Objek

Seperti yang dijelaskan di atas, objek dalam flash terbagi dalam dua unsur, yaitu Fill objek dan

Stroke Objek. Untuk memilih Fill objek, Stroke Objek, atau Fill dan Stroke objek dapat dilihat

pada gambar berikut ini.

Gambar 1 Gambar 2 Gambar 3 Gambar 4

Keterangan:

Gambar 1 : Objek belum diseleksi.

Gambar 2 : Fill objek terseleksi.

Gambar 3 : Stroke objek terseleksi.

Gambar 4 : Fill dan Stroke Objek terseleksi.

Untuk melakukan penyeleksian objek, dilakukan dengan menggunakan Selection Tool yang

terdapat dalam Toolbox. Kemudian tinggal diklik fill atau stroke dari objek yang akan diseleksi. Untuk

menyeleksi seluruh objek (baik fill dan stroke), cukup double klik pada objek.


14

Flash Drawing Model

FLASH menyediakan 2 (dua) drawing model yang memberikan anda kemudahan pada saat

menggambar bentuk (shape). Yaitu:

1. Merge Drawing model, secara otomatis menggabungkan (merge) shape yang anda

gambar ketika overlap dengan yang lain. Bila anda memilih sebuah shape yang

telah di-merge, kemudian anda memindahkannya, shape yang dibawahnya akan

terpotong secara permanen. Sebagai contoh, bila anda menggambar sebuah kotak

dan di atasnya dibuat juga sebuah lingkaran, kemudian lingkaran itu dipindahkan, maka

sebagian kotak akan hilang. Lihat Gambar dibawah ini.

Contoh merge model drawing

2. Object Drawing model, dengan ini anda dapat menggambar shape sebagai objek

yang terpisah dan tidak otomatis di-merge ketika overlap. Ini memungkinkan anda

membuat shape yang saling overlap tanpa menghilangkan bagian yang ter-overlap.

Anda juga dapat mengatur urutan kenampakan dari objek yang saling tumpang tindih.

Ketika anda membuat shape menggunakan Objek Drawing model, FLASH menandai

objek tersebut dengan sebuah rectangular bounding box.

Rectangular bounding box pada objek lingkaran

Ikon Object Drawing (J) dapat anda temukan pada bagian panel option ketika anda

memilih ikon Line tool, Pen tool, Oval tool, Rectangle tool, Pencil tool dan Brush tool.


15

Membelah Objek dengan Line Tool

Selain itu dalam pemotongan gambar melalui Flash tools sangatlah mudah, karena Anda dapat

menggunakan berbagai macam cara. Misalnya dalam memotong sebuah fill dengan

menggunakan line tool.

Menyimpan Document.

Untuk menyimpan dokument, klik menu file, pilih save. Atau dapat juga digunakan kombinasi

tombol ctrl+s.

3.2 Menggambar Bentuk-bentuk Dasar

1. Membuat garis dengan Line Tool

Flash menyediakan pilihan untuk membuat

beragam bentuk garis. Pilih ikon Line Tool

( ) pada toolbar di sisi kiri layar,

kemudian lihat pilihannya di panel

Properties di sebelah kiri bawah layar,

Masukkan angka ketebalannya. Dan untuk

memulai garis klik pada stage dan drag

sepanjang yang anda inginkan.


16

2. Membuat garis dengan Pencil Tool

Untuk membuat garis bebas, Pilih ikon Pencil

Tool ( ) pada toolbar sisi kiri dan pilih

warnanya pada panel Colors di bawahnya.

Untuk membuat garis lurus, pada panel

Options di bawah toolbar pilihlah opsi

Straighten, untuk garis lengkung yang halus

pilih Smooth dan untuk membuat garis

sesuai dengan gerakan mouse pilih Ink.

3. Menggambar lingkaran atau elips

Pilih Oval Tool ( ) untuk menggambar

bentuk lingkaran atau elips. Untuk memulai

menggambar, klik pada stage dan drag

sebesar lingkaran atau oval yang Anda

inginkan. Adapun jenis dan warna garis serta

sisi bentuk itu dapat dipilih pada panel

Colors.

4. Menggambar kotak

Pilih Rectangle Tool ( ) untuk meng-

gambar bentuk kotak pada layar. Untuk

memulai menggambar, klik pada stage dan

drag sebesar kotak yang Anda inginkan.

Adapun jenis dan warna garis serta warna isi

(fill ) bentuk itu dapat dipilih pada panel

Colors.


17

Apabila Anda ingin bentuk sudut kotak tidak berbentuk lancip tetapi berupa sudut

yang halus (lengkung), Anda dapat mengubahnya dengan cara pilih Rectangle Tool (

) dan rubah nilai yang ada pada panel Properties dan masukkan nilai 10 seperti

yang ditunjukkan pada gambar di samping.

Lalu mulailah menggambar kotak dan hasilnya akan terlihat.

5. Menggambar bentuk bersegi banyak

Untuk menggambar bentuk bersegi banyak,

Klik dan tahan pada Rectangle tool ( ),

kemudian pilih PolyStar tool ( ).

Untuk memilih bentuk bersegi banyak atau

bintang, Pilih Options pada panel Properties,

Kemudian pada jendela dialog Tool Settings

yang muncul Anda dapat memilih bentuk yang

diinginkan serta dapat mengisikan angka

berapa segi banyak yang akan dibuat.

Untuk menggambarnya, Klik mouse pada stage kemudian drag


18

sesuai besarnya objek yang diperlukan.

6. Menggambar bentuk bebas atau unik Untuk

membuat bentuk bebas atau unik Anda

dapat menggunakan Pen Tool ( ).

Klik mouse pada stage, drag dan lepas,

maka garis akan terbentuk. Gerakkan

kembali mouse ke arah yang diinginkan

dklik untuk membuat sudut atau anchor

point. Bila bentuknya merupakan kurva

tertutup maka dapat diberi warna.

7. Mengubah Ukuran Objek

Pilih Selection Tool ( ) klik dua kali pada

gambar/objek yang akan diubah

ukurannya. Pilih Free Transform Tool ( ),

maka pada ujung bentuk akan muncul kotak

kecil atau handle. Pada panel Option pilih

opsi Scale ( ). Klik pada salah satu tit ik

kemudian drag kotak kecil tersebut ke arah

luar, ukuran akan membesar dan drag ke

arah dalam maka ukuran akan mengecil.

8. Memutar Objek

Pilih Selection Tool ( ) klik dua kali pada

gambar/objek yang akan diputar. Pilih Free

Transform Tool ( ), maka pada ujung

bentuk akan muncul kotak kecil atau handle.

Pada panel Option pilih opsi Rotate and

Skew ( ) pada panel Option kemudian

arahkan mouse mendekati salah satu handle

yang ada di sudut hingga cursor membentuk

panah melingkar. Klik dan drag ke arah

putaran yang diinginkan.


19

BAB IV

WARNA DAN GAMBAR

4.1 Menggunakan Warna

1. Mengganti Warna

Untuk mengganti warna isi atau garis dari

bentuk yang telah dibuat dapat dilakukan

dengan menyeleksi/memilih bentuk yang

akan diganti dengan menggunakan

Selection Tool ( ). Double-klik gambar

yang ingin diganti warnanya, kemudian

pada panel Colors pilih opsi Stroke Color

( ) Klik dan pilih warna untuk

mengubah warna garis atau pilih Fill Color (

) Klik dan pilih warna untuk

mengubah warna isi bentuk.

2. Gradasi

Untuk memberi warna gradasi bada suatu

gambar/objek, pilih menu Window Color

Mixer, jendela Color Mixer akan muncul di

sebelah kanan layar. Pilih gambar/objek

yang akan diberi warna gradasi dengan

Selection Tool ( ), pada pull-down menu

di panel Color Mixer, pilih Type Radial. Pilih

warna yang lebih terang untuk bagian

sebelah kiri, sedangkan bagian kanan yang

lebih gelap.

Untuk mengedit gradasi pilih Gradient

Transform Tool ( ). Klik dan drag

handle yang muncul sesuai dengan arah

yang diinginkan.


20

4.2 Mengimpor Gambar dan Mengolahnya

1. Mengimpor Gambar

Untuk memasukkan gambar dalam format bitmap, seperti misalnya foto, ke dalam

movie dapat dilakukan dengan cara mengimpor gambar/foto tersebut. Pilih menu

File Import Import to Stage, lalu cari letaknya direktori gambar yang akan

diimpor.

2. Memperbesar/memperkecil

Untuk memperbesar atau memperkecil ukuran gambar dapat dilakukan dengan

menggunakan Scale Tool ( ) pada toolbar disebelah kiri. Agar ukuran gambar tidak

distorsi, tekan Shift pada keyboard pada saat memperbesar/memperkecil gambar.


21

3. Mengubah Bitmap menjadi Vektor (Trace Bitmap)

Dalam Flash terdapat fasilitas untuk mengubah gambar dalam format bitmap menjadi

vektor, yaitu menu Trace Bitmap. Fasilitas ini berguna untuk mengurangi besarnya

file karena penggunaan gambar bitmap dalam animasi. Namun tentunya kualitas gambar

bitmap itu sendiri akan mengalami penurunan.

Untuk mengaplikasi Trace Bitmap pada gambar/foto yang telah kita impor,

sebelumnya pilih/seleksi terlebih dulu gambarnya menggunakan Selection Tool ( )

pada toolbar. Kemudian pilih menu Modify Bitmap Trace Bitmap

Setelah muncul kotak dialog Trace Bitmap,

masukkan angka pada kolom Color Threshold

dan Minimum Area. Semakin besar angka

yang dimasukkan semakin besar pula file yang

dikompres. Namun sebaiknya tidak

memasukkan angka lebih kecil dari 10

(sepuluh) karena

pengaruhnya pada pengurangan besarnya file sebagai tujuan utama Trace Bitmap

akan sangat kecil. Bahkan pada beberapa komputer (dengan spesifikasi rendah) akan

mengakibatkan hang, karena komputer dipaksa bekerja terlalu keras untuk menguraikan

gambar tersebut.

Setelah proses Tracing Bitmap selesai,

pilih menu Modify -> Group, agar

gambar yang sudah di-trace tersebut

terkumpul sebagai satu image.

4. Pengolahan Gambar lebih lanjut


22

Untuk mendapatkan gambar dengan hasil olahan lebih lanjut, disarankan untuk

menggunakan software lain yang memang dikhususkan untuk mengolah gambar/foto,

seperti; Macromedia Fireworks, Adobe Photoshop atau Corel Photopaint. Adobe Flash

CS3 Professional digunakan pada saat gambar tersebut telah siap untuk dianimasikan.


23

BAB V

LAYER DAN TEKS

5.1 Layer

Komponen penting yang menyertai layer antara lain :

Timeline

Timeline digunakan untuk menampung layer dan merupakan pengatur semua jalan cerita, di

mana actor ditampilkan dan menghilang. Suatu object yang muncul diatur dalam Timeline

tersebut. Komponen utama dalam Timeline adalah layer, frame dan playhead.

Timeline berfungsi untuk mengatur waktu suatu movie dan memunculkan objek tertentu.

Penempatan efek suara dan musik latar belakang juga diatur dalam Timeline.

Frame

Frame adalah gambar yang membentuk suatu gerakan bila frame tersebut ditampilkan satu

demi satu berurutan. Frame merupakan konsep animasi yang dibuat secara manual maupun

dengan alat bantu komputer. Untuk membuat movie menyajikan suatu action pada saat

playhead mencapai frame tertentu pada Timeline. Frame adalah satuan terkecil di dalam sebuah

animasi dalam Flash. Keyframe adalah sebuah frame yang mendefinisikan satu atau beberapa

perubahan di dalam animasi yang kita kembangkan. Sebuah keyframe adalah sebuah frame,

sedangkan sebuah frame, belum tentu dapat didefinisikan sebagai sebuah keyframe

Playhead

Playhead dengan garis merah vertikal, menunjukkan posisi frame berada pada suatu saat. Bila

posisi playhead tersebut berubah, maka gambar yang ada di stage juga berubah.


24

Layer

Layer digunakan untuk menempatkan object yang berbeda-beda seperti kertas transparan,

dimana beberapa layer bersama-sama merupakan suatu gambar yang lengkap. Object tidak

hanya gambar animasi saja, melainkan dapat berupa gambar latar belakang, teks, movie dan

suara. Setiap object berada pada layer tersendiri yang independen.

scene

Pada pembuatan film yang mempunyai jalan cerita cukup panjang, untuk memudahkan

pengembuatannya, maka dibagi-bagi menjadi beberapa tema yang dinyatakan dalam scene.

Seperti halnya pembuatan film yang terdiri dari banyak scene, animasi juga dibuat dengan

konsep yang sama, untuk memudahkan dalam mengatur movie. Nama scene dapat diubah

dengan mengklik dua kali pada nama scene tersebut, kemudian diketik nama yang dikehendaki.

Untuk menampilkan panel Scene, pilih menu Window > Scene.

Scene adalah satu macam animasi yang berisi berbagai layer dan frame. Bila anda akan

membuat satu file animasi dengan dua macam animasi yang berbeda dan anda akan

memisahkannya anda bisa membuatnya dengan 2 scene. Dengan menggunakan 2 scene anda

dengan mudah melakukan editing karena meskipun terdapat dalam satu file tetapi masing-

masing animasi terpisah. Untuk mengatur scene anda dapat mengaturnya dalam docker seperti

dibawah ini :

Dengan mengunakan dua scene anda lebih leluasa melakukan lompatan dari satu frame ke

satu frame dalam scene yang lain.

Dalam pengunaannya untuk e-learning anda dapat memanfaatkan scene untuk memisahkan

menu materinya.

5.2 Mode Layer

Layer (lapisan) merupakan hal yang sangat penting di flash. Layer digambarkan seperti

tumpukan lembaran yang transparan. Layer yang paling atas akan menutupi objek layer yang

dibawahnya. Kegunaannya antara lain:

Untuk pengaturan kerja, animasi dan elemen lainnya. Jadi, kita bisa memakai layer

yang berbeda antara file suara, objek, action, label frame dan komentar frame.


25

Untuk memudahkan dalam menggambar atau mengedit suatu objek tanpa

mempengaruhi objek yang berada di layer lain.

Agar bisa menemukan objek dengan cepat dan mudah ketika akan mengedit objek

tersebut.

Dapat membuat banyak objek dengan animasi yang berbeda antara yang satu dengan

lainnya.

Beberapa macam mode layer terlihat pada gambar di bawah ini:

1. Mode Aktif ditandai dengan gambar pensil, mode ini menunjukkan bahwa layer sedang

aktif dan siap untuk mengerjakan suatu objek pada layer tersebut.

2. Mode Normal adalah mode yang bisa dilihat dan diedit ketika mode ini menjadi mode

aktif.

3. Mode Terkunci ditkitai dengan gambar gembok kecil yang terkunci. Pada mode ini kita

hanya bisa melihat objek pada layer tanpa bisa mengeditnya.

4. Mode tersembunyi ditkitai dengan tkita X, pada mode ini kita tidak dapat melihat objek

pada layer. Mode ini diperlukan untuk lebih leluasa mengedit objek pada layer lain.

5. Mode Outline ditkitai dengan kotak tanpa warna, yang berarti tidak menampilkan objek

secara keseluruhan, hanya garis luarnya saja yang terlihat.

5.3 Manajemen Layer

Pada Flash, kita dapat menyatukan beberapa animasi yang berbeda dengan menggunakan objek

yang berbeda. Sangat dianjurkan agar kita menggunakan 1 layer untuk 1 animasi objek.

http://edutechwiki.unige.ch/en/Image:Cs3_layers_annotated-small.png


26

Manajemen layer : menambah layer

Untuk menambah layer, kita dapat melakukan salah satu langkah di bawah ini :

Klik kanan pada layer yang sudah ada, lalu pilih Insert Layer. Klik pada tombol Add New Layer.

Manajemen layer : menggeser layer

Untuk menggeser layer, kita dapat meng-klik tombol mouse pada layer yang

bersangkutan dan tahan (jangan dilepas tombol mousenya). Kemudian kita dapat

menggeser-geser layer tersebut ke posisi yang kita inginkan.

Manajemen layer : memberi nama layer

Untuk memberi nama pada layer, kita dapat klik 2 kali pada layer yang bersangkutan

(tepat pada bagian tulisan nama layer), kemudian isilah dengan nama yang kita inginkan,

lalu tekan tombol Enter.

Manajemen layer : mengunci layer

Fitur ini sangat berguna pada saat editing, terutama agar layer-layer yang tidak kita pakai

tidak akan terganggu atau terpengaruh oleh editing kita. Untuk mengunci semua layer,

klik gambar kunci yang terdapat di atas panel layer. Untuk mengunci 1 atau beberapa

layer, klik tanda titik kedua di sebelah kanan nama layer.

Manajemen layer : menyembunyikan layer

Jika kita sedang melakukan editing, terkadang kita ingin fokus pada layer yang sedang

kita kerjakan dan ingin menyembunyikan layer yang lain. Untuk menyembunyikan semua

layer, klik gambar mata yang terdapat di atas panel layer. Untuk menyembunyikan 1

atau beberapa layer, klik tanda titik pertama di sebelah kanan nama layer.

Membuat animasi dengan lebih dari 1 objek

Seringkali, animasi yang akan kita buat melibatkan lebih dari 1 objek. Di saat yang

bersamaan atau berbeda, beragam animasi ingin kita tampilkan. Dengan menggunakan

prinsip 1 layer untuk 1 animasi, maka kita dapat membuat beberapa layer, mengisinya

dengan objek dan menganimasikan objek tersebut sesuai kebutuhan, lalu lakukan tes.

5.3 Menggunakan Teks

Untuk menambahkan teks ke dalam stage pilih Text Tool ( ) pada toolbar kemudian klik

pada stage. Sebuah kotak kosong akan muncul. Untuk mengubah jenis, ukuran serta

warna font, gunakan jendela Properties di bagian bawah layar.


27

5.4 Breaking Text Apar t

FLASH memiliki fitur untuk memecah teks menjadi simbol per karakter untuk dipisahkan

ke dalam text block yang berbeda. Teknik ini dinamakan Break Apart dan hanya berlaku

untuk Static text. Setelah melakukan Break Apart, maka tulisan tidak lagi menjadi sebuah

kalimat utuh, melainkan terpisah menjadi karakter per karakter. Pemisahan seperti ini

memungkinkan kita untuk melakukan animasi untuk setiap huruf secara terpisah.

Perhatikan bahwa setelah melakukan Break Apart terhadap sebuah kalimat, maka kalimat

tersebut akan terpecah kedalam huruf per huruf setiap bloknya. Ternyata, huruf juga bisa

dilakukan Break Apart kembali. Huruf yang kembali di Break Apart berubah menjadi

komponen garis dan warna, bukan lagi menjadi suatu huruf.

Melakukan Break Apart dengan cara :


28

1. Gunakan Selection Tool dan pilih text block.

2. Pilih menu Modify (atau klik kanan) > Break Apart. Setiap karakter pada teks yang

dipilih dipisahkan dalam text block yang berbeda

3. Kembali pilih menu Modify (atau klik kanan) > Break Apart untuk mengubah

huruf menjadi grafik vector.


29

BAB VI

ANIMASI DASAR

FRAME BY FRAME

6.1 Animasi dalam Flash

Animasi berasal dari kata Animation yang dalam bahasa Inggris To Animate yang berarti

menggerakan. Jadi animasi dapat diartikan sebagai Menggerakan sesuatu (gambar atau

objek) yang diam

Jenis-jenis animasi dalam Flash :

1. Frame by frame

2. Tweened Animation

a. Motion Tween

b. Motion Guide

c. Shape Tweening

d. Shape Hint

3. Masking

Simbol dalam layer untuk animasi dalam flash lebih detail dapat dilihat seperti dibawah ini :

Tween : Motion ditunjukkan dengan sebuah titik hitam dan mempunyai panah hitam dengan

background biru muda.

Tween : Shape ditunjukkan dengan sebuah titik hitam dan mempunyai panah hitam dengan

background hijau terang.

Sebuah garis putus-putus menunjukkan akhir animasi

Sebuah keyframe yang berisi objek ditunjukkan dengan sebuah titik berwarna hitam

Sebuah keyframe yang kosong ditunjukkan dengan sebuah titik berwarna putih

Sebuah huruf a kecil menunjukkan bahwa frame telah diberisebuah perintah lewat panel

ation script.


30

Sebuah bendera merah menunjukkan bahwa frame berisi sebuah label atau keterangan.

6.2 Frame By Frame

Frame by frame adalah animasi yang biasa digunakan pada berbagai aplikasi program

pembuat film animasi atau kartun. Pemahaman konsep animasi ini sangat simple, dimana

anda memiliki gambar yang banyak yang memiliki sedikit perubahan. Bila gambar ini

anda tampilkan secara berurutan maka gambar yang tampak seolah-olah merupakan

gambar yang bergerak. Konsep ini sama seperti konsep pembuatan film kartun pada jaman

dahulu. Meski konsepnya sangat sederhana dan sangat kuno, tapi konsep animasi frame

by frame ini masih digunakan apabila semua type animasi yang ada dalam flash tidak dapat

dilakukan.

Dalam pembuatannya animasi frame by frame ini sangat rumit karena anda harus

membuat gambar setiap frame yang berbeda agar animasi kelihatan bergerak, tetapi anda

dapat membuat animasi dalam bentuk apapun. Sebagai contoh,

1. Buat dokumen baru dengan memilih menu FILE, NEW, Flash File

(ActionScript 2.0)

2. Gambarlah sebuah lingkaran ke dalam Stage, dengan menggunakan OVAL TOOL

(berikan warna Kuning pada lingkaran yang dibuat atau sesuaikan dengan warna yang

anda inginkan)

2. Kemudian di Bar Time Line, di frame 5 anda klik kanan pilih Insert Key Frame


31

4. Sekarang gunakan Selection Tool untuk memilih objek lingkaran. Pada Frame 5 ini

anda ganti warna lingkaran menjadi warna Hijau (atau bedakan dari warna

sebelumnya).

5. Coba ulangi langkah 3 dan 4, untuk Frame 10 15 dan 20. (masing-masing frame

bedakan warna lingkarannya).

6. Sekarang lihat animasi dengan memilih menu CONTROL, PLAY atau anda bisa

menggunakan tombol CTRL + ENTER

Catatan :

Dari animasi yang barusan anda buat, anda bisa mengembangkannya misalnya pada frame

ke 5 gambar lingkaran berubah ukuran atau muncul gambar yang lain, begitu juga di frame 10

dan seterusnya.

BAHAN AJAR KURIKULUM 2013paulusharsadi.com/wp-content/uploads/2018/04/MODUL-ANIMASI.pdf · BAHAN...

Documents

Transcript of BAHAN AJAR KURIKULUM 2013paulusharsadi.com/wp-content/uploads/2018/04/MODUL-ANIMASI.pdf · BAHAN...