Prak 15 – Animasi menggunakan Programming

1. Tujuan
Mengenal bentuk lain pembuatan animasi. Yaitu pembuatan animasi menggunakan programming.

2. Alat
Adobe Flash Professional CS3+
(diuji di Flash CC)

3. Bahan
Flint Particle Engine
Download file tersebut kemudian extract. Ambil file “Flint2d_4.0.1.swc”

4. Dasar Teori
Membuat animasi bisa dilakukan dengan berbagai cara. Salah satunya dengan menggunakan programming. Salah satu bentuk programming untuk membuat animasi adalah Particle System.

5. Tugas Praktikum
Lakukan petunjuk praktikum yang diberikan
Ubah posisi dari animasi tersebut
Ubah warna dari animasi tersebut
Ubah radius dari animasi tersebut
Ubah posisi animasi tersebut setiap kali muncul

6. Petunjuk Praktikum
Buat project ActionScript 3
Buka action window dengan menekan tombol “actions” pada panel di sebelah kanan
Salin kode berikut pada “actions” window

import org.flintparticles.common.actions.*;
import org.flintparticles.common.counters.*;
import org.flintparticles.common.displayObjects.Dot;
import org.flintparticles.common.easing.Quadratic;
import org.flintparticles.common.events.EmitterEvent;
import org.flintparticles.common.initializers.*;
import org.flintparticles.twoD.actions.*;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.*;
import org.flintparticles.twoD.renderers.*;
import org.flintparticles.twoD.zones.*;

var emitter:Emitter2D = new Emitter2D();

emitter.counter = new Blast( 700 );

emitter.addInitializer( new SharedImage( new Dot( 2 ) ) );
emitter.addInitializer( new ColorInit( 0xFFFFFF00, 0xFFFF6600 ) );
emitter.addInitializer( new Velocity( new DiscZone( new Point( 0, 0 ), 200, 120 ) ) );
emitter.addInitializer( new Lifetime( 5 ) );

emitter.addAction( new Age( Quadratic.easeIn ) );
emitter.addAction( new Move() );
emitter.addAction( new Fade() );
emitter.addAction( new Accelerate( 0, 50 ) );
emitter.addAction( new LinearDrag( 0.5 ) );

emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart, false, 0, true );

var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 400 ) );
renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.95,0 ] ) );
renderer.addEmitter( emitter );
addChild( renderer );

emitter.x = 250;
emitter.y = 150;
emitter.start();

function restart( ev:EmitterEvent ):void
{
Emitter2D( ev.target ).start();
}

Buka “ActionScript Setting”
Pilih tab “Library Path” klik icon “Browse to SWC”
Pilih file swc “Flint2d_4.0.1.swc”
Pastikan file swc tersebut muncul pada daftar
Tekan “OK” kemudian jalankan movie-nya (Test Movie, Ctrl + Enter)

7. Hasil Praktikum

8. Kesimpulan

Pada praktikum kali ini, hanya sampai pada tugas ke 4 saja. Dikarenakan kendala pada file yang tidak bisa di export

9. Referensi
Create Fireworks animation using Flint Particle Engine

http://www.mohhasbias.com/

Prak 14 – Shape Tween

1. Tujuan
Menguasai penggunaan tool bernama Shape Tween.

2. Alat
Adobe Flash Professional CS6

3. Bahan
Logomotion

4. Dasar Teori
Shape tween adalah tool yang memungkinkan penganimasian perubahan bentuk antar dua keyframe secara otomatis

5. Tugas Praktikum
Buatlah tiruan dari animasi

6. Petunjuk Praktikum
Silahkan tirukan animasi tersebut sebaik mungkin

7. Hasil Praktikum

8. Kesimpulan
Pada praktikum kali ini, kedua animasi telah selesai. Tapi mungkin ada sedikit perbedaan kemiripan karena faktor gambar yang berbeda.

9. Referensi
Shape Tween

http://www.mohhasbias.com/

Prak 13 – Shape Tween

1. Tujuan
Menguasai penggunaan tool bernama Shape Tween.

2. Alat
Adobe Flash Professional CS6

3. Bahan
Logomotion

4. Dasar Teori
Shape tween adalah tool yang memungkinkan penganimasian perubahan bentuk antar dua keyframe secara otomatis

5. Tugas Praktikum
Buatlah tiruan dari animasi berikut
1.
2.

6. Petunjuk Praktikum
Silahkan tirukan animasi tersebut sebaik mungkin

7. Hasil Praktikum

8. Kesimpulan

Praktikum kali ini, membuat shape tween menggunakan logo 1 dan ke 2 seperti yang dicontohkan diatas. Logo 1 membuat lingkaran berwarna putih yang kemudian berubah menjadi logo national geographic berwarna kuning begitu pula logo 2

9. Referensi
Shape Tween

Prak 12 – Shape Tween

1. Tujuan
Mengetahui, menguasai, dan mengaplikasikan fitur shape tween pada Adobe Flash CS 6

2. Alat
Adobe Flash Professional CS 6

3. Bahan
Contoh pengaplikasian shape tween menggunakan logo seperti logo apple, windows, national geographic, nike dan gom player

4. Dasar Teori
Shape Tween

5. Tugas Praktikum
Buatlah pengaplikasian fitur shape tween dengan logo

6. Petunjuk Praktikum
A. Mulailah dari traching logo
B. Insert keyframe di frame ke-12

C. Buat logo lain di frame ke-13

D. Create shape tween diantara frame ke-1 sampai ke-12

7. Hasil Praktikum
https://youtu.be/W8-G7Yll8X0

8. Kesimpulan
Dari praktikum kali ini, saya dapat mengaplikasikan fitur shape tween. Membuat shape tween dengan logo pple, windows, national geographic, nike dan gom player

9. Referensi
http://www.mohhasbias.com/

Prak 11 – Masking

1. Tujuan
Mengetahui, menguasai, dan mengaplikasikan fitur mask pada Adobe Flash CS 6

2. Alat
Adobe Flash Professional CS 6

3. Bahan
Contoh pengaplikasian mask pada beberapa logo seperti pada Bluefish

4. Dasar Teori
A. Classic Tween
B. Mask

5. Tugas Praktikum
Buatlah pengaplikasian fitur masking pada bendera berkibar dan logo Bluefish

6. Petunjuk Praktikum
A. Mulailah dari membuat tulisan
B. Buatlah genangan air di bawah layer tulisan
C. Insert keyframe
D. Klik masking pada layer tulisan

7. Hasil Praktikum

8. Kesimpulan
Dari praktikum kali ini, saya dapat membuat masking pada Adobe Flash.

9. Referensi
http://www.mohhasbias.com/

Prak 10 – Remake “One Little Finger” by Super Simple Song (Part 4)

1. Tujuan
Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

2. Alat
Adobe Flash Professional CS6

3. Bahan
One little finger by super simple song

4. Dasar Teori
A. Classic Motion Tween
B. Graphic Symbol
C. Movie Clip Symbol and Filters

5. Tugas Praktikum
Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

6. Petunjuk Praktikum
Mulailah dari bentuk animasi yang sederhana seperti gerakan title opening dan gerakan awan.

7. Hasil Praktikum
https://www.youtube.com/watch?v=yvVxZ_DlKA4

8. Kesimpulan
Pada praktikum kali ini, hasil dari praktikum sebelumnya ditambah lagi adanya cartoon yang telah berjalan, berbalik dan menggoyangkan jarinya.

9. Referensi
Motion Tween
Graphic Symbol
Graphic Filters

Prak 9 – Remake “One Little Finger” by Super Simple Song (Part 3)

1. Tujuan
Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

2. Alat
Adobe Flash Professional CS6

3. Bahan
One little finger by super simple song

4. Dasar Teori
A. Classic Motion Tween
B. Graphic Symbol
C. Movie Clip Symbol and Filters

5. Tugas Praktikum
Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

6. Petunjuk Praktikum
Mulailah dari bentuk animasi yang sederhana seperti gerakan title opening dan gerakan awan.

7. Hasil Praktikum
https://youtu.be/6PPH3slstqE

8. Kesimpulan
Pada praktikum kali ini, hasil dari praktikum sebelumnya ditambah lagi traching dan sedikit cartoonnya

9. Referensi
Motion Tween
Graphic Symbol
Graphic Filters

Prak 8 – Remake “One Little Finger” by Super Simple Song (Part 2)

1. Tujuan
Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

2. Alat
Adobe Flash Professional CS6

3. Bahan
One little finger by super simple song

4. Dasar Teori
A. Classic Motion Tween
B. Graphic Symbol
C. Movie Clip Symbol and Filters

5. Tugas Praktikum
Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

6. Petunjuk Praktikum
Mulailah dari bentuk animasi yang sederhana seperti gerakan title opening dan gerakan awan.

7. Hasil Praktikum
https://youtu.be/jH4aExQQNM8

8. Kesimpulan
Pada praktikum kali ini, hasil dari praktikum sebelumnya ditambah lagi adanya transisi dan input musiknya

9. Referensi
Motion Tween
Graphic Symbol
Graphic Filters

Prak 7 – Remake “One Little Finger” by Super Simple Song (Part 1)

1. Tujuan
Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

2. Alat
Adobe Flash Professional CS6

3. Bahan
One little finger by super simple song

4. Dasar Teori
A. Classic Motion Tween
B. Graphic Symbol
C. Movie Clip Symbol and Filters

5. Tugas Praktikum
Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

6. Petunjuk Praktikum
Mulailah dari bentuk animasi yang sederhana seperti gerakan title opening dan gerakan awan.

7. Hasil Praktikum
https://youtu.be/1cfjDzig1Uk

8. Kesimpulan
Pada praktikum kali ini, hanya sampai pada background, 2 pohon, awan bergerak dan title yang bergerak ke bawah bagian kiri.

9. Referensi
Motion Tween
Graphic Symbol
Graphic Filters

Prak 6 – Walk Cycle using Tween

1. Tujuan

Menerapkan walk cycle pada sebuah karakter yang populer dengan bantuan Tween.

2. Alat

Adobe Flash Professional CS6

3. Bahan

Gambar referensi berisi salah satu karakter animasi yang populer misalnya naruto.

4. Dasar Teori

Secara prinsip, ada minimal 4 konsep yang perlu dipenuhi, antara lain:

1. Pose

pembuatan animasi oleh seorang animator dengan cara menggambar hanya pada keyframe-keyframe tertentu saja

2. Timing

tentang menentukan waktu kapan sebuah gerakan harus dilakukan

3. Inbetween

interval antar keyframe digambar/dilanjutkan

4. Arcs

sistem pergerakan tubuh pada manusia, binatang, atau makhluk hidup lainnya bergerak mengikuti pola/jalur (maya)

Secara teknis, adobe flash memiliki fitur untuk inbetween otomatis yang disebut dengan Tween. Tween adalah animasi yang dapat dilakukan dengan menggunakan Timeline dengan mengubah ukuran (scale), rotasi (rotation), dan posisi (location).

5. Tugas Praktikum

Buatlah walk cycle dari naruto dengan menggunakan bantuan Classic Tween

6. Petunjuk Praktikum

Berikut adalah langkah-langkah membuat walk cycle untuk kaki:

1. Pecah kaki naruto menjadi 4 Graphic Symbol yang mewakili kaki bagian atas dan bawah untuk bagian kiri dan kanan

2. Gunakan symbol tersebut untuk membuat contact position pada frame ke 1

3. Gunakan transform tool (Q) untuk mengatur pivot dari masing-masing symbol. Dimana pivot kaki bagian atas terletak pada pinggul dan pivot kaki bagian bawah terletak pada lutut

4. Buat keyframe (F6) pada frame ke 9. Buat contact position kebalikan dari frame ke 1

5. Copy contact position pada frame 1 ke frame ke 17

6. Klik kanan pada timeline diantara frame 1 dan 9 kemudian pilih menu “Create Classic Tween”

7. Klik kanan pada timeline diantara frame 9 dan 17 kemudian pilih menu “Create Classic Tween”

8. Uji animasi yang dibuat dengan menekan tombol Ctrl+Enter. Jika menghasilkan animasi kaki sliding seperti di danau es, maka lanjutkan ke langkah berikutnya. Jika tidak, perbaiki dulu animasinya.

9. Buat keyframe (F6) pada frame ke 5 dan 13. Buatlah passing position pada frame tersebut.

10. Jika semua berjalan lancar, maka akan diperoleh good enough walk cycle.

untuk memperhalus animasinya, dapat dilanjutkan dengan menambahkan gambar lutut dan menambahkan pose down dan up.

7. Hasil Praktikum

8. Kesimpulan
Menggunakan motion tween membutuhkan waktu yang lebih singkat dibandingkan dengan cara manual, karena kita tidak perlu membuat inbetween sendiri secara manual dan

9. Referensi
Josiah Brooks, How To Animate – Walk Cycle (Tweened)
http://www.mohhasbias.com/

Prak 5 – Popular Character Walk Cycle

1. Tujuan
Menerapkan konsep walk cycle pada sebuah karakter yang populer.

2. Alat
Adobe Flash Professional CS6

3. Bahan
Gambar referensi berisi salah satu karakter animasi yang populer misalnya naruto, .

4. Dasar Teori
Secara teori, sebuah walk cycle dari sembarang karakter dapat diperoleh dengan me-replace stickman pada praktikum sebelumnya dengan karakter populer yang diinginkan.

5. Tugas Praktikum
Buatlah walk cycle dari character populer tersebut

6. Hasil Praktikum

7. Kesimpulan
Membuat character walk cycle menurut saya sangat rumit dan butuh ketelatenan, tidak semudah saat membuat stickman walk cycle. Karena saat proses traching tiba-tiba adobe flash tertutup dengan sendirinya dan belum sempat menyimpannya itu sangatlah menyakitkan.

8. Referensi

http://www.mohhasbias.com/

Prak 3 – Memperhalus Walk Cycle menggunakan Konsep Arcs

1. Tujuan
Memperhalus walk cycle menggunakan konsep Arcs

2. Bahan
Sebuah walk cycle yang memiliki kriteria berikut:
1. Pose lengkap (contact, down, passing, up)
2. Timing tepat ( 8 frame atau 16 frame )
3. Inbetween antar pose (seluruh frame terisi keyframe)

3. Alat
Adobe Flash Professional CS6

4. Dasar Teori
Salah satu cara memperhalus animasi adalah dengan memperhatikan arcs-nya. Arcs yang dimaksud adalah lengkungan lintasan pergerakan. Untuk gerakan walk cycle, arcs yang muncul lebih dari satu macam. Arcs yang perlu diperhatikan pada walk cycle adalah arcs dari titik penting sebuah stickman. Ada banyak titik penting yang perlu di-cek arcs-nya. Salah satunya adalah titik tumit. berikut adalah contoh cara mengecek arcs yang dihasilkan dari pergerakan tumit.

Cara mengecek arcs bisa dimulai dengan menandai titik pentingnya. Pada video diatas, titik tumit ditandai dengan titik warna hijau. Setelah seluruh titik tumit pada seluruh frame ditandai, maka kita akan dapat kumpulan titik sebagai berikut


titik penanda posisi tumit pada setiap frame

jika titik-titik hijau tersebut dihubungkan, maka akan bisa dievaluasi apakah animasinya sudah halus atau belum. jika garis yang dihasilkan tidak berbentuk kurva mulus, maka animasinya termasuk kurang halus.

berikut adalah contoh titik-titik yang menghasilkan arcs yang kurang mulus. perhatikan pada daerah yang dilingkari biru. jika daerah ini dibetulkan, yaitu dengan menggeser posisi tumit pada keyframe tersebut, maka akan diperoleh hasil animasi yang lebih halus.


Contoh titik yang merusak arcs

5. Tugas Praktikum
Perbaiki arcs pada titik:
1. pinggul
2. tumit

6. Hasil Praktikum


7. Kesimpulan Praktikum
Dengan titik-titik arcs pada pinggul dan tumit dapat kita perhatikan apakah animasi kita terlihat halus atau tidak, hal ini sangat penting untuk diterapkan untuk mendapatkan hasil terbaik pada animasi kita

8. Referensi
Richard Williams, The Animator’s Survival Kit: A Manual of Methods, Principles and Formulas for Classical, Computer, Games, Stop Motion and Internet Animators
http://www.mohhasbias.com/

Praktikum 2 – Membuat Animasi Stickman Menggunakan Adobe Flash Professional

1. Tujuan

Membuat animasi pertama menggunakan adobe flash professional

2. Alat

Adobe Flash Professional CS5.5

3. Dasar Teori

Ada beberapa dasar teori yang bisa digunakan sebagai petunjuk (guidance) dalam pembuatan stickman berjalan, antara lain

1.     Pose

2.     Timing

3.     Inbetween

1. Pose

Berikut adalah pose-pose yang perlu ada dalam sebuah walk. Seringkali disebut dengan walk cycle. Dinamakan cycle karena pose ini dipilih sedemikian rupa sehingga pose terakhir identik dengan pose awal sehingga bisa disusun menjadi sebuah siklus tanpa henti.

Walk Cycle Poses Collection
Perhatikan bahwa ada 4 pose yang diperlukan, yaitu contact, down, passing, dan up.
Untuk mempermudah proses belajar, ada baiknya jika fokus pada pergerakan kaki dahulu. kemudian baru dilanjut bagian tubuh yang lain pada kesempatan berikutnya.

2. Timing

Timing yang dimaksud adalah jumlah frame yang diperlukan untuk menghasilkan animasi yang diinginkan. Timing juga berhubungan dengan durasi animasi yang diinginkan, apakah cepat atau lambat. Yang perlu diingat, untuk memperlambat animasi, tidak dilakukan dengan cara mengubah setting FPS, akan tetapi dengan cara mengubah jumlah frame yang dibuat. Dalam animasi baik 2D dan 3D, standar FPS adalah 24.
Untuk walk cycle, ada beberapa timing yang bisa digunakan tergantung jenis walk yang diinginkan
normal walk: 12 frame (0.5 detik)
cartoon walk: 8 frame
Timing yang relatif mudah untuk keperluan belajar adalah 8 frame. Dengan spesifikasi berikut,
pose contact –> frame 1
pose down –> frame 3
pose passing –> frame 5
pose up –> frame 7
pose contact –> frame 9

berikut adalah susunan keyframe pada timeline

timing untuk 4 pose walk cycle

berikut adalah tampilan onion skin dari 4 pose dasar walk cycle

4 basic walk cycle in onion skin

3. Inbetween

4 pose hanya bisa untuk 4 keyframe. Sedangkan untuk walk cycle dengan timing cartoon, perlu 8 frame. Sehingga perlu 4 tambahan frame atau 1 tambahan perantara frame yang biasa disebut dengan inbetween. Proses pembuatan inbetween sangat sederhana.

1.     Cukup aktifkan onion sehingga bisa tampak keyframe frame sebelumnya dan frame setelahnya. Sebagai contoh, berikut adalah kondisi frame 2 saat masih baru ditambahkan empty keyframe dengan mode onion skin aktif.

onion skin

2.     Tambahkan gambar yang mewakili pertengahan dari kedua frame tersebut. Berikut adalah contoh hasil penambahan inbetween untuk keyframe pada frame 2.

hasil proses inbetween

3.     Ulangi langkah tersebut untuk menambahkan keyframe pada frame 4, 6, dan 8. Sehingga diperoleh keyframe untuk masin-masing frame seperti berikut ini

1 frame 1 keyframe

4. Tugas Praktikum

1.     Buatlah sebuah stickman. Bisa menggunakan line tool dengan ketebalan stroke 8

2.     Animasikan stickman tersebut sehingga terlihat berjalan

5. Hasil Praktikum

6. Kesimpulan

Untuk dapat membuat walk cycle dibutuhkan ketelitian, ketelatenan dan kesabaran. Saat melihat videonya bisa dibilang itu mudah, akan tetapi saat mencobanya sendiri itu rumit dan membutuhkan ketelatenan.

7. Referensi

1. Richard Williams, The Animator’s Survival Kit: A Manual of Methods, Principles and Formulas for Classical, Computer, Games, Stop Motion and Internet Animators
2. Andrew, Walk Cycle Poses

3. http://www.mohhasbias.com/

PRAKTIKUM 1 - MENGENAL ADOBE FLASH

1. TUJUAN

            Agar kita mengetahui apa itu adobe flash dan mengetahui tools yang terdapat pada adobe flash sehingga kita bisa membuat animasi 2D

2. DASAR TEORI

            Adobe flash adalah software animasi 2D. kelebihan dari adobe flash adalah dengan software ini kita tidak hanya bias membuat anime, akan tetapi kita juga bias membuat motion graphic dsb. Namun, adobe flash juga memiliki kekurangan

3. TUGAS PRAKTIKUM

            Identifikasi masing-masing bagian user interface berikut

4. HASIL PRAKTIKUM
1.     Judul File : nama dari project kerja 
2.     Essentials : memilih model interface 
3.     Scene, Symbol dan Zoom

• scene : untuk mengedit scene 
• symbol : untuk mengedit symbol atau bentuk objek 
• zoom : untuk memperbesar atau memperkecil tampilan scene

4.     Properties dan Library

• properties : untuk menampilkan parameter dari sebuah tombol yang terpilih
• library

5.     Stage Area : area persegi empat yang merupakan tempat dimana membuat objek atau animasi yang akan dimainkan 
6.     Tool bar : berisi tools yang digunakan untuk memanipulasi lembar kerja 
7.     Panel properties : dimana kita bisa mengedit frame 
8.     Tool box : berisi koleksi tools untuk membuat, menggambar, memilih dan memanipulasi isi stage dan timeline  
9.     Timeline : membuat dan mengontrol objek dan animasi

5. KESIMPULAN

            Sebelumnya saya belum mengetahui apa itu adobe flash dan ini adalah pertama kali saya membuka dan mereviewnya, akan tetapi dengan review ini saya sedikit lebih mengetahui tentang adobe flash dan tahu apa itu adobe flash

6. REFERENSI

• http://morfour.blogspot.com/p/mengenal-flash.html?m=1
• latihanflash.blogspot.com/2013/05/mengenal-program-adobe-flash-cs5.html?m=1

Video Comparison Degree

Video Conversation Modal Aux