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