Kode Mata Kuliah MJ-211 Nama Mata Kuliah Praktikum Animasi 2D Minggu 4 Topik Animasi 2D Dasar –Tweening Motion

Kode Mata Kuliah

MJ-211

Nama Mata Kuliah

Praktikum Animasi 2D

Minggu

4

Topik Animasi 2D Dasar –Tweening Motion

Tujuan Mahasiswa mengetahui konsep tweening motion tanpa dan menggunakan path

Tempat Pengumpulan Learning

Tweening

Tweening motion digunakan untuk mengubah property (keadaan dari symbol, bias movie clip, button atau grafik) pada kurun waktu tertentu, ingat konsep metamorphosis?. Tweening motion dapat digunakan untuk mengubah posisi _x dan _y, transparansi, ukuran symbol dsb.

Tweening terbagi menjadi dua yaitu tweening yang tidak menggunakan path dan yang menggunakan path dalam membuat kesan adanya lintasan pergerakan symbol. .

I. Tweening non path Berikut adalah latihan untuk membuat tweening motion dasar (yang tidak memakai lintasan) 1.1 Animasi sederhana

Kita akan membuat animasi sederhana yang menunjukkan lingkaran merah yang bergerak dari kiri ke kanan.

1. Create a new FLA 2. Gambar lingkaran merah dan tempatkan pada posisi kiri atas dari scene. Seperti gambar berikut.

3. Klik kanan frame pertama dari timeline dimana lingkaran merah berada. Pilih “create motion tween.

Hasil yang sama juga diperoleh dengan klik Insert / Timeline / Create motion tween

Dengan creating motion tween pada frame pertama, maka posisi tersebut sebagai titik awal dari animasi.

4. Klik kanan pada frame 15 dan pilih Insert Keyframe dari menu drop down. Hal ini berarti bahwa titik tersebut adalah titik akhir dari animasi.

Tugas 1: kumpulkan filenya dengan nama tugas_1_XXX.fla

1.2 Titik-titik intermediate multiple

Tidak hanya membuat animasi dari titik A ke titik B, Kita juga bisa membuat banyak titik-titik tengah

(intermediate) supaya lebih baik dan halus.

1. Create a dokumen flash 400x400 dengan frame rate 24

2. Gambar lingkaran dan pindahkan ke pojok kiri atas seperti gambar

3. Pada frame pertama create a motion tween

4. Buat 4 keyframe dan pada titik waktu tersebut pindahkan lingkaran ke sudut dari scene seperti

gambar berikut.

Perhatikan pada last keyframe terletak pada frame ke 49 karena pada frame 50 posisi lingkaran sama dengan posisi pada frame 1.

5. Easing in and easing out

Kita dapat menambahkan efek slow down dan akselerasi ke animasi dengan menggunakan property easing in dan easing out pada masing-masing key frame. Slider easing in dan out dapat ditemukan pada panel property setelah memilih key frame pada time line.

Pada kasus di atas , kita tidak perlu mengeset nilai easing out pada frame 49 karena sudah ada pada frame 1. Jika ease in nilainya di atas 0 sedangkan ease out nilainya di bawah 0.

Tugas 2: kumpulkan dengan nama file tugas2_XXX.fla

1.3 Tweening Motion tidak hanya untuk pergerakan

Tweening Motion dapat digunakan untuk membuat animasi dengan mengubah property dari symbol di stage. Tugas 3, ubahlah property dari symbol lingkaran pada frame ke 1,15 dan 30. Masing-masing

Tugas 3: kumpulkan dengan nama file tugas3_XXX.fla

Buatlah masing-masing jadi satu file untuk masing masing konfigurasi transparency, scaling dan tint di bawah ini.

Aspek transparency

frame 1 : ease -100 red circle : alpha 100%

frame 15 : ease 100 red circle : alpha 0%

frame 30 : ease 0 red circle : alpha 100%

Scaling frame 1 : ease -100

red circle :scale 100%

frame 15 : ease 100 red circle : scale 50%

frame 30 : ease 0 red circle :scale 100%

Tint frame 1 : ease -100 red circle : original color

frame 15 : ease 100 red circle : tint Red:153 Green:255 Blue:0 Tint amount: 100%

frame 30 : ease 0 red circle : original color

II. Tweening Dengan path 2.1. Latihan 1

Tweening motion menggunakan path (lintasan) sangat berguna ketika kita membuat movie clip yang mengikuti lintasan tertentu pada layar.

1. Create a new FLA 2. Buat gambar ukuran 40x40 dan taruhkan pada posisi kiri atas dari scene

3. Buat create motion seperti biasanya.

Atau dengan Insert / Timeline / Create motion tween (fig3)

4. Klik kanan pada frame 15 dan Insert Keyframe dari menu drop down.

5. Klik kanan layer dimana lingkaran berada dan select "Add Motion guide", Kita dapat juga dapat mengaksesnya dengan Insert / Timeline / Motion guide.

