Membuat Animasi Tata Surya Dengan Adobe Flash CS5

Sep 5, 2011 by Under Tips & Trik - 8 Comments  

Tata surya merupakan sekumpulan objek yang berpusat pada Matahari dan terdiri dari sekumpulan planet-planet yang memiliki orbit-orbit mengelilingi matahari (yakni Uranus, Merkurius, Venus, Bumi, Mars, Jupiter, Saturnus, dan Neptunus) beserta bulannya masing-masing yang mengelilingi setiap planet dan semua objek yang berada di orbit matahari (seperti Asteroid, Komet, dan lain-lain).

Ada banyak cara untuk menganimasikan sebuah pergerakan planet dan satelitnya dari matahari yang kesemuanya menggambarkan tata surya. Salah satunya adalah dengan apa yang akan kita buat kali ini, yaitu memanfaatkan Drawing API pada Flash untuk menggambarkan komponen-komponen tata surya berupa matahari, planet, dan satelitnya. Selain itu untuk membuatnya beranimasi, kita akan melakukan update posisi relative planet dan satelitnya terhadap orbit berupa lingkaran dengan mengubah nilai rotation MovieClip/Sprite/Shape-nya masing-masing secara berkala dalam interval waktu tertentu sesuai nilai FPS, dengan mendefinisikan listener Event.ENTER_FRAME pada stage.

Pada Trik kali ini, kita akan coba menggambarkan matahari yang dikelilingi oleh satu planet dan satu satelit saja, dengan langkah-langkah pembuatannya sebagai berikut:

  1. Buatlah sebuah file Flash baru dengan fitur ActionScript 3.0. Caranya klik menu File > New > General > ActionScript 3.0.
  2. Klik Menu Modify > Document.
  3. Untuk memberikan kesan Animasi ini berlatar belakang luar angkasa, ubah warna document menjadi gelap.
  4. Pada panel Properties, tuliskan TataSurya di kolom Document Class. Tekan Enter pada Keyboard, bila muncul warning maka abaikan saja, karena file berisi definisi class-nya baru akan kita buat berikutnya.
  5. Klik menu File > Save As. Simpan dengan format FLA.
  6. Buat sebuah file Flash baru dengan fitur ActionScript 3.0 dengan mengklik File > New > General > ActionScript File.
  7. Tuliskan Script berikut ini pada File:
  8.  package
    
    {
    
    import flash.display.*;
    
    import flash.events.*;
    
     
    
    public class TataSurya extends MovieClip
    
    {
    
    private var matahari:Sprite = new Sprite();
    
    private var bumi:Sprite = new Sprite();
    
    private var bulan:Shape = new Shape();
    
     
    
    public function TataSurya()
    
    {
    
    matahari.graphics.beginFill(0xFFCC00);
    
    matahari.graphics.drawCircle(0,0,40);
    
    matahari.graphics.endFill();
    
    matahari.graphics.beginFill(0x000000);
    
    matahari.graphics.drawCircle(-10,-10,5);
    
    matahari.graphics.drawCircle(10,-10,5);
    
    matahari.graphics.endFill();
    
    matahari.graphics.lineStyle(0,0x000000);
    
    matahari.graphics.moveTo(-20,10);
    
    matahari.graphics.curveTo(0,20,20,10);
    
    matahari.graphics.lineStyle(0,0x555555);
    
    matahari.graphics.drawCircle(0,0,120);
    
     
    
    bumi.graphics.beginFill(0x0099CC);
    
    bumi.graphics.drawCircle(0,0,20);
    
    bumi.graphics.endFill();
    
    bumi.graphics.lineStyle(0,0x333333);
    
    bumi.graphics.drawCircle(0,0,30);
    
     
    
    bulan.graphics.beginFill(0xCCCCCC);
    
    bulan.graphics.drawCircle(0,0,5);
    
    bulan.graphics.endFill();
    
     
    
    this.addChild(matahari);
    
    matahari.x = 275;
    
    matahari.y = 200;
    
     
    
    matahari.addChild(bumi);
    
    bumi.x = 120;
    
    bumi.y = 0;
    
     
    
    bumi.addChild(bulan);
    
    bulan.x = 30;
    
    bulan.y = 0;
    
     
    
    stage.addEventListener(Event.ENTER_FRAME, orbit);
    
    }
    
     
    
    private function orbit(evt:Event):void
    
    {
    
    matahari.rotation += 1;
    
    bumi.rotation += 5;
    
    bulan.rotation -= 10;
    
    }
    
    }
    
    }
  9. Klik menu File > Save As, simpan file kedua ini dengan nama TataSurya.as pada folder yang sama dengan kita menyimpan file FLA (cara ke 5) sebelumnya.
  10. Lakukan test Movieclip sebelumnya untuk melihat hasilnya, klik menu Control > Test Movie atau dengan menekan shortcut Ctrl+Enter pada Keyboard.
  11. Hasilnya sebuah Animasi Bulan mengelilingi planet dimana disaat yang sama planet tersebut pun mengelilingi matahari.

Tutorial di atas juga berlaku untuk versi photoshop di bawah CS5. Bagi yang ingin mendapatkan Source File tutorial Adobe Flash CS5 di atas bisa meng-unduh-nya di: http://v5.indowebster.com/tutorial_adobe_flash_cs5_tata_surya.html.

  1. inspirasi
    Oct 20, 2011

  2. gan ,minta izin share/copast ya?aku sertakan link & sumbernya….

  3. reynardo
    Nov 13, 2011

  4. dimana download link adobe flash cs5 ?

  5. Andrea
    Nov 13, 2011

  6. reynardo
    Nov 14, 2011

  7. @Andrea terima kasih

  8. tom
    Feb 23, 2012

  9. nice info gan
    gan ijn cops, sklian sy srtakn smbrx..

  10. sanarotul
    Jun 28, 2012

  11. kenapa error ya da peringatan gini “Syntax error: expecting identifier before bitwiseand  ”,,,mohon bantuanya,,,??
    maaf saya masih pemula,,,

  12. NEO
    Mar 26, 2013

  13. muuuaaaannnntttaaaappppppppppppp……….!!!!
    izinnnn nyobaaaaa gan…!!

  14. Fikri
    Mar 26, 2013

  15. @neo: Terima kasih banyak sudah berkunjung ke sini. Jangan lupa baca artikel menarik lainnya ya :)

(Required)

Saya bukan SPAMMER!

animasigerakplanet membuat animasi tata surya dengan flash Tata cra membuat fles bergerak tutorial flash cs5 membuat rotasi bumi ubah pdf ke jpg kenapa saat memburning cd ke ejeck terus sinkronkan media saat menghubungkan hp ke laptop carA mengatasi aplikasi poto ga bisa di buka di bb z10 cara merafresh pc windows 8 cara menggabungkan 2 gambar hp bb cara cek ip berapa saja yang di jaringan download aplikasi blog blackberry kenapa hadware acceleration disbaled pada windows 7 spesifikasi win 7 aplikasi membuat tema for BB