hand out macromedia flash _zainal

34
HAND OUT Macromedia Flash MX Oleh: A. Zainal Abidin

Upload: sugeng-setiyobudi

Post on 25-Dec-2015

17 views

Category:

Documents


1 download

DESCRIPTION

tutorial macromedia flash cs 3

TRANSCRIPT

Page 1: Hand Out Macromedia Flash _Zainal

HAND OUT

Macromedia Flash MX

Oleh:

A. Zainal Abidin

Page 2: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 2

KATA PENGANTAR

Perkembangan teknologi komputer yang semakin pesat, berakibat pula pada

peningkatan fungsi komputer yang awalnya sebagai alat bantu untuk menyelesaikan persoalan,

saat ini berfungsi pula sebagai media pembelajaran. Salah satu fungsinya adalah untuk membantu

proses transformasi ilmu secara efektif sehingga tujuan pembelajaran lebih mudah tercapai.

Tidak hanya untuk pelajaran TIK semata. Pelajaran lain, termasuk Pendidikan Agama Islam

pun sangat membutuhkan media berbasis TIK. Kendala yang ada, tidak banyak guru PAI yang

mampu membuat dan mengembangkan media berbasis ICT. Padahal, hal tersebut sangat penting

sekarang ini. Salah satu software yang dapat digunakan untuk membantu dalam membuat dan

mengembangkan media pembelajaran adalah Macromedia Flash.

Macromedia Flash adalah sebuah software animasi yang saat ini menjadi software

favorit untuk berbagai keperluan, di antaranya untuk membuat animasi untuk web, presentasi,

proposal modern, game, dan lain lain.

Dalam tutorial ini, dibahas dasar-dasar pembuatan animasi menggunakan Macromedia

Flash MX dan sedikit membahas mengenai action script yang dapat digunakan untuk

membantu membuat sistem navigasi presentasi, dan membuat hal-hal inovatif dan interaktif

lainnya.

Surabaya, 14 Pebruari 2015

A. Zainal Abidin

[email protected]

Page 3: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 3

CHAPTER 1

KOMPONEN FLASH MX

Timeline

Stage

Properties

Tools Box

Menu

Color Mixer & Color Swatches

Components

Action - Frame

Arrow tool Line tool

Sub Selection tool Lasso tool Text tool Rectangle tool

Pen tool Oval tool

Pencil tool Brush tool Free Transform tool Fill Transform tool

Ink Bottle tool Paint Bucket tool Color Picker tool Eraser tool

Hand tool Zoom tool

Stroke color Fill color

Black and white Swap colors [switch fill & line color]

Page 4: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 4

Tools box

� Arrow tool digunakan untuk memilih object atau memindahkannya

� Sub selection tool digunakan untuk merubah suatu object dengan edit point

� Line tool digunakan untuk membuat garis

� Lasso tool digunakan untuk memilih daerah pada object yang akan diedit

� Pen tool digunakan untuk menggambar dan mengedit object dengan edit point dengan

lebih akurat

� Text tool digunakan untuk membuat atau mengetikkan text

� Oval tool digunakan untuk membuat lingkaran atau oval

� Rectagle tool digunakan untuk membuat persegi atau persegi panjang

� Pencil tool digunakan untuk membuat garis bebas atau garis lurus

� Brush tool digunakan untuk memberi warna pada object bebas

� Free transform tool digunakan untuk memutar suatu object yang diimport pada Flash,

serta untuk mengatur efek warna

� Ink bottle tool digunakan untuk mengisi warna pada object tanpa border

� Paint bucket tool digunakan untuk mengisi warna pada object

� Color picker digunakan untuk mengambil sample warna dari object lain

� Eraser tool digunakan untuk menghapus object

Stage / Kanvas

Merupakan tempat / lembar kerja untuk meletakkan object-object yang digunakan dalam

membuat animasi pada Flash MX.

Page 5: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 5

Timeline

Digunakan untuk mengatur dan mengontrol isi keseluruhan movie yang dibuat.

Vi ew

� Hand tool digunakan untuk menggerakkan tampilan object pada stage tanpa merubah

posisi object

� Zoom tool digunakan untuk memperbesar tampilan object pada stage

Color

� Stroke color digunakan untuk memberi warna pada garis / outline

� Fill color digunakan untuk memberi warna pada object

� Black and white digunakan untuk memberi warna object dan border hitam dan putih