Perhatikan bahwa kita telah mempunyai layer yang dinamakan "Guide: name of the layer below" yang terletak di atas layer dimana lingkaran berada. Dalam kasus ini nama layernya adalah Guide : sphere Layer guide adalah layer dimana kita akan menggambar path /lintasan untuk lingkaran kita bergerak mengikuti jalurnya

6. Select frame pertama dari layer guide dan seleksi pen tool Pastikan memilih option "Smooth" untuk jlaur pada panel option

Gambar kurva yang bagus ke arah kanan bawah stage. Seperti gambar berikut

Perhatikan bawah lingkaran pada posisi di awal jalur . 7. Kita buat last keyframe dari tween motion pada layer dimana lingkaran berada dan pindahkan lingkaran ke titik akhir dari jalur yang telah digambar.

Coba lihat hasilnya. Jika anda ingin lebih halus, panjangkan framenya menjadi 60 dengan frame rate 24.

Membuat perubahan arah putaran pada pergerakan sepanjang jalur Misalkan lingkaran tadi diberi titik biru yang merepresentasikan serangga kecil. Maka dengan program di atas terlihat (kepala) serangga bergerak tidak mengikuti lintasan walaupun secara keseluruhan badannya mengikuti lintasan . Untuk itu diperlukan teknik agar seluruh badan dan kepala serangga mengikuti jalur lintasan. Caranya adalah.

1. Pilih frame pertama dari layer (bukan layer guide) 2. Pada tab property frame check Orient to path.

Lihat hasilnya! Tugas 4: Simpan pada tugas4_XXX.fla

2.2. Latihan 2 1. Siapkan objek animasi

Setiap objek akan diinterpolasikan pada layer-layer yang berbeda dan objek harus berupa symbol! Jika anda belum mempunyai symbol, buat dengan cara a. Create new layer b. Buat gambar c. Klik kanan gambar (atau gabungan gambar), pilih create symbol. Pilihlah sebaiknya

movie clip

2. Buat animasi interpolasi (tween motion)

• Pilih objek yang ada di stage (atau drag symbol dari library ke stage), • Klik kanan Right-click (Windows) or Ctrl-click (Macintosh) atau pada frame sekarang pilih

Create Motion Tween.

Flash akan membuat span motion tween span dengan interpolasi 24 frame. Defaultnya default 24 frames (.satu detik pada frame rate of 24 FPS). 3. Create the motion path Kontrol (slider) pada timeline (scenario) berada pada last frame. Sekarang gerakan objek ke posisi baru. Jalur motion / motion path (trajectory) terlihat pada scene. The motion path memperlihatkan trajectory of gambar yang terinterpolasi sepanjang tween span. Untuk sekarang kita hanya melihat garis lurus yang menghubungkan antara frame 1 ke frame terakhir. Kita dapat mengubah interpolasi untuk membuat jalur interpolasi yang lain.

4. Atur panjang dan extens layer yang lain

Untuk mengatur durasi: Drag titik akhir dari twee span untuk mempanjang atau mempendek tween span (bisa ke kanan atau ke kiri).

5. Namun jika ingin mengatur panjang layer sebaiknya atur juga panjang layer yang terkait misalnya layer background dsb.. Untuk itu klik layer layer yang akan diubah, klik last frame dan tekan F5.

6. Adjust path

Ada dua cara:

a. Tambahkan keyframe untuk posisi intermediate. Select frame, drag objek ke posisi yang diingingkan (misalnya di tengah). Gambar diamond kecil pada layer tween mengindikasikan sebuah keyframe. Motion path akan berubah setelahnya.

b. Langsung ubah lintasannya saja. Perlu diingat framenya harus dipilih dulu baru objeknya diatur.

7. Transformasi objek

Dalam setiap key frame, kita dapat membuat perubahan. Namun perlu diingat bahwa perubajan tersebut hanya berlaku untuk objek bukan untuk symbolnya. Oleh karena itiu, penggunaan tool drawing tidak bisa bekerja. Untuk itu, kita menggunaka dua tipe transformasi.

• Mengubah ukuran rotasi • Mengubah hue (color effect)

Untuk kedua tipe tersebut ,lakukan langkah berikut:

• Select frame atau blank keyframe, kemudian klik objek • Ubah nilai pada panel properti (Ctrl-F3 if not already visible).

Atau gunakan Free Transfom Tool

8. Other Adjustments

Animasi yang dihasilkan mungkin bisa terlalu cepat. Untuk menguranginya ada beberapa opsi:

• Kurangi frame rate (fps). Default CS4 use 24. Klik di luar stage dan ubah nilai pada property panel..

• Perpanjang span misalnya 60 frames. Tekan layer tween adan tekan F5. • Coba atur lagi posisi matahari sehingga bisa bergerak pada jalur yang lebih baik.

Tugas 5: kumpulkan dengan nama file tugas5_XXX.fla 2.3 Latihan 3

