Saat anda kecil pasti sering memainkan jenis permainan ini. Ular Tangga adalah jenis permainan di mana pemain menggerakkan karakternya sesuai dengan nilai dadu. Apabila karakter menyentuh tangga bagian bawah maka karakter akan bergerak ke atas sampai ujung bagian atas tangga. Apabila karakter menyentuh kepala ular maka karakter akan turun sampai ekor ular. Pada tutorial kali ini kita akan membuatnya untuk dimainkan oleh 2 orang.
2. Klik tombol Insert Layer di timeline sebanyak 4 kali. Ubah nama masing-masing layer berdasarkan urutan paling atas menjadi script, pemain, ular tangga, angka, kotak.
3. Klik frame 1 layer kotak. Buatlah sebuah persegi di stage. Seleksi persegi tersebut dan tekan F8. Pada panel yang muncul masukkan kotak sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
4. Buka panel library dengan menekan Ctrl+L pada keyboard. Drag movie clip kotak di panel library ke stage hingga movie clip kotak di stage berjumlah 100.
5. Klik salah satu kotak dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan kotak1 sebagai instace name. Klik salah satu kotak lagi dan berikan kotak2 sebagai instace name. Lakukan hal ini pada seluruh movie clip kotak hingga masing-masing movie clip kotak memiliki instance name.
6. Letakkan seluruh movie clip kotak seperti gambar di bawah ini dan perhatikan instace name penempatannya:
7. Klik frame 1 layer angka. Buatlah 10 buah static text bertuliskan angka dari 1-100 dan tempatkan seperti pada gambar di bawah ini :
8. Klik frame 1 layer ular tangga. Buatlah 4 buah tangga (gunakan line tool untuk membuatnya) dan 4 buah ular (gunakan brush tool dengan tebal garis 10 untuk membuatnya) seperti gambar di bawah ini dan juga perhatikan penempatannya :
9. Klik frame 1 layer pemain. Buatlah sebuah lingkaran kecil berwarna merah. Seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan pemain1 sebagi name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
10. Seleksi movie clip pemain1 dan masukkan pemain1 sebagai instance name pada panel properties.
11. Buatlah sebuah lingkaran kecil berwarna biru. Seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan pemain2 sebagi name dan movie clip sebagi type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
12. Seleksi movie clip pemain2 dan masukkan pemain2 sebagai instance name pada panel properties.
13. Buatlah sebuah objek seperti gambar di bawah ini :
14. Seleksi objek tersebut dan tekan F8. pada panel yang muncul masukkan dadu_btn sebagi name dan movie clip sebagai type lalu tekan ok.
15. Seleksi movie clip dadu_btn di stage dan masukkan dadu_btn sebagai instance name pada panel properties.
16. Klik 2 kali movie clip dadu_btn untuk masuk ke dalam stagenya. Seleksi frame 2 sampai frame 7 dan tekan F6 pada keyboard.
17. Ubah bentuk objek di frame 2 menjadi seperti di bawah ini :
18. Ubah bentuk objek di frame 3 menjadi seperti di bawah ini :
19. Ubah bentuk objek di frame 4 menjadi seperti di bawah ini :
20. Ubah bentuk objek di frame 5 menjadi seperti di bawah ini :
21. Ubah bentuk objek di frame 6 menjadi seperti di bawah ini :
22. Ubah bentuk objek di frame 7 menjadi seperti di bawah ini :
23. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1
stop();
24. Tekan Ctrl+E untuk kembali ke stage scene 1. Klik frame 1 layer pemain dan buatlah sebuah button bertuliskan Jalankan. Seleksi button tersebut dan masukkan jalankan_btn sebagai instance name pada panel properties.
25. Buatlah sebuah dynamic text dengan Var giliran tampil.
26. Tempatkan seluruh objek yang dibuat tadi seperti gambar di bawah ini :
27. Seleksi frame 2 dan 3 pada layer script dan pemain lalu tekan F7. Klik frame 2 layer pemain dan buatlah sebuah button bertuliskan Coba lagi. Seleksi button tersebut dan masukkan coba_lagi sebagi instance name di panel properties.
28. Masih di frame 2 layer pemain, buatlah sebuah static text bertuliskan Pemain 1 menang. Tempatkan static text dan button di frame 2 layer pemain seperti gambar di bawah ini :
29. Klik frame 2 layer pemain dan buatlah sebuah button bertuliskan Coba lagi. Seleksi button tersebut dan masukkan coba_lagi sebagi instance name di panel properties.
30. Masih di frame 2 layer pemain, buatlah sebuah static text bertuliskan Pemain 2 menang. Tempatkan static text dan button di frame 2 layer pemain seperti gambar di bawah ini :
31. Klik frame 1 layer script dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
Pada setiap versi, Macromedia/Adobe Flash memiliki tampilan yang berbeda-beda. Perbedaan itu disebabkan juga pada penambahan fiturnya. Namun dari perbedaan tersebut sebenarnya ada yang fungsinya sama. Tampilan yang akan di bahas pada tutorial kali ini adalah tampilan pada Macromedia Flash 8. Untuk memulainya, pertama bukalah terlebih dahulu Macromedia Flash 8 maka akan tampil seperti gambar di bawah ini :
Klik pada gambar untuk memperbesar gambar
Perhatikan pada kotak dialog di tengah-tengah: 1. Open a Recent Item : membuka file berekstensi .fla yang terakhir anda buka di flash.
2. Create New : membuat file flash baru. Terdapat 7 pilihan tapi pada seluruh tutorial di sini menggunakan Flash Document.
3. Create from template : membuat file flash baru dengan template yang sudah disediakan.
Untuk melengkapi kesempurnaan pada sebuah tombol selain bentuknya yang dibuat bagus, kita dapat menambahkan suara pada tombol tersebut. Sebelum membaca tutorial di bawah ini anda harus sudah dapat membuat sebuah tombol di flash. Jika belum bisa membuat tombol silahkan baca tutorial dasar dasar membuat tombol. Hampir sama dengan memainkan suara pada flash, untuk memainkan suara pada sebuah tombol dapat dilakukan dengan dua cara yaitu menempatkan suara pada frame dan memainkan suara dengan menggunakan actionscript. Silahkan pilih menurut anda anda mana yang mudah untuk digunakan :
A. Menempatkan suara di frame 1. Buatlah sebuah flash document.
2. Buatlah persegi panjang berwarna merah bergaris hitam. Buatlah sebuah static text bertuliskan tombol dan tempatkan di tengah-tengah persegi panjang. Seleksi persegi panjang dan static text lalu tekan F8. Pada panel yang muncul masukkan tombol sebagai name dan button sebagai type lalu tekan ok.
3. Tekan Ctrl+R. Pada panel yang muncul cari 2 buah suara yang diinginkan dan tekan open.
5. Seleksi frame Over dan Down lalu tekan F6. Ubah warna persegi panjang di frame over menjadi merah muda dan juga ubah warna persegi panjang di frame down menjadi merah tua.
6. Seleksi frame Over dan tekan Ctrl+F3. Pada panel properties yang muncul ubah Sound menjadi suara yang akan digunakan sebagai suara saat mouse berada di atas tombol, Effect:None, Sync:Event Repeat 1.
7. Seleksi frame Down dan pada panel properties ubah Sound menjadi suara yang akan digunakan sebagai suara saat tombol diklik oleh mouse, Effect:None, Sync:Event Repeat 1.
2. Buatlah persegi panjang berwarna merah bergaris hitam. Buatlah sebuah static text bertuliskan tombol dan tempatkan di tengah-tengah persegi panjang. Seleksi persegi panjang dan static text lalu tekan F8. Pada panel yang muncul masukkan tombol sebagai name dan button sebagai type lalu tekan ok.
3. Seleksi tombol dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan tombol sebagai instance name.
4. Tekan Ctrl+R. Pada panel yang muncul cari 2 buah suara yang diinginkan dan tekan open.
6. Klik kanan suara yang akan digunakan sebagai suara saat mouse berada di atas tombol dan pilih Linkage. Pada panel yang muncul berikan tanda contreng/centang pada Export for ActionScript dan masukkan over sebagai identifier.
7. Klik kanan suara yang akan digunakan sebagai suara saat tombol ditekan dan pilih Linkage. Pada panel yang muncul berikan tanda contreng/centang pada Export for ActionScript dan masukkan click sebagai identifier.
8. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
//membuat variable atas berisi suara berlinkage over atas = newSound(); atas.attachSound("over"); //membuat variable klik berisi suara berlinkage click klik = newSound(); klik.attachSound("click"); //ketika kursor mouse berada di atas tombol tombol.onRollOver = function(){ //mainkan suara pada variable atas sebanyak 1 kali atas.start(0, 1); }; //ketika tombol ditekan tombol.onPress = function(){ //mainkan suara pada variable klik sebanyak 1 kali klik.start(0, 1); };
Memainkan frame maju/kekanan itu sudah biasa, anda dapat menggunakan gotoAndPlay atau nextFrame untuk melakukannya. Tapi kali ini kita akan buat yang luar biasa, yaitu memainkan frame kekiri/mundur.
2. Buatlah sebuah dynamic text bertuliskan Mainkan Frame. Seleksi dynamic text tersebut dan tekan Ctrl+F3. Pada panel properties yang muncul nonaktifkan tombol selectable dan aktifkan tombol Show border around text.
3. Pastikan anda masih menyeleksi dynamic text tadi lalu tekan F8. Pada panel yang muncul masukkan mainkan_btn sebagai name dan button sebagai type lalu tekan ok.
4. Seleksi tombol mainkan_btn di stage dan masukkan mainkan_btn dalan kotak instance name pada panel properties.
5. Klik kanan frame 2 dan pilih Insert Blank Keyframe. Buatlah sebuah static text pada frame 2 ini bertuliskan Frame 1.
6. Seleksi frame 3 sampai frame 11 kemudian tekan F6.
7. Ubah tulisan pada static text di frame 3 menjadi Frame 2
8. Ubah tulisan pada static text di frame 4 menjadi Frame 3
9. Ubah tulisan pada static text di frame 5 menjadi Frame 4
10. Ubah tulisan pada static text di frame 6 menjadi Frame 5. Dan seterusnya lakukan sampai frame 11 sehingga pada frame 11 static textnya bertuliskan Frame 10.
11. Klik frame 2 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1
stop();
12. Masukkan script yang sama dengan di frame 2 ke frame 3 sampai frame 11. Sehingga dari frame 2 sampai frame 11 terdapat script stop(); di dalamnya.
13. Klik frame 1 dan masukkan script berikut pada panel actions : target=”_blank”>panel actions yang muncul masukkan script berikut :
stop(); //membuat variable bernama jumlahFrame dengan nilai sama dengan jumlah frame pada timeline jumlahFrame = _totalframes; //membuat sebuah fungsi bernama frameMundur function frameMundur(){ onEnterFrame = function(){ //jika tidak berada di frame 1 if(_currentframe!= 1){ //variable jumlahFrame dikurangi 1 secara terus menerus jumlahFrame--; //mainkan frame sesuai nilai pada variable jumlahFrame gotoAndStop(jumlahFrame); } }; } //ketika mainkan_btn ditekan mainkan_btn.onPress = function(){ //mainkan frame terakhir gotoAndStop(_totalframes); //jalankan fungsi frameMundur frameMundur(); };
Maaf baru bisa upload tutorial yang baru karena kami mengalami masalah pada wordpress saat mengupdatenya menjadi versi 2.8 sehingga kami harus merubahnya kembali ke versi 2.7. Dalam soal pilihan ganda berikut kita akan membuat soal muncul secara acak sehingga soal-soal yang muncul akan terlihat berbeda peletakannya setiap dimainkan.
5. Seleksi static text bertuliskan Mulai dan persegi panjang kemudian tekan F8. Pada panel yang muncul masukkan mulai_btn sebagai name dan button sebagai type lalu tekan ok.
6. Letakkan seluruh objek di frame 1 seperti gambar di bawah ini :
7. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
8. Klik kanan frame 2 dan pilih Insert Blank Keyframe. Pada frame 2 buatlah sebuah static text yang berfungsi sebagai soal dengan bertuliskan 11 + 1 = …..
9. Buatlah 4 buah static text yang berfungsi sebagai jawaban dengan masing-masing bertuliskan a. 11 b. 12 c. 13 d. 14
10. Buatlah sebuah invisible button. Seleksi invsible button di stage dan tekan Ctrl+D sebanyak 3 kali sehingga terdapat 4 buah invisible button di stage.
11. Tempatkan dan atur letak ke-empat invisible button tersebut sehingga menutupi masing masing static text yang berfungsi sebagai jawaban.
12. Atur letak seluruh objek di stage pada frame 2 seperti gambar di bawah ini :
13. Klik frame 2 dan masukkan script berikut pada panel actions :
1
stop();
14. Klik kanan frame 2 dan tekan Copy Frames. Klik kanan frame 3 dan tekan Paste Frames. Klik kanan frame 4 dan tekan paste Frame. Lakukan hal yang sama sampai frame 11. Sehingga dari frame 2 sampai frame 10 berisi copyan dari frame 2.
15. Ubah soal dan jawaban sesuai keinginan anda.
16. Masukkan script berikut pada invisible button yang memiliki jawaban benar :
18. Klik kanan frame 12 dan pilih Insert Blank Keyframe.
19. Pada stage di frame 12 buatlah 2 buah static text bertuliskan Benar : dan Salah :.
20. Buatlah 2 buah dynamic text. Tekan Ctrl+F3 untuk memunculkan panel properties. Seleksi salah satu dynamic text tersebut dan masukkan benar_tampil dalam kotak Var. Seleksi dynamic text yang satunya lagi dan masukkan salah_tampil dalam kotak Var.
21. Buatlah sebuah static text bertuliskan Main Lagi.
22. Buatlah sebuah persegi panjang dengan panjang dan lebar sama dengan static text bertuliskan Main Lagi.
23. Seleksi static text bertuliskan Main Lagi dan persegi panjang kemudian tekan F8. Pada panel yang muncul masukkan mainlagi_btn sebagai name dan button sebagai type lalu tekan ok.
24. Letakkan seluruh objek di frame 12 seperti gambar di bawah ini :
25. Klik frame 12 dan masukkan script berikut pada panel actions :
Di dalam flash, musik digunakan untuk melengkapi hasil berkreasi anda agar terlihat sempurna. Misalnya dalam pembuatan animasi, tanpa musik tentu animasi yang anda buat akan terasa kurang hidup. Musik bisa didapatkan secara gratis/free namun ada juga yang berbayar. Apabila anda tidak menemukan musik yang gratis anda dapat menggunakan metode di bawah ini. Inti dari tutorial yang akan kita buat di bawah ini adalah mengacak 8 buah nada sehingga membentuk sebuah musik. Memang hasil yang diperoleh tidak begitu bagus namun terkadang ada rangkaian nada yang bagus ketika proses pengacakan sedang berlangsung. Selain itu anda juga mungkin bisa mendapatkan inspirasi membuat sebuah musik melalui pengacakan nada berikut.
2. Pilih File>Import>Import to Library. Pada kotak dialog yang muncul cari 8 buah nada yang diinginkan kemudian tekan open.
3. Tekan Ctrl+L, pada panel library yang muncul klik kanan salah satu nada misal nada do kemudian pilih Linkage. Pada panel yang muncul berikan tanda contreng/centang pada Export for ActionScript dan masukkan nada1 sebagai Identifier lalu tekan ok.
4. Lakukan hal yang sama pada seluruh nada sehingga masing-masing nada pada panel library memiliki linkage : nada1, nada2, nada3, nada4, nada5, nada6, nada7, nada8
5. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1 2 3 4 5 6 7 8
var musik:Sound = newSound(); function mainkan_nada(){ acak = random(7)+1; no_nada = "nada"+acak; musik.attachSound(no_nada); musik.start(0, 1); } setInterval(mainkan_nada, 250);
6. Anda dapat mengubah jumlah nada yang dimainkan melalui script acak = random(7)+1; Misalnya anda ingin hanya mengacak 5 nada pertama maka ubah scriptnya menjadi acak = random(4)+1;
7. Anda dapat mengubah kecepatan memainkan nada melalui script setInterval(mainkan_nada, 250); Misalnya anda ingin memainkannya lebih cepat maka ubah scriptnya menjadi setInterval(mainkan_nada, 100);
8. Jika sudah tekan Ctrl+Enter untuk melihat hasilnya.
