Media Pembelajaran Interaktif dengan FlashDemo Pro Version 3.0
Modul
Pelatihan Pembuatan Media Pembelajaran Matematika dengan
Menggunakan Perangkat Lunak FlashDemo Pro Version 3.0
bagi Guru Sekolah Menengah Di DIY
Media Pembelajaran Interaktif dengan
FlashDemo Pro Version 3.0
Oleh :
Nur Hadi Waryanto, S.Si
Laboratorium Komputer
Jurusan Pendidikan Matematika
Fakultas Matematika dan Ilmu Pengetahuan Alam
Universitas Negeri Yogyakarta
2007
FlashDemo Pro Version 3.0
FlashDemo Pro adalah sebuah software yang mudah pengoperasiannya untuk
membuat professional demos dan tutorial tanpa harus menguasai suatu bahasa
permrograman.
FlashDemo
Pro
dibuat
oleh
Longtion
Software
Inc.
(http://www.longtion.com) Suatu presentasi, tutorial, demo, dengan menggunakan
FlashDemo Pro dapat debuat tanpa membutuhkan waktu yang lama.FlashDemo Pro
sangat fleksibel dan mudah pengoperasiannya.
File FlashDemo Pro dapat di Publish dalam beberapa format file, yaitu :
•
•
•
•
Flash Movie (.swf)
Executable File (.exe)
HTML File (.htm)
AutoRun CD/DVD Files or burn CD/DVD directly with built‐in CD Burner
Untuk mengoperasikan FlashDemo Pro dibutuhkan spesifikasi System sebagai
berikut :
Minimum system configuration
Microsoft Windows 2000
800x600 screen resolution with 16‐bit colors
100 MB free disk space
128 MB RAM
Recommended system configuration
Microsoft Windows XP
1024x768 screen resolution with 16.7 million colors
100 MB free disk space
128 MB RAM
CD‐ROM or DVD‐ROM drive
2
Area Kerja Flash
hDemo Pro
o 3.0
Scene Panel
M
Menu
Bar
Tool Baar
TimeeLine Panell Scene
Propertties Panel
buat Demo
o dengan FllashDemo PRo
Memb
1. Klik File >> New dan atur proprretiesnya seebagai berik
kut
2. Atur men
nu Animatio
on pada An
nimation Pa
anel seperti dibawah ini
3
3. Buka Pan
nel Galery dan tambaahkan Image1.fdo kee scene den
ngan cara Drag
D
and Drop image
4. Buka Pan
nel Timelin
ne dan geserr Image1 m
mulai pada d
detik 1 (1S)
5. Buka Panel Animatiion dan atu
ur animasin
nya seperti d
dibawah in
ni
nel Galery d
dan tambah
hkan Ballon
n8.fdo ke sccene
6. Buka Pan
4
7. Atur Prop
perties Ballo
on8.fdo seb
bagai beriku
ut
perties Pan
nel klik Texxt kotak textt
8. Pada Prop
dalam jendeela Text Ediitor
9. Ubah tekss tersebut d
nt dengan k
klik kotak Font di Prroperties P
Panel
100. Atur jeniss font dan ukuran fon
dan pilih jenis dan u
ukuran font di kotak Fo
ont Editor
5
masi dari Baalloon8.fdo pada Anim
mation Pan
nel seperti d
dibawah inii
11. Atur anim
meline Pane
el dan geserr Ballon8.fd
do dimulai dari detik k
ke‐3,5 (3,5 ss)
122. Buka Tim
133. Tambahkan Label1 d
dengan klik
k Add Labe
el pada men
nu Toolbarr
144. Tambahkan Teks”FllashDemoP
Pro”pada Label1
L
terseebut dengan
n mengetik
kkan
ption di paanel Properrties Panel, dan atur p
properties llabel
teks padaa kotak Cap
(jenis, uku
uran dan w
warna font) p
pada kotak
k font di pan
nel propertties
6
155. Atur anim
masi Label d
di Animatiion Panel sseperti dibaawah ini
166. Atur timeeline Label1
1 di panel tiimeline
177. Tambahkan Label1 d
dengan klik
k Add Labeel pada men
nu Toolbar
188. Tambahkan Teks ”A
AutoRun P
Pro”pada Label1 terseebut dengan
n mengetik
kkan
a kotak Cap
ption di Pro
operties Paanel, dan atur propertties label (jenis,
teks pada
ukuran daan warna fo
ont) pada k
kotak font d
di Propertiees Panel
7
199. Atur anim
masi Label A
AutoRun Pro di Anim
mation Paneel seperti diibawah ini
200. Atur timeeline Label1
1 di Timelin
ne Panel
21. Tambahkan Label1 d
dengan klik
k Add Labeel pada men
nu Toolbarr
Now Start” pada Labell1 tersebut dengan meengetikkan teks
222. Tambahkan Teks ”N
pada kotak Caption
n di Propeerties Pane
el, dan atu
ur propertiies label (jenis,
ont) pada k
kotak font d
di Propertiees Panel
ukuran daan warna fo
233. Atur anim
masi Label A
AutoRun Pro di Anim
mation Paneel seperti dii bawah inii
8
244. Atur timeeline Label1
1 di Timelin
ne Panel
255. Simpan fiile ini denga
an klik Filee > Save Ass, beri namaa filenya Laatihan
266. Untuk meelihat hasiln
nya klik Preeview Scen
ne pada meenu Tool Baar
277. Publish file
f
ini untu
uk mendap
patkan jeniis file yang
g diinginka
an dengan klik
File > Pub
blish atau k
klik tomboll Publish dii Tool bar
288. Pilih Jeniss file (eksten
nsi file) yan
ng diingink
kan (.swf, .eexe, .html atau DVD) p
pada
kotak Pub
blish Demo
o dan klik O
OK
9
299. Beri nama
a file terseb
but dan klik
k tombol OK
K
300. Buat Scen
ne baru dengan klik menu Scen
ne > New Scene atau
u tekan tom
mbol
New Scen
ne di Toolb
bar
31. Klik File > Open > Program F
File > Long
gtion > FlaashDemo Pro
P > Samp
ple >
Demo
10
322. Klik Scen
ne 2
333. Klik Back
kImage pad
da Propertiees Panel
344. Klik tomb
bol Save As
A pada jeendela Ima
age Editor dan simpa
an file gam
mbar
tersebut d
dengan nam
ma image1
355. Kembali k
ke project L
Latihan scen
ne 2
366. Klik Back
kImage pad
da Propertiees Panel (M
Menambahk
kan backgro
ound scene 2)
377. Klik tomb
bol Load From File p
pada jendela Image Ed
ditor dan cari
c
file image1
dan tekan
n tombol Op
pen
11
388. Membuatt animasi geerakan kursor mouse (Cursor Motion), Klik
k Tombol Add
Cursor pa
ada Toolbaar
399. Atur Prop
perties Currsor seperti dibawah in
ni
400. Atur anim
masi pada A
Animation Panel seperti dibawah
h ini
41. Geser leta
ak kotak Cu
ursor Motio
on di Timellie Panel pada detik k
ke‐7,5 (7,5 s)
12
422. Klik tomb
bol Add Cu
ursor lagi
433. Atur Prop
pertiesnya seperti dibaawah ini
444. Geser batas akhir Tim
meline pad
da sampai seepanjang 111 detik
455. Klik Tomb
bol Add Sh
hape di Too
olbar
466. Atur properties darri shape teersebut di Propertiess Panel deengan mem
milih
bentuk ellipse
477. Atur anim
masi Ellipsee shape di A
Animation Panel seperti dibawah
h ini
13
488. Atur letak
k Ellipse Sh
hape di Tim
meline Pane
el pada detiik ke‐10,5
499. Klik Galeery Panel daan pilih Ballloon1.fdo
500. Ganti tekssnya dengaan “Clik Heere” dan atu
ur Propertieesnya sebag
gai berikut
51. Atur anim
masinya di A
Animation
n Panel seb
bagai beriku
ut
14
522. Atur letak
k Ballon1.fd
do di panel Timeline m
mulai detik ke‐5
533. Klik tomb
bol Add Shape di Too
olbar untuk
k menambah
h shape
544. Pada Pro
operties Panel, pilih
h ArrowRiight pada kotak Sh
hape dan atur
propertiessnya sebagai berikut
555. Atur anim
masi Arrow
wRight Shap
pe pada An
nimation Paanel sebagaai berikut
15
566. Atur letak
k ArrowRig
ght Shape d
di Timeline
e Panel mullai detik ke‐0,5 (0,5 s)
577. Klik Add Shape pad
da Toolbar dan pilih bentuk Recctangle pad
da kotak sh
hape
di Properties Panel, dan atur propertiesny
ya sebagai b
berikut
58. Pada k
kotak Fillsttyle pilih Cllear
59. Atur leetak Rectan
ngle Shape pada Time
eline Panel mulai detik
k ke‐0,5
60. Klik Tombol
T
Ad
dd Note p
pada Toolb
bar dan atu
ur properttiesnya seb
bagai
beriku
ut
16
61. Atur aanimasinyaa pada Anim
mation Pan
nel sebagai berikut
62. Atur leetak Note ttersebut pad
da Timelin
ne Panel mu
ulai detik k
ke‐0
63. Klik Fiile > Save untuk men
nyimpan Prroject ini
64. Klik to
ombol Prev
view Scene pada Toolb
bar
65. Klik to
ombol Prev
view pada Toolbar un
ntuk melihaat hasil Pro
oject mulai dari
Scene 1
Menghentikan Movie (Pause M
Movie) pad
da Detik T
Tertentu
17
1. Klik Scen
ne1 file latih
han FlashD
Demo Pro yaang telah d
dibuat dalam
m tutorial
diatas.
2. Klik Timeeline Panell
klik Ruler d
di Timelinee Panel seh
hingga mun
ncul garis m
merah, misall di
3. Double k
detik ke ‐33
4. Klik Previiew Scene untuk meliihat hasilny
ya. Movie akkan berhenti di detik ke‐33
5. Untuk meenjalankan lagi klik tombol Play di Flash Pllayer
6. Untuk meenghapus taanda Pausee (garis merrah di TimeeLine), dou
uble klik gaaris
tersebut p
pada Rulerr TimeLinen
nya
Mem
mbuat Hyp
perlink d
di FlashDeemo Pro
1. Klik Scen
ne2 file latih
han FlashDeemo Pro di atas
2. Klik Butto
on Panel, p
pilih dan tam
mbahkan 22 buah button ke scen
ne
k button di scene
3. Atur letak
18
4. Klik Butto
on1 dan atu
ur propertieesnya seperrti dibawah
h ini
5. Klik kotak
k caption d
di Propertiees panel dan
n ganti tekssnya menja
adi “Scene1”
k ClikActio
on pada Pro
operties Paanel dan pillih GotoSce
ene
6. Klik kotak
k SceneNam
me dan piliih Scene1
7. Klik kotak
19
8. Klik Butto
on2 dan atu
ur propertieesnya seperrti dibawah
h ini
Visit Website”
9. Klik Capttion dan gaanti teksnyaa dengan “V
k ClickActiion dan pilih VisitWeebSite
100. Klik kotak
20
11. Klik kotak
k WebsiteU
Url dan ketiikan alamat website yang diingin
nkan missall
www.uny
y.ac.id
dan Button
n2 mulai dettik ketiga d
dan
122. Klik Timeeline Panell geser kotaak Button1 d
beri perin
ntah stop/p
pause pada detik kelim
ma
133. Klik tomb
bol Preview
w pada Toolbar untuk melihat haasilnya
21
Pelatihan Pembuatan Media Pembelajaran Matematika dengan
Menggunakan Perangkat Lunak FlashDemo Pro Version 3.0
bagi Guru Sekolah Menengah Di DIY
Media Pembelajaran Interaktif dengan
FlashDemo Pro Version 3.0
Oleh :
Nur Hadi Waryanto, S.Si
Laboratorium Komputer
Jurusan Pendidikan Matematika
Fakultas Matematika dan Ilmu Pengetahuan Alam
Universitas Negeri Yogyakarta
2007
FlashDemo Pro Version 3.0
FlashDemo Pro adalah sebuah software yang mudah pengoperasiannya untuk
membuat professional demos dan tutorial tanpa harus menguasai suatu bahasa
permrograman.
FlashDemo
Pro
dibuat
oleh
Longtion
Software
Inc.
(http://www.longtion.com) Suatu presentasi, tutorial, demo, dengan menggunakan
FlashDemo Pro dapat debuat tanpa membutuhkan waktu yang lama.FlashDemo Pro
sangat fleksibel dan mudah pengoperasiannya.
File FlashDemo Pro dapat di Publish dalam beberapa format file, yaitu :
•
•
•
•
Flash Movie (.swf)
Executable File (.exe)
HTML File (.htm)
AutoRun CD/DVD Files or burn CD/DVD directly with built‐in CD Burner
Untuk mengoperasikan FlashDemo Pro dibutuhkan spesifikasi System sebagai
berikut :
Minimum system configuration
Microsoft Windows 2000
800x600 screen resolution with 16‐bit colors
100 MB free disk space
128 MB RAM
Recommended system configuration
Microsoft Windows XP
1024x768 screen resolution with 16.7 million colors
100 MB free disk space
128 MB RAM
CD‐ROM or DVD‐ROM drive
2
Area Kerja Flash
hDemo Pro
o 3.0
Scene Panel
M
Menu
Bar
Tool Baar
TimeeLine Panell Scene
Propertties Panel
buat Demo
o dengan FllashDemo PRo
Memb
1. Klik File >> New dan atur proprretiesnya seebagai berik
kut
2. Atur men
nu Animatio
on pada An
nimation Pa
anel seperti dibawah ini
3
3. Buka Pan
nel Galery dan tambaahkan Image1.fdo kee scene den
ngan cara Drag
D
and Drop image
4. Buka Pan
nel Timelin
ne dan geserr Image1 m
mulai pada d
detik 1 (1S)
5. Buka Panel Animatiion dan atu
ur animasin
nya seperti d
dibawah in
ni
nel Galery d
dan tambah
hkan Ballon
n8.fdo ke sccene
6. Buka Pan
4
7. Atur Prop
perties Ballo
on8.fdo seb
bagai beriku
ut
perties Pan
nel klik Texxt kotak textt
8. Pada Prop
dalam jendeela Text Ediitor
9. Ubah tekss tersebut d
nt dengan k
klik kotak Font di Prroperties P
Panel
100. Atur jeniss font dan ukuran fon
dan pilih jenis dan u
ukuran font di kotak Fo
ont Editor
5
masi dari Baalloon8.fdo pada Anim
mation Pan
nel seperti d
dibawah inii
11. Atur anim
meline Pane
el dan geserr Ballon8.fd
do dimulai dari detik k
ke‐3,5 (3,5 ss)
122. Buka Tim
133. Tambahkan Label1 d
dengan klik
k Add Labe
el pada men
nu Toolbarr
144. Tambahkan Teks”FllashDemoP
Pro”pada Label1
L
terseebut dengan
n mengetik
kkan
ption di paanel Properrties Panel, dan atur p
properties llabel
teks padaa kotak Cap
(jenis, uku
uran dan w
warna font) p
pada kotak
k font di pan
nel propertties
6
155. Atur anim
masi Label d
di Animatiion Panel sseperti dibaawah ini
166. Atur timeeline Label1
1 di panel tiimeline
177. Tambahkan Label1 d
dengan klik
k Add Labeel pada men
nu Toolbar
188. Tambahkan Teks ”A
AutoRun P
Pro”pada Label1 terseebut dengan
n mengetik
kkan
a kotak Cap
ption di Pro
operties Paanel, dan atur propertties label (jenis,
teks pada
ukuran daan warna fo
ont) pada k
kotak font d
di Propertiees Panel
7
199. Atur anim
masi Label A
AutoRun Pro di Anim
mation Paneel seperti diibawah ini
200. Atur timeeline Label1
1 di Timelin
ne Panel
21. Tambahkan Label1 d
dengan klik
k Add Labeel pada men
nu Toolbarr
Now Start” pada Labell1 tersebut dengan meengetikkan teks
222. Tambahkan Teks ”N
pada kotak Caption
n di Propeerties Pane
el, dan atu
ur propertiies label (jenis,
ont) pada k
kotak font d
di Propertiees Panel
ukuran daan warna fo
233. Atur anim
masi Label A
AutoRun Pro di Anim
mation Paneel seperti dii bawah inii
8
244. Atur timeeline Label1
1 di Timelin
ne Panel
255. Simpan fiile ini denga
an klik Filee > Save Ass, beri namaa filenya Laatihan
266. Untuk meelihat hasiln
nya klik Preeview Scen
ne pada meenu Tool Baar
277. Publish file
f
ini untu
uk mendap
patkan jeniis file yang
g diinginka
an dengan klik
File > Pub
blish atau k
klik tomboll Publish dii Tool bar
288. Pilih Jeniss file (eksten
nsi file) yan
ng diingink
kan (.swf, .eexe, .html atau DVD) p
pada
kotak Pub
blish Demo
o dan klik O
OK
9
299. Beri nama
a file terseb
but dan klik
k tombol OK
K
300. Buat Scen
ne baru dengan klik menu Scen
ne > New Scene atau
u tekan tom
mbol
New Scen
ne di Toolb
bar
31. Klik File > Open > Program F
File > Long
gtion > FlaashDemo Pro
P > Samp
ple >
Demo
10
322. Klik Scen
ne 2
333. Klik Back
kImage pad
da Propertiees Panel
344. Klik tomb
bol Save As
A pada jeendela Ima
age Editor dan simpa
an file gam
mbar
tersebut d
dengan nam
ma image1
355. Kembali k
ke project L
Latihan scen
ne 2
366. Klik Back
kImage pad
da Propertiees Panel (M
Menambahk
kan backgro
ound scene 2)
377. Klik tomb
bol Load From File p
pada jendela Image Ed
ditor dan cari
c
file image1
dan tekan
n tombol Op
pen
11
388. Membuatt animasi geerakan kursor mouse (Cursor Motion), Klik
k Tombol Add
Cursor pa
ada Toolbaar
399. Atur Prop
perties Currsor seperti dibawah in
ni
400. Atur anim
masi pada A
Animation Panel seperti dibawah
h ini
41. Geser leta
ak kotak Cu
ursor Motio
on di Timellie Panel pada detik k
ke‐7,5 (7,5 s)
12
422. Klik tomb
bol Add Cu
ursor lagi
433. Atur Prop
pertiesnya seperti dibaawah ini
444. Geser batas akhir Tim
meline pad
da sampai seepanjang 111 detik
455. Klik Tomb
bol Add Sh
hape di Too
olbar
466. Atur properties darri shape teersebut di Propertiess Panel deengan mem
milih
bentuk ellipse
477. Atur anim
masi Ellipsee shape di A
Animation Panel seperti dibawah
h ini
13
488. Atur letak
k Ellipse Sh
hape di Tim
meline Pane
el pada detiik ke‐10,5
499. Klik Galeery Panel daan pilih Ballloon1.fdo
500. Ganti tekssnya dengaan “Clik Heere” dan atu
ur Propertieesnya sebag
gai berikut
51. Atur anim
masinya di A
Animation
n Panel seb
bagai beriku
ut
14
522. Atur letak
k Ballon1.fd
do di panel Timeline m
mulai detik ke‐5
533. Klik tomb
bol Add Shape di Too
olbar untuk
k menambah
h shape
544. Pada Pro
operties Panel, pilih
h ArrowRiight pada kotak Sh
hape dan atur
propertiessnya sebagai berikut
555. Atur anim
masi Arrow
wRight Shap
pe pada An
nimation Paanel sebagaai berikut
15
566. Atur letak
k ArrowRig
ght Shape d
di Timeline
e Panel mullai detik ke‐0,5 (0,5 s)
577. Klik Add Shape pad
da Toolbar dan pilih bentuk Recctangle pad
da kotak sh
hape
di Properties Panel, dan atur propertiesny
ya sebagai b
berikut
58. Pada k
kotak Fillsttyle pilih Cllear
59. Atur leetak Rectan
ngle Shape pada Time
eline Panel mulai detik
k ke‐0,5
60. Klik Tombol
T
Ad
dd Note p
pada Toolb
bar dan atu
ur properttiesnya seb
bagai
beriku
ut
16
61. Atur aanimasinyaa pada Anim
mation Pan
nel sebagai berikut
62. Atur leetak Note ttersebut pad
da Timelin
ne Panel mu
ulai detik k
ke‐0
63. Klik Fiile > Save untuk men
nyimpan Prroject ini
64. Klik to
ombol Prev
view Scene pada Toolb
bar
65. Klik to
ombol Prev
view pada Toolbar un
ntuk melihaat hasil Pro
oject mulai dari
Scene 1
Menghentikan Movie (Pause M
Movie) pad
da Detik T
Tertentu
17
1. Klik Scen
ne1 file latih
han FlashD
Demo Pro yaang telah d
dibuat dalam
m tutorial
diatas.
2. Klik Timeeline Panell
klik Ruler d
di Timelinee Panel seh
hingga mun
ncul garis m
merah, misall di
3. Double k
detik ke ‐33
4. Klik Previiew Scene untuk meliihat hasilny
ya. Movie akkan berhenti di detik ke‐33
5. Untuk meenjalankan lagi klik tombol Play di Flash Pllayer
6. Untuk meenghapus taanda Pausee (garis merrah di TimeeLine), dou
uble klik gaaris
tersebut p
pada Rulerr TimeLinen
nya
Mem
mbuat Hyp
perlink d
di FlashDeemo Pro
1. Klik Scen
ne2 file latih
han FlashDeemo Pro di atas
2. Klik Butto
on Panel, p
pilih dan tam
mbahkan 22 buah button ke scen
ne
k button di scene
3. Atur letak
18
4. Klik Butto
on1 dan atu
ur propertieesnya seperrti dibawah
h ini
5. Klik kotak
k caption d
di Propertiees panel dan
n ganti tekssnya menja
adi “Scene1”
k ClikActio
on pada Pro
operties Paanel dan pillih GotoSce
ene
6. Klik kotak
k SceneNam
me dan piliih Scene1
7. Klik kotak
19
8. Klik Butto
on2 dan atu
ur propertieesnya seperrti dibawah
h ini
Visit Website”
9. Klik Capttion dan gaanti teksnyaa dengan “V
k ClickActiion dan pilih VisitWeebSite
100. Klik kotak
20
11. Klik kotak
k WebsiteU
Url dan ketiikan alamat website yang diingin
nkan missall
www.uny
y.ac.id
dan Button
n2 mulai dettik ketiga d
dan
122. Klik Timeeline Panell geser kotaak Button1 d
beri perin
ntah stop/p
pause pada detik kelim
ma
133. Klik tomb
bol Preview
w pada Toolbar untuk melihat haasilnya
21