MEMBUAT ANIMASI INTERAKSI DRAG AND DROP

Dalam membuat media pembelajaran tentunya akan lebih baik lagi jika kita melibatkan interaksi dengan siswa.
Maka dalam tutorial kali ini saya akan berbagi bagaimana membuat Animasi Interaksi Drag and Drop menggunakan macromedia flash 8. Dimana kita bisa menggeser (mencocokan) gambar setelah itu kita dapat mengecek jawabannya.
Perhatikan contoh media interaksi berikut :
clip_image002
Silahkan ikuti langkah-langkah pembuatan.
 
Langkah 1.
Jalankan macromedia flash 8 kesayangan kamu dan buat file flash baru.
clip_image004
 
Langkah 2.
Buatlah seperti contoh gambar berikut :
clip_image005
 
Langkah 3.
Seleksi gambar Mangga dan lanjutkan dengan menekan tombol F8 (Convert to Symbol) pada Name isi “mangga” dan Type “Movie clip” kemudian klik OK.
clip_image007
Jika sudah, seleksi gambar Apel dan lanjutkan dengan menekan tombol F8 (Convert to Symbol) pada Name isi “apel” dan Type “Movie clip” kemudian klik OK.
clip_image009
seleksi gambar Kotak Mangga dan lanjutkan dengan menekan tombol F8 (Convert to Symbol) pada Name isi “ktkmangga” dan Type “Movie clip” kemudian klik OK.
clip_image011
Jika sudah, seleksi gambar Kota Apel dan lanjutkan dengan menekan tombol F8 (Convert to Symbol) pada Name isi “ktkapel” dan Type “Movie clip” kemudian klik OK.
clip_image013
 
Langkah 4.
jika sudah selesai merubah gambar-gambar diatas menjadi movie clip lanjutkan dengan memberi instance name pada masing-masing gambar dengan cara klik gambar dan lanjutkan dengan klik properties (perhatikan gambar berikut)
clip_image015
 
Langkah 5.
Klik gambar Apel, lanjutkan dengan klik Modify – Arrange – Bring to Front.
clip_image017
Lakukan hal sama dengan gambar Mangga!
 
Langkah 6.
Klik gambar Apel kemudian tekan F9 (Action) dan copas Action berikut :
  1. on (press) {
  2. startDrag(this);
  3. }
  4. on(release) {
  5. stopDrag();
  6. }
 
Langkah 7.
Ulangi langkah 6 untuk gambar Mangga dengan Action yang sama juga.
 
Langkah 8.
clip_image019
Untuk kotak jawaban buatlah dengan menggunakan Dynamic Text, dengan cara perhatikan gambar dibawah :
clip_image021
 
Langkah 9.
Klik tombol “Enter” (tombol cek jawaban) kemudian tekan tombol F9 dan copas action di bawah :
  1. on (release) {
  2. if ((_root.mangga.hitTest(_root.ktkmangga)) &&
  3. (_root.apel.hitTest(_root.ktkapel))) {
  4. _root.jawaban = "BENAR";
  5. } else {
  6. _root.jawaban = "SALAH";
  7. }}

untuk file latihannya silahkan download disini……













































Share this article :
 

+ comments + 2 comments

November 26, 2013 at 9:32 AM

thankyou sob.

November 26, 2013 at 10:10 AM

trima kasih juga dah berkunjung juga sob...

Post a Comment

Terima Kasih Sudah Meninggalkan Komentar...

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. ingin berbagi - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger