Membuat Maze dengan Flash

Desember 17, 2011

Pada postingan sebelumnya sudah saya jelaskan cara membuat puzzle sederhana dengan empat potongan, yang belum sempat me-download dapat download dulu disini. Jika ingin lebih keren lagi mestinya ditambahkan timer atau skor, sehingga kelihatan nilainya atau waktu yang digunakan untk menyelesaikan puzzle. Silahkan di modifikasi sendiri.

Berikutnya saya akan membuat tutorial cara membuat Maze dengan Macromedia Flash, biasanya banyak digunakan sebagai media pembelajaran TK atau SD kelas kecil.

Membuat MAZE dengan FLASH

  1. Langkah pertama adalah membuat dokumen baru dengan ukuran 800 X 600
  2. Buatlah dinding ukuran sama dengan stage 800 X 600 berikan warna sesuai selera hapus garis border-nya
  3. Pada bagian tengahnya buatkan lintasan (maze) sesuai keinginan dan berikan beberapa jalan jebakan.

 

4. Hapus warna dan garis lintasan, hasilnya seperti dibawah ini :

 

  1. Klik obyek dinding, kemudian tekan F8 diubah menjadi symbol. Berikan nama dinding, pada instance namenya juga berikan nama dinding
  2. 2.       Kemudian kita membuat movie klip untuk pemain buatlah lingkaran , kemudian tekan F8 diubah menjadi symbol. Berikan nama : pemain, pada instance name berikan juga nama : pemain
  3. Double klik movieclip pemain untuk mengedit.
  4. Kita ubah movie klip lingkaran menjadi gambar anak ayam, sperti di bawah ini :

 

Membuat MAZE dengan FLASH


Membuat media pembelajaran Multimedia

Desember 16, 2011

Sudah lama banget tidak pernah posting di blog ini. Saya coba untuk membuat materi membuat media pembelajaran berbasis Macromedia Flash. Mudah-mudahan mempunyai waktu untuk membuat materi ini . Saya berharap materi ii dapat dibuat berkesinambungan, sehingga dapat terus dimanfaatkan.

MEMBUAT PUZZLE  4 POTONGAN

Langkah pembuatannya adalah :

  1. Buatkan dokumen baru flash dengan ukuran 800 X 600 atau sesuai  dengan keinginan anda
  2. Gambar dapat di import melalui menu File è import  è import to library
  3. Tentukan gambar yang akan dijadikan puzzle
  4. Ambil gambar hasil import dan masukkan ke stage (lembar kerja), melalui Window è Library, lakukan drag and drop untuk memindahkan gambar ke stage
  5. Sesuaikan ukuran gambar dengan ukuran background, dengan menggunakan Free trans form tool atau klik gambar kemudian tekan tombol Q
  6. Gambar yang kita gunakan pada contoh di atas masih dalam bentuk utuh kita perlu memecah gambar dijadikan potongan. Klik gambar kemudian tekan ctrl+B untuk memecah gambar supaya dapat dibagi sesuai dengan kebutuhan kita.
  7. Untuk membuat potongan menjadi 4 bagian kita menggunakan Line Tool atau garis, dapat juga menggunakan tombol N. Hasilnya seperti contoh dibawah ini.

   8. Klik pada Gbr1 kemudian tekan F8 untuk mnegubah menjadi movieclip, name : gbr1 kemudian OK

9. Lakukan hal yang sama untuk ke empat gambar yang ada, sehingga kita mempunyai 4 buah movieclip untuk puzzle

10.  Gunakan garis bantu ruler, dari menu view è ruler untuk memudahkan pengeditan obyek dan pembuatan target. Seperti gambar dibawah ini:

11. Klik movieclip gbr1 pada properties klik instance name kemudian ketikkan namanya : gbr1, demikian juga untuk gbr2, lakukan dengan cara yang sama untuk gbr3 dan gbr4. Tujuannya adalah agar gambar dapat diidentifikasi pada saat dibuatkan action script atau program.

12. Untuk menempatkan gambar pada posisinya maka kita perlu membuat movieclip yang namanya target. Bentuk dan ukurannya sama seperti dengan gbr1 untuk target_gbr1, gbr2 untuk target_gbr2, gbr3 untuk target_gbr3 dan gbr4 untuk target_gbr4.

13. Untuk membuat target langkahnya adalah buatlah bentuk kotak atau rectangle dengan ukuran sama dengan gbr yang akan dijadikan target. Misalnya untuk gbr1 targetnya adalah target_gbr

14. Klik target_gbr1 tekan F8 untuk menjadikan movie clip, berinama movieclip : target_gbr1. Pada instance name berinama juga dengan target_gbr

