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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 2 - 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 :
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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 3 - 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 :
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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 4 - 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 :
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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 5 - 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 :
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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 6 - 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 :
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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 7 - 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 :
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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 8 - 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 :
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);
}
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 9 - 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 :
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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 10 - 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 :
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.
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 11 - 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 :
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
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 12 - 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 :
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.
BAHAN AJAR INTERAKTIF
TIKMM072
B18
Hal 13 - 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 :
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();
}