Editor memungkinkan untuk memindahkan semua operasi yang sulit dilakukan di stage

1. Open Motion Editor

• Windows Menu -> Motion Editor • It is advisable not to fix it within the workspace, because it contains a lot of controls. Pull the

panel until you see everything.

2. Adjust the visible frames

Pada bagian Kiri Bawah: Adjust the "Visible Frames" ke necessary maximum.

Kita dapat melakukan hal berikut, misalnya:

• Adjust posisi X di keyframe mengatur kontrol (atau by memasukan coordinate yang tepat) • Fit transform • Klik kanan pada keyframe untuk menghapus • Memindahkan secara lateral sebuah keyframe di Timeline 2.4 Latihan 4 : Kontrol motion editor

Kontrol-kontrol tool ini tidak sulit dipelajari. Hanya tahu kalau moving up berarti menaikan , moving down berarti menurunkan nilainya. Memindahkan secara lateral berarti memindahkan ke scenario (time line).

A. Property values (for editing finely ...) B. Reset Values button (back, takes everything as a group) C. Playhead (to move in the timeline) D. Property area curve E. Previous Keyframe button (keyframe preceding navigated) F. Add or Remove Keyframe button (add or remove a keyframe). Otherwise right-click. G. Next Keyframe button (keyframe navigated suvi)

2.5 Latihan 5 : Layout Animasi

2.5.1 Editing Curve

Kita telah tahu bawah menambah sebuah keyframe dengan tiga cara yang berbeda:

• Klik kanan dalam sebuah dan select type.

• Gerakan symbol pada motion layer time line • Menggunakan editor motion

Untuk mengedit kurva jalur (path) , terdapat beberapa kemungkinan

• Pada layer motion, go to seleksi

• Manipulasi titik –titik control pada jalur motion dengan tool pen dan toll subseleksi • Go to editor motion and

Dengan menu klik kanan mouse kita dapat melakukan yang halus dan sebaliknyaadalah titik sudut tanpa ada control dari parameter fungsi Bezier untuk mene

Latihan 5 : Layout Animasi

Kita telah tahu bawah menambah sebuah keyframe dengan tiga cara yang berbeda:

sebuah frame kosong pada time line. Kemudian select Insert Keyframe

pada motion layer time line motion

Untuk mengedit kurva jalur (path) , terdapat beberapa kemungkinan:

, go to sebuah frame and pindahkan symbol dengan tool seleksi atau sub

titik control pada jalur motion dengan tool pen dan toll subseleksi motion and gerakan titik-titik control naik atau turun

Dengan menu klik kanan mouse kita dapat melakukan transformasi titik-titik tajama. Sebuah "smooth point" memperhalus kurva.. Sebuah titik tajam

adalah titik sudut tanpa ada control dari "Bezier" smoothing. Bezier smoothing adalah parameter fungsi Bezier untuk menentukan kelembutan sudut dari benda

Kita telah tahu bawah menambah sebuah keyframe dengan tiga cara yang berbeda:

Insert Keyframe

dengan tool seleksi atau sub

titik control pada jalur motion dengan tool pen dan toll subseleksi

tajam menjadi titik Sebuah titik tajam

Bezier smoothing adalah

2.5.2 Cara mengganti animasi path

Ada dua kemungkinan:

(1) Menggunakan Flash Motion presets.

• Open panel Window-> Motion Presets• Play dengan versi yang berbeda • Click on Apply (Flash akan menanyakan apakah kita akan mengg

(2) Copy / paste sebuah garis/line

• Pada layar yanag lain, gambar jalur / Gunakan tool pencil.

• Copy dan paste jalur/ path

Tips: Jika kita ingin sebuah lingkaran, bintang yang sempurna, gambr menggunakan tool oval, polystar dsb tanpa fill. Gunkan eraser untuk menghapus garis kecil sehingga terbentuk path dengan adanya awal dan akhir

Cara mengganti animasi path

Motion presets.

> Motion Presets dengan versi yang berbeda

akan menanyakan apakah kita akan mengganti rute yang lampau

sebuah garis/line

Pada layar yanag lain, gambar jalur / path, dengan sebuah awal dan akhir dan no fills mis.

path tersebut ke layer motion tween layer (buang jalur

Jika kita ingin sebuah lingkaran, bintang yang sempurna, gambr menggunakan tool oval, polystar dsb tanpa fill. Gunkan eraser untuk menghapus garis kecil sehingga terbentuk path dengan adanya awal dan akhir

anti rute yang lampau)

dengan sebuah awal dan akhir dan no fills mis.

buang jalur yang lama).

Jika kita ingin sebuah lingkaran, bintang yang sempurna, gambr menggunakan tool oval, polystar dsb tanpa fill. Gunkan eraser untuk menghapus garis kecil sehingga terbentuk path

Tugas 6: kumpulkan dengan nama file Tugas6_XXX.fla

Ucapkan syukur kepada Tuhan.. jika sudah berjalan dengan baik…