MEDIA PEMBELAJARAN INTERAKTIF DENGAN MACROMEDIA FLASH PROFESIONAL 8 A. PENGENALAN MACROMEDIA FLASH PROFESSIONAL 8

1. Stage Stage biasa disebut dokumen. Fungsi nya adalah sebagai tempat untuk menggambarkan setiap objek yang akan dimanipulasi. 2. Toolbox Toolbox merupakan kumpulan alat-alat yang digunakan untuk menggambar suatu objek. Untuk menggambar suatu objek, Macromedia Flash 8 menyediakan beberapa tool, seperti: a. Selection tool . Tool ini digunakan sebagai alat penunjuk, alat memilih, alat untuk mengatur objek, dan memindahkan objek. b. Subselection tool . Tool ini digunakan untuk mengatur titik-titik, segmen, dan tangen handle sebuah garis atau sebuah kurva. c. Oval tool . Tool ini digunakan untuk menggambar objek bentuk bulat. . Tool ini digunakan untuk menggambar objek bentok

Gambar 1. Areal Kerja Macromedia Flash Professional 8

d. Rectangle tool persegi. e. Line tool

. Tool ini digunakan untuk menggambar garis.

f. Pen tool . Tool ini digunakan untuk menggambar objek yang tidak beraturan. g. Eraser tool . Tool ini digunakan untuk menghapus sebagian dari gambar.

h. Free Transform tool . Tool ini digunakan untuk melakukan transformasi objek secara cepat, seperti rotate (memutar), skew (efek miring), dan scale (mengubah skala gambar). i. j. Text tool Lasso tool . Tool ini digunakan untuk membuat teks. . Tool ini digunakan untuk memberi tanda batas.

1

k. Eyedropper tool . Tool ini digunakan untuk mengambil warna pada sebuah objek, lalu warna tersebut dijadikan sebagai fill color. l. Pencil tool . Tool ini memiliki 3 buah option, yaitu : Straighten untuk membuat garis lurus Smooth untuk menggambar garis lengkung Ink untuk menggambar sesuai keinginanGambar 2. Pencil Option

1. Panel Panel berfungsi untuk menampilkan dan mengubah informasi suatu objek yang ada pada stage. Masing -masing panel akan sangat berhubungan dengan tools yang digunakan, terutama panel properties.

Gambar 3. Properties Objek Teks.

Selain panel properties, Macromedia Flash 8 juga masih memiliki panel-panel lain, diantaranya: Panel Color Mixer dan Panel Color Swatches. 2. Timeline Timeline berfungsi untuk mengatur proses animasi yang akan dibuat. Timeline juga mengatur efek suara, termasuk mengatur musik latar sesuai keinginan. Kecepatan animasi pada timeline diatur dalam ukuran fps (frame per second).

Gambar 4. Timeline

3. Layer Berfungsi mengatur penempatan satu objek atau lebih. Pada dasarnya dalam pembuatan animasi, layer yang digunakan dapat lebih dari satu, bahkan ada sebuah animasi yang memerlukan puluhan layer dalam proses pembuatannya. Untuk membuat suatu animasi yang baik, objek yang sudah mempunyai animasi harus dipisahkan dengan objek yang tidak mempunyai animasi, sehingga dalam prosesnya animasi tersebut tidak menjadi satu dengan objek animasi bergerak. 4. Frame Digunakan untuk mengatur lamanya waktu pemunculan suatu objek. Apabila ingin memunculkan suatu objek lebih lama, frame yang digunakan harus lebih banyak, walaupun itu membutuhkan memori yang cukup banyak. 5. Keyframe Digunakan untuk memberi tanda bahwa frame tersebut memiliki satu objek atau lebih pada stage. Frame yang memiliki key (keyframe) ini akan secara 2

otomatis terbentuk apabila di dalam frame kosong digambarkan suatu objek dalam stage. Keyframe ditandai dengan bulatan hitam kecil pada frame. 6. Blank Keyframe Digunakan untuk memberi tanda bahwa frame tersebut tidak memiliki objek (kosong), dan frame tersebut sudah siap digunakan. Apabila blank keyframe digambarkan suatu objek pada stage, blank keyframe berubah menjadi keyframe. Disetiap layer pada frame 1 secara otomatis sudah terdapat blank keyframe. Blank keyframe ditandai dengan bulatan kosong kecil pada frame. 7. Icons Icons yang terdapat pada timeline digunakan untuk mempermudah proses desain. Icons terdiri dari : a. Add layer : digunakan untuk menambahkan layer baru. Layer baru akan berada diatas layer yang sedang aktif. b. Add layer guide : digunakan untuk menambah layer guide, yaitu layer yang digunakan untuk menggambarkan line (garis) sebagai arah pergerakan objek. c. Add folder : digunakan untuk menambah folder pada timeline. 8. Library dan Simbol Library adalah sebuah kotak penyimpanan objek yang digunakan didalam scene. Objek tersebut dapat berupa gambar atau image, text, sound, potongan animasi juga termasuk button. Objek yang berasal dari luar file (import) seperti image, sound, dan lainnya secara otomatis tersimpan di dalam library. Symbol adalah objek-objek yan digambarkan pada flash yang selanjutnya disimpan didalam library. Symbol yang telah dibuat dalam library dapat dikategorikan atau dikelompokkan dan dimasukkan dalam folder library.

Gambar 5. Tampilan Library

Membuat dan Mengedit Symbol Terdapat dua cara untuk membuat symbol, yaitu pertama dengan memilih menu Insert > New Symbol atau panel Library dibagian kiri bawah terdapat icon plus + (lihat gambar library). Lalu berikan nama symbol pada kolom nama. Kemudian tentukan type dari symbol.

Namun, jika gambar atau image sudah lebih dahulu masuk ke dalam scene, untuk dapat memasukkan gambar tersebut dapat langsung dilakukan dengan memilih menu modify > convert to symbol. 3

Gambar 6. Tampilan New Symbol

Untuk mengedit symbol yang telah kita buat, klik dua kali pada gambar symbol di panel library, atau klik dua kali pada gambar instance di stage. Untuk menggunakan symbol yang telah kita buat, klik (tahan / drag) pada gambar symbol dipanel library dan dipindahkan ke dalam stage. a. Movie Clip Movie clip adalah salah satu symbol yang digunakan untuk membuat potongan-potongan animasi yang akan digabungkan secara keseluruhan pada scene. b. Button Symbol ini digunakan untuk membuat suatu button atau sering dikenal dengan nama tombol. Berbeda dengan symbol lainnya, symbol ini hanya mempunyai 4 buah frame yang mempunyai nama dan fungsi masingmasing. Frame tersebut adalah: UP : Objek yang digambarkan pada frame UP akan terlihat jika pointer mouse berada diluar area button. OVER : Objek yang digambarkan pada frame OVER akan terlihat jika pointer mouse masuk atau berada di dalam area button. DOWN : Objek yang digambarkan pada frame DOWN akan terlihat jika button diklik. HIT : Area button. c. Graphic Melambangkan objek yang diam atau tidak bergerak (tidak beranimasi). Graphic Symbol tidak memiliki animasi atau gerak, maka symbol ini hanya memerlukan 1 buah keyframe, yaitu pada frame 1. Salah satu fungsi dari graphic symbol adalah untuk mempermudah saat menggambar suatu objek. d. Instance Symbol yang telah digunakan (berada di dalam stage) disebut dengan instance. 11. Tombol Cara membuat tombol 1 : 1. Pilih menu window -> pilih common libraries -> button 2. Pada window library button, pilih tombol dengan cara double klik pada folder 3. Kemudian drag tombol ke stage

Gambar 7. Windows Library button

Cara membuat tombol 2 : 1. Pilih menu insert ->pilih new symbol -> isikan nama tombol, pilih type button -> OK 2. Pada frame UP, Buatlah segi empat di stage dengan menggunakan rectangle tool -> kemudian berilah teks di atas segi empat tersebut dengan nama tombol 3. Klik pada frame UP, kemudian tekan tombol F6 sebanyak 2 x, 4. Pada frame over, ubahlah warna pada segi empat tadi agar tampak berbeda dengan segi empat sebelumnya 4

5. Klik tombol scene untuk kembali ke stage 6. Drag tombol yang ada di library menuju stage 12. Mengenal Action Script Action script adalah bahasa pemrograman flash yang digunakan untuk mengontrol objek, membuat navigasi dan elemen interaktif lainnya. Pada kesempatan kali ini kita menggunakan macromedia flash 8 dengan versi action script 2.0. Action Script pada Flash 8 mempunyai banyak kemiripan dengan pemrograman JavaScript. Sintaks Dasar Pemrograman Action Script Go To : Sintaks ini digunakan untuk melompat ke frame yang diinstruksikan pemakaiannya adalah rangkaian dari pernyataan Stop and Play. Bentuk penulisan: Go To [and] [stop/play] target. Number : Nomor frame yang dituju. Contoh: Go To and Play (15) artinya program melompat ke frame 15 dan mengeksekusi frame 15 tersebut. Label : Nama dari frame yang dituju. Contoh: Go To (mulai) artinya program akan melompat ke frame yang berlabel mulai dan mengeksekusi frame tersebut. Next Frame : Digunakan untuk mengarahkan program ke frame lain. Previous Frame : Digunakan untuk mengarahkan program ke frame sebelumnya. Play : Dipakai untuk mengeksekusi frame yang dituju. Stop : Dipakai untuk menghentikan frame yang dituju. Kategori Action Script Basic Action : Menampung action sederhana yang seringkali digunakan untuk movie flash. Actions : Meliputi Basic Action ditambah action lain yang lebih kompleks. Operator : Berisi symbol yang digunakan untuk operasi logika dan matematika. Function : Berisi action yang dapat menerima data tertentu yangdapat digunakan. Properties : Berisi property objek yang dapat dimodifikasi. Object : Pendefinisian kelas object yang berada dalam kategori objek di Action Script. Action Script pada Frame Action Script pada frame adalah action yang diletakkan langsung pada frame suatu movie. Action pada frame hanya dapat diberikan apabila frame tersebut memiliki keyframe. Action Script pada Movie Clip Action ini terletak pada instan movie clip. Action ini dijalankan dan diproses hanya bila movie clip tersebut (memiliki event). a.Load : saat movie clip pertama kali tampil pada timeline. b.Unload : saat movie clip hilang dari timeline. c.MouseMove : setiap mouse bergerak. d.MouseDown : saat tombol pada mouse ditekan. e.MouseUp : saat tombol pada mose dilepas. f. Enter Frame : saat setiap frame movie clip dimainkan. g.KeyDown : saat tombol keyboard ditekan. h.KeyUp : saat tombol keyboard dilepas. 5

Action Script pada Button Action ini terletak pada button. Action ini akan dijalankan dan diproses hanya bila button tersebut diberikan perintah: a. Press : bila button diklik dan ditahan (drag). b. Release : bila button diklik dan dilepas. c. Release outside : bila button diklik didalam dan dilepaskan diluar area button. d. Keypress : bila menggunakan key pada keyboard. e. Roll over : bila mouse masuk ke area button. f. Roll out : bila mouse keluar dari area button. g. Drag over : bila button diklik, tahan lalu keluarkan dari area button. A. MEMBUAT MEDIA PEMBELAJARAN INTERAKTIF Media Pembelajaran interaktif Merupakan alat bantu pembelajaran yang dilengkapi dengan alat pengontrol yang dapat dioperasikan oleh pengguna, sehingga pengguna dapat memilih apa yang dikehendaki untuk proses selanjutnya. Agar lebih menarik biasanya digunakan beberapa media yang terintegrasi, seperti teks, gambar, video, anaimasi, sound, dll. Langkah Kerja Membuat Media Pembelajaran Olah Raga 1. Membuat flowchart 2. Membuat storyboard

3. Mempersiapkan bahan 4. Mengatur document : Modify > document atau (Ctrl+J) atau klik kanan > Document properties Ubah ukuran dimensions Width : 1024 px, Height 768 px 5. Simpan (harus satu kata/tidak boleh ada spasi) misalnya index 6. Membuat Halaman (Scene), terdiri dari 4 Scene untuk halaman : Home, Badminton, Bola voli, Sepak bola. Menambah scene : insert > Scene Pilih Scene 1 Mengganti nama layer : Dobel klik layer 1 ganti dengan label. Memberi label pada frame : klik frame satu, pada properties frame label isi dengan scenesatu

6

Lakukan pada Scene berikutnya, masing-masing dengan label : scenedua, scenetiga, dan sceneempat.

1. Mengisi Scene1 (halaman Home) Mengimport background Tambah layer 2 (klik insert layer), rubah nama layer dengan nama background. Klik frame ke 1, kemudian pilih menu: file > import > import to stage > pilih gambar background > open.Gambar 1. layer

Membuat Tombol Tambah layer 3, rubah nama layer dengan tombol. pilih menu insert-> new symbol -> ganti nama menjadi tombol_badminton, pilih button pada type symbol -> ok. Pada frame UP, tekan CTRL + R ->buka folder tombol -> pilih kok1 -> open.

7

Kemudian kembali ke scene 1. Drag tombol_badminton ke stage. Lakukan untuk tombol-tombol yang lain (bola voli, sepak bola dan latihan soal).

Memberi Actions pada tombol Klik tombol_badminton, kemudian tekan F9 (mengeluarkan Actions) Berikan action script seperti pada gambar

Lakukan untuk tombol_voli ke scenetiga dan tombol_sepakbola ke sceneempat Memberi Actions stop pada frame Tambah layer 4, rubah nama layer dengan stop. Berikan action Stop 1. Mengisi Scene2 (halaman Badminton) ,3,dan4 : Mengimport background Tambah layer 2 (klik insert layer), rubah nama layer dengan nama background. Klik frame ke 1, kemudian pilih menu: file > import > import to stage > pilih file background_badminton > open.Gambar 1. layer

8

Membuat tombol pilih menu insert-> new symbol -> ganti nama menjadi tombol_teori, pilih button pada type symbol -> ok. Ketikkan TEORI pada up dan atur untuk over dan down Kembali ke Scene 2, tambahkan layer untuk tombol kemudian tarik tombol_teori dari library ke stage, atur posisinya Lanjutkan untuk pembuatan tombol yang lain (gambar, video,dan home) Membuat file swf gambar dan video Buka proyek baru dengan ukuran 480 X 400 px Import gambar atau video Edit gambar sesuai keinginan, unyuk video ikuti langkah2 yang ada di flash. simpan dengan nama graphic_badminton, kemudian tes movie (ctrl+enter), secara otomatis tersimpan file swf-nya. Membuat target untuk menampilkan video dan gambar kembali ke index pilih menu insert-> new symbol -> ganti nama menjadi target, pilih movie clip pada type symbol -> ok. Memberi Actionscript pada tombol klik tombol gambar pada action button tuliskan script on (release) { loadMovie("graphic_badminton.swf", "target"); } 1. Membuat Soal Pilihan Ganda interaktif Mengatur dokumen Ukuran dokumen 700 X 200 (menyesuaikan) Membuat layer: Terdiri dari dua layer : soal dan action

Membuat tombol 9

Tombol berupa huruf A,B,C, dan D yang berfungsi sebagai alternatif pilihan pada soal Mengisi frame dengan soal (10soal=10 frame) Membuat variabel Di frame terakhir, ada 2 variabel yaitu skor dan prosentase

Memberi Actionscript pada frame dan tombol Frame 1 (soal no. 1) : stop(); skor=0 ; Frame 2 10 : stop(); Frame 11 : stop(); prosentase= (skor/10) *100 + "%" ; Untuk tombol (A,B,C,D) : Jawaban benar : on (release) { gotoAndPlay(2); skor++ ; } Jawaban salah : on (release) { gotoAndPlay(2); } 2. Memanggil soal interaktif dengan load movie

10

3. Finishing Membuat file exe File > publish settings > pilih window projector (exe) > publish Membuat autorun Buka notepad ketik : [autorun] open=index.exe simpan dengan format *inf (misalnya autorun.inf) Full screen fscommand("fullscreen", "true"); Exit on (release) { fscommand("quit", "true"); } 1. SEKIAN

11