materi flash mx

Tujuan : ü Mengetahui penggunaan Macromedia Flash MX

pada umumnya ü Mengetahui lingkungan kerja Flash MX ü Fasilitas – fasilitas yang ada pada Macromedia Flash

MX ü Customize objek bidang datar

Pembentukan efek garis tepi Pembentukan kontur garis dan bidang (Snaping) Capturing

ü Mengetahui pembuatan gambar dan ilustrasi

Kentaswari /Multimedia / Using Macromedia Flash MX ……………………………………………………………………………2

1. Lingkungan Kerja Flash MX

Macromedia Flash MX secara umum digunakan untuk pembuat animasi atau halaman web yang dinamis, dan pembuatan presentasi yang praktis. Adapun fasilitas-fasilitas yang ada pada Macromedia Flash MX diantaranya tersedianya fasilitas Impor dan Expor Grafik dan suara ke dan dari Macromedia Flash, tersedianya fasilitas drawing tools yang memungkinkan pemakai membuat animasi, tersedianya library (pustaka) yang dapat digunakan oleh pemakai seperti suara, grafik statis maupun grafik dinamis, untuk pemograman tingkat lanjut, file animasi yang dihasilkan oleh Macromedia Flash dapat digunakan sebagai sub bagian Macromedia Director 8.0 (perangkat perancangan presentasi tingkat lanjut), dan lain-lain. Adapun lingkan kerja Flash MX itu sendiri adalah sebagai berikut :

Drawing Tool Bar

Properties

Frame

Layer

Stage / Kanvas

Objek

Baris waktu / time Line)


Palate Timeline terdiri dari frame dan layer. Drawing Tool Bar : Piranti untuk menggambar objek, dan memodifikasi objek Time Line : Digunakan sebagai pengatur waktu dan pembentukan frame animasi. Properties : Bagian ini dipakai untuk mensetting property sebuah objek yang dipilih. Fungsi utamanya

untuk memodifikasi gambar yang dimaksud, seperi mengatur ukuran stage, memilih warna Background.

Stage / Kanvas : Bagian ini tempat untuk mendesain gambar / symbol. 2. Pengolahan Grafis Kustomisasi atau pengolahan bidang datar yang dapat dilakukan meliputi pewarnaan isi objek grafis (Filling), pewarnaan isi dengan Pain Bucket, pewarnaan garis tepi dengan dengan ink, pembentukan kontur garis dan bidang (Snaping), penangkapan area objek grafis (Capturing). Dalam modul ini hanya akan dibahas menganai pembentukan efek garis tepi, Pembentukan kontur garis dan bidang, Penangkapan Area Objek Grafis. a). Pembentukan efek garis tepi à terdiri dari : 1. Pembentukan efek sudut pada bidang bujur sangkar. 2. Pembentukan efek garis halus (Smooting) pada bidang pensil. à pembentukan efek sudut yang dimaksud adalah mengubah kelengkungan (radius)

sudut pada objek bujur sangkar. Pembentukan sudut ini dilakukan sebelum objek ditaruh pada stage ( kanvas).

à untuk melakukan pembentukan efek sudut ini, prosedur yang dapat dilakukan adalah :

1. Klik icon bujur sangkar pada Drawing Tool Bar untuk membentuk objek pada Stage. 2. Klik icon radius (kelengkungan) objek pada Drawing Tool Bar. 3. Ketik besaran yang yang diinginkan pada kotak Corner Radius 4. Klik Tobol OK 5. Bentuklah objek bujur sangkar pada area stage.

Icon Radius


Contoh objek yang terbentuk :

à Pembentukan efek garis halus (Smooting) pada bidang pensil, dilakukan dengan cara :

1. Klik icon pensil untuk menggambar objek sembarang. 2. Klik icon Pencil Mode pada Drawing Tool Bar , untuk memilih efek garis halus yang diinginkan.

3. Draglah mouse untuk menggambar objek ini pada bidang kanvas, kemudian menggesernya pada bidang yang diinginkan lalu mendrop mouse apabila bidang yang diinginkan sudah terbentuk.

4. contoh objek grafis yang terbentuk

Mode Pencil


b). Pembentukan kontur garis dan bidang (Snaping)

à proses membentuk suatu bidang grafis yang telah ada dengan cara mengatur garis atau bidang pada objek grafis secara fleksibel. Proses ini dilakukan pada objek yang sudah ditaruh pada kanvas. à contoh , suatu objek bujur sangkar dapat menghasilkan objek grafis baru dengan bantuan Snaping. Adapun prosedur yang dapat dilakukan adalah :

1. Bentuklah objek bujur sangkar dengan factor corner 100 pada kanvas. 2. Klik icon Panah (Arrow) pada Drawing Tool Bar 3. Dekatkan mouse pada daerah objek bujur sangkar sampai kursor mouse berubah menjadi

kursor Snaping. 4. Drag mouse untuk mengubah bujur sangkar menjadi bidang baru yang diinginkan 5. Drop mouse pada posisi bidang yang sudah diinginkan.

6. Objek grafis baru yang dihasilkan dengan Snaping.

Pastikan icon “Snapping” diklik

Kursor Snaping


c). Penangkapan Area Objek Grafis. (Capturing) Selain melakukan proses Snaping, pembentukan objek grafis tidak beraturan dapat pula dibentuk dengan proses Capturing. Capturing adalah proses membentuk suatu bidang baru pada objek grafis yang sudah ada dengan cara menangkap sebagian atau seluruh bidang dari objek grafis yang sudah ada. Proses ini dilakukan pada objek yang sudah ditaruh pada Kanvas.

à untuk melakukan proses capturing, prosedur yang dapat dilakukan adalah: 1. Bentuklah suatu bidang datar, misalnya bujur sangkar pada Kanvas. 2. Klik icon Lasso Tool pada Drawing Tool Bar.

Apabila icon sudah diklik maka pada area bawah Drawing Tool Bar akan tampil tiga sub icon Lasso Tool ini yaitu Magic Wand, Polygon Mode dan Magic Wand Properties.

§ Magic Wand digunakan untuk menangkap area objek grafis secara acak dibandingkan dengan Polygon mode.

§ Polygon mode digunakan untuk menangkap gambar dengan membentuk area penangkapan secara persegi, anda dapat menggunakan salah satu atau kedua icon ini secara bersamaan.

§ Magic Wand properties digunakan untuk mengatur citra tepi bidang penangkapan objek grafis.

3. Klik icon Polygon Mode 4. Arahkan mouse ke objek grafis yang akan ditangkap, lalu klik 5. Drag mouse ke titik lainnya untuk membentuk bidang yang diinginkan 6. Ulangi langkah ke - 4 sampai membentuk bidang yang diinginkan 7. Klik dua kali apabila bidang pengkapan sudah terbentuk.

Apabila procedure ini benar dilakukan maka pada objek grafis tersebut akan terbentuk sub area yang berisi arsiran. Bidang inilah yang disebut bidang tangkapan.

Magic Wand Properties Magic Wand

Polygon Mode


8. Klik Pada area penangkapan 9. Drag mouse ke luar dari objek grafis tersebut..

( Keadaan kanvas setelah objek capturing dipindahkan) 3. Gambar, Ilustrasi dan Animasi a) Membuat dan mengedit symbol à Untuk membuat symbol, pilih pada menu Insert > New Symbol. à Tentukan behavior dari symbol, ada 3 macam behavior dari symbol : 1. Movie Clip : Simbol ini merupakan rangkaian gambar didalamnya ( seperti film). 2. Button : Simbol ini berfungsi sebagai tombol yang dapat diklik. 3. Graphic : Simbol ini berupa gambar.

à Gambar yang sudah jadi dapat diubah menjadi symbol. 1. Pilih gambar di stage 2. Dari menu bar pilih Insert > Convert to Symbol. à Mengedit Simbol Untuk mengedit symbol, klik dua kali pada gambar symbol di Library Panel atau klik dua kali pada

gambar instance di stage.


à Membuat Instance seret (drag) gambar symbol dari Library ke stage.

b) Library à Setiap kali symbol dibuat, symbol tersebut akan berada didalam Library Panel. Dalam movie yang

cukup besar, jumlah symbol yang digunakan akan sangat banyak. à Fungsi : Mengorganisasikan symbol-simbol dalam susunan yang memudahkan dalam penggunaannya. à Pilih Window > Library atau Ctrl + L c). contoh – contoh penggunaan pengolahan grafis, gambar, dan ilustrasi

1. Menggambar Objek

à Buat object seperti pada gambar diatas, simpan dengan nama P1Muka.Fla à Tools yang digunakan 1. Line Tool, untuk membuat objek garis. 2. Oval Tool, untuk membuat objek oval, lingkaran 3. Rectangle Tool, untuk membuat objek bujur sangkar, persegi panjang 4. Arrow Tool, digunakan untuk menyeleksi objek, memindahkan objek, dan dapat pula digunakan untuk memodifikasi objek. contoh seperti gambar diatas untuk membuat alis yang melengkung, dekatkan kursor ke bagian tengah garis atau stroke, maka kursor akan memunculkan gambar lengkung kecil. pada saat itu garis dapat ditarik membentuk lengkungan. 5. Paint Bucket Tool, digunakan untuk memberi warna pada objek yang terseleksi.

Klik dua kali untuk mengedit Seret gambar symbol ke stage untuk mebuat instance.

1 2 3


6. Subselect Tool, klik suatu stroke atau garis dengan Subselect Tool, maka didalam garis tersebut

tampak titik-titik yang dapat dimodifikasi, ditarik, dan digeser hingga garis tersebut membentuk gambar yang diinginkan. 2. Soft Edges 1. Efek Drop Shadow à dilakukan dengan membuat pinggiran gambar yang bergradasi yaitu dengan Soften Fill Edges. à Yang bisa dibuat Soft edges hanya shape. apabila objek berupa group maka harus di-ungroup dahulu atau di break apart bila objeknya berupa teks. à Contoh : 1. Buat teks di stage, misal huruf B. 2. Buat layer baru dengan nama “shadow” di bawah layer teks. 3. Copy dan paste frame 1 layer teks ke frame 1 layer shadow. 4. Ubah warna teks pada layer shadow menjadi warna hitam sebagai warna bayangan. 5. Geser gambar teks pada layer shadow agak kenan bawah. 6. Untuk membuat soft edges, teks di layer shadow perlu diubah menjadi shape biasa. Pilih teks di layer shadow kemudian klik menu Modify > Break Apart. 7. Selanjutnya dari menu bar klik Modify > Shape > Soften Fill Edges 8. Simpan File dengan nama P1DropShadow

à Beberapa parameter yang mempengaruhi hasil akhir soften fill adalah :


• Distance à Menyatakan jarak gradasi dari pinggir gambar • Number of steps à Menyatakan berapa banyak gradasi yang dihasilkan, semakin

besar nilainya semakin halus hasilnya • Direction à Menyatakan ke mana arah gradasi, yaitu ke dalam atau ke luar

gambar. 2. Menggunakan Alpha

à Untuk membuat pinggir gambar yang bergradasi dapat menggunakan layer transparan sebagian yang menutupigambar. Prosedur yang dilakukan adalah : 1. Import gambar *. Jpg, langkah kerja pilih menu File > Import 2. Buat objek lingkaran pada layer 2 3. Klik untuk menyeleksi gambar lingkaran di layer 2. 4. Buka Color Mixer (Window > Color Mixer). 5. Ganti warna menjadi Radial Gradient. kemudian Klik Slide warna paling kiri yang menggambarkan warna bagian tengah lingkaran, ubah Alpha di Mixer Panel menjadi 0 sehingga bagian tengah lingkaran benar-benar transparan.. 6. Klik slider warna paling kanan di Fill Panel, geser slider agak kekiri, kemudian ganti parameter Alpha di Mixer panel jadi 100. 7. Simpan File dengan nama P1UseAlpha.

d). Animasi dalam flash


Animasi dibuat dengan membentuk serangkaian frame yang berisi grafik didalam timelines. Keyframe adalah

frame dimana terdapat perubahan yang spesifik didalam animasi. Animasi didalam flash diantaranya animasi Keyframe to Keyframe, biasanya cara ini digunakan untuk membuat animasi yang membutuhkan penggambaran frame demi frame, seperti film kartun.

kerugiannya ukuran file menjadi sangat besar. sedapat mungkin gunakan tweening animation, karena ukuran

file akan menjadi lebih kecil. tweening animation diantaranya adalah motion tweening atau pun motion guide, kemudian terdapat pula motion shape, animasi ini sering digunakan untuk teknik morphing. animasi key frame to keyframe tidak akan dibahas dalam modul ini. (1). MOTION TWEENING

1. Pilih oval tool untuk membuat objek bola, convert objel bola ke Symbol, pilih Insert < Convert to Symbol.

2. Buat keyframe di frame 60. caranya letakan kursor diframe 60 kemudian klik kanan insert Keyframe. 3. Buat pergerakan untuk animasi, misalnya dengan menggeser instance dari posisi objek semula misal

dari kiri ke kanan, dari kiri keatas, dari atas ke bawah, dan lain sebagainya. pastikan frame 60 terpilih saat anda menggeser.

4. Klik kanan salah satu frame antara frame 1 sampai 59, pilih Create Motion Tweening dari menu. Animasi Motion Tweening ditandai dengan munculnya warna violet di frame. setelah itu lakukan test movie (Ctrl + Enter).

(2). MOTION GUIDE

1. Pilih oval tool untuk membuat objek bola, convert objel bola ke Symbol, pilih Insert < Convert to Symbol.

2. Buat keyframe di frame 60. caranya letakan kursor diframe 60 kemudian klik kanan insert Keyframe. 3. Selanjutnya buat layer yang berisi guide untuk bola, pilih Insert > Motion Guide dari menu bar. Layer

guide akan muncul diatas layer bola. 4. Dengan menggunakan Pencil Tool, buat motion path di layer Guide, yaitu kurva yang nantinya menjadi

arah jalannya rocket. 5. Pada frame 60, geser instance bola ke ujung path yang satunya lagi. 6. dari menu bar pilih Insert > Create Motion Tween. 7. Lakukan Test Movie.

Note : Keyframe 20, geser instance dari posisinya semula, pastikan frame 60 terseleksi


(3). SHAPE TWEENING

1. Akan dibuat perubahan bentuk dari bola menjadi Bujur sangkar. 2. Pilih oval tool untuk membuat objek bola, buat bola dengan ukuran yang cukup besar ditengah-tengah

stage. kosongkan pilihan stroke color. 3. Buat keyframe di frame 60. caranya letakan kursor diframe 60 kemudian klik kanan insert Blank

Keyframe. 4. Pilih Recteangle Tool untuk membuat bujur sangkar. 5. Seleksi salah satu frame antara frame 1 sampai 59, bagi anda yang menggunakan Flash MX anda

lihat properties kemudian pilih shape pada pilihan tweening. Bagi anda yang menggunakan Flash 5 buka Frame Panel ( Window > Panels > Frame) dan ganti pilihan tweening dari None menjadi Shape. Shape Tweening ditandai dengan munculnya warna Hijau di frame. setelah itu lakukan test movie (Ctrl + Enter).

Note : Apabila objek berupa instance, maka instance harus diubah dulu menjadi shape ( seleksi instance, kemudian dari menu bar klik Modify > Break Apart.

(4). SOFT EDGES

1. Impor gambar (*. BMP, *. Jpeg ) à Pilih File pada menu bar > Import 2. Letakan kursor di frame 120 kemudian insert Keyframe. 3. Bagi frame menjadi 3 bagian, letakan Keyframe, masing-masing pada frame 40 dan 80. 4. aktifkan frame 40 tepat pada keyframe kemudian convert gambar ke symbol. à Untuk Flash 5 : 1. Pilih Window > Panel > Effect 2. Pilih Alpha ( rubah alpha menjadi 0 ) à Untuk Flash MX Pilih Properties Color > Alpha > Mixer geser menjadi 0


5. Lakukan hal yang sama pada frame ke 80. ( pilih color advanced, rubah effect sesuai dengan keinginan anda).

6. Dari menu Bar, pilih Insert > Create Motion Tween. ( untuk masing-masing dari frame 1-39, 41-79, 81-

119 ) 7. Lakukan test movie.

----------------- Selamat Mencoba …………… Keep smilling. Take life easy. Where there is a Will, There is a Way

Effect color pada Flash MX

Effect color pada Flash 5


Tujuan : ü Mengetahui fungsi dari layer ü Mengetahui bagaimana cara menggunakan Mask

Layer ü Mengetahui bagaimana cara pembutan tombol


1. T O M B O L

Untuk membuat tombol, perlu ditetapkan apa yang akan terjadi pada kondisi tombol . ada 4 kondisi tombol : 1. Pada saat normal (UP) 2. Saat mouse berada di atas tombol (OVER) 3. Saat tombol ditekan (DOWN) 4. Mendefinisikan luas area tombol (HIT) (1). Membuat Tombol a. Buka aplikasi yang telah dibuat pada pertemuan sebelumnya ( Bola menggelinding atau bergerak). b. Buat 1 buah tombol pada layer tiga dengan menggunakan oval tool, dengan cara : à Pilih Oval Tool, buat kapsul dikanan atas stage. à Dengan menggunakan Arrow Tool, pilih keseluruhan gambar tersebut. Kemudian konversi

menjadi symbol (Insert > Convert to Sysmbol). Beri nama symbol “tombol” dan pilihan behavior pilih Button.

à Klik dua kali gambar tombol untuk melakukan edit symbol.

à Terlihat bahwa pada keyframe Up telah terisi. Copy dan paste keyframe Up ke frame Over,

Down, dan Hit. à Ganti warna Fill tombol di posisi Over dengan warna sesuai dengan pilihan anda. à Sekarang tombol perlu diberi ActionScript. Script ini berguna untuk memberitahu apa yang dilakukan tombol misalnya setelah tombol ditekan. Anda akan memberikan Script yang memberitahukan tombol untuk berhenti ke frame tertentu. à Kembali kelayar Edit Scene ( Edit > Scane) atau klik dua kali pada instance tombol. à Pilih instance tombol dan buka Action Panel (Window > Actions). kemudian tuliskan script

berikut : on (release) { stop( ); } cara menuliskan script diatas sebagai berikut : Klik + > Basic Action > Stop. ( pada Flash 5 ) Klik + > Basic Action > Movie Control > Stop ( pada Flash MX ) à Kemudian test movie ( Ctrl + Enter ) à Latihan : Buah 1 buah tombol di layer 4 untuk action Play.


(2). Membuat Tombol Image Map

Sebagian dari gambar Bitmap dapat diubah menjadi tombol dengan menggunakan tombol transparan di atas gambar bitmap tersebut.. Adapun procedure untuk membuat tombol dengan image map adalah sebagai berikut :

1. Impor gambar ( bagian gambar tertentu akan dijadikan tombol ). 2. Buat layer baru dengan nama “Imagemap” 3. Dengan menggunakan Brush Tool, buatlah sebuah gambar yang menutupi objek gambar yang akan dibuat tombol. 4. Seleksi Gambar yang baru dibuat tersebut, kemudian konversi menjadi symbol ( Insert > Convert to Symbol) dengan pilihan behavior Button. 5. Edit symbol tersebut. 6. Geser Keyframe dari Up ke Hit 7. Kembali ke scene dan lakukan teset movie.


2. L a y e r Layer dianggap sebagai lapisan transparan yang melekat satu sama lain. Apabila tidak terdapat satu pun elemen di suatu layer, maka layer tersebut menjadi tembus pandang.

Layer membantu mengorganisasikan elemen-elemen yang ada di movie. Kita dapat memodifikasi satu layer tanpa mempengaruhi layer yang lain. 3. Mask Layer à Digunakan untuk membatasi apa yang kelihatan dari objek didalam layer lain sebatas bentuk objek yang ada mask layernya. Layer yang dibatasi ini disebut masked layer. à Misalkan kita mempunyai layer sebagai berikut

Mask Layer Masked Layer


Latihan : MEMBUAT SPOTLIGHT

1. Buat layer pertama dengan nama “Bg”, buat dalam bentuk Recteangle dengan radius 50. 2. Buat layer baru dengan nama “text”, buat tulisan “STMIK BANDUNG” geser symbol movie klip ketengah-

tengah kanvas. 3. Buat layer baru dan beri nama “spot”. Geser symbol spot (berbentuk lingkaran) ke sebelah kiri tengah

kanvas. 4. Kemudian pada effect Panel (Window > Panels > Effect), masukan nilai Alpha 30% untuk mengubah

instance spot menjadi transparan. 5. Tambahkan Keyframe untuk masing-masing layer pada frame 60. 6. Pilih Frame 60 di layer “spot”, kemudian geser instance spot ke kanan stage. 7. Buat layer baru dan berilah nama “spot mask” 8. Copy frame 1 dari ayer “spot” dan paste ke frame 1 layer ”spot mask”. 9. Copy frame 60 dari ayer “spot” dan paste ke frame 20 layer ”spot mask”. Mask layer yang dibuat berbentuk

sama seperti lampu spotlight di layer spot. 10. Buat motion tweening untuk layer “spot” dan “spot mask” untuk membuat pergerakan lampu spotlight dari

kiri ke kanan.

Hasil Akhir

Cara membuat Mask Layer : 1. Buat dua buah layer, misalnya layer pertama layer awan dan

layer kedua layer topeng 2. Untuk membuat suatu layer menjadi Mask layer, klik kanan

layer dan pada menu yang muncul pilih Mask. Secara otomatis layer tersebut akan menjadi mask layer dan layer dibawahnya menjadi masked layer.


11. Sekarang ubah layer spot mask menjadi mask layer. Klik kanan layer spot, pilih properties. Ganti type

menjadi Mask. 12. Jadikan layer teks menjadi masked layer. 13. geser layer “teks” ke layer “spot mask”.

14. setelah itu lakukan test movie (ctrl + enter) untuk hasil akhir.


Tujuan : ü Mengetahui dasar-dasar ActionScript dan dapat

memahami bagaimana cara penggunaan ActionScript dan mengetahui fungsi dari script tersebut.


Dasar-dasar ActionScript 1 Fungsi ActionScript : 1. Membuat navigasi situs 2. Menambahkan interaktivitas dengan user 3. membuat situs yang dinamis 4. Mempertahankan user untuk kembali mengunjungi situs.

1. NAVIGASI • Salah satu fungsi mendasar dari ActionScript untuk membuat navigasi movie Flash. Maksudnya

bagaimana membantu user untuk masuk kebagian-bagian movie tertentu, misalnya frame atau scene tertentu.

• Navigasi erat kaitannya dengan system menu dan struktur content suatu movie flash. • Untuk navigasi standar action yang paling banyak digunakan adalah action yang terdapat dalam

kategori basic action, yaitu Stop, Play, GoTo. Stop digunakan untuk menghentikan movie pada saat tertentu, Play digunakan untuk menjalankan movie pada saat tertentu, sedangkan GoTo memiliki dua variasi, yaitu gotoAndPlay ( untuk masuk ke frame atau scene tertentu dan memainkannya ) dan gotoAndStop(kebalikannya).

2. MENGONTROL MOVIE KLIP

Movie klip merupakan objek di Flash yang memiliki banyak kegunaan. Hal-hal yang dapat dikontrol pada movie klip diantaranya rotasi, tinggi, lebar, posisi, transparasi, warna, dan lain sebagainya. Kita dapat mengubah berbagai property dengan tombol mouse ataupun dari input keyboard. a. Mengubah Properti Movie Klip

Banyak sekali property movie klip, diantaranya :

Properti Nilai Keterangan _alpha 0-100 Menentukan transparansi _visibility True/False Menentukan movie klip kelihatan atau tidak _name Nama Memberi nama baru _rotation Derajat Merotasi movie klip _height Pixel Mengubah tinggi movie klip _width Pixel Mengubah lebar movie klip _x Pixel Mengubah posisi horizontal dari registration point _y Pixel Mengubah posisi vertical dari registration point _xscale 100=normal Mengubah dimensi movie klip secara horizontal _yscale 100=normal Mengubah dimensi movie klip secara vertical _focusrect True/False Menentukan apakah kotak kuning akan muncul

saat navigasi dengan tombol tab _highquality 0,1,2 Mengubah keseluruhan anti aliasing dari movie _quality Low, Medium, High, Best Mengubah keseluruhan anti aliasing dari movie _soundbufftime Default=5 Menentukan berapa lama (detik) sebelum movie

memulai streaming sound. Menggunakan setProperty Format action setProperty adalah sebagai berikut : SetProperty(“namamovieklip”,property,nilaiproperty) Contoh misalnya untuk memberikan action pada tombol agar mengubah transparansi, statementnya adalah :


On (release) { SetProperty (“movieklip”, _alpha, 50 ) }

b. Clip Event à salah satu event handler di dalam Flash, selain key event dan mouse event. Semua event dalam clip event adalah semua event yang berkaitan dengan movie klip. à syntak : onClipEvent (pilihanEvent) { statement; } à action onClipEvent dapat diakses melalui action panel dengan mengklik + > Action > onClipEvent, ada beberapa pilihan dalam clip event, diantaranya :

Clip Event Keterangan OnClipEvent(Load) Ketika movie klip muncul pertama kali

ditimeline OnClipEvent(enterFrame) Ketika setiap frame movie klip dimainkan OnClipEvent(unload) Adalah saat frame pertama yang terjadi setelah

movie klip dihapus dari timeline OnClipEvent(mouseDown) Ketika tombol kiri mouse ditekan OnClipEvent(mouseUp) Ketika tombol kiri mouse diangkat/dilepaskan OnClipEvent(mouseMove) Ketika mouse digerakan OnClipEvent(KeyDown) Ketika tombol keyboard yang mana saja

ditekan OnClipEvent(KeyUp) Ketika tombol keyboard yang mana saja

dilepaskan.

c. Load movie ke dalam movie klip Load movie(loadMovieNum) digunakan untuk membuaka file swf eksternal ke dalam movie. Salah keuntungan menggunakan metode load movie adalah : 1. Menjaga agar file Flash tetap kecil sehingga waktu download dapat dipersingkat, karena kita dapat

membagi satu movie Flash menjadi beberapa file yang lebih kecil 2. Pengguna Internet bias men-download hanya animasi Flash yang mereka perlukan.

d. Drag and Drop Drag and Drop, dibuat untuk membuat sebuah movie klip bergerak mengikuti gerakan pointer mouse. Ini dapat dilakukan dengan action starDrag. Sedangkan untuk menghentikan movie klip mengkuti pointer mouse digunakan action stopDrag. User dapat memindahkan movie klip ketempat lain dengan menekan dan menahan tombol mouse. Jika user melepaskan tombol mouse movie klip tersebut akan dilepaskan dan seakan-akan djatuhkan(drop). Untuk membuat efek ini dilakukan menggabungkan action startDrag dan stopDrag dengan mouse event. Untuk itu perlu dibuat tombol didalam movie klip tersebut.


Latihan : a. Load Movie ke dalam movie klip

1. Buat file *.swf sebanyak 4 buah ( Man.swf, Burung.swf, Kucing.swf, Gajah.swf) 2. Buat objek seperti gambar diatas atau sesuai dengan kreasi anda.

Note : buat lima tombol. 3. Seleksi instance tombol paling atas (bertuliskan man), kemudian berikan ActionScript :

On (release) { LoadMovieNum(“man.swf”, 1); } untuk Flash 5 // Tekan + > Basic Action > Load Movie // Untuk URL masukan nama file man.swf // Untuk Location pilih Level kemudian ketikan 1. Untuk Flash MX // Tekan + > action > on > release // Tekan + > Browser > Load Movie // Untuk URL masukan nama file man.swf // Untuk Location pilih Level kemudian ketikan 1.

4. Lakukan hal yang sama untuk tombol 2 …4 (sesuaikan nama file *.swf-nya) 5. Untuk tombol terakhir, masukkan script berikut

On (release) { unloadMovieNum(1); }


b. Membuat puzzle

1. Buat Movie Klip, kemudian potong menjadi beberapa bagian. 2. Buat masing-masing bagian menjadi movie klip baru

( Misal dibagi menjadi 8 bagian. Maka masing-masing menjadi 8 movie klip. Dan setiap movie klip simpan dalam satu layer.

3. klik ganda salah satu movie klip untuk masuk ke modus Edit Symbol. 4. Seleksi invisible button, kemudian masukkan script berikut :

On (press) { startDrag (this); this.swapDepths(2); } on (release) { stopDrag(); }


untuk Flash 5 //Tekan + > BasicActions > On Mouse Event, pilih press //Tekan + > Action > startDrag //Untuk target masukan this dan klik checkbox expression //Tekan + > actions > Evaluate ketikan this //Tekan + > objects > Movie Clip > swapDepths, masukan depth 2 untuk Flash MX //Tekan + > Action > On , pilih press //Tekan + > Action > Movie Clip Control, pilih startDrag //Untuk target masukan this dan klik checkbox expression //Tekan + > objects > Movie Clip > Method > swapDepths, masukan depth 2

5. Ulangi langkah diatas dengan instance movie klip yang lain. 6. Lakukan test movie. Apabila movie klip, yang awalnya berada pada depth level 0, diklik dan digeser maka

movie klip tersebut akan berada pada depth level 2. movie klip selanjutnya yang dikenal action starDrag depth levelnya berganti dengan depth level movie klip yang pertama.


Tujuan : ü Dapat membuat berbagai macam variasi kursor. ü Deteksi tumbukan dibuat sebagai dasar

pengembangan aplikasi lebih lanjut. ü Dapat memahami proses duplikasi pada movie klip


4.1. Variant Cursor

Kita dapat mengganti bentuk kursor standar dengan movie klip pilihan sendiri. Prinsipnya dengan menyembunyikan bentuk mouse standar dengan action Mouse.hide kemudian menyamakan posisi movie klip dengan posisi koordinat mouse. Saat pointer mouse disembunyikan sebenarnya pointer tersebut masih ada dan berfungsi. Latihan 1.

1. Buat dua buah symbol a. Layer pertama buat symbol dengan behavior button. b. Layer kedua buat symbol dengan behavior movie klip ( symbol yang akan dibuat menjadi bentuk

kursor. Untuk bentuk movie dibuat sesuai keinginan anda, sebaiknya anda membuat bentuk kursor dengan bentuk yang meruncing di ujungnya. Tempatkan ujung yang runcing tersebut pada tanda plus kecil (registration point) yang ada di layer.

Registration point di ujung ikan

2. Di timeline utama, seleksi movie klip ikan dan beri nama instance tersebut “ikan” Note :

- Flash 5 à pilih window > panel > instance - Flash MX à pilih window > property > instance name

3. Pastikan movie klip tersebut tetap terseleksi. Buka Action Panel dan masukkan scrip berikut :


langkah kerja untuk menuliskan scrip diatas : Untuk Flash 5 : // Tekan + > Actions > onClipEvent, pilih load // Tekan + > Objects > Mouse > hide // Seleksi tanda kurung kurawal penutup // Tekan + > Actions > onClipEvent, pilih mouseMove // Tekan + > Actions > set variable, // di kotak isian Variable masukkan _root.ikan._x // di kotak isian Value masukkan _root._xmouse ( checklist kotak expression) // Tekan + > Actions > set variable, // di kotak isian Variable masukkan _root.ikan._y // di kotak isian Value masukkan _root._ymouse ( checklist kotak expression) // Tekan + > Actions > evaluate, ketik updateAfterEvent () Untuk Flash MX

// Tekan + > Actions > movieClipControl > onClipEvent, pilih load // Tekan + > Objects > movie > Mouse > methode > hide // Seleksi tanda kurung kurawal penutup // Tekan + > Actions > movieClipControl > onclipevent, pilih mouseMove // Tekan + > Actions > variable > set variable // di kotak isian Variable masukkan _root.ikan._x // di kotak isian Value masukkan _root._xmouse ( checklist kotak expression) // Tekan + > Actions > set variable, // di kotak isian Variable masukkan _root.ikan._y // di kotak isian Value masukkan _root._ymouse ( checklist kotak expression) // Tekan + > Actions > evaluate, ketik updateAfterEvent () Keterangan : Fungsi updateAfterevent digunakan untuk membuat gerakan movieklip mengikuti mouse lebih halus, karena setiap event mouseMove terjadi, fungsi tersebut memperbaharui kedudukan movie klip supaya sama dengan koordianat mouse. 4. Test Movie.

4.2. Bentuk Kursor berbeda sesuai dengan daerah yang kita inginkan.

Contoh :

1. Buat movie dengan menbagi area kanvas menjadi 4 bagian, kemudian buat 4 buah tombol. ( tombol dibuat dilayer pertama, kemudian kursor dibuat dilayer kedua ).

2. untuk lebih jelskan perhatikan gambar dibawah ini.


3. Seleksi instance movie klip ikan dan tuliskan scrip berikut. onClipEvent (load) { Mouse.hide(); } onClipEvent (mouseMove) { _root.ikan._x = _root._xmouse; _root.ikan._y = _root._ymouse; if ((_root._ymouse>0 && _root._ymouse<50) && (_root._xmouse>0 && _root._xmouse<550)) { _root.ikan._xscale = 50; _root.ikan._yscale = 50; _root.ikan._rotation = 0; _root.ikan._alpha = 100; } else if ((_root._ymouse > 50 && _root._ymouse < 350) && (_root._xmouse > 400 && _root._xmouse <500)) { _root.ikan._xscale = 100; _root.ikan._yscale = 100; _root.ikan._rotation = 0; _root.ikan._alpha = 25; } else if ((_root._ymouse > 350 && _root._ymouse < 400) && (_root._xmouse > 0 && _root._xmouse < 550)) { _root.ikan._xscale = 100; _root.ikan._yscale = 100; _root.ikan._rotation = 270; _root.ikan._alpha = 100;


} else { _root.ikan._xscale = 100; _root.ikan._yscale = 100; _root.ikan._rotation = 0; _root.ikan._alpha = 100; } updateAfterEvent(); } Keterangan :

1. Tanda && merupakan operator yang digunakan untuk mengecek apakah dua kondisi sama-sama terjadi. Misalnya ( _root._ymouse > 0 && _root._ymouse < 50), mengecek apakah posisi koordinat y pointer mouse berada diantara titik 0 dan 50.

2. Untuk langkah kerja tidak akan dijelaskan. ( anda coba sendiri Oks!)

4.3. Deteksi Tumbukan Deteksi tumbukan banyak digunakan pada pembuatan game, aplikasi teori-teori ilmu fisika, biologi, kimia dan lain sebagainya. Untuk mendeteksi tumbukan digunakan metode hitTest. Dalam menggunakan metode ini ada dua pilihan :

1. Mendeteksi tumbukan dengan titik tertertu 2. mendeteksi tumbukan antara movie klip dengan movie klip lain.

Pada modul ini yang akan dibahas hanya deteksi tumbukan antara movie klip dengan titik tertentu. Format script hitTest yang dipakai adalah :

Movieklip.hitTest(x,y,shapeFlag) Dimana : x = koordinat titik pada sumbu x y = koordinat titik pada sumbu y

latihan :

1. Buat 2 buah movie klip (buat dalam 2 layer ) masing-masing adalah instant titik sasaran dan sasaran ( contoh seperti gambar dibawah ini.


2. Seleksi instance movie klip titik sasaran dan beri nama.

à Untuk Flash 5 : pilih Window > Panels > Instance > beri nama : TitikSasaran à Untuk FlashMX : pilih Property > seleksi Instant titik sasaran > beri nama : TitikSasaran

3. Seleksi instance movie titik sasaran kemudian buka window action dan masukan script berikut :

OnClipEvent (load) { Mouse.hide (); } onClipEvent (mouseMove) { _root.TitikSasaran.x=_root._xmouse;

_root.TitikSasaran.y=_root._ymouse; updateAfterEvent ( );

}


à untuk Falsh 5 : // Tekan + > Actions > onClipEvent, pilih load // Tekan + > objects > Mouse > hide // Seleksi tanda kurung kurawal penutup // Tekan + > Actions > onClipEvent, pilih mouseMove // Tekan + > Actions > set variable, // di kotak isian variable masukan _root.TitikSasaran._x // di kotak isian value masukan _root._xmouse // Tekan + > Actions > set variable, // di kotak isian variable masukan _root.TitikSasaran._y // di kotak isian value masukan _root._ymouse // Tekan + > Action > evaluate, ketik updateAfterEvent( ) à untuk Falsh MX : // Tekan + > Actions > MovieClipControl >onClipEvent, pilih load // Tekan + > objects > Mouse > methode > hide // Seleksi tanda kurung kurawal penutup // Tekan + > Actions > MovieClipControl >onClipEvent, pilih mouseMove // Tekan + > Actions > variable > set variable, // di kotak isian variable masukan _root.TitikSasaran._x // di kotak isian value masukan _root._xmouse // Tekan + > Actions > variable > set variable, // di kotak isian variable masukan _root.TitikSasaran._y // di kotak isian value masukan _root._ymouse // Tekan + > Action > movieclipcontrol pilih updateAfterEvent( ) Script diatas digunakan untuk menggerakan movie klip titiksasaran mengikuti gerakan mouse.

4. Seleksi instance movie bebek, masuk ke modus edit symbol, buat 3 layer. Masing-masing seperti gambar

dibawah ini.

untuk layer 3 masukkan script dibawah ini . stop ( ) ;

5. Kembali ke scane 1 6. Seleksi instance movie burung, kemudian buka Action Panel dan masukkan script berikut :


OnClipEvent (mouseDown) { If (this.hitTest(_root._xmouse,_root._ymouse,true)) {

this.gotoAndStop ( 2 ); } } à untuk Flash 5 : // Tekan + > Action > onClipEvent, pilih mouseDown // Tekan + > Action > if // untuk condition, ketikan this // Tekan + > objects > Movie Clip > hitTest // Masukkan _root._xmouse,_root._ymouse,true // Tekan + > Actions > evaluate, ketik this.gotoAndStop (2)

à untuk Flash MX :

// Tekan + > Action > movieClipControl > onClipEvent, pilih mouseDown // Tekan + > Action >condition/loop, pilih if // untuk condition, ketikan this // Tekan + > objects > Movie Clip > methode, pilih hitTest // Masukkan _root._xmouse,_root._ymouse,true // Tekan + > Actions > evaluate, ketik this.gotoAndStop (2) // Tekan + > objects > Movie Clip > methode, pilih gotoAndStop // untuk object ketikan this // untuk parameters ketikan 2

Script diatas mendeteksi pada saat event mouseDown ( saat tombol moouse ditekan ) movie klip burung berpotongan dengan koordinat mouse. Jika kondisi itu benar, maka movie klip burung dimainkan mulai frame 2.

7. Lakukan test movie

4.4. Duplikasi dn menghapus Movie Klip Kita dapat membuat duplikat(copy) dari movie klip dengan action duplicatemovieClip. Duplikat dari movie klip tersebut dapat diberi nama dan depth level yang spesifik untuk setiap instance. Setelah movie klip terduplikasi, kita dapat memodifikasi property movie klip tersebut. Format action duplicateMovieClip muncul dalam format: DuplicateMovieClip (movieklip, namakopinya, depthlevel) Untuk menghapus copy dari movie klip : RemoveMovieClip (movieklip) Latihan :

1. Buat 3 buah layer, masing-masing layer topeng, button1, dan button 2


2. Beri nama movie klip “Topeng “ 3. Seleksi instance tombol paling atas dan berikan action script berikut :

On ( release ) { DuplicateMovieClip (_root.topeng, “copy”, 1 ); SetProperty(_root.copy, _x, 400); SetProperty(_root.copy, _y, 200); SetProperty(_root.copy, _alpha, 50); } à untuk Flash 5 : // Tekan + > Basic Action > On Mouse Event // Tekan + > Actions > duplicateMovieClip // untuk target masukan _root.topeng // aktifkan checkbox expression // untuk New Name, ketik copy // untuk Dept masukan angka 1 // kemudian anda dapat mengubah property duplicate tersebut. Exs


à untuk Flash MX : // Tekan + > action > moviecontrol > On > pilih release // Tekan + > Actions > movieClipcontrol > duplicateMovieClip // untuk target masukan _root.topeng // aktifkan checkbox expression // untuk New Name, ketik copy // untuk Dept masukan angka 1 // kemudian anda dapat mengubah property duplicate tersebut. Exs : Tekan + > action > movieClipcontrol > setProperty

4. Selksi instance tombol ke dua, dan masukan ActionScript berikut untuk menghapus copy movieklip.

On ( release) { RemoveMovieClip (_root.copy); }

5. Lakukan test movie


Tujuan : ü Mengetahui bagaimana cara mengubah warna pada

movie klip. ü Dapat membuat gerakan objek dengan bantuan

keyboard


1. Mengubah Warna Movie Klip

Salah satu property yang tidak ada dalam action setProperty adalah warna. Timbul pertanyaan bagaimana caranya kita memberi atau mengubah warna pada movie klip yang kita buat. Cara yang bisa digunakan adalah dengan mengunakan Color Objek , yang merupakan predefined class object di flash. Sebelum anda menggunakan Color Object anda harus melakukukan pendefinisian variabel terlebih dahulu ( instantiate). Statement yang digunkan adalah : Namaobjekwarna = new color(namainstacemovieklip); Sebagai contoh anda lakukan latihan, dengan langkah-langkah sebagai berikut :

1. Buat 3 buah layer, masing-masing sebagai berikut : q Layer Bunga terdiri dari 2 buah movie klip yaitu Mahkota bunga dan putik q Layer Action berisi aksi untuk membuat instantiete Color Objek q Layer tombol terdiri 3 buah symbol button

2. Pilih layer bunga dengan movieklip Mahkota ( yang akan dirubah warnanya ), kemudian berinama instance movieklip tersebut.

3. Klik ganda frame 1 di layer “action” untuk membuaka Acion Panel. Kemudian tuliskan scrip berikut :


WMahkota = new Color(Mahkota) Langkah kerja : Untuk Flash 5 //Tekan + > Actions > Set variable, //di kotak isian variable tentukan namanya Wmahkota //dikotak isian value tekan + > objects > color> new color //untuk target ketik nama instance movie klipnya Mahkota //dan aktifkan checkbox Expression Untuk Flash MX //Tekan + > Actions > variable > Set variable, //di kotak isian variable tentukan namanya WMahkota //dikotak isian value tekan + > objects > movie > color > new color //untuk target ketik nama instance movie klipnya Mahkota //dan aktifkan checkbox Expression 4. Klik instance tombol paling atas, masukkan action berkut :

on (rollOver) { _root.WMahkota.setRGB(0xFFFF00); } Langkah kerja :

Untuk Flash 5

//Tekan + > Basic Actions > On Mouse Event, pilih rollover //Tekan + > Actions > evaluate //di kotak isian masukkan _root.WMahkota //Tekan + > Actions > objects > color > setRGB //Masukkan angka RGB ( 0xFFFF00) à warna kuning Untuk Flash MX //Tekan + > Actions > movie control < on, pilih rollover //Tekan + > objects > movie> color > methode > setRGB //di kotak isian object masukkan _root.WMahkota //di kotak isian parameter masukkan angka RGB ( 0xFFFF00) à warna kuning

lakukan hal yang sama untuk kedua tombol berikutnya dimana untuk angka RGB tombol merah : 0xFF0000

tombol Orange : 0xFF9900 5. Lakukan test movie.


2. Membuat Gerakan Objek

(Using Keyboard) Asumsikan anda ingin membuat game dengan objek yang bisa dikontrol jalannya dengan input dari tombol arah keyboard. Objek tersebut bias bergerak maju, ke kiri, ke kanan, dan berbalik ke belakang. Untuk membuat hal tersebut kita menggunakan action dengan branching condition ( IF….ELSE IF…..). IF (kondisi1) { Hasil1; } else if (kondisi2) { hasil2; } else if (kondisi3) { hasil3; }

• kondisi = Apakah tombol arrow key ditekan • hasil = mengubah koordinat dan rotasi movie klip

Langkah Kerja :

Gerakan kebawah

Gerakan keatas

Gerakan kekiri Gerakan kekanan


1. Buat dua buah layer, yang pertama layer pesawat dan yang kedua layer background. 2. Untuk menggerakan pesawat dengan keyboard digunakan action Key.isDown dengan branching if

condition. 3. Seleksi instance movie klip pesawat kemudian buka Action Panel dan masukan script berikut :

OnClipEvent (load) { Lrspeed = 20 ; Udspeed = 10 ; } onClipEvent (enterFrame) { if (Key.isDown(Key.RIGHT)) { this._x=_x+lrspeed; } else if (Key.isDown(Key.LEFT)) { this._x=_x-lrspeed; } else if (Key.isDown(Key.UP)) { this._y=_y-udspeed; else if (Key.isDown(Key.Down)) {

this._y=_y+udspeed; } if (this._x<=80 { this._x=80; } else if (this._x>=730 { this._x=730; } else if (this._y<=15 { this._y=730; } else if (this._y>=375 { this._y=375; } } pada clipEvent load, ditetapkan dua buah variable, yaitu lrspeed dan udspeed. Variable ini digunakan untuk menentukan berapa besar perpindahan gerakan pesawat ke kiri, kanan (lrspeed), dan atas, bawah (udspeed). Pada clipEvent enterframe, if condition pertama digunakan untuk membuat gerakan pesawat berdasarkan tombol arah mana yang ditekan (RIGHT, LEFT, UP, DOWN). Anda dapat juga menambahkan kondisi jika ada dua tombol panah yang ditekan, bersamaan sehingga pesawat bergerak miring ke kanan atas. If condition kedua digunakan untuk membatasi gerakan pesawat agar tetap berad pada stage area. Script diatas membatasi gerakan pesawat pada sumbu x (dari x=80 sampai x=730), juga pad sumbu y ( y=13 sampai y=375).

4. Test movie.


Note : Contoh scrip jika terdapat sebuah objek movie klip dan objek tersebut bergerak miring

Untuk membuat objek bergerak miring 450

kekanan atas digunakan Boolean operator AND (&&) untuk mendeteksi apakah arrow key atas dan kanan keduanya sama-sama ditekan.

materi flash mx

Documents