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.

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 :

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.