TEKNIK

ANIMASI
2 DIMENSI

K E L A S X I M U LT I M E D I A
SEMESTER GANJIL
KOMPETENSI DASAR

3.3 MENERAPKAN TEKNIK ANIMASI

TWEENING 2D

4.3 MEMBUAT ANIMASI 2D

MENGGUNAKAN TEKNIK TWEENING
 TUJUAN PEMBELAJARAN

S E T E L A H M E N G I K U T I K E G I ATA N
B E L A J A R 1 D I H A R A P K A N P E S E RTA
D I D I K D A PAT :

1. MEMAHAMI TEKNIK ANIMASI

TWEENING
2 . M E M B U AT A N I M A S I 2 D I M E N S I
MENGGUNAKAN TEKNIK
TWEENING
KEGIATAN BELAJAR 1
 PENGERTIAN TWEENING
PROSES • BENTUK
TWEENING
PERUBAHAN • POSISI

Fungsi utama
Tweening:
untuk Menentukan :
FRAME-FRAME ADOBE
menggerakkan FLASH
keyframe awal dan
BARU
objek dari satu keyframe akhir
titik ke titik
lainnya.
CARA KERJA TWEENING
KEADAAN MENENTUKAN KEADAAN
OBYEK OBYEK
AWAL AKHIR
RANGKAIAN
GERAKAN
ADOB
E
FLASH
Animasi dengan gerakan yang halus, perubahan
letak, ukuran, rotasi, bentuk maupun warna.
MACAM-MACAM TEKNIK TWEENING 2D

Animasi motion tween Animasi shape tween

Masking Animasi motion guide

PENENTUAN FRAME KUNCI ( KEYFRAME )
ANIMASI
1. TIMELINE
Timeline berisi layer dan frame yang berfungsi untuk
mengontrol objek yang akan dianimasikan

2. LAYER
Layer seperti lembaran-lembaran film yang berisi
gambar actor yang akan dianimasi
3.FRAME
Frame yaitu kumpulan gambar yang dimainkan secara berurutan
dengan kecepatan tertentu, sehingga gambar tersebut terlihat bergerak .
5. KEYFRAME
frame untuk menentukan perubahan pada tombol atau animasi.

6.Blank Keyframe
frame kosong untuk diisi objek baru
TEKNIK ANIMASI
MOTION TWEEN
Prinsip kerja Animasi Motion Tween

Objek : Membuat :
• objek instance animasi objek
(simbol) bergerak, berputar,
• group dan mengubah
• teks. ukuran (skala).
OBYEK OBYEK
FRAME
FRAME FRAME
AWAL
OTOMATIS AKHIR
LANGKAH-LANGKAH MEMBUAT
ANIMASI MOTION TWEEN
SEDERHANA :

1. Pada OS Windows
10, di bagian
search windows
ketik kata kunci
Flash. Lalu klik
tulisan Adobe
Flash
 3. Pada menu Propeties
tentukan size atau ukuran
stage 550 x 400 pixel, warna
2. Pada menu awal di Background Putih dan
bagian create New, jumlah Frame per detik 24.
pilih ActionScript 2.0
4. Ubahlah nama untuk
Layer 1 dengan nama
layer “Bola”.
6. Dengan Oval Tool buatlah
5. Seleksi frame 1 pada layer lingkaran seperti pada
Bola gambar dan letakkan
gambar bola di stage
sebelah kiri.
7. Klik kanan frame 8
layer Bola dan pilih
Insert Keyframe
8. Drag gambar bola yang
berada di frame 8, geser
ke sebelah kanan stage.

9. Klik kanan di antara frame 1 dan 8,

pilih Create Classic Tween
10.Cek hasil Movie dengan menekan Ctrl + Enter
Keberhasilan ditentukan oleh
99 % perbuatan dan hanya 1
% pemikiran.

ALBERT EINSTEIN
MISI KELOMPOK :
Silahkan membentuk kelompok. Tiap kelompok membuat animasi
menggunakan teknik animasi Motion Tween menggunakan Software
Adobe Flash dengan obyek pesawat terbang dan background berbeda.
Kemudian silahkan lakukan langkah-langkah berikut:
1. Buka file baru pada software Flash.
2. Buatlah animasi gerakan box menggunakan teknik Animasi
Motion Tween.
3. Demonstrasikan hasil animasi gerakan box yang telah dibuat di depan
kelas dan kumpulkan laporan langkah-langkah hasil praktek.
KESIMPULAN
 Tweening adalah proses membuat sebuah animasi
