Membuat Media Pembelajaran Dengan Flash

MembuatMediaPembelajaranInteraktifDenganFlash

Oleh:[email protected]

1

BAGIAN 1 MENGGAMBAR PADA MACROMEDIA FLASH Membuka Lembar Kerja Flash

Jika dalam komputer anda belum terdapat program FLAS. maka anda harus menginstalnya terlebih dahulu. Jika sudah ada maka kita tinggal memakainya. Perhatikan langkah berikut untuk memulai program Flash. Buka program kemudian akan muncul lembar kerja Flash seperti gambar berikut.

Instrument dalam Flash dapat kita bagi menjadi tiga, yaitu instrument untuk membuat grafis, instrument animasi (untuk menggerakkan grafis), dan instrument untuk bahasa program (Action Script). Instrumen Grafis dalam Flash

Secara umum instrument grafis dalam Flash berfungsi untuk membuat desain grafis untuk animasi yang akan kita buat. Desain grafis dalam animasi sangat



2

mempengaruhi tampilan yang akan kita sajikan. Dapat kita katakan bahwa desain grafis ini adalah daya tarik utama dalam animasi yang tentu akan jauh lebih apik ketika didukung dengan animasi yang menarik juga. Beberapa Instrumen grafis dapat dilihat dalam gambar dibawah ini: Keterangan:

1

3

2

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

10. Subselection Tool 11. Lasso Tool 12. Text Tool 13. Rectangel Tool 14. Brush tool 15. Fill Transform tool 16. Pain Bucket Tool 17. Eraser Tool 18. Stroke Color 19. Fill Color

1. Arrow Tool 2. Line Tool 3. Pen Tool 4. Oval Tool 5. Pencil Tool 6. Free Transform Tool 7. Ink Bottle Tool 8. Eyedrooper Tool 9. Hand Tool



3

Membuat Garis dan Memanipulasinya

Untuk membuat garis kita bisa menggunakan Line Tool. Dari garis ini kita dapat membuat desain yang bermacam-macam seperti membuat gambar cartoon. Perhatikan cara penggunaan Line Tool beserta manipulasi yang mungkin dilakukan.

Perhatikan kedua garis tersebut. Garis yang terletak di atas adalah garis dalam keadaan terseleksi. Cara menyeleksi garis adalah dengan meng-click garis tersebut menggunakan Arrow Tool. Kita dapat merubah warna dan ketebalan garis pada properties. Perhatikan tampilan propertis dibawah:

(Tampilan Line Properties)

Terdapat tiga bagian penting dalam line properties yakni warna garis, ukuran

ketebalan, dan jenis garis (garis utuh atau putus-putus). Sesuaikan garis yang telah terseleksi tadi seperti yang kita inginkan dengan memilih pada line properties. Jika tampilan untuk properties tidak ada maka kita munculkan dengan meng click windows>properties.

Untuk membuat garis kita juga bisa memanfaatkan fasilitas pencil tool yang berfungsi membuat garis seperti ketika kita menggambar menggunakan pensil. Sifat garis yang dibuat menggunakan pencil tool sama dengan ketika dibuat dengan line tool sehingga cara mengeditnya pun sama. Perhatikan tampilan dibawah:

Untuk mewarnai garis/line color

Ukuran ketebalan garis Model garis



4

Membuat Garis Lengkung

Sangat mudah jika kita ingin membuat garis lengkung. Buatlah garis seperti

yang kita inginkan kemudian pilih Arrow Tool. Letakkan kursor tepat diatas garis dan lihatlah tanda seperti gambar dibawah.

Tampilan diatas adalah saat kursor di clik tepat diatas garis kemudian di drag (tarik) ke atas. Jadilah garis lengkung. Jika kita ingin meng-edit garis tersebut sebaiknya kita menggunakan subselection tool. Lihatlah tampilan dibawah ini:

Garis diatas adalah garis yang telah di manipulasi menggunakan subselection tool. Caranya sama seperti ketika kita membuat garis lengkung pada awal tadi. Click titik-titik yang muncul selelah garis diseleksi menggunakan subselection tool maka



5

akan muncul tampilan seperti diatas. Setelah itu kita bisa membuat bentuk garis yang kita inginkan.

Sebagai latihan gambarlah grafik sinus menggunakan line tool dan manipulasi garis tersebut menggunakan arrow tool atau subselection tool sehingga menjadi grafik sinus yang menarik.

Catatan!

Menggambar di Flash seperti kita menggambar pada transparasi yang akan ditampilkan pada OHP. Misalkan bidang cartecius kita gambar pada transparasi pertama kemudian grafiknya kita gambar pada transparasi kedua. Ketika dijadikan satu maka akan membentuk gambar yang utuh. Nah, transparasi tersebut kalau dalam Flash dinamakan layer. Perhatikan tampilan dibawah ini:

Pada tampilan diatas terdapat dua layer. Untuk membuat layer baru click insert new layer atau click pada bagian yang dilingkari seperti tampilan diatas. Gambarlah bidang cartecius pada layer 1 dan grafik sinus pada layer 2. Persis seperti kita menggambar pada trasnparansi. Layer 1 berada di bawah layer 2 sehingga pilihlah layer yang sesuai dengan gambar yang akan kita buat. Contoh; tampilan grafik sinus seperti dibawah ini. Perhatikan setiap bagian yang digunakan. Angka 1, 5, 10, dst adalah nomor Frame sehingga jika di click pada frame selain frame satu maka gambar yang kita buat di frame 1 tidak akan terlihat. Gambarlah grafik sinus seperti dibawah ini, dengan catatan; bidang cartecius dibuat pada layer 1 dan grafik sinus dibuat pada layer 2.



6

Membuat Gambar Kartun dan Mewarnainya

Hanya dengan menggunakan line tool kita bisa membuat sebuah gambar cartoon yang menarik, tentunya dengan satu syarat yakni dengan sentuhan yang kreatif. Caranya cukup mudah yaitu dengan mengkombinasikan garis sedemikian rupa sehingga menjadi gambar kartun. Kita bisa membuat garis lurus maupun garis lengkung dengan menggunakan bantuan arrow tool dan subselection tool. Perhatikan contoh gambar cartoon dibawah ini:

Gambar diatas hanya menggunakan line tool yang dimanipulasi menggunakan arrow tool. Ingat, hanya dengan menggunakan dua fasilitas dalam Flash kita bisa menghasilkan karya yang menarik. Sekarang kita akan memberikan sentuhan warna pada gambar diatas. Pewarnaan kali ini aklan menggunakan fasilitas painbucket tool yang pilihan warnanya kita sesuaikan pada fill color. Caranya mudah, kita tinggal memilih fasilitas painbucket tool kemudian pilih warna yang sesuai pada filll color dan

Layer 1untuk membuat bidang cartecius, layer 2 untuk membuat grafik sinus

Layer 1untuk membuat bidang cartecius, layer 2 untuk membuat grafik sinus



7

click diatas gambar. Daerah yang dibatasi denagn garis sekaligus menjadi batas pewaraan gambar. Sebagai contoh warnai bagian rambut dan mata. Hasilnya seperti gambar dibawah:

Jika gambar yang kita buat tidak bisa diberikan warna, pilihlah Close Large Gaps dengan cara:

Nah, sekarang warnailah gambar kartun itu dengan warna yang sesuai sehingga menjadi karya yang menarik. Catatan! Memberi warna pada garis

Jika kita ingin memberikan warna pada garis maka kita bisa menggunakan

fasilitas ink bottle tool dan pilih warna pada stroke color kemudian clik pada garis yang akan kita rubah warnanya. Atau dengan cara menyeleksi garis yang akan dirubah warnanya kemudian pilih warna yang kita inginkan pada ink bottle tool. Gambar bisa

Pilih Paint Bucket Tool lalu klik bagian ini.



8

diwarnai dengan syarat, gambar tersebut masih berada pada Layer dan Frame yang sama. Menggambar Objek dengan Ovale Tool dan Rectangle Tool

Pada dasarnya setiap objek gambar yang kita buat dalam Flash terdiri dari dua bagian. Bagian garis dan bagian fill. Seperti dalam fasilitas ovale tool dan rectangle tool juga demikian. Perhatikan tampilan dibawah ini:

Tampilan diatas adalah saat objek di ceraikan menjadi dua bagian. Dalam kasus diatas fill (warna dalam) akan duipindahkan ke bawahnya sehingga objek terbagi menjdi dua dimana lingkaran di bawah adalah objek tanpa garis. Cara memisahkan objek tersebut dengan menggunakan arrow tool kemudian drag (tarik) ke bawahnya sehingga seperti tampilan dibawah ini:

Lingakaran yang berada di bawah adalah adalah objek tanpa garis. Jika kita akan mengembalikan seperti semula kita tinggal menekan ctr+Z (undo) pada keyboard. Hal yang sama bisa dilakukan pada obyek kotak.

Khusus membuat obyek dengan Rectanggle Tool, kita dapat memodifikasinya. Perhatikan tampilan berikut:

Memisahkan bagian fill dan line pada obyek



9

Memotong Gambar

Kita bisa memotong gambar yang kita buat untuk memperoleh bentuk yang kita

inginkan. Perhatikan petunjuk dibawah ini:

Kita dapat memotong obyek dengan menggunakan garis. Buatlah garis yang membagi obyek menjadi empat bagian. Kemudian seleksi salah satu bagian. Jika sudah dapat terseleksi berarti obyek sudah terpotong. Setelah dipastikan obyek berhasil dipotong, kita pisahkan keempat obyek tersebut menjadi seperempat lingkaran.

Obyek yang sudah berhasil dipotong

Setelah memilih rectangle tool, click disini maka akan muncul tampilan Rectanggle setting.isikan corner radius, misalkan 30, kemudian OK dan gambarlah kotak seperti biasa.

Setelah memilih rectangle tool, click disini maka akan muncul tampilan Rectanggle setting.isikan corner radius, misalkan 30, kemudian OK dan gambarlah kotak seperti biasa.



10

Perhatikan tampilan diatas. Obyek sudah berhasil dipotong menjadi empat bagian akan tetapi yang terpisah hanyalah fillnya saja, garis tidak ikut terpisah. Cara memisahkannya hanya dengan di drag menggunakan Arrow Tool. Setelah terpisah, kita juga bisa mengganti warna obyek yang terpotong tersebut menggunakan Paint Butket Tool. Keterampilan ini sangat penting untuk membuat gambar-gambar geometri. Membuat Teks

Untuk membuat teks, kita gunakan Teks Tool, kemudian click pada lembar kerja. Ketiklah teks seperti yang diinginkan. Untuk mengatur ukuran teks dapat digunakan Free Transform Tool seperti tampak pada tampilan berikut:

Lebih lanjut, pengaturan teks dapat dilakukan pada teks properties. Seleksi teks maka pada properties akan tampak seperti tampilan berikut:

Jenis Teks Jenis Huruf Ukuran Font



11

Perhatikan bagian yang dilingkari. Pada bagian tersebut terdapat tiga macam teks, yakni; static text, dinamic text, dan input text. Pilihlah static text jika ingin membuat teks untuk keperluan aksesoris grafis. Dynamic Text sangat penting dalam pokok bahasan selanjutnya ketika sudah masuk pada pembahasan Action Script.

Membuat Teks yang Dilengkapi dengan ScrollBar Perhatikan langkah berikut:

1. Buatlah area teks menggunakan dinamic text. 2. Drag scrollbar dan masukkan pada area teks yang sudah dibuat.

3. Perhatikan tanda pada pojok kanan bawah. Jika sudah berwarna hitam maka artinya scollbar sudah berhasil dibuat.

Drag ke area dinamic text yang sudah dibuat

Nama Teks Box

Jika diaktifkan, border untuk Dinamic Text akan muncul

Nama variabel



12

4. Masukkan teks yang ingin kita buat. Perlu diperhatikan, saat kita mengetik teks jangan sampai melebihi batas. Artinya jika pada baris pertama sudah penuh maka harus di enter.

5. Untuk mencoba scrollbar yang sudah dibuat, tekan ctr+enter pada keyboard. Menyimpan File Ada dua jenis file dalam Flash yaitu file Project dan File Movie. File Projek (nama file.fla) adalah file yang masih berupa lembar kerja sehingga file ini bisa diedit. File Movie adalah file yang sudah di convert menjadi Movie. Misalnya dalam bentuk Flash Movie (nama file.swf), GIF Animated (nama file.gif), atau Windows Projector (nama file.exe). Menyimpan File dalam Bentuk Flash Project Pilih File >> Save atau Save As dan berilah nama pada kotak File Name sesuai keinginan Anda.

Menyimpan File dalam Bentuk Flash Movie Untuk menyimpan file dalam Flash Movie, cukup dengan melakukan Test Movie setelah kita menyimpan File Projeck maka secara otomatis akan tersimpan file jenis Flash Movie.



13

BAGIAN 2 MEMBUAT ANIMASI, MOVIE CLIP DAN BUTTON

Animasi Sederhana pada Flash Animasi Perpindahan Benda Menggunakan Flash, dengan mudah kita bisa membuat animasi sederhana yang nantinya bisa dikembangkan menjadi animasi yang lebih menarik. Sebagai contoh, kita akan membuat animasi perpindahan bola sebagai berikut: Pada Layer 1:

1. Buatlah objek bola pada Frame 1 (bola tersebut akan menjadi posisi awal dalam animasi perpindahan).

2. Klik kanan pada Frame 40, pilihlah insert KeyFrame.

3. Blok pada frame 40 hingga frame 1, klik kanan, dan pilihlan Create MotionTween. Jika berhasil, maka terdapat tanda panah berwarna ungu dari frame 1 sampai frame 40.

4. Klik pada frame 40, seleksi objek bola, dan pindahkan bola ke posisi lain (posisi tujuan). Klik frame 1, Jika posisi bola pada frame 1 berbeda dengan posisi bola



14

pada frame 2 maka lakukanlah test movie dengan menekan Shift+enter pada Keyboard.

Animasi Penghilangan Benda Animasi ini bisa digunakan untuk menghilangkan benda secara gradasi atau memunculkan benda secara gradasi.

1. Buatlah objek lingkaran pada frame 1. 2. Lakukan Insert Key Frame pada frame 20 dan frame 40. 3. Blok seluruh frame, klik kanan, pilih Create Motion Tween.

4. Klik objek yang berada pada frame 1. Pada Properties, atur nilai alpha menjadi 0% seperti berikut:

Lakukan hal yang sama untuk objek pada frame 40.

5. Lakukan Test Movie dengan menekan Ctrl+Enter. Gambar akan muncul secara perlahan dan hilang secara perlahan pula.

Animasi Perpindahan Benda Menggunakan Motion Guide Motion Guide berfungsi untuk membuat lintasan sehingga benda yang akan dianimasikan bergerak sesuai dengan lintasan yang telah dibuat. Ikuti langkah berikut untuk menggerakkan bola sesuai dengan lintasan:



15

1. Setelah dibuat animasi perpindahan bola seperti diatas, pilihlah Add Motion Guide seperti ditunjukkan pada gambar berikut:

2. Klik frame 1 pada layer motion guide dan buatlah lintasan menggunakan Pencil Tool.

3. Klik frame 1 layer 1 dan seleksilah objek bola. Posisikan bola tepat pada ujung atas lintasan (sebagai posisi awal).

4. Klik frame 2 layer 1 dan seleksilah objek bola, posisikan tengah-tengah bola tepat pada ujung bawah lintasan.

5. Lakukan test movie dengan menekan tombol enter. Perhatikan, animasi yang dihasilkan akan mengikuti lintasan yang sudah dibuat. Untuk menyembunyikan lintasan, silanglah pada tanda mata di Time Line.

Animasi Perubahan Warna Sebagai contoh, kita akan menganimasikan perubahan warna pada indikator universal yang digunakan untuk mengetahui kadar pH pada pelajaran Kimia. Desain yang kita

AddMotionGuide

LintasanmenggunakanPencilTool



16

buat adalah : warna pada kertas indikator akan berubah berdasarkan nilai pH, ditunjukkan seperti table berikut:

pH Warna Indikator Universal 3 Merah 4 Merah jingga 5 Jingga 6 Kuning 7 Hijau Kekuningan 8 Biru Kehijauan 9 Biru 10 Ungu

1. Buatlah dua layer, layer 1 untuk membuat animasi perubahan warna dan layer

2 untuk memberikan keterangan nilai pH.

2. Buat kotak pada layer 1 frame 1 dan berilah warna merah. Lakukan insertKeyFrame pada layer 30 dan berilah warna kuning. Lakukan hal yang sama pada frame 60 dan berilah warna biru. Pada layer 75, lakukan juga isertKeyFrame dan berilah warna ungu.

3. Blok layer 1 dari frame 76 sampai frame 1 kemudian pilih Motion Shape pada Properties. Jika warna sudah terdapat panah dan kotak frame layer 1 sudah berwarna hijau berarti animasi perubahan warna sudah berhasil.

4. Untuk membuat kererangan niai pH, buatlah menggunakan static text pada layer 2 dan tempatkan pada frame yang sesuai. Misalnya pH < 3 pada frame 1, pH = 4 pada frame 10, pH = 5 pada frame 20, dan seterusnya. Gambar diatas menunjukkan nilai pH = 4, menunjukkan tampilan pada frame 10.

Animasi Perubahan Benda Selain animasi perpindahan, kita juga bisa membuat animasi perubahan benda seperti mengubah objek lingkaran menjadi segi empat. Ikuti langkah berikut: Pada Layer 1:

1. Buatlah objek lingkaran pada frame 1.



17

2. Klik kanan frame 40, pilihlah Insert Blank KeyFrame dan buatlah objek persegi. 3. Blok dari frame 40 hingga frame 1. Perhatikan kotak dialog Properties, pada

kolom Tween pilihlah Shape Tween. Animasi berhasil jika pada frame 1hingga 40 terdapat tanda panah berwarna hijau.

4. Lakukan test movie. Membuat Efek Masking Menggunakan MotionTween

Efek masking adalah efek untuk menyembunyikan bagian obyek yang kita inginkan ketika animasi dijalankan. Perhatikan langkah berikut ini;

1. Buatlah garis pada layer 1 dan kotak pada layer 2 seperti gambar dibawah ini;

2. Buatlah motiontween pada layer 2 (kotak) dengan posisi; pada frame 1 berada pada sebelah kiri obyek garis (seperti di atas), posisi 2 (frame 20) menutup semua obyek garis, posisi 3 (frame 40) berada di sebelah kanan obyek garis.

3. Tampilkan obyek garis (layer 1) hingga frame 40 dengan cara klik kanan pada layer 1 frame 40 kemudian insert frame.



18

4. Click kanan pada layer 2 dan pilih mask sehingga tampilan pada layer berubah seperti dibawah ini;

5. Cobalah efek yang sudah dibuat dengan menekan ctrl+enter. Movie Clip dan Button Jika seluruh tampilan pada Flash Player digambarkan sebagai sebuah movie, maka movie clip merupakan sub-movie. Dalam movie clip juga terdapat lembar kerja persis seperti pada lembar kerja flash induknya. Perhatikan ilustrasi dibawah ini:

Tandabahwaefekmaskingtelahberhasil(kedualayerterkunci,terdapattandalingkaranpada

layer2)



19

Scene adalah lembar kerja utama. Didalam scene bisa dibuat MovieClip 1 yang didalamnya terdapat lembar kerja persis seperti lembar kerja utama. Dalam lembar kerja MovieClip 1 juga bisa dibuat MovieClip 2 yang didalamnya terdapat lembar kerja. Membuat Objek Movie Clip Sebagai contoh, kita akan membuat animasi pantulan bola yang dibuat didalam MovieClip. Ikuti langkah berikut:

1. Buatlah objek bola pada frame 1. 2. Dobel Klik pada bola. Setelah terseleksi, klik kanan dan pilihlah Convert to

Symbol maka akan muncul kotak dialog seperti berikut:

3. Setelah muncul kotak dialog Convert to Symbol, pilihlah Movie Clip lalu OK.



20

Seleksi gambar bola dan perhatikan kotak dialog pada Properties. Jika tampilan sudah seperti tampilan dibawah ini, maka Movie Clip sudah berhasil dibuat.

Movie Clip Menunjukkan bahwa objek sudah dalam bentuk

MovieClip Nama yang diisikan menunjukkan identitas MovieClip W Lebar gambar dalam pixel H Tinggi gambar dalam pixel X Posisi koordinat x (posisi horizontal) gambar dalam

lebar kerja Y Posisi koordinat y (posisi vertikal) gambar dalam lebar

kerja

4. Dobel Klik pada bola, maka akan muncul lembar kerja Flash persis seperti lembar Flash utama.

5. Di dalam MovieClip bola, buatlah animasi perpindahan sedemikian rupa sehingga seperti bola yang memantul-mantul.

6. Klik Scene 1 seperti pada bagian yang dilingkari diatas untuk kembali pada lembar kerja utama. Perhatikan Time Line pada lembar kerja utama, maka hanya akan terlihat satu frame saja yang terisi objek namun ketika dilakukan test movie, akan terlihat animasi pantulan bola.

7. Lakukan test movie dengan menekan Shift+enter. Menganimasikan Movie Clip Selanjutnya kita akan menganimasikan Movie Clip pantulan bola di atas sehingga menjadi pantulan bola yang bergerak. Jadi, selain bola akan bergerak memantul-mantul juga akan bergerak dari posisi 1 ke posisi 2. Ikuti langkah berikut:

Untukmembuatanimasipantulanbola,buatlahmotiontweendenganposisiawalpadaframe1,posisikeduapadaframe5,danposisiketigapadaframe10.



21

1. Klik pada frame 40 dan lakukan insert KeyFrame. 2. Buat MovieClip bola sedemikian rupa sehingga posisi tujuan berbeda dengan

posisi asal. 3. Blok pada frame 1 hingga 40 dan masukkan MotionTween. 4. Lakukan test movie.

Membuat Tombol (Button) Pada Macromedia Flash sebenarnya sudah disediakan button dengan berbagai macam desain. Untuk memasangnya pilih Windows >> Common Libraries >> Buttons sehingga akan muncul tampilan berikut:

Seleksi frame pada layer yang akan anda berikan tombol kemudian tarik tombol yang anda pilih ke dalam lembar kerja, maka tombol tersebut sudah siap digunakan. Namun jika anda ingin membuat tombol sesuai keinginan anda, lakukan prosedur berikut:

1. Buatlah desain tombol terlebih dahulu. Misalnya kita akan membuat tombol berbentuk oval. Pastikan desain yang kita buat berada pada layer dan frame yang sama. Misalnya kita akan membuat tombol dengan bentuk :

2. Pilih Rectangle Tool dan klik pada bagian yang dilingkari:



22

3. Seleksi semua objek tombol dengan cara mengklik dobel pada gambar atau menseleksi frame dimana gambar itu dibuat. Setelah terseleksi, klik kanan dan pilih Convert to Symbol.

4. Pilih Button dan OK. 5. Dobel klik pada tombol maka akan muncul tampilan berikut:

Up Kondisi pada saat kursor tidak diatas tombol Over Kondisi saat kursor diatas tombol Down Kondisi saat mouse di klik Hit Kondisi saat mouse diangkat - Lakukan isertKeyFrame pada frame Over lalu perbesar ukuran tombok

menggunakan Free Transform. Ubah juga warna teks dengan warna putih. - Lakukan isertKeyFrame pada frame Down dan ubahlah warna teks

menjadi kuning. - Lakukan test movie untuk melihat hasilnya. Untuk kembali ke lembar kerja

utama, klik dobel pada lembar kerja atau klik pada Scene 1.

Klikdisiniterlebihdahulu

Laluklikdisini,makaakanmunculkotakdialogsepertidisamping.IsiCornerRadiusdenganangka10,lebihbesarangkalebihbesarpulalengkungan.



23

Memberi Efek Suara pada Tombol Untuk memperbagus tombol yang sudah dibuat, kita bisa menambahkan efek suara pada tombol. Lakukan prosedur berikut:

1. Klik dobel pada tombol untuk masuk ke lembar kerja tombol. 2. Buatlah layer baru dan lakukan insert Blank Key Frame pada frame 2 lalu

isikan sound dengan cara: - Pilih Windows >> Common Libraries >> Sounds maka akan muncul kotak

dialog seperti pada gambar 1. - Pilih efek suara yang anda inginkan dengan menarik file suara tersebut

pada lembar kerja, maka frame yang terisi file suara akan tampak seperti pada gambar 2.

3. Keluar dari lembar kerja tombol dan lakukan Test Movie.

Menyimpan File Ada dua jenis file dalam Flash yaitu file Project dan File Movie. File Projek (nama file.fla) adalah file yang masih berupa lembar kerja sehingga file ini bisa diedit. File Movie adalah file yang sudah di convert menjadi Movie. Misalnya dalam bentuk Flash Movie (nama file.swf), GIF Animated (nama file.gif), atau Windows Projector (nama file.exe).

Jenis file yang memiliki icon merah adalah jenis Flash Project (.fla), yang berwarna putih kecil adalah Flash Movie (.swf) dan yang berupa lingkaran besar adalah jenis windows projector (.exe).

Menyimpan File dalam Flash Project

Pilih File >> Save atau Save As dan berilah nama pada kotak File Name sesuai keinginan Anda.

Gambar1 Gambar2

Framesudahterisiefeksuara.



24

Menyimpan File dalam Flash Movie

Untuk menyimpan file dalam Flash Movie, cukup dengan melakukan Test Movie setelah kita menyimpan File Projeck maka secara otomatis akan tersimpan file jenis Flash Movie. Cara lain yaitu dengan mem-publish file menjadi Flash Movie dengan cara:

- Pilih File >> Publish Setting maka akan muncul tampilan sebagai berikut:

- Cek pada tipe Flash (.swf). Untuk menyimpan file dengan nama yang berbeda dengan file Pfoject-nya jangan berikan tanda cek pada Use default names lalu isilah nama file pada kotak Filename.

- Anda juga bisa melakukan pengaturan, misalnya ingin membuat Pasword untuk file Flash Movie dengan cara memilih kotak pengaturan Flash.

PengaturanFlash



25

- Untuk bisa menjalankan file ini, computer Anda harus sudah teristal Flash Movie Player.

Menyimpan File dalam Bentuk HTML

File HTML ini adalah jenis file yang bisa dibuka pada halaman Internet Explorer, Opera, Firefox, atau yang sejenis. Jika anda memilih penyimpanan dalam HTML maka secara otomatis juga akan akan menyimpan dalam bentuk Flash Movie (.swf). Hal ini karena HTML hanya merupakan kode untuk memanggil file Flash Movie untuk dijalankan pada halaman Internet Explorer. Agar file HTML ini bisa dijalankan maka komputer anda harus sudah terinstal program Flash Player.

Menyimpan File dalam GIF Animated

File ini biasanya digunakan dalam halaman web. Istilah yang lebih familiar adalah gambar bergerak. Jika Anda ingin membuat Wallpaper HP yang berupa Animasi, Anda bisa gunakan file jenis ini.

- Pilih File >> Publish Setting dan cek pada File Type GIF (.gif) lalu pilih kotak pengaturan GIF:

- Pilih Animated jika anda ingin membuat file gambar yang bergerak. Anda juga bisa melakukan pengaturan-pengaturan lain sesuai kebutuhan Anda.

Menyimpan File dalam Windows Projector File ini merupakan file aplikasi yang bisa dibuka disemua computer yang memakai system operasi Windows sehingga lebih aman untuk digunakan (tidak perlu khawatir tidak bisa dijalankan).

- Pilih File >> Publish Setting cek pada Windows Projector. - Pilih Publish lalu OK. - File aplikasi Anda sudah bisa dibuka.



26

BAGIAN 3 DASAR-DASAR ACTION SCRIPT

Pengenalan Action Script Action Script adalah bahasa program untuk memberikan perintah kepada Flash ketika movie dijalankan. Secara garis besar, ada dua jenis action script yaitu action script yang diterapkan pada objek dan action script yang diterapkan pada Time Line (Frame). Penulisan script dilakukan pada kotak action. Jika kotak dialog action belum muncul pilihlah Windows >> Actions atau tekan F9.

Kotak dialog untuk menuliskan script

Posisi Koordinat Objek pada Lembar Kerja Setiap titik pada lembar kerja memiliki koordinatnya masing-masing. Posisi horizontal menunjukkan nilai x sedangkan posisi vertical menunjukkan nilai y. Titik acuan koordinat adalah 0,0. Semakin ke kanan nilai x akan semakin besar, semakin ke bawah nilai y akan semakin besar.

MenunjukkanactionyangditerapkanpadaFrame.



27

Action Script pada Button Action Script pada tombol dipasang setelah tombol yang akan diberikan script terseleksi. Penulisan script pada tombol adalah sebagai berikut: on(mouseEvent) { perintah; } Mouse Event bisa diisi dengan:

press Perintah akan berjalan pada saat mouse ditekan release Perintah akan berjalan setelah mouse dilepas diatas tombol releaseOutside Perintah akan dijalankan setelah mouse ditekan lalu dilepaskan

diluar tombol rollOver Perintah akan berjalan pada saat kursor diatas tombol rollOut Perintah akan berjalan ketika kursor meninggalkan tombol

Memindahkan Frame Action Script pada objek adalah action script yang dipasang setelah objek diseleksi. Sebagai contoh kita akan memindahkan tampilan pada frame 1 ke frame 2 dengan menggunakan tombol. Ikuti langkah berikut:

1. Buatlah static text Halaman 1 pada frame 1 layer 1 dan tombol next pada frame 1 layer 2.

2. Buatlah static text Halaman 2 pada frame 2 layer 1 dan tombol back pada frame 2 layer 2.



28

3. Seleksi tombol Next dan isilah script berikut pada kotak action: on(release){ gotoAndStop(2); }

4. Lakukan hal yang sama pada tombol back akan tetapi target frame kita ganti menjadi 2: on(release){ gotoAndStop(1); }

5. Buatlah Layer baru, seleksi frame 1 dan isilah script berikut pada kotak action: stop(); Script diatas termasuk dalam script yang diterapkan pada frame yang akan dibahas lebih lanjut pada bagian selanjutnya.

6. Lakukan test movie dengan menekan Shift+Enter. Penjelasan Script:

1. Perintah on(release) { statement } berarti statement akan dijalankan ketika tombol klik pada mouse dilepas.

2. gotoAndStop(2) adalah statment yang berarti tampilan akan dipindahkan ke frame 2.

3. Perintah stop(); pada frame 1 berarti saat movie dijalankan maka akan langsung berhenti pada frame 1.

Membuat Tombol yang Draggable Tombol yang Dragable berarti tombol yang bisa ditarik ke posisi manapun yangkita inginkan. Ikuti langkah berikut:

1. Buatlah Button dengan Instance Name bulat dan berilah script seperti dibawah ini: on(press) {



29

startDrag("bulat"); } on(release) { x=bulat._x; y=bulat._y; stopDrag(); }

2. Buatlah dua kotak Dynamic Text, masing-masing berilah nama variabel x dan y.

3. Lakukan test movie.

Penjelasan Script:

1. Perintah on(press){statement} berarti statemen akan dijalankan ketika tombol mouse ditekan.

2. on(release){statement} berarti statement akan dijalankan ketika tombol mouse dilepas.

3. Perintah startDrag(bulat); berarti symbol dengan instance name bulat menjadi dragable.

4. stopDrag(); berarti menghentikan symbol yang dragable. 5. Perintah x=bulat._x; berarti Dynamic Text Box dengan variabel x akan diisi dengan

posisi koordinat tombol saat drag dihentikan. Demikian juga dengan perintah y=bulat._y; yang menunjukkan posisi koordinat y untuk tombol bulat.

Action Script pada Movie Clip Seperti yang sudah dibahas pada bagian sebelumnya, terdapat tiga jenis symbol dalam Flash yaitu Movie Clip, Button, dan Graphic. Selain bisa diterapkan pada symbol jenis Button seperti contoh diatas, Action Script bisa juga diterapkan pada Movie Clip. Secara umum penulisan script pada movie clip adalah: onClipEvent(movieEvent){ perintah; } MovieEvent bisa diisi dengan: enterFrame Perintah berjalan ketika movie dijalankan mouseMove Perintah berjalan ketika mouse digerakkan mouseDown Perintah berjalan ketika mouse ditekan mouseUp Perintah berjalan ketika mouse dilepas

ButtondenganInstanceNamebulat

Posisikoordinatxsaattomboldilepas.



30

keyDown Perintah berjalan ketika tombol keyboard (sembarang) ditekan keyUp Perintah berjalan ketika tombol keyboard (sembarang) dilepas

Membuat Animasi Balon Terbang

1. Buatlah gambar balon lalu jadikan gambar balon tersebut menjadi movie clip.

2. Seleksi gambar balon itu lalu buka kotak dialog action. Isilah script seperti berikut:

3. Lakukan tes movie. Penjelasan script:

1. _y -= 5; menyebabkan nilai koordinat y untuk balon akan selalu berkurang 5 pixel sehingga balon bergerak ke atas.

2. if (_y



31

dari posisi y = 450 (dibawah) setelah balon berada pada posisi kurang dari nol (diatas).

Membuat Animasi Gerakan Amoeba

1. Buatlah movie clip lingkaran. 2. Klik dobel pada lingkaran dan buat animasi menggunakan shape motion sehingga

mirip gerakan amoeba. Caranya, modifikasi lingkaran menggunakan Arrow Tool sehingga tampilan menjadi:

Agar animasi terlihat halus, lakukan copy frame pada frame 1dengan cara klik kanan lalu pilih copy frame. Paste pada frame 15 seperti pada tampilan di atas.

3. Keluarlah dari lembar kerja movie klip kemudian seleksi movie klip yang sudah dibuat. Berilah script berikut pada movie clip amoeba. onClipEvent(enterFrame){ this._x+= -5+random(10); this._y+= -5+random(10); if (this._x > 550){ this._x = 0; } if (this._x < 0){ this._x = 550; } if (this._y > 400){ this._y = 0; } if (this._y < 0){ this._y = 400; } }



32

Penjelasan Script:

1. -5+random(10); akan mengacak bilangan dari -5 sampai 5. 2. this._x+= -5+random(10); berarti nilai x untuk movie klip akan selalu

bertambah sesuai dengan bilangan dari -5 sampai 5. 3. Keempat perintah if diatas akan membatasi nilai x amuba antara 0 550 dan nilai y

amuba antara 0 400. Hal ini menyebabkan gerakan amuba akan selalu berada pada koordinat yang sudah dibatasi.

Mengendalikan Animasi didalam Movie Clip dari Halaman Utama

1. Buatlah movie clip pada layer 1 frame 1 yang berisi animasi perpindahan bola. Berikan instance name bola untuk movie clip yang dibuat. Gambar di bawah ini menunjukkan animasi di dalam movie clip. Pada frame 1 isikan script berikut:

stop();

2. Keluar dari lembar kerja movie clip dan buatlah layer baru dan masukkan tombol pada frame 1. Pada tombol, berilah script seperti dibawah ini:



33

3. Lakukan test movie. Ketika tombol diklik, perintah _root.bola.gotoAndPlay(2) akan menjalankan animasi dalam movie clip dimulai dari frame 2.

Action Script pada Frame Untuk mengendalikan movie clip atau tombol, selain bisa dilakukan dengan cara memberikan script pada objek juga bisa dilakukan dengan memberi script pada frame. Sebagai contoh, kita akan mengendalikan gerakan amuba namun dengan memberi script pada frame.

1. Cut script didalam movie clip amoeba dengan cara, blok semua script klik kanan dan pilih cut atau menekan crtl+x pada keyboard.

2. Buatlah layer baru, seleksi pada frame 1, buka kotak dialog Action Frame dan paste di dalamnya.

3. Lakukan penambahan script berikut: _root.onEnterFrame=function(){ this._x+= -5+random(10); this._y+= -5+random(10); if (this._x > 550){ this._x = 0; } if (this._x < 0){ this._x = 550; } if (this._y > 400){ this._y = 0; } if (this._y < 0){ this._y = 400; } }

Perhatikan script di atas. Jika script diterapkan pada movie clip maka perintah yang digunakan adalah onClipEvent (enterFrame). Namun jika script diterapkan pada frame perintah yang digunakan adalah _root.onEnterFrame=function().

4. Lakukan test movie, maka hasinya akan sama dengan sebelumnya. Menggambar Menggunakan Perintah Action Script

1. Buka lembar kerja baru dan seleksi pada frame 1. 2. Tuliskan script berikut:

_root.onEnterFrame = function(){ beginFill (0x0000FF, 50); lineStyle(2,996600,100); moveTo(200,200); lineTo(300,400); lineTo(100,400); lineTo(100,400);



34

endFill(); }

3. Lakukan test movie maka akan muncul gambar segitiga. Penjelasan Script:

1. beginFill (id warna, nilai transparansi);adalah perintah untuk memberi warna pada objek yang dibuat.

2. lineStyle(nilai ketebalan garis,id warna,transparansi); untuk menentukan jenis garis.

3. moveTo(200,200); untuk mengarahkan bahwa gambar dimulai dari titik koordinat 200,200. Jika script ini tidak dituliskan maka gambar akan dimulai dari titik 0,0.

4. lineTo(300,400); untuk membuat garis dari koordinat 200,200 sampai koordinat 300,400.



35

BAGIAN 4 Membuat Media Pembelajaran

Membuat Game Aritmatika Sederhana Salah satu kemudahan dari pembuatan game matematika, khususnya operasi aljabar, adalah kita bisa meminta bantuan komputer untuk membuat soal secara otomatis dengan jumlah soal tidak terbatas atau bisa kita kendalikan sesuai dengan yang kita perlukan. Selain itu kita juga bisa memeriksa jawaban yang diberikan oleh user dengan mecocokkannnya dengan kunci jawaban yang kita buat kemudian memberi respon (benar/salah). Berikut ini dasar-dasar action script yang menjadi acuan pokok dalam pembuatan game aritmatika. Soal dengan Bilangan Bulat Positif Pembuatan soal yang dimaksud adalah mengambil bilangan secara acak dengan perintah random(x). X adalah bilangan bulat positif sehingga bilangan yang akan diacak adalah bilangan 0 sampi dengan x. Berikut langkah-langkah pembuatan soal: 1. Buatlah teks area menggunakan Teks Tool, pada properties pakailah Dynamic Teks.

Kemudian berilah nama bilangan1 pada kotak var di properties. Buatlah satu teks area lagi dan berilah nama variabel bilangan2.

2. Buatlah tombol SOAL dan berilah nama soal_tbl pada properties



36

3. Seleksi soal_tbl dan berilah action script pada kotak action seperti dibawah ini: on(release){ bilangan1=random(10); bilangan2=random(10); } 4. Cobalah lakukan Test Movie dengan menekan Shift+Enter. Penjelasan Script: Perintah bilangan1=random(10); berarti teks area dengan variabel bilangan1 akan diisi oleh bilangan bulat acak dari 0 sampai dengan 10. Soal Bilangan Bulat Negatif Operasi pada matematika tidak terbatas pada bilangan bulat positif saja. Berikut langkah untuk membuat soal bilangan bulat negatif: 1. Lakukan prosedur seperti pada pembuatan soal bilangan bulat positif. 2. Lakukan penambahan script pada soal_tbl seperti berikut ini: on(release){ bilangan1=random(10)*-1; bilangan2=random(10); } Penambahan script *-1 diatas berarti bilangan acak dari 0 sampai 10 akan dikalikan dengan bilangan -1 sehingga bilangan yang dihasilkan adalah bilangan bulat negatif -10 sampai dengan 0. Cobalah lakukan Test Movie. Memeriksa Jawaban User dan Memberi Respon Membuat Input Text Area dan Respon Sebelum jawaban user diperiksa, user harus memasukkan data sebagai jawaban atas soal yang diberikan. Oleh karena itu kita harus membuat teks area dengan input type. Ikuti langkah berikut:

1. Buatlah teks area dengan tipe input. Seleksi input teks area lalu berilah nama variabel jawaban pada kotak variabel.

2. Agar user hanya bisa memberikan masukan berupa angka, seleksi input teks area, pilih character. Cek only lalu pilih Numerals(0-9) dan isikan pada kota And These Character dengan tanda negatif (-), klik Done.



37

Perintah diatas berarti user hanya bisa memasukkan angka 0 sampai 9 dan tanda negatif (-).

3. Buatlah tombol untuk memeriksa jawaban user. Misalkan kita menggunakan tombol PERIKSA, berilah action script berikut:

4. Buatlah Dynamic Text Area dengan variabel respon yang akan digunakan sebagai kotak respon atas jawaban yang diberikan, lalu seleksi tombol PERIKSA dan berilah action sript seperti dibawah ini:

on(release){ if(bilangan1+bilangan2==jawaban){ respon="Benar"; }else{ respon="Salah"; } }

5. Lakukan Test Movie.

Penjelasan Script:

1. Script diatas menggunakan fungsi if dimana bilangan1+bilangan2==jawaban merupakan kondisi yang diberikan.



38

2. respon="Benar"; merupakan statement jika masukan pada input teks sesuai dengan kondisi sehingga dynamic teks area dengan variabel respon akan diisi dengan teks Benar.

3. Fungsi else {respon="Salah"; } merupakan merupakan statement jika masukan pada variabel jawaban tidak sesuai dengan kondisi.

Mengosongkan Input Text, Respon, dan Mengarahkan Kursor Langsung ke Kotak Jawaban Perhatikan Test Movie yang dihasilkan. Ketika anda meng-klik tombol PERIKSA, akan muncul respon benar/salah. Namun ketika anda meng-klik kembali tombol SOAL, angka pada kotak jawaban dan respon tidak hilang. Pada tombol soal_tbl lakukan penambahan perintah berikut: on(release){ bilangan1=random(10); bilangan2=random(10); Selection.setFocus(jawaban); jawaban=; respon=; } Membuat Animasi Interaktif Segitiga Desain yang dibuat adalah membuat tiga titik yang saling dihubungkan oleh garis. Ketika titik tersebut di drag maka garis yang menghubungkan juga akan mengikuti gerakan titik (dinamis). Ilustrasinya adalah sebagai berikut:

1. Buatlah Movie Clip berupa lingkaran kecil. Copy dan paste pada Frame yang sama sehingga jumlahnya menjadi tiga buah. Berilah nama pada masing-masing Movie Clip dengan nama mc_1, mc_2, dan mc_3.



39

2. Buat layer baru untuk mengisikan action script berikut:

function drag(){ mc_1.onPress=function(){

startDrag(mc_1,false); } mc_1.onRelease=function(){

stopDrag(); }

mc_2.onPress=function(){


stopDrag(); }

mc_3.onPress=function(){


stopDrag(); }

} function garis(){ clear(); beginFill (0x0000FF, 50); lineStyle(2,996600,100); moveTo(mc_2._x,mc_2._y);



40

lineTo(mc_1._x,mc_1._y); moveTo(mc_1._x,mc_1._y); lineTo(mc_3._x,mc_3._y); moveTo(mc_3._x,mc_3._y); lineTo(mc_1._x,mc_1._y); moveTo(mc_2._x,mc_2._y); lineTo(mc_3._x,mc_3._y); endFill(); } _root.onEnterFrame = function() { drag(); garis(); }

Penjelasan Script: 1. function drag(){ adalah script untuk membuat fungsi yang diberi nama drag(). 2. mc_1.onPress=function(){ startDrag(mc_1,false)}; untuk memberi

perintah ketika kursor ditekan diatas Movie Clip mc_1 maka mc_1 akan tertarik (drag). 3. mc_1.onPress=function(){ stopDrag()};untuk memberi perintah ketika mouse

dilepas maka drag akan berhenti. 4. _root.onEnterFrame = function(){

drag(); garis(); perintah diatas menunjukkan ketika movie dijalankan maka perintah dalam function drag() dan function garis() akan dijalankan.

Membuat Animasi Interaktif Diagram Kartesius

Sekarang kita akan membuat animasi diagram karetesius dengan desain:

1. Jika sebuah titik di drag maka disamping titik tersebut terdapat nilai koordinat (x,y) yang selalu berubah sesuai dengan posisi titik dalam bidang kartesius.

2. Dari sumbu x dan y akan dihubungkan garis yang tegak lurus yang akan berubah mengikuti poisisi titik dalam bidang kartesius.

3. Pada perpotongan antara garis penghubung titik dan sumbu x akan diberikan nilai yang menunjukkan nilai x titik tersebut, demikian pula pada perpotongan antara garis penghubung titik dengan sumbu y.

Berikut ilustrasi animasi yang akan kita buat:



41

Untuk membuatnya ikuti langkah berikut:

1. Gantilah nama layer 1 dengan nama sumbu x lalu buatlah garis horizontal menggunakan line tools. Seleksi garis tersebut kemudian atur posisinya pada y = 200.

2. Buat layer baru, ganti nama layer dengan sumbu y kemudian buatlah garis vertikal. Seleksi garis tersebut kemudian atur posisinya pada x = 275.

Seleksigarissumbuy,aturposisipadaposisix=275.Demikanjugauntukgarissumbux,seleksidanaturposisinyapaday=200.



42

3. Buat layer baru, berilah nama layer dengan nama titik kemudian pada Frame 1 buatlah Movie Clip menggunakan ovale tools dan berikan nama titik untuk Movie Clip tersebut.

4. Masuklah pada lembar kerja Movie Clip titik. Buatlah Dynamics Text dengan warna merah dan ukuran font 21 kemudian berikan nama untuk variable dengan nama teks. Disamping teks area tersebut berilah huruf P menggunakan static text dengan ukuran font 21 dan warna biru.

5. Keluarlah dari lembar kerja Movie Clip titik. Pada layer titik, buatlah Dynamic Text dengan ukuran 14 dan warna hitam. Berikan nama variable dengan x dan instance nama dengan nilai_x.

6. Seleksi Dynamic Text nilai_x, copy, dan paste pada Frame dan layer yang sama. Ubahlah nama variable dengan y dan instance name dengan nilai_y.

7. Buatlah layer baru dan berikan nama layer ini dengan nama script. Seleksi Frame 1 layer script kemudian buka lembar kerja Action Frame dan tuliskan script dibawah ini:

SeleksiDynamicTextarealaluisikanvariableinidenganteks.

SeleksiDynamicText

Berikaninstancenamenilai_x

Berikanvariablenamex



43

// Movie Clip titik menjadi dragable titik.onPress=function(){ startDrag("titik",true,30,30,500,350); } titik.onRelease=function(){ stopDrag(); } // membuat animasi _root.onEnterFrame=function(){ nilaix = titik._x-275; nilaiy = (titik._y-200)*-1; n1=Math.floor(nilaix); n2=Math.floor(nilaiy); titik.teks= "(" add n1 add "," add n2 add ")"; // membuat garis penghubung titik dengan sumbu x dan sumbu y clear(); lineStyle(1,996600,100); moveTo(titik._x,titik._y); lineTo(275,titik._y); moveTo(titik._x,titik._y); lineTo(titik._x,200); // mengisikan teks area yang berada pada sumbu x dan y x=n1; y=n2; nilai_x._x=titik._x nilai_x._y=200; nilai_y._x=275; nilai_y._y=titik._y; }

8. Lakukan Test Movie dengan menekan ctrl+Enter. Penjelasan Script:

1. Script yang diawali dengan tanda // berarti memberikan komentar. Tulisan yang berada setelah tanda tersebut tidak akan berpengaruh apapun terhadap program.

2. startDrag("titik",true,30,30,500,350); perintah ini untuk memberikan batasan wilayah drag dari titik. Ketentuan umum penulisan script ini adalah:



44

startDrag(nama Movie Clip,true,batas kiri, atas, kanan, bawah); berikut Ilustrasinya:

3. stopDrag(); yang diawali dengan onRelease berarti drag akan dihentikan ketika mouse dilepaskan.

4. nilaix = titik._x-275; untuk membuat nilai x=0 berada pada perpotongan sumbu x dan y.

5. nilaiy = (titik._y-200)*-1; untuk membuat nilai y=0 berada pada perpotongan sumbu y dan x serta membuat nilai y diatas sumbu x menjadi positif.

6. n1=Math.floor(nilaix); berarti Dynamic Text dengan variable n1 akan diisi dengan bilangan nilaix yang dibulatkan.

7. n2=Math.floor(nilaiy); berarti n1 merupakan bilangan yang sama dengan nilaiy yang dibulatkan.

8. titik.teks= "(" add n1 add "," add n2 add ")"; berarti n2 merupakan bilangan yang sama dengan nilaix yang dibulatkan.

9. x=n1; berarti Dynamic Text dengan nama variable x akan diisi dengan bilangan yang sama dengan n1 dan y=n2; berarti Dynamic Text dengan nama variable y akan diisi dengan bilangan yang sama dengan n2.

10. nilai_x._x=titik._x nilai_x._y=200;

Script di atas akan membuat Dynamic Text dengan instance nama nilai_x akan bergerak horizontal mengikuti posisi titik pada bidang kartesius.

Animasi Interaktif Pencerminan pada Bidang Kartesius Animasi ini merupakan pengembangan dari animasi titik pada bidang kartesius. Sesuai dengan konsep pencerminan titik pada transformasi geometri, animasi ini mencerminkan dua titik terhadap sumbu y. Berikut ini merupakan ilustrasi animasi pencerminan yang akan dibuat:



45

Jika titik (-24,14) atau titik (-15,4) diseret maka titik bayangan atas pencerminan terhadap sumbu y juga akan berubah sesuai dengan nilai pencerminannya. Sebelum mulai membuat animasi ini alangkah baiknya dipahami terlebih dahulu konsep pencerminan berikut:

Jika titik P yang memiliki posisi koordinat (x,y) dicerminkan terhadap garis y = h maka posisi bayangannya akan berada pada titik (2h-x,y). Konsep ini yang akan dipakai untuk membuat animasi pencerminan.



46

Membuat Titik dan Bidang Kartesius 1. buatlah bidang kartesius:

- Sumbu x pada layer 1 yang sudah dirubah namanya menjadi sumbu x. - Sumbu y pada layer 2 yang sudah dirubah namanya menjadi sumbu y.

2. Posisikan garis sumbu y pada koordinat x = 275 dan garis sumbu x pada koordinat y = 200.

3. Buatlah layer baru untuk membuat Movie Clip titik. Masuklah pada Movie Clip titik yang sudah dibuat dan buatlah menjadi seperti tampilan dibawah ini:

4. Keluar dari lembar kerja Movie Clip titik dan gandakan Movie Clip titik menjadi 4, pada instance name berilah nama masing-masing dengan titik1, titik2, titik3, dan titik4.

5. Buatlah 4 buah Dynamic Text Box dengan desain sebagai berikut: - Dynamic Text Box 1 : instance name = nilai_x1, variable name = x1 - Dynamic Text Box 2 : instance name = nilai_y1, variable name = y1 - Dynamic Text Box 3 : instance name = nilai_x2, variable name = x2 - Dynamic Text Box 4 : instance name = nilai_y2, variable name = y2

Membuat Script Buatlah layer baru untuk menuliskan script berikut: titik1.onPress=function(){ startDrag("titik1",true,30,30,500,350); } titik1.onRelease=function(){ stopDrag();

Koordinatuntuksumbuy

Koordinatuntuksumbux,seleksigarissumbuxdanubahnilaiyinimenjadi200.

DynamicTextdengannamavariableteks.



47

} titik2.onPress=function(){ startDrag("titik2",true,30,30,500,350); } titik2.onRelease=function(){ stopDrag(); } // interaktif _root.onEnterFrame=function(){ nilaix1 = titik1._x-275; nilaiy1 = (titik1._y-200)*-1; nilaix2 = titik2._x-275; nilaiy2 = (titik2._y-200)*-1; titik3._x=(2*275)-titik1._x; titik3._y=titik1._y; titik4._x=(2*275)-titik2._x; titik4._y=titik2._y; n1=Math.floor(nilaix1/10); n2=Math.floor(nilaiy1/10); m1=Math.floor(nilaix2/10); m2=Math.floor(nilaiy2/10); titik1.teks= "(" add n1 add "," add n2 add ")"; titik2.teks= "(" add m1 add "," add m2 add ")"; clear(); lineStyle(1,996600,100); beginFill (0x0000FF, 25); moveTo(titik1._x,titik1._y); lineTo(titik2._x,titik2._y); lineTo(titik4._x,titik4._y); lineTo(titik3._x,titik3._y); lineTo(titik1._x,titik1._y); moveTo(titik1._x,titik1._y); lineTo(titik1._x,200); moveTo(titik2._x,titik2._y); lineTo(titik2._x,200); moveTo(titik3._x,titik3._y); lineTo(titik3._x,200);



48

moveTo(titik4._x,titik4._y); lineTo(titik4._x,200); endFill(); x1=n1; y1=n2; x2=m1; y2=m2; nilai_x1._x=titik1._x nilai_x1._y=200; nilai_y1._x=275; nilai_y1._y=titik1._y; nilai_x2._x=titik2._x nilai_x2._y=200; nilai_y2._x=275; nilai_y2._y=titik2._y; }

Berikut ini tampilan desain layer secara keseluruhan pada lembar kerja utama:

Penjelasan Script:

nilaix1 = titik1._x-275; nilaiy1 = (titik1._y-200)*-1; nilaix2 = titik2._x-275; nilaiy2 = (titik2._y-200)*-1;

Script diatas adalah untuk membuat nilai koordinat perpotongan sumbu x dan sumbu y menjadi (0,0).

titik3._x=(2*275)-titik1._x; titik3._y=titik1._y; titik4._x=(2*275)-titik2._x; titik4._y=titik2._y



49

Script diatas adalah untuk mendefinisikan posisi titik3 dan titik4 yang merupakan bayangan dari Movie Clip titik1 dan Movie Clip titik2 yang dragable (bisa didrag). Titik3 merupakan bayangan dari titik1, titik4 merupakan bayangan dari titik2. Seperti pada rumus pencerminan yang sudah disampaian diawal, rumus pada script diatas akan mencerminkan titik1 dan titik 2 oleh koordinat x = 175.

n1=Math.floor(nilaix1/10); n2=Math.floor(nilaiy1/10); m1=Math.floor(nilaix2/10); m2=Math.floor(nilaiy2/10);

Script Math.floor(bilangan) adalah untuk melakukan pembulatan bilangan menjadi bilangan

bulat. Misalnya 0,97567 akan dibulatkan menjadi 1.

titik1.teks= "(" add n1 add "," add n2 add ")"; titik2.teks= "(" add m1 add "," add m2 add ")";

Script di atas akan mengisi Dynamic Text Box di dalam Movie Clip titik dengan teks : ( nilai n1, nilai n2). Sebagai latihan, buatlah script untuk mengisi Dynamic Text Box di dalam Movie Clip titik3 dan titik4!

clear(); lineStyle(1,996600,100); beginFill (0x0000FF, 25); moveTo(titik1._x,titik1._y); lineTo(titik2._x,titik2._y); lineTo(titik4._x,titik4._y); lineTo(titik3._x,titik3._y); lineTo(titik1._x,titik1._y);

Script di atas akan membuat garis penghubung dengan ketebalan 1px dan warna 996600 (merupakan kode) antara Movie Clip titik1, titik2, titik3, dan titik4 kemudian memberi warna dengan nilai transparasi 25% pada daerah yang dibatasi oleh keempat titik tersebut. Kode warna bisa dilihat pada jendela Color Mixer.



50

moveTo(titik1._x,titik1._y); lineTo(titik1._x,200);

Script di atas akan membuat garis dari Movie Clip titik1 ke garis sumbu y.





x1=n1; y1=n2; x2=m1; y2=m2;

Script di atas akan mengisi Dynamic Text Box dengan nama variable x1 dengan bilangan n1, y1 dengan bilangan n2, x2 dengan bilangan m1, y2 dengan bilangan m2.

nilai_x1._x=titik1._x nilai_x1._y=200; nilai_y1._x=275; nilai_y1._y=titik1._y; nilai_x2._x=titik2._x nilai_x2._y=200; nilai_y2._x=275; nilai_y2._y=titik2._y;

Script di atas menentukan posisi Dynamic Text Box dengan Instance Name nilai_x1 selalu berada pada sumbu y dan bergerak dinamis sesuai dengan posisi Movie Clip titik1. Demikian juga dengan Dynamic Text Box dengan Instance Name nilai_y1, nilai_x2, dan nilai_y2 yang akan bergerak dinamis sesuai dengan Movie Clip titik yang bersesuaian. Animasi Sudut Elevasi Animasi ini bisa digunakan untuk menjelaskan konsep penerapan aturan sin, cos, dan tangent pada segitiga siku-siku. Desain yang akan kita buat adalah jika gambar kartun diseret maka garis yang menghubungkan pandangan dan puncak gedung secara dinamis akan mengikuti. Berikut ini ilustrasi animasi yang akan dibuat:



51


1. Movie Clip gambar kartun dan berikan nama kartun pada Movie Clip tersebut. 2. Didalam Movie Clip kartun, buatlah Static Text Sudut Elevasi didepan mata karakter

kartun. 3. Keluarlah dari lembar kerja Movie Clip kartun dan buatlah layer baru untuk menggambar

gedung. 4. Buatlah Movie Clip titik_menara dan tempatkan di puncak gedung.

5. Buat layer baru dan pada frame 1 tuliskan script berikut:

kartun.onPress=function(){

startDrag("kartun",true,200,335,550,335); } kartun.onRelease=function(){

stopDrag(); } _root.onEnterFrame=function(){ clear(); lineStyle(1,996600,100); moveTo(kartun._x,kartun._y-35); lineTo(titik_menara._x,titik_menara._y); moveTo(kartun._x,kartun._y-35);

MovieCliptitik_menara



52

lineTo(titik_menara._x,kartun._y-35); }

6. Script startDrag("kartun",true,200,335,550,335); akan membatasi

dragging kartun hanya arah horizontal saja. Animasi Lempar Dadu Animasi lempar dadu didesain sebagai media pembelajaran matematika pada pokok bahasan peluang. Berikut ini ilustrasi animasi lempar dadu yang akan kita buat:

Jika tombol lempar dadu ditekan maka kedua dadu akan terlempar dan jumlah mata dadu secara acak akan muncul ketika pelemparan selesai. Sehingga untuk setiap pelemparan masing-masing mata dadu memiliki peluang yang sama untuk muncul. Membuat Movie Clip Dadu

1. Buatlah bentuk kubus dan convert menjadi Movie Clip. 2. Masuk pada lembar kerja Movie Clip dan tampilkan gambar kubus sampai frame 20. 3. Buat layer baru untuk menggambar mata dadu. Pada masing-masing frame buatlah

gambar mata dadu misalnya frame 1 untuk mata dadu 1, frame 2 untuk mata dadu 2, dan seterusnya berulang-ulang sampai frame 20.



53

4. Pada frame 1, isikan script berikut: stop();

5. Buat layer baru dan Copy Movie Clip dadu menjadi dua, masing-masing diberikan nama

dadu1 dan dadu2 pada Instance Name. Letakkan Movie Clip dadu1 pada layer dadu1 dan Movie Clip dadu2 pada layer dadu2.

6. Buatlah animasi Motion Tween untuk dadu1 dan dadu2 sehingga nampak seperti dadu yang dilempar. Gambar di atas adalah contoh desain frame untuk animasi lemparan Movie Clip dadu1 dan dadu2.

Membuat Latar dan Menganimasikannya

1. Buatlah layer baru pada lembar kerja utama. 2. Buat gambar latar kemudian Convert menjadi Graphic.



54

3. Animasikan gambar latar dengan posisi frame 1 seperti pada gambar diatas, posisi dua seperti pada gambar dibawah, dan posisi tiga sama dengan posisi satu.

4. Pada frame 1 tuliskan script berikut: stop();

Pada frame terakhir lakukan hal berikut: - Berikan efek suara dai windows >> common libraries >> sounds sehingga ketika

dadu jatuh akan muncul suara.

Gambarlatarpadaposisi1





55

- Tuliskan script berikut: n=random(19)+1; m=random(19)+1; dadu1.gotoAndStop(n); dadu2.gotoAndStop(m); Ketika animasi sampai pada frame terakhir maka perintah pada script di atas akan dijalankan yaitu mengarahkan animasi di dalam Movie Clip dadu secara acak ke frame tertentu (1 sd 20).

Membuat Tombol Lemparan 1. Buatlah layer baru dan pada frame 1 isikan sebuah tombol dari windows >> common

libraries >> button. 2. Pada tombol, isikan script berikut:

on(release){ gotoAndPlay(2); dadu1.gotoAndPlay(2); dadu2.gotoAndPlay(2); }

Script diatas akan menjalankan animasi pada lembar kerja utama dari frame 2 sampai frame terakhir. Ketika animasi sampai pada frame terakhir, maka script yang sudah dipasang pada frame terakhir akan dijalankan sehingga jumlah mata dadu akan dimunculkan secara acak. Desain layer secara keseluruhan tampak seperti berikut ini:

Animasi Lempar Koin Cara untuk membuat animasi koin pada prinsipnya sama dengan cara membuat animasi dadu di atas. Kita hanya perlu merubah Movie Clip dadu yang berisi animasi acak dadu menjadi Movie Clip yang berisi animasi acak koin serta merubah action script pada frame terakhir. Ilustrasi animasi lempar koin adalah sebagai berikut:



56

Ketika tombol lempar koin ditekan maka kedua koin akan terlempar ke atas kemudian jatuh ditempat semula dengan kemungkinan mucul warna kuning atau merah. Membuat Movie Clip Koin

1. Buatlah Movie Clip koin menggunakan Ovale Tool. 2. Masuk kedalam lembar kerja Movie Clip koin dan buat gambar kon dengan desain

tampilan sebagai berikut:

3. Gandakan frame 1 sd 6 sehingga animasi akan tampak sampai dengan Frame 22.



57

4. Desain frame secara keseluruhan akan tampak seperti berikut:

Pada frame 1, isikan dengan script berikut: stop();

5. Penting! Catatlah nomor frame dimana tampilan koinnya seperti pada gambar 1 dan 4. Misalnya kita dapatkan nomor frame tersebut adalah : 1, 4, 7, 10, 13, 16, 19, dan 22.

6. Keluarlah dari lembar kerja Movie Clip Koin. Membuat Animasi Lempar Koin

1. Gandakan Movie Clip koin menjadi dua, masing-masing isikan nama pada Instance Name dengan koin1 dan koin2.

2. Letakkan Movie Clip koin1 pada layer koin 1, dan Movie Clip koin2 pada layer koin 2. 3. Animasikan Movie Clip koin1 dan koin2 menggunakan Motion Tween sehingga Nampak

seperti koin yang terlembar ke atas. Perhatikan desain layer berikut:

Blokframeyangakandicopy.

CopyFramesdanPasteFramespadaframeyangmasihkosong.



58

4. Posisi awal dan poisisi akhir untuk masing-masing animasi harus sama sehingga ketika dijalankan koin akan terjatuh persis seperti koin di atas papan.

5. Buatlah layer baru untuk membuat animasi latar belakang dengan cara yang sama dengan ketika membuat gambar latar pada animasi lempar dadu. Akan tetapi pada frame terahir isikan dengan script berikut: stop(); koin=new Array(); koin[0] = 1; koin[1] = 4; koin[2] = 7; koin[3] = 10; koin[4] = 13; koin[5] = 16; koin[6] = 19; koin[7] = 22; n=random(7); m=random(7); koin1.gotoAndStop(koin[n]); koin2.gotoAndStop(koin[m]);

6. Buatlah layer baru untuk memasang tombol. Pada tombol, isikan script berikut: on(release){

Frameuntukmengisikanscriptdanefeksuara.Ambillahefeksuarayangsesuaipadawindows>>commonlibraries>>soundssehinggamuncultampilandibawahini,laludragkelembarkerja.Tuliskan

scriptstop();



59

gotoAndPlay(2); koin1.gotoAndPlay(2); koin2.gotoAndPlay(2); }

7. Desain layer pada lembar kerja utama akan tampak seperti gambar berikut:

8. Lakukan Test Movie untuk melihat hasilnya. Membuat Peta Digital Desain peta digital yang akan kita buat adalah jika kursor diarahkan diatas pulau maka pulau tersebut akan terlihat menyala dan ketika mouse diklik maka deskripsi tentang pulau yang dimaksud akan muncul secara gradasi. Berikut ilustrasinya:


1. Ubahlah nama layer 1 dengan nama peta. Seleksi Frame 1 dan kemudian pilih File >> Import untuk mengambil gambar peta.

2. Aturlah ukuran peta menggunakan Free Transform Tools sehingga sesuai.



60

3. Buat layer baru dan berikan nama deskripsi. Seleksi Frame 1 dan buatlah gambar menggunakan Pen Tools sehingga gambar tersebut mirip dengan pulau Kalimantan. Berilah warna kuning pada gambar tersebut.

4. Hapus garis tepi pada gambar Kalimantan. Seleksi gambar Kalimantan dan buatlah menjadi Movie Clip kemudian berikan nama Kalimantan pada Instance Name.

5. Masuk pada lembar kerja Movie Clip Kalimantan. Ubahlah nama layer menjadi back kemudian buatlah animasi menggunakan Shape Motion sehingga tampak seperti berikut:

6. Buatlah layer baru dan berilah nama layer dengan teks. Seleksi Frame 10 dan lakukan insert Blank Key Frame. Buatlah Teks judul dan isi mengenai pulai Kalimantan menggunakan Static Text. Tampilan pada Time Line akan seperti berikut:

7. Buatlah layer baru dan berilah nama tombol. Seleksi Frame 1 pada layer back kemudian klik kanan pada gambar pulau Kalimantan lalu pilih Copy. Seleksi Frame 1 pada layer tombol lalu klik kanan pada sembarang lembar kerja kemudian pilih Paste in Place.

8. Ubahlah gambar pulau Kalimantan pada layer tombol menjadi Button. 9. Masuk pada lembar kerja Button pulau Kalimantan. Lakukan Insert Key Frame pada

Frame Over dan ubahlah nilai transparansinya menjadi 50%. Sehingga ketika kursor berada diatas pulau Kalimantan akan terlihat menyala.

10. Keluar dari lembar kerja Button pulau Kalimantan. Seleksi Button pulau Kalimantan dan berilah script berikut: on(release){ gotoAndPlay(2); }

BerisigambarpulauKalimantandengantransparansi0%.PadaFrameiniisikanscriptstop();

Berisigambarkotakdengantransparansi100%yangakandigunakansebagaibackgroundteksdeskripsi.PadaFrameiniisikanscripstop();

Berisigambarkotakdengantransparansi0%sehinggagambarkotakakanmenghilang



61

11. Insert Blank Key Frame pada Frame 10 layer tombol dan buatlah tombol keluar. Berikan script berikut pada tombol keluar: on(release){ gotoAndPlay(11); }

12. Keluarlah dari lembar kerja Movie Clip Kalimantan dan lakukan Test Movie. Membuat Animasi Interaktif Bola Jatuh Desain yang animasi yang akan kita buat adalah jika bola di drag kemudian dilepaskan maka bola tersebut akan jatuh. Ilustrasi animasi tersebut adalah:


1. Ubahlah nama layer 1 dengan nama bola lalu buat Movie Clip bola pada Frame 1. Berilah nama Movie Clip dengan nama bola.

Tombolkeluar

PerhatikanFramedanLayerpadaTimeLine!



62

2. Pada layer bola Frame 1 buatlah Dynamic Text dengan nama variable n. 3. Buat layer baru dan berilah nama script. Pada Frame 1 isikan script berikut:

bola.onPress=function(){ startDrag("bola",true); n=0; } bola.onRelease=function(){ stopDrag(); n=1; } _root.onEnterFrame=function(){ m++; if(n==0){ bola._y+=0; } if(n==1){ bola._y+=1*m; } if(bola._y>350){ bola._y=350; m=0; } }

4. Buatlah layer baru dan beri nama garis. Posisikan garis sedemikian rupa sehingga ketika bola jatuh dan berhenti tepat berada pada garis.

5. Lakukan Test Movie. Memberi Efek Suara Ketika Bola Jatuh Untuk memperbagus animasi, kita akan membuat efek suara ketika bola jatuh mengenai garis. Ikuti langkah berikut: 1. Masuklah pada Movie Clip bola. 2. Buat layer dan ubahlah nama layer menjadi suara. 3. Pada Frame 1 layer suara isikan script berikut:

stop();



63

4. Pada Frame 2 layer suara isikah sound dengan cara: - Seleksi Frame 2 layer suara - Pilih windows >> Common Libraries >> Sounds - Drag kedalam lembar kerja.

5. Keluar dari lembar kerja Movie Clip bola. Tambahkan script seperti pada bagian yang ditebalkan.

_root.onEnterFrame=function(){ m++; if(n==0){ bola._y+=0; _root.bola.gotoAndStop(1); } if(n==1){ bola._y+=1*m; } if(bola._y>350){ bola._y=350; _root.bola.gotoAndStop(2); m=0; } }

Membuat Animasi Interaktif Termometer Desain animasi thermometer yang akan kita buat adalah :

1. Jika tombol suhu naik ditekan maka air raksa dalam thermometer akan naik. 2. Jika tombol suhu turun ditekan maka air raksa dalam thermometer akan turun.

Berikut ilustrasi animasi thermometer:

Frameyangberisisuara

Frameyangdiisiscriptstop();



64


1. Ubahlah nama layer 1 menjadi termo dan buat gambar thermometer. Pada tahap ini gambarlah bagian pokoknya saja. Kita akan melengkapi gambar thermometer didalam lembar kerja Movie Clip.

2. Ubahlah gambar tersebut menjadi Movie Clip dan berilah nama pada Instance Name dengan termo.

3. Masuklah pada lembar kerja Movie Clip termo dan lengkapi gambar termometernya. Perhatikan desain layer dalam Movie Clip termo berikut:

- Layer batang berisi gambar dasar thermometer. - Layer skala berisi angka-angka yang kita gunakan sebagai skala. - Layer raksa berisi gambar raksa berwarna merah.



65

Gambar keseluruhan tampak seperti berikut ini:

4. Buatlah layer baru dan berilah nama mask. Pada Frame 1 buatlah Movie Clip dan

berilah nama derajat.

5. Klik kanan pada layer mask dan pilih mask.

Layerbaru

MovieClipdengannamaderajat.



66

6. Keluar dari lembar kerja Movie Clip. Buatlah layer baru dan berilah nama tombol. 7. Pada Frame 1 layer tombol buatlah dua buah tombol.

8. Pada tombol naik, isikan script berikut:

on(release){ _root.termo.derajat._height+=10; } Script diatas berarti ketika tombol diklik, Movie Clip derajat yang berada di dalam Movie Clip termo akan bertambah secara vertical.

9. Pada tombol turun, isikan script berikut: on(release){ _root.termo.derajat._height-=10; }

Script diatas berarti ketika tombol diklik, Movie Clip derajat yang berada di dalam Movie Clip termo akan berkurang secara vertical.

Atas:tombolnaik

Bawah:tombolturun



67

Membuat Animasi Interaktif Mobil Berjalan Desain animasi yang akan kita buat adalah:

1. Jika tombol arah kanan ditekan terus menerus maka mobil akan berjalan semakin cepat dan jika dilepaskan maka gerakan mobil akan semakin lambat dan akhirnya berhenti.

2. Jika mobil berjalan maka asap dari knalpot akan mengepul. 3. Jika ditekan tombol Reset maka mobil akan kembali pada posisi awal.

Berikut ilustrasi animasi yang akan dibuat:


1. Buatlah Movie Clip mobil. 2. Masuk pada lembar kerja Movie Clip mobil dan buatlah Movie Clip yang berisi animasi

asap menggunakan Ovale Tool denga warna gradasi radial. Ingat, buat transparansi warna luarnya menjadi 0% agar Nampak seperti asap. Berilah nama Movie Clip animasi asap tersebut dengan asap.

Gambar di atas merupakan desain Frame didalam Movie Clip asap. Pada Frame 1 berikan nilai Alpha 100% agar animasi asap Nampak menghilang.



68

3. Keluarlah dari lembar kerja Movie Clip mobil. Seleksi Movie Clip mobil dan tuliskan script berikut: onClipEvent(enterFrame){ if (Key.isDown(Key.RIGHT)) { speedx+=Math.sin(Math.PI/180); asap._visible=true; }else{ speedx*=.8; asap._visible=false; } _x+=10*speedx; }

4. Buatlah layer baru pada lembar kerja utama dan berilah nama reset. Masukkan Componen Push Button pada Frame 1 dengan cara menariknya dari kotak dialog Components.

5. Seleksi PushButton dan pada Properties ubahlan teks didalam tombol dengan nama Reset.

6. Pada tombol reset, isikan script berikut:



69

on(release){ _root.mobil._x=10; _root.mobil._y=150; } Scipt di atas akan memerintahkan Movie Clip mobil pada posisi x=10 dan y=150. Anda bisa menyesuaikan nilai x dan y sedemikian rupa sehingga posisi mobil tepat berada pada lintasan.

7. Lakukan Test Movie. Penjelasan Script:

if (Key.isDown(Key.RIGHT)) { speedx+=Math.sin(Math.PI/180); asap._visible=true; }

Script di atas akan memberikan nilai untuk speedx yang semakin bertambah besar dan membuat Movie Clip asap akan aktif ketika tombola rah kanan pada Keyboar ditekan.

}else{ speedx*=.8; asap._visible=false; }

Script di atas merupakan perintah yang diberikan jika tombol arah kanan tidak ditekan yaitu nilai speedx akan dikalikan dengan bilangan 0.8 yang menyebabkan gerakan mobil akan melambat dan akhirnya berhenti. _x+=10*speedx; Scrip diatas memerintahkan Movie Clip mobil akan bergerak ke kanan sesuai dengan nilai speedx yang didapatkan. Membuat Animasi Interaktif Kecepatan Mobil Desain animasi yang akan kita buat adalah:

1. Jika tombol arah kanan pada Keyboard ditekan terus menerus maka mobil akan Nampak berjalan dengan gerakan yang semakin cepat (Gerak Lurus Berubah Beraturan Dipercepat).

2. Dalam animasi juga akan disajikan waktu tempuh dan jarak tempuhnya.



70

Ilustrasi animasi tersebut adalah:

Untuk membuatnya, ikuti langkah berikut:

1. Buka kembali file mobil berjalan.fla yang sudah kita buat sebelumnya. 2. Hapus script yang berada didalam Movie Clip mobil. 3. Buat layer baru, pada Frame 1 buatlah Movie Clip yang berisi layar latar belakang.

Berilah nama Movie Clip ini dengan nama layar. 4. Masuk pada lembar kerja Movie Clip layar dan sempurnakan gambar layar yakni

gambar rumah dan awan. Ingat, hanya gambar rumah dan awan sedangkan warna background kita buat di lembar kerja utama. Pada Movie Clip layar isikan script berikut:

onClipEvent(enterFrame){ if (Key.isDown(Key.RIGHT)) { speedx+=Math.sin(Math.PI/180); _parent.mobil.asap._visible=true; _parent.mobil.gotoAndPlay(2); _root.detik+=1; if(_root.detik==59){ _root.detik=0; _root.menit+=1; } _root.km=0.8*speedx; }else{ speedx*=.8; _parent.mobil.asap._visible=false; _parent.mobil.gotoAndPlay(6); }



71

_x-=10*speedx; if(_x



72

Animasi Interaktif Rangkaian Seri Pada rangkaian seri, jika saklar dimatikan maka jalur itu akan terputus dan lampu yang berada pada jalur itu akan mati. Berikut ilustrasi animasinya:

Posisi kedua saklar harus dalam keadaan ON agar kedua lampu menyala. Berikut prosedur untuk membuatnya: Membuat Animasi Saklar :

1. Buatlah Movie Clip berupa gambar kotak, masuklah kedalam lembar kerja Movie Clip. 2. Pada lembar kerja Movie Clip buatlah empat layer:

- Layer pertama untuk background saklar. - Layer kedua untuk gambar saklar.

Pada Frame 1 buatlah gambar berikut:



73

Pada Frame 2 buatlah gambar berikut:

- Layer ketiga untuk menuliskan scrip dan efek suara. Pada Frame 1 tuliskan script berikut: i=0; stop(); kemudian masukkan efek suara dari windows >> common libraries >> sounds. Pada Frame 2 tuliskan script berikut: i=0; stop(); kemudian masukkan efek suara dari windows >> common libraries >> sounds.

- Layer keempat untuk membuat tombol: Pada Frame 1 buatlah dua buah tombol berupa kotak transparan dengan cara menggambar terlebih dahulu bentuk kotak, hilangkan garis tepinya, kemudian nilai transparansi Fill-nya dirubah menjadi 0%. Setelah menjadi transparan, convert menjadi Button.



74

Letakkan tombol tersebut pada posisi atas saklar dan bawah saklar.

3. Desain layer pada Movie Clip saklar secara keseluruhan akan tampak seperti berikut:

Padatombol,tuliskanscript:

on(release){ gotoAndStop(2); }

Padatombol,tuliskanscript:

on(release){ gotoAndStop(1); }



75

4. Keluarlah dari lembar kerja Movie Clip saklar dan lakukan Test Movie. Membuat Movie Clip Lampu:

1. Pada lembar kerja utama, buatlah Movie Clip dengan nama lampu. 2. Masuk pada lembar kerja Movie Clip lampu dan buatlah layer baru dengan nama

nyala. Kosongkan frame 1, pada frame 2 isilah dengan gambar nyala lampu menggunakan ovale tools. Berilah warna gradasi (warna dalam kuning, warna luar alpha 0%).

3. Pada frame 1 layer lampu isikan dengan script berikut:

stop();

Membuat Rangkaian 1. Copy Movie Clip Saklar menjadi dua buah. Berilah Instance Name masing-masing

saklar1 dan saklar2. 2. Copy Movie Clip lampu menjadi dua buah, berilah Instance Name masing-masing

lampu1 dan lampu2. 3. Susun rangkaian sehingga menjadi seperti berikut ini:



76

4. Pada lembar kerja utama, buatlah layer baru untuk mengisikan script. Pada frame 1 isikan script berikut: _root.onEnterFrame=function(){ if((saklar1.i==1)&&(saklar2.i==1)){ _root.lampu1.gotoAndStop(2); _root.lampu2.gotoAndStop(2); } else{ _root.lampu1.gotoAndStop(1); _root.lampu2.gotoAndStop(1); } } Script diatas memakai logika DAN sehingga perintah: _root.lampu1.gotoAndStop(2); _root.lampu2.gotoAndStop(2); Akan dijalankan jika kedua syarat yang diberikan terpenuhi yaitu kedua saklar harus dalam keadaan ON (bernilai i = 1).

Lampu1

Lampu2

Saklar1

Saklar2



77

Animasi Interaktif Rangkaian Paralel Desain yang akan kita buat tampak pada ilustrasi berikut:


1. Buka kembali file rangkaian seri.fla dan susunlah saklar dan lampu sehingga menjadi seperti pada gamabar dibawah ini:

2. Ubahlah script pada layer script menjadi seperti berikut ini: _root.onEnterFrame=function(){ if((saklar1.i==1)&&(saklar3.i==1)){ _root.lampu1.gotoAndStop(2); }

Lampu1

Lampu2

Saklar1

Saklar2

Saklar3

NamapadaInstanceName



78

else { _root.lampu1.gotoAndStop(1); } if((saklar2.i==1)&&(saklar3.i==1)){ _root.lampu2.gotoAndStop(2); } else{ _root.lampu2.gotoAndStop(1); } }

3. Lakukan Test Movie untuk melihat hasilnya.



79

BAGIAN 5 Membuat Program Aplikasi Pembelajaran

Pada bagian ini kita akan merancang program aplikasi pembelajaran interaktif berdasarkan animasi-animasi yang sudah dibuat pada bagian sebelumnya. Rancangan yang akan dibuat adalah seperti tampak pada ilustrasi berikut ini:

Menu utama yang digunakan adalah model Drop Down yaitu jika kursor diarahkan ke tombol Pilih Materi maka menu akan turun. Jika salah satu menu dipilih maka file Flash Movie (nama file.swf) akan dipanggil dan dijalankan di halaman utama diatas.

Gambar di atas merupakan ilustrasi bahwa Flash Movie yang dipanggil akan dimasukkan didalam Movie Clip pada halaman Flash Movie utama. Script yang digunakan untuk melakukan pemanggilan Flash Movie ada dua, yaitu:



80

loadMovie(nama file.swf,target); Script di atas digunakan untuk melakukan pemanggilan flash movie kemudian dimasukkan didalam target tertentu (Movie Clip). loadMovieNum(nama file.swf,level); Script diatas digunakan untuk melakukan pemanggilan Flash Movie namun dimasukkan langsung kedalam Flash Movie utama. Jika level = 0 maka file flash utama akan digantikan dengan file yang dipanggil, jika level 1 maka file yang dipanggil akan menindih file Flash Movie utama. Sebelum mulai membuat aplikasi, siapkan file Flash Movie melalui Windows Explorer sebagai berikut:

Membuat Menu Utama Desain menu utama yang akan dibuat adalah:



81

Bagan di atas menunjukkan bahwa didalam lembar kerja utama terdapat dua buah Movie Clip yaitu Movie Clip dengan nama mainmenu, wadah, dan transisi. Di dalam Movie Clip mainmenu terdapat tombol tbl_mainmenu dan Movie Clip drop. Didalam Movie Clip drop terdapat tombol tbl_menu. Membuat Movie Clip wadah

1. Buatlah Movie Clip kosong dengan cara: - Buatlah objek kotak, ubah menjadi Movie Clip, isikan nama pada Instance Name

dengan wadah. - Masuk pada lembar kerja dan hapus gambar kotak tersebut.

2. Keluarlah dari lembar kerja Movie Clip wadah, posisikan Movie Clip wadah pada posisi berikut:

3. Aturlah warna Background lembar kerja utama pada properties:

Membuat Movie Clip transisi

1. Buatlah kotak yang memenuhi lembar kerja utama. 2. Ubah menjadi Movie Clip, berikan nama transisi pada kotak Instance Name. 3. Masuklah kedalam lembar kerja Movie Clip transisi, buat animasi seperti berikut:

4. Frame 1 berisi kotak yang memenuhi lembar kerja dengan warna gelap.

PosisiMovieClipwadah



82

5. Lakukan Insert Key Frame pada layer 10, ubah warna kotak menjadi transparan (atur alpha menjadi 0%).

6. Pada frame 10 tuliskan script stop();

Membuat Movie Clip mainmenu, Movie Clip drop, Tombol tbl_mainmenu dan Tombol tbl_menu

1. Buatlah Movie Clip dengan nama mainmenu dan posisikan ditempat yang sesuai (misalnya di pojok kiri atas).

2. Buatlah tombol transparan dan berikan nama pada instance name dengan tbl_mainmenu. Posisikan tbl_mainmenu diatas Pilih Materi. Cara membuat tombol transparan adalah: - Buatlah kotak dengan warna apapun. - Ubah menjadi Button dan masuklah kedalam lembar kerja tombol. - Seleksi gambar tombol dan atur alpha pada kotak dialog Color Mixer menjadi

0%.

3. Buatlah layer baru untuk membuat Movie Clip dengan nama drop dan posisikan diatas tombol tbl_mainmenu.

4. Masuklah kedalam lembar kerja Movie Clip drop dan buatlah sedemikian rupa sehingga menjadi tampak seperti berikut:



83

5. Jika sudah tampak seperti diatas, kita akan membuat sebuah tombol untuk ditempatkan diatas teks. Agar lebih menarik, tombol yang akan kita buat adalah jika kursor diletakkan diatas teks maka animasi tombol (didalam Movie Clip) akan berjalan. Untuk membuatnya ikuti langkah berikut: - Buatlah sebuah kotak dan ubahlah menjadi Button. - Masuk pada lembar kerja Button, seleksi gambar kotak, atur alpha menjadi 0%. - Tampilkan kotak transparan pada frame Up, Over, dan Down.

- Buatlah layer baru lalu berikan nama layer dengan animasi. Copy frame Over pada layer kotak dan paste di frame over pada layer baru.

- Ubahlah objek kotak pada frame Over layer animasi menjadi Movie Clip. - Masuklah pada lembar kerja Movie Clip, buatlah animasi sehingga tampak

seperti sebuah garis yang berubah menjadi kotak.



84

- Pada frame posisi akhir, tuliskan script stop(); 6. Tombol animasi sudah jadi, masuklah pada lembar kerja Movie Clip drop. 7. Gandakan tombol transparan animasi sejumlah teks yang ada. Tempatkan tombol

tersebut diatas teks. 8. Pada masing-masing tombol, tuliskan script berikut:

- Tombol di atas Segitiga Interaktif:

on(release){ _parent.gotoAndPlay(11); _parent.nav="Segitiga Interaktif"; loadMovie("segitiga.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Koordinat Kartesius: on(release){ _parent.gotoAndPlay(11); _parent.nav="koordinat Kartesius";

loadMovie("koordinat kartesius.swf",_parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Lempar Dadu: on(release){ _parent.gotoAndPlay(11); _parent.nav="Lempar Dadu"; loadMovie("lempar dadu.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Lempar Koin: on(release){ _parent.gotoAndPlay(11); _parent.nav="Lempar Koin"; loadMovie("lempar koin.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

Posisiawal:

Posisiakhir:



85

- Tombol di atas Pencerminan:

on(release){ _parent.gotoAndPlay(11); _parent.nav="Pencerminan"; loadMovie("pencerminan.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Sudut Elevasi: on(release){ _parent.gotoAndPlay(11); _parent.nav="Sudut Elevasi"; loadMovie("sudut elevasi.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Termometer: on(release){ _parent.gotoAndPlay(11); _parent.nav="Termometer"; _root.loadMovie("termometer.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Gerak Mobil dipercepat: on(release){ _parent.gotoAndPlay(11); _parent.nav="Gerak Mobil Dipercepat"; _root.loadMovie("gerak mobil dipercepat.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Kecepatan Mobil: on(release){ _parent.gotoAndPlay(11); _parent.nav="Kecepatan Mobil"; _root.loadMovie("kecepatan mobil.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Bola Jatuh: on(release){ _parent.gotoAndPlay(11); _parent.nav="Bola Jatuh";



86

loadMovie("bola jatuh.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); }

- Tombol di atas Rangkaian Seri: on(release){ _parent.gotoAndPlay(11); _parent.nav="Rangkaian Seri"; _root.loadMovie("rangkaian seri.swf", _parent._parent.w

Membuat Media Pembelajaran Dengan Flash

Documents

Transcript of Membuat Media Pembelajaran Dengan Flash