| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas

19.05.2020

Membuat Fitur Swipe Mobile

Membuat fitur swap / drag konten untuk mobile

12.05.2020

Membuat Grafik Fungsi Kuadrat dengan Flash

Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash

11.05.2020

Membuat Kordinat Kartesius dengan Flash

Membuat sistem kordinat kartesius dengan code AS3 full

16.03.2020

Game Edukasi RPG

Buku pengembangan game RPG bermuatan edukasi

31.07.2019

Perpustakaan Baru UNNES

Mengintip perpustakaan baru UNNES

07.04.2018

Membuat Game Tebak Gambar

Tutorial membuat game tebak gambar dengan Flash

03.07.2017

Memahami konstain

Memahami penggunaan konstrain dalam membuat sistem gerak

28.01.2017

E-Book Media Pembelajaran

E Book Gratis Membuat Media Pembelajaran Interaktif


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Membuat animasi tata surya dengan Flash AS3

Pendahuluan

Animasi dengan lintasan elips seperti lintasan planet-planet pada sistem tata surya dapat dibuat dengan berbagai metode, salah satunya adalah dengan fitur Motion Guide. Akan tetapi terdapat teknik sederhana, yaitu dengan menggunakan kode actionscipt dengan rumus trigonometri dasar, sehingga kita dapat mempermudah prosedur gerakan planet-planet dalam tata surya. Hasil akhir dari tutorial ini adalah sebagai berikut :

tutorial membuat gerakan tata surya by wandah_w

Persiapan Aset

Siapkanlah beberapa gambar planet bertipe PNG (dengan background transparan), atau buatlah dengan menggunakan drawing tool. Dalam contoh ini digunakan 5 buah gambar yaitu gambar planet Bumi, Mars, Yupiter, satelit Bulan dan Matahari. Setelah gambar siap, selanjutnya gambar tersebut akan diimport ke dalam aplikasi. Perhatikan langkah-langkah berikut :

  1. Buatlah sebuah file baru dengan properties Action Script 3, 800x480 pixel dan 30 fps.
  2. Import gambar matahari, kemudian Convert menjadi Movieclip "matahari" dengan titik registrasi tepat di tengah.. Perhatikan gambar:
    tutorial membuat gerakan tata surya by wandah_w
  3. Dengan cara yang sama, lakukan proses import dan convert to symbol pada seluruh gambar planet. Perhatikan gambar:
    tutorial membuat gerakan tata surya by wandah_w
  4. Agar dapat di akses oleh kode, tambahkan instance name pada masing-masing Movieclip. Tulis dengan huruf kecil, sebagai contoh untuk matahari memiliki instance name matahari. Perhatikan gambar :
    tutorial membuat gerakan tata surya by wandah_w
  5. Atur posisi movieclip matahari tepat di tengah stage, karena merupakan pusat dari tata surya. Sedangkan untuk planet yang lain dan bulan anda bebas meletakkannya dimanapun, karena kode akan secara otomatis mengatur posisinya




Menambahkan Kode Gerakan Tata Surya

Gerakan tata surya pada dasarnya adalah gerakan melingkar dengan lintasan berbentuk elips. Dalam operasi trigonometri lintasan elips dapat diperoleh dari hasil perkalian sudut dengan jari-jari panjang dan jari-jari jauh. Untuk lebih jelasnya, buatlah sebuah layer baru dan ketikan kode sebagai berikut :

function gerak_elips(planet:MovieClip, satelit:MovieClip, r1:Number, r2:Number, kec:Number):void{
	satelit.addEventListener(Event.ENTER_FRAME, gerak_satelit);
	satelit.sudut = Math.random()*360;
	function gerak_satelit(e:Event):void{
		var ob:Object = e.currentTarget;
		ob.sudut+=kec;
		ob.x = planet.x + r1*Math.cos(ob.sudut*Math.PI/180);
		ob.y = planet.y + r2*Math.sin(ob.sudut*Math.PI/180);
	}
}
gerak_elips(matahari, bumi, 200, 100, 0.2);
gerak_elips(matahari, mars, 300, 150, 0.3);
gerak_elips(matahari, jupiter, 400, 200, 0.2);
gerak_elips(bumi, bulan, 40, 20, 5);

Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka hasil dari tutorial ini adalah sebagai berikut:


Get Adobe Flash player

Penjelasan kode

Fungsi gerak_elips() pada dasarnya akan memberikan listener ENTER_FRAME kepada satelit, sehingga satelit akan bergerak seuai lintasan elips dengan jari-jari r1 dan r2.
Sebagai contoh :

gerak_elips(matahari, bumi, 200, 100, 0.2);

Berarti movieclip matahari diatur sebagai pusat, dan movieclip bumi akan bergerak dengan jari-jari 200 pixel dan 100 pixel. Dengan cara yang sama anda dapat menambahkan beberapa planet maupun satelit seperti pada movieclip bulan.

File Sumber


Animasi tata surya (Flash CS5)


Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon