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 dengan dasar teori drag n’ drop. Apa sich drag n’ drop itu? Drag n’ drop itu istilah buat suatu obyek 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 kita ngasih script di frame, nah pada scrip itu membaca instance name dari movie clip target dan sasaran. Ada lagi yang menggunakan “movie script”, yaitu script ditulis pada movie clip 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 ya langsung 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, maka akan 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 petunjuk permainannya. (Lihat gambar bawah) 4. Next, kamu bikin layer baru terus kasih nama layer “target”, pada layer ini buat lingkaran bulat sejumlah lima dengan warna yang sama misal warna putih, pada tiap lingkaran kamu beri “teks” nama warna dalam bahasa Inggris, misal : RED, GREEN,
BLUE, YELLOW, PURPLE. Biar tiap lingkaran sama persis, kamu nggak perlu bikin satu per satu, BUT, kamu duplikat aja pake CTRL D ……. Selanjutnya, tiap lingkaran kamu jadikan movie clip, truz disetiap lingkaran kamu ganti nama instance name-nya di bagian properties menjadi target1, target2, target3, target4 dan target5. Terserah kamu mau ngasih nama yang mana, misal untuk movieclip RED kamu kasih nama instance name-nya target1, BLUE instance name-nya target2 dst. PENTING : Instance name sebuah movie clip itu beda dengan name symbol. Kalau name symbol itu berarti kita memberi nama sebuah symbol, kalaupun pada saat kita menekan F8 (Convert to symbol) kita nggak kasih nama buat symbol baru entah itu dijadikan graphyc, movie clip atau button pasti secara otomatis Flash akan memberikan 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 nggak ngasih nama instance name-nya, itu nggak ngaruh sama kinerja symbol. Makanya Flash nggak otomatis ngasih nama instance name, tapi kita sendiri yang harus memberi nama. Untuk pemberian nama instance name itu sebaiknya ada beberapa hal yang musti kamu 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 lima lingkaran dengan ukuran sama persis dengan lingkaran target yang tadi. Trus, setiap lingkaran kasih warna sesuai dengan soal. Nah, habis dikasih warna lalu kamu jadikan movie clip. OK, jangan lupa kita juga ngasih nama instance name-nya, tapi kali ini namanya bukan 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 nama instance name : “target1”, maka untuk lingkaran sasaran yaitu lingkaran dengan warna merah kamu kasih nama instance name-nya “sasaran1”. Paham nggak..??? Sebenarnya nggak urut nggak apa-apa, tapi nanti di penulisan skrip biar gampang..untuk pemberian nama juga nggak harus pake nama target atau sasaran…Seperti kata William Shakespeare : Apalah arti sebuah nama…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 di bawah layer sasaran…harusnya posisi layer sasaran di bawah layer target. Kenapa??? Ada yang tahu…??? Karena nantinya kita akan mendrag lingkaran dengan teks ke atas lingkaran warna, jadi kalau posisi target di bawah nantinya jadi nggak kelihatan….jadi kamu pindah dulu posisi layer target supaya di atas layer sasaran…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” terus ketikkan script di bawah ini pada action-frame. stop(); //---Skrip buat warna merah titik_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 kamu jalankan 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 baru satu lingkaran nah kalau buat lingkaran yang lain gimana..???? Buat yang belum berhasil…silahkan dicoba lagi..kamu cek dulu skripnya error nggak?? Kalau error..dicek lagi..Dijalankan nggak error tapi nggak bisa..kamu cek nama-nama instance namenya..cocok nggak..??? 12. Lanjut, kamu tahu caranya ngasih skrip buat lingkaran yang lain..mudah kok.. tinggal copy paste aja dari yang tadi yang dirubah Cuma ganti nama instance name buat target dan sasaran juga sama posisi _x dan _y nya. OK dech kalo gitu lihat skrip di bawah ini : stop(); //---Skrip buat warna merah titik_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..!!"; } }; //---Skrip buat warna biru titik_Xjwb2=target2._x; titik_Yjwb2=target2._y; target2.onPress=function() { this.startDrag(); }; target2.onRelease=function(){ this.stopDrag(); if(eval(this._droptarget)==sasaran2){ this._x=sasaran2._x; this._y=sasaran2._y; keterangan.text="BENAR...KAMU PANDAI..!!"; }else{ this._x=titik_Xjwb2; this._y=titik_Yjwb2; keterangan.text="SALAH..COBA LAGI..!!"; } }; Yang di kasih kotak garis pedhot-pedhot itu skrip yang pertama tadi, nah kamu lihat kalau skrip yang kedua itu nulisnya di bawah skrip yang tadi..yups..benar sekali skrip 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 mulai dari atas dulu ya … //---- itu maksudnya komentar, jadi komentar itu tidak diangap suatu skrip, dia cuman sebagai penanda aja, penulisannya di setiap awal teks skrip yang kamu kasih tanda (//) berarti dia dianggap nggak ada. Symbol // itu untuk per baris kalau mau kasih komentar 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 disini setiap movie clipnya mempunyai posisi yang berlainan. Untuk penulisan deklarasi perintah, nggak harus seperti contoh, kamu bisa menulis dengan gaya kamu sendiri contoh : posisiX1=target1._x; posisiY1=target1._y; ..dst target1.onPress=function() { this.startDrag(); }; Maksudnya : Kita membuat fungsi dari target1(instance name) dengan mengambil perintah “onPress”, maksud dari onPress adalah pada saat mouse mengenai obyek dan di klik tahan. this.startDrag(); …..maksudnya this adalah penunjuk dari movie clip, nanti aku jelaskan ada lagi _root. ‘this” digunakan jika masih satu level, lalu perintah startDrag();…maksudnya mulai mendrag. Jadi arti dari perintah ini adalah membuat fungsi (function()) untuk mulai membuat movie clip menjadi tombol yang bisa di drag. Maksudnya : 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..!!"; } }; Kita membuat fungsi lagi untuk target 1 dengan mengambil perintah onRelease. Dan stopDrag, jadi pada saat di klik dan dilepaskan, maka perintah startDrag yang tadi diganti dengan stopDrag (dijatuhkan). Kemudian masuk ke perintah kondisi, apakah itu…?? Yaitu diawali perintah if, jika (eval(this._droptarget)==sasaran1) …jika dijatuhkan dan benar-benar mengenai instancename sasaran1, maka disuruh merubah nilai koordinat _x dan _y dari this (movie clip) menjadi sama dengan posisi koordinat _x dan _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, maka akan 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 mau sedikit baca-baca buku, sinau skrip pasti nggak terlalu rumit..!!!! OK …ya selanjutnya untuk lingkaran yang lain coba kamu beri skrip sendiri..sekalian belajar..caranya gampang, cuman ganti beberapa skrip. Di atas khan udah aku kasih contoh tinggal nerusin dikit …!!!!
TRIK DAN TIPS : Buat kamu yang mau nulis skrip di kotak dialog action skrip pada flash, mungkin akan menemui kesulitan kalau tempat nulisnya terlalu sempit. Nah…ini bisa kalian akali dengan menuliskan skripnya di NOTEPAD dulu,..biar tampilannya lebar.. terus gampang copy-pastenya. Kamu copy dulu teks skrip di action skrip flash terus kamu paste di Notepad. Nah kamu ganti nilai-nilai parameter di Notepad aja…kalau dah yakin benar, copy semua lalu paste di kotak dialog action script flash… It’s easy..allright..??? 13. Well done…gampang nggak tutorial ini??? Di atas aku kasih level : advance untuk tutorial ini dengan maksud memang tutorial ini aku buat bagi yang dah bisa paling nggak script dasar dan animasi dasar. 14. Sekarang…akan aku tambahi masalah, buat kalian..apa masalahnya..?? gini kalo diperhatikan kuis yang barusan kamu bikin khan masih dalam taraf “penak” bagi yang menjalankan.. maksud aku gini. Pengguna akan bebas mencoba satu per satu andai salah..iya tho?? Nah biar lebih ada tantangannya kenapa ngak dikasih batas waktu? 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 text dynamic 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 skrip pada “timer_mc” tersebut. Klik movieklip “timer_mc” terus tekan F9 lalu kamu tulis skrip berikut ini :
onClipEvent (load) { time = 60 kontrol = 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 dan waktu masih sisa, kita bisa klik tombol “FINISH”, tapi kalo belum selesai, kalau menekan tombol “FINISH” nggak akan bisa jadi harus menyelesaikan semua baru klik tombol “FINISH” (Lihat gambar)
19. By the way…langkah ke-17 dah kamu kerjakan tho..?? Nah di situ ada sript yang berbunyi : _root.gotoAndPlay("Game Over"); Yups…maksudnya, _root itu mencari dari root keseluruhan animasi, ditambah gotoAndPlay(“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 kamu bikin dulu layer baru kasih nama “akhir kuis” terus di frame ke-2, kamu kasih keyframe (F6), lalu beri frame label “Game Over”, isinya apa…???? (Lihat gambar bawah)
(Tampilan frame Game Over) 20. Terus….sekalian kamu bikin keyframe satu lagi masih di layer yang sama, kasih frame label “Menang”, tampilannya gimana…??? (Lihat gambar bawah)
(Tampilan frame Menang)
Tapi jangan lupa di setiap frame Game Over atau Menang kamu kasih tombol buat kembali ke awal, trus kalian kasih scriptnya sekalian … on(Release) { gotoAndPlay(1); } 21. Dah hampir selesai nih….nah di langkah terakhir ini kita mau menyelesaikan urusan yang 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 error pasti ada yang nggak beres dengan projek kamu atau mungkin otak kamu yang nggak beres… ya, coba dech kamu teliti lagi.. Terus bagi yang berhasil selamat … ya..!!! Jangan lupa kamu tambahin satu layer lagi untuk ngasih skrip stop(), kalo nggak di-stop nanti pasti mbablas..!!!!setiap frame di-stop ya..!!! 23. Untuk keterangan secara mendetail mengenai script-script yang barusan kamu tulis nanti di kelas aja tak terangke, masalahe “dowooo….oooooo” banget, makan ruang dan waktu kalo tak jelaske di sini. Tapi sebenarnya kalo kamu mau membaca dan merenungkan serta menghayati Al Kitab Script pasti kamu akan menemukan jawabannya..he..he..he… 24. Nah sekarang ada tugas buat kamu…!!!!! OK, kamu lihat sekali lagi program di atas, ketika kamu salah dalam menempelkan lingkaran atau benar …indikator kesuksesannya khan Cuma tulisan “KAMU SALAH..COBA LAGI” atau “BENAR..!!”..gitu doang tho??? Nah..sekalian basah terus tadi mandi..sekarang sekaligus mandi besar …(opo maksude..??) tak kasih tugas untuk “memodifikasi” program ini. …Ya umpamakan kalian dapat ilmu baru itu seperti dibelikan sepeda motor baru,…Biar tampilannya lebih “GARANG”, kamu modifikasi, misal kasih cat air brush pake cat air, ganti shock ceper, ban ganti kotak, nggak dikasih rem, knalpot dan sedel 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 hanya sekedar 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 Pak Ghuru, ada bonus nilainya..!!!
Drag n’ Drop itu dalam prakteknya banyak sekali kegunaannya … KalAU kamu kreatif, 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 nanti pasti lebih mudheng.. Kalau kamu pernah lihat CD EDU GAMES …semacam CD Interaktif tapi buat anakanak…game-game semacam ini bayak sekali ragamnya, nanti juga tak buatke tutorial misal sampai di acak untuk kepingan puzzle-nya, trus kalo yang model ini khan kepingan puzzle nggak bisa ditempatkan di tempat yang nggak bener, kalo salah pasti kembali ke posisi awal …nah biar lebih seru kita juga bisa bikin kepingan puzzle bisa kita taruh di tempat yang salah, tapi game nggak akan Finish kalo belum di pindah ke tempat yang betul… Wah, lebih seru lagi tuch scriptnya!!! Pokoknya ini dulu kamu pelajari, lain waktu pasti dech selama umur aku masih panjang 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 semoga berguna bagi kita semua … Amin. Wassalamu’alaikum Wr. Wb.
