Dokumen ini memberikan instruksi lengkap untuk membuat animasi drag and drop puzzle dengan ActionScript di Adobe Flash. Instruksinya meliputi pembuatan objek, tween animasi, pengaturan linkage, dan penambahan script untuk mengaktifkan fitur drag and drop. Script akan meletakkan kembali objek yang dilepaskan ke posisi semula dan memicu animasi apabila terpasang dengan benar.

1. Page | 1 Johny Hizkia, BIT, MIMS
UG141 – Multimedia Design
Lab Exercise 8
TASK 1 – Drag & Drop Puzzle
Tutorial ini merupakan versi lain dari drag & drop puzzle. Berbeda dengan drag & drop
puzzle dimana movie clip yang sudah terpasang dapat di drag ulang, pada tutorial ini movie
clip yang sudah terpasang tidak dapat drag lagi. Selain itu pada drag & drop kali ini akan ada
animasi apabila movie clip terpasang. Kita akan menggunkan metode attachMovie untuk
memasukkan animasi tersebut ke dalam stage.
1. Buatlah sebuah flash document
Membuat animasi pertama.
2. Buatlah sebuah kotak berwarna biru muda dengan panjang dan lebar sama dengan
panjang dan lebar stage. Tempatkan di tengah-tengah stage.
3. Buatlah sebuah static text dengan menggunakan text tool dan beri tulisan “Benda1
Terpasang” di dalamnya.
4. Seleksi kotak dan static text tersebut dan tekan F8. Pada kotak dialog yang muncul
masukkan tween animasi1 sebagai name dan movie clip sebagai type lalu tekan ok.
5. Seleksi movie clip tween animasi1 di stage dan tekan F8. Pada kotak dialog yang
muncul masukkan animasi1 sebagai name dan movie clip sebagai type lalu tekan ok.
6. Klik 2 kali movie clip animasi1 agar anda masuk ke dalam stagenya. Klik kanan
frame 10 dan pilih insert keyframe. Klik kanan frame 20 dan pilih insert keyframe.
7. Klik kanan frame 1 dan pilih create classic tween. Seleksi movie clip tween animasi1
di frame 1 dan tekan Ctrl+F3. Pada panel properties yang muncul ubah color menjadi
alpha 0%. Klik frame 20 dan tekan F9. Pada kotak actions yang muncul masukkan
script berikut :
stop();
8. Tekan Ctrl+E agar anda kembali ke stage scene 1. Hapus movie clip animasi1 dari
stage.
Membuat animasi kedua.
9. Buatlah sebuah kotak berwarna biru muda dengan panjang dan lebar sama dengan
panjang dan lebar stage. Tempatkan di tengah-tengah stage.
10. Buatlah sebuah static text dengan menggunakan text tool dan beri tulisan “Benda2
Terpasang” di dalamnya.
11. Seleksi kotak dan static text tersebut dan tekan F8. Pada kotak dialog yang muncul
masukkan tween animasi2 sebagai name dan movie clip sebagai type lalu tekan ok.
12. Seleksi movie clip tween animasi2 di stage dan tekan F8. Pada kotak dialog yang
muncul masukkan animasi2 sebagai name dan movie clip sebagai type lalu tekan ok.
13. Klik 2 kali movie clip animasi2 agar anda masuk ke dalam stagenya. Klik kanan
frame 10 dan pilih insert keyframe. Klik kanan frame 20 dan pilih insert keyframe.

2. Page | 2 Johny Hizkia, BIT, MIMS
UG141 – Multimedia Design
Lab Exercise 8
14. Klik kanan frame 1 dan pilih create classic tween. Seleksi movie clip tween animasi2
di frame 1 dan tekan Ctrl+F3. Pada panel propertie yang muncul ubah color menjadi
alpha 0%. Klik frame 20 dan tekan F9. Pada kotak actions yang muncul masukkan
script berikut :
stop();
15. Tekan Ctrl+E agar anda kembali ke stage scene 1. Hapus movie clip animasi2 dari
stage.
16. Tekan Ctrl+L untuk memunculkan panel Library. Klik kanan movie clip animasi1 di
Library dan pilih Linkage. Berikan tanda contreng/centang pada Export for
ActionScript dan masukkan animasi1 sebagai Identifier lalu tekan OK.
17. Klik kanan movie clip animasi2 di Library dan pilih Linkage. Berikan tanda
contreng/centang pada Export for ActionScript dan masukkan animasi2 sebagai
Identifier lalu tekan OK.
Membuat benda1, benda2, benda1_target, benda2_target
18. Buatlah sebuah gambar seperti di bawah ini :
Gambar benda1
19. Seleksi gambar tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan
“benda1” sebagai name dan movie clip sebagai type lalu tekan ok. Seleksi movie clip
benda1 di stage dan tekan Ctrl+D sekali sehingga muncul movie clip benda1 lagi.
Letakan masing-masing movie clip benda1 di kanan dan kiri stage.
20. Seleksi movie clip benda1 di sebelah kiri dan tekan Ctrl+F3. Pada panel properties
yang muncul masukkan “benda1” di kotak instance name.
21. Seleksi movie clip benda1 di sebelah kanan dan tekan Ctrl+F3. Pada panel properties
yang muncul masukkan “benda1_target” di kotak instance name dan ubah colornya
menjadi alpha 10%.
22. Buatlah sebuah gambar seperti di bawah ini :

3. Page | 3 Johny Hizkia, BIT, MIMS
UG141 – Multimedia Design
Lab Exercise 8
Gambar benda2
23. Seleksi gambar tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan
“benda2” sebagai name dan movie clip sebagai type lalu tekan ok. Seleksi movie clip
benda2 di stage dan tekan Ctrl+D sekali sehingga muncul movie clip benda2 lagi.
Letakan masing-masing movie clip benda2 di kanan dan kiri stage.
24. Seleksi movie clip benda2 di sebelah kiri dan tekan Ctrl+F3. Pada panel properties
yang muncul masukkan “benda2” di kotak instance name.
25. Seleksi movie clip benda2 di sebelah kanan dan tekan Ctrl+F3. Pada panel properties
yang muncul masukkan “benda2_target” di kotak instance name dan ubah colornya
menjadi alpha 10%.
Memasukkan script
26. Klik frame 1 dan tekan F9. Pada kotak actions yang muncul masukkan script berikut :
(attach script2.txt)
27. Tekan Ctrl+Enter untuk melihat hasilnya.