MAKALAH WORKSHOP PEMBUATAN MEDIA PENGAJA

MAKALAH WORKSHOP PEMBUATAN MEDIA
PENGAJARAN BERBASIS MULTIMEDIA

Macromedia Flash 2008 (Flash2008) merupakan salah satu dari Macromedia yang
digunakan untuk membuat Animasi 2D, sehingga hanya dikenal posisi X (letak
gambar secara horizontal) dan Y(letak gambar secara vertikal), sedangkan posisi Z
(letak kejauhan/kedalaman gambar) tidak dikenal

5. Dengan cara yang sama, tambahkan keyframe pada 40,50 atau pada tempat
sesuai yang diinginkan(bebas)
6. Untuk melihat hasil sementara, tekan tombol Enter.
7. Untuk melihat hasil di player/preview, tekan tombol ctrl+enter
8. Untuk menutup preview, tekan ctrl+w

Tools

Animasi Shape

Macromedia Flash

1. Selection, digunakan untuk mengeblok/menyeleksi, memindah, dan

mengubah bentuk
2. Sub Selection, digunakan untuk mengubah bentuk
3. Free Transform, digunakan untuk transformasi obyek (memutar
obyek, Skew/memiringkan dan Membalik arah)
4. Gradien Transform , digunakan untuk transformasi warna obyek.
5. Line Tool, digunakan untuk membuat garis
6. Rectangle dan oval tool, digunakan untuk membuat gambar kotak dan
lingkaran
7. Lasso Tool, digunakan untuk memilih obyek secara tidak beraturan
8. Text, digunakan untuk membuat obyek tulisan
9. Pen & Pencil, digunakan untuk membuat kurfa dan garis bebas,
10. Brush, digunakan untuk membuat obyek bentuk kuas
11. Ink Bottle Tool , digunakan untuk memberikan garis tepi pada obyek
12. Paint Bucket Tool , digunakan untuk memberikan warna/recolor obyek
13. Eye Dropper Tool , digunakan untuk mengambil sample warna dari
suatu obyek
14. Erease Tool, digunakan untuk menghapus obyek

Animasi Frame by Frame
1. Pada layer 1, buat 1 buah lingkaran tanpa garis

2. Tambahkan keyframe pada layer 1 frame 10 (klik kanan pada layer 1,frame
10>>insert keyframe)
3. Geser gambar lingkaran yang
sudah dibuat ke tempat lain
4. Tambahkan keyframe pada
layer 1 frame 30, geser lagi
lingkaran ke tempat yang lain
pula.

PUSDIKLAT Teknologi Informasi Pendidikan
BELAJAR KREATIF MEDIATAMA
www.belajarkreatif.com

1. Pada layer 1, buat 1 buah lingkaran tanpa garis
2. Klik keyframe (tanda titik) pada layer 1 frame 1, ubah properti tween dari none
menjadi shape.
3. Tambahkan keyframe pada
layer 1 frame 10 (klik kanan
pada
layer

1,frame
10>>insert keyframe)
4. Ubah
bentuk
lingkaran
menjadi bentuk lain
5. Tambahkan keyframe pada
layer 1 frame 30, ubah lagi bentuk lingkaran menjadi bentuk lain lagi
6. Dengan cara yang sama, tambahkan keyframe pada 40,50 atau pada tempat
sesuai yang diinginkan(bebas)

Animasi Motion
1. Pada layer 1 frame 1, buat 1 buah lingkaran
2. Gunakan selection tool, blok gambar, klik menu modify>>convert
symbol>>movieclipt>>beri nama jika perlu>>ok
3. Klik keyframe pada frame1, pada properties, ganti tween dengan motion
4. Klik kanan pada frame 50, pilih menu insert keyframe
5. Pindah gambar ke tempat lain, ubah ukuran seperlunya jika diinginkan

to

Membuat Media Pembelajaran
Algoritma
1. Untuk memudahkan, akan dibuat 3 buah layer, yaitu: layer untuk background,
layer isi dan layer untuk aksi. Layer background digunakan untuk meletakkan
background, layer isi digunakan untuk meletakkan informasi layar yang akan
ditampilkan dalam media, sedangkan layer aaksi digunakan khusus untuk
mengisi aksi-aksi yang akan dilakukan

Page 1
email : belajarkreatif@yahoo.com

2. membuat layer background dan mengisi layer tersebut dengan background
sesuai keinginan
3. membuat layar-layar informasi yang akan dibuat di layer isi. Dalam contoh ini,
setiap tampilan diletakkan di layer isi pada frame 5,10,15 dan seterusnya
4. Mengisi frame 5,10,15 dan seterusnya dengan materi yang diinginkan
5. Menambahkan tombol-tombol seperti back dan next pada frame-frame 5,10 dst
sesuai kebutuhan
6. Menambahkan aksi untuk setiap tombol dengan perintah gotoAndStop atau

gotoAndplay
7. Menambahkan layer action
8. Menambahkan keyframe pada layer action frame 5, serta mengisinya dengan
perintah aksi berhenti (stop)
9. Test hasil

Membuat Layer background
1. Buat 1 layer, beri nama background

1. Tambahkan 1 frame, beri nama isi. Layer ini akan
digunakan untuk menyimpan sebagian besar layar
yang akan ditampilkan di media pembelajaran. Sebagai latihan, setiap layar
tampilan akan diletakkan di frame 5, 10, 15, 20 dst pada layer isi, untuk itu perlu
di tambahkan keyframe pada frame-frame yang dimaksud (5,10,15…)
2. Untuk membuat keyframe kosong pada frame 5 layer “isi” , klik kanan pada
frame 5 layer “isi”, insert blank keyframe.
3. Lakukan langkah yang sama untuk membuat keyframe pada frame 10,15,20,25
dan 30 layer “isi”, sehingga tampak sbb:

Membuat tampilan 1

1. Klik layer isi frame 5, isikan tulisan sesuai
dengan keinginan, contoh:
2. Jika peletakkan tulisan benar di layer isi frame
5, akan berubah warna menjadi lingkaran
hitam.keyframe yang belum terisi tetap
berwarna putih (frame 1, 10, 15, dst).

Membuat tampilan 2 dan selanjutnya
2.

Isikan layer
background
frame 1
sesuai keinginan
3. Group semua gambar
yang dibuat
di layer
background, sehingga
gambar tidak mudah rusak
(blok

semua dengan selection tool/panah
hitam, modify>>group)
4. Langkah selanjutnya, sebelum mengisi setiap keyframe pada
layer isi, agar tidak salah peletakan serta tidak merubah
background yang sudah ada, kunci dahulu layer background (klik
tanda titik lock yang ada di layer background,sehingga akan tampil tanda lock
pada titik tersebut)
5. Tambahkan
1
frame
di
frame
50
layer
back
ground(klik
kanan
pada
frame
50

layer
back
ground,
klik
kanan>>insert
frame),
sehingga
frame tampak seperti pada gambar di bawah

Setelah tampilan pertama sudah
selesai, langkah selanjutnya
membuat tampilan kedua pada
layer isi, frame 10.
1. Klik keyframe layer isi frame
10.
2. Buatlah tampilan kedua, contoh:
3. Simpan dahulu hasil pekerjaan Anda sebelum melanjutkan…
4. Buat pula tampilan ketiga dan selanjutnya dengan cara yang sama….
5. Contoh tampilan selanjutnya

Membuat Layar Tampilan Materi
PUSDIKLAT Teknologi Informasi Pendidikan
BELAJAR KREATIF MEDIATAMA
www.belajarkreatif.com

Page 2
email : belajarkreatif@yahoo.com

Membuat tombol pada tampilan layar yang lain
Setelah tombol pertama berhasil, selanjutnya
membuat tombol untuk tampilan kedua,
15.
dengan cara yang sama, pada layer isi frame 10,
tambahkan tombol seperti berikut,
16.
Tambahkan perintah untuk tombol back dan next
dengan perintah berikut:
17.
Jalankan untuk melihat hasil
18.

Jika sudah berhasil, coba tambahkan tombol untuk layar yang lain dengan
cara yang sama+mengubah nomor frame tujuan.
14.

on (press) {
gotoAndStop(5);
}

Setelah semua tampilan dibuat, langkah
selanjutnya membuat perintah berhenti pada
tampilan pertama.
6. Tambahkan 1 buah layer, beri label “aksi”
7. Tambahkan 1 buah blank keyframe pada
aksi frame 5,
8. Pada
frame
5
layer
aksi,
tambahkan sebuah aksi dengan perintah

layer

a

stop();

b

cara:
a. Klik keyframe yang ada pada layer
b. Klik panel action
c. Isikan perintah stop();

aksi

c

Test Hasil
9. Simpan dahulu hasil pekerjaan Anda sebelum melanjutkan
10.
Lihat hasil dengan cara menekan tombol ctrl+enter
Menambahkan tombol-tombol untuk menuju ke tampilan lain
11.
Klik frame 5 layer isi. Buatlah sebuah tombol dengan bentuk
seperti di samping:
12.
Klik tombol yang sudah dibuat, Isikan perintah berikut:
on (press) {
gotoAndStop(10);
}
13.
Perintah ini digunakan untuk menuju ke frame 10 (tampilan kedua). Tes hasil
untuk melihat apakah tombol berfungsi atau tidak. Jika berhasil maka saat
tombol ditekan akan menuju ke tampilan kedua.
PUSDIKLAT Teknologi Informasi Pendidikan
BELAJAR KREATIF MEDIATAMA
www.belajarkreatif.com

on (press) {
gotoAndStop(15);
}

Mengimport File Gambar/Suara/Video
Untuk menambahkan/menggunakan file-file dari tempat lain, baik berupa file suara,
file video, file gambar maupun file-file lain ke dalam animasi flash diperlukan import
terlebih dahulu.
1. Pilih menu file>>import>> pilih import to library
2. Pilih gambar- yang ingin dimasukkan,
3. Ok/open
File yang sudah terimport ke dalam flash akan masuk ke dalam library.
Untuk memasukkan gambar tersebut dari library ke animasi yang ada cukup dengan
cara menggeser gambar ke dalam stage/lembar kerja. Jika gambar terlalu besar,
ubah ukuran dengan menggunakan tool free transform.
Jika file berupa file suara, untuk mengisikan suara pada suatu tombol atau pada
suatu frame, :
1. klik keyframe yang akan diberi suara,
2. pada properti, isikan sound dengan cara memilih nama file yang ada di combo

1
2

Page 3
email : belajarkreatif@yahoo.com



Mengekport File Gambar/Suara/Video
Publikasi digunakan untuk mengekspor hasil animasi ke dalam bentuk file bertipe
swf, avi, projector/exe atau tipe lain, sehingga file dapat dimanfaatkan/diletakkan ke
dalam program lain, seperti:dijadikan sebagai gambar/animasi dalam power point,
microsoft word, video dsb.

Ekspor ke video/ AVI/ MOV
1. Buka dahulu file yang akan dijadikan video
2. Pilih menu File>>export>>movie
3. Isikan nama file video
4. Pilih type (save as type) Windows Avi, atau boleh juga Quick time (Mov)
Publish ke file bertipe swf/gif/jpg/dll
Selain fasilitas export, juga terdapat fasilitas publish (publikasi),
yaitu mengkespor hasil dengan setting-setting tertentu
1. Buka dahulu file yang akan dijadikan video
2. Pilih menu File>>publish setting
3. Beri tanda check jenis file hasil yang diinginkan, misal ke bentuk exe (file yang
langsung bisa di eksekusi lewat explorer oleh windows), atau bisa juga ke dalam
bentuk shockwave flash (swf)
4. Jika diinginkan setting-setting tertentu, klik tab-tab yang muncul (tab flash, html
dll)
5. Tekan tombol publish

Menyisipkan file hasil Publish ke Program Microsoft Power Point
Hasil dari file yang sudah diekspor (avi, gif) dapat disisipkan ke dalam program lain,
misalnya untuk melengkapi presentasi power point.
Untuk import movie dari program microsoft power point, pilih menu
insert>>movie>>cari file yang akan disisipkan (file hasil ekspor)>>ok>>pilih
automatic jika diinginkan file movie langsung dijalankan saat slide tampil, atau pilih
when click jika movie dijalankan saat di tekan tombol mouse/click

