PENGENALAN SOFTWARE MACROMEDIA … cara klik insert new layer BAHAN AJAR INTERAKTIF TIKMM072 B18 Hal 3Dibuat oleh -: 13 PPPPTK VEDC MALANG 58 06 00 BP Departemen Teknologi Informasi:

BAHAN AJAR INTERAKTIF

TIKMM072

B18

Hal 1 - 13

PPPPTK VEDC

MALANG

58 06 00 BP

Departemen : Teknologi Informasi

Dibuat oleh: Nanik Sri Rahayu

Tanggal : 27 Juli 2011

Program studi Multimedia

Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

PENGENALAN SOFTWARE MACROMEDIA FLASH 8

Tujuan :

Setelah mengikuti diklat ini, diharapkan peserta dapat :

- Menggunakan tool-tool macromedia flash untuk melakukan pengolahan

obyek

- Membuat animasi sederhana

- Menggunakan action script untuk mengontrol jalannya animasi

- Merancang dan membuat bahan ajar interaktif

Waktu :

38 jam

Peralatan :

- Komputer/laptop

- Software Macromedia Flash 8

Bahan :

-

Langkah Kerja

6. Membuat tombol (button)

a. Buat obyek elips menggunakan oval tool

b. Klik text tool, buat tulisan TOMBOL dan tempatkan didalam elips


TIKMM072

B18

Hal 2 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

c. Blok kedua obyek tersebut, tempatkan kursor pada obyek, klik kanan lalu pilih

convert to symbol. Pilih type Button

d. Lakukan test movie (tekan CTRL+ENTER) dan dekatkan kursor ke arah tombol

tersebut. Pada saat mengenai tombol, maka kursor akan berubah bentuknya

menjadi bentuk tangan.

e. Double klik tombol tersebut untuk melakukan editing pada tombol, sehingga pada

timeline berubah menjadi seperti gambar berikut

Kita dapat melakukan 4 macam manipulasi terhadap tombol

Up : bentuk tombol pada saat mouse berada di luar tombol

Over : bentuk tombol pada saat mouse berada diatas tombol

Down : bentuk tombol pada saat mouse menekan tombol

Hit : untuk menentukan luas area dari tombol

f. Tambahkan keyframe pada frame Over dan Down, lakukan perubahan warna

terhadap tombol yang telah dibuat

g. Lakukan test movie dan amati perubahan yang terjadi

7. Menggunakan Tombol untuk menghentikan animasi

a. Buka file animasi bola bergerak mengikuti jalur

b. Posisikan kursor di layer paling atas (klik guide layer) kemudian tambah layer baru

dengan cara klik insert new layer


TIKMM072

B18

Hal 3 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

c. Buatlah dua buah button di layer 3

d. Klik tombol PLAY, lalu munculkan jendela action untuk menuliskan action script

dengan cara klik menu window action atau dengan menekan F9


TIKMM072

B18

Hal 4 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

e. Ketikkan perintah berikut

f. Klik tombol STOP, munculkan window action, lalu ketikkan perintah berikut

g. Tekan CTRL+ENTER untuk melihat hasilnya. Saat animasi sedang berjalan,

tekan tombol STOP maka animasi akan berhenti. Untuk menjalankannya kembali,

tekan tombol PLAY

8. Navigasi antar frame

Kali ini, kita akan membuat tombol-tombol interaktif untuk berpindah-pindah frame.

Agar lebih mudah, obyek-obyek yang dituju oleh tombol navigasi diletakkan pada

layer yang berbeda. Nama layer sebaiknya disesuaikan dengan obyek animasi untuk

memudahkan dalam navigasi.

a. Tambahkan 3 buah layer dan ubah masing-masing namanya menjadi Tombol,

Danau, Perumahan, Museum. Cara mengganti nama layer yaitu dengan cara klik

2 kali pada layer yang akan diganti namanya, lalu ketikkan nama baru


TIKMM072

B18

Hal 5 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

b. Di frame 1 layer Tombol, buatlah 4 buah obyek button serta satu buah shape

untuk background

c. Berikan keyframe di frame 2 layer Danau. Tambahkan sebuah gambar dengan

cara klik menu File import import to library. Dari library drag gambarnya ke

stage, atur ukurannya sehingga berada di dalam kotak background. Hidupkan

onion skinning untuk mempermudah mengatur posisinya


TIKMM072

B18

Hal 6 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

d. Dengan cara yang sama, tambahkan gambar rumah di frame 3 layer Perumahan

serta gambar museum di frame 4 layer Museum

e. Agar tombol dan background tetap terlihat sepanjang animasi, berikan keyframe

di frame terakhir (frame 4) layer Tombol

f. Klik tombol DANAU, tampilkan jendela action dan tuliskan script berikut

on(release) {

gotoAndStop(2);

}

g. Klik tombol RUMAH, tampilkan jendela action dan tuliskan script berikut

on(release) {

gotoAndStop(3);

}

h. Klik tombol MUSEUM, tampilkan jendela action dan tuliskan script berikut

on(release) {

gotoAndStop(4);

}

i. Klik tombol KELUAR, tampilkan jendela action dan tuliskan script berikut

on(release) {

fscommand (“quit”, true);

}

j. Jalankan dengan menekan CTRL+ENTER, maka tampilan gambar akan berubah-

ubah sesuai tombol yang ditekan

k. Untuk mencoba tombol KELUAR, jalankan file .swf dari windows explorer.

9. Navigasi antar scene

a. Buat 4 buah scene dengan cara klik menu Insert Scene. Ubah namanya

menjadi Awal, Materi, Kuis, Ujian. Cara mengubah namanya yaitu dengan cara

klik Menu Window Other panels Scene. Double klik nama Scene untuk

mengganti namanya


TIKMM072

B18

Hal 7 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

b. Aktifkan Scene Awal, dan buat tampilan seperti gambar berikut

c. Klik frame 1, tampilkan window action dan tuliskan script berikut

stop();

Perintah ini bertujuan agar saat dilakukan test movie, tampilan tidak berpindah-

pindah antar scene. Jadi agar scene Awal terus tampil sampai kita menekan salah

satu tombol

d. Klik button Materi, tampilkan window action dan tuliskan script berikut

on(release) {

gotoAndStop(“Materi”,1);

}

Klik disini untuk

pindah antar scene Penanda scene yang

sedang aktif


TIKMM072

B18

Hal 8 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

e. Klik button Kuis, tampilkan window action dan tuliskan script berikut

on(release) {

gotoAndStop(“Kuis”,1);

}

f. Klik button Ujian, tampilkan window action dan tuliskan script berikut

on(release) {

gotoAndStop(“Ujian”,1);

}

g. Klik button Keluar, tampilkan window action dan tuliskan script berikut

on(release) {

fscommand(“quit”, true);

}

h. Aktifkan scene Materi, copy seluruh tampilan dari scene Awal. Ganti button Materi

dengan button Awal

i. Klik button Awal, tampilkan window action dan tuliskan script berikut

on(release) {

gotoAndStop(“Awal”,1);

}


TIKMM072

B18

Hal 9 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

j. Aktifkan scene Kuis, buat tampilannya menjadi

k. Aktifkan scene Ujian, buat tampilannya menjadi

l. Lakukan test movie untuk mengetahui apakah semua tombol sudah bekerja

sebagaimana mestinya


TIKMM072

B18

Hal 10 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

10. Navigasi antar file

Navigasi antar file diperlukan untuk memanggil file berekstensi .swf. Sebaiknya

antara file-file yang saling berhubungan diletakkan dalam folder yang sama.

a. Misal untuk file navigasi antar scene sebelumnya (Navigasi.swf), ditambahkan

satu tombol yaitu tombol Simulasi.

b. Tombol Simulasi digunakan untuk memanggil file Simulasi.swf yang telah kita

miliki dan terletak di folder yang sama dengan file Navigasi.swf. Klik tombol

Simulasi, aktifkan window action dan tuliskan perintah berikut

on(release) {

loadMovieNum(“Simulasi.swf”,1);

}

c. Lakukan test movie untuk melihat hasilnya

11. Memasukkan suara

11.1 Memasukkan suara di frame

a. Ambil file suara (lagu) ke libray dengan cara klik menu File import

import to library dan cari di lokasi mana anda menyimpan file suara tersebut.


TIKMM072

B18

Hal 11 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

Klik Open jika sudah ketemu file yang diinginkan. Maka di library akan

terlihat file suara yang dimasukkan tadi

b. Klik frame 1 layer 1, lalu drag file suara yang ada di library ke stage. Berikan

keyframe di frame 15. Maka di timeline akan tampak bahwa ada suara di

frame-frame tersebut

c. Tampilkan jendela properties dan lakukan pengaturan untuk sound

d. Lakukan pula pengaturan untuk frame 15

e. Lakukan test movie untuk melihat hasilnya


TIKMM072

B18

Hal 12 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

11.2 Mengontrol suara melalui tombol

a. Buat dua buah tombol di stage

b. Klik kanan file musik yang ada di library, pilih linkage

c. Pada linkage properties, pilih option export for action script dan isikan

nama identifier untuk file lagu tersebut. Sebaiknya nama identifier tidak

menggunakan spasi, gunakan satu kata saja.


TIKMM072

B18

Hal 13 - 13

PPPPTK VEDC

MALANG

58 06 00 BP





Program Diklat :

Kompetensi Kejuruan

Level :

Menengah

Rev.Tanggal :

d. Klik tombol MUSIK, aktifkan window action dan tuliskan script dibawah ini

on(release) {

suara = new Sound();

suara.attachSound(“pantun”);

suara.start(0,0);

}

Perintah diatas bertujuan untuk memberikan inisialisasi bahwa suara

digunakan untuk memanggul file music yang memiliki identifier pantun.

Suara akan dimainkan mulai detik ke 0 dan dilakukan perulangan (looping)

sebanyak 0. Jika diinginkan music dimainkan di detik ke 15 dan perulangan

satu kali, maka actionnya berubah menjadi suara.start(15,1);

e. Klik tombol MATI, aktifkan window action dan tuliskan script di bawah ini

on(release) {

stopAllSounds();

}

Documents

PENGENALAN SOFTWARE MACROMEDIA … cara klik insert new layer BAHAN AJAR INTERAKTIF TIKMM072 B18 Hal 3Dibuat oleh -: 13 PPPPTK VEDC MALANG 58 06 00 BP Departemen Teknologi Informasi: