pembuatan media pembelajaran · pdf filesebelum membuat animasi maka terlebih dahulu anda ......

30
PEMBUATAN MEDIA PEMBELAJARAN DENGAN MACROMEDIA FLASH MX 2004 oleh: FIKRI ALAMI, S.T., M.SC. JURUSAN TEKNIK SIPIL UNIVERSITAS LAMPUNG Desember, 2005

Upload: dohanh

Post on 17-Feb-2018

220 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

PEMBUATAN MEDIA PEMBELAJARAN

DENGAN

MACROMEDIA FLASH MX 2004

oleh:

FIKRI ALAMI, S.T., M.SC.

JURUSAN TEKNIK SIPIL UNIVERSITAS LAMPUNG

Desember, 2005

Page 2: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

1

MACROMEDIA FLASH MX 2004

I. PENGENALAN MACROMEDIA FLASH

Macromedia Flash MX merupakan salah satu software animasi yang sudah tidak asing lagi bagi kebanyakan orang yang berkecimpung dalam pembuatan program animasi. Software ini mempunyai banyak keunggulan dibandingkan dengan software animasi lainnya diantaranya adalah program yang berorientasi objek (OOP), mampu mendesain gambar berbasis vector, dapat dipergunakan secagai software pembuat situs WEB, dan banyak keunggulan lainnya.

Dibandingkan dengan versi sebelumnya yaitu versi 4.0, 5.0, macromedia flash MX 2004 ini mempunyai beberapa kemampuan tambahan diantaranya mampu menjalankan audio dalam bentuk file mp3, maupun video dalam bentuk mpg.

Dalam menggunakan software ini ada beberapa persyaratan sebelum diinstal ke komputer untuk menjamin bahwa program dapat berjalan secara optimum yaitu: a) Komputer dengan Processor Intel Pentium II 500 Mhz atau processor terbaru yang

berjalan dalam sistem operasi windows 98, windows 2000, windows NT 4.0, maupun Windows XP

b) Memori (RAM) minimal 64 MB atau lebih besar. c) Kapasitas Harddisk kosong minimal 50 MB d) Monitor warna minimal dengan resolusi 800 x 600 e) Dilengkapi denan browser seperti Internet Explorer 5.0 atau versi terbaru.

II. GUI (GRAPHIC USER INTERFACE).

Karena macromedia flash MX 2004 merupakan program berbasis windows, maka pemakai dapat menggunakan program ini dengan lebih mudah karena dapat mendesain secara visual. Berikut tampilan muka dari program Macromedia Flash MX 2004:

Page 3: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

2

Keterangan:

1. Main Bar Merupakan menu baris/pulldown menu yang dipergunakan untuk mengakses beberapa perintah yang ada di flash. Menu ini berisi sub menu yang disertai dengan shortcut.

2. Toolbar Menu ini ditandai dengan icon­icon yang fungsinya sama seperti menu bar.

3. Toolbox Merupakan alat bantu dalam menggambar suatu object seperti garis,lingkaran, persegiempat, text, pemberi warna. Juga dapat dipergunaka untuk menghapusm menzoom, maupun memilih objek.

4. Layer Lapisan­lapisan yang dipergunakan untuk menampilka kumpulan­kumpulan objeck atau komponen, baik gambar, animasi maupun video. Layer dapat dijalankan secara bersama­ sama.

5. Panel Merupakan jendela tambahan yang dipergunakan untuk mengedit/mengatur performa dari suatu objek. Flash memiliki beberapa panel sesuai dengan fungsinya.

6. Controller Merupakan tombol­tombol yang dipergunakan untuk menjalankan movie yang berisi tombol play, pause, stop dan lain­lain.

1 2

3

4 5

6

7

8

9 10 11

Page 4: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

3

7. Time Line Merupakan tempat dimana animasi objek akan dijalankan. Timeline juga berfungsi untuk menentukan kapan suatu objek dimunculkan atau dihilangkan berdasarkan satuan waktu. Pada time line terdapat frame, layer dan playhead.

8. Frame Merupakan bagian­bagian dari movie yang dijalankan bergantian dari kiri kekanan. Masing­ masing frame terdiri atas satu gambar.

9. Play Head Dipergunakan untuk menunjuk posisi dari frame yang sedang dijalankan.

10.Ruler Merupakan mistar bantuan yang terletak disebelah atas maupun kiri dari stage yang berfungsi untuk mengukur ketepatan penggambaran maupun peletakan suatu objek.ssssss

11.Stage Sebagai daerah tempat meletakkan objek. Objek­objek yang terletak didalam stage akan ditampilkan dalam movie, sedangkan yang berada di luar stage tidak.

III. INSTALASI PROGRAM FLASH MX 2004.

Sebelum anda dapat menggunakan program flash terlebih dahulu anda harus menginstall program tersebut ke dalam harddisk. Berikut prosedur instalasi: 1) Masukkan CD Program ke CD Drive 2) Klik tombol Start > Run, maka akan muncul kotak dialog sbb:

o Jika CD drive anda adalah sebagai Drive D, maka ketikkan pada bagian open d:\autorun.exe

o Selanjutnya tekan timbol OK. Maka akan muncul kotak dialog sbb:

Page 5: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

4

3) Tekan tombol Flash MX 2004 4) Tekan tombol Install..., maka program akan mulai melakukan proses instalasi. 5) Jika tampil flash kotak dialog dibawah ini, maka tekan tombol Next >

1. Tekan tombol ini

2. Tekan tombol Install

Page 6: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

5

6)Tekan tombol Yes jika tampil kotak dialog dibawah ini:

7) Setelah tombol Yes ditekan maka akan muncul kotak dialog sbb:

8) Tekan tombol Next >, maka akan muncul kotak dialog sbb:

Page 7: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

6

9) Tekan tombol Next >, maka akan muncul kotak dialog sbb:

10) Tekan tombol Next >, maka akan muncul flash kotak dialog sbb:

Program sedang memulai mengcopy program ke hard disk. Tunggu sampai beberapa menit. Setelah itu akan tampil kotak dialog sbb:

Page 8: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

7

11) Uncheck checkbox “Yes, view the Readme file Now”, lalu tekan tombol Finish untuk mengakhiri proses instalasi.

IV. KONSEP DASAR ANIMASI & ISTILAH­ISTILAH.

A.Movie Animasi yang anda buat dalam flash secara umum disebut denan movie. Dalam membuat animasi maka seseorang akan mengatur jalan cerita dari animasi tersebut. Membuat beberapa objek dan merangkainya menjadi suatu bagian yang bermakna tertentu. Suatu movie terkadang terdiri dari beberapa animasi yang terkadang disebut movie clip. Clip­ clip movie tersebut dapat dirangkai kembali menjadi movie baru. Suatu animasi/movie clip akan dijalankan dalam suatu scene yang dapat dianalogkan sebagai suatu episode.

B. Objek Sebelum membuat animasi maka terlebih dahulu anda akan membuat objek. Baru kemudian anda akan mengatur gerakan­gerakan dari objek tersebut. Flash menyediakan tool untuk membuat objek sederhana seperti garis, lingkaran, persegiempat.

C. Teks Pada toolbox disediakan fasilitas untuk menulis teks. Dengan teks anda dapat menulis pesan yang akan anda sampaikan pada animasi anda. Selain itu pesan/teks dapat anda buat dalam bentuk animasi. Anda dapat menjalankan teks sesuai dengan animasi yang anda inginkan. Dalam flash teks dikategorikan dalam 3 jenis yaitu, teks statis label, teks dinamis dan teks input.

D. Sound Animasi yang anda buat dapat disertakan dengan sound agar tampak lebih menarik. Penambahan sound pada suatu movie akan memperbesar ukuran file anda. Format sound yang dapat anda pergunakan dalam flash dapat bermacam­macam seperti WAV, .MP3.

Page 9: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

8

Anda dapat mengimport sound dari luar tetapi untuk sound­sound tertentu telah disediakan di dalam program flash.

V. SIMBOL

Dalam Macromedia Flash MX 2004 ada beberapa simbol yang harus diketahui yaitu movie clip, button dan graphic. Masing­masing simbol mempunyai fungsi masing­masing seperti yang dapat digambar pada bagian berikut.

5.1 Movie Clip

Movie clip merupakan simbol di dalam flash untuk mendefinisikan animasi. Hanya simbol movie clip yang dapat digerakkan atau diberi animasi. Untuk membuat simbol movie clip dapat dilakukan langkah sbb: 1. Pada jendela utama program Macromedia Flash MX 2004, klik Insert > New Symbol,

maka akan muncul kotak dialog sbb:

2. Pada kotak dialog “Create New Symbol”: ­ Isi Name dengan suatu nama pengenal untuk movie clip ­ Pada bagian Behavior pilih Movie Clip

3. Selanjutnya tekan tombol OK 4. Maka Scene 1 akan berubah menjadi jendela untuk simbol movie clip, ini diketahui

dengan melihat tanda cross hair (+) pada bagian tengah stage 5. Buat text yang akan di animasi sbb:

a) Klik text Tool (A) yang ada di bagian Tools b) Klik di dekat Cross Hair, dan ketikkan angka 1 dengan font ukuran 24 c) Klik kanan mouse di Frame 2 dan pilih Insert key frame d) Ganti angka 1 menjadi 2 e) Klik kanan mouse di frame 3 dan pilih insert key frame f) Ganti huruf 2 menjadi 3

6. Pada tampilan time line akan tampak sbb:

Page 10: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

9

7. Klik Control > Play untuk melihat animasi 8. Selanjutnya aktifkan Library dengan cara mengklik Windows > Library, maka pada

bagian panel akan ada bagian Library yang berisis movie clip symbol 1 sbb:

9. Klik Scene 1 dan seret Symbol 1 yang ada di library dan diletakkan di stage seperti terlihat pada gambar di atas.

10. Untuk melihat animasi dalam bentuk penuh klik Control > Test Movie.

5.2 Button Button adalah bentuk lain selain movie clip. Dengan membuat simbol button, maka anda dapat menugaskan tombol/button ini untuk mengeksekusi perintah yang anda buat pada bagian event. Pada simbol button akan dibentuk 4 frame yaitu up, over, down dan hit. Untuk membuat simbol button dapat dilakukan langkah sbb:

Page 11: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

10

1. Pada jendela utama program Macromedia Flash MX 2004, klik Insert > New Symbol, maka akan muncul kotak dialog sbb:

2. Pada kotak dialog “Create New Symbol”: ­ Isi Name dengan suatu nama pengenal seperti Tombol ­ Pada bagian Behavior pilih Button

11. Selanjutnya tekan tombol OK 12. Maka Scene 1 akan berubah menjadi jendela untuk simbol movie clip, ini diketahui

dengan melihat tanda cross hair (+) pada bagian tengah stage dan timeline berubah menjadi sbb:

13. Buat simbol untuk button seperti gambar oval sbb: a) Klik gambar oval/lingkaran yang terdapat di bagian Tools b) Letakkan di dekat cross hair c) Klik kanan mouse pada frame over dan pilih insert key frame d) Klik tombol Paint Backet Tool pada bagian Tools, dan ubah color dengan menekan

tombol fill color pada bagian bawah dan ganti dengan warna lain sbb:

Page 12: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

11

e) Lakukan langkah yang sama dengan mengubah setiap warna untuk frame down dan hit

14. Setelah selesai klik windows > Library untuk membuka panel library 15. Klik Scene 1 untuk mengaktifkan stage utama dan seret simbol Tombol yang ada di

library ke tengah stage 16. Untuk melihat reaksi tombol yang terjadi klik Control > Anable simple button 17. Lalu gerakkan mouse pada tombol dengan cara menekan (down), lewat diatas tombol

(rool over) dll, anda akan melihat efek warna yang berbeda.

5.3 Graphic.

Untuk membuat simbol Graphic dapat dilakukan sesuai prosedur berikut: 1. Pada jendela utama program Macromedia Flash MX 2004, klik Insert > New Symbol,

maka akan muncul kotak dialog sbb:

Paint Backet Tools

Fill Color

Page 13: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

12

2. Pada kotak dialog “Create New Symbol”: ­ Isi Name dengan suatu nama pengenal seperti Grafik ­ Pada bagian Behavior pilih Graphic

3. Selanjutnya tekan tombol OK 4. Maka Scene 1 akan berubah menjadi jendela untuk simbol Grafik, ini diketahui dengan

melihat tanda cross hair (+) pada bagian tengah stage. 5. Buat gambar sembarang dengan menggunakan Pencil Tool (Y) yang ada pada bagian

tools sbb:

6. Aktifkan kembali scene 1 dengan cara mengklik scene 1, dan seret simbol Grafik yang ada di library ke tengah stage seperti pada gambar diatas.

VI. Document, Layer dan Scene.

6.1 Document.

Stage dalam Macromedia Flash merupakan tempat untuk meletakkan gambar teks maupun animasi. Ukuran stage/dokumen dapat diatur sesuai kebutuhan dalam satuan pixel. Ukuran inilah yang nantinya akan dijadikan sebagai ukuran interface dari program yang kita buat. Untuk mengubah ukuran document dapat dilakukan langkah sbb: 1. Klik Modify > Document, maka akan muncul kotak dialog sbb:

Page 14: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

13

a) Pada bagian Dimensions atur ukuran lebar (width menjadi 600) dan height menjadi 300 pixel

b) Pada bagian Background color ubah warna sesuai dengan keinginan untuk mengubah warna latar belakang dari stage

c) Pada bagian Frame rate atur pergerangan animasi dalam ukuran fps (frame per second)

d) Selanujutnya tekan tombol OK jika selesai melakukan penyetingan, maka secara langsung stage/dokumen akan berubah penampilan.

6.2 Layer.

Seperti program AutoCAD ataupun program grafis lainnya pada macromedia flash juga dikenal layer. Layer berfungsi untuk mengatur gambar yang kita gambar sesuai pengelompokan yang kita inginkan. Seperti teks akan diletakkan hanya di layer teks saja, atau tombol hanya akan diletakkan di layer tombol saja. Hal ini diperlukan agar kita mudah melakukan manajemen atas gambar yang kita buat. Bagian layer di Flash menyatu dengan bagian Time Line seperti dapat dilihat pada gamabr di bawah ini.

Tombol Menambah Layer

Tombol Menambah Layer Folder

Tombol menghapus layer

Tombol menyembunyikan Layer

Tombol Mengunci warna Layer

Tombol Mengunci Layer

Page 15: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

14

6.3 Scene.

Pada keadaan standar macromedia hanya menyediakan satu scene yang dinamai dengan scene 1. Untuk mebuat aniamsi yang kompleks terkadang diperlukan lebih dari satu scene. Untuk menambahkan secene baru pada macromedia flash dapat dilakukan langkah­langkah sbb: 1. Klik Insert > Scene

2. Maka anda dapat melihat beberapa scene yang anda buat dengan menekan tombol yang berada pada bagian atas kanan dari timeline seperti dapat dilihat pada gamabr dibawah ini

Kumpulan Scene dalam bentuk tampilan lain dapat dilihat dengan cara menekan tombol Windows > Design Panel > Scene, maka akan tampil kotak dialog sbb:

Untuk menduplikasi, menambah atau menghapus scene dapat digunakan tombol yang tersedia pada bagian bawah kotak dialog scene. Untuk menghapus scene terlebih dahulu pilih scene yang akan dihapus dan kemudian tekan tombol delete scene yang bergambar kotak sampah pada bagian kanan bawah dari kotak dialog ini. Sedangkan untuk mengubah nama scene klik 2x pada salah satu scene yang ada kemudian ketikkan nama baru.

Tombol menduplikasi scene

Tombol menambah scene

Tombol menghapus scene

Page 16: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

15

VII. Libarary dan Menu Controller.

7.1 Library

Library atau pustaka di dalam macromedia flash berfungsi untuk menyimpan item animasi seperti objek grafik baik statis maupun dinamis teks baik statis maupun dinamis, objek suara, objek video, maupun objek tombol. Untuk mengakses library dapat dilakukan prosedur sbb: 1. Klik Windows > Library..., maka akan muncul kotak dialog library di bagian panel

sbb:

7.2 Control Panel

Control panel berfungsi sebagai tombol untuk menjalankan animasi yang kita buat disimbol maupun di scene. Dengan control panel anda dapat menjalankan animasi, me rewind animasi ataupun menstop animasi yang sedang berlangsung. Untuk mengakses menu Control Panel dapat dilakukan prosedur sbb: 1. Klik Window > Toolbar >Controller, maka akan muncul panel controller pada bagian

atas toolbar sbb:

Library panel

simbol yang terekam di Library

Page 17: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

16

VIII. ACTION SCRIPT.

Belum lengkap rasanya mempelajari Macromedia Flash jika belum mengenal Action Script. Action Script adalah bahasa pemrograman yang ada di dalam Macromedia Flash. Bahasa pemrograman Action Script ini mirip dengan bahasa pemrograman JavaScript atau C++. Jadi jika anda sudah terbiasa dengan kedua bahasa pemrograman terakhir tersebut anda akan lebih mudah untuk membuat program di flash. Mempelajari animasi di flash terasa belum powerful jika belum ditunjang dengan bahasa pemrograman Action Script. Berikut diperkenalkan beberapa teori dasar untuk mempelajari bahasa pemrograman ini.

Dalam membuat suatu interaktifitas anda harus memahami 3 hal dalam action script: a) Event (Kejadian): merupakan peristiwa yang terjadi untuk memicu suatu aksi

pada suatu objek b) Action: merupakan suatu aksi atau kerja yang dikenakan atau diberikan pada

suatu objek c) Target: merupakan objek yang dikenai oleh aksi.

8.1 Memulai Action Script.

Untuk membuka menu editor Action Script maka dari jendela utama program macromedia dapat anda tekan tombol Action

Tombol Stop

Tombol Rewind

Tombol Step back one frame

Tombol Play

Tombol Step forward one frame

Tombol Go to End

Page 18: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

17

Adapun prosedur untuk menulis program pada tombol adalah sbb: 1. Buka Jendela Action Script. 2. Pilih objek tombol yang akan diberi aksi. 3. Akses sintax yang tersedia. 4. Tulis Program lengkap 5. Jalankan program dengan mengklik

8.2 Mouse Event

Mouse Event akan terjadi bila seseorang pemakai menggunakan tombol (instant button) pada suatu movie. Contoh mouse event adalah: a) on (press)

Suatu aksi akan terjadi ketika seorang pemakai meletakkan pointer pada tombol dan menekan tombol mouse tersebut.

b) on (release) Suatu aksi akan terjadi ketika pemakai meletakkan pointer pada tombol, menekan tombol (klik kiri mouse) dan melepaskannya.

c) on (ReleaseOutside) Suatu aksi terjadi ketika pemakai menekan tombol dan melepaskannya diluar areal tombol.

d) on (rollOver) Suatu aksi terjadi ketika pemakai menggerakkan pointer ke area tombol.

e) on (rollOut)

1. Membuka menu Action Scipt

3. Mengakses sintax

2. Memilih Objek yang akan di beri aksi

4. Menulis Program secara lengkap

Page 19: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

18

Suatu aksi terjadi ketika pemakai menggerakkan pointer yang semula berada pada area tombol keluar dari area tombol.

f) on (dragOver) Suatu aksi terjadi ketika pemakai meletakkan pointer pada area tombol, menekan tombol mouse, menggerakkannya keluar area tombol dan memasukkan kembali kearea tombol (posisi tombol dalam keadaan tertekan ketika anda menggerakkan tombol)

g) on (dragOut) Suatu aksi terjadi ketika pemakai meletakkan pointer pada area tombol, menekan tombol mouse, menggerakkannya keluar area tombol.

Untuk memilih mouse event dapat dilakukan dengan mengkatifkan pilihan pada panel action dan memilih tipe mouse event yang akan digunakan

8.3 Keyboard Event

Keyboard event akan terjadi jika anda menekan suatu tombol karakter, angka, tombol fungsi, tombol panah (insert, home,left,right). Adapun cara mengkatifkan perintah ini hampir sama dengan mengaktifkan mouse event. Pada pilihan on letakkan aktifkan pilihan on (keyPress "<Home>") sebagai contoh. Berikut salah satu contoh action script menggunakan keyboard:

on (keyPress "<Home>") gotoAndStop(5);

Pada contoh diatas tombol akan bereaksi jika kita menekan tombol keyboard “HOME” dan program akan lompat ke frame 5.

Page 20: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

19

8.4 Frame Event

Frame event merupakan event yang diletakkan di keyframe. Frame event ini berfungsi untuk menjalankan movie clip. Adapun prosedur penggunaannya adalah sbb: 1) Klik keyframe yang akan diberi action, misalnya keyframe 1 2) Buka panel Action 3) Klik tanda (+) dan pilih Global Function > Timeline Control > Stop, berikut contoh action

script pada frame:

8.5 Variabel dalam Action Script.

Variabel merupakan hal yang penting dalam pemrograman pada umumnya dan action script pada khususnya. Data yang dikirim dapat disimpan dalam bentuk variabel untuk kemudian diproses lebih lanjut. Contoh pendefinisian variabel:

Nama = “ Siti Nurbayah”; Alamat = “Jl. Way Abung No.15”; Usia = 30;

Berikut contoh penggunaan Variabel:

Frame yang di tandai dengan “a” telah terisi action script

sintak action script

Page 21: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

20

Langkah­langkah:

1. Buka file baru dengan mengklik tombol File > New, jika muncul kotak dialog tekan tombol OK.

2. Klik Text Tool (Y) pada bagian tools dan tempatkan di stage seperti pada gambar diatas. Definisikan pada bagian panel properties dibawah sbb: a) Text sebagai Dynamic Text b) Variabel : Keterangan

3. Buat kembali Text yang kedua pada bagian bawah text yang pertama dengan definisi sbb: a) Text sebagai Dynamic Text b) Variabel : Sisa

4. Klik Insert > New Symbol, maka akan muncul kotak dialog sbb:

Text dengan nama variabel Keterangan

Text dengan nama variabel Sisa

Tombol untuk mengeksekusi program

Page 22: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

21

a) Beri Name : Tombol b) Bahviour : Button

Selanjutnya tekan tombol OK, maka akan muncul stage untuk mendefinisikan simbol sbb:

5. Buat tombol dengan menggunakan rectangle yang ada dibagian tools dan text dengan judul eksekusi dengan menggunakan Text Tool (Y) yang ada dibagian tools seperti gambar diatas.

Page 23: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

22

6. Definisikan juga Frame untuk Over, Down, dan Hit dengan cara mengklik kanan mouse dan pilih insert key frame pada masing­masing frame diatas.

7. Klik kembali Scene 1 untuk mengaktifkan jendela utama, kemudian seret simbol Tombol yang ada di sebelah kanan/bagian library ke dalam stage dan tempatkan dibawah text. Tombol ini nantinya akan berperan mengeksekusi variabel yang akan kita definisikan.

8. Klik tombol Eksekusi yang ada di stage, dan buka panel Action pada bagian bawah. 9. Klik tanda (+) > Global Function > Movie Clip Control > On, dan pilih Release dan tekan

tombol enter. 10.Selanjutnya pada bagian bawah prosedur on (Release) ketikan program sbb:

2. Setelah selesai program siap dijalankan dengan mengklik menu Control > Test Movie 3. Tekan tombol Eksekusi untuk melihat hasil sbb:

IX. MENGENAL FILE AUDIO.

Dalam menjalankan movie clip sering diikutkan suara/sound. Dengan adanya suara maka lengkaplah macromdia sebagai suatu software animator yang mengkombinasikan animasi teks, grafik, dan suara sehingga program yang dihasilkan menjadi lebih menarik dan interaktif. Pemakai tidak hanya melihat animasi yang berjalan pada program yang dibuat

Page 24: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

23

tetapi disertai dengan penjelasan­penjelasan dari program yang dibuat dalam bentuk suara. Ada beberapa tipe file audio yang dapat dijalankan dalam program macromedia flash mX 2004 yaitu file dengan exktension .WAV, mp3, AIFF. Cara memasukkan file ini kedalam program yang kita buat adalah dengan terlebih dahulu meng­Import file­file tersebut ke dalam library yang aktif. Adapun prosedurnya adalah sbb:

1. Klik File > Import > Import to Library..., maka akan tampil kotak dialog sbb:

1. Pilih file yang berekstension .WAV . Sebagai contoh pilih file Beep1.wav. 2. Tekan tombol Open. 3. Klik Windows > Library, maka pada library tercantum file tersebut sbb:

6. Untuk memasukkan suara ke frame maka terlebih dahulu arahkan play head ke frame 1 sebagai contoh, selanjutnya seret simbol suara Beep1.wav ke stage, maka pada bagian timeline frame 1 telah berubah tandanya sbb:

simbol sound yang dapat didrag ke stage

Page 25: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

24

7. Pilih Control > Play untuk mencoba suara yang telah dimasukkan ke dalam frame. 8. Selesai.

X. TUTORIAL.

10.1 Animasi Grafis Sederhana.

Pada bagian ini kita akan coba membuat suatu animasi sederhana sebuah bola yang bergerak mengikuti pola garis/kurva yang kita buat. Adapun langkah­langkahnya sebagai berikut. 1. Pada Jendela utama Macromedia Flash MX 2004, Klik File > New..., maka akan tampil

kotak dialog sbb:

2. Klik tombol OK, maka pada layar utama (Scene 1) akan terbuka dokumen kosong sbb:

tanda bahwa suara telah bersatu dengan frame

Page 26: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

25

3. Pada Frame 1 yang aktif, klik “Oval Tools” pada bagian tools. Klik mouse kiri pada bagian kiri bawah stage sbb:

4. Klik Kanan mouse pada Frame 20, maka akan muncul flooting Menu (menu mengambang) dan pilih insert Key Frame.

5. Selanjutnya tekan tombol kanan mouse Frame 20 dan pilih “Create Motion Tween”. 6. Tekan kembali kanan mouse pada Frame 1 dan pilih “Create Motion Tween”, maka pada

bagian time line akan muncul garis panah yang mengarah dari frame 1 ke frame 20 sbb:

Stage (Scene 1)

Frame 1

Posisi Oval

Page 27: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

26

7. Pindahkan Play Head ke Frame 20, lalu seret dengan mouse kiri gambar lingkaran/oval yang baru digambar dan pindahkan ke posisi kanan atas sbb:

8. Klik Insert > Timeline > Motion Guide, maka pada time line akan tampak layer “motion guide “ sbb:

Posisi baru dari lingkaran/oval

Page 28: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

27

9. Pada layer motio guide dan frame 1, klik “Pencil Tool (y)” pada bagian tool dan buat garis mulai dari kiri bawah ke kanan atas sbb:

10. Selanjutnya tekan tombol Play pada bagian Toolbar Controller untuk melihat animasi yang baru saja dibuat.

playhead

Page 29: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

28

11. Klik File > Save ..., maka akan muncul kotak dialog sbb:

Klik Animasi­1 pada bagian File Name dan tekan tombol Save. Maka file latihan sederhana telah tersimpan dengan nama “Animasi­1.fla”.

10.2 Animasi Teks Sederhana.

Pada bagian ini kita akan membuat animasi dari suatu teks sederhana yang akan muncul pada bagian stage yang akan muncul huruf demi huruf mulai dari bagian sebelah kiri ke kanan. Adapun langkah­langkahnya adalah sbb: 4. Buka file baru dengan menekan tombol File > New..., maka akan muncul kotak dialog

dan selanjutnya tekan tombol OK. Pada bagian stage akan terbuka dokumen baru. 5. Pada Frame 1 klik “Tex Tool (T)” pada bagian tools. 6. Klik pada bagian stage, ketikan satu huruf kapital S_ (dengan underscore). 7. Klik Kanan mouse pada frame 2 dan pilih Insert Key Frame. 8. Klik kembali huruf yang baru saja dibuat dan tambahkan dengan huruf kedua menjadi

SE_. 9. Klik kanan mouse pada Frame 3 dan pilih Insert Key Frame. 10. Klik kembali huruf yang baru saja dibuat dan tambahkan dengan huruf ketiga menjadi

SEL_. 11. Lakukan langkah 3 dan 4 secara berulang sampai Frame 13 dengan huruf kompit menjadi

SELAMAT DATANG_. 12. Klik tombol Play pada Controller untuk melihat animasi teks sederhana. 13. Simpan kembali file dengan menekan tombol File > Save, dan beri nama menjadi

“Animasi­Teks.fla”. Pada stage anda akan lihat huruf kompit sbb:

Controller

Play

Page 30: PEMBUATAN MEDIA PEMBELAJARAN · PDF fileSebelum membuat animasi maka terlebih dahulu anda ... dengan melihat tanda cross hair ... Seperti program AutoCAD ataupun program grafis lainnya

Manual Flash MX 2004 Fikri Alami, S.T., M.Sc.

29