Prak 15 – Animasi menggunakan Programming

Prak 15 – Animasi menggunakan Programming

1. Tujuan

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

2. Alat

Adobe Flash Professional CS6

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

1. Lakukan petunjuk praktikum yang diberikan
2. Ubah posisi dari animasi tersebut
3. Ubah warna dari animasi tersebut
4. Ubah radius dari animasi tersebut
5. Ubah posisi animasi tersebut setiap kali muncul

6. Petunjuk Praktikum

1. Buat project ActionScript 3

2. Buka action window dengan menekan tombol “actions” pada panel di sebelah kanan


3. 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();
}




1. Sehingga “actions” window berisi kode seperti berikut





2. Buka “ActionScript Setting”



3. Pilih tab “Library Path” klik icon “Browse to SWC”



4. Pilih file swc “Flint2d_4.0.1.swc”



5. Pastikan file swc tersebut muncul pada daftar



6. Tekan “OK” kemudian jalankan movie-nya (Test Movie, Ctrl + Enter)

7. Hasil Praktikum

1. Lakukan petunjuk praktikum yang diberikan
2. Ubah posisi dari animasi tersebut
3. Ubah warna dari animasi tersebut
4. Ubah radius dari animasi tersebut
5. Ubah posisi animasi tersebut setiap kali muncul

8. Kesimpulan

9. Referensi

1. Create Fireworks animation using Flint Particle Engine

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 CS3+

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

8. Kesimpulan

Pada praktikum Remake part satu ini saya berhasil membuat title dari mulai awal video sampai dengan tittlem mengecil dan berpindah posisi ke pojok kiri bawah.

9. Referensi

http://www.mohhasbias.com/prak-7-remake-one-little-finger-by-super-simple-song-part-1/

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 CS3+

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

8. Kesimpulan

Pada praktikum Remake part satu ini saya berhasil membuat title dari mulai awal video sampai dengan tittlem mengecil dan berpindah posisi ke pojok kiri bawah.

9. Referensi

http://www.mohhasbias.com/prak-7-remake-one-little-finger-by-super-simple-song-part-1/

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 CS3+

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

8. Kesimpulan

Dari praktikum kali ini, saya mendapatkan banyak pelajaran dalam pengerjaan project animasi ini. Ketelitian dan ketelatenan dibutuhkan untuk mengerjakan animasi. Dalam pengerjaan animasi ini juga tidak hanya berpedoman pada satu teori flash saja. Namun dibutuhkan banyak teori yang dibutuhkan untuk membuat animasi ini.

9. Referensi

http://www.mohhasbias.com/prak-7-remake-one-little-finger-by-super-simple-song-part-1/

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 CS3+

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

8. Kesimpulan

Pada praktikum Remake part satu ini saya berhasil membuat title dari mulai awal video sampai dengan tittlem mengecil dan berpindah posisi ke pojok kiri bawah.

9. Referensi

http://www.mohhasbias.com/prak-7-remake-one-little-finger-by-super-simple-song-part-1/

PRAK 5 – POPULAR CHARACTER WALK CYCLE

1. Tujuan

Menerapkan konsep walk cycle pada sebuah karakter yang populer

2.  Alat

Adobe Flash Professional CS.6

3. Bahan 

     Naruto Sheet Refrence

4. Dasar Teori

     Secara teori, sebuah walk cycle dari sembarang karakter dapat dilakukan dengan 4 prinsip yang sudah saya sebutkan pada postingan sebelumnya. Hanya saja, karakter yang mulanya stickman diganti dengan karakter populer seperti Naruto.

5. Hasil Praktikum

Pada praktikum kali ini, hasil yang saya dapatkan adalah karakter dengan 3 layer yang berbeda dimana satu untuk kaki kanan, satu untuk kaki kiri, dan satu lagi untuk badan dan kepala. Kemudian pembagian posisi up, down, dan passing.

6. Kesimpulan

Pada Praktikum kali ini, dibutuhkan waktu yang cukup banyak untuk menyelesaikan karena karakter yang dijalankan sudah tidak hanya sebuah garis (stickman). dan jam terbang yang tinggi itu tetap menjadi salah satu faktor yang menentukan kecepatan dan ketepatan pekerjaan kita.

Prak 11 – Mask

Prak 11 – Mask

1. Tujuan

Mengetahui, menguasai, dan mengaplikasikan fitur mask pada Adobe Flash CS 5.5

2. Alat

Adobe Flash Professional CS 5.5

3. Bahan

Contoh pengaplikasian mask pada beberapa logo seperti pada Blue fish

4. Dasar Teori

A. Classic Tween
B. Mask

5. Tugas Praktikum

Buatlah pengaplikasian fitur masking pada bendera berkibar dan logo Bluefish

6. Petunjuk Praktikum

Mulailah dari membuat warna bendera.

7. Hasil Praktikum

8. Kesimpulan

Pada praktikum kali ini saya dapat mengetahui, menguasai dan mengaplikasikan penggunaan fitur masking yang ada pada Adobe Flash CS 5.5

9. Referensi

http://www.mohhasbias.com/

prak 6 walk cycle classic motion tween

Prak 6 – Walk Cycle using Tween

1. Tujuan

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

2. Alat

Adobe Flash Professional CS3+

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
   
   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
   

   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 frameTiming 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 9berikut 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

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

kesabaran dan ketekunan dapat membuahkan hasil yang maksimal. berlatih bersabar dan tekun insyaallah akan mendapatkan hasil yang maksimal

9. Referensi

Josiah Brooks, How To Animate – Walk Cycle (Tweened)

Praktikum 3 memperhalus animasi dengan arcs

Prak 3 – Membuat Walk Cycle menggunakan Keyframe

1. Tujuan

Membuat walk cycle menggunakan menu keyframe pada Adobe Flash Professional CS3

2. Bahan

-       Timing

-       In between

-       Pose (Contact, Down, Up, Passing)

3. Alat

Adobe Flash Professional CS3

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.

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

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.

4. Tugas Praktikum

1. memperhalus walk cycle  menggunakan pinggul dan tumit

5. Hasil Praktikum

6. Kesimpulan

Dengan tugas ini saya bisa memperhalus dan memperbaiki walk cycle .  dan kembali lagi dengan inti sabar

7. Referensi

http://dkv.binus.ac.id/2010/04/14/12-prinsip-animasi/

http://www.mohhasbias.com/