PEMBELAJARAN BERBASIS TIK

2
BAB. I
PEMBELAJARAN BERBASIS TIK
embelajaran adalah suatu proses pemberian informasi atau transfer ilmu dari guru ke
siswa dengan melibatkan media pembelajaran sebagai media tranfortasinya.
Keberadaan media pembelajaran dalam kegiatan pembelajaran tidak bisa dipisahkan,
media pembelajaran dapat berupa apa saja yang dapat digunakan dalam proses
penyampaian informasi kepada anak didik, baik bersifat benda secara jasmaniah (
Hardware ) maupun dalam bentuk software atau program computer. Penggunaan media
secara software dan hardware ini dalam lingkup media elektronik disebut dengan pembelajaran
berbasis Teknologi Informasi dan Komunikasi (TIK), TIK adalah bagian dari bentuk Ilmu
Pengetahuan dan Teknologi (IPTEK). Menurut Kementerian Negara Riset dan Teknologi
(2006:6), TIK adalah semua teknologi yang berhubungan dengan pengambilan, pengumpulan,
pengolahan, penyimpanan, penyebaran dan penyajian informasi. TIK mempunyai pengertian
dan cakupan yang luas secara umum, namun TIK dalam pembelajaran tentunya adalah
pemanfaatan teknologi dan informasi untuk mendukung proses pembelajaran, penggunaan TIK
dalam pembelajara ini akan terus berkembang pesat seriing dengan berkembangnya teknologi
pendukung seperti internet yang semakin murah dan cepat, perangkat – perangkat seperti
computer, laptop, Proyektor serta perangkat – perangkat mobile yang mendukung berbagai
aplikasi.
A. Analisis Penggunaan TIK dalam Pembelajaran
Pemenfaat TIK dalam pembelajaran saat ini sangat diminati, dan akan tumbuh
sangat pesat yang didukung dengan fasilitas – fasilitas yang luar biasa canggih. Perangkat
teknologi berkembang sedemikian pesat, tekonologi digital menggantikan teknologi analog,
perangkat ponsel tidak lagi hanya digunakan untuk telepon dan sms saja tetapi berisi
berbagai konten multimedia yang dapat mewakili peran pendidik dalam transfer ilmu.
Akan tetapi peran teknologi disini hanya sebagai media transfer ilmu, kegiatan mendidik
tetap ada pada guru.
Guru sebagai pendidik harus mampu menggunakan TIK dalam pembelajaran dalam
istilah kerennya sekarang ini “Guru harus melek Teknologi”. Guru yang GAPTEK (Gagap
Teknologi) akan tertinggal jauh, dan bukan tak mungkin akan kalah dengan siswa lebih
akrab dengan penggunaan Teknologi dalam kehidupan sehari – harinya. Berbagai literature,
makalah dan tutorial mudah didapatkan dengan hanya menggerakkan ujung jari. Guru
sebagai mentor, sebagai fasilitator harus lebih tau dari anak didik yang akan diajarnya, guru
P

3
harus menguasai TIK agar tidak ketinggalan informasi, guru harus menguasai TIK untuk
mempermudah transfer ilmu kepada siswa – siswanya.
B. E-Learning
C. Model-model Pembelajaran Berbasis TIK

4
BAB. I I
MACROMEDIA FLASH 8
Flash dirilis pada tahun 2005, oleh Macromedia. Flash 1.0 diluncurkan pada tahun
1996 setelah Macromedia membeli program animasi vector bernama FutureSplash.
Macromedia Flash 8 adalah versi terakhir yang diluncurkan oleh Macromedia yang kemudian
pada tanggal 3 Desember 2005 di beli oleh Adobe Systems sehingga Macromedia Flash
berubah menjadi Adobe Flash dan hingga kini Adobe Systems telah meluncurkan versi CS
yang mendukung AdobeAIR yang kompatibel dengan Android karena bisa dieksport dalam
bentuk APK.
Macromedia Flash 8 adalah software yang banyak dipakai oleh disainer web karena
mempunyai kemampuan yang lebih unggul dalam menampilkan multimedia, gabungan
antara grafis, animasi dan suara serta interaktifitas user. Macromedia flash merupakan aplikasi
standar authoring tool professional yang digunakan untuk membuat animasi vector dan
bitmap yang sangat menakjubkan untuk membuat suatu situs yang interaktif, menarik dan
dinamis.
Dewasa ini macromdia flash banyak digunakan dalam dunia pendidikan untuk
membut media pembelajaran interaktif. Sifatnya yang mudah dipelajari dan digunakan
menyebabkan aplikasi ini banyak digunakan dan menjadi pilihan para penggiat multimedia
pembelajaran. Dengan tampilan yang user friendly dan menggunakan bahasa pemerograman
yang mudah dimengerti aplikasi macromdia ini menjadi pilihan paforit untuk merancang
sebuah multimedia pembelajaran berbasis animasi dan interaksi dengan user.
Interkasi antara user dalam movie flash menggunakan Actionscript. Actionscript
adalah suatu bahasa pemrograman yang berorientasi objek yang dipakai dalam Macromdia
Flash, Versi Adobe Flash sekarang sudah mendukung Actionscript 3. Macromedia Flash 8 ini
memiliki fasilitas – fasilitas yang lebih banyak dan menarik yang akan membantu user dalam
mempelajari atau menggunakan software ini dibandingkan dengan versi sebelumnya.
A. GUI ( Grafik User Interface )
Macromedia Flash 8 adalah program berbasis windows sehingga pemakai dapat
menggunakan program ini dengan lebih mudah karena dapat mendesain secara visual.
Macromedia Flash dilengkapi dengan Main Bar, ToolBar, Toolbox, Layer, Panel, Controller,
Timeline, Frame, PlayHead, Rule, dan Stage. Berikut ini adalah tampilan muka dari program
Macromedia Flash 8 :

5
Gambar 1. Area Kerja Macromdia Flash 8
Menu
Berisi kumpulan interuksi atau perintah – perintah yang digunakan dalam Flash 8 yang
terdiri dari File, Edit, View, Insert, Modifi, Text, Control, Windows, Help.
Stage
Stage adalah layer (document dalam word ) yang akan digunakan meletakkan objek – objek
dalam flash.
Timeline
Timeline berisi fram – frame yang berfungsi untuk mengontrol objek yang dibuat dalam
stage atau layer yang akan dibuat animasi.
Toolbox
Toolbox berisi tool-tool atau alat yang digunakan untuk membuat, menggambar, memilih,
menulis, memanipulasi objek atau isi yang terdapat dalam stage (layer) dan timeline. Alat –
alat yang terdapat dalam toolbox adalah :
 Arrow Tool : memilih dan memindahkan object
 Subselect Tool : memilih titik – titik pada suatu objek atau garis
 Line Tool : membuat garis
 Lasso Tool : memilih sebagian dari object atau bagian tertentu dari object
Title Bar Menu Bar
Tools Box
Time Line
Properties Panel
Action Panel

6
 Pen Tool : Menggambar garis – garis lurus maupun garis kurva
 Text Tool : Menulis teks
 Oval Tool : Membuat lingkaran
 Pencil Tool : Menggambarkan garis – garis bebas, seperti menggunakan pensil
biasa
 Rectange Tool : membuat persegi maupun persegi panjang
 Brush Tool : berfungsi seperti kuas untuk mengecat atau mewarnai suatu objek
 Fill Transform Tool : mengatur ukuran, tengah, arah dari warna gradasi atau
bidang suatu objek
 Free transform Tool : mengubah dan memodifikasi bentuk objek yang dibuat bisa
berupa memperbesar, memperkecil objek
 Ink Bootle Tool : Menambah, member dan mengubah warna pada bidang objek
yang dibuat
 Eydropper Tool : Mengidentifikasi warna atau garis dalam suatu objek
 Eraser Tool : menghapus area yang tidak diinginkan dari suatu objek
