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

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

1. Sehingga “actions” window berisi kode seperti berikut
   

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

   
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

*Jika 

8. Kesimpulan

 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( 300 );  
 emitter.addInitializer( new SharedImage( new Dot( Math.floor(Math.random()*(1+5-1)+1) ) ) );  
 emitter.addInitializer( new ColorInit( Math.random()*0xFFFFFF, Math.random()*0xFFFFFF ) );  
 emitter.addInitializer( new Velocity( new DiscZone( new Point( 0, 0 ), Math.floor(Math.random()*(1+300-50)+50), Math.floor(Math.random()*(1+120-50)+50) ) ) );  
 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( -100, 0, 1300, 800 ) );  
 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 = Math.floor(Math.random()*(1+1100));  
 emitter.y = Math.floor(Math.random()*(1+800));  
 emitter.start();  
 function restart( ev:EmitterEvent ):void  
 {  
 var i:int;   
 for (i = 0; i <= Math.floor(Math.random()*(1+5-3)+3); i++)  
 {   
  emitter.addInitializer( new Lifetime( Math.floor(Math.random()*(1+5-1)+1) ) );  
  emitter.addInitializer( new ColorInit( Math.random()*0xFFFFFF, Math.random()*0xFFFFFF ) );  
  emitter.x = Math.floor(Math.random()*(1+1100));  
  emitter.y = Math.floor(Math.random()*(1+800));  
  emitter.addInitializer( new SharedImage( new Dot( Math.floor(Math.random()*(1+5-1)+1) ) ) );  
  emitter.addInitializer( new Velocity( new DiscZone( new Point( 0, 0 ), Math.floor(Math.random()*(1+400-200)+200), Math.floor(Math.random()*(1+200-50)+50) ) ) );  
  Emitter2D( ev.target ).start();  
 }  
 }  

Kode di atas adalah kode yang telah saya modifikasi. Pada kode tersebut saya memanfaatkan fungsi Math.random() untuk mendapatkan angka secara acak. Dengan menggunakan rumus Math.random()*(1+value_maksimal-value_minimal)+value_maksimal saya bisa memperoleh nilai acak dengan batas minimal dan batas maksimum yang saya inginkan. Sehingga saya bisa memanfaakannya untuk memperoleh warna, posisi, ukuran, radius, dll dari efek partikel tersebut secara acak, sehingga efek yang di hasilkan tidak terasa monoton. Kemudian saya juga memanfaatkan fungsi tersebut untuk memperoleh jumlah efek yang muncul secara random dengan menggabungkan fungsi tersebut dengan perulangan for.

9. Referensi

Create Fireworks animation using Flint Particle Engine

Prak 14 – Shape Tween

1. Tujuan

Menguasai penggunaan tool bernama Shape Tween.

2. Alat

Adobe Flash Professional CS3+

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.

Video Player

2.

Video Player

6. Petunjuk Praktikum

Silahkan tirukan animasi tersebut sebaik mungkin

7. Hasil Praktikum

 

8. Kesimpulan

Dalam praktikum kali ini, saya telah mempelajari fitur baru yang dapat mempermudah untuk mengatur transisi shape tween sesuai dengan yang diinginkan. Fitur ini bernama shape guide, dengan menggunakan fitur ini saya bisa membuat transisi kotak ke lingkaran tanpa berputar.

9. Referensi

Shape Tween

Prak 13 – Shape Tween

1. Tujuan

Menguasai penggunaan tool bernama Shape Tween.

2. Alat

Adobe Flash Professional CS3+

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

Setelah melakukan praktikum ini, saya lebih mengetahui bagaimana membuat transisi shape tween dengan benar sesuai yang kita inginkan. Berbeda dengan praktikum sebelumnya yang beberapa transisi shape tween antar logo bisa dibilang sedikit aneh, tidak sesuai dengan transisi yang diharapkan.

9. Referensi

Shape Tween

Prak 12 - Transisi Logo Menggunakan Shape Tween di Flash

1. Tujuan

Mempercepat penguasaan Adobe Flash Professional menggunakan konsep Shape Tween

2. Alat

Adobe Flash Professional CC

