15

LATIHAN/ PRAKTIK

1. Membuat Penghitung Waktu Logikanya adalah setiap kali playback mencapai frame 12, maka nilai variabel waktu akan ditambahkan 1. Dengan demikian, kita sudah dapat membuat hitungan waktu dalam detik. Selama movie dimainkan, playback akan berjalan dari frame 1 sampai 12 secara berulang, maka hitungan akan berjalan terus. Berikut kita praktikkan bersama cara membuatnya - Buka dokumen baru. Perhatikan pada window propertiesnya. Frame rate berisi angka 12. Artinya

bahwa playback movie akan memainkan 12 frame dalam 1 detik - Selanjutnya pilih text tool, kemudian buat variabel untuk menampung data waktu detik - Pada panel properties, pilih Dynamic Text pada kotak Type, perataan kanan dan berikan nama

detik pada kotak var

- Insert frame di frame 12 (karena kita menggunakan 12 fps, maka jumlah frame yang kita perlukan=12)

- Selanjutnya kita tinggal mengontrol nilai variabel detik pada jendela Action-Frame - Insert layer terlebih dahulu sebelum kita menuliskan perintah action-scriptnya - Buka jendela Action-Frame. Sebelum menuliskan kode, di panel timeline klik frame 1 layer 2 - Kemudian di panel actions tuliskan kode berikut:

- //Mengontrol Nilai Variabel detik - Tentu hitungan waktu yang kita buat harus sama seperti pada jam yang sebenarnya. Oleh karena

itu, logikanya adalah jika detik mencapai 59, maka detik akan mengulang dari 0. Untuk mengontrol nilai variabel detik seperti tersebut, maka lakukan langkah berikut:

- Klik kanan frame 1 layer 2, kemudian pilih action

16

- Panel action yang sudah kita tulis sebelumnya akan terlihat. Selanjutnya ketik tambahan script berikut:

- Membuat variabel untuk menampung data menit - Setelah variabel detik selesai dibuat, selanjutnya kita akan membuat variabel menit untuk

menampung data menit. Logikanya adalah jika nilai detik lebih besar dari 59, nilai menit akan bertambah 1

- Buat kotak teks disebelah kanan variabel detik dengan cara seperti ketika membuat variabel detik untuk menampung data menit. Jangan sampai lupa, untuk memberi nama variabel dengan menit pada variabel name pada kotak teks baru yang Anda buat.

- Klik kanan frame 1 layer 2, selanjutnya tambahkan script seperti berikut:

17

- Lakukan Test Movie

2. Membuat Hitungan Waktu Maju Dalam kesempatan yang telah lalu, kita sudah dapat membuat model pencatat waktu dengan beberapa baris logika. Tetapi cara tersebut akan sulit jika diaplikasikan dalam pembuatan FITUR game. Dalam pembuatan game, fitur pencatat waktu akan mudah dibuat dengan menggunakan symbol movie clip, karena movie clip mempunyai timeline yang berdiri sendiri. Kita dapat membuat hitungan waktu berdasarkan jumlah frame dalam timeline movie clip. Setelah itu kita dapat memasang movie clip di panggung utama di frame mana saja. Hitungan maju biasa digunakan untuk mencatat lama waktu yang digunakan user dalam menyelesaikan permasalahannya. Pada praktik kali ini kita akan membuat pencatatan waktu yang ditempuh user selama bermain dan membuat batasan waktu dalam menyelesaikan permasalahan. Membuat Hitungan Waktu dalam Detik dan Menit � Buka dokumen baru � Di panggung utama buatlah dua kotak dynamic

text kemudian di panel Properties berikan nama variabel kotak sebelah kanan dengan nama dtk dan yang sebelah kiri mnt

� Seleksi kedua kotak teks tersebut dengan menggunakan Selection Tool dengan cara melakukan klik drag mengeliling kedua teks tersebut. Setelah itu klik kanan Convert to Symbol. Berikan nama pada kotak Name: mcwaktu; Pada kolom Behaviour: Movie Clip. Selanjutnya OK //untuk memasukkan kedua dynamic text mnt dan dtk ke dalam movie clip mcwaktu

� Klik dua kali movie clip mcwaktu untuk masuk ke jendela pengeditannya (indikator kita sudah masuk ke jendela pengeditan movie clip

mcwaktu adalah label mcwaktu di panel Timeline

//untuk memperpanjang jumlah frame dalam movie clip mcwaktu

� Dalam jendela pengeditan movie clip mcwaktu, Insert Frame di frame 12

� Selanjutnya kembali ke panggung utama Flash dengan mengklik label Scene 1 yang terletak di bawah panel Timeline.

� Kemudian kita akan menuliskan action untuk movie clip tersebut. Aktifkan tool Selection dan klik movie clip mcwaktu untuk memilihnya sehingga panel Actions berubah menjadi Action-Movie Clip. Setelah itu tuliskan action berikut: onClipEvent(load){ detik=0; menit=0; mulai=0; } // Action di atas berarti bahwa pada saat movie clip di-load, nilai variabel detik, menit dan mulai ditentukan 0. Mengapa variabel yang digunakan detik dan menit, bukan dtk dan mnt??? Sengaja kita membuat variabel baru dengan nama detik dan menit karena nantinya kita akan mengisi nilai variabel dtk dan mnt berdasarkan nilai variabel detik dan menit. Cara ini dilakukan agar nilai detik dan menit di bawah 10 ditampilkan dengan 0 di depannya seperti 01, 02, 03 dan

18

seterusnya. Variabel mulai digunakan untuk mengontrol dimulainya pencatatan waktu

� Selanjutnya kita akan mengeksekusi penghitung waktu dengan menuliskan action. Tambahkan blok kode dalam action yang dicetak tebal berikut: onClipEvent(load){ detik=0; menit=0; mulai=0; } onClipEvent(enterFrame){ if(mulai==0){ if(_currentframe==12){ detik+=1; } } } //action yang tercetak tebal di atas berarti bahwa penghitungan waktu detik dilakukan setiap kali playback dalam movie clip mcwaktu mencapai frame 12. Pengitungan waktu akan dieksekusi jika syarat utamanya telah dipenuhi yaitu jika nilai variabel mulai=0. Oleh karena nilai variabel mulai telah ditentukan 0, maka pada saat movie dimainkan penghitungan waktu akan langsung dieksekusi

� Action selanjutnya adlah untuk mengontrol nilai detik agar mengulang ke 0 jika telah mencapai angka 59. Tambahkan action yang dicetak tebal berikut dan perhatikan penempatan barisnya: onClipEvent(load){ detik=0; menit=0; mulai=0; } onClipEvent(enterFrame){ if(mulai==0){ if(_currentframe==12){ detik+=1; } if(detik>59){ detik=0; } } }

� Selanjutnya kita akan mereferensikan nilai variabel detik untuk nilai variabel dtk. Tambahkan action yang dicetak tebal berikut dan perhatikan penempatan barisnya: onClipEvent(load){ detik=0; menit=0; mulai=0; } onClipEvent(enterFrame){ if(mulai==0){ if(_currentframe==12){

detik+=1; } if(detik>59){ detik=0; } } if(detik<10){ dtk="0"+detik; }else{ dtk=detik; } } //action yang dicetak tebal di atas berarti selama nilai variabel detik lebih kecil dari 10, variabel dtk akan diisi dengan 0+nilai variabel detik. Jika nilai variabel detik=10 atau diatasnya, variabel dtk akan diisi nilai detik, tanpa penambahan 0 didepannya

� Action di atas baru merupakan action untuk membuat hitungan waktu dalam detik. Lakukan test movie untuk melihat hasilnya, kemudian kembalilah ke dokumen Flash untuk melanjutkan pengeditan

� Selanjutnya kita akan menuliskan action untuk membuat hitungan waktu dalam menit. Tambahkan action yang dicetak tebal berikut dan perhatikan penempatan barisnya: onClipEvent(load){ detik=0; menit=0; mulai=0; } onClipEvent(enterFrame){ if(mulai==0){ if(_currentframe==12){ detik+=1; } if(detik>59){ detik=0; menit+=1; } } if(detik<10){ dtk="0"+detik; }else{ dtk=detik; } if(menit<10){ mnt="0"+menit; }else{ mnt=menit; } } //logika action yang dicetak tebal di atas sama dengan logika pencatat waktu hitungan detik

� Lakukan Test Movie Menghentikan Pencatat Waktu dengan Pembatasan Waktu

19

Proses penghentian waktu seringkali dilakukan dalam penyelesaian tantangan game ataupun soal interaktif. Misalnya jika dalam waktu 5 menit user tidak dapat menyelesaikan tantangan, maka game akan berakhir. Menghentikan waktu dengan pembatasan waktu memiliki sifat otomatis. Oleh karena itu tergantung pada media interaksi lain. Pada kasus ini, kita cukup menambahkan action movie clip yang mengontrol nilai variabel mulai berdasarkan waktu, bisa menit atau detik. � Contoh penambahan action berikut

menggunakan nilai menit sebagai referensi untuk mengontrol nilai variabel mulai. Perhatikan action yang dicetak tebal dan tambahkan pada action movie clip mcwaktu onClipEvent(load){ detik=0; menit=0; mulai=0; } onClipEvent(enterFrame){ if(mulai==0){ if(_currentframe==12){ detik+=1; } if(detik>59){ detik=0; menit+=1; } } if(detik<10){ dtk="0"+detik;

}else{ dtk=detik; } if(menit<10){ mnt="0"+menit; }else{ mnt=menit; } if(menit==2){ mulai=1; } } //penambahan action di atas berarti jika nilai menit=2, maka nilai mulai menjadi 1 atau tidak sama dengan 0, maka pencatat waktu akan berhenti karena logika awal pencatat waktu akan dieksekusi jika nilai variabel mulai=0.

� Lakukan Tes Movie untuk melihat hasilnya. Tentunya pada saat waktu mencapai 2 menit, pencatat waktu akan berhenti

� Jika kita ingin membatasi waktu tidak hanya 2 menit, kita tinggal mengubah nilai dalam syarat if(menit==2) menjadi if(menit==10) atau 15 atau 20 sesuai dengan kriteria yang akan kita gunakan.

� Setelah selesai membuat action ini, Buatlah tampilan penghitung waktu Anda SEMENARIK MUNGKIN dengan mengatur warna, background, kotak, oval, line dan lain-lain sehingga tampak lebih menarik.

� SIMPAN FILE HASIL PEKERJAAN ANDA

3. Membuat Tombol pada Hitungan Waktu Maju Dalam kesempatan yang telah lalu, kita sudah dapat membuat model pencatat waktu dalam hitungan maju dimana kita melakukan penghentian waktu berdasarkan pembatasan waktu. Sekarang kita akan mencoba membuat model pembatasan waktu dengan teknik lain yaitu dengan menggunakan media Tombol divariasi dengan membuat tombol mulai untuk melakukan proses penghitungan waktu. Lakukan langkah-langkah berikut: � Buka kembali file flash hitungan waktu maju yang sudah Anda buat

sebelumnya � Simpan ulang dengan nama file yang berbeda � Sisipkan layer baru (Insert Layer) untuk menempatkan kedua

tombol yang akan kita buat � Selanjutnya klik Wondow – Common Libraries – Button.

Langkah ini dilakukan untuk memunculkan panel Buttons � Pilih model button yang Anda ingin gunakan, kemudian seret ke

jendela utama file hitung waktu maju Anda dan atur penempatan posis nya

� Ubah text default button Anda misalnya menjadi Mulai dan Stop

20

� Sebelum kita menuliskan action pada kedua button tersebut, ubah dulu properties mcwakt. Klik mcwaktu, selanjutnya pada bagian nama instance-nya dengan nama waktu

�

//Variabel mulai dituliskan di action movie clip mcwaktu, sedangkan tombol yang kita buat berada di luar movie clip mcwaktu. Oleh karena itu, kita harus melakukan pendefinisian alamat movie clip dengan member nama pada instace movi clip mcwaktu dipanggung utama Flash. Misalnya diberikan nama waktu. (Perhatian: nama instance tidak mendukung penggunaan spasi). Selanjutnya kita tinggal menuliskan action pada kedua tombol yang kita buat.

� Klik Tombol MULAI: selanjutnya buka action sehingga panel Action berubah menjadi Action-Buttons. Kemudian tulis action berikut: on(release){ _root.waktu.gotoAndPlay(1); _root.waktu.mulai=0; } //pada saat tombol ditekan, maka pesan akan ditampilkan pada panel output yaitu objek akan dimainkan dari frame 1 karena variabel mulai sudah terpenuhi yaitu mulai=0

� Lakukan test movie. Apa yang terjadi???Apakah waktu Anda masih otomatis berjalan???Padahal kita bermaksud agar waktu akan berjalan ketika kita menekan tombol MULAI???Jika iya, ini disebabkan karena kita belum mengubah nilai Load pertama variabel mulai. Logika awal adalah ketika kita Load pertama kali, variabel mulai diisi dengan 0. Ini artinya bahwa objek akan dimainkan pada saat pertama kali dieksekusi atau secara otomatis hitungan waktu akan berjalan.

� Untuk membuat hitungan waktu tidak berjalan otomatis, ubah Action pada Actions-Movie Clip mcwaktu berikut: Awal: onClipEvent(load){ detik=0; menit=0; mulai=0; } Anda ubah: onClipEvent(load){ detik=0; menit=0; mulai=1; } //dengan mengubah nilai variabel mulai selain 0, maka proses eksekusi penghitungan waktu akan berhenti

� Lakukan Test Movie � Selanjutnya klik tombol STOP kemudian buka Action dan tuliskan action berikut:

on(release){ _root.waktu.mulai=1; } //pada saat tombol ditekan, maka pesan akan ditampilkan pada panel output yaitu proses penghitungan waktu akan berhenti karena nilai variabel mulai tidak sama dengan 0 Lakukan Test Movie. Klik tombol MULAI untuk melakukan proses hitung waktu dan klik tombol STOP untuk menghentikan proses penghitungan waktu

4. Membuat Hitungan Waktu Mundur

Fitur ini biasanya digunakan untuk membatasi waktu penyelesaian permasalahan dalam suatu kasus seperti game, pengerjaan soal interaktif dan lain-lain. Pada prinsipnya pembuatan pencatat waktu dalam hitungan

mundur hampir sama seperti pencatat waktu maju. Kita tinggal membalik logika hitungan maju menjadi hitungan mundur, yaitu kita menentukan nilai awal variabel data menit berdasarkan jumlah waktu yang

21

ditentukan untuk menyelesaikan permasalahan kasus. Contohnya adalah jika kita bermaksud membatasi waktu pewrmainan dalam 10 menit, maka kita tentukan nilai awal data menit menjadi 10. Berikut langkah-langkah pembuatan pencatat waktu dalam hitungan mundur.

� Buatlah dokumen Flash baru � Kemudian buatlah dua buah dynamic text

posisikan sejajar (untuk menempatkan variabel detik dan waktu seperti pada pembuatan hitungan waktu maju). Selanjutnya beri nama variabel dynamic text yang pertama (sebelah kanan dengan nama tampil_detik dan yang kedua dengan nama tampil_menit)

� Konversi kedua dynamic text tersebut

menjadi movie clip. Aktifkan Selection Tool, kemudian seleksi kedua dynamic text tersebut. Setelah itu klik kanan pada kotak hasil seleksi, kill Convert To Symbol

� Berikan nama pada kotak name mcwaktu

� Klik dua kali mcwaktu, insert frame di frame

12 untuk memperpanjang jumlah frame dalam movie clip mcwaktu

� Kembali ke panggung utama dengan menekan label Scene 1 yang terletak disebelah panel Timeline

� Klik movie clip mcwaktu, kemudian buka panel Actions sehingga panel Actions berubah menjadi Actions-Movie Clip. Setelah itu tuliskan action berikut: onClipEvent(load){ detik=0; menit=10; mulai=0; } //pada saat movie clip ini diload, nilai variabel detik ditentukan 0, nilai variabel menit ditentukan 10 karena batasan waktu adalah 10 menit, dan nilai variabel mulai ditentukan 0

� Selanjutnya kita akan menuliskan action untuk mengeksekusi penghitungan waktu mundur. Tambahkan blok kode yang dicetak tebal berikut: onClipEvent(load){ detik=0; menit=10;

mulai=0; } onClipEvent(enterFrame){ if(mulai==0){ if(_currentframe==12){ detik-=1; } } } //penghitungan waktu mundur detik dengan kelipatan 1 dilakukan setiap kali playback dalam movie clip mcwaktu mencapai frame 1. Penghitungan waktu akan mulai dieksekusi jika syarat terpenuhi yaitu jika nilai variabel mulai ditentukan 0. Karena nilai variabel mulai telah ditentukan 0, maka pada saat movie dimainkan maka penghitungan waktu akan langsung dieksekusi

� Berikutnya adalah mereferensikan nilai variabel detik untuk mengisi nilai variabel movi clip mcwaktu tampil_detik. Tambahkan action yang dicetak tebal berikut dan perhatikan penempatan barisnya: onClipEvent(load){ detik=0; menit=10; mulai=0; } onClipEvent(enterFrame){ if(mulai==0){ if(_currentframe==12){ detik-=1; } } if(detik<10){ tampil_detik="0"+detik; }else{ tampil_detik=detik; } } //sebagaimana pada hitungan waktu maju, variabel movie clip tampil_detik akan diisi dengan nilai 0 dan nilai variabel detik jika nilai variabel detik kurang dari 10. Tetapi jika nilai variabel detik=10 atau diatasnya, maka nilai variabel mcdetik akan diisi tanpa penambahan angka 0 di depannya

� Lakukan Test Movie. Masih aneh bukan???-1, -2, -3, -4 dan seterusnya….:). Ini disebabkan karena kita belum melakukan kontrol nilai detik agar mengulang ke 59 jika nilainya sudah mencapai angka 0. Untuk melakukan kontrol tersebut, Bagaimana action yang seharusnya ditambahkan???? Logikanya adalah, jika nilai variabel detik kurang dari 0, maka nilai variabel detik akan diisi dengan 59 (BUATLAH ACTION untuk logika tersebut) pada baris yang ditandai dengan tanda tanya (?) di bawah ini:

22

onClipEvent (load) { detik = 0; menit = 10; mulai = 0; } onClipEvent (enterFrame) { if (mulai == 0) { if (_currentframe == 12) { detik -= 1; ???????????????????{ ?????????????? } } } if (detik<10) { tampil_detik = "0"+detik; } else { tampil_detik = detik; } } //jika kamu dapat menyelesaikan permasalahan di atas selanjutnya Test Movie, maka penghitung waktu mundur untuk variabel detik akan dapat berjalan sebagaimana mestinya.

� Sebelum melangkah ke variabel menit, kita akan sedikit merubah penampilan waktu pada saat detik mencapai 60 dimana biasanya ditampilkan dengan 00. Untuk itu, tambahkan action yang dicetak tebal dan perhatikan penempatan barisnya onClipEvent (load) { detik = 0; menit = 10; mulai = 0; } onClipEvent (enterFrame) { if (mulai == 0) { if (_currentframe == 12) { detik -= 1; ???????????????????{ ??????????????? } } } if (detik<10) { tampil_detik = "0"+detik; } else { tampil_detik = detik; } if (detik == 60) { tampil_detik = "00"; } } //jika nilai variabel detik=60, maka variabel tampil_detik akan menampilkannya 00

� Lakukan Test Movie dan pastikan berhasil ☺ � Pada saat ini, kita baru membuat hitungan

waktu untuk variabel detik. Selanjutnya kita

akan membuat hitungan waktu untuk variabel menit. Tambahkan action yang dicetak tebal berikut dan perhatikan penempatan barisnya: onClipEvent (load) { detik = 0; menit = 10; mulai = 0; } onClipEvent (enterFrame) { if (mulai == 0) { if (_currentframe == 12) { detik -= 1; ???????????????????{ ???????????????????? menit -=1; } } } if (detik<10) { tampil_detik = "0"+detik; } else { tampil_detik = detik; } if (detik == 60) { tampil_detik = "00"; } !!!!!!!!!!!!!!!!!{ !!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!! !!!!!!!!!!!!!!!!!! } } //pada baris yang bertanda seru(!), merupakan baris action yang digunakan untuk mereferensikan nilai variabel menit untuk mengisi nilai variabel pada movie clip mcwaktu tampil_menit. TULISKAN ACTION UNTUK MAKSUD TERSEBUT!

� Setelah selesai, lakukan Test Movie � Selanjutnya percantik tampilan hasil kerja

Anda � Sekarang kita akan melakukan proses untuk

menghentikan pencatat waktu secara otomatis yaitu melalui Action – Movie Clip mcwaktu. Tambahkan action yang tercetak tebal berikut dan perhatikan penempatan barisnya: onClipEvent (load) { detik = 0; menit = 10; mulai = 0; } onClipEvent (enterFrame) { if (mulai == 0) { if (_currentframe == 12) { detik -= 1; if (detik<0) {

23

detik = 59; menit -= 1; } } } if (detik<10) { tampil_detik = "0"+detik; } else { tampil_detik = detik; } if (detik == 60) { tampil_detik = "00"; } if (menit<10) { tampil_menit = "0"+menit; } else {

tampil_menit = menit; } if (menit == 0 and detik == 0) { mulai = 1; } } //baris action yang tercetak tebal tersebut berarti bahwa jika nilai variabel menit dan detik sama dengan 0, variabel mulai ditentukan 1 sehingga proses eksekusi akan dihentikan

� Lakukan Test Movie, pastikan program berjalan dengan baik…

� Pahami semuanya untuk ULANGAN 1 MINGGU DEPAN!

5. Membuat Animasi Jam Digital A. Desain Tampilan

1. Buka dokumen Flash baru, kemudian ubah ukuran stage menjadi 500 x 200 px

2. Klik Fit in Window pada panel Timeline untuk membuat stage memenuhi jendela kerja sehingga nampak lebih besar (mempermudah dalam melakukan proses desain)

3. Buat 2 buah kotak di atas stage dengan menggunakan Ractangle Tool dengan seting awal Stroke Color = Black dan Fill Color = None

24

4. Selanjutnya berikan warna dengan menggunakan Fill Color Tool sesuai dengan pilihan dan desain

Anda dan ubah nama Layer 1 dengan nama begron

5. Tambahkan Layer baru kemudian ubah namanya menjadi teks, kemudian berikan teks-teks variasi untuk menambah desain jam digital Anda

6. Setelah proses desain teks selesai, tambahkan layer baru kemudian beri nama jamdigital. Selanjutnya buat dynamic tex jam digital pada layer jamdigital dengan seting ukuran dan jenis font bebas (usahakan cukup besar), pada properties Instance Name nya beri nama jamdigital

25

7. Proses desain Jam Digitak Anda selesai. Tetapi ketika Anda belum puas dengan desain yang sudah Anda lakukan, Anda bisa melakukan desain lagi sesuai dengan kreasi dan kepuasan Anda nanti karena saatnya kita akan menuliskan Script untuk menjalankan animasi Jam Digital kita

B. Penulisan Script 1. Buat terlebih dahulu layer baru, beri nama layer Script

2. Aktifkan layer Script, buka jendela actionnya atau tekan tombol F9, selanjutnya tuliskan action berikut. fscommand("showmenu","false"); time = new Date(); var detik = time.getSeconds(); var menit = time.getMinutes(); var jam = time.getHours(); if (jam<12) { ampm = "AM"; } else { ampm = "PM"; } if (jam<10) { jam = "0"+jam; } if (menit<10) { menit = "0"+menit; } if (detik<10) { detik = "0"+detik; } jamdigital.text = jam+":"+menit+":"+detik+" "+ampm;

3. Setelah selesai menuliskan script, coba cek eror. Jika sudah tidak ada eror, klik auto format untuk format script otomatis

4. Lakukan test movie, maka Jam Digital Anda sudah muncul, tetapi belum berjalan secara otomatis. Sekarang kita akan melakukan satu langkah lagi sehingga Jam Digital kita akan berjalan otomatis

5. Blok frame 2 pada semua layer

26

6. Selanjutnya klik kanan pada tempat blok frame 2 � Insert Frame

7. Klik kanan frame 2 layer action � Insert Keyframe. Kemudian buka panel Action pada frame 2 layer script dan tuliskan action berikut: gotoAndPlay(1);

8. Jalankan animasi, maka Jam Digital Anda akan berjalan menurut jam pada komputer Anda☺

6. Membuat Animasi Jam Analog Desain Tampilan

1. Buka dokumen baru, kemudian ubah ukuran stage menjadi 240 x 240 px

Catatan: Dalam penentuan ukuran stage, akan menentukan ukuran tampilan animasi dimana sebenarnya ukurannya bebas disesuaikan dengan kebutuhan. Ketika kebutuhannya untuk tampilan di halaman web, umumnya ukurannya kecil seperti pada contoh di atas. Tetapi ketika kebutuhannya untuk aksesoris atau bebas, ukurannya bisa lebih besar dari contoh di atas.

2. Ubah view stage memenuhi jendela kerja dengan klik Fit in Window

3. Tampilan grid dengan menekan menu View � Grid � Show Grid.

27

4. Selanjutnya buat objek lingkaran dan kotak seperti pada gambar di bawah ini dengan seting awal warna Fill = none dan warna Stroke = hitam. Setelah itu beri warna bebas dengan menggunakan Paint Bucket Tool.

5. Untuk membuat corner rectacngle terlihat melengkung, sebelum membuat kotak, seting dahulu set corner rectanglenya dengan klik set corners radius

6. Ubah nama Layer nya menjadi Background, kemudian tambahkan layer baru beri nama Angka. Selanjutnya tambahkan angka-angka membentuk seperti angka pada Jam Analog pada Layer Angka tersebut

7. Tambahkan kembali layer baru, beri nama layer Jarum

8. Kemudian buat model jarum jam analog Anda masing-masing untuk Jarum Jam, Jarum Menit, dan Jarum Detik. Langkah pembuatannya adalah sebagai berikut: a. Membuat Jarum Jam

- Buat kotak persegi panjang letakkan di pusat jam Anda seperti gambar berikut

28

- Agar bisa dianimasikan, ubah jarum tersebut menjadi symbol dengan cara Seleksi Jarum Jam � Klik F8/ dari baris Menu pilih Modify – Convert to Symbol. Pada jendela Convert to Symbol, isikan jam pada Name, pilih Type: Movie Clip, dan pilih titik registrasi nya pada posisi tengah

bawah seperti pada gambar di atas � OK - Seleksi movie clip jam, selanjutnya pada propertiesnya berikan Instance Name nya dengan nama mcjam

b. Membuat Jarum Menit - Untuk membuat Jarum Menit, dapat dilakukan dengan cara yang sama seperti pembuatan Jarum Jam di atas. Supaya tidak membingungkan, putar terlebih dahulu Jarum Jam yang sudah dibuat tadi dengan menggunakan Free Transform Tool sehingga membentuk seperti pada gambar di bawah ini.

- Selanjutnya dengan cara yang sama seperti pembuatan Jarum Jam, buat Jarum Menit seperti pada gambar di atas. Untuk membedakan berikan warna Fill merah tanpa warna Stroke, ubah menjadi Symbol beri nama Menit dan pada properties Instance Name nya diisi dengan mcmenit.

c. Membuat Jarum Detik - Putar terlebih dahulu Jarum Menit sehingga membentuk seperti gambar di bawah ini.

- Selanjutnya dengan cara yang sama seperti pembuatan Jarum Jam/ Jarum Menit, buat Jarum Detik seperti pada gambar di atas. Untuk membedakan berikan warna Fill biru tanpa warna Stroke, ubah menjadi Symbol beri nama Detik dan pada properties Instance Name nya diisi dengan mcdetik.

9. Untuk memberikan kesan rapi, tutup pangkal ketiga jarum tersebut dengan lingkaran kecil yang sudah diubah menjadi Symbol. Untuk nama symbolnya boleh bebas, sehingga didapatkan seperti pada gambar yang ketiga di atas.

29

10. Dengan demikian, proses pembuatan desain model jam analog sudah selesai. Sekarang waktunya menuliskan script untuk membuat Jam Analoag Anda dapat berjalan.

Penulisan Script 9. Buat terlebih dahulu layer baru, beri nama layer Script

10. Aktifkan layer Script, buka jendela actionnya atau tekan tombol F9, selanjutnya tuliskan action berikut. _root.onEnterFrame = function() { tanggal = new Date(); mcjam._rotation = tanggal.getHours()*30+(tanggal.getMinutes()/2); mcmenit._rotation = tanggal.getMinutes()*6+(tanggal.getSeconds()/10); mcdetik._rotation = tanggal.getSeconds()*6; };

Lakukan test movie, maka Jam Analog Anda sudah bisa berjalan layaknya jam dinding Anda di rumah…☺

7. PROYEK PRESENTASI LATIHAN PROYEK PRESENTASI

• Buka file baru dengan ukuran stage 800 x 600 pixel

• File baru yang dibuat merupakan Scene 1 yang akan digunakan sebagai halaman slide 1. Dalam kasus ini kita memerlukan 3 buah Scene/ Slide. Untuk itu tambahkan 2 Scene lagi dengan cara klik menu

Window � Other Panels � Scene

30

• Maka akan muncul panel Scene, klik sebanyak 2 kali tanda + (Add Scene) pada panel Scene untuk menambahkan 2 buah Scene/ Slide.

• Selanjutnya Scene 1 bertindak sebagai halaman muka presentasi, Scene 2 sebagai halaman isi, dan Scene 3 sebagai halaman akhir (Penutup/ kesimpulan).

• Kemudian desain semua Scene tersebut sesuai dengan isinya. Scene 1/ Halaman muka

Scene 2

31

Scene 3

• Catatan: dalam melakukan desain di Flash, teknik dalam menggambar harus diperhatikan seperti

meletakkan objek yang berbeda pada layer yang berbeda, teknik pewarnaan dan lain sebagainya.

Membuat tombol navigasi antar Scene/ Slide • Klik menu Window � Common Libraries � Button

32

• Untuk memilih button yang akan digunakan, pilih folder button yang akan digunakan, kemudian seret ke bagian stage Anda. Lengkapi tombol navigasi pada semua Scene/ Slide seperti pada contoh desain di atas.

• Selanjutnya kita akan menjalankan tombol navigasi antar slide tersebut dengan perintah Action Script. • Tombol next/ forward Scene

- Klik kanan tombol next/ forward - Pilih Action - Tulis script berikut: on(release){ gotoAndStop("Scene 2",1); }

- Maksud perintah di atas adalah jika tombol diklik, akan menuju ke Scene 2 frame 1. - Dengan cara yang sama, buat tombol-tombol navigasi yang lain pada setiap slide tentunya dengan arah Scene disesuaikan menurut tujuan pada saat tombol diklik.

• Setelah itu lakukan test movie dan pastikan semua navigasi antar slide/ scene berjalan dengan baik dengan tidak ada eror.

• Jika sudah tidak ada keterangan eror, terlihat bahwa animasi akan berjalan cepat bolak-balik dari Scene 1 hingga Scene 3. Supaya tidak terjadi hal demikian, maka ketika aplikasi dijalankan pertama kali, harus dihentikan dulu jalannya animasi. Langkah tersebut dilakukan dengan memasukkan action frame pada Scene 1 yaitu dengan cara sebagai berikut: - Tambahkan layer baru dan beri nama layer action pada Scene 1. Perhatikan gambar berikut:

33

- Klik kanan frame 1 layer action, kemudian tuliskan script berikut: stop();//menghentikan animasi pada frame saat pertama kali aplikasi dijalankan fscommand("fullscreen",true);//mengijinkan animasi ditampilkan fullscreen fscommand("allowscale",false);//tidak mengijinkan tampilan animasi diubah-ubah fscommand("showmenu",false);//menu pada tampilan animasi tidak dimunculkan

Membuat tombol navigasi antar frame • Masuk pada Scene 2

Scene 2 di atas merupakan scene isi dimana berisi materi presentasi.

• Tetapi sebelumnya, pada setiap layer masukkan frame (insert frame) sebanyak yang akan digunakan. Misalnya materi = 7, insert frame di frame 7. Sesuaikan dengan banykanya materi Anda masing-masing.

Tambah layer baru

Klik kanan dan masukkan actionnya

Beri nama layer: action

34

• Langkah tersebut dimaksudkan supaya semua layer akan dianimasikan sebanyak frame yang sama. • Selanjutnya tambahkan layer baru, beri nama layer materi. Di dalam layer materi ini akan dimasukkan materi-materi presentasi pada setipa framenya. Frame 1: materi 1, Frame 2: materi 2, Frame 3: materi 3, begitu seterusnya hingga materi terakhir.

• Pada frame 1, klik kanan kemudian pilih Insert Keyframe. Langkah ini bertujuan untuk membuat ruang untuk objek yang siap dianimasikan. Selanjutnya masukkan materi 1.

• Pada frame 2 dan seterusnya, klik kanan frame-nya, kemudian pilih Insert Blank Keyframe. Berbeda pada frame 1, Insert Blank Keyframe dimaksudkan membuat ruang kosong untuk dimasukkan objek yang berbeda pada setiap frame. Setelah memilih Insert Blank Keyframe, masukkan materi-materi sesuai dengan urutan frame-nya.

• Setelah selesai menyiapkan materi, buat tombol next dan previous sebagai tombol navigasi antar materi dengan menggunakan text tool. Sebelum dimasukkan action, harus diubah terlebih dahulu text next dan previous menjadi tombol dengan cara:

Beri nama layer: materi

Tambah layer baru

Klik kanan pada frame 1, kemudian pilih Insert Keyframe

35

- Klik text Next � pilih menu Modify � Convert to Symbol

- Selanjutnya akan muncul jendela Convert to Symbol � pilih tipe Button (untuk mengubah menjadi symbol button/ tombol) � OK.

- Selanjutnya klik kanan tombol Next, pilih Action dan masukkan script berikut: on(release){ nextFrame(); }

- Action tersebut berarti bahwa ketika tombol diklik, maka animasi akan berpindah ke frame selanjutnya (navigasi berjalan).

- Dengan cara yang sama lakukan pada text Previous tetapi scriptnya diganti dengan: on(release){ prevFrame(); }

- Action tersebut berarti bahwa ketika tombol diklik, maka animasi akan berpindah ke frame sebelumnya (navigasi berjalan).

• Lakukan test movie dan pastikan tombol navigasi berjalan dengan baik. Tombol pada materi • Ubah menjadi symbol button semua text materi, kemudian mulai dari materi pertama (tombol pertama materi) klik kanan � pilih actions � masukkan script berikut: on(release){ gotoAndStop(1); }

• Untuk materi kedua ganti angka 1 menjadi 2, materi ketiga menjadi 3 dan seterusnya sesuai dengan letak materi berada di frame berapa.

• Lakukan test movie dan pastikan tombol berjalan dengan baik. • Jika sudah tidak terdapat eror, proyek presentasi tahap pertama selesai. • Perbanyak latihan dan ulangilah praktik di atas untuk memahami perintah-perintah action di atas.

36

DAFTAR PUSTAKA

Andi Pramono., (2004), Berkreasi Animasi dengan Macromedia Flash MX., Yogyakarta: Andi Offset Mohammad Jeprie., (2005), Aplikasi Praktis dengan Action Script 2.0 menggunakan Flash MX 2004.,

Jakarta: PT Elex Media Komputindo Andreas Andi Suciadi., (2004), Menguasai Pembuatan Animasi dengan Flash MX., Jakarta: PT Elex Media

Komputindo http://girlielovers.wordpress.com/2009/01/16/macam-macam-animasi-dalam-macromedia-flash/ ICT SMK Diginnovac, Maulana Arry Syarif, Nasution Karina. Draw and Animate with Flash. 2008. Jakarta: Elex

Media Komputindo Stevano Bayu, Jubilee Enterprise. Animasi Teks dengan Flash 8. 2006. Jakarta: Elex Media Komputindo Didik Wijaya, Tutorial Action Script Diginnovac, Ahmad Zainul Fanani. Membuat Presentasi Multimedia Menggunakan Macromedia Flash Pro

8. 2007. Jakarta: Elex Media Komputindo Diginnovac, Maulana Arry Syarif. Tip dan Trik Membuat Fitur Game Flash. 2008. Jakarta: Elex Media

Komputindo Istiyanto.com http://zawa.blogsome.com/?s=tutorial+actionscript Arry Maulana Syarif, Diginovax. Tip dan Trik Membuat Fitur Game Flash. 2008. Jakarta: Elex Media

Komputindo