Gambar 2. ToolBox
Arrow
Free
Pen
Oval
Pencil
Ink Botle
Eye
Sub
Gradient Tool
Laso
Text
Brush
Paint
Erase
Rectange
Zoom
stroke
Fill color

7
B. Dasar Objek
1. Membuat Objek Sederhana
Untuk membuat suatu objek Macromedia menyediakan tools box, tools tools yang
disediakan disini dapat berupa arrow tools, ractangel tool, oval tool, ing bottle, paint,
line dan sebagainya. Berikut cara membuat objek ( contoh objek sebuah lingkaran ) :
a. Klik Oval tools
b. Klik, tahan dan geser pointer mouse di area stage yang diinginkan
Dan dengan cara yang sama untuk membuat objek lain.
Gambar 3. Objek sederhana dengan flash
2. Fill dan Stroke pada Objek
Ketika menggambar objek dalam Flash seperti objek lingkaran, kotak, oval dll, secara
otomatis Flash akan menyediakan dua unsur objek, yaitu Fill (bidang objek) dan Stroke
(bingkai/pinggir objek).
Gambar 4. Fill dan Stoke
Pengaturan warna fill dan stroke dapat dilakukan menggunakan fill color dan stroke color
atau dapat juga melalui menu properties seperti pada gambar berikut :
Gambar 5. Properties

8
Mengtur warna fill atau warna stroke tinggal mengklik pada kotak warna bergambarkan
pensil dan ember. Sedangkan jenis/bentuk garis, ukuran garis dan sebagainya dapat diatur
dengan menglik tanda panah atau mengetikkan ukuran yang kita inginkan.
Jika kita menginginkan objek yang kita buat tanpa fill atau tanpa stroke dapat pula kita atur
melalui properties ini.
Gambar 6. Objek dengan strok dan objek dengan fill
Gambar 7. Option Color Toolbox
3. Membuat Gradasi Warna
Untuk membuat contoh suatu gradasi warna ikuti langkah berikut :
1) Buatlah sebuah objek lingkaran pada stage.
2) Buatlah lingkaran tersebut tanpa stroke.
3) Seleksi objek lingkaran tersebut.
4) Klik tanda segitiga pada Panel Color Mixer. Jika Panel Color Mixer belum ada klik
menu Window > Color Mixer kemudian tempatkan di bagian panel (bagian kanan
stage).
5) Klik Fill Color, pilih warna merah.
6) Klik Fill Style pilih Radial/Linear sesuai dengan yang diinginkan. Lingkaran akan
berubah menjadi gradasi merah – hitam.

9
7) Ubahlah gradasi merah-hitam menjadi gradasi biru-kuning. Klik Pointer Gradasi
bagian kiri di Bar Gradasi kemudian klik Fill Color dan ganti warnanya menjadi
biru.
8) Klik Pointer Gradasi bagian kanan lalu klik Fill Color ganti warnanya menjadi
kuning.
Gambar 8. Bar Gradasi
4. Modifikasi Bentuk Objek
Gambar yang sudah ada dapat diubah atau dimodifikasi dengan menggunakan Selection
Tool atau Subselection Tool. Perhatikan contoh berikut. Misalkan terlanjur
menggambar garis lurus, padahal seharusnya menggambar garis lengkung. Untuk kasus
ini, gambar garis lurus tidak harus dihapus, karena bisa dimodifikasi menjadi garis
lengkung dengan cara sebagai berikut.
Langkah 1. Munculkan grid dengan ukuran 10 px x 10 px (sesuaikan dengan
kebuhtuhan)
Fill Style
Klik untuk
Pengaturan Warna
Gradasi

10
Langkah 2. Klik Selection Tool . Selanjutnya arahkan kursor ke tengah garis,
sehingga kursor berubah menjadi kemudian drag kearah bawah sejauh satu
kotak.
Langkah 3. Klik Subselection Tool . Selanjutnya klik di ujung bawah
gambar sehingga terlihat seperti berikut
Kemudian drag control point sejauh 2 petak kekanan (sampai bentuknya sesuai
dengan keinginan)
Langkah 4. Selanjutnya klik diujung bagian atas dan lakukan langkah seperti
ujung bagian bawah sampai memperoleh bentuk yang diharapkan.

11
5. Text
Teks digunakan untuk menerangkan atau menjelaskan sesuatu dalam bentuk
tulisan,pembuatan judul, komponen animasi, keterangan-keterangan untuk movie
interaktif. Teks merupakan bagian yang mempunyai perananl cukup besar dalam
pembuatan animasi. Teks dapat dimanipulasi atau dimodifikasi seperti halnya objek
dalam Flash MX sesuai dengan kebutuhan sehingga teks yang dihasilkan mempunyai
banyak variasi.
Teks dalam Flash ditulis dengan memggunakan bantuan Text Tool pada Toolbox. Teks
yang dihasilkan dapat di setting dengan menggunakan Propeties Panel. Propeties Panels
untuk teks berisi menu atau atribut-atribut untuk membuat dan mengedit suatu teks.
Gambar 7. Teks Properties Panel
Flash 8 mempunyai tiga tipe teks yang masing-masing mempunyai fungsi yang
berbeda. Tipe teks tersebut adalah sebagai berikut :
a) Static Text adalah jenis teks yang mempunyai karakter-karakter seperti teks biasa
pada umumnya.
b) Dynamic Text adalah jenis teks yang dapat menampilkan sifat teks yang dinamis
dan bisa dikontrol, contohnya skor pertandingan olah raga yang yang dapat
berganti sesuai dengan perolehan nilai dari pertandingan, nilai kurs mata uang
dalam bursa efek, dll.
Pengaturan vertical dan Horizontal
teks

12
c) Input Text adalah jenis teks yang dapat diisi oleh pengguna atau user dalam sebuah
form isian atau Input Text digunakan untuk menerima berbagai input dari user.
Teks yang ditulis atau dibuat dalam Flash orientasi dapat diubah sesuai dengan
kebutuhan. Orientasi teks dalam flash ada tiga macam, yaitu :
a. Horizontal, digunakan untuk membuat teks yang mengalir dari kiri ke kanan secara
horisontal seperti penulisan teks pada umumnya ( setting default).
b. Vertical Left-to-Right, digunakan untuk membuat teks yang mengalir ke bawah
secara vertikal dari kiri ke kanan.
c. Vertical Right-to-Left, digunakan untuk membuat teks yang mengalir ke bawah dari
kanan ke kiri.
C. Dasar Dasar Animasi Flash
1. Animasi Frame by Frame
Dasar pembuatan animasi pada Flash adalah pemanfaatan frame per frame
dalam pembuatannya. Animasi ini dilakukan dengan menempatkan gambar –gambar pada
tiap frame satu per satu. Jika posisi gambar tiap frame berjajar, maka pada saat dijalankan
gambar akan tampak berjalan/bergerak. Perhatikan contoh berikut :
Pada gambar diatas objek bola diletakkan pada frame per frame, dimana bola pada frame
1, 2, 3 dan 4 berada pada posisi yang sejajar dengan posisi Y tetap dan posisi X yang
berubah – ubah tiap framenya sehingga apabila di jalankan akan terlihat animasi bola yang
menggelinding dari kiri ke kanan.
2. Animasi Motion Tween
Cara membuat animasi untuk objek bergerak yang yang lebih sederhana adalah
menggunakan Animasi Motion Tween. Untuk Animasi Motion Tween cukup
menyediakan dua gambar. Gambar pertama diletakkan pada frame awal objek bergerak,
Frame 1
Frame 2
Frame 3
Frame 4

13
dan gambar kedua diletakkan pada posisi dan frame bendaberhenti bergerak.
Selebihnya, tahap bergerak akan berjalan secara otomatis antara kedua frame tersebut.
Untuk mempraktekkan Animasi Motion Tween, perhatikan langkah-langkah berikut.
Langkah 1. Buatlah objek yang akan digerakkan di frame 1.
Langkah 2. Copy frame 1 dengan cara tempatkan cursor di frame 1 kemudian klik
kanan dan pilih Copy frame. Selanjutnya tempelkan (paste) di frame 40,
dengan cara letakkan kursor di frame 40, klik kiri sekali untuk menandai
frame yang dipilih kemudian klik kanan dan pilih Paste frame. Tekan
tombol Q untuk mengaktifkan Free Transform, kemudian letakkan objek
di posisi akhir yang diinginkan, dengan cara menggeser objek tersebut.
Posisi Objek ketika di Frame 1

14
Langkah 3. Arahkan cursor di keyframe 1, kemudian klik kanan dan pilih Create
Motion Tween. Jika motion tween berhasil dibuat, maka indicator di
timeline aka nada tanda panah dari frame 1 sampai frame terakhir. Gambar
siap digerakkan dengan cara menekan tombol enter.
3. Motion Guide
Agar gerakan tidak monoton, atau mengikuti arah yang diinginkan maka perlu
dibuatkan jalur gerakan objek tersebut atau lebih dikenal dengan istilah Motion Guide.
Cara membuat motion guide adalah sebagai berikut.
Langkah 1. Buatlah motion tween.
Langkah 2. Letakkan kursor di frame dimana motion tween dimulai, kemudian klik
Add Motion Guide . Akibatnya, layer akan bertambah 1 dan
bernama Guide Layer 1

15
Langkah 3. Buatlah lintasan gerak benda / objek di layer motion guide. Selanjutnya
tempatkan objek di frame 1 di awal lintasan , dan objek di frame terakhir
di khir lintasan
Aktifkan frame 1 layer 1, kemudian klik property. Akibatnya beberapa fitur dalam
animasi motion guid akan ditampilkan sebagai berikut.
Layer MotionGuide
AddMotion Guide
Posisi Awal Objek
Posisi AkhirObjek

16
Gamba : Custom Ease In/out
1. Scale : berguna untuk menyesuaikan ukuran benda awal ke akhir gerakan
2. Rotate: berguna untuk memutar objek selama bergerak. Pilihan yang disediakan
adalah Auto (otomatis), None (tanpa putaran), CW (berputar searah putaran
jarum jam), dan CCW (berputar beralawan dengan arah putaran jarum jam)
3. Orieth Path: perputaran yang dihasilkan menyesuaikan dengan lintasan.
4. Animasi Shape Tween
Untuk membuat perubahan bentuk dari bentuk I menjadi bentuk II digunakan apa yang
dinamakan Animasi Shape Tween. Adapun proses membuat animasi shape tween adalah
sebagai berikut.
Langkah 1. Buatlah objek awal di frame 1.
Langkah 2. Klik kanan di frame 40 pilih Insert Blank KeyFrame, Buatlah objek yang
berbeda dengan objek awal
ObjekLingkarandi
Frame 1

17
Langkah 3. Aktifkan frame 1, dengan cara klik frame 1. Kemudian di property
inspector, pada bagian tween, pilihlah shape
Langkah 4. Klik kanan di frame 70 pilih Insert Blank KeyFrame, Buatlah objek yang
berbeda dengan objek awal dan objek diframe 70 misalnya segi tiga :
Langkah 5. Aktifkan frame 40, dengan cara klik frame 40. Kemudian di property
inspector, pada bagian tween, pilihlah shape
D. MENGGUNAKAN SIMBOL, INSTAN, DAN SUARA
1. Mengenal Symbol, Instance, dan Library
Symbol adalah adalah objek induk yang dapat digunakan berulang kali pada dokumen
atau movie flash. Penggunaan symbol akan menyebabkan ukuran file lebih kecil dan
mempermudah proses editing file.
Instance adalah duplikat atau cloning dari objek induk. Tiap instance bisa berbeda
dalam hal ukuran, rotasi, atau transparansi. Setiap instance mempunyai sifat bawaan
dari symbol, maka perubahan pada symbol akan mempengaruhi seluruh instance secara
otomatis.
Kumpulan symbol akan disimpan dalam panel yang disebut Library. SElain lebih rapi,
penggunaan library akan memudahkan pada saat ingin menggunakan symbol-symbol
yang diperlukan dalam membuat animasi atau movie flash.
ObjekKotak di Frame
40
ObjekKotak di Frame
70

18
2. Mengenal Prilaku Symbol
Symbol mempunyai satu diantara tiga prilaku berikut:
1. Movie Clip: berprilaku sebagai animasi atau lash movie
2. Button: berprilaku sebagai tombol yang dapat diklik dalam animasi atau movie flash
3. Graphic: berprilaku sebagai gambar biasa
4. Membuat Symbol berupa Movie Clip
Untuk membuat symbol dapat menggunakan fasilitas Insert New Symbol atau
Ctrl+F8 atau langsung mengambil objek yang ada di stage kemudian Modify>convert
to symbol.
Sebagai contoh, perhatikan langkah-langkah berikut.
Langkah 1. Buatlah objek lingkaran di stage
Langkah 2. Pilihlah objek lingkaran
Langkah 3. Klik kanan pada objek dan pilih convert to symbol. Selanjutnya
ditampilkan kotak dialog convert to symbol seperti berikut
5. Membuat Symbol Button
Botton merupakan symbol yang dapat menjadi fasilitas interaksi antara user dan media
interaktif. Button nantinya dapat digunakan untuk mengeksekusi objek, animasi pada
media interaktif.
Langkah – langkah membuat symbol :
a. Langkah 1 : Buatlah objek berupa lingkaran
b. Langkah 2 : Seleksi objek lingkaran dan pilih convert to symbol. Selanjutnya pilih
Button pada kotak dialog Convert to Symbol.

19
c. Symbol berupa botton ini jika file dijalankan maka akan terlihat ada gambar tangan
ketika kursor kita letakkan diatasnya. Diperlukan adanya Actionscript untuk dapat
membuat symbol Botton ini berfungsi.
6. Membuat Animasi didalam Button
Langkah – langkah :
 Langkah 1 : Siapkan file Button yang akan diberikan animasi ( buka file pada
percobaan sebelumnya )
 Lankah 2 : Double klik pada objek Button, maka kita akan masuk kedalam stage
button. Seperti pada gambar berikut :
 Langkah 3 : objek button berada pada frame Up. Klik kanan pada layer Over >>
pilih insert keyframe. Berikan warna yang berbeda untuk button pada layer button.
Misalnya dengan warna hijau ( terserah yang anda inginkan ).
 Tekan Ctl + Enter untuk test movie
7. Import Gambar ke dalam dokumen Flash
Import Gambar ke Library dan stage
Flash menyediakan fasilitas import picture untuk mengimpor gambar dari program
grafik yang lain, misalnya gambar bertipe wmf, jpg,dll. Dengan menggunakan fasilitas
dapat diperoleh/memakai gambar yang sudah ada. Cara yang dilakukan adalah sebagai
berikut.

20
Langkah 1. Klik File>Imprt to Library selanjutnya akan muncul kotak dialog import to
Library.
Langkah 2. Cari file yang akan diimport (folder dan nama file), kemudian klik pada
file yang dipilih. Selanjtnya klik Open
Langkah 3. Untuk membuat instance, pilih symbol (sesuai dengan nama file) pada
panel Library, kemudian klik dan drag ke stage. (Objek otomatis sudah
dlam keadaan di kelompokkan/group)
Gambar telahmasukdi
Library

21
8. Animasi Alpha
Animasi Alpha digunakan untuk menampilkan objek seolah-olah muncul dari jauh
dengan gambar yang tidak jelas (kabur) kemudian menjadi jelas dan semakin jelas.
Adapun cara yang digunakan adalah sebagai berikut.
Langkah 1. Pilih atau buat instance di frame 1. Sebagai variasi, objek dikecilkan). Jika
objek yang dipilih bukanlah instance, maka animasi alpha tidak dapat
dijalankan.
Langkah 2. Insert keyframe di frame 20 (disesuaikan dengan keinginan)
Langkah 3. Tambahkan motion tween pada frame 1
Langkah 4. Klik keyframe 1 dan pilihlah objek instance pada stage. Kemudian pada
property inpector aturlah nilai Alpha: 5% (semakin kecil semakin kabur)
Langkah 5. Enter untuk menjalankan
9. Animasi Marking
Animasi masking digunakan untuk membuat objek seperti disorot, maksdunya objek
yang disorot akan tampak dan objek yang tidak disorot akan tidak tampak. Langkah –
langkah yang digunakan adalah sebagai berikut.
Contoh : disini kita akan membuat animasi text dengan masking. Adapun langkah –
langkah pembuatannya sebagai berikut :
 Langkah 1 : Siapkan sebuah layer ( Layer 1 ) ubah dengan nama text
 Langkah 2 : Ketikkan pada area stage berupa teks seperti pada contoh dibawah ini :

22
 Langkah 3 : Tambahan Layer ( Layer 2 ) berinama dengan “motion”
Pada layer ini buatlah sebuah objek berbentuk kotak/persegi berikan fill dengan
warna yang diinginkan misalnya seperti pada contoh berikut :
 Langkah 4 : Klik kanan pada layer 1 (text) di frame 20 pilih insert keyframe, Klik
kanan juga pada layer 2 (motion) di frame 20 pilih insert keyframe.
 Langkah 5 : Pada layer 2 (motion) tambahkan motion tween, geser objek kotak pada
frame ke 20, letakkan di akhir teks.
 Langkah 6 : Tambahkan sebuah layer baru (layer 3 ) beri nama masking. Copy dan
paste text pada layer 1 ke layer 3. ( Gunakan Paste In Place agar letak objek hasil
copy sama persis dengan aslinya )

23
 Langkah 7 : Klik kanan pada layer Masking >> pilih Mask. Maka hasilnya akan
seperti ini
 Tekan Ctl + Enter untuk test movie
10. Import Suara
Untuk mempercantik animasi yang dibuat, flash menyediakan fasilitas untuk
memasukkan suara dalam animasi. Cara yang bisa dilakukan adalah dengan cara
mengimpor suara, yaitu file-file yang bertipe/berformat WAV, AIFF, MP3.
Adapun langkah-langkahnya adalah sebagai berikut.
 Langkah 1. Siapkan file yang sudah ada animasinya. Misalkan animasi masking
pada percobaan sebelumnya. Tambahkan Layer baru ( layer 4 )
 Langkah 2. Di frame 1 layer 4, lakukan perintah import file yaitu File>import to
Library, pilih lagu yang disukai. Kemudian klik Open. Pada saat ini lagu belum bisa
didengarkan walaupun movie dijalankan.
 Langkah 3. Klik dan drag lagu yang diimport dari panel library ke stage. Akibatnya
indicator di timeline berubah seperti indicator gelombang suara.
Layer Masking

24
 Untuk mengedit suara dapat dilakukan dengan cara tempatkan kursor di frame layer
3 kemudian klik edit di property inspector.
E. ACTION SCRIPT
Action Script adalah bahasa pemrograman dalam flash. Action script dapat
digunakan dalam pembuatan animasi maupun movie interaktif. Penulisan script terbagi
menjadi dua yaitu frame script dan object script. Frame script adalah script yang diberikan
di frame. Frame yang ada script-nya, indicator keyframe akan berubah menjadi . Object
script adalah script yang diberikan pada objek tombol maupun movie klip. Untuk membuat
atau mengedit Action Script dilakukan di panel action.
Panel action akan aktif saat frame, tombol, atau instan movie klip dipilih. Berikut
adalah gambar panel action tersebut.
Action ToolBox adalah tempat yang berisi kumpulan action script yang disediakan oleh
flash. Cara penggunaannya adalah pilihlah kategori kemudian double klik pada action yang
diinginkan.
ActionBox
ScriiptPane
ScriptAsist

25
Script Pane adalah tempat penulisan script
Script Asist adalah fasilitas yang disediakan untuk mempermudah penulisan script hanya
dengan beberapa klik mouse.
1. Next Anda Preview
Action Next digunakan untuk berpindah ke frame selanjutnya secara berurutan. Action
Preview digunakan untuk berpindah ke frame sebelumnya secara berurutan. Didalam
Flash action next dan preview dapat berupa NextFrame dan NextScane, PrevFrame dan
PrevScane.
Langkah pembuatan botton Next dan Preview
 Langkah 1. Siapkan 2 buah layer, Layer 1 untuk teks dan Layer 2 untuk Botton.
 Langkah 2. Buatlah 2 buah objek botton berinama Next dan Preview
 Langkah 3. Berikan action script pada masing – masing objek botton, masing –
masing sebagai berikut :

Botton Next on (release) {
nextFrame();
}

26
Botton Preview on (release) {
prevFrame();
}
2. Stop and Play
Action stop digunakan untuk menghentikan animasi yang sedang dijalankan, sedangkan
Play digunakan untuk menjalankan animasi yang sedang berhenti.
Berikut ini adalah contoh penggunana action stop dan play.
Langkah 1. Siapkan animasi
Langkah 2. Klik di Keyframe 1 layer 1, selanjutnya action di bagian bawah stage untuk
memunculkan script pane. Setelah script pane siap, ketikkan di baris 1 script
stop ();. Jika dijalankan, maka animasi ini akan berhenti di frame 1. Ini
terjadi akibat adanya script stop () di frame 1.
Langkah 3. Buatlah layer baru ( layer btn ). Buatlah 2 buah objek button button start
dan button stop.
Langkah 4. Klik button Start kemudian masuk ke actionscript. Script pane akan
dimunculkan, selanjutnya ketikkan script berikut.
on (release) {
stop();
}
Langkah 5. Klik button Stop kemudian masuk ke actionscript. Script pane akan
dimunculkan, selanjutnya ketikkan script berikut.
on (release) {
Play();
}

27
3. Goto And Stop dan Goto And Play
Action GotoAnd Play digunakan untuk pindah ke frame atau scane atau movie
kemudian menjalankannya, sedangkan GotoAndStop adalah perintah untuk pindah ke
frame, scane atau movie dan kemudian berhenti.
Contoh :
 Buatlah sebuah movie dengan sebuah 2 buah layer didalamnya ( layer “teks” dan
layer “btn”
 Pada layer 1 (teks) frame 1 buatlah teks “PENDAHULUAN”, insert keyframe
pada frame 20, berikan nama frame pada kotak frame label dengan nama
“pendahuluan”

28
 Ketikkan teks “MATERI” pada frame 20. Insert keyframe pada frame 40. Lalu
berikan frame label di frame 20 dengan nama “materi”
 Ketikan teks “LATIHAN SOAL” pada frame 40 kemudian beri nama frame label
“latihan”.
 Dengan langkah yang sama untuk frame 60 dan berinama “keluar”
 Langkah berikutnya buatlah 4 buah objek button di layer botton yaitu button
pandahuluan, botton materi, botton, latihan dan keluar
Frame Label
Frame yang telah
diberi Label

29
 Agar botton yang kita buat dapat berfungsi sebagaiamana yang kita inginkan, button
tersebut harus diberikan actionscript.
Berikan actionscript Stop () pada frame label pendahuluan, materi, latihan dan exit.
Berikan actionscript untuk button pandahuluan, botton materi, botton, latihan dan
keluar. Masing – masing :
Botton materi on (release) {
gotoAndStop("materi");
}
Botton Pendahuluan on (release) {
gotoAndStop("pendahuluan");
}
Botton Latihan on (release) {
gotoAndStop("latihan");
}
Button Exit on (release) {
gotoAndPlay("keluar");
}
4. Membuat Objek Berputar dengan Actionscript
 Langkah 1 : Siapkan sebuah Layer, buatlah dua buah objek misalnya berbentuk
kotak atau jarum. Seperti gambar berikut :

30
 Langkah 2 . Klik objek warna merah >> Tekan F9 untuk masuk ke Action Pane.
Tuliskan script berikut :
 Langkah 3. Klik objek warna biru (berbentuk kotak). Tekan F9 untuk masuk ke area
Action pane. Tuliskan script berikut :
5. Load Movie
Load Movie digunakan untuk memanggil ekternal movie untuk ditampilka kedalam
slide movie yang sedang berjalan.
Untuk dapat diload, file movie harus berada pada satu folder dengan file movie
mainnya.
Langkah – langkah sebagai berikut :
 Langkah 1. Siapkan Movie Clipt yang akan diload ( misal dengan nama
“objek.swf”). Objek dapat berupa video yang diubah terlebih dahulu menjadi
berextensi .swf ( anda dapat merubah extensi berbagai video menjadi .swf dengan
menggunakan format factory.

6. Menggerakkan Objek dengan Keyboard
Kita bisa menggerakan objek dengan mouse ataupun dengan keyboard. Di tutorial ini
kita akan menggunakan keyboard sebagai pengontrolnya. Tombol yang digunakan pun
yang sudah umum digunakan yaitu tombol panah atas, kanan, kiri, bawah.
o Buatlah objek yang akan digerakan, sebagai contoh saya menggunakan gambar
sebuah pesawat.
o Seleksi objek tadi lalu tekan F8. Pada kotak dialog yang muncul pilih Movie Clip
sebagai type lalu tekan OK

31
o Seleksi movie clip yang baru dibuat tadi lalu tekan F9. Pada kotak actions yang
muncul tuliskan script di bawah ini :
onClipEvent (load) {
kecepatan = 10;
}
onClipEvent (enterFrame) {
//ketika tombol panah kiri pada keyboard ditekan
if (Key.isDown(Key.LEFT)) {
//posisi x movie clip ini akan dikurangai kecepatan / movie clip ini
bergerak ke kiri
_x -= kecepatan;
}
//ketika tombol panah kanan pada keyboard ditekan
if (Key.isDown(Key.RIGHT)) {
//posisi x movie clip ini akan ditambah kecepatan / movie clip ini
bergerak ke kanan
_x += kecepatan;
}
//ketika tombol panah atas pada keyboard ditekan
if (Key.isDown(Key.UP)) {
//posisi y movie clip ini akan dikurangai kecepatan / movie clip ini
bergerak ke atas
_y -= kecepatan;
}
//ketika tombol panah bawah pada keyboard ditekan
if (Key.isDown(Key.DOWN)) {
//posisi y movie clip ini akan ditambah kecepatan / movie clip ini
bergerak ke bawah
_y += kecepatan;
}
}
o Tekan CTRL + Enter untuk test movie

32
BAB. II
MEMBUAT MEDIA INTERAKTIF
DENGAN MACROMEDIA FLASH 8
A. Pengertian Media Interaktif
Media berasal dari bahasa latin yang merupakan bentuk jamak dari “Medium” yang
berarti “Perantara” atau “Pengantar” yaitu perantara atau pengantar sumber pesan dengan
penerima pesan. Menurut wikipedia media pembelajaran interkatif adalah sebuah metoda
pembelajaran berbasis teknologi informasi dan komunikasi. Media pembelajaran interaktif
merupakan media penyampaian pesan antara tenaga pendidik kepada peserta didik
yang memungkinkan komunikasi antara manusia dan teknologi melalui sistem dan
infrastruktur berupa program aplikasi serta pemanfaatan media elektronik sebagai bagian
dari metode edukasinya.
Manfaat dari media pembelajaran interaktif menurut wikipedia, adalah :
1. Penyampaian materi pembelajaran yang dapat diseragamkan
Dengan bantuan media pembelajaran, penafsiran yang berbeda antar tenaga pendidik
dapat dihindari dan dapat mengurangi terjadinya kesenjangan informasi diantara
peserta didik dimanapun berada.
2. Proses pembelajaran menjadi lebih jelas dan menarik
Media dapat menampilkan informasi melalui suara, gambar, gerakan dan warna, baik
secara alami maupun manipulasi, sehingga membantu tenaga pendidik untuk
menciptakan suasana belajar menjadi lebih hidup, tidak monoton dan tidak
membosankan.
3. Proses pembelajaran menjadi lebih interaktif
Dengan media akan terjadinya komukasi dua arah secara aktif.
4. Efisiensi dalam waktu dan tenaga
Dengan media tujuan belajar akan lebih mudah tercapai secara maksimal dengan waktu
dan tenaga seminimal mungkin. Tenaga pendidik tidak harus menjelaskan materi
ajaran secara berulang-ulang, sebab dengan sekali sajian menggunakan media, peserta
didik akan lebih mudah memahami pelajaran.
5. Meningkatkan kualitas hasil belajar peserta didik
Media pembelajaran dapat membantu peserta didik menyerap materi belajar lebih
mandalam dan utuh.

33
6. Media pembelajaran interaktif
Proses belajar dapat dilakukan di mana saja dan kapan saja. Media pembelajaran dapat
dirangsang sedemikian rupa sehingga peserta didik dapat melakukan kegiatan belajar
dengan lebih leluasa dimanapun dan kapanpun tanpa tergantung seorang guru.
7. Media dapat menumbuhkan sikap positif peserta didik terhadap materi dan proses
belajar.
Media dapat membantu peserta didik agar lebih percaya diri terhadap kemampuan
akademik dan potensi bakat yang dimiliki.
8. Mengubah peran tenaga pendidik ke arah yang lebih positif dan produktif.
Tenaga pendidik menjadi tenaga yang kompeten karena mampu memanfaatkan
teknologi yang tepat guna.
B. Pembuatan Storyboard
Story board merupakan penjabaran dari alur pembelajaran yang sudah didisain (flow
chart) yang berisi informasi pemebelajaran dan prosedur serta petunjuk pembelajaran.
Story board menunjukkan apa aja aktivitas yang dilakukan siswa selama mengikkuti
pembelajaran denga model pembelajaran multimedia yang dibangun.
Fungsi story board :
a. Sebagai media yang memberikan penjelasan secara lebih lengkap apa yang terdapat
pada setiap alur dalam flow charts
b. Sebagai pedoman bagi programmer dan animator dalam merealisasikan rencana
program ke dalam bentuk bahasa program dan animasi
c. Sebagai pedoman bagi pengisi suara ( narrator ) dan teknisi rekaman dalam merekam
suatu untuk kebutuhan naskah
d. Sebagai dokumen tertulis. Apabila ada pihak yang menginginkan data tertulis
(naskah) dari program yang sudah dibuat, maka dapat menggunakan storyboard
e. Sebagai bahan dalam pembuatan manual book. Setiap program yang telah dibuat,
sebaiknya dibuatkan menual book yang berfungsi sebagai buku petunjuk
penggunaan dan isi program, dengan merujuk storyboad yang ada. Hal ini juga
diperlukan apabila program akan dibuat hak paten yang mempersyaratkan story
board dan manual book.

34
C. Flowchat
Flow charts adalah suatu bagan yang berisi symbol – symbol grafis yang menunjukkan
arah aliran kegiatan dan data – data yang dimiliki program sebagai suatu proses
eksekusi.
Berikut ini adalah flow chart dari media interaktif yang kita buat :
D. Membuat Media Interaktif
Media interkatif yang akan kita buat adalah media interktif berupa penggabungan model
driil, model simulasi dan model game. Kita akan membuat media interaktif ini dalam satu
file movie, semua modul diletakkan dalam satu file.
Langkah – langkah Pembuatan :
1. Buka Aplikasi Macromedia Flash 8 >> pilih Creat New Flash Document
2. Atur dimensi media yang akan kita buat melalui menu Properties
PENDAHULUAN MATERI LATIHAN
SOAL
GAME PRAKTIKUM MUSIC EXIT
OPENING
START
MENU UTAMA

35
3. Pada kotak Dimensions isikan 900px untuk with dan 600px untuk height.
4. Pada media yang akan kita buat, kita memerlukan 8 Scene. Secara default ketika kita
membuka aplikasi flash akan dihadapkan dengan 1 scene, untuk menambahkan scene
Klik Insert >> Pilh Scene.
Untuk melihat scene yang telah kita tambahkan Klik Windows >> Others Panel >>
Scene
5. Rubahlah nama scane dengan cara klik 2 x pada masing – masing scane. Rubahlah
nama scene 1 menjadi “loader”, scena 2 menjadi “home”, scene 3 menjadi
“pendahuluan”, scene 4 menjadi “materi”, scene 5 menjadi “latihan”, scene 6 menjadi
“game”, scene 7 menjadi “lab”, scene 8 menjadi “music” dan scene 9 menjadi
“aboutme”. Sehingga akan terlihat seperti berikut ini :
a) Membuat Modul Loader
Loader adalah halaman pertama ketika pemakai/user masuk ke dalam
program/menggunakan aplikasi dalam hal ini Media interaktif. Contoh halaman loading :

36
Langkah – langkah membuat halaman loader adalah sebagai berikut :
1. Langkah 1. Pastikan anda berada pada scene 1 ( scene loader ). Secara default pada
scene terdapat 1 buah layer. Tambahkan dua buah Layer, beri nama “load” dan “teks”.
2. Langkah 2. Buatlah sebuah objek kotak warna hitam dan memenuhi lebar dan tinggi
stage pada scene 1 pada layer 1 ( ini akan berfungsi sebagai baground).
3. Langkah 3. Pada Layer Loader buatlah sebuah objek kotak warna putih dengan ukuran
22 x 300 px ( sesuaikan dengan keinginan anda), seleksi kotak tersebut dan ubahlah
menjadi sebuah movie clip . Pada layer teks tambahkan objek teks “Loading …”.
4. Langkah 4. Klik kanan pada frame 50 untuk masing – masing layer (bg, loader dan
teks).

37
5. Langkah 5. Tambahkan Motion Tween pada Layer load. Pada frame 1 ubahlah
ukuran objek loader menjadi ukuran 22px x 8px. Apabila dijalankan nanti akan terlihat
animasi kotak dari pendek menjadi panjang.
b) Membuat Halaman Home
Halaman “Home” ini merupakan halaman utama setelah aplikasi loading. Halaman
ini berupa halaman judul aplikasi dimana didalamnya terdapat menu – menu untuk menuju
kehalaman lainya seperti halaman pendahuluan, materi, latihan dan lain – lain.
Adapun langkah – langkah dalam pembuatannya adalah sebagai berikut :
Langkah 1. Pastikan anda berada di scene “home”. Secara default hanya terdapat satu buah
layer pada scene home yaitu layer 1. Tambahkan 4 buah layer sehingga
berjumlah lima berinama masing – masing : bg, isi, bingkai, btn dan action.
Langkah 2. Insert gambar sebagai baground ke dalam Library >> Drag gambar kedalam
area stage. Sesuaikan lebar gambar dengan area stage.
Lebar kotakpada frame 1
Labar kotak pada
frame 50
Scene Home

38
Langkah 3. Pada layer “bingkai” buatlah objek kotak, disain sesuai dengan selera anda.
Letak kotak berada disamping kiri, ditas dan dibawah area stage. Seperti pada
gambar berikut :
Langkah 4. Membuat Tombol Navigasi. Pastikan anda berada pada layer “btn”. Buatlah
beberapa buat botton yaitu “botton home”, “botton pendahuluan”, “botton
Materi”, “botton latihan”,”botton laboratorium”,”botton game”,”botton music”
dan “botton aboutme”.

39
Langkah 5. Berikan action script pada masing – masing botton yang telah dibuat masing –
masing sebagai berikut :
Nama Botton Action script
Botton Home on (release) {
gotoAndPlay("home",1);
}
Botton Pendahuluan on (release) {
gotoAndPlay("pendahuluan",1);
}
Botton materi on (release) {
gotoAndPlay("materi",1);
}
Botton latihan on (release) {
gotoAndPlay("latihan",1);
}
Botton praktikum on (release) {
gotoAndPlay("lab",1);
}
Botton game on (release) {
gotoAndPlay("game",1);
}
Botton Aboutme on (release) {
gotoAndPlay("aboutme",1);
}
Botton music on (release) {
gotoAndPlay("musik",1);
}
Botton exit on (release) {
fscommand("quit");
}
Botton facebook Melalui menu windows pilih behavior

40
Pilih Go to Web Page
isikan alamat facebook anda kedalam kotak dialog >>
OK
Langkah 6. Pada layer action berikan scip berikut : stop();
Langkah 7. Pada layer isi buatlah teks yang merupakan judul/penjelasan dari media
interaktif yang kita buat.
Catatan : anda dapat memberikan efek animasi pada teks judul agar lebih menarik.
Mengkopi disain Halaman Home untuk disain halaman lainnya
Agar kita bisa mengakses halaman yang satu dari halaman lainnya, Disain halaman
home harus sama dengan halaman lainnya baik itu halaman pendahuluan, halaman
latihan, halaman game, halaman praktikum, halaman lab, dan music. Terutama disain
botton dan action scriptnya.

41
Oleh karena itu disain pada halaman home yang telah kita buat harus dikopikan
kehalamannya lainnya. Adapun langkah – langkahnya adalah sebgai berikut :
1. Blok frame satu pada layer bg, layer isi, layer bingkai, layer botton dan layer action
dengan cara : Tekan tombol SHIFT pada keybord >> Klik pada layer bg sampai
layer action
2. Klik kanan mouse >> pilih Copy Frame
3. Buka halaman pendahuluan (scene pendahuluan) >> klik kanan pada frame 1 >>
pilih Paste Frame. Setelah langkah diatas mak a halaman pendahaluan yang tadinya
kosong menjadi seperti ini :
Tampilan halaman pendahuluan

42
4. Dengan langkah yang sama, lakukan copy paste frame pada halaman yang lainnya.
c) Membuat Halaman Pendaluan
Dari langkah yang telah kita lakukan diatas (Mengkopi disain Halaman Home untuk disain
halaman lainnya), kita telah mendapatkan disain halaman pendahuluan seperti pada
halaman home. Langkah selanjutnya kita akan mengisi halaman pendahuluan ini dengan :
Judul Materi, Standar Kompetensi, Komptensi Dasar, Tujuan Pembelajaran.
Copy teks judul materi, standar kompetensi, kompetensi dasar dan tujuan yang ada pada
file storyboard dan paste kedalam project media yang kita buat pada frame 1 layer isi.
Sehingga akan tampak seperti pada gambar berikut ini :
d) Membuat Halaman Materi
Pada langkah ini kita hanya mengedit pada frame isi dan penambahan tombol next
dan tombol preview. Fungsi tombol next dan preview ini adalah sebagai navigasi untuk
berpindah dari satu frame ke frame lainnya secara berurutan. Sehingga tampak materi yang
kita sampaikan tersaji secara urut.
 Menambah tombol /botton Next dan Preview
Langkah 1. Buatlah dua buah objek lingkaran dengan segi tiga didalamnya. Disain
seperti berikut ini :
Tekspada frame 1 layerisi

43
Langkah 2. Compert objek menjadi movi clip botton. Seleksi objek “linkaran + next”
>> pilih modify >> Comvert to Symbol>> pada kotak dialog yang muncul
isikan nama “btn_next” dan pilih tipe “botton”.
Langkah 3. Compert objek menjadi movi clip botton. Seleksi objek “linkaran + prev”
>> pilih modify >> Comvert to Symbol>> pada kotak dialog yang muncul
isikan nama “btn_prev” dan pilih tipe “botton”.
Langkah 4. Berikan action scrip pada masing – masing botton yang telah kita buat.
Botton Next on (release) {
nextFrame();
}
Botton Preview on (release) {
prevFrame();
}
 Membuat Isi halaman Materi
Langkah 1. Persiapkan beberapa buah frame pada layer isi ( tergantung banyanya
materi yang akan kita masukkan ) caranya dengan mengklik pada layer misalnya layer
10 >> pilih Insert Keyframe.
Langkah 2. Dengan cara yang sama pada langkah 1 : insert keyframe di frame 20 pada
layer bg, layer isi, layer bingkai, layer btn dan layer action.
Langkah 3. Pada setiap frame pada layer action tambahkan script berikut :
Stop();
Langkah 4. Ketikkan materi yang ingin disampaikan pada layer isi – frame 1. Misalnya
seperti pada storyboad yang telah dibuat.
Langkah 5. Menambahkan file ilustasi/animasi materi (misalnya animasi pristiwa
konduksi).
Buatlah sebuah kotak berinama “load_mc” dengan instance name “gambar” dan sebuah
botton berinama “btn_load” dengan instance name “btn_load” ini berfungsi untuk
memanggail file konduksi.swf. Berikan script sebagai berikut :
btn_load.onPress = function() {
_root.createEmptyMovieClip("gambar", 0);
gambar.loadMovie("konduksi.swf", 1);
gambar._x=250
gambar._y=250

44
};
Catatan : file konduksi.swf dilatakkan pada folder yang sama dengan proyek yang kita
buat.
e) Membuat Halaman Latihan Soal
Halaman latihan ini berisi soal soal latihan yang terdiri dari 10 butir soal pilihan ganda.
Pada setiap frame dalam layer ini terdapat botton jawaban a, b, c dan d, botton “soal
selanjutnya”, “botton soal sebelumnya”. Untuk lebih jelasnya ikuti langkah – langkah
berikut ini :
1. Langkah 1. Siapakan 10 butir soal pilihan ganda lengkap dengan opsi jawaban serta
kunci jawabannya.
2. Langkah 2. Pastikan anda berada pada scene “latihan”. Pada frame 1 Layer “isi”.
Buatlah disain pada frame 1 seperti pada gambar berikut ini :

45
Catatan : Pada frame ini terdapat botton “mulai” untuk memulai latihan soal.
Script botton Mulai on (release) {
gotoAndPlay(2);
}
3. Langkah 3. Untuk semua Layer kecuali Layer isi. Klik kanan pada frame 12 >> pilih
insert KeyFrame
4. Langkah 4. Pada Layer isi : klik kanan pada frame 2 >>pilih insert keyframe. Dengan
langkah yang sama untuk frame 3 sampai frame 12.
5. Langkah 5. Pada layer 2 sampai 11. Buatlah 4 botton berinama “Instance Name”
masing masing : btn_a, btn_b, btn_c dan btn_d
6. Langkah 6. Pada frame 2 masukkan soal no.1 beserta opsi jawabannya seperti pada
gambar berikut :
7. Masukkan soal no.2 sampai no. 10. Dengan langkah yang sama untuk frame 2 sampai
dengan frame 11.
8. Langkah 7. Disain halaman pensekoran pada frame 12. Frame ini merupakan halaman
akhir dari latihan dimana pada halaman ini terdapat pensekoran terhadap hasil jawaban
latihan. Disain seperti pada gambar berikut ini :

46
 Buatlah static text “ selamat anda telah menyelesaikan soal latihan, nilai anda
adalah :”
 Tambahkan sebuah dynamic text dibawah “nilai anda adalah:”. buat Dynamic Text
kosong dengan cara klik Text Tool (A) pada panel Tools, pastikan panel Properties
aktif, kemudian pilih Dynamic Text dengan ukuran font 50, drag ke kanan. Pada
kotak ‘Var’, ketik ‘skor’
 Dibawahnya tambahkan static text “Keriteria Ketuntasan Minimal : 70”
 Dibawahnya buat lagi Dynamic Text kosong dengan nama variable “keterangan”
9. Langkah 8. Menambahkan action script untuk setiap frame pada latihan soal sebagai
berikut :
Frame 1 stop();
score = 0;
btn_mulai.onPress = function() {
nextFrame();
};
Frame 2 stop();
onEnterFrame = function () { skor = +score;};
btn_a.onPress = function() {
score += 20;
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 1 adalah A
terdapat script
score+=20 artinya
ketika tombol A di

47
btn_b.onPress = function() {
nextFrame();
};
btn_c.onPress = function() {
nextFrame();
};
btn_d.onPress = function() {
nextFrame();
};
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam
hal ini adalah soal
nomor 2.
Frame 3 stop();
score += 20;
nextFrame();
};
nextFrame();
};
nextFrame();
};
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 2 adalah A
terdapat script
score+=20 artinya
ketika tombol A di
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam
hal ini adalah soal
nomor 3.
Frame 4 stop();
nextFrame();
};
nextFrame();
};
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 3 adalah D
terdapat script
score+=20 artinya
ketika tombol D di
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam

48
score += 20;
nextFrame();
};
hal ini adalah soal
nomor 4.
Frame 5 stop();
score += 20;
nextFrame();
};
nextFrame();
};
nextFrame();
};
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 4 adalah A
terdapat script
score+=20 artinya
ketika tombol A di
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam
hal ini adalah soal
nomor 5.
Frame 6 stop();
nextFrame();
};
nextFrame();
};
score += 20;
nextFrame();
};
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 5 adalah C
terdapat script
score+=20 artinya
ketika tombol C di
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam
hal ini adalah soal
nomor 6.

49
Frame 7 stop();
nextFrame();
};
nextFrame();
};
nextFrame();
};
score += 20;
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 6 adalah D
terdapat script
score+=20 artinya
ketika tombol D di
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam
hal ini adalah soal
nomor 7.
Frame 8 stop();
nextFrame();
};
nextFrame();
};
score += 20;
nextFrame();
};
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 7 adalah C
terdapat script
score+=20 artinya
ketika tombol C di
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam
hal ini adalah soal
nomor 8.
Frame 9 stop();
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 8 adalah C
terdapat script
score+=20 artinya

50
nextFrame();
};
score += 20;
nextFrame();
};
nextFrame();
};
ketika tombol C di
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam
hal ini adalah soal
nomor 9.
Frame 10 stop();
score += 20;
nextFrame();
};
nextFrame();
};
nextFrame();
};
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 9 adalah A
terdapat script
score+=20 artinya
ketika tombol A di
klik score akan
bertambah 20 poin
NextFrame();
artinya ke frame
berikutnya dalam
hal ini adalah soal
nomor 10.
Frame 11 stop();
score += 20;
nextFrame();
};
nextFrame();
};
Kita asumsikan
bahwa jawaban dari
soal no 10 adalah A
terdapat script
score+=20 artinya
ketika tombol A di
klik score akan
bertambah 20 poin
NextFrame();

51
nextFrame();
};
nextFrame();
};
artinya ke frame
berikutnya dalam
hal ini adalah
halaman skor.
Frame 12 if (score>=80) {
keterangan = "Bagus! Pertahankan Prestasi!";
}
if (score<=60) {
keterangan = "Anda belum tuntas. Belajar lagi,
ya!";
}
Apabila nilai skor
(variable skor
bernilai >=80 maka
akan muncul
keterangan "Bagus!
Pertahankan
Prestasi!" pada
kotak keterangan
 Tambahkan sebuah botton berinama btn_ulang pada frame skor
Btn_ulang on (release) {
gotoAndPlay(1);
}
f) Membuat Halaman Praktikum
Pada halaman praktikum ini disajikan video pembelajaran/ aktifitas praktikum
tentang cara perpindahan panas. Video praktikum ini bertipe .swf yang akan kita load
menggunakan action cript, tetapi sebelumnya jika file pada mulanya adalah sebuah video
maka harus dirubah kedalam bentuk swf. Anda dapat menggunakan software seperti format
factory untuk merubahnya.
Saya asumsikan kita telah memiliki sebuah file video berektensi swf, letakkan
file video pada folder yang sama dengan media yang kita buat, berinama “praktik”.
Langkah – langkah memasukkan video praktk kedalam media interaktif yang kita buat :
1. Langkah 1. Pastikan anda berada pada scene “Lab”.
2. Langkah 2. Buatlah sebuah botton, berinama “btn_panggil” dengan instance name
“btn_panggil”
3. Langkah 3. Buatlah sebuah kotak dengan ukuran 200x200px pada stage. Berinama
kotak tersebut dengan nama “mc_praktik” dan instance name “mc_prakatik”.

52
4. Langkah 4. Klik frame 1 pada layer action, berikan script berikut :
btn_panggil.onPress = function() {
_root.createEmptyMovieClip("mc_panggil", 1);
mc_panggil.loadMovie("praktik.swf", 1);
mc_panggil._x=280
mc_panggil._y=180
};
Ketika botton video di klik maka akan memanggil file praktik.swf

53
5. Tambahkan botton play and stop berinama instance name pada masing – masing botton
“btn_play” dan “btn_stop”
6. Tambahkan script berikut pada layer action
btn_play.onPress = function() {
_root.MovieClip("mc_panggil", 1);
mc_panggil.play("praktik.swf", 0);
mc_panggil._x=555
mc_panggil._y=182
};
btn_stop.onPress = function() {
_root.MovieClip("mc_panggil", 1);
mc_panggil.stop("praktik.swf", 0);
mc_panggil._x=555
mc_panggil._y=182
};

54
g) Membuat Halaman Game
Game yang akan kita buat disini adalah game Teka Teki Silang Sains. Rancangan gamenya
adalah sebagai berikut :
Soal :
Mendatar
2 Alas pada gagang seterika terbuat dari benda bersifat …(isolator)
5 Benda yang dapat menghantarkan panas dengan baik.. (konduktor)
6 Contoh benda yang bersifaat konduktor … (besi)
Menurun
1 Contoh benda isolator yang biasa di jadikan gagang pada panci … (plastik)
3 Pada saat kita memasak air terjadi pepindahan panas pada air sercara … (konveksi)
4 Kuat, keras dan mengkilap adalah sifat benda .. (logam)
7 Cahaya matahari sampai ke bumi perpindah dengan cara … (radiasi)
L
P O
L K G
A I S O L A T O R
S N M
T V
I E
K O N D U K T O R
S A
B E S I D
I
A
S
I
1
2
3
4
5
6
7

55
Langkah – langkah pembuatan :
1. Langkah 1. Hitunglah jumlah karakter huruf yang kita gunakan pada teka – teki tersbut
: misalnya jumlah Huruf A = 10 huruf, Huruf B = 4 dst.
2. Buatlah rancangan teka – teki pada stage media yang kita buat. Pastikan anda berada
pada scene “game”. Tambahkan 4 buah frame pada masing – masing layer.
3. Pada frame 1 buatlah static teks berisi petunjuk permainan dan sebuah objek botton
stara beri instance name “mulai”.
Rancangan pada frame 1
Rancangan pada frame 2

56
Rancangan pada frame 3 dan 4
4. Langkah 3. Buatlah input text pada setiap kotak teka – teki silang. Isi pada kotak
variable dengan nama yang sama dengan teks isian.misalnya : kotak yang berisi huruf
M diberi nama variable = “m” (tanpa tanda kutip). Jika terdapat lebih dari 2 huruf yang
sama berikan nama variable “m1, m2 …. dst
Berikut disain teka – teki silang dengan variablenya :
L2
P O3
L1 K2 G
A1 I2 S2 O2 L3 A2 T3 O4 R2
S1 N2 M
T1 V
I1 E2
K1 O1 N1 D1 U K3 T 2
O
5 R1
S3 A3
B E1 S4 I3 D2
I4
A4
S5
I5
Kotakvariable teks

57
5. Langkah 4. Buatlah sebuah botton dengan nama cek dan instance name “btn_cek”.
6. Langkah 5. Buatlah 7 movie clipt masing – masing bernama : cek1, cek2, cek3, cek4,
cek5, cek6 dan cek7. Dan dengan instance name masing – masing : “btn_cek1”,
“btn_cek2”, “btn_cek3” sampai “btn_cek7”. Berikan efek tranfaran 0% pada masing –
masing cek btn. Letakkan cek botton di depan masing – masing soal 1 – 7.
7. Langkah 6. Membuat Timer pengerjaan soal
 Siapkan 2 buah dynamic text : dynamic text 1 sebagai menit, diynamic text 2
sebagai sekon.
 Berikan variable pada dynamic text masing – masing : dynamic text 1 : “minut”
dynamic text 2 : “second”.
8. Langkah 7. Masukkan script berikut kedalam action script
stop();
fps = 0;
detik = 0;
menit = 1;
waktu_hidup = false;
onEnterFrame = function () {
if (menit<10) {
_root.minute = "0"+menit;
} else {
_root.minute = menit;
}
if (detik<10) {
_root.second = "0"+detik;
} else {
_root.second = detik;

58
}
mulai.onRelease = function() {
waktu_hidup = true;
};
if (waktu_hidup) {
fps++;
if (fps == 30) {
detik -= 1;
fps = 0;
}
if (menit>0 && detik == 0) {
menit -= 1;
detik = 59;
}
}
if (menit == 0 && detik == 0 && btn_cek1 != 100 && btn_cek2._alpha != 100 &&
btn_cek3_alpha != 100 && btn_cek4._alpha != 100 && btn_cek5._alpha != 100&&
btn_cek6._alpha != 100 && btn_cek7._alpha != 100) {
gotoAndStop(3);
}
if (btn_cek1._alpha == 100 && btn_cek2._alpha == 100 && btn_cek3._alpha == 100
&& btn_cek4._alpha == 100 && btn_cek5._alpha == 100 && btn_cek6._alpha == 100
&& btn_cek7._alpha == 100 && detik>0) {
gotoAndStop(4);
}
btn_cek.onRelease = function() {
//soal menurun 1
if (p == "p" && l1 == "l" && a1 == "a" && s1 == "s" && t1 == "t" && i1 ==
"i"&& k1 == "k") {
btn_cek1._alpha = 70;
} else {

59
}
//soal mendatar 2 isolator
if (i2 == "i" && s2 == "s" && o2 == "o" && l3 == "l"&& a2 == "a"&& t3 ==
"t"&& o4 == "o"&& r2 == "r") {
} else {
}
//soal menurun konveksi 3
if (k2 == "k" && o2 == "o" && n2 == "n" && v == "v" && e2 == "e"&& k3
== "k"&& s3 == "s"&& i3 == "i") {
} else {
}
//soal menurun 4 logam
if (l2 == "l" && o3 == "o" && g == "g" && a2 == "a" && m == "m") {
} else {
}
//soal mendtar 5 konduktor
if (k1 == "k" && o1 == "o" && n1 == "n" && d1 == "d" && u == "u" && k3
== "k" && t2 == "t"&& o5 == "o"&& r1 == "r") {
} else {
}
//soal mendtar 6 besi
if (b == "b" && e1 == "e" && s4 == "s" && i3 == "i" ) {
} else {
}

60
//soal menurun 7 radiasi
if (r1 == "r" && a3 == "a" && d2 == "d" && i4 == "i" && a4 == "a" && s5
== "s" && i5 == "i") {
} else {
}
};
};

PEMBELAJARAN BERBASIS TIK

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to PEMBELAJARAN BERBASIS TIK

Similar to PEMBELAJARAN BERBASIS TIK (20)

PEMBELAJARAN BERBASIS TIK