Kubus atau Balok??? Dengan Luas dan Volume-nya

Transkripsi

1 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 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

2 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 : Klik kotak rectangle dengan,lalu klik kemudian isi radius 10. Klik OK. Buat kotak pada sembarang tempat, kemudian pada properties :

3 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 titik Buat judul, main menu, keluar, presented by, nama pembuat, tahun pembuatan dengan menggunakan static text. Static Text Static Text Static Text 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.

4 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.

5 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 Buat dokumen flash baru. Pada tab Create New pilih Flash Document.

6 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.

7 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 titik 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 #ECE9D 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.

8 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) menjadi seperti berikut ini.. Sehingga background 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 : 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

9 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.

10 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 : 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.

11 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.

12 60. Klik mause pada frame ke 2 layer isi untuk membuat halaman Tujuan. Langkahlangkah 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.

13 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 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.

14 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 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.

15 79. Kemudian pada frame ke 20 ketikkan script berikut : gotoandplay (2); Artinya setelah frame ke 20 dijalankan maka akan kembali menjalankan frame ke 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.

16 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 Scene 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); }

17 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 Buat dokumen flash baru. Pada tab Create New pilih Flash Document.

18 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

19 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. Static text Input text Dinamic text Dinamic text 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:

20 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.

21 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.