CHAPTER 4 MACROMEDIA FLASH MACROMEDIA FLASH

(1)

MACROMEDIA

FLASH

CHAPTER 4

(2)

1.

1. ACTION

ACTION

PPPPPAD

AD

ADA FRAME

A FRAME

Go to frame

Action pada frame digunakan bila movie harus melakukan sesuatu pada saat playhead mencapai frame tertentu. Misalkan pada saat playhead mencapai frame 20, movie melompat ke frame 50 tanpa harus menjalankan frame demi frame secara sekuensial. Untuk membuat action pada frame dapat dilakukan sebagai berikut:

1. Buka file Plant.fla. Dalam file terdapat simbol-simbol Fish1, Fish2, Plant1, Plant2, dan Bubles

2. Buat layer pertama Plant. Drag ssy,nol Plant1 dan Plant2 ke dalam stage.. Duplicate Plant1, sehingga mendapatkan 2 gambar Plant1.

Penempatan Plant1 dan 2 diatur sedemikian rupa. 3. Buat keyframe pada frame 30

4. Buat layer untuk menempatkan Fish1

5. Drag Fish1 dari library, dan buat tweening motion antara frame1 dan frame 30, dimana fish berjalan dari arah kanan ke kiri

6. Pada layer plant buat keyframe pada frame 60 7. Buat layer untuk menempatkan Fish2

8. Buat keyframe pada frame 30, yaitu keyframe awal untuk movie Fish2

9. Drag Fish2 dari library, dan buat tweening motion antara frame30 dan frame 60, dimana fish berjalan dari kiri ke kanan.

10. Buat layer baru dengan nama ActionScript

11. Pilih Insert −−−> Keyframe pada frame 1, kemudian plih lagi Insert −−−> Keyframe pada frame 15

12. Klik 2 kali pada frame 12, dengan ini action akan dilakukan bila playhead mencapai frame 15. Dengan demikian muncul panel action pada Normal

(3)

13. Pada Action list pilih statement Go To, maka muncul script editor seperti pada gambar.

14. Pada field frame isi dengan angka 45. Berikan tanda check pada check box Go to and Play. Untuk menjalankan action ini diperlukan script:

GotoAndPlay(45);

Dengan demikian pada saat playhead mencapai frame 15, maka movie langsung melompat keyframe 45 dan movie berjalan.

15. Simpan file dengan nama Latihan404.fla 16. Pilih Control ---> Test Movie

(4)

2.

2. ACTION

ACTION

PPPPPAD

AD

ADA BUTTON

A BUTTON

Go to dan Stop

Go to dan Stop digunakan untuk menghentikan movie dan menjalankan kembali dari frame tertentu.

1. Buka file Latihan207.fla 2. Buat layer baru untuk button

3. Buat button untuk Stop dan Play pada stage 4. Pilih button untuk Stop

5. Pilih Window −−−> Action

6. Pilih Normal Mode −−−> Basic Action

7. Pada Action list pilih statement Stop maka akan pada text editor tertulis

on (release) { stop (); }

8. Pilih button untuk Play

9. Pilih Normal Mode −−−> Basic Action

10. Pada Action list pilih statement Go To maka akan pada text editor tertulis

on (release) {

gotoAndPlay (1); }

11. Pada Frame field tentukan frame yang dikehendaki 12. Berikan tanda check pada checkbox " Go to and Play" 13. Pilih Control ---> Test Movie

(5)

14. Simpan file tersebut dengan nama Latihan401.fla

Macam action pada button terdapat beberapa, dapat dipilih dengan cara: Pada script editor klik on n(release), maka akan muncul plihian event seperti gambar berikut.

(6)

Arti mouse dan keyboard event pada object buttton:

l Press - tombol mouse diklik pada saat berada di area button l Release - tombol mouse dilepas pada saat berada di area button l Release Outside - mouse dilepas saat berada di luar area button l Key Press - tombol keyboard ditekan

l Rollover - kursor mouse berada di dalam area button l Roll Out - kursor mouse berada di luar area button

l Drag Over - klik button dengan drag mouse tetapi masih dalam area button l Drag Out - klik button dan drag nouse sehingga ke luar area button

Play dan Stop

Menghentikan movie dan menjalankan kembali pada frame berikutnya setalah ditekan button Stop. Cara pembuatannya sama dengan Go to, namun menggunakan perintah Play.

(7)

Multiple action

Play, Stop dan Go to digunakan bersama-sama dengan movieclip, menghasilkan multiple action.

1. Buka file Plant.fla. Dalam file terdapat simbol-simbol Fish1, Fish2, Plant1, Plant2, dan Bubles

2. Buat layer pertama Plant. Drag symbol Plant1 dan Plant2 ke dalam stage. Duplicate Plant1, sehingga mendapatkan 2 gambar Plant1.

Penempatan Plant1 dan 2 diatur sedemikian rupa. 3. Buat keyframe pada frame 20.

4. Buat layer untuk menempatkan button.

5. Buat button dan diberikan label "Go to loop 1 (Play).

Buat button di bawahnya dan diberikan label "Go to loop 1 (Stop) 6. Pastikan panjang timeline 10 frame.

7. Edit teks "Go to loop 1" menjadi "Go to loop 2". 8. Buat layer untuk menempatkan Fish1

9. Drag Fish1 dari library, dan buat animasi antara frame1 dan frame 10. Posisi Fish1 pada frame 1 dan 10 di luar stage. Buat motion tweening.

10. Buat layer untuk menempatkan Fish2

11. Drag Fish2 dari library, dan buat animasi antara frame11 dan frame 20. Posisi Fish2 pada frame 11 dan frame 20 di luar stage sebelah kiri.

(8)

12. Buat movie clip gelembung air, pertama-tama membuat layer baru Bubles. 13. Drag Bubles dari library, dan buat animasi antara frame11 dan frame 20. Posisi Fish2 pada frame 11 dan frame 20 di luar stage sebelah kiri.

14. Pilih Insert −−−> New Symbol, pada Symbol properties ketik nama sym bol "Bubles" dan pilih movie clip pada Behaviour.

15. Pada editor symbol buat animasi tweening bubles dari bawah ke atas

16. Kembali ke Scene 1. Drag symbol Bubles beberapa buah ke dalam stage, kemudian datur posisi dan ukurannya.

Frame dapat diberi label untuk menuliskan keterangan yang diperlukan. Untuk membuat label dapat dilakukan dengan cara sebagai berikut:

17. Pilih suatu frame, kemudian pilih Window −−−> Panel −−−> Frame, maka muncul Frame panel seperti berikut.

(9)

18. Ketik nama label "loop1" pada kotak teks Label. Label tersebut digunakan antara frame 1 dan frame 10

19. Ulangi membuat label "loop2" antara frame 11 dan 20.

Kedua button belum berfungsi. Untuk dapat menggunakan button tersebut, dilakukan:

20. Klik button di atas, pastikan Timeline yang aktif adalah antara frame 1 dan 10 (loop1, sesuai label).

21. Pilih Window −−−> Action, maka tampilan action pada Normal Mode 22. Basic Actions −−−> Play, maka script akan muncul pada text editor sebagai berikut:

on (release) { play (); }

23. Klik button di bawah plilh Stop

24. Lakukan hal yang sama untuk loop 2 (antara frame 11 dan frame 20) 25. Pilih Control ---> Test Movie

(10)

3.

3. ACTION

ACTION

PPPPPAD

AD

ADA MO

A MO

A MOVIECLIP

A MO

VIECLIP

Selain pada object button, action juga dapat dilakukan pada object movie clip. Action yang diberikan berada pada handler onClipEvent. Jika action diberikan pada movie clip, secara otomatis handler tersebut muncul pada Normal Mode.

Arti event pada object movie clip:

l Load - saat movie clip pertama kali tampil pada timeline l Unload - saat movie clip hilang dari timeline

l MouseMove - setting pada gerakan mouse l MoseDown - saat tombol mouse ditekan l MouseUp - saat tombol mouse dilepas l KeyDown - saat tombol keyboard ditekan l KeyUp - saat tombol keyboard dilepas

l Data - saat data diterima dari action loadVariable atau loadMovie. Pada action

loadVariable, event data terjadi hanya sekali, yaitu saat variabel terakhir di-load. Pada action loadMovie, event data terjadi berulang ulang.

(11)

Go to and Play

Movie clip menanggapi setiap action dari mouse down dan mouse up di mana pun kursor mouse tersebut berada, tidak harus tepat pada movie clip.

Membuat movie clip Membuat movie clip Membuat movie clip Membuat movie clip Membuat movie clip

Untuk membuat actoion pada movie clip, pertama-tama harus dibuat movie clip dulu:

1. Buat file baru. Import butterfly.hf8.

Convert to symbol dengan nama butterflyMc dan Behaviour movie clip. 2. Buka editing symbol untuk mengedit butterfly, maka gambar butterfly biru akan muncul pada frame 1.

3. Pilih Insert ---> Keyframe, keyframe berlindah ke frame 2

4. Dengan transformasi ukuran butterfly diubah. Warna butterfly diubah dari Panel Effect. Bila perlu menggunakan Break Apart pada objek butterfly.

(12)

5. Kembali pada Scene 1, Import sunset.jpg untuk digunakan sebagai background

6. Tempatkan background dan movieclip butterfly pada stage. 7. Warna background diatur dengan panel Effect

8. Buat motion guide untuk butterfly 9. Save file dengan nama butterfyMc.fla

Membuat action pada movie clip Membuat action pada movie clip Membuat action pada movie clip Membuat action pada movie clip Membuat action pada movie clip

Untuk membuat actoion pada movie clip, pertama-tama harus dibuat movie clip dulu:

1. Buka file butterflyMc.fla. Dalam file terdapat simbol movieclip butterfly 2. Periksa movie clip dengan melakukan klik 2 kali pada gambar butterfly di stage atau symbol butterfly pada library

3. Pada timeline terdapat 2 layer yaitu butterfly dan ActionScript. Bila diperhatikan,

- pada frame 1, butterfly berwarna biru - pada frame 2, butterfly berwarna hijau

4. Kembali pada scene utama, dengan mengklik adress bar scene 1

5. Klik pada movie clip, klik tombol mouse sebelah kanan, pilih Actions, maka akan masuk ke dalam Normal Mode dadi script editor.

6. Pilih action Go to kemudian klik pada onClipEvent(Load), untuk membuka dialog pilihan event. Pilih Mouse down

7. Klik pada gotoAndPlay(1). Isi pada field Frame angka 2.

Dari pilihan yang dilakukan pada no.6 dan 7, maka bila tombol mouse ditekan, maka movie clip akan berpindah ke frame 2 dari symbol, sehingga butterfly berubah menjadi warna hijau.

8. Simpan file tersebut dengan nama Latihan405.fla 9. Pilih Control ---> Test Movie

(13)

4.

4. MENGONTROL

MENGONTROL

MOVIECLIP

Movie clip merupakan mini movie dapat diberi perintah untuk melakukan apapun. Untuk dapat mengontrol suatu movie clip, movie clip harus diberi nama in-stance dahulu melalui Panel Inin-stance. Action yang digunakan adalah tell target atau with.

TTTTTell target

ell target

Syarat untuk mengontrol movie clip:

l Target dalam suatu perintah harus jelas

l Movie clip yang menjadi terget harus mempunyai nama instance l Timeline dari movie clip harus berada di stage untuk menjadi target

Untuk mengontrol movie clip dapat dilakukan seperti berikut:

1. Buka file beeMc.fla. Pada library terdapat symbol movie clip bee, sedangkan pada stage masih kosong

2. Drag movie clip bee ke dalam stage

3. Klik movie clip "bee" dan beri nama "bee_instance" dengan cara memilih Window ---> Panel ---> Instance kemudian memasukkan nama pada field Name.

Terdapat empat icon pada kanan bawah panel:

l Swap Symbol - untuk menukar symbol yang dipilih di stage dengan

yang ada di library

l Edit Symbol - untuk mengedit symbol di stage

l Duplicate Symbol - untuk memperbanyak symbol yang ada doi stage l Edit Auctions - untuk mengedit auction symbol

(14)

4. Buat dua buah button dan diberi nama masing-masing Play dan Stop 5. Klik pada button pertama, klik tombol mouse sebelah kanan, pilih Actions, maka akan masuk ke dalam Normal Mode dari script editor. Pilih Tell Target dan isi field Target dengan "be_instance"

6. Statement selanjutnya yang dipilih dari daftar adalah Go To. Ketik angka 1 pada field Frame

edit auctions duplicate symbol edit symbol

(15)

7. Klik pada button kedua, klik tombol mouse sebelah kanan, pilih Actions, maka akan masuk ke dalam Normal Mode dari script editor. Pilih Tell Target dan isi field Target dengan "be_instance"

8. Statement selanjutnya yang dipilih dari daftar adalah Go To. Ketik angka 2 pada field Frame dan hilangkan tanda check pada "Go to and Play". Denganb demikian, bila diklik button tersebut, Movie akan berpindah ke frame 1 kemudian berhenti.

Script pada script editor tertulis:

on (release){

tellTarget ("bee_instance") { gotoAndStop(1)

} }

Script tersebut sama fungsinya dengan:

on (release){

with ("bee_instance") { gotoAndStop(1) }

}

9. Simpan file tersebut dengan nama Latihan406.fla 10. Pilih Control ---> Test Movie

(16)

TTTTTarget path

arget path

Flash movie mempunyai timeline utama yang berada pada level 0. Dengan menggunakan action loadMovie, setiap movie yang di-load berada pada level 1, level 2 dan selanjutnya. Setiap level mempunyai timeline sendiri. Karena banyak timeline dalam satu movie, maka disebut multiple timeline.

FLASH PLAYER _level0

_level1 MC

child_MC1 child_MC2

Timeline Flash movie pada setiap level dapat mempunyai movie clip. Setiap movie clip dapat memiliki movie clip lain. Misalkan action dibuat pada level 0 untuk

mengontrol movie clip pada level 1, diperlukan script sebagai berikut: with(_level1.movieClip.child_MC1)

{

play(); }

(17)

5.

5. SMART CLIP

SMART CLIP

Smart clip merupakan movie clip dengan parameter yang ditentukan sehingga dapat diubah. Parameter tersebut kemudian dilewatkan pada action dalam smart clip yang mengubah perilakunya.

Untuk membuat smart clip, harus menentukan parameter symbol pada Library. Statement dapat dituliskan dalam smart clip yang akan dilaksanakan pada smart clip. Instance smart clip dipilih pada stage dan mengubah nilai parameternya dalam panel parameter. Selama playback, nilai tersebuit diberikan kepada smart clip sebelum dieks

Smart clips digunakan untuk membuat elemen interface, seperti radio button, pop-up menu, game dan lain-lain.

Membuat smart clip

Untuk menentukan parameter movie clip, dapat dilakukan sebegai berikut: 1. Buka file plant.fla

2. Buat symbol baru movie clip dengan nama fishMc

2. Pilih simbol grafik Fish1 pada Library drag ke dalam stage, maka symbol fishMc berisi grafik Fish1

3. Pilih symbol movie clip fishMc pada Library

4. Klik tombol kanan mouse 5. Pilih Define Clip Parameter pada menu option di kanan atas window Library

(18)

4. Pada Clip Parameter diaog box pilih Add (+). Klik 2 kali pada field yang akan diisi.

5. Untuk Name , masukkan identifier yang unik

6. Untuk Type - pilih macam data parameter yang akan dapat dilihat pada up menu:

l Default - untuk nilai string atau number

l Array - untuk dynamic list dari data yang dapat berrkembang l Object - untuk elemen yang berhubungan dengan nama dan nilai l List - untuk membatasi beberapa pilihan,

seperti true dan false, atau red, green dan blue

7. Untuk Value - nilai yang dapat digunakan pada type yang telah ditentukan. Masukkan angka 20. Senakin tinggi nilai ini ikan akan bergerak lebih cepat. Catatan:

Bila ingin menggunakan interface yang dibuat untuk panel clip parameter, path harus diisikan pada field "Link to Custom UI"

(19)

7. Untuk Description - diisi catatan yang diperlukan untuk keterangan 8. Klik OK

9. Simpan file dengan nama Latihan407.fla

Menggunakan Smart Clip

Untuk nmenggunakan smart clip dapat dilakukan sebagai berikut 1. Buka file Latihan407.fla

2. Pilih simbol grafik plant1 dan plant2 Library 3. Drag simbol tersebut ke dalam stage

4. Pilih simbol movie clip fishMc pada Library 5. Drag ke dalam stage

6. Pilih simbol movie clip fishMc pada stage 7. Klik tombol kanan mouse

8. Pilih Actions, maka akan muncul script. Pilih Expert Mode. 9. Pada script editor ketik script sebagai berikut:

onCipEvent(nnterFrame) ( _x = _x - kecepatan if (_x < 0) { _x = 600; } }

Property _x adalah posisi horizontal pada movis clip fishMc pada stage. Dengan mengurangi property _x akan terlihat posisi gerakan ikan dari kanan ke kiri yang berlainan.

9. Simpan file dengan nama Latihan407a.fla