ARTIKEL FLASH “MEMBUAT KUIS DRAG N’ DROP VERSI I” · PDF fileganti nama...

ARTIKEL FLASH“MEMBUAT KUIS DRAG N’ DROP VERSI I”

LEVEL ARTIKEL : ADVANCE (Mahir)Oleh : Agung Nugroho

Assalamu’alaikum Wr. Wb.Pada kesempatan kali ini kita akan mencoba membuat permainan sederhana dengandasar teori drag n’ drop. Apa sich drag n’ drop itu? Drag n’ drop itu istilah buat suatuobyek yang bisa di-drag (Ditekan mouse dan digeser) dan di-drop (dijatuhkan/dilepaskan)…jadi cara bodone di-klik, tahan, geser lalu lepaskan di tujuan.

Untuk membuat kuis drag n drop itu ada beberapa cara, yang paling mudah itu kitangasih script di frame, nah pada scrip itu membaca instance name dari movie clip targetdan sasaran. Ada lagi yang menggunakan “movie script”, yaitu script ditulis pada movieclip terus membaca titik koordinat dari target dan sasaran.

Untuk artikel versi I ini, kita akan ngebahas drag n drop pake script di frame dulu. OK yalangsung aza…

1. Buat file baru ukuran 800 x 600 piksel.2. Buat background dengan ukuran yang sama pake RECTANGLE TOOL, habis itu

buat layer baru kasih nama judul, trus ketikkan judulnya. (Lihat gambar bawah)

Ya, rencananya nanti kita mau bikin kuis “mencocokkan nama dengan warna”,misal ada tulisan “RED” kalau digeser ke lingkaran yang berwarna merah, makaakan muncul pesan : “BENAR” kalau keliru, maka akan kembali ke posisi awal.Are you ready ….!!! Let’s get the party..!!!

3. Kamu bikin layer baru dulu, kasih nama petunjuk, terus kamu tuliskan petunjukpermainannya. (Lihat gambar bawah)

4. Next, kamu bikin layer baru terus kasih nama layer “target”, pada layer ini buatlingkaran bulat sejumlah lima dengan warna yang sama misal warna putih, pada tiaplingkaran kamu beri “teks” nama warna dalam bahasa Inggris, misal : RED, GREEN,

BLUE, YELLOW, PURPLE. Biar tiap lingkaran sama persis, kamu nggak perlu bikinsatu per satu, BUT, kamu duplikat aja pake CTRL D …….

Selanjutnya, tiap lingkaran kamu jadikan movie clip, truz disetiap lingkaran kamuganti nama instance name-nya di bagian properties menjadi target1, target2,target3, target4 dan target5. Terserah kamu mau ngasih nama yang mana, misaluntuk movieclip RED kamu kasih nama instance name-nya target1, BLUE instancename-nya target2 dst.

PENTING :Instance name sebuah movie clip itu beda dengan name symbol. Kalau namesymbol itu berarti kita memberi nama sebuah symbol, kalaupun pada saat kitamenekan F8 (Convert to symbol) kita nggak kasih nama buat symbol baru entah itudijadikan graphyc, movie clip atau button pasti secara otomatis Flash akanmemberikan nama symbol secara urut misal symbol 1, symbol 2 dst.Tapi instance name itu harus kita isikan sesuai dengan tujuan kita membuat symbol.Instance name seperti nama alias, digunakan untuk keperluan animasi tingkat lanjut,sebagai nama ganti sebuah symbol dalam penulisan script dll. Kalaupun kita nggakngasih nama instance name-nya, itu nggak ngaruh sama kinerja symbol. MakanyaFlash nggak otomatis ngasih nama instance name, tapi kita sendiri yang harusmemberi nama.Untuk pemberian nama instance name itu sebaiknya ada beberapa hal yang mustikamu pahami, ya kurang lebih hampir sama seperti ngasih nama variabel, misal :1. Biasakan pake huruf kecil.2. Jangan diawali dengan nomor, misal 1taget, 2target dst.3. Jangan pake karakter khusus, misal !,@,#,$,%,=<+ dll.4. Jangan pake spasi, gunakan aja Underscore (cth : target_1)5. Jangan ngasih nama yang ada hubungan relationship dengan istilah dalam

Flash, misal : null,movie,graphyc,varibles dll.

Lihat gambar bawah :

5. OK, habis itu kamu bikin layer baru lagi, kasih nama sasaran. Truz, kamu bikin limalingkaran dengan ukuran sama persis dengan lingkaran target yang tadi. Trus,setiap lingkaran kasih warna sesuai dengan soal. Nah, habis dikasih warna lalukamu jadikan movie clip.

OK, jangan lupa kita juga ngasih nama instance name-nya, tapi kali ini namanyabukan target tapi beri nama sasaran1, sasaran2 dst sampai sasaran5.

TAPI, biar urut ada beberapa triknya : apakah itu?Gini, misal tadi di lingkaran target yang ada teks “RED” itu kamu kasih namainstance name : “target1”, maka untuk lingkaran sasaran yaitu lingkaran denganwarna merah kamu kasih nama instance name-nya “sasaran1”.Paham nggak..???Sebenarnya nggak urut nggak apa-apa, tapi nanti di penulisan skrip biargampang..untuk pemberian nama juga nggak harus pake nama target atausasaran…Seperti kata William Shakespeare : Apalah arti sebuahnama…ceee..ileehh.

(Lihat gambar bawah)

6. NEXT,…ini yang paling mumetke..yaitu ngasih skrip biar bisa dijalankan.

7. OH Ya,…. Sorry semua..hampir kelupaan..kamu lihat posisi layer target khan dibawah layer sasaran…harusnya posisi layer sasaran di bawah layer target.Kenapa??? Ada yang tahu…??? Karena nantinya kita akan mendrag lingkarandengan teks ke atas lingkaran warna, jadi kalau posisi target di bawah nantinya jadinggak kelihatan….jadi kamu pindah dulu posisi layer target supaya di atas layersasaran…caranya tinggal klik geser ke atas pada layer target.

8. TAPI SEBELum masuk ke action script, kamu bikin dulu layer baru lagi kasih nama“keterangan” terus kamu bikin text dynamic. Kasih font Arial ukuran 20 ditebalkan,terus geser membentuk kotak AGAK PANJANG garis terputus-putus…Pada properties TEXT bawah pada bagian instance name text kamu kasih nama“keterangan”

9. Kembali ke action script … kamu bikin layer baru kasih nama “actionscript” terusketikkan script di bawah ini pada action-frame.

stop();

//---Skrip buat warna merahtitik_Xjwb1=target1._x;titik_Yjwb1=target1._y;

target1.onPress=function() {this.startDrag();

};target1.onRelease=function(){

this.stopDrag();if(eval(this._droptarget)==sasaran1){

this._x=sasaran1._x;this._y=sasaran1._y;

keterangan.text="BENAR…. KAMU PANDAI..!!";}else{

this._x=titik_Xjwb1;this._y=titik_Yjwb1;

keterangan.text="SALAH..COBA LAGI..!!";}

};

10.OK…sampai sini dulu coba kamu test movie pake CTRL ENTER, trus kamujalankan yang lingkaran RED kamu geser ke Lingkaran merah. Berhasil nggak..??(Lihat gambar)

Projek FLA-ne

Properties pada text dynamic.

Test movie..Berhasil..!!!!!

11.Tapi tunggu dulu..jangan senang dulu kalau udah bisa…masalahnya itu khan barusatu lingkaran nah kalau buat lingkaran yang lain gimana..????Buat yang belum berhasil…silahkan dicoba lagi..kamu cek dulu skripnya errornggak?? Kalau error..dicek lagi..Dijalankan nggak error tapi nggak bisa..kamu ceknama-nama instance namenya..cocok nggak..???

12.Lanjut, kamu tahu caranya ngasih skrip buat lingkaran yang lain..mudah kok.. tinggalcopy paste aja dari yang tadi yang dirubah Cuma ganti nama instance name buattarget dan sasaran juga sama posisi _x dan _y nya.

OK dech kalo gitu lihat skrip di bawah ini :

stop();

//---Skrip buat warna merahtitik_Xjwb1=target1._x;titik_Yjwb1=target1._y;





keterangan.text="BENAR...KAMU PANDAI..!!";}else{



};

//---Skrip buat warna birutitik_Xjwb2=target2._x;titik_Yjwb2=target2._y;








};

Yang di kasih kotak garis pedhot-pedhot itu skrip yang pertama tadi, nah kamu lihatkalau skrip yang kedua itu nulisnya di bawah skrip yang tadi..yups..benar sekaliskrip untuk yang ke-2 itu dijadikan satu frame dengan skrip yang ke-1.

Kamu tinggal ganti beberapa script aja, biar lebih paham akan aku jelaskan mulaidari atas dulu ya …

//---- itu maksudnya komentar, jadi komentar itu tidak diangap suatu skrip, dia cumansebagai penanda aja, penulisannya di setiap awal teks skrip yang kamu kasih tanda(//) berarti dia dianggap nggak ada. Symbol // itu untuk per baris kalau mau kasihkomentar yang lebih dari satu baris kamu bisa ganti pake tanda /*..ditutup */ cth :

//--ini komentar 1 baris

/*----ini komentar..Disini skrip nggak jalan---*/

Untuk komentar cara penulisan ini udah jamak di setiap bahasa pemrograman,seperti PHP juga pake simbol ini.

Stop()…udah mudheng lah..kalo nggak mudheng ya kebangeten..

titik_Xjwb1=target1._x;titik_Yjwb1=target1._y;

maksudnya :titik_Xjwb1=target1._x; adalah kita membuat semacam “deklarasi perintah”yaitu instance name dari target 1 pada posisi x (horisontal) cara penulisannya pake_x kalau _y itu melihat simbol pada posisi y (vertikal).

Pada tutorial ini deklarasi perintah harus beda di setiap movie clip, pasalnya disinisetiap movie clipnya mempunyai posisi yang berlainan.Untuk penulisan deklarasi perintah, nggak harus seperti contoh, kamu bisa menulisdengan gaya kamu sendiri contoh :

posisiX1=target1._x;posisiY1=target1._y;..dst


};

Maksudnya :Kita membuat fungsi dari target1(instance name) dengan mengambil perintah“onPress”, maksud dari onPress adalah pada saat mouse mengenai obyek dan diklik tahan.this.startDrag(); …..maksudnya this adalah penunjuk dari movie clip, nanti akujelaskan ada lagi _root. ‘this” digunakan jika masih satu level, lalu perintahstartDrag();…maksudnya mulai mendrag.Jadi arti dari perintah ini adalah membuat fungsi (function()) untuk mulai membuatmovie clip menjadi tombol yang bisa di drag.

Maksudnya :target1.onRelease=function(){






};

Kita membuat fungsi lagi untuk target 1 dengan mengambil perintah onRelease. DanstopDrag, jadi pada saat di klik dan dilepaskan, maka perintah startDrag yang tadidiganti dengan stopDrag (dijatuhkan).Kemudian masuk ke perintah kondisi, apakah itu…??Yaitu diawali perintah if, jika (eval(this._droptarget)==sasaran1) …jika dijatuhkandan benar-benar mengenai instancename sasaran1, maka disuruh merubah nilaikoordinat _x dan _y dari this (movie clip) menjadi sama dengan posisi koordinat _xdan _y dari nilai x dan y sasaran1.Ditambah memberi nilai instance name “keterangan”, yaitu dynamic text berupa teks“BENAR …KAMU PANDAI..”.Else …tetapi jika kondisi yang tadi nggak terpenuhi, maksudnya salah/gagal, makaakan masuk ke statement yang bawah yaitu :Nilai koordinat _x dan _y dari this (movie clip) kembali ke deklarasi awal yaitu posisi“titik_Xjwb1” yang juga sama dengan target1._x; yaitu posisi awal.Dan memberi nilai instance name dynamic text-nya “SALAH..COBA LAGI..”

Gimana mudheng..??? ya emang nggak semudah yang dikira..tapi kalau kamu mausedikit baca-baca buku, sinau skrip pasti nggak terlalu rumit..!!!!

OK …ya selanjutnya untuk lingkaran yang lain coba kamu beri skrip sendiri..sekalianbelajar..caranya gampang, cuman ganti beberapa skrip. Di atas khan udah akukasih contoh tinggal nerusin dikit …!!!!

TRIK DAN TIPS :Buat kamu yang mau nulis skrip di kotak dialog action skrip pada flash, mungkinakan menemui kesulitan kalau tempat nulisnya terlalu sempit.Nah…ini bisa kalian akali dengan menuliskan skripnya di NOTEPAD dulu,..biartampilannya lebar.. terus gampang copy-pastenya.Kamu copy dulu teks skrip di action skrip flash terus kamu paste di Notepad. Nahkamu ganti nilai-nilai parameter di Notepad aja…kalau dah yakin benar, copy semualalu paste di kotak dialog action script flash…It’s easy..allright..???

13.Well done…gampang nggak tutorial ini??? Di atas aku kasih level : advance untuktutorial ini dengan maksud memang tutorial ini aku buat bagi yang dah bisa palingnggak script dasar dan animasi dasar.

14.Sekarang…akan aku tambahi masalah, buat kalian..apa masalahnya..?? gini kalodiperhatikan kuis yang barusan kamu bikin khan masih dalam taraf “penak” bagiyang menjalankan.. maksud aku gini. Pengguna akan bebas mencoba satu per satuandai salah..iya tho?? Nah biar lebih ada tantangannya kenapa ngak dikasih bataswaktu? Misal batas waktu pengerjaan kuis cuman 1 menit. Gimana caranya ?

15.OK..terlanjur basah mandi sekalian aja ya..!! sekalian mumet gitu..!!! he..he..

16.Kamu buat layer baru kasih nama “timer”. Trus, di layer “timer” kamu bikin textdynamic ukuran 60, kasih nama variabel nya misal “time” (Lihat gambar)

17.Habis itu kamu jadikan movie clip untuk teks dynamic-nya kasih nama “timer_mc”.Kali ini kita nggak perlu kasih nama instance name, tapi kita langsung nulis skrippada “timer_mc” tersebut.Klik movieklip “timer_mc” terus tekan F9 lalu kamu tulis skrip berikut ini :

onClipEvent (load) {time = 60kontrol = 1;

}onClipEvent (enterFrame) {

kontrol++;if (kontrol == 12) {

kontrol = 1;time--;

if (time==0) {_root.gotoAndPlay("Game Over");}

}}

Keterangannya nanti aja ya…kita lanjutin dulu…Biar lebih bagus tampilannya kamu kasih kotak tersendiri (Lihat gambar)

18.NEXT, kamu bikin tombol “FINISH”, gunanya jika sudah “menjodohkan” semua danwaktu masih sisa, kita bisa klik tombol “FINISH”, tapi kalo belum selesai, kalaumenekan tombol “FINISH” nggak akan bisa jadi harus menyelesaikan semua baruklik tombol “FINISH” (Lihat gambar)

19.By the way…langkah ke-17 dah kamu kerjakan tho..?? Nah di situ ada sript yangberbunyi : _root.gotoAndPlay("Game Over");Yups…maksudnya, _root itu mencari dari root keseluruhan animasi, ditambahgotoAndPlay(“game Over”) berarti dia disuruh menuju ke frame yang dikasih label“Game Over” dan memainkannya.Yang jadi pertanyaan sekarang…khan, belum ada frame tersebut. Makanya kamubikin dulu layer baru kasih nama “akhir kuis” terus di frame ke-2, kamu kasihkeyframe (F6), lalu beri frame label “Game Over”, isinya apa…???? (Lihat gambarbawah)

(Tampilan frame Game Over)

20.Terus….sekalian kamu bikin keyframe satu lagi masih di layer yang sama, kasihframe label “Menang”, tampilannya gimana…??? (Lihat gambar bawah)

(Tampilan frame Menang)

Tapi jangan lupa di setiap frame Game Over atau Menang kamu kasih tombol buatkembali ke awal, trus kalian kasih scriptnya sekalian …

on(Release) {gotoAndPlay(1);

}

21.Dah hampir selesai nih….nah di langkah terakhir ini kita mau menyelesaikan urusanyang belum selesai dengan langkah no.18. Yaitu ngasih script buat tombol “FINISH”.OK…coba kamu tuliskan scriptnya berikut ini buat tombol “FINISH”..kamu klik tombol “FINISH”, lalu tekan F9 dan tulis :..

on(release){if((target1._x==sasaran1._x)&&

(target2._x==sasaran2._x)&&(target3._x==sasaran3._x)&&(target4._x==sasaran4._x)&&(target5._x==sasaran5._x)){

gotoAndStop("Menang");}

else {keterangan.text="BELUM SEMUA DI COCOKKAN..!!";

}}

22.Langkah terakhir CTRL ENTER …tes movie kamu!!! Error yach?? Walah kalau errorpasti ada yang nggak beres dengan projek kamu atau mungkin otak kamu yangnggak beres… ya, coba dech kamu teliti lagi..Terus bagi yang berhasil selamat … ya..!!!Jangan lupa kamu tambahin satu layer lagi untuk ngasih skrip stop(), kalonggak di-stop nanti pasti mbablas..!!!!setiap frame di-stop ya..!!!

23.Untuk keterangan secara mendetail mengenai script-script yang barusan kamu tulisnanti di kelas aja tak terangke, masalahe “dowooo….oooooo” banget, makan ruangdan waktu kalo tak jelaske di sini. Tapi sebenarnya kalo kamu mau membaca danmerenungkan serta menghayati Al Kitab Script pasti kamu akan menemukanjawabannya..he..he..he…

24.Nah sekarang ada tugas buat kamu…!!!!!OK, kamu lihat sekali lagi program di atas, ketika kamu salah dalam menempelkanlingkaran atau benar …indikator kesuksesannya khan Cuma tulisan “KAMUSALAH..COBA LAGI” atau “BENAR..!!”..gitu doang tho???Nah..sekalian basah terus tadi mandi..sekarang sekaligus mandi besar …(opomaksude..??) tak kasih tugas untuk “memodifikasi” program ini.

…Ya umpamakan kalian dapat ilmu baru itu seperti dibelikan sepeda motorbaru,…Biar tampilannya lebih “GARANG”, kamu modifikasi, misal kasih cat air brushpake cat air, ganti shock ceper, ban ganti kotak, nggak dikasih rem, knalpot dansedel tukeran posisi dll…Seperti inilah ilmu itu kalo mau berkembang…

Tugas kamu adalah …ENG..ING..ENG…Kamu ganti indikator (cek drag n drop) tadi dengan animasi, jadi nggak hanyasekedar tulisan aja..misal jika SALAH akan muncul animasi Orang nangis dan suara“huuuu…uuu” terus kalau BENAR ada animasi orang “lompat-lompat” dan suara“berhasil..berhasil….berhasill..!!” (DORA kali ya..??)Ya pokoknya seperti itu dech…kalo udah berhasil nanti cepat-cepat hubungi PakGhuru, ada bonus nilainya..!!!

Drag n’ Drop itu dalam prakteknya banyak sekali kegunaannya … KalAU kamukreatif, kamu bisa bikin PUZZLE, TEBAK-TEBAKAN, MENJODOHKAN dll.

Coba kamu kembangkan aja misal menjodohkan gambar buah dengan namanya,logo klub sepakbola dengan pemainnya dll. Semakin kamu banyak praktek nantipasti lebih mudheng..

Kalau kamu pernah lihat CD EDU GAMES …semacam CD Interaktif tapi buat anak-anak…game-game semacam ini bayak sekali ragamnya, nanti juga tak buatketutorial misal sampai di acak untuk kepingan puzzle-nya, trus kalo yang model inikhan kepingan puzzle nggak bisa ditempatkan di tempat yang nggak bener, kalosalah pasti kembali ke posisi awal …nah biar lebih seru kita juga bisa bikin kepinganpuzzle bisa kita taruh di tempat yang salah, tapi game nggak akan Finish kalo belumdi pindah ke tempat yang betul… Wah, lebih seru lagi tuch scriptnya!!!

Pokoknya ini dulu kamu pelajari, lain waktu pasti dech selama umur aku masihpanjang dan diberi kesempatan nular-nularke ilmu pasti tak bikinke tutorial …rencananya sich, aku mau bikin buku ..tapi untuk saat-saat ini kayaknya belum bisa,masih repot.

OK…segini dulu tutorial jelek dan ra mudhengke ini, dengan harapan semogaberguna bagi kita semua … Amin.

Wassalamu’alaikum Wr. Wb.

ARTIKEL FLASH “MEMBUAT KUIS DRAG N’ DROP VERSI I” · PDF fileganti nama...

Documents

Transcript of ARTIKEL FLASH “MEMBUAT KUIS DRAG N’ DROP VERSI I” · PDF fileganti nama...