UNIT 6 ANIMASI 2D

6.2 ANIMASI 2D

Animasi 2D secara tradisional menggunakan helaian kertas telah dihasilkan melalui siri kartun
seperti Hikayat Sang Kancil, Usop Sontorian, Doraemon dan Mickey Mouse. Perubahan teknologi
komputer yang semakin canggih membuatkan penghasilan animasi 2D secara tradisional
bertukar kepada animasi 2D secara digital. Juruanimasi tidak lagi melukis pada kertas tetapi
melukis pada paparan komputer menggunakan perisian animasi 2D. Terdapat pelbagai perisian
animasi 2D di pasaran seperti Adobe Animate CC, Autodesk Sketchbook, Harmony Toon Boom,
Cartoon Animator 4, Powtoon dan Animaker. Rajah 6.10 menunjukkan contoh animasi.

Rajah 6.10 (a) Contoh animasi berkaitan
dengan karakter haiwan

MODUL

6

ELEMEN ANIMASI Rajah 6.10 (b) Contoh animasi berkaitan
dengan karakter manusia

6.2.1 KONSEP FRAME DAN KEYFRAME

Perisian animasi 2D menggunakan beberapa siri frame melibatkan setiap watak dan pergerakan
objek animasi dilukis pada setiap frame seperti penggunaan helaian kertas dalam animasi
tradisional. Setiap frame akan mewakili masa persembahan animasi yang dihasilkan. Setiap
perubahan animasi watak dan pergerakan akan ditandakan dengan keyframe. Rajah 6.11
menunjukkan keyframe dan frame.

• Frame ialah bingkai yang berada dalam Timeline bagi mewakili jumlah masa animasi
yang dihasilkan.

• Keyframe ialah titik mula dan tamat pergerakan animasi yang dihasilkan.
• Frame per second (fps) ialah jumlah frame dalam sesaat.

Frame per Second

Blank Keyframe Bilangan frame
Frame masa akhir

Keyframe
Rajah 6.11 Keyframe dan frame

314

6.2.2 FUNGSI ALAT DAN FITUR ASAS DALAM PERISIAN ANIMASI 2D

Penghasilan animasi 2D biasanya menggunakan perisian Adobe Animate CC. Adobe Animate
CC merupakan perisian animasi 2D dan pengarangan multimedia interaktif berasaskan Timeline
yang dibangunkan oleh Adobe. Rajah 6.12 menunjukkan ikon Adobe Animate CC.

Rajah 6.12 Ikon Adobe Animate CC MODUL
Memulakan Perisian Adobe Animate CC
1. Klik menu Start > Program > Adobe Animate CC. 6
2. Apabila Adobe Animate CC dibuka, Welcome Screen akan dipaparkan seperti dalam
Rajah 6.13.

AE
B
C
D

F ELEMEN ANIMASI

Rajah 6.13 Welcome Screen

3. Welcome Screen akan memaparkan tab dan butang berikut:
A. Home: Membuka skrin Home.
B. Learn: Memaparkan skrin tutorial belajar menggunakan Adobe Animate CC.
C. Open: Membuka dokumen yang telah dicipta dalam Adobe Animate CC.
D. RECENT FILES: Memaparkan dokumen terkini yang pernah dihasilkan.
E. Tab Templates: Character Animation, Sosial, Game, Education, Ads, Web dan Advanced.
Pilihan templat akan dipaparkan apabila tab diklik dan tetapan dokumen dipaparkan pada
bahagian panel Details.
F. Create: Mencipta dokumen menggunakan templat yang dipilih.

315

ANTARA MUKA

Setelah butang Create diklik, Adobe Animate CC akan dipaparkan seperti dalam Rajah 6.14.

Menu Bar Timeline Workspace

Toolbar

Control
Panel

Stage Edit Bar

Rajah 6.14 Antara muka Adobe Animate CC

MODUL MENU BAR

6 Menu Bar mempunyai pelbagai pilihan menu arahan kawalan dan fungsi asas seperti
dalam Rajah 6.15.

ELEMEN ANIMASI Rajah 6.15 Menu Bar

WORKSPACE

Workspace berada di hujung sebelah kanan sebaris dengan Menu Bar dan mengandungi
pilihan ruang kerja mengikut kepakaran pengguna seperti Rajah 6.16.

316 Rajah 6.16 Menu Workspace

TOOLBAR

Toolbar dalam Rajah 6.17 mengandungi tools yang mempunyai fungsi kerja yang berbeza seperti
dalam Jadual 6.2.

Selection Tool Subselection Tool
Free Transfrom Tool 3D Rotation Tool

Lasso Tool Text Tool
Rectangle Tool
Pen Tool Polystar Tool
Line Tool Paint Brush Tool
Oval Tool
Pencil Tool Paint Bucket Tool
Brush Tool Eyedropper Tool
Width Tool
Bone Tool
Ink Bottle Tool Hand Tool

Eraser Tool Black and White
Asset Warp Tool Swap Color

Camera
Zoom Tool

Stroke Color
Fill Color

Option Tool

Rajah 6.17 Toolbar MODUL
Jadual 6.2 Tools dan fungsinya
6
FUNGSI
TOOLS ELEMEN ANIMASI
Selection Tool • Mengakti kan objek, menggerakkan objek dan memilih kawasan objek
• Membentuk semula garisan dan membetulkan garisan objek seperti
Subselection Tool
melengkungkan garisan lurus yang dilukis atau garisan pada objek

• Mengakti kan titik ektor objek yang dipilih dan menggerakkan objek

Free Transform Tool
• Mengubah bentuk objek seperti skala mengubah sai objek , putaran dan skew

3D Rotation Tool

• Membuat kesan putaran objek movie clips yang dihasilkan pada Stage

Lasso Tool

• Memilih kawasan secara bebas

Pen Tool • Melukis objek dan garisan secara lurus atau melengkung menggunakan titik
• Titik ini boleh diubah suai, ditambahkan dan dipadamkan pada bentuk

objek atau garisan yang telah dihasilkan

317

TOOLS FUNGSI
Text Tool
• Memasukkan teks ke atas Stage
• Teks dapat disunting dengan mengubah tetapan pada panel roperties

Line Tool

• Melukis garisan lurus
• arisan ini boleh diubah menjadi lengkung menggunakan Selection Tool

Rectangle Tool • Melukis bentuk segi empat sama yang mempunyai bucu atau separa
Oval Tool bulatan dengan memasukkan nilai tetapan pada Rectangle Options pada
panel Properties

• Melukis bentuk bulat dan bujur dengan bentuknya boleh diubah pada
tetapan Oval Options pada panel Properties

Polystar Tool

• Melukis bentuk bintang atau poligon dengan membuat tetapan Tool
Settings pada panel Properties

MODUL Pencil Tool • Melukis bentuk objek dan garisan secara bebas
• arisan yang terhasil berdasarkan warna Stroke
6 Paint Brush Tool • Terdapat tiga mod pilihan untuk jenis garisan
Brush Tool • Straighten garisan akan diluruskan secara automatik
ELEMEN ANIMASI Bone Tool • Smooth garisan akan dilicinkan secara automatik
• nk garisan akan dilukis mengikut bentuk asal

• Melukis garisan berdasarkan sai ketebalan atau corak yang dikehendaki
• Tetapan pada Style boleh ditambahkan dengan memilih jenis corak atau

seni pada Brush Library

• Melukis garisan menggunakan bentuk berus yang dikehendaki
• entuk berus boleh diubah pada tetapan rush ptions pada

panel Properties

• Meletakkan tool tulang Inverse Kinematic (IK) pada objek bagi
menghasilkan pergerakan animasi yang kelihatan lebih realistik

Paint Bucket Tool

• Meletakkan warna pada fill objek menggunakan solid color atau
gradient color

Ink Bottle Tool

• Mewarnakan dan meletakkan jenis corak pada garisan yang dipilih
• Tetapan jenis corak boleh dipilih pada Style pada panel roperties

318

TOOLS FUNGSI
Eyedropper Tool • Mengambil contoh warna daripada imej

Eraser Tool • Memadamkan objek menggunakan bentuk berus yang dipilih
Width Tool • Tetapan sai berus, bentuk berus dan mod memadam pada raser ptions

pada panel Properties
• Terdapat empat mod untuk memadam, iaitu rase ormal, rase Fill,

Erase Lines, Erase Selected Fills dan Erase Inside

• Mengubah sai dan bentuk garisan yang telah dihasilkan kepada sai
yang dikehendaki

Asset Warp Tool

• Mengubah suai imej ektor atau bitmap yang diimport dengan meletakkan
titik kawalan untuk menghasilkan animasi pergerakan

Camera • Menghasilkan animasi menggunakan kamera
Hand Tool • Tool ini digunakan untuk menghasilkan pergerakan kamera pada Stage

seperti panning, zoom dan rotation

• Menggerakkan Stage

Zoom Tool • Membesarkan atau mengecilkan pandangan objek yang berada MODUL
Stroke Color pada Stage
6
• Menetapkan warna pada garisan
ELEMEN ANIMASI
Fill Color

• Menetapkan warna pada fill objek

Black and White

• Mewarnakan objek atau garisan kepada warna hitam atau putih

Swap Colors

• Menukarkan warna antara Fill Color dan Stroke Color pada objek atau
garisan yang dipilih

319

TIMELINE

Timeline seperti dalam Rajah 6.18 mengandungi lapisan (Layer), bingkai (frame), frame per
second (fps), kawalan playback, onion skin dan kawalan zoom. Timeline merupakan kawasan
untuk menentukan jujukan dan masa animasi dihasilkan pada teks, gra k, video dan audio serta
elemen yang lain.

fps playback onion skin zoom

Layer frame
Rajah 6.18 Tetingkap Timeline

STAGE

Stage ialah ruang kerja yang digunakan untuk meletakkan kandungan persembahan.
EDIT BAR

MODUL Edit Bar menunjukkan scene yang aktif, tab pilihan Edit Scene, tab pilihan Edit Symbols, tab
Center Stage, tab Clip content outside the Stage dan tab pilihan zoom Stage seperti Rajah 6.19.
6
Clip content
Scene yang aktif Edit Scene outside the stage

ELEMEN ANIMASI Zoom Stage

Center
Stage

Edit
Symbols

Stage
Rajah 6.19 Tetingkap dokumen, Stage dan Edit Bar

320

CONTROL PANEL

Control Panel terdiri daripada panel seperti Properties, Color, Swatches, Align, Info, Transform,
Library, Motion Presets dan panel lain yang mengandungi pelbagai kawalan serta arahan. Panel
ini boleh ditambahkan atau ditutup. Jadual 6.3 menunjukkan beberapa panel dan fungsinya.

Jadual 6.3 Beberapa panel dan fungsinya

PANEL FUNGSI

Panel Properties

• anel ini memaparkan opsyen tetapan tool yang
dipilih pada panel alatan dan gra k pada Stage.

• psyen tetapan ini boleh diubah suai mengikut
keperluan.

Panel Color MODUL

• anel ini memaparkan warna yang akti pada 6
Stroke Color dan Fill Color.

ELEMEN ANIMASI

Panel Swatches

• anel ini memaparkan warna pilihan secara
default yang boleh dipilih oleh pengguna
daripada panel Color.

321

PANEL FUNGSI

Panel Align

• anel ini memaparkan tetapan penjajaran untuk
objek, teks atau gra k yang diletakkan pada
Stage.

MODUL Panel Info
• anel ini memaparkan in omasi tentang sai ,
6
kedudukan dan warna objek, teks atau gra k
ELEMEN ANIMASI yang dipilih.

Panel Transform
• anel ini memaparkan tetapan trans ormasi pada

objek, teks atau gra k seperti Scale, Rotate, Skew,
Flip Horizontal dan Flip Vertical.

Panel Library
• anel ini menyimpan dan memaparkan koleksi

imej, video atau audio yang diimport.
• anel ini juga memaparkan koleksi simbol yang

dihasilkan seperti butang, movie clip atau gra k.

322

PANEL FUNGSI

Panel Motion Presets

• anel ini memaparkan koleksi presets pergerakan
yang telah dihasilkan untuk pembentukan
animasi pada objek.

Mencipta Dokumen Baharu

1. Buka perisian Adobe Animate CC.
2. Klik menu File > New atau New From Template.
3. Tetingkap New Document akan dipaparkan.

MODUL

6

ELEMEN ANIMASI

4. Klik tab Presets dan pilih dokumen yang dikehendaki. Contohnya, Tab: Education,
Dokumen: Standard Video.

5. Pada panel Details, kita boleh mengubah saiz Width dan Height. Kemudian, pilih Platform
Type: ActionScript 3.0.

6. Klik Create.

323

Membuka Dokumen Adobe Animate CC

1. Klik menu File > Open.
2. Tetingkap Open Document akan dipaparkan.
3. Pilih fail daripada folder sumber.
4. Klik butang Open.

Menetapkan Saiz dan Warna Latar Stage

1. Klik menu Modify > Document.
2. Pada panel Properties, tetapkan saiz pada ruang Size. Dwiklik pada W atau H.

Saiz stage

MODUL Warna stage
3. Klik kotak warna untuk menetapkan warna pada Stage.
6

ELEMEN ANIMASI

324

Menamakan dan Menambahkan Layer

1. Klik menu Modify > Timeline > Layer Properties.
2. Taipkan teks pada ruang Name.
3. Klik butang OK.

4. Bagi menambahkan Layer, klik menu Insert > Timeline > Layer.

MODUL

6

5. Klik ikon untuk memadamkan Layer. ELEMEN ANIMASI

Menambahkan dan Menamakan Scene
1. Bagi menambahkan Scene, klik menu Insert > Scene.
2. Dwiklik pada nama Scene dan taipkan nama Scene yang baharu. Contohnya, Menu.

3. Klik ikon untuk memadamkan Scene.

325

Menyisip Imej

1. Klik menu File > Import > Import to Library. Tetingkap Import akan dipaparkan.
2. Pilih fail imej daripada folder sumber dan klik butang Open. Imej akan dimasukkan

dalam Library.

3. Buka panel Library, klik dan seret fail imej ke Stage.

MODUL

6

ELEMEN ANIMASI

326

Menyimpan Hasil Kerja
1. Klik menu File > Save atau File > Save As. Tetingkap Save As dipaparkan.

2. Taipkan nama fail pada ruangan File name. Contoh: BelajarAnimasi MODUL
3. Pilih format fail pada ruangan Save as type: iaitu Animate Document (*. a). Format ini
6
mengandungi elemen animasi yang dihasilkan dan boleh disunting semula.
4. Klik butang Save. ELEMEN ANIMASI

6.2.3 PENGHASILAN DAN PEWARNAAN OBJEK
Semasa melukis objek, terdapat dua elemen utama yang terlibat, iaitu Stroke Color dan Fill Color
seperti dalam Rajah 6.20. Objek yang dihasilkan boleh mempunyai kedua-duanya sekali atau
satu daripadanya. Tujuannya adalah untuk memudahkan proses mewarnakan objek.

Fill Stroke

Rajah 6.20 Stroke Color dan Fill Color

Antara tools yang boleh digunakan untuk melukis objek dalam Adobe Animate CC adalah seperti
Line Tool, Rectangle Tool, Oval Tool dan Polystar Tool. Brush Tool, Paint Brush Tool, Paint Bucket
Tool, Fill Color dan Stroke Color pula digunakan untuk mewarnakan objek.

327