Membuat Game Fisika : Gerak Parabola dengan Macromedia Flash (Bagian 1)

Tulisan ini saya buat merupakan bahan pelengkap dari tulisan saya sebelumnya berjudul Membuat Simulasi Gerak Parabola. Perbedaannya yaitu tutorial kali ini, saya lebih menekankan unsur permainan dalam aplikasi gerak parabola. Biasanya dalam menyelesaikan persoalan Fisika yang berhubungan dengan gerak parabola, ada dua variabel yang berperan penting dalam gerakan tersebut yaitu kecepatan awal (Vo) dan sudut tembak (α). Lalu bagaimana jika ingin menembak suatu target yang telah diketahui posisinya dengan tepat. Mari kita sama-sama mempelajarinya dalam tutorial ini.

 

Langkah 1 : Membuat tampilan awal

Buka software Macromedia Flash, Anda juga dapat menggunakan Adobe Flash, tetapi ingat bahwa tutorial ini menggunakan bahasa Action Script 2.0 yang sudah ketinggalan jaman. Atur ukuran aplikasi Anda menjadi 800x 480 pixel.

Langkah 2 : Mengatur layer

Buat lima buah layer bernama background, tombol, ketapel1, bola, ketapel2, Target, Hadiah dan Action Script. Urutan layer sesuai dengan tulisan. Jika diperlukan, layer bisa terjadi penambahan.

Langkah 3 : Membuat background

Aktifkan pada layer background, sisipkan gambar pemandangan yang Anda punya dengan cara menekan Ctrl+R dan atur posisi gambar agar sesuai. Anda juga dapat menggunakan Background seperti yang saya punya di bawah. Gembok layer ini supaya tidak bergeser.

Gambar Property milik game Angry bird

 .

Langkah 4 : Membuat ketapel 1

Downlad 2 gambar ketapel berikut, letakkan dalam folder yang sama dengan Aplikasi ini. Aktifkan layer ketapel 1, tekan Ctrl+R dan sisipkan gambar ketapel1.png. 

Jika muncul pertanyaan “bla...bla..bla..sequence?” Pilih aja “No”. Geser gambar ketapel1 ini ke bagian bawah layar lalu tekan F8, ubah menjadi movie clip dengan nama Ketapel_01. 

Klik Movie clip ketapel_01, pada bagian properti, beri nama instance name dari movie clip ini menjadi “ketapel1”.

Langkah 5 : Membuat ketapel 2

Lakukan mirip seperti langkah 4, hanya saja sekarang aktifkan layer ketapel 2, sisipkan gambar ketapel2.png. Letakkan posisi ketapel 2 berdekatan dengan ketapel 1. Convert gambar ketapel 2 menjadi movie clip dengan nama ketapel_02, lalu beri nama instance namenya dengan nama “ketapel2”.

Langkah 6 : Membuat movie clip bola

Aktifkan layer bola, buat sebuah lingkaran merah (catatan: Anda dapat mengganti dengan bentuk lain berupa gambar) dengan ukuran kira-kira 25x25 pixel. Bola merah ini akan kita jadikan sebagai objek utama untuk dilontar. Konversi bola ini menjadi movie clip dengan nama Bola_merah. Klik movie clip bola_merah dan beri nama pada instance namenya “bola”.

Langkah 7 : Membuat objek target

Klik layer target, buat sebuah objek sembarang berukuran kurang lebih 30 x 30 pixel. Dalam tutorial ini saya buat gambar lingkaran berwarna hijau. konversi bola hijau ini menjadi movie clip dengan nama target_hijau. lalu jangan lupa memberi nama instance name nya menjadi “target”.

Klik 2 kali movie clip target_hijau untuk masuk kedalam area movie clip target.  Buat dua buah layer dengan nama penyangga dan objek. Layer objek berisikan gambar bola hijau yang barusan dibuat, sedangkan layer penyangga diisi dengan gambar balok-balokan yang bisa Anda download di bawah ini. Buatlah penyangga sesuai dengan selera Anda. Gunakan tehnik Ctrl +R untuk menyisipkan gambar.

Property milik game Angry Bird

Masih di dalam movie clip target. Klik gambar bola hijau tadi dan konversi menjadi movie clip dengan nama sensor_hijau,  beri nama instance name “sensor”. Kembali ke scene utama jika sudah selesai.

Langkah 8 : Membuat Movie Clip Hadiah “Kena”

Jika bola merah berhasil menumbuk target hjau, maka kita akan tampilkan sebuah movie clip yang menandakan Anda berhasil dan berfungsi untuk mengulangi kejadian. Buatlah sebuah gambar menarik yang menandakan “berhasil” atau sejenisnya pada layer hadiah. Atau Anda dapat mendownload gambar di bawah. 

Gambar bintang property mili game Angry Bird

Klik gambar tersebut dan konversi menjadi movie clip dengan naqma Hadiah_kena. Jangan lupa unutk memberi nama instance namenya dengan nama “mcberhasil”.

Klik 2 kali movie clip ini dan masuk ke dalam movie clip “Hadiah_kena”. Buat dua buah layer dalam movie clip ini, layer pertama berisi gambar yang sudah Anda buat, layer kedua berisi tombol ulang. Buat sebuah tombol “Ulang” menggunakan Rectangle Tool. Konversi Objek kotak menjadi tombol dengan nama Tombol_ulang.

Klik Tombol ulang dan beri nama pada instance namenya menjadi “tbulang”. Kembali ke scene utama jika sudah selesai.

Langkah 9 : Membuat Movie Clip Hadiah “Lepas”

Langkah ini mirip dengan Langkah 8, perbedaan utamanya adalah gambar background serta nama movie clipnya harus dibedakan. Buat lagi gambar “kegagalan” sesuai dengan versi Anda masing-masing. 

Konversi menjadi movie clip dengan nama Hadiah_lepas dan ubah nama instance namenya menjadi “mcgagal”. 

Masuk ke dalam  mc Hadiah lepas dan buat juga 2 buah layer, pada layer kedua buat lagi sebuah tombol ulang dengan nama yang sama seperti pada langkah 8 yaitu Tombol_ulang dan beri nama instance namenya juga “tbulang’. Keluar menuju scene utama.

Langkah 10 : Membuat movie clip kosong karet ketapel

Karet ketapel merupakan movie clip yang bisa meregang saat bola merah ditarik maupun dilepas. Movie clip ini hanya akan muncul nanti saat kita beri script. Ada dua jenis karet ketapel, karet ketapel 1 berada di belakang bola, sedangkan karet ketapel 2 berada di depan bola. Masing-masing berada pada layer ketapel 1 dan ketapel 2. 

Klik layer ketapel 1, buat sebuah bola atau kotak, konversi objek ini menjadi movie clip, dan beri nama karet serta nama instance namenya karet1. Masuk ke dalam movie clip karet dan hapus benda yang telah anda buat sehingga hanya tersisa movie clip kosong dan jangan lupa keluar menuju scene utama. Jika berhasil, akan tampak sebuah titik kecil putih. Copas movie clip karet ini, lalu letakkan pada layer ketapel2, ganti instance name movie clip hasil copas tadi menjadi karet2, sehingga sekarang Anda mempunyai 2  movie clip kosong yang masing-masing bernama karet1 dan karet2. Letakkan kedua movie clip ini di luar area aplikasi.

 

Langkah 11 : Membuat dynamic Text

Tambahkan satu layer lagi di atas layer Hadiah. Buat lima buah dynamic text, beri nama kelima dynamic text tersebut dengan nama txt_Vo, txt_sudut, txt_Dx, txt_Dy  dan txt_Waktu. 

txt_Vo berfungsi menampilkan kecepatan awal benda, txt_sudut akan menampilkan sudut awal te,bakan, txt_Dx berfungsi menampilkan nilai selisih jarak mendatar, txt_Dy berfungsi menampilkan nilai seslisih jarak vertikal, dan txt_Waktu berfungsi menampilkan waktu dalam satuan detik.

 

Langkah 12 : Membuat Movie clip Text bergerak

Agar txt_Vo dan txt_sudut dapat bergerak mengikuti arah perputaran ketapel, susun kedua text tersebut secara vertikal, seleksi keduanya dan konversi menjadi movie clip dengan nama mc_var.

Tutorial ini bersambung.......
Silahkan download source flashnya Game_Gerak_Parabola.fla

Tutorial Flash : Membuat Tombol Slider Mirip Android

Jika Anda sering mengatur Brightness pada HP android, Anda pasti familiar dengan tombol slider yang apabila digeser, maka secara otomatis mengatur persentasi daya terang dari HP anda. Tombol slider dalam suatu aplikasi memiliki peran penting yaitu mengubah variabel (misal volume, persentase dll) sesuai yang diinginkan berdasarkan posisi dari slider. Pada tutorial kali ini saya akan mencob berbagi kepada pembaca bagaimana membuat tombol slider sederhana yang mirip Android. Tutorial ini menggunakan Adobe Flash CS versi berapapun.

Langkah 1

Buka Adobe Flash CS dan pilih Action Script 3.0. Atur ukuran pixel aplikasi pada bagian properti menjadi 300 x 100 pixel. Pilih warna background hitam.

Langkah 2

Buat 4 buah layer dan beri nama masing-masing layer “tombol”, “line1”, “Text” dan  “Actions”. Atur posisi agar layer line1 berada paling bawah diikuti layer text, tombol dan Actions paling atas.

Langkah 3

Klik layer line1 dan buat sebuah garis berwarna abu-abu menggunakan Line Tool (N) dengan panjang 200 pixel dan ketebalan stroke 1.00. Tempatkan garis ini kira-kira berada di tengah-tengah area kerja. Namun Anda harus mengingat titik kordinat x dan y garis ini. Dalam tutorial ini saya memberikan nilai X: 20 dan Y: 50. Garis ini berfungsi sebagai penanda jejak gerakan slider nantinya.

Langkah 4

Kunci layer line 1 (klik tanda gembok kecil) dan Klik layer text. Buat sebuah text kecil menggunakan Text Tool (T) berkuran 14 pt yang cukup untuk 3 digit angka. Letakkan text ini di sebelah kanan dari garis. Ubah tipe text ini menjadi Dynamic Text dan beri nama pada instance namenya “nilai”. Kunci layer ini jika sudah selesai.

Langkah 5

Langkah berikutnya adalah membuat tombol bulat. Aktifkan layer tombol lalu buat sebuah lingkaran berukuran 30 x 30 pixel tanpa stroke. Gunakan warna fill yang sama dengan warna movie clip garis biru yang sudah Anda buat. Seleksi lingkaran ini dan atur nilai alpha dari warna fill ini sebesar 50%. Perhatikan gambar.

Langkah 6

Ubah objek lingkaran ini menjadi bentuk tombol. Caranya tekan tombol F8 dan pilih Button. Pastikan titik registrasi berada di titik pusat lingkaran. Beri nama tombol ini dengan nama “tombol_bulat”.

Langkah 7

Klik 2 kali tombol bulat untuk masuk ke dalam layer tombol bulat. Anda akan menemukan 4 frame yang berbeda yaitu Up, Over, Down, dan Hit. Klik kanan pada frame Down dan pilih Insert keyframe. Pada frame ini, kita akan membuat perbedaan bentuk tombol dengan frame Up dan Over.  Tambahkan stroke setebal 2.00 berwarna biru muda pada lingkaran ini menggunakan Ink Bottle Toon (S). Pastikan nilai alpha dari stroke ini 100 %. Adapun nilai alpha fill tetap 50 %.

Langkah 8

Masih berada di dalam layer tombol bulat. Tambahkan satu layer baru di atas di atas layer1 dan akan muncul layer2. Klik layer 2 dan buat sebuah lingkaran kecil berukuran 50x50 pixel dengan warna yang sama dengan warna garis, nilai alpha lingkaran kecil ini 100 %. tempatkan lingkaran kecil ini satu pusat dengan lingakaran besar.

Langkah 9

Keluar menuju scene 1, klik tombol bulat dan tekan F8 untuk mengubahnya menjadi movie clip. Pilih movie clip dan pastikan titik registrasi berada di tengah. Beri nama movie clip ini “tombol”atau apapun namanya. Tujuan mengubah tombol menjadi movie clip yaitu Action Script 3.0 tidak dapat bekerja langsung pada tombol, tidak seperti pada action script 2.0.

Beri nama instance name dari movie clip ini dengan nama “tombol”. Ingat bahwa kita akan bekerja pada Action Script menggunakan nama ini.

Langkah 10

Kita akan masuk pada pengetikan Action script. Klik layer Actions dan tekan F9 lalu ketikkan baris script di bawah ini.

addEventListener(Event.ENTER_FRAME, fl_EnterFrameHandler);

function fl_EnterFrameHandler(event:Event):void

{

                tombol.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

                function fl_ClickToDrag(event:MouseEvent):void

                {

                                tombol.startDrag();

                }

                stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);

                function fl_ReleaseToDrop(event:MouseEvent):void

                {

                                tombol.stopDrag();

                }

}

Makna dari script di atas adalah bila mouse di tekan pada movie clip tombol, maka otomatis tombol akan bergerak mengikuti mouse, saat mouse di lepas, tombol akan berhenti di posisi terakhirnya. Coba lakukan test movie (Ctrl+Enter). Jika benar lanjutkan ke langkah berikutnya.

Langkah 11

Kita akan membuat movie clip tombol bergerak mendatar, tidak bisa naik dan turun, oleh karena itu kita perlu mengunci agar movie clip tersebut hanya bergerak pada satu posisi y saja. tambahkan baris berwarna merah berikut berikut dan lakukan test movie.

function fl_EnterFrameHandler(event:Event):void

{

                tombol.y = 50;

                tombol.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

hasilnya adalah movie clip tombol tidak dapat bergerak naik dan turun, akan tetapi, movie clip tombol ini masih bergerak terlalu melebar melebihi garis. Kita perlu menambahkan baris script yang berfungsi sebagai pengunci horizontal agar movie clip hanya bergerak sebatas ujung ke ujung garis. Ketik atau copy baris script berwarna merah berikut dan lakukan test movie.

function fl_EnterFrameHandler(event:Event):void

{

                tombol.y = 50;

                if (tombol.x < 20)

                {

                                tombol.x = 20;

                }

                if (tombol.x>220)

                {

                                tombol.x = 220;

                }

                tombol.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

Maknanya bila kordinat x tombol kurang dari 20, maka tombol akan terhenti di posisi 20, bila lebih dari 220 maka tombol akan berhenti di 220. Angka 20 dan 220 muncul tergantung peletakan posisi garis mula-mula. Posisi awal dari garis adalah 20, karena panjang garis adalah 200, maka kordinat ujung kanannya adalah 220.

Langkah 12

Kita akan mencoba membuat agar movie clip garis berwarna biru yang dapat berubah panjangnya ketika tombol digeser, sisipkan script berwarna merah berikut :

var garis_biru:Shape = new Shape();

addChild(garis_biru);

function fl_EnterFrameHandler(event:Event):void

{

             tombol.y = 50;

             if (tombol.x < 20)

             {

                tombol.x = 20;

             }

             if (tombol.x > 220)

             {

                tombol.x = 220;

             }

             garis_biru.graphics.clear();

             garis_biru.graphics.lineStyle(2, 0x0099FF, 1);

             garis_biru.graphics.moveTo(20,50);

             garis_biru.graphics.lineTo(tombol.x,50);

            

             tombol.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

Langkah 13

Untuk memunculkan nilai dari tombol yang digeser pada text. Sisipkan baris script merah berikut.

             garis_biru.graphics.clear();

             garis_biru.graphics.lineStyle(2, 0x0099FF, 1);

             garis_biru.graphics.moveTo(20,50);

             garis_biru.graphics.lineTo(tombol.x,50);
             nilai.text = String((tombol.x - 20)/2);

           

Nilai yang muncul pada kotak text berkisar antara 0 – 100. Nilai ini diperoleh dari posisi tombol dikurang dengan 20 lalu hasilnya dibagi dengan 2. Jika Anda menginkan rentang nilai yang lain, hal tersebut dapat dilakukan dengan merubah formula yang tertera di atas.

Sekian tutorial saya kal ini, Anda dapat mengunduh source code pada link di bawah ini.
Slider.fla