Chap04 Macromedia Flash

1MACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASH

MACROMEDIAMACROMEDIAMACROMEDIAMACROMEDIAMACROMEDIAFLASHFLASHFLASHFLASHFLASH

CHAPTER 4CHAPTER 4CHAPTER 4CHAPTER 4CHAPTER 4


1.1.1.1.1.ACTIONACTIONACTIONACTIONACTIONPPPPPADADADADADA FRAMEA FRAMEA FRAMEA FRAMEA FRAME

Go to frameGo to frameGo to frameGo to frameGo 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


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

Mode.


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


2.2.2.2.2.ACTIONACTIONACTIONACTIONACTIONPPPPPADADADADADA BUTTONA BUTTONA BUTTONA BUTTONA BUTTON

Go to dan StopGo to dan StopGo to dan StopGo to dan StopGo 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"



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.


Arti mouse dan keyboard event pada object buttton:

� Press - tombol mouse diklik pada saat berada di area button

� Release - tombol mouse dilepas pada saat berada di area button

� Release Outside - mouse dilepas saat berada di luar area button

� Key Press - tombol keyboard ditekan

� Rollover - kursor mouse berada di dalam area button

� Roll Out - kursor mouse berada di luar area button

� Drag Over - klik button dengan drag mouse tetapi masih dalam area button

� Drag Out - klik button dan drag nouse sehingga ke luar area button

Play dan StopPlay dan StopPlay dan StopPlay dan StopPlay dan Stop

Menghentikan movie dan menjalankan kembali pada frame berikutnya setalah

ditekan button Stop. Cara pembuatannya sama dengan Go to, namun menggunakan

perintah Play.

- Simpan file tersebut dengan nama Latihan402.fla


Multiple actionMultiple actionMultiple actionMultiple actionMultiple 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".


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.


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.


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.


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)




3.3.3.3.3.ACTIONACTIONACTIONACTIONACTIONPPPPPADADADADADA MOA MOA MOA MOA MOVIECLIPVIECLIPVIECLIPVIECLIPVIECLIP

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:

� Load - saat movie clip pertama kali tampil pada timeline

� Unload - saat movie clip hilang dari timeline

� MouseMove - setting pada gerakan mouse

� MoseDown - saat tombol mouse ditekan

� MouseUp - saat tombol mouse dilepas

� KeyDown - saat tombol keyboard ditekan

� KeyUp - saat tombol keyboard dilepas

� 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.


Go to and PlayGo to and PlayGo to and PlayGo to and PlayGo 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 clipMembuat movie clipMembuat movie clipMembuat movie clipMembuat 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.


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 clipMembuat action pada movie clipMembuat action pada movie clipMembuat action pada movie clipMembuat 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.




4.4.4.4.4.MENGONTROLMENGONTROLMENGONTROLMENGONTROLMENGONTROLMOVIECLIPMOVIECLIPMOVIECLIPMOVIECLIPMOVIECLIP

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 Instance. Action yang digunakan adalah tell target atau with.

TTTTTell targetell targetell targetell targetell target

Syarat untuk mengontrol movie clip:

� Target dalam suatu perintah harus jelas

� Movie clip yang menjadi terget harus mempunyai nama instance

� 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:

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

yang ada di library

� Edit Symbol - untuk mengedit symbol di stage

� Duplicate Symbol - untuk memperbanyak symbol yang ada doi stage

� Edit Auctions - untuk mengedit auction symbol


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

swap symbol


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)}

}




TTTTTarget patharget patharget patharget patharget 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();

}


5.5.5.5.5.SMART CLIPSMART CLIPSMART CLIPSMART CLIPSMART 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 clipMembuat smart clipMembuat smart clipMembuat smart clipMembuat 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


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 pop-

up menu:

� Default - untuk nilai string atau number

� Array - untuk dynamic list dari data yang dapat berrkembang

� Object - untuk elemen yang berhubungan dengan nama dan nilai

� 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"


7. Untuk Description - diisi catatan yang diperlukan untuk keterangan

8. Klik OK

9. Simpan file dengan nama Latihan407.fla

Menggunakan Smart ClipMenggunakan Smart ClipMenggunakan Smart ClipMenggunakan Smart ClipMenggunakan 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

10 Untuk dapat membedakan posisi gerakan ikan, uah nilai _x tersebut

menjadi 350. Pada test Movie kelihatan berbedaan kecepatan ikan.

Chap04 Macromedia Flash

Documents

Transcript of Chap04 Macromedia Flash