Algoritma
Untuk memudahkan membuat quis berbentuk soal isian, diperlukan
3 jenis text sekaligus, text soal digunakan static text, text tempat
jawaban menggunakan input text, dan text informasi benar salah
menggunakan dinamic text. Setiap soal diletakkan dalam frame
yang berbeda. Soal 1 diltekkan di frame 2, soal 2 diletakkan di
frame 3 dan seterusnya. Informasi benar salah diletakkan di frame
terakhir. Pada frame 1 diberikan aksi/action untuk mengisikan
standar benar salah jawaban setiap soal. Dan diberikan aksi
gotoAndStop(2) yang dimaksudkan agar langsung menuju frame 2
Langkah pembuatan
1. Buatlah sebuah file baru.
2. Klik pada layer 1, frame 1
3. Klik action, berikan actionscript berikut:

jawaban1="salah";
jawaban2="salah";
jawaban3="salah";
gotoAndStop(2);
4. Soal Isian Lanjutan
5. Langkah selanjutnya membuat soal. Soalini akan diletakkan di layer 1 frame 2.
Tambahkan sebuah keyframe pada
frame 2 (klik kanan pada layer1
frame2>>insert keyframe)
6. Buatlah soal dengan tampilan seperti
di samping.


Membuat Quiz Sederhana - Soal Isian
Di dalam macromedia flash, dikenal 3 jenis text:
 Statis Text, merupakan text yang isinya tidak bisa di ubah, bisa di animasikan
 Dinamic Text, merupakan text yang isinya dapat diubah lewat program, biasanya
text ini berfungsi sebagai output
PUSDIKLAT Teknologi Informasi Pendidikan
BELAJAR KREATIF MEDIATAMA
www.belajarkreatif.com

Input Text, merupakan text yang dapat di ubah saat runtime oleh pengguna. Text
ini dapat digunakan sebagai input dan output



Untuk membuat tulisan soal dan
pilihan, gunakan texttool, pada
property, pilih static text.
Text … digunakan untuk tempat
mengisi
jawaban,
ubahlah
property dari static text menjadi
input text, pada nama, isikan hasil1
Page 4

email : belajarkreatif@yahoo.com



Buat sebuah tombol yang akan difungsikan untuk menuju ke soal berikutnya.

}

Berikan aksi untuk tombol ini dengan scipt berikut::
on (press) {
if (hasil1.text==10) jawaban1=“benar”;
gotoAndStop(_currentframe+1);
}
Langkah selanjutnya membuat soal yang kedua.
7. Tambahkan sebuah keyframe pada frame 3 (klik kanan pada layer1
frame2>>insert keyframe)
8. Tulisan yang tampil masih soal yang pertama, untuk itu, ubah menjadi soal
kedua, sehingga tampak seperti gambar di samping (atas). Ubah nama inputtext
(…), menjadi hasil2.
9. Isikan perintah untuk tombol next dengan script berikut:

on (press) {
if (hasil2.text==50) jawaban2=“benar”;
gotoAndStop(_currentframe+1;
}
Langkah selanjutnya membuat soal yang keketiga.
10. Dengan cara yang sama dengan soal dua, buat soal dengan tampilan seperti di
samping.
11. ubah nama inputtext input text menjadi hasil3,
12. Isikan perintah untuk tombol next dengan script berikut:

on (press) {
if (hasil2.text==50) jawaban2=“benar”;
gotoAndStop(_currentframe+1;
}
Langkah selanjutnya menampilkan hasil benar salah. Tambah kan sebuah keyframe
di frame 5, buatlah tampilan seperti di samping.
13. Ubah properti untuk jawaban1, 2 dan 3 dengan dinamic text, dan isikan pada var
dengan jawaban1, jawaban2 dan jawaban3.
14. Berikan action tombol close dengan kode berikut:

on (press) {
if (hasil2.text==50) jawaban2=“benar”;
PUSDIKLAT Teknologi Informasi Pendidikan
BELAJAR KREATIF MEDIATAMA
www.belajarkreatif.com

gotoAndStop(_currentframe+1;

Lihat hasilnya dengan ctrl+enter

Membuat Quis Sederhana - Pilihan Ganda
Algoritma
1. Untuk memudahkan membuat soal pilihan berganda, setiap soal akan dibuat
dalam 1 frame, sehingga jika jumlah soal ada 9, maka jumlah frame yang dibuat
ada 9.
2. Sebagai nilai awal, dibuat variabel nilai dan jlhsoal yang diletakkan di frame
pertama.
3. Setiap pilihan pada soal harus dikonversi menjadi sebuah tombol, sehingga jika
dalam 1 soal ada 4 pilihan, maka 4 pilihan tersebut dibuat tombol
semua.
4. Untuk menampilkan hasil, diperlukan 1 buah frame tersendiri. Frame Hasil
diletakkan di akhir setelah frame-frame soal dibuat.
5. Setiap tombol diberi aksi/action pindah ke frame/soal berikutnya.
6. Khusus untuk pilihan yang benar ditambahkan perintah menambah nilai.

Langkah pembuatan
1. Buatlah sebuah file baru.
2. Klik pada layer 1, frame 1
3. Klik action, berikan actionscript berikut::

jlhsoal=3;
nilai=0;
gotoAndStop(2);
Langkah selanjutnya membuat soal. Soal pertama akan diletakkan di layer 1 frame 2.
soal selanjutnya akan di letakkan di layer 1 frame 3, dan seterusnya. Sebagai latihan,
jumlah soal sebanyak 3. sehingga soal 1 di frame 2, soal 2 di frame 3 dan soal 3 di
frame 3.
4. Tambahkan sebuah keyframe pada frame 2 (klik kanan pada layer1
frame2>>insert keyframe)
Page 5

email : belajarkreatif@yahoo.com

5.
6.
7.
8.

on (press){
gotoAndStop(_currentframe+1);
}

Buatlah soal dengan tampilan seperti di samping.
Untuk membuat tulisan soal dan pilihan, gunakan texttool.
pada property pilih static text
Soal Pilihan Ganda Lanjutan

Langkah selanjutnya membuat soal yang kedua.
9. Tambahkan sebuah keyframe pada frame 3 (klik kanan pada layer1
frame2>>insert keyframe)
10. Tulisan yang tampil masih soal yang pertama, untuk itu, ubah menjadi soal
kedua, sehingga tampak seperti gambar di samping (atas)
11. Tambahkan pula soal berikutnya pada frame 4, sehingga tampak seperti gambar
disamping (bawah)

25. Berbeda dengan pilihan pertama, script pada pilihan kedua dan ketiga tidak
terdapat perintah nilai++, hal ini dimaksudkan agar jika ditekan, maka nilai tidak
bertambah, karena pilihannya salah.
26. Dengan cara yang sama, ubah pula pilihan pada soal yang kedua dan ketiga.
Lihat hasilnya
Jika diinginkan memperbagus tampilan, maka cukup menambahkan layer, sehingga
terdapat layer 2, dan mengisikan layer 2 sesua dengan yang diinginkan

Langkah selanjutnya membuat frame hasil
12. Tambahkan sebuah keyframe pada frame 5 (klik kanan pada layer1 frame
5>>insert keyframe)
13. Buatlah tampilan seperti di samping.
14. Khusus text nilai (angka 10 pada gambar di samping), ubah properti dari static
text menjadi dynamic text. Pada kotak var, ketikkan “nilai”.
15. dynamic text berarti text tersebut bisa berubah. Dalam soal ini, digunakan untuk
menampilkan variabel nilai
16. Soal sudah selesai semua dibuat.
17. Soal Pilihan Ganda Lanjutan
Langkah selanjutnya mengubah semua pilihan pada soal menjadi button/tombol yang
bisa diklik dan memberi action untuk menuju ke soal/frame berikutnya
18. Klik pada layer 1 frame 2, (soal 1). Klik pada tempat kosong agar tidak ada yang
terpilih.
19. Klik pada pilihan a. jakarta, pilih menu modify>>convert to symbol>>button>>ok
(nama dibiarkan, jika diinginkan, bisa diganti dengan nama soal1pilihan1)
20. Klik pada action, isikan actionscript berikut:

on (press){
nilai++;
gotoAndStop( _currentframe+1);
}
21. Perhatikan besar kecil huruf (A dan S pada perintah gotoAndStop harus huruf
besar).
22. Perintah ini digunakan untuk menambah nilai dan menuju ke soal berikutnya
23. Dengan cara yang sama, ubah pula pilihan yang kedua dan ketiga (b. yogyakarta
dan c.surabaya)
24. Tambahkan pula script di bawah ini:
PUSDIKLAT Teknologi Informasi Pendidikan
BELAJAR KREATIF MEDIATAMA
www.belajarkreatif.com

Page 6
email : belajarkreatif@yahoo.com