3. Bahan

Shape Tween

4. Dasar Teori

Shape Tween adalah perubahan bentuk dari suatu objek ke objek lain. untuk Shape Tween objek yang dianimasikan harus berjenis Shape, untuk ukuran file yang dihasilkan Shape Tween lebih besar dibandingkan motion Tween.

5. Tugas Praktikum

Buatlah tugas animasi berbagai logo atau logomotion dengan menggunakan konsep Shape Tween

6. Petunjuk Praktikum

Mulailah membuat logomotion dengan berbagai logo yang ada dengan menggunakan konsep Shape Tween

7. Hasil Praktikum

8. Kesimpulan

Pada praktikum kali ini saya dapat membuat 5 transisi logo dengan menggabungkan fitur classic tween dan motion tween. Namun di beberapa transisi, shape bertransisi dengan sedikit aneh karena perubahan shape awal ke shape akhir yang terlalu banyak.

9. Referensi

Moh Hasbi Assidiqi

Dasar teori flash

Prak 11 - Masking

1. Tujuan

Mengetahui, menguasai, dan mengaplikasikan fitur masking pada Adobe Flash Professional CC

2. Alat

Adobe Flash Professional CC

3. Bahan

Contoh pengaplikasian masking pada beberapa logo seperti pada Blue fish

4. Dasar Teori

A. Classic Tween
B. Masking

5. Tugas Praktikum

Buatlah pengaplikasian fitur masking pada bendera berkibar, logo Bluefish, dan Globe berputar

6. Petunjuk Praktikum

Mulailah dari membuat gelombang bendera yang dapat di loop secara terus menerus.

7. Hasil Praktikum

8. Kesimpulan

Pada praktikum kali ini saya belajar tentang menggunakan fitur mask pada adobe flash. Di sini saya memadukan fitur mask dengan animasi pada flash sehingga dapat membuat animasi bendera berkibar, tulisan indonesia dan globe berputar. Dengan mengetahui cara penggunaan fitur ini saya bisa berkreasi lebih banyak dengan animasi pada 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 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 kali ini, saya melanjutkan progress remake one little finger. Kali ini saya telah menambahkan animasi walk cycle di awal pembukaan video. Kemudian saya mengcopy frame yang di ulangi beberapa kali pada video tanpa membuat baru lagi sehingga lebih efisien dari segi waktu dan tenaga. Seperti animasi transisi, gerakan one little finger dan tangan ke atas ke bawah.

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 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 kali ini, saya melanjutkan progress remake one little finger. Kali ini saya telah menambahkan animasi gerakan tangan ke atas dan kebawah, serta menambahkan transisi yang berbentuk lingkaran warna warni. Pada pembuatan animasi gerakan tangan ke atas dan ke bawah sedikit memakan waktu karena menggunakan animasi frame by frame. Untuk pembuatan animasi transisinya bisa di bilang cukup sederhana karena saya menggunakan classic tween, sehingga dapat mempermudah dan mempercepat pekerjaan.

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 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 kali ini, saya melanjutkan progress remake one little finger. Kali ini saya telah menambahkan karakter dan animasi gerakan kepala serta tangan. Untuk animasi walk cycle nya saya lewati dahulu karena akan memakan waktu lebih lama untuk membuat animasi tersebut dan animasi tersebut hanya di gunakan sekali pada keseluruhan video. Untuk animasi gerakan kepala dan jari saya menggunakan classic tween sehingga mempercepat pekerjaan.

9. Referensi

Motion Tween
Graphic Symbol
Graphic Filters

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

Tujuan

Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

Alat

Adobe Flash Professional CC

Bahan

One little finger by super simple song

Dasar Teori

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

Tugas Praktikum

Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

Petunjuk Praktikum

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

Hasil Praktikum

*Format file .swf

Kesimpulan

Di praktikum kali ini, kita dapat tahu bagaimana membuat sebuah video animasi pendek secara full. Di sini saya belajar bagaimana mensinkronasi gerakan animasi karakterdan background supaya sesuai dengan musik yang di putar.

Referensi

Motion Tween
Graphic Symbol
Graphic Filters