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 :
- Buatkan dokumen baru flash dengan ukuran 800 X 600 atau sesuai dengan keinginan anda
- Gambar dapat di import melalui menu File è import è import to library
- Tentukan gambar yang akan dijadikan puzzle
- Ambil gambar hasil import dan masukkan ke stage (lembar kerja), melalui Window è Library, lakukan drag and drop untuk memindahkan gambar ke stage
- Sesuaikan ukuran gambar dengan ukuran background, dengan menggunakan Free trans form tool atau klik gambar kemudian tekan tombol Q
- 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.
- 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