Kamis, 02 Oktober 2014

Cara Membuat Jam Pada Adobe Flash

aik-baik sajakan? “Lagi Semangat 45” nih. Pada tutorial kali ini saya akan membuat sebuah animasi jam dan kalender digital dengan menggunakan adobe flash.. mungkin teman-teman sudah pernah baca tutorial yang sama dengan tutorial ini, akan tetapi saya akan mencoba membuat tutorial ini dengan versi saya sendiri, Cekidot.
Pertama, yang harus dilakukan adalah memahami terlebih dahulu text type yang ada pada adobe flash, didalam flash terdapat 3 text type yakni : static text, input text & dynamic text. Masing-masing text memiliki kegunaan masing-masing. Static text sering untuk menampilkan kata/kalimat yang hanya dapat diubah bentuk dan isinya saat berada di flash, Input text sering digunakan untuk membuat form username dan password seperti textfield pada adobe dreamweaver, dan Dynamic text sering digunakan untuk menampilkan kata/kalimat yang dapat berubah sewaktu-waktu, untuk mengubah bentuk dan isinya teman-teman dapat menggunakan Action Script pada flash. Nahh.. yang akan kita gunakan untuk membuat jam digital adalah Dynamic text.
Berikut adalah animasi timer yang akan kita buat.

Langkah Pertama

Buat file baru dengan ukuran yang kita inginkan sebagai contoh disini ukuran stage yang saya gunakan adalah width 350px dan height 100px.

Langkah Kedua

Buat Object Rectangle yang digunakan sebagai background jam digital yang ingin kita buat. Warna yang digunakan sesuai dengan keinginan masing-masing jika ingin member variasi desain silahkan gunakan corner radius untuk mengubah nilai sudut object rectangle.

Langkah Ketiga

Buat Dynamic Text dengan nama variable masing-masing misalnya var “kalender” dan var clock”.

Langkah Keempat

Buka ActionFrame dengan cara klik pada Keyframe pertama lalu tekan tombol F9 atau klik kanan pada Keyframe pertama lalu pilih action, setelah masuk ke action panel, masukkan ActionScriptnya sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//ketika movie dijalankan
onEnterFrame = function() {
 
waktu = new Date(); //Membuat variabel waktu
 
//pastikan penggunaan nama var pada dynamic textnya sama
//Actionscript berikut digunakan untuk menampilkan waktu dan tanggal sesuai dengan Data Waktu pada komputer anda
jam = waktu.getHours();
menit = waktu.getMinutes();
detik = waktu.getSeconds();
 
tanggal = waktu.getDate();
bulan = waktu.getMonth();
tahun = waktu.getFullYear();
 
//variabel berikut digunakan untuk membuat penamaan pada bulan
bln = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember");
bulan = bln[bulan];
 
//Actionscript berikut digunakan untuk menampilkan angka 0 jika angka yang tampil bernilai dibawah 10
if (jam<10) {
jam = "0"+jam;
}
if (menit<10) {
menit = "0"+menit;
}
if (detik<10) {
detik = "0"+detik;
}
 
//Actionscript berikut digunakan untuk menampilkan Actionscript diatas pada DynamicText pada movie yang telah kita buat
// yaitu Actionscript Kalender dan Waktu
kalender = tanggal+" - "+bulan+" - "+tahun;
clock = jam+":"+menit+":"+detik;
 
}

Maka hasilnya akan jadi seperti ini.

Tidak ada komentar:

Posting Komentar