� Swap color digunakan untuk menukar fill color dengan stroke color

Color Window

� Color Mixer

Digunakan untuk mengatur warna pada object sesuai dengan keinginan. Ada 5 pilihan,

yaitu: None, Solid, Linear, Radial, dan Bitmap.

� Color Swatches

Digunakan untuk memberi warna pada object sesuai dengan warna yang dipilih

Page 6: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 6

Action

Merupakan jendela yang digunakan untuk menuliskan Action Script untuk Flash MX yang

dapat digunakan untuk control / mengendalikan object.

Properties

Merupakan jendela yang digunakan untuk mengatur property dari object yang dibuat.

Components

Digunakan untuk menambahkan object untuk web application yang nantinya dapat di-publish

ke internet.

Page 7: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 7

CHAPTER 2

MENGGAMBAR OBJECT PADA FLASH MX

Membuat Object

Untuk menggambar sebuah bentuk atau object pada Flash MX, disediakan berbagai

macam tools diantaranya oval tool yang digunakan untuk menggambar lingkaran ataupun

elips, dan rectangle tool yang digunakan untuk menggambar bujur sangkar ataupun persegi

panjang. Object yang dibentuk pada Flash MX terdiri dari dua bagian yaitu outline dan fill.

Outline merupakan bagian terluar dari object, atau dapat dikatakan garis tepi object atau

border object. Sedangkan fill merupakan bagian dalam dari object. Berikut dapat diperhatikan

gambar yang menerangkan outline dan fill.

Outline dan fill dapat disatukan dengan membuatnya menjadi satu grup. Yang pertama

kali harus dilakukan adalah menyeleksi seluruh bagian outline dan fill, kemudian dapat

dilakukan grouping dengan melalui menu Modify > Group , atau dengan cara menekan

kombinasi tombol Ctrl + G .

Membelah Object

Object yang telah dibuat, dapat juga dipotong untuk menghasilkan object yang diinginkan.

Pemotongan object dapat dilakukan dengan menggunakan garis yang dibuat dengan line tool.

w Menggambar Dengan Pencil Tool

Menggambar denga pencil tool dapat dilakukan dengan menahan klik mouse untuk

menggambar object pada stage. Terdapat 3 pilihan sifat object yang dapat dipilih, yaitu:

Outline

Fill

Page 8: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 8

1. Straighten

Object yang dibuat sifatnya tegas, garis yang dihasilkan rapi.

2. Smooth

Object yang dibuat sifatnya halus, garis yang dihasilkan tidak serapi straighten

3. Ink

Object yang dibuat sifat dan goresan garisnya tidak serapi smooth dan straighten.

Menggambar Dengan Pen Tool

Menggambar dengan pen tool adalah menggambar dengan membuat edit point. Edit point

yang dibuat dapat diletakkan dimana saja sehingga membentuk object yang diinginkan

Mengubah Bentuk Object

Mengubah bentuk object dapat dilakukan dengan menggunakan arrow tool dan sub selection tool.

Dengan menggukan arrow tool, mengubah bentuk object dapat dilakukan dengan

menggerakkan outline object.

Dengan menggunakan sub selection tool , mengubah bentuk object dapat dilakukan dengan

menggerakkan edit point atau titik-titik pada object sehingga menghasilkan object yang

diinginkan.

Edit Point

Page 9: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 9

CHAPTER 3

PEWARNAAN OBJECT PADA FLASH MX

Pewarnaan object pada Flash MX dapat dilakukan untuk membuat agar object yang

dibuat lebih menarik. Yang dapat digunakan untuk teknik pewarnaan pada Flash MX adalah:

1. Color Mixer

2. Color Swatches

3. Color Bucket tool

4. Ink Bottle tool

5. Brush tool

6. Fill Transform tool (pengaturan efek warna radial).

Teknik Pewarnaan Dengan Color Mixer dan Color Swatches

1. Color Mixer

Dengan color mixer dapat dibuat warna baru pada Color Swatches

2. Color Swatches

Dua jendela di atas digunakan untuk memilih warna yang akan digunakan. Untuk

meletakkan warna pada object dapat digunakan Color Bucket tool untuk mewarnai fill dan Ink

Bottle tool untuk mewarnai outline.

Type warna :

Warna transparant

Brightness

Warna

1. Solid Memberi warna padat

2. Linear Efek warna bentuk linear

3. Radial Efek warna bentuk radial

4. Bitmap Image untuk fill

Pilihan warna yang disediakan

Page 10: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 10

CHAPTER 4

ANIMASI SEDERHANA

Frame by Frame Animation

Frame by frame animation merupakan cara pembuatan animasi menggunakan timeline

yang ada pada Flash MX. Object-object yang digunakan diletakkan pada kunci-kunci pada

timeline yang sebelumnya telah dibuat. Sebagai contoh perhatikan ilustrasi di bawah ini.

Membuat Animasi Semangka:

1. Pada Frame 1, gambarlah sebuah semangka seperti gambar di bawah

menggunakan oval tool dan brush tool.

2. Kemudian buatlah sebuah keyframe pada frame 2 dengan melakukan klik kanan

pada frame 2 > Insert Keyframe

Page 11: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 11

3. Pada Frame 2, hapus sebagian gambar semangka menggunakan eraser tool.

4. Buatlah keyframe pada Frame 3, kemudian hapus kembali sebagian lagi dari

gambar semangka tersebut. Ulangi langkah membuat keyframe untuk frame 4

dan seterusnya, dan hapus sebagian lagi dari gambar semangka pada setiap

keyframenya, sampai gambar semangka terhapus seluruhnya.

5. Tekan tombol Enter pada keyboard untuk melihat hasilnya. Dari ilustrasi di atas,

maka akan dihasilkan sebuah animasi buah semangka digigit sedikit demi sedikit

hingga lama kelamaan habis ☺

Tweened Animation

Tweened animation merupakan cara pembuatan animasi menggunakan fasilitas tween

yang disediakan Flash MX. Terdapat dua macam tween yaitu motion tween dan shape tween .

Dengan tweened animation, dapat ditentukan panjang dan lama dari animasi. Tweened

animation ditandai dengan tanda panah pada frame-frame yang dilalui animasi. Sebagai contoh

perhatikan ilustrasi di bawah ini.

Membuat animasi mobil berpindah ( Motion Tween ):

1. Pada Frame 1, gambarlah sebuah mobil seperti gambar di bawah menggunakan

rectangle tool, ovale tool, dan brush tool. Lakukan grouping dengan cara menyeleksi

seluruh object, kemudian tekan Ctrl + G , agar semua object menjadi satu grup.

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6

Page 12: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 12

2. Tentukan panjang animasi dengan memilih frame selanjutnya yang akan

dijadikan sebagai keyframe. Di sini, dicontohkan keyframe dibuat pada frame 20.

Klik kanan pada frame 20 > Insert Keyframe.

3. Pada frame 20, pindahkan posisi gambar mobil ke kanan dari posisi semula

dengan cara klik tahan pada gambar mobil, kemudian geser ke tempat tujuan.

Page 13: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 13

4. Blok keseluruhan frame dari frame 1 hingga frame 20. Kemudian lakukan klik

kanan pada blok yang telah dilakukan > Create Motion Tween. Pada frame yang

telah di-blok akan muncul tanda panah dengan blok berwarna biru.

5. Tekan tombol Enter pada keyboard untuk melihat hasilnya. Dari ilustrasi di atas,

maka akan dihasilkan sebuah animasi sebuah mobil bergerak ke kanan dari posisi

awal ☺

Membuat animasi perubahan bentuk bangun ( Shape Tween):

1. Pada Frame 1, gambarlah sebuah lingkaran seperti gambar di bawah

menggunakan oval tool.

2. Tentukan panjang animasi dengan memilih frame selanjutnya yang akan

dijadikan sebagai keyframe. Di sini, dicontohkan keyframe dibuat pada frame 20.

Klik kanan pada frame 20 > Insert Keyframe.

Page 14: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 14

3. Pada frame 20, pindahkan posisi gambar ke kanan dari posisi semula dengan cara

klik tahan pada gambar, kemudian geser ke tempat tujuan.

4. Blok keseluruhan frame dari frame 1 hingga frame 20. Kemudian lakukan klik

kanan pada blok yang telah dilakukan > Create Motion Tween. Pada frame yang

telah di-blok akan muncul tanda panah dengan blok berwarna biru.

5. Lakukan break (Ctrl + B) pada object yang ada pada frame 1.

6. Hapus object yang ada pada keyframe (Frame 20). Ganti dengan object persegi

empat yang dapat dibuat dengan rectangle tool.

Page 15: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 15

7. Klik pada pada salah satu frame yang dikenai tween (Antara frame 1 dan frame

20). Kemudian pada properties , pilih Shape pada option Tween. Pada frame yang

terdapat shape tween akan muncul tanda panah dengan blok berwarna hijau.

8. Tekan tombol Enter pada keyboard untuk melihat hasilnya. Dari ilustrasi di atas,

maka akan dihasilkan sebuah animasi perubahan bentuk dari lingkaran menjadi

sebuah persegi empat dari posisi awal ☺

Frame 1 Frame 20

Page 16: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 16

Membuat animasi perubahan text ( Shape Tween ):

1. Pada Frame 1, buatlah sebuah text angka 5 seperti gambar di bawah

menggunakan Text tool.

2. Tentukan panjang animasi dengan memilih frame selanjutnya yang akan

dijadikan sebagai keyframe. Di sini, dicontohkan keyframe dibuat pada frame 20.

Klik kanan pada frame 20 > Insert Keyframe.

3. Blok keseluruhan frame dari frame 1 hingga frame 20. Kemudian lakukan klik

kanan pada blok yang telah dilakukan > Create Motion Tween. Pada frame yang

telah di-blok akan muncul tanda panah dengan blok berwarna biru.

Page 17: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 17

4. Lakukan break (Ctrl + B) sebanyak 2 kali pada object yang ada pada frame 1.

5. Hapus object (text) yang ada pada keyframe (Frame 20). Ganti dengan object (text)

angka 4. Lakukan break (Ctrl + B) pada object yang ada pada frame 20.

6. Klik pada pada salah satu frame yang dikenai tween (Antara frame 1 dan frame

20). Kemudian pada properties , pilih Shape pada option Tween.

Atur pula cara perubahannya pada option lend pada jendela properties.

7. Tekan tombol Enter pada keyboard untuk melihat hasilnya. Dari ilustrasi di atas,

maka akan dihasilkan sebuah animasi perubahan bentuk dari angka 5 menjadi

angka 4 ☺

w w

Page 18: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 18

CHAPTER 5

BEKERJA DENGAN BANYAK LAYER

Layer pada Flash MX digunakan untuk membuat beberapa object yang nantinya akan

diletakkan dalam satu layar animasi Flash MX. Dengan penggunaan layer, setiap object dapat

dibuat dan dianimasikan dengan lama dan panjang sesuai dengan keinginan. Misalnya kita

membuat dua buah mobil yang saling berlomba dari start di sisi kiri menuju finish di sisi kanan

dari kanvas, maka kedua object mobil tersebut harus dibuat pada 2 buah layer yang berbeda.

Letak pengaturan layer pada Flash MX terdapat di samping kiri dari timeline. Jumlah

layer yang digunakan dapat disesuaikan dengan kebutuhan animasi dan object yang

digunakan. Untuk menambah layer cukup hanya dengan klik tanda , dan klik tanda

untuk menghapus layer.

gambar timeline dengan 1 layer

gambar timeline dengan 2 layer

Terdapat tiga pengaturan layer pada timeline:

Untuk contoh perhatikan ilustrasi di bawah ini:

Membuat animasi object dan background

Show layer as outlineLock / unlock layerShow / hide layer

Page 19: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 19

1. Pada Layer 1, Frame 1, buatlah sebuah object mobil menggunakan rectangle tool,

oval tool, dan brush tool. Lakukan grouping dengan menyeleksi seluruh object,

kemudian tekan Ctrl + G .

Ubah nama layer dengan nama mobil dengan melakukan klik 2 kali pada layer

yang bersangkutan kemudian ketikkan nama baru yang akan dipakai [ mobil ]

2. Buatlah sebuah Layer baru (Layer 2). Pada layer 2, frame 1 , buatlah sebuah object

pohon menggunakan brush vtool. Lakukan grouping dengan cara menyeleksi

seluruh object, kemudian tekan Ctrl + G . Ubah nama layer menjadi pohon.

Page 20: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 20

3. Tentukan panjang animasi dengan memilih frame selanjutnya yang akan

dijadikan sebagai keyframe. Di sini, dicontohkan keyframe dibuat pada frame 20

pada layer 2 dan layer 1.

Klik kanan pada frame 20 > Insert Keyframe.

4. Blok keseluruhan frame dari frame 1 hingga frame 20 pada layer 2. Kemudian

lakukan klik kanan pada blok yang telah dilakukan > Create Motion Tween. Pada

frame yang telah di-blok akan muncul tanda panah dengan blok berwarna biru.

5. Pada layer 2, frame 20 , pindahkan posisi gambar pohon ke kanan dari posisi

semula dengan cara klik tahan pada gambar, kemudian geser ke tempat tujuan.

Page 21: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 21

6. Buatlah sebuah Layer baru [Layer 3]. Pada layer 3, frame 1 , buatlah sebuah object

jalan menggunakan rectangle tool. Ubah nama layer menjadi aspal .

7. Tekan tombol Enter pada keyboard untuk melihat hasilnya. Dari ilustrasi di atas,

maka akan dihasilkan sebuah animasi seolah olah mobil berjalan. Tampak pohon

bergerak dari arah depan mobil ke arah belakang mobil ☺

Catatan:

Full screen preview dapan dilihat dengan menekan kombinasi tombol Ctrl

+ Enter pada keyboard, dan untuk mengakhiri preview dapat dilakukan

dengan menekan kombinasi tombol Ctrl + W.

Page 22: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 22

CHAPTER 6

MOTION GUIDE

Motion guide pada Flash MX adalah alur atau rel yang digunakan sebagai arah dari

sebuah animasi. Motion guide akan menentukan ke mana gerak dari sebuah object yang diberi

animasi. Motion guide biasanya berupa garis lurus, lengkung, maupun berupa bangun seperti

segi empat, lingkaran, ataupun bangun yang lain. Motion guide terletak pada layer berbeda

dengan object yang diberi animasi dan yang akan digerakkan sesuai dengan alur. Untuk

membuat motion guide, terlebih dahulu harus dibuat sebuah layer yang digunakan sebagai

letak dari garis atau bangun yang dijadikan motion guide. Untuk membuatnya, dapat

dilakukan dengan klik pada tanda w di bawah layer.

Untuk contoh perhatikan ilustrasi di bawah ini:

Membuat animasi roket

1. Pada layer 1, frame 1 , buatlah sebuah object roket menggunakan rectangle tool

dan pen tool. Lakukan grouping dengan cara menyeleksi seluruh object, kemudian

tekan Ctrl + G .

Guide : Layer

Add Motion Guide

Page 23: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 23

2. Tentukan panjang animasi dengan memilih frame selanjutnya yang akan

dijadikan sebagai keyframe. Di sini, dicontohkan keyframe dibuat pada frame 20.

Klik kanan pada frame 20 > Insert Keyframe.

3. Blok keseluruhan frame dari frame 1 hingga frame 20. Kemudian lakukan klik

kanan pada blok yang telah dilakukan > Create Motion Tween. Pada frame yang

telah di-blok akan muncul tanda panah dengan blok berwarna biru.

4. Buatlah sebuah guide dengan terlebih dahulu membuat layer untuk motion

guide. Klik tanda w di bawah layer.

5. Pada Guide : Layer 1 , buatlah sebuah garis lengkung yang akan digunakan

sebagai motion guide bagi roket yang telah dibuat. Garis lengkung dapat dibuat

dengan menggunakan pen tool.

Page 24: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 24

6. Pada layer 1, frame 1 , atur posisi roket pada ujung awal garis (motion guide)

searah dengan arah garis. Gunakan Free Transform tool (Q) untuk membantu

memutar object.

7. Pada layer 1, frame 20 , atur posisi roket pada ujung akhir garis (motion guide)

searah dengan arah garis. Gunakan Free Transform tool (Q) untuk membantu

memutar object.

8. Beri tanda cek (w) pada option Orient to path pada Properties

Page 25: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 25

9. Tekan tombol Enter atau Ctrl + Enter pada keyboard untuk melihat hasilnya. Dari

ilustrasi di atas, maka akan dihasilkan sebuah animasi roket yang terbang secara

beraturan dengan arah sesuai dengan path (garis) yang telah dibuat ☺

Page 26: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 26

CHAPTER 7

ACTION SCRIPT

Action script dirancang untuk membantu programmer untuk membuat aplikasi berbasis

flash yang berguna pada navigasi presentasi atau sebuah situs, juga membuat animasi Flash

menjadi lebih interaktif.

Contoh yang paling sederhana dalam penggunaan action script adalah pembuatan

tombol yang digunakan sebagai control animasi. Misalnya tombol yang digunakan untuk

memulai animasi dan tombol yang digunakan untuk menghentikan animasi.

Untuk contoh perhatikan ilustrasi di bawah ini:

Membuat button untuk control animasi

1. Pada Layer 1, Frame 1, buatlah sebuah object roda gerigi menggunakan rectangle

tool dan oval tool.. Lakukan grouping dengan cara menyeleksi seluruh object,

kemudian tekan Ctrl + G .

2. Tentukan panjang animasi dengan memilih frame selanjutnya yang akan

dijadikan sebagai keyframe. Di sini, dicontohkan keyframe dibuat pada frame 20.

Klik kanan pada frame 20 > Insert Keyframe.

Page 27: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 27

3. Blok keseluruhan frame dari frame 1 hingga frame 20. Kemudian lakukan klik

kanan pada blok yang telah dilakukan > Create Motion Tween. Pada frame yang

telah di-blok akan muncul tanda panah dengan blok berwarna biru.

4. Klik pada pada salah satu frame yang dikenai. Pilih CW (berlawanan arah jarum

jam) atau CCW (searah jarum jam) pada option Rotate pada Properties,

kemudian atur jumlah putaran dengan mengetikkan jumlah putaran yang

dikehendaki pada samping kanan option Rotate.

5. Tambahkan sebuah layer baru (layer 2). Pada layer 2, frame 1 , buatlah sebuah

object persegi panjang menggunakan rectangle tool. Berilah text “ START ” dengan

menggunakan text vtool. Lakukan grouping dengan cara menyeleksi object,

kemudian tekan Ctrl + G .

Kemudian, ubah jenis object menjadi Button dengan melalui menu Insert >

Convert to Symbol . Atau dapat pula dilakukan dengan menekan tombol F8. Beri

nama sebagai START.

Jumlah Putaran

Page 28: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 28

Posisikan tombol START di bawah roda.

6. Tambahkan sebuah layer baru (layer 3). Pada layer 3, frame 1 , buatlah sebuah

object persegi panjang menggunakan rectangle tool. Berilah text “ STOP ” dengan

menggunakan text vtool. Lakukan grouping dengan cara menyeleksi object,

kemudian tekan Ctrl + G .

Ubah type object menjadi Button dengan melalui menu Insert > Convert to

Symbol . Atau dapat pula dilakukan dengan menekan tombol F8. Beri nama

sebagai STOP.

7. Klik pada object tombol START . Masukkan action script pada object tersebut

melalui jendela Action – Button atau dengan menekan tombol F9 pada keyboard.

Page 29: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 29

Pada kotak pilihan sebelah kanan, terdapat beberapa kelompok instruksi yang

dapat dipilih. Dalam contoh ini, dipilih pada kelompok Actions _ Movie

Control .

Klik dua kali pada salah satu pilihan yang muncul dalam option Movie Control.

Dalam contoh ini, dipilih “ play ” karena tombol START akan digunakan sebagai

tombol untuk memulai animasi roda.

Atau dapat pula langsung mengetikkan script yang diinginkan pada kotak

kosong berwarna putih di bagian kanan jendela Action – Button . Ketikkan script

berikut.

8. Masukkan pula action script pada object tombol STOP dengan cara yang sama.

Pilih Actions _ Movie Control . Klik dua kali pada “ stop ” karena tombol STOP

akan digunakan sebagai tombol untuk menghentikan animasi roda.

Atau dapat pula langsung mengetikkan script berukut.

9. Tekan tombol Ctrl + Enter pada keyboard untuk melihat hasilnya. Dari ilustrasi di

atas, maka akan dihasilkan sebuah animasi roda berputar. Jika tombol STOP

diklik, maka animasi akan berhenti sampai diklik tombol START untuk

menjalankannya kembali ☺

Page 30: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 30

Membuat navigasi dalam presentasi

Pada bagian ini, diberikan sebuah contoh presentasi multimedia menggunakan Flash

MX dengan memanfaatkan action script sebagai control navigasi. Pada contoh ini, akan dibuat

dua buah halaman yaitu halaman pembukan dan halaman bab1 untuk pengenalan komponen

layar Macromedia Flash MX. Action script pada contoh ini difungsikan untuk berpindah

halaman dari halaman pembuka (frame 1 – 40) ke halaman bab1 (frame 100).

1. Pada layer 1, frame 1, buatlah sebuah text “PRESENTASI MACROMEDIA FLASH

MX” dan masukkan sebuah object lain. Dalam contoh ini dimasukkan sebuah

gambar dengan melalui menu File > Import . Atur ukuran text dan gambar

dengan bantuan Free Transform Tool (Q). Lakukan grouping (Ctrl + G) untuk kedua

object tersebut.

2. Tentukan panjang animasi dengan memilih frame selanjutnya yang akan

dijadikan sebagai keyframe. Di sini, dicontohkan keyframe dibuat pada frame 40.

Klik kanan pada frame 40 > Insert Keyframe.

3. Blok keseluruhan frame dari frame 1 hingga frame 40. Kemudian lakukan klik

kanan pada blok yang telah dilakukan > Create Motion Tween. Pada frame yang

telah di-blok akan muncul tanda panah dengan blok berwarna biru.

4. Klik pada frame 1, kemudian atur nilai alpha menjadi 0 (nol) pada option Color

pada jendela properties. Alpha adalah option transparency.

Halaman BAB 1

Page 31: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 31

5. Klik pada frame 40. Masukkan action script pada frame tersebut melalui jendela

Action atau dengan menekan tombol F9 pada keyboard. Pilih Actions _ Movie

Control . Klik dua kali pada “ stop ” karena animasi akan dihentikan pada frame

40.

Atau dapat pula langsung mengetikkan script berikut.

Akan muncul sebuah tanda pada frame 40.

6. Tambahkan sebuah layer baru (Layer 2). Pada layer 2, frame 1, buatlah sebuah

text “SKIP INTRO”. Posisikan di pojok kanan bawah dari kanvas.

7. Ubah type object text menjadi Button dengan melalui menu Insert > Convert to

Symbol . Atau dapat pula dilakukan dengan menekan tombol F8. Beri nama

sebagai SKIP.

8. Masukkan a ction script pada object tombol SKIP. Pilih Actions _ Movie Control .

Klik dua kali pada “ gotoAndPlay ” karena tombol SKIP akan digunakan untuk

menjalankan animasi pada halaman bab 1 yang dimulai pada frame 100.

Atau dapat pula langsung mengetikkan script berukut.

Page 32: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 32

9. Tambahkan sebuah layer baru (Layer 3). Pada layer 3, frame 100, buatlah sebuah

text “BAB 1 KOMPONEN LAYAR MACROMEDIA FLASH MX” dan

masukkan object lain. Dalam contoh ini dimasukkan sebuah gambar.

10. Klik pada frame 100. Masukkan action script pada frame tersebut melalui jendela

Action – Button atau dengan menekan tombol F9 pada keyboard. Pilih Actions _

Movie Control . Klik dua kali pada “ stop ” karena animasi berikutnya akan

langsung dihentikan pada frame 100.

Atau dapat pula langsung mengetikkan script berikut.

Akan muncul sebuah tanda pada frame 100.

Gambar posisi object pada halaman pembuka

Page 33: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 33

11.Tekan tombol Ctrl + Enter pada keyboard untuk melihat hasilnya. Dari ilustrasi di

atas, maka akan dihasilkan sebuah presentasi yang dimulai dengan menampilkan

halaman pembuka . Jika diklik text “ SKIP INTRO ” yang terletak pada halaman

pembuka maka akan langsung menampilkan halaman bab 1 ☺

Gambar posisi object pada halaman bab 1

Page 34: Hand Out Macromedia Flash _Zainal

Macromedia Flash MX 34

Biografi Penulis

A. Zainal Abidin. . Lahir di Sidoarjo, 26 Mei 1984. Hobinya traveling, wisata kuliner, beli buku dan utak-atik komputer. Lulus SMA jurusan IPA pada tahun 2003 di MAN Sidoarjo – Jawa Timur. Melanjutkan kuliah di Bahasa Arab Ma’had Umar bin Khattab Surabaya Kemudian melanjutkan ke Universitas Muhammadiyah Sidoarjo dan IAIN Sunan Ampel (sekarang UINSA) Surabaya dengan jurusanyang sama. Profesi ke-Rasul-an sebagai pendidik berawal dari MAN Sidoarjo, MTs Muhammadiyah Taman, MA Akselerasi AmanatulUmmah Pacet sampai sekarang di SDN Klampis Ngasem III.

Motto hidup: “Hidup ini sekali, jadilah yang berarti.” ☺