pergerakan dengan cara memberikan perubahan pada
bentuk atau posisi objek dengan menentukan
keyframe awal dan akhir sehingga dapat terbentuk
frame-frame baru.
 Fungsi utama tweening adalah untuk menggerakkan
obyek dari satu titik ke titik lainnya.
KELEBIHAN ANIMASI MOTION TWEEN

 digunakan untuk membuat gerakan animasi yang

teratur.
 Animasi ini sangat mengurangi waktu karena tidak
perlu membuat animasi secara frame per frame.
 mengurangi pekerjaan mengambar
 meminimalkan ukuran file karena isi dari setiap
frame tidak perlu disimpan.
REFLEKSI

1.Jelaskan apa yang dimaksud dengan Tweening

?
2.Jelaskan fungsi utama Tweening ?
3.Sebutkan kelebihan penggunaan teknik
Motion Tween !
4.Jelaskan prinsip kerja dari animasi motion
tween !
 KEGIATAN BELAJAR 2

TEKNIK ANIMASI
SHAPE TWEEN
KOMPETENSI DASAR

3.3 MENERAPKAN TEKNIK ANIMASI

TWEENING 2D

4.3 MEMBUAT ANIMASI 2D

MENGGUNAKAN TEKNIK TWEENING
 TUJUAN PEMBELAJARAN

S E T E L A H M E N G I K U T I K E G I ATA N
B E L A J A R 2 D I H A R A P K A N P E S E RTA
D I D I K D A PAT :

1. MEMAHAMI TEKNIK ANIMASI

SHAPE TWEEN
2 . M E M B U AT A N I M A S I 2 D I M E N S I
MENGGUNAKAN TEKNIK
SHAPE TWEEN
PENGERTIAN ANIMASI SHAPE TWEEN
OBYEK OBYEK
PERUBAHAN
FRAME FRAME
AWAL
BENTUK AKHIR
CARA KERJA ANIMASI SHAPE TWEEN

SHAPE
TWEEN

OBYEK OTOMATIS OBYEK

FRAME AWAL FRAME AKHIR
LANGKAH-LANGKAH MEMBUAT
ANIMASI SHAPE TWEEN
SEDERHANA :

1. Pada OS Windows
10, di bagian
search windows
ketik kata kunci
Flash. Lalu klik
tulisan Adobe
Flash
 3. Pada menu Propeties
tentukan size atau ukuran
stage 550 x 400 pixel,
2. Pada menu awal di warna Background Putih
dan jumlah Frame per detik
bagian create New,
24.
pilih ActionScript
2.0
4. Buatlah objek segi
empat pada layer 1
frame 1.
4. Kemudian klik kanan di layer 1 pada frame 15 >> Insert
Blank Keyframe.
5. Buat objek lingkaran pada layer 1 keyframe 15 tersebut.
6. Klik kanan pada frame
antara keyframe 1 dan
15, lalu klik kanan
pilih Create Shape
Tween.

7. Tekan Ctrl+Enter
Belajar dari kemarin, hidup untuk
sekarang, berharap untuk besok. Hal
yang paling penting adalah jangan
berhenti bertanya.

Asli:
Learn from yesterday, live for today,
hope for tomorrow. The important
thing is not to stop questioning.
MISI KELOMPOK :
Silahkan membentuk kelompok. Tiap kelompok membuat
animasi Shape Tweening menggunakan software Adobe
Flash. Kemudian silahkan lakukan langkah-langkah berikut:
1. Buka file baru pada software flash
2. Buatlah obyek tulisan I Love U dan beri background sesuai
kreasi yang diinginkan.
3. Presentasikan hasil animasi yang telah dibuat di depan
kelas dan kumpulkan laporan langkah-langkah hasil
praktik.
KESIMPULAN

Shape Tween adalah perubahan bentuk

dari suatu obyek ke obyek lain bahkan
untuk perubahan warna
REFLEKSI

1. Jelaskan pengertian dari Shape Tween ?

2. Jelaskan hal apa saja yang harus diperhatikan
dalam membuat animasi shape tweening ?
3. Bagaimana langkah-langkah dalam
membuat animasi shape tweening?
TEKNIK MASKING
KOMPETENSI DASAR

3.3 MENERAPKAN TEKNIK ANIMASI

TWEENING 2D

4.3 MEMBUAT ANIMASI 2D

MENGGUNAKAN TEKNIK TWEENING
 TUJUAN PEMBELAJARAN

S E T E L A H M E N G I K U T I K E G I ATA N
B E L A J A R 3 D I H A R A P K A N P E S E RTA
D I D I K D A PAT :

1. MEMAHAMI TEKNIK ANIMASI

MASKING
2 . M E M B U AT A N I M A S I 2 D I M E N S I
MENGGUNAKAN TEKNIK
MASKING
PENGERTIAN MASKING
intinya menampilkan objek yang semula di
sembunyikan

MASK
2 metode dasar yaitu :
1. Area masking yang bergerak, objek yang di mask diam.
2. Area masking yang diam dan objek yang di mask yang
bergerak.
PRINSIP KERJA MASKING

Menampilkan bidang
yang tertutup dan
menyembunyikan
bidang yang terbuka.
LANGKAH-LANGKAH MEMBUAT
ANIMASI MASKING
SEDERHANA :

1. Pada OS Windows
10, di bagian
search windows
ketik kata kunci
Flash. Lalu klik
tulisan Adobe
Flash
 3. Pada menu Propeties
tentukan size atau ukuran
stage 550 x 400 pixel,
2. Pada menu awal di warna Background Putih
dan jumlah Frame per detik
bagian create New,
24.
pilih ActionScript
2.0
4. Tambahkan layer baru
sehingga di time line
terdapat 2 buah layer,
yaitu Layer 1 dan
Layer 2.
5. Ubahlah dengan nama
"Obyek" dan
"Masking"
6. Klik pada frame 1 layer "Obyek", kemudian buat teks
"Adobe Flash Professional CS6".
7. Lalu klik kanan frame 30 dan pilih Insert Frame.
8. Pada layer masking buatlah sebuah persegi panjang, dan
letakkan di sebelah kiri teks
9. klik kanan pada obyek persegi panjang, pilih Convert To
Symbol. Setelah tampil jendela Convert To Symbol, pilih type
graphic atau Movie Clip dan klik Ok.
10.Klik kanan frame 30 layer "Masking" kemudian pilih Insert
Keyframe. Geser obyek persegi panjang tersebut sampai
posisi sebelah kanan teks.
11.Di antara frame 1 - 30 layer "Masking" klik kanan frame,
dan pilih Create Classic Tween.
12. Klik kanan pada layer "Masking" dan pilih Mask.
13.Klik Ctrl + Enter
Banyak orang mengatakan kepintaran
yang menjadikan seseorang Ilmuwan
besar. Mereka keliru..
itu adalah karakter.

Asli:
Most people say that it is the intellect which
makes a great scientist. They are wrong: it
is character.
MISI KELOMPOK : MULTIMED
IA
Silahkan membentuk kelompok. Tiap kelompok membuat
animasi Masking menggunakan software Adobe Flash.
Kemudian silahkan lakukan langkah-langkah berikut:
1. Buka file baru pada software flash
2. Buatlah obyek tulisan Multimedia dan beri background
sesuai kreasi yang diinginkan.
3. Presentasikan hasil animasi yang telah dibuat di depan
kelas dan kumpulkan laporan langkah-langkah hasil
praktik.
KESIMPULAN
 Masking adalah animasi yang menyembunyikan atau menutupi
suatu obyek dengan obyek lain, sehinga obyek yang menutupi
terlihat transparan dan menyatu dengan obyek yang ditutupi.
 Fungsi Masking dalam Animasi : sama seperti fungsi
topeng dalam arti yang sebenarnya; digunakan untuk menutupi
bagian-bagian obyek yang ingin ditutupi dan hebatnya yang
menutupinya tidak akan terlihat juga.
 Prinsip kerja masking adalah menampilkan bidang yang
tertutup dan menyembunyikan bidang yang terbuka.
REFLEKSI

1.Jelaskan pengertian masking ?

2.Jelaskan fungsi dari animasi masking?
3.Jelaskan Prinsip kerja animasi
masking?
ANIMASI MOTION
GUIDE
KOMPETENSI DASAR

3.3 MENERAPKAN TEKNIK ANIMASI

TWEENING 2D

4.3 MEMBUAT ANIMASI 2D

MENGGUNAKAN TEKNIK TWEENING
 TUJUAN PEMBELAJARAN

S E T E L A H M E N G I K U T I K E G I ATA N
B E L A J A R 4 D I H A R A P K A N P E S E RTA
D I D I K D A PAT :

1. MEMAHAMI TEKNIK ANIMASI

MOTION GUIDE
2 . M E M B U AT A N I M A S I 2 D I M E N S I
MENGGUNAKAN TEKNIK
MOTION GUIDE
PENGERTIAN ANIMASI MOTION GUIDE

Animasi yang mempunyai

gerakan sesuai dengan jalur
yang ingin dibuat.
LANGKAH-LANGKAH MEMBUAT
ANIMASI MOTION GUIDE
SEDERHANA :

1. Pada OS Windows
10, di bagian
search windows
ketik kata kunci
Flash. Lalu klik
tulisan Adobe
Flash
 3. Pada menu Propeties
tentukan size atau ukuran
stage 550 x 400 pixel,
2. Pada menu awal di warna Background Putih
dan jumlah Frame per detik
bagian create New,
24.
pilih ActionScript
2.0
CARA MEMBUAT :
4. Pilih Oval tool (O)
pada toolbox dan
buat objek lingkaran
dan warna fiil objek
harus berbeda dari
warna background
stage
5. Kemudian klik kanan di frame ke-1, pilih Create motion
tween
6. Pada frame ke-10 klik kanan kita pilih Keyframe,,
kemudian kita geser lingkaran ke kanan
7. Kemudian klik kanan layer 1 kemudian pilih Add Motion
Guide maka akan muncul layer baru seperti tampak pada
gambar.
8. Kemudian dengan layer guide masih terseleksi kita pilih
Pencil Tool untuk membuat jalur yang akan menjadi
lintasan animasi dari lingkaran.
9. Agar objek lingkaran dapat bergerak sesuai jalur, maka
tengah objek haruslah berada di tengah jalur.
10.Klik frame 1 layer 1, Kemudian pilih Free TransformTool
agar bulatan tengah objek terlihat. Kemudian pindahkan
objek sampai lingkaran tengah objek berada di ujung awal
jalur.
11.Klik frame 40 layer
1, pilih Free
Transform Tool agar
bulatan tengah objek
terlihat. Kemudian
pindahkan objek
sampai lingkaran
tengah objek berada
di ujung akhir jalur.
12.Kemudian tekan
ctrl+Enter
MISI KELOMPOK :

Silahkan membentuk kelompok. Tiap kelompok membuat

animasi Masking menggunakan software Adobe Flash.
Kemudian silahkan lakukan langkah-langkah berikut:
1. Buka file baru pada software flash
2. Buatlah obyek kepala kelinci dan beri background sesuai
kreasi yang diinginkan.
3. Presentasikan hasil animasi yang telah dibuat di depan
kelas dan kumpulkan laporan langkah-langkah hasil
praktik.
Logic will get you from A to B - Imagination will
take you everywhere.
Artinya :
Nalar hanya akan membawa anda dari A menuju B, namun
imajinasi mampu membawa anda dari A ke manapun.
- Albert Einstein-
KESIMPULAN
 Animasi motion guide adalah animasi yang
mempunyai gerakan sesuai dengan jalur
yang kita buat.
 Animasi ini sangat cocok digunakan untuk
jenis animasi yang membutuhkan ketelitian
dalam pergerakan yang dikehendaki atau
sesuai keinginan pembuat animasi.
 Dalam Motion Guide, tengah obyek harus
berada di tengah (jalur).
REFLEKSI

1.Jelaskan pengertian Animasi motion

guide?
2.Jelaskan langkah-langkah dalam
membuat animasi motion guide?
THANK TOU