Animasi GLB dengan Flash

Hmm, tumben banget aku posting dengan tema fisika. Haha, maklum guys, sejak kuliah di jurusan teknik informatika aku ga pernah lagi utek-utek di bidang ini. Trus, kenapa ko tiba-tiba pengen posting tentang fisika? Penyebabnya simpel aja, neh gara-gara ada adek kelas yang mo pinjem buku fisika. Alhasil terpaksa harus bongkar-bongkar gudang. Eh, pas ketemu bukunya malah pengen baca lagi. Hehe, sebenarnya postingan ini iseng aja, tapi mudah-mudahan ada gunanya.


Dalam pelajaran fisika di SMA (atau mungkin di SMP), kita pasti pernah diajari materi GLB ini. GLB adalah singkatan dari Gerak Lurus Beraturan. Gerak Lurus Beraturan bisa diartikan gerak lurus suatu obyek dengan kecepatan yang konstan atau tanpa percepatan. Jadi, benda yang menjadi obyek dikatakan melakukan GLB jika benda ini bergerak konstan dalam lintasan yang lurus. Poin yang paling terpenting adalah mengenai percepatan. GLB tidak pernah memiliki percepatan atau percepatannya selalu nol. Benda yang percepatannya nol bisa ada pada dua kondisi, yaitu benda dalam keadaan DIAM atau BERGERAK KONSTAN. Nah, itu adalah sedikit gambaran tentang GLB. Berikut adalah bagian yang paling seru. Kita akan membuat simulasi gerak GLB ini dalam animasi Flash.

Animasi di atas merupakan simulasi sederhana tentang GLB. Kamu tinggal memasukkan kecepatan di kolom yang di sediakan lalu pencet tombol go! Maka bola akan bergerak sesuai dengan kecepatan yang kamu masukkan. Kecepatan di sini aku bikin dengan satuan pixel per second. Jadi, jika kamu memasukkan angka 30, maka bola akan bergerak dengan kecepatan 30 pixel per detik. Maaf kalo ukurannya terlalu kecil ya. Aku takut kalo kegedean bisa merusak text ketika diposting :P.

Cara Bikin:
Tentunya kamu harus bisa dasar-dasar membuat animasi di Flash. Seperti membuat movie clip dan action script sederhana. Tidak harus terlalu mahir kok, kamu yang baru belajar juga pasti bisa, cz aku sendiri juga baru belajar. :D

Yang agak sulit di sini adalah menentukan waktu di dalam animasi flash. Seperti yang kita tahu, bahwa penentuan waktu dalam Flash adalah menggunakan satuan fps (frame per second). Terlalu sulit jika kita mengikuti satuan ini. Karena dengan satuan ini kita akan kesulitan dalam menggerakkan movie clip dengan kecepatan yang tepat. Emm, sulit di sini cuma penilaian pribadi ya, bisa jadi menurutmu menggunakan fps malah mudah. Tapi, aku lebih suka penentuan waktu dengan script setInterval. Syntaxnya sebagai berikut:

var namaVariabel:Number = setInterval(namaFungsi, interval);

namaVariabel adalah variabel yang digunakan untuk penentuan interval (kalo liat di manual di help, di situ selalu dinamai intervalID). Variabel ini juga bisa memudahkan kita untuk menghapus interval. namaFungsi adalah fungsi yang akan diterapkan sistem pewaktuan. interval adalah durasi waktu yang akan berjalan dalam milisecond. Jika kamu memasukkan 1000, maka animasi akan berjalan perdetik.

Sebagai contoh aku bikin scriptnya seperti ini:

var dur:Number = 1000;

var intervalID:Number = setInterval(timer, dur);

Ini artinya fungsi "timer" akan dijalankan tiap 1000 milidetik. Nah, dengan begini kita bisa menggerakkan movie clip secara presisi di fungsi "timer". Jadi, kita tidak perlu peduli berapa fps yang berjalan dalam animasi kita. Toh, fps sekarang tidak berpengaruh. :D

Script Lebih lengkap seperti ini:

var kec:Number = 10;
var dur:Number = 10;

var intervalID:Number = setInterval(timer, dur);
function timer():Void {
_root.bola._x += (kec/100);
_root.bola._rotation += (kec/100);
if (_root.bola._x>=500) {
_root.bola._x = 0;
}
if (_root.bola._x<0) { _root.bola._x = 500; } } Eits, tunggu! Kenapa intervalnya aku bikin 10? Bukankah animasi akan berjalan tiap 10 milidetik nantinya? Hmm, coba diteliti lagi script di atas. Meskipun aku bikin interval 10 milisecond, tapi pergerakan benda pada bola aku bagi dengan nilai seratus. Toh, sama saja kan? Misalnya aku bikin kecepatan 30 pixel per detik, maka animasi akan berjalan 0.03 setiap 10 milidetik. Loh, kenapa harus repot-repot seperti itu? Sebenarnya tidak ada maksud apa-apa, ini hanya akan membuat animasi terlihat semakin halus. Kamu akan tahu sendiri jika kamu mencobanya. Penjelasan script di atas kurang lebih seperti ini: var kec:Number = 10; maksudnya aku bikin variabel kec (kecepatan) bernilai 10. var dur:Number = 10; maksudnya aku bikin variabel dur (durasi) bernilai 10. var intervalID:Number = setInterval(timer, dur); maksudnya aku bikin pengaturan waktu di fungsi timer dengan interval sebanyak nilai dari variabel dur, yaitu 10. function timer():Void {} maksudnya aku bikin fungsi timer() dengan return value bertipe void yang artinya fungsi ini tidak membutuhkan return value. Ingat, fungsi ini sudah diatur untuk berjalan tiap 10 milidetik. _root.bola._x += (kec/100); maksudnya bola akan bergeser ke kanan sebesar kec/100 (di sini berarti 10/100= 0.1 pixel). _root.bola._rotation += (kec/100); ini hanya membuat roda akan berputar ketika bergerak. Agar terlihat sedikit realistis gitu :P. Jika diatas kamu melihat syntax "if", itu dimaksudkan agar bola dikondisikan kembali ke bagian kiri layar jika bergerak melampaui batas kanan layar dan sebaliknya. Untuk membuat animasi yang lebih interaktif seperti yang kamu lihat di awal tadi, tentu kamu harus sedikit memodifikasinya. Malas untuk berpikir sendiri? Download aja file .fla dan .swf-nya di sini: download animasi GLB.