-
Langkah-langkah Pengerjaan Multimedia Interaktif
Kubus atau Balok??? Dengan Luas dan Volume-nya
A. Halaman intro.swf
Langkah-langkah pengerjaan:
1. Buka program Macromedia Flash Professional 8.
2. Buat dokumen flash baru. Pada tab Create New pilih Flash
Document.
3. Save file dengan nama “intro.fla”.
4. Atur ukuran Stage. Pada panel Properties, klik tombol
size.
5. Pada dialog Document Properties, modifikasi isian sesuai
gambar berikut, kemudian
klik OK. mulai merancang, kita harus menentukan display dari
program yang akan
-
dibuat dan kecepatan pergerakan frame ke framenya (frame rate).
Caranya : pada
panel properties (di bawah), klik pada buton size : (550 x 400
pixels) sehingga muncul
kotak dialog document properties. Pada dimension isikan width
(panjang) =900,
height (tinggi) = 700 dan frame rate =12 backround biarkan
putih. Artinya,
program akan dijalankan pada resolusi 900 x 700 pixels dengan
kecepatan 12frame
per detiknya.
6. OK, sekarang beri nama layer1 dengan background
7. Pilih warna Background.
8. Buat kotak rectangle tanpa isi (no fill ) pada sembarang
tempat,
kemudian pada properties ketikan width = 900, height = 700, x :
0 dan y : 0.
9. Klik kotak rectangle dengan ,lalu klik kemudian isi radius
10. Klik OK.
Buat kotak pada sembarang tempat, kemudian pada properties :
-
10. Gunakan warna gradasi sebagai backgroundnya. Pilih paint
bucket tools
(keyboard : k), kemudian buka panel color (sebelah kanan). Pada
tag color mixer
ubah type menjadi radial (gradasi berbentuk lingkaran). Akan
tampak dua titik warna gradient. Klik 2 kali pada titik1dan
isikan #3A90DB
pada kotak campuran warna. Isikan kode yang sama pada
titik2.
11. Buat judul, main menu, keluar, presented by, nama pembuat,
tahun pembuatan dengan
menggunakan static text.
12. Klik kotak rectangle dengan ,lalu klik untuk membuat latar
beranda dan
keluar. Klik OK pada daerah di sekitar kata beranda dan
keluar.
Static Text
Static Text
Static Text Static Text
-
13. Untuk Beranda dan keluar masing-masing klik kanan dan covert
to symbol. Pilih
Button beri nama beranda_btn dan keluar_btn. Untuk Instance text
beri nama juga
masing-masing main menu_btn dan keluar_btn.
14. Klik 2x pada tombol. maka pada timeline akan tampak seperti
gambar. Up artinya
yang tampak dalam keadaan biasa. Over artinya tombol pada saat
mouse di
atasnya. Down artinya pada saat mouse ditekan dan ditahan pada
tombol dan hit
setelah ditekan.
15. Tekan pada keyboard tombol F6 sebanyak 3x artinya untuk
memasukan keyframe
pada timeline.
16. Sorot frame over, kemudian ubah warna latar tombol yang
tadinya transparan 35%
menjadi tidak transparan (100%).
17. Sorot juga frame down dan ubah warna latar menjadi tidak
transparan dan text
berwarna putih.
18. Lakukan Hal ini pada tombol keluar.
19. Klik main menu lalu F9 dan ketik script sebagai berikut:
20. Klik keluar lalu F9 dan ketik script sebagai berikut:
21. Klik file lalu save All.
-
22. Pilih pada menu bar File > Publish Settings. Akan muncul
kotak dialog Publish
Settings.
23. Hilangkan tanda check pada HTML (.html) dan berikan tanda
check ada option
Windows Projector (.exe).
24. Kemudian klik pada Publish. Kemudian klik OK.
25. Pada folder tempat Anda menyimpan file flash Anda, akan
muncul sebuah program
program dengan lambang icon :
File ini adalah file program interaktif Anda yang dapat
dijalankan di sistem yang
tidak memiliki flash player.
B. Halaman beranda.swf
1. Buka program Macromedia Flash Professional 8.
2. Buat dokumen flash baru. Pada tab Create New pilih Flash
Document.
-
3. Atur ukuran Stage. Pada panel Properties, klik tombol
size.
4. Pada dialog Document Properties, modifikasi isian sesuai
gambar berikut, kemudian
klik OK. Mulai merancang, kita harus menentukan display dari
program yang
akan dibuat dan kecepatan pergerakan frame ke framenya (frame
rate). Caranya :
pada panel properties (di bawah), klik pada buton size : (550 x
400 pixels) sehingga
muncul kotak dialog document properties. Pada dimension isikan
width (panjang)
= 900, height (tinggi) = 700 dan frame rate =12 backround
biarkan putih.
Artinya, program akan dijalankan pada resolusi 900 x 700 pixels
dengan kecepatan
12frame per detiknya. OK
26. OK, sekarang beri nama layer1 dengan background
27. Pilih warna Background.
28. Buat kotak rectangle tanpa isi (no fill ) pada sembarang
tempat,
kemudian pada properties ketikan width = 900, height = 700, x :
0 dan y : 0.
-
29. Klik kotak rectangle dengan ,lalu klik kemudian isi radius
10. Klik OK.
Buat kotak pada sembarang tempat, kemudian pada properties :
30. Gunakan warna gradasi sebagai backgroundnya. Pilih paint
bucket tools
(keyboard : k), kemudian buka panel color (sebelah kanan). Pada
tag color mixer
ubah type menjadi radial (gradasi berbentuk lingkaran). Akan
tampak dua titik warna gradient. Klik 2 kali pada titik1dan
isikan #3A90DB
pada kotak campuran warna. Isikan kode yang sama pada
titik2.
31. Sekarang kita tambahkan variasi border (garis batas) dan
header (judul).
32. Untuk membuat border, sekali lagi buat kotak tanpa isi
dengan properties width =
790 ; height = 590 ; x : 5 dan y : 5. Isi border dengan warna
solid #ECE9D8.
33. Untuk membuat header buat 2 buah garis menggunakan line
tools (keyboard : n)
dengan properties garis1 width = 790 ; size = 1 ; x : 5 dan y :
85 dan garis2 width =
790 ; size = 1 ; x : 5 dan y : 100. Kemudian isi bagian atas
(header) menggunakan
warna merah hati dan bagian antara header dan badan dengan warna
gradien putih serta
bagian badan di isi dengan warna biru. Kemudian hilangkan garis
hitam yang ada di
kedua sisinya. Cermati gambar berikut ini.
-
34. Kemudian tambahkan teks judul. Ubah warna teks pada jendela
properties menjadi
warna putih serta jenis dan besar text adalah “tw cen mt” 35 pt.
Klik sekali pada
area gambar kemudian ketikan “Flash for Beginers”. Letakkan text
pada area
header menggunakan selection tools (keyboard : v) . Sehingga
background
menjadi seperti berikut ini.
35. Kunci layer background dengan mengklik icon gembok pada
panel timeline
(bagian atas).
36. Selanjutnya adalah membuat tombol. Untuk membuat tombol buat
sebuah layer baru
bernama “tombol” di atas layer background.
37. Rancang sebuah tombol menggunakan retangle tool tanpa isi
dan
klik pada set corner radius isi corner radius = 15. Buat kotak
elips berdimensi
width=150 ; height = 40, posisi x : 15 dan y : 200.
38. Kemudian kita akan mengisi kotak dengan warna sedikit
transparan. Gunakan lagi
paint bucket tools , pada panel color mixer pilih type solid dan
isikan
warna #0000FF. Untuk membuat transparan, ubah alpha menjadi 35%.
Kemudian
isi elips yang telah dibuat.
39. Buat teks untuk tombol dengan huruf “tw cen mt” besar 20pt
warna hitam
“Tentang Program”.
40. Sekarang kita butuh 4 tombol sementara baru ada 1 tombol.
Tidak usah repot, tinggal
kita duplikasikan tombol pertama dengan menekan pada keyboard
ctrl+d (duplicate)
atau ctrl+c kemudian ctrl+v (copy – paste). Kemudian ganti teks
masing- masing
-
menjadi “Tujuan Program”, “Bantuan Program” dan “Keluar
Program”.
Letakkan di sebelah kanan tampilan.
41. Kemudian seleksi tombol tentang program, kemudian klik kanan
padanya. Pilih
convert to symbol. Pilih button dan beri nama “tentang_btn”.Ok.
Sekarang gambar
tombol telah berubah menjadi tombol.
42. Lakukan hal yang sama dengan 3 tombol lain masing-masing
dengan nama
“tujuan_btn”, “bantuan_btn” dan “keluar_btn”.
43. Klik 2x pada tombol. maka pada timeline akan tampak seperti
gambar. Up artinya
yang tampak dalam keadaan biasa. Over artinya tombol pada saat
mouse di
atasnya. Down artinya pada saat mouse ditekan dan ditahan pada
tombol dan hit
setelah ditekan.
44. Tekan pada keyboard tombol F6 sebanyak 3x artinya untuk
memasukan keyframe
pada timeline.
45. Sorot frame over, kemudian ubah warna latar tombol yang
tadinya transparan 35%
menjadi tidak transparan (100%).
46. Sorot juga frame down dan ubah warna latar menjadi tidak
transparan dan text
berwarna putih.
-
47. Lakukan Hal ini pada 3 tombol yang lain.
48. Selesai dengan tombol, kunci layer tombol.
49. Buat layer baru bernama “halo” di atas layer tombol untuk
halaman beranda.
50. Ketikan kalimat “Selamat Datang di Program Interaktif Kubus
atau Balok”
sesuai dengan gambar berikut. Kemudian kunci layer tersebut.
51. Homepage pun terbuat. Tinggal isinya. Buat layer baru beri
nama “isi”.
Gunakan rectangle tool berisi warna #ECE9D8, corner radius
15, berdimensi width = 620; height = 480, posisi x : 170 dan y :
110.
52. Seleksi seluruh kotak isi tersebut, kemudian klik kanan
padanya. Pilih convert
to symbol. Beri nama “isi_mc” dan isi option pada movieclip
untuk mengubah kotak
yang dibuat tadi menjadi movieclip.
-
53. Beri nama instance pada movieclip dengan nama
“isi_mc”, caranya klik pada objek kemudian pada panel
properties (di bagian bawah), isi instance namenya.
54. Selanjutnya menambahkan content atau isi materi dari
program kita. Sudah siap..? OK kita lanjut. Klik 2x pada movie
clip “isi_mc”
yang telah kita buat sehingga akan muncul timeline baru. Time
line ini adalah timeline
movieclip. Beri nama layer1 dengan “background” lalu kunci layer
tersebut. Buat
layer baru di atasnya dan beri nama “isi”.
55. Tekan tombol F6 pada keyboard Anda sebanyak 3 kali untuk
menambahkan 3
buah keyframe pada layer isi.
56. Klik pada frame pertama layer isi
57. Buatlah teks huruf “tw cen mt” 25pt cetak tebal warna hitam
di atas backgound
movieclip ketikkan “Tentang Program” sebagai judul halaman menu
Tentang
Program. Lihat panel properties dan perhatikan bagian kerning ,
ubah isi kerning
dari 0 menjadi 3. Kerning berfungsi untuk mengatur jarak antar
teks. Semakin besar
angka yang diisikan maka akan semakin lebar pula jarak antar
teksnya.
58. Kemudian buat lagi teks di bawah judul dengan huruf dan
warna yang sama namun
kerningnnya diubah menjadi 1 dan besar huruf di ubah menjadi
14pt. Teks ini berisi
materi pada menu Tentang Program.
59. Untuk mengatur lebar teks yang kita buat, gunakan selection
tool (keyboard : v)
kemudian klik pada teks yang dibuat. Perhatikan titik biru pada
pinggiran teks, titik
ini jika di klik kemudian di tarik (drag) akan berpengaruh pada
lebar teks box kita.
-
60. Klik mause pada frame ke 2 layer isi untuk membuat halaman
Tujuan. Langkah-
langkah selanjutnya sama dengan waktu menbuat halaman tentang
program, hanya
saja judul dan materinya diubah sesuai dengan pokok
bahasannya.
61. Jika halaman tujuan sudah selesai, klik pada frame ke 3
layer isi kemudian buat isi dari
menu bantuan.
62. Kunci layer “isi”. Kemudian buat layer baru dengan nama
“action” di atasnya. Layer
ini berisi script (perintah) untuk menghentikan movieclipt.
63. Klik pada frame pertama, kemudian gunakan tombol F9 pada
keyboard untuk
menampilkan panel action. Panel action adalah panel untuk
menuliskan perintah
(script).
64. Pada layer action ketikkan perintah : Stop ( ) ;
65. Untruk menutup panel action, klik pada header dari panel
(warna biru) bergambar
66. panah ke bawah bertuliskan Action – Frame.
67. Kunci layer action dan kembali ke Scene1 denga cara klik
pada “Scene1” di atas
panel timeline.
68. Klik pada keyframe pada layer isi , kemudian dengan
menggunakan mouse klik dan tarik (drag) titik hitam pada frame 1
ke frame 2
sehingga frame 1 layer isi akan kosong.
-
69. Klik pada layer “halo” kemudian tekan tombol F5 sekali pada
keyboard untuk
menambahkan frame pada layer tersebut. Lakukan juga untuk layer
tombol dan
background.
70. Selanjutnya kita akan membuat transisi antar halaman. Blok
seluruh layer pada frame
ke 20 menggunakan mouse Anda.
71. Tekan tombol F5 pada keyboard untuk menambahkan frame hingga
frame ke 20.
72. Kemudian klik pada layer “isi” frame ke 11 kemudian tekan
F6. Selanjutnya masih
pada layer isi pada frame ke 20 tekan F6, sehingga time line
menjadi seperti pada
gambar.
73. Klik pada layer isi frame ke 2, kemudian klik pada gambar
movieclip. Pada panel
properties, isi posisi x : 810 (posisi ini berada di luar daerah
tampil). Lakukan hal
yang sama pada frame ke 20.
-
74. Kita akan memberi animasi pada movieclip. Caranya klik kanan
pada layer “isi” di
antara frame 2 dan 10, kemudian pilih menu Create Motion Tween.
Lakukan pula hal
yang sama pada posisi antara frame 11 dan 20. Timelinenya kan
menjadi ungu bukan.
Ini menandakan frame ini dikenakan motion tween.
75. Coba tes program Anda dengan menekan tombol ctrl+Enter.
Program kita masih
bergerak terus menerus. Selanjutnya kita akan menggunakan
actionScript untuk
mengendalikan program interaktif ini.
76. Kunci Layer isi dan buat layer baru dan beri nama “action”.
Buat keyframe pada
frame ke 1, frame ke 11 dan frame ke 20.
77. Klik pada frame ke 1, kemudian tekan F9 pada keyboard.
Isikan script berikut untuk
membuat program berhenti di frame pertama pada saat kita
membukanya :
Stop ( );
fscommand ("fullscreen", "true");
fscommand ("allowscale", "true");
fscommand ("trapallkeys", "true");
fscommand ("showmenu", "false");
Fulscreen bernilai true artinya program akan ditampilkan satu
layar penuh.
Allowscale bernilai true artinya membiarkan program mengubah
ukuran program
sesuai dengan ukuran layar.
Trapallkeys bernilai true artinya menonaktifkan fungsi tombol
keyboard ctrl+F.
Showmenu berniali false artinya menonaktifkan fungsi menu klik
kanan.
78. Ketikkan pula script :
Stop ( );
Untuk frame ke 11 sehingga jika sampai pada frame ke 11, maka
animasi akan
berhenti.
-
79. Kemudian pada frame ke 20 ketikkan script berikut :
gotoAndPlay (2);
Artinya setelah frame ke 20 dijalankan maka akan kembali
menjalankan frame ke 2.
80. Klik pada frame ke 2 layer action, kemudian buat keyframe
dengan menekan
tombol F6 keyboard. Ketikkan script berikut ini :
isi_mc.gotoAndStop (n);
Artinya, jalankan dan hentikan movieclip “isi_mc” pada frame ke
n (timeline
movieclip yang mempunyai instance name “isi_mc”).
81. Selanjutnya kunci layer “action”.
82. Buka kunci dari layer tombol dengan cara mengklik tanda
gembok layer tersebut.
83. Seleksi tombol “Tentang Program”. Tekan F9 pada keyboard dan
ketikan script
berikut ini :
on (release) {
n=1;
gotoAndPlay("nextFrame");
}
Artinya : Pada saat tombol klik lalu di lepaskan (on (Release)),
maka nilai n adalah
1 (berdampak pada mocieclip “isi_mc”) dan jalankan frame
selanjutnya
(nextFrame) dari timeline Scene.
84. Seleksi tombol “Tujuan Program”. Tekan F9 pada keyboard dan
ketikan script
berikut ini :
on (release) {
n=2;
gotoAndPlay("nextFrame");
}
Artinya : Pada saat tombol klik lalu di lepaskan (on (Release)),
maka nilai n adalah 2
(berdampak pada mocieclip “isi_mc”) dan jalankan frame
selanjutnya (nextFrame)
dari timeline Scene1.
-
85. Seleksi tombol “mainkan”. Tekan F9 pada keyboard dan ketikan
script berikut ini :
on (release) {
n=3;
gotoAndPlay("nextFrame");
}
Artinya : Pada saat tombol klik lalu di lepaskan (on (Release)),
maka nilai n adalah 3
(berdampak pada mocieclip “isi_mc”) dan jalankan frame
selanjutnya (nextFrame)
dari timeline Scene1.
86. Seleksi tombol “Back To Menu”. Tekan F9 pada keyboard dan
ketikan script
berikut ini :
on (release) {
fscommand("quit");
}
Artinya : Pada saat tombol klik lalu di lepaskan (on (Release)),
maka program akan
keluar (quit).
87. Buat gambar rumah menggunakan line tool (keyboard : N) pada
layer tombol.
88. Konvert gambar rumah menjadi tombol dengan
nama“beranda_btn”. Letakkan
di bagian kiri atas (header) tampilan program Anda dan
tambahkkan kata beranda
disebelah gambar rumah. Klik 2 kali pada tombol beranda,
kemudian berikan efek
over, down dan hit dengan cara sama dengan yang pernah kita
pelajari saat
membuat tombol sebelumnya (langkah 20 – 24).
89. Kemudian beri script dibawah ini pada tombol “beranda_btn”
dengan cara klik pada
tombol kemudian tekan tombol F9
pada keyboard.
on (release) {
gotoAndStop(1);
}
-
Artinya : pada saat tombol klik lalu di lepaskan (on (Release)),
maka berhenti pada
frame ke 1 (halaman depan / home).
90. Silahkan tekan ctrl+Enter pada keyboard. Perintah keluar
tidak dapat dijalankan
dalam mode test movie ini.
91. Jika tampilan terlalu lambat, Anda dapat mengubah angka pada
frame rate di
properties panel menjadi lebih besar.
92. Klik file lalu save All.
93. Pilih pada menu bar File > Publish Settings. Akan muncul
kotak dialog Publish
Settings.
94. Hilangkan tanda check pada HTML (.html) dan berikan tanda
check ada option
p Windows Projector (.exe).
95. Kemudian klik pada Publish. Kemudian klik OK.
96. Pada folder tempat Anda menyimpan file flash Anda, akan
muncul sebuah program
program dengan lambang icon :
File ini adalah file program interaktif Anda yang dapat
dijalankan di sistem yang
tidak memiliki flash player.
C. Halaman mainkan_swf
1. Buka program Macromedia Flash Professional 8.
2. Buat dokumen flash baru. Pada tab Create New pilih Flash
Document.
-
3. Save file dengan nama “mainkan.fla”.
4. Atur ukuran Stage. Pada panel Properties, klik tombol
size.
5. Pada dialog Document Properties, modifikasi isian sesuai
gambar berikut, kemudian
klik OK. mulai merancang, kita harus menentukan display dari
program yang akan
dibuat dan kecepatan pergerakan frame ke framenya (frame rate).
Caranya : pada
panel properties (di bawah), klik pada buton size : (550 x 400
pixels) sehingga muncul
kotak dialog document properties. Pada dimension isikan width
(panjang) =900,
height (tinggi) = 700 dan frame rate =12 backround biarkan
putih. Artinya,
program akan dijalankan pada resolusi 900 x 700 pixels dengan
kecepatan 12frame
per detiknya.
6. OK, sekarang beri nama layer1 dengan background
7. Pilih warna Background.
8. Ketikkan judul “Kubus atau Balok??? Dengan Luas dan
Volume-nya”, pusat, X, Y,
panjang, lebarm tinggi, luas, gambar, volume dengan text tool
static text. Buat text tool
-
dengan propertis input text untuk mengisi nilai X, Y, panjang,
lebar, dan tinggi. Buat
juga text tool dengan propertis dinamic text untuk mengisi luas
dan volume.
9. Ubah Luas, gambar, volume, dan beranda menjadi sebuah
bautton. Anda tentunya
sudah menguasai cara mengubah text menjadi button.
10. Tambah layer dan beri nama Gambar kemudian isikan skrip:
Static text
Dinamic textDinamic text
Input text
-
11. Tambah layer dan beri nama Luas kemudian isikan skrip:
12. Tambah layer dan beri nama Volume kemudian isikan skrip:
13. Pilih pada menu bar File > Publish Settings. Akan muncul
kotak dialog Publish
Settings.
-
14. Hilangkan tanda check pada HTML (.html) dan berikan tanda
check ada option
p Windows Projector (.exe).
15. Kemudian klik pada Publish. Kemudian klik OK.
16. Pada folder tempat Anda menyimpan file flash Anda, akan
muncul sebuah program
program dengan lambang icon :
File ini adalah file program interaktif Anda yang dapat
dijalankan di sistem yang
tidak memiliki flash player.