15. Lakukan langkah ke 14 tersebut untuk gbr2, gbr3 dan gbr

16. Agar warna target tidak menutupi gambar utama maka warna alpha kita beri nilai 0, caranya adalah klik target kemudian pada alpha pilih 0%, lakukan untuk keempat gambar yang ada

17. Selanjutnya kita buatkan garis tepi (border) pada stage/lembar kerja sebagai tempat menampung puzzle.

18. Jangan lupa tempatkan movie clip target sesuai dengan posisinya untuk target_gbr1 pada gbr1 dan seterusnya.

19. Sebagai langkah terahkhir adalah membuat programnya atau action scriptnya, klik pada frame 1 kemudian tekan F9, ketikkan scriptnya pada actions frame. Jika lembar kerja actions frame belum tampak, lakukan klik pada actions frame.

Kita buat script untuk gbr1 dan target_gbr1 seperti dibawah ini :

stop();

xawal1 = gbr1._x;

yawal1 = gbr1._y;

gbr1.onPress = function() {

this.startDrag();

this.swapDepths(1);

};

gbr1.onRelease = function() {

this.stopDrag();

if (eval(this._droptarget) == gbr1_target) {

this._x = _root.gbr1_target._x;

this._y = _root.gbr1_target._y;

} else {

this._x = xawal1;

this._y = yawal1;

}

};

gbr1.onReleaseOutside = function() {

this.stopDrag();

this._x = xawal1;

this._y = yawal1;

};

# pejelasan:

–           Perintah stop untuk menghentikan movie pada posisi frame 1

–          Kita menentukan posisi awal gbr1 dengan menentukan posisi x dan y, gambar tersebut dapat diacak sesuai dengan kehendak kita. Flash akan menetapkan sesuai koordinatnya

–          Menentukan fungsi ketika gbr1 di klik dan geser (drag and drop)

–          Jika penempatan gbr1 sesuai sesuai target_gbr1 maka gambar akan terpasang, namun jika tidak maka maka gbr1 akan kembali ke posisi awal.

Untuk script gbr2 dan selanjutnya kita tinggal melakukan copy dari script gbr1 diatas, dengan mengganti gbr dan targetnya, hasilnya seperti dibawah ini :

xawal2 = gbr2._x;

yawal2 = gbr2._y;

gbr2.onPress = function() {

this.startDrag();

this.swapDepths(1);

};

gbr2.onRelease = function() {

this.stopDrag();

if (eval(this._droptarget) == target_gbr2) {

this._x = _root.target_gbr2._x;

this._y = _root.target_gbr2._y;

} else {

this._x = xawal2;

this._y = yawal2;

}

};

gbr2.onReleaseOutside = function() {

this.stopDrag();

this._x = xawal2;

this._y = yawal2;

};

xawal3 = gbr3._x;

yawal3 = gbr3._y;

gbr3.onPress = function() {

this.startDrag();

this.swapDepths(1);

};

gbr3.onRelease = function() {

this.stopDrag();

if (eval(this._droptarget) == target_gbr3) {

this._x = _root.target_gbr3._x;

this._y = _root.target_gbr3._y;

} else {

this._x = xawal3;

this._y = yawal3;

}

};

gbr3.onReleaseOutside = function() {

this.stopDrag();

this._x = xawal3;

this._y = yawal3;

};

xawal4 = gbr4._x;

yawal4 = gbr4._y;

gbr4.onPress = function() {

this.startDrag();

this.swapDepths(1);

};

gbr4.onRelease = function() {

this.stopDrag();

if (eval(this._droptarget) == target_gbr4) {

this._x = _root.target_gbr4._x;

this._y = _root.target_gbr4._y;

} else {

this._x = xawal4;

this._y = yawal4;

}

};

gbr4.onReleaseOutside = function() {

this.stopDrag();

this._x = xawal4;

this._y = yawal4;

}

Puzzle sudah siap untuk dimainkan. Namun sebelumnya aturlah potongan secara acak sesuai dengan kehendak kita, sebelum puzzle di jalankan.

Coba jalankan puzzle dengan menekan ctrl + enter, jangan lupa untuk menyimpan file terlebih dahulu.

Agar lebih menarik dapat ditambahkan suara, Tambahkan layer baru dengan cara klik menu Insert èTimeline èLayer. Kemudian ganti nama layer dengan nama : sound.

Lakukan import sound melalui menu File è Import è Import to Library

Ambil sound dari library letakkan pada layer sound. Coba jalankan movie dengan menekan tombol Ctrl + Enter. Jangan lupa untuk menyimpan.

Jika puzzle sudah benar, silahkan dipublish dengan memilih publish setting pada (swf)

Silahkan Download  file Flash disini