5) Buat kotak rectangle dengan isi #D06AD0 ( ) pada sembarang tempat, kemudian pada properties ketikan width = 800, height = 600, x : 0 dan y : 0.

Transkripsi

1 Langkah-langkah pengerjaan: Pembuatan program interaktif ini terbagi dalam 5 tahap, yaitu: 1. main menu 2. home 3. Penjumlahan 4. Pengurangan Tahap-tahap tersebut akan dijelaskan sebagi berikut: 1. Main Menu Lagkah-langkah: 1) Jalankan program Macromedia Flash Professional 8. 2) Save file dengan nama main menu.fla. 3) Sebelum mulai merancang, tentukan 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) = 800, height (tinggi) = 600 dan frame rate = 12 background hitam. Artinya, program akan dijalankan pada resolusi 800 x 600 pixels dengan kecepatan 12 frame per detiknya. 4) Beri nama layer1 dengan background. 5) Buat kotak rectangle dengan isi #D06AD0 ( ) pada sembarang tempat, kemudian pada properties ketikan width = 800, height = 600, x : 0 dan y : 0.

2 6) Tambahkan teks judul. Ubah warna teks pada jendela properties menjadi warna putih serta jenis dan besar text adalah Showcard Gothic 52 pt. Klik sekali pada area gambar kemudian ketikan Fungsi Linear Interaktif. Letakkan text ditengah menggunakan selection tools (keyboard : v). Lalu tambahkan teks untuk nama pembuat. Ubah warna teks pada jendela properties menjadi warna putih serta jenis dan besar text adalah chiller 64 pt. Pada area gambar klik sekali kemudian ketikan nama pembuat program dan tahun pembuatan. Letakkan di kanan bawah. Sehingga background menjadi seperti berikut ini. 7) Kunci layer background. 8) buat layer baru dengan nama tombol. 9) Rancang sebuah tombol menggunakan retangle tool dengan isi #FF00FF dan klik pada set corner radius isi corner radius = 15. Buat kotak elips berdimensi width = 153 ; height = 47.9, posisi x : 11.9 dan y : ) Buat teks untuk tombol dengan huruf Showcard Gothic besar 35 pt warna putih Menu. 11) Lakukan hal yang sama untuk Keluar. 12) Kemudian seleksi tombol Menu, kemudian klik kanan padanya. Pilih convert to symbol. Pilih button dan beri nama Menu_btn. 13) Lakukan hal yang sama dengan tombol Keluar. 14) Double klik pada tombol menu. maka pada timeline akan tampak seperti gambar. Up artinya yang tampak dalam keadaan biasa. Over artinya tombol pada saat mouse

3 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 #FF3399 menjadi #9933FF. 17) Tambah layer baru, beri nama suara. Kemudian pada frame down masukan keyframe. Kemudian pada panel properties ganti sound dengan suara yang tersedia pada library. 18) Lakukan Hal ini pada tombol Keluar. 19) Pada tombol menu, ketikkan script berikut: on (press){ loadmovienum("home2fla.swf",0) } Artinya: pada saat tombol di klik, maka akan memanggil file home2.swf 20) Pada tombol keluar, ketikkan script berikut: on(release){ fscommand("quit"); } Artinya: pada saat tombol di klik dan dilepaskan, maka program akan keluar. 21) Pilih pada menu bar File > Publish Settings (keyboard : ctrl + Shift + F12). Akan muncul kotak dialog Publish Settings. 22) Hilangkan tanda check pada HTML (.html) dan berikan tanda check pada option Windows Projector (.exe). 23) Kemudian klik pada Publish. Kemudian klik OK.

4 2. Home Langkah-langkah: 1) Jalankan program Macromedia Flash Professional 8. 2) Save file dengan nama home2fla.fla. 3) Sebelum mulai merancang, tentukan 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) = 800, height (tinggi) = 600 dan frame rate = 12 background hitam. Artinya, program akan dijalankan pada resolusi 800 x 600 pixels dengan kecepatan 12 frame per detiknya. 4) Beri nama layer1 dengan background. 5) Buat kotak rectangle tanpa isi ( ) pada sembarang tempat, kemudian pada properties ketikan width = 800, height = 600, x : 0 dan y : 0. 6) Tambahkan warna solid sebagai backgroundnya. Pilih paint bucket tools (keyboard : k), kemudian buka panel color (sebelah kanan). Pada tag color mixer ubah type menjadi solid. Isikan #9966CC Ok. 7) tambahkan variasi border (garis batas) dan header (judul). 8) 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 #2398E4. 9) Untuk membuat header buat 2 buah garis menggunakan line tools (keyboard : n)

5 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 # dan bagian antara header dan badan dengan warna putih. 10) Kemudian tambahkan teks judul. Ubah warna teks pada jendela properties menjadi warna #FF00FF serta jenis dan besar text adalah Showcard gothic 34 pt. Klik sekali pada area gambar kemudian ketikan Fungsi Linear interaktif. Letakkan text pada area header menggunakan selection tools (keyboard : v). Sehingga background menjadi seperti berikut ini. 11) Kunci layer Background. 12) Buat layer baru dengan nama tombol. 13) Rancang sebuah tombol menggunakan retangle tool tanpa isi dan

6 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 #FF00FF. Untuk membuat transparan, ubah alpha menjadi 35%. Kemudian isi elips yang telah dibuat. 15) Buat teks untuk tombol dengan huruf broadway besar 14pt warna hitam Tentang Program. 16) Tambahkan tiga tombol dengan cara 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 dan Back to Main Menu. Letakkan di sebelah kanan tampilan. 17) Kemudian seleksi tombol tentang program, kemudian klik kanan padanya. Pilih convert to symbol. Pilih button dan beri nama tentang_btn.ok. 18) Lakukan hal yang sama dengan 3 tombol lain masing-masing dengan nama tujuan_btn, program_btn dan back_btn. 19) Double klick pada tombol tentang program, lalu tekan F6 3 kali untuk menambahkan keyframe. Sorot frame over, kemudian ubah warna latar tombol yang tadinya transparan 35% menjadi tidak transparan (100%), ubah warna teks menjadi putih. Lakukan hal yang sama pada frame down. Pada frame hit ubah kembali ke keadaan

7 awal. 20) Tambahkan layer baru dengan nama suara. Pada frame down tekan F6, kemudian pada panel properties ubah sound dengan suara yang tersedia pada library. 21) Lakukan hal yang sama pada tiga tombol yang lain. 22) Kunci layer tombol. 23) Buat layer baru dengan nama halo. 24) Ketikan kalimat Selamat Datang di Program Interaktif Selamat Mencoba sesuai dengan gambar berikut. Kemudian kunci layer tersebut. 25) Buat layer baru beri nama isi. 26) Gunakan rectangle tool berisi warna #CC66CC, corner radius 15, berdimensi width = 620; height = 480, posisi x : 170 dan y : 110.

8 27) 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. 28)Beri nama instance pada movieclip dengan nama isi_mc, caranya klik pada objek kemudian pada panel properties (di bagian bawah), isi instance namenya. 29) Klik 2x pada movie cilp 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. 30) Tekan tombol F6 sebanyak 3x untuk menambahlan 3 buah keyframe pada layer isi. 31) Klik pada frame pertama layer isi. 32) Buatlah teks huruf broadway 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 1. Kerning berfungsi untuk mengatur jarak antar teks. Semakin besar angka yang diisikan maka akan semakin lebar pula jarak antar teksnya. 33) Kemudian buat lagi teks di bawah judul dengan huruf comic sans 25pt cetak tebal warna hitam. Teks ini berisi materi pada menu Tentang Program. Lihat panel properties dan perhatikan bagian kerning, ubah isi kerning dari 0 menjadi 1. Kerning berfungsi untuk mengatur jarak antar teks. Semakin besar angka yang diisikan maka akan semakin lebar pula jarak antar teksnya. 14pt. 34) 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.

9 35) Klik pada frame ke 3 layer isi kemudian buat isi program. 36) Buat 2 buah tombol untuk menampilkan penjumlahan fungsi linear dan pengurangan fungsi linear. Untuk membuat tombol, gunakan rectangle tool berisi warna #660066, corner radius 15. Buat teks penjumlahan fungsi dengan huruf Comic Sans MS 25pt. Kemudian seleksi tombol penjumlahan fungsi, kemudian klik kanan padanya. Pilih convert to symbol. Pilih button dan beri nama jumlah_btn. Double klick pada tombol tersebut, kemudian tekan F6 sebanyak 3x. pada frame over, ubah warna huruf menjadi # tambah layer baru untuk menambahkan suara. Tekan F6 pada frame down, kemudian pilih sura pada panel properties. Lakukan hal yang sama pada tombol pengurangan fungsi, tapi pada instance name di beri nama kurang_btn. 37) Kunci layer isi. Kemudian buat layer baru dengan nama action di atasnya. Layer ini berisi script (perintah) untuk menghentikan movieclip. 38) Klik pada frame pertama, kemudian gunakan tombol F9 pada keyboard untuk menampilkan panel action. Panel action adalah panel untuk menuliskan perintah (script). 39) Pada layer action ketikkan perintah : stop(); 40) Kunci layer action dan kembali ke Scene1 denga cara klik pada Scene1 di atas panel timeline. 41) Klik pada keyframe pada layer isi, kemudian

10 dengan menggunakan mouse klik dan tarik (drag) titik hitam pada frame 1 ke frame 2 sehingga frame 1 layer isi akan kosong. 42) Selanjutnya, klik pada layer halo kemudian tekan tombol F5 sekali pada keyboard untuk menambahkan frame pada layer tersebut. Lakukan juga untuk layer tombol dan background. 43) Selnjutnya kita akan membuat transisi antar halaman. Blok seluruh layer pada frame ke 20 menggunakan mouse Anda. 44) 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. 46) 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

11 yang sama pada frame ke ) 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. 48) 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: 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.

12 50) Ketikkan pula script : stop ( ); untuk frame ke 11 sehingga jika sampai pada frame ke 11, maka animasi akan berhenti. 51) Kemudian pada frame ke 20 ketikkan script berikut : gotoandplay(2); Artinya setelah frame ke 20 dijalankan maka akan kembali menjalankan frame ke 2 52) Klik pada frame ke 2 layer action, kemudian buat keyframe dengan menekan tombol F6 pada 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. 53) Kunci layer action. 54) Buka kunci dari layer tombol dengan cara mengklik tanda gembok layer tersebut. 55) 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 Scene1. 56) Seleksi tombol Tujuan. 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. 57) Seleksi tombol Program. Tekan F9 pada keyboard dan ketikan script berikut ini :

13 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. 58) Seleksi tombol Back to Main Menu. Tekan F9 pada keyboard dan ketikan script berikut ini : on(press){ loadmovienum("main menu.swf",0); } Artinya : pada saat tombol di klik, maka akan memanggil file main menu.swf. 59) Pada layer background buat tombol home_btn untuk kembali ke home. Klik 2x pada tombol, tekan F6 3x dan beri efek pada frame over. Tambah layer baru untuk suara, pilih suara dari library. 60) Kemudian beri script dibawah ini pada tombol home_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). 61) Pilih pada menu bar File > Publish Settings (keyboard : ctrl + Shift + F12). Akan muncul kotak dialog Publish Settings. 62) Hilangkan tanda check pada HTML (.html). 63) Kemudian klik pada Publish. Kemudian klik OK. 3. Penjumlahan Langkah-langkah: 1) Jalankan program Macromedia Flash Professional 8.

14 2) Save file dengan nama jumlah.fla. 3) Sebelum mulai merancang, tentukan 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) = 620.5, height (tinggi) = 480 dan frame rate = 25 background putih. Artinya, program akan dijalankan pada resolusi x 480 pixels dengan kecepatan 25 frame per detiknya. 4) Beri nama layer1 dengan background. 5) Buat kotak rectangle dengan isi #AC4AA3 type radial pada sembarang tempat, kemudian pada properties ketikan width = 620.5, height = 480, x : 0 dan y : 0. 6) Tulis text judul dengan huruf Showcard Gothic 34pt dengan warna #FF00FF. 7) Kunci layer background, dan buat layer baru dengan nama text. 8) Pada layer text buat static text dan atur tampilan seperti gambar berikut: 9) Selanjutnya buat 4 buah input text dan beri instance name masing-masing a_txt dan b_txt pada f(x), c_txt, dan d_txt pada g(x). Perhatikan pengaturan pada gambar

15 10) Buat dua buah dynamic text, dan beri instance name masing-masing e_txt dan f_txt pada f(x) + g(x). Perhatikan pengaturan pada gambar: 11) Kunci layer text. Buat layer baru dengan nama tombol. 12) Buat tombol dengan menggunakan rectangle tool set corner 15 dengan isi tipe radial warna #FF0000 dan text huruf Showcard Gothic 28pt warna putih. Kemudian seleksi, klik kanan dan convert to symbol. Pada panel properties, ketik proses_btn pada instance name. 13) Klik 2x pada tombol proses, kemudian tekan F6 3x. pada frame over, ubah warna huruf menjadi #FF00FF. buat layer baru untuk suara, pilih suara pada panel properties, sound. Lalu klik scene1. 14) Buat tombol back untuk kembali ke home dengan menggunakan rectangle tool set corner 15 dengan isi tipe solid warna # dan text huruf Comic Sans MS 24pt

16 warna putih. Kemudian seleksi, klik kanan dan convert to symbol. Pada panel properties, ketik back_btn pada instance name. 15) Buat layer baru dengan nama script1. 16) Klik tombol proses, kemudian tekan F9 dan ketikan script berikut: 17) Klik tombol back, kemudian tuliskan script berikut: 18) Pilih pada menu bar File > Publish Settings (keyboard : ctrl + Shift + F12). Akan muncul kotak dialog Publish Settings. 19) Hilangkan tanda check pada HTML (.html). 20) Kemudian klik pada Publish. Kemudian klik OK. 4. Pengurangan Langkah-langkah: 1) Jalankan program Macromedia Flash Professional 8. 2) Save file dengan nama selisih.fla. 3) Sebelum mulai merancang, tentukan 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) = 620.5, height (tinggi) = 480 dan frame rate = 25 background putih. Artinya, program akan dijalankan pada resolusi 620 x 480 pixels dengan kecepatan 25 frame per detiknya. 4) Beri nama layer1 dengan background.

17 5) Buat kotak rectangle dengan isi #7CFF44 type radial pada sembarang tempat, kemudian pada properties ketikan width = 620 height = 480, x : 0 dan y : 0. 6) Tulis text judul dengan huruf Showcard Gothic 34pt dengan warna #FFFF33. 7) Kunci layer background, dan buat layer baru dengan nama tombol. 8) Pada layer tombol buat static text dan atur tampilan seperti gambar berikut: 9) Selanjutnya buat 4 buah input text dan beri instance name masing-masing a_txt dan b_txt pada f(x), c_txt, dan d_txt pada g(x). Perhatikan pengaturan pada gambar 10) Buat dua buah dynamic text, dan beri instance name masing-masing e_txt dan f_txt pada f(x) + g(x). Perhatikan pengaturan pada gambar:

18 11) Buat tombol dengan menggunakan rectangle tool set corner 15 dengan isi tipe radial warna #B3BF37dan text huruf Showcard Gothic 23pt warna #FFFF00. Kemudian seleksi, klik kanan dan convert to symbol. Pada panel properties, ketik proses_btn pada instance name. 12) Klik 2x pada tombol proses, kemudian tekan F6 3x. pada frame over, ubah warna huruf menjadi putih. buat layer baru untuk suara, pilih suara pada panel properties, sound. Lalu klik scene1. 13) Buat tombol back untuk kembali ke home dengan menggunakan rectangle tool set corner 15 dengan isi tipe solid warna #333300dan text huruf Showcard gothic 22pt warna #FFFF00. Kemudian seleksi, klik kanan dan convert to symbol. Pada panel properties, ketik back_btn pada instance name. 14) Buat layer baru dengan nama script1. 15) Klik tombol proses, kemudian tekan F9 dan ketikan script berikut:

19 16) Klik tombol back, kemudian tuliskan script berikut: 17) Pilih pada menu bar File > Publish Settings (keyboard : ctrl + Shift + F12). Akan muncul kotak dialog Publish Settings. 18) Hilangkan tanda check pada HTML (.html). 19) Kemudian klik pada Publish. Kemudian klik OK.