Buat Animasi Jam Analog dan Digital dengan Flash

21Des08

Disadari atau tidak, jam sudah menjadi benda yang sangat penting dalam aktifitas keseharian kita. Dengan jam kita bisa melihat petunjuk waktu dan berjalannya, sehingga kita dapat melakukan rutinitas kegiatan dan acara sesuai pada jadwalnya. Terbayang kan bagaimana kacaunya hidup sehari-hari jika alat penunjuk waktu yang satu ini tidak pernah ada? Nah, sekarang ceritanya kita ingin membuat animasi Flashnya, gimana caranya?

Flash memiliki sebuah predefined Date class yang berguna untuk mengambil data berupa waktu dan tanggal relatif terhadap GMT/UTC atau relatif terhadap local time (yaitu waktu di sistem operasi dimana Flash Player tersebut sedang berjalan), sehingga kita dapat membuat aplikasi yang berhubungan dengan tanggal atau waktu seperti misalnya jam, kalender, timer, dan lain-lain.

Karena judulnya buat animasi jam, jadi disini saya hanya bahas cara membuat jam saja, baik digital (hanya menampilkan digit angka) maupun analog (seperti jam dinding pada umumnya).

1. Jam Digital

Buat 3 buah teks untuk tampilan jam, menit, dan detik. Kemudian ubah tipe teks ketiga-tiganya menjadi dynamic text, pada kolom variabelnya berikan nama teks_displayJam, teks_displayMenit, teks_displayDetik.

buat 3 kotak teks

Terakhir baru berikan script di frame tersebut:

var dateObj:Date;
var jam:Number;
var menit:Number;
var detik:Number;
var teks_displayJam:String;
var teks_displayMenit:String;
var teks_displayDetik:String;

this.onEnterFrame= function()
{
    dateObj = new Date()
    jam = dateObj.getHours();
    menit = dateObj.getMinutes();
    detik = dateObj.getSeconds();

    if(jam < 10)
        teks_displayJam = "0" + jam.toString();
    else
        teks_displayJam = jam.toString();

    if(menit < 10)
        teks_displayMenit = "0" + jam.toString();
    else
        teks_displayMenit = menit.toString();

    if(detik < 10)
        teks_displayDetik = "0" + detik.toString();
    else
        teks_displayDetik = detik.toString();
}

hasil akhir

2. Jam Analog

Pertama-tama buat 3 buah movieclip berbentuk garis yang akan berperan sebagai jarum penunjuk pada jam (jam, menit, dan detik) berikan instance name pada masing2 jarum dengan nama mc_jarumJam, mc_jarumMenit, dan mc_jarumDetik. Satu hal yang perlu diperhatikan adalah saat mengconvert masing2 garis menjadi symbol, set registration point ke titik tengah-bawah (lihat kotak yg ditunjuk mouse).

set registration point

Gambar sebuah kerangka jam yang akan ditempati jarum-jarum tersebut, kreasikan sendiri desain bentuk, warna, dan ukurannya sebagus mungkin. Buat juga sebuah titik tepat di tengah-tengahnya agar mudah menyusun jarum-jarumnya, sekarang pasangkan ketiga jarum yang kita buat di awal tadi saling tumpang tindih, dengan acuan bagian bawah ketiga movieclip jarum berada di titik tengah jam, sehingga bagian atasnya mengarah tepat ke angka 12.

susun jarum

Terakhir berikan script pada frame:

this.onEnterFrame = function()
{
    var dateObj:Date = new Date();
    var detik:Number = dateObj.getSeconds();
    var menit:Number = dateObj.getMinutes();
    var jam:Number = dateObj.getHours();

    mc_jarumDetik._rotation = detik*6;
    mc_jarumMenit._rotation = menit*6;
    mc_jarumJam._rotation = jam*30;
    mc_jarumJam._rotation += (menit/2);
}

hasil akhir

Tutorial lengkap ttg pembuatan Jam Digital dan Analog ini bisa dilihat di tabloid PC-Mild edisi 24/2008 (8 desember)

3. Tambahan (ngopi dari help-nya Flash CS3):

Constructor

Date([yearOrTimevalue:Number], [month:Number], [date:Number], [hour:Number], [minute:Number], [second:Number], [millisecond:Number])

Method

To call the methods of the Date class, you must first create a Date object using the constructor for the Date class

getDate(), getDay(), getFullYear(), getHours(), getMilliseconds(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimezoneOffset(), getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMilliseconds(), getUTCMinutes(), getUTCMonth(), getUTCSeconds(), getUTCYear(), getYear(), setDate(date:Number), setFullYear(year:Number, [month:Number], [date:Number]), setHours(hour:Number), setMilliseconds(millisecond:Number), setMinutes(minute:Number), setMonth(month:Number, [date:Number]), setSeconds(second:Number), setTime(millisecond:Number), setUTCDate(date:Number), setUTCFullYear(year:Number, [month:Number], [date:Number]), setUTCHours(hour:Number, [minute:Number], [second:Number], [millisecond:Number]), setUTCMilliseconds(millisecond:Number), setUTCMinutes(minute:Number, [second:Number], [millisecond:Number], setUTCMonth(month:Number, [date:Number]), setUTCSeconds(second:Number, [millisecond:Number]), setYear(year:Number), toString(), UTC(year:Number, month:Number, [date:Number], [hour:Number], [minute:Number], [second:Number], [millisecond:Number]), valueOf()

Filed under: ActionScript 2.0, Flash, Tutorial | 37 Komentar
Tag:animasi, jam analog, jam digital

37 Responses to “Buat Animasi Jam Analog dan Digital dengan Flash”

Pengumpan untuk Entri ini Trackback Address

1 arwan on 8 Februari 2009 berkata:

keren mas….
2 F4154LMAN on 10 Februari 2009 berkata:

@arwan
thx hehehe
3 yepi on 3 Maret 2009 berkata:

salam kenal yah…
4 F4154LMAN on 10 Maret 2009 berkata:

@yepi
ok 8)
5 agung darmawan on 21 Maret 2009 berkata:

w minta tutor dunk temanya gni..tQ y bro..

Tema : Buku Tamu
Objektif : Sebagai sarana bagi tamu undangan yang datang dalam suatu acara sehingga memudahkan panitia untuk mengetahui data tamu yang datang.
Contoh : Menampilkan foto dari suatu acara Misalnya : acara pernikahan maka menampilkan foto kedua mempelai, dan sediakan sebuah form untuk nama tamu, alamat, dan lain lain.
6 osama JUNIOR on 25 Maret 2009 berkata:

animasi jam
7 halfdesigner on 17 April 2009 berkata:

tutorialnya bagus! ada tutrial as3 ga??
8 syachrul on 6 Mei 2009 berkata:

thanks Bro tas Tutornya…
9 F4154LMAN on 13 Mei 2009 berkata:

@agung darmawan
kalau diliat alurnya, yg perlu dipersiapkan:
1. interface utk input data2nya
2. jenis database +mekanisme submitnya

@osama JUNIOR
???

@halfdesigner
belum ada, saya belum bisa

@syachrul
ok bang syachrul, kpn2 mampir lg ya
10 Arfiula on 3 Juli 2009 berkata:

Toturialnya bagus banget ! ! ! tp kebanyakan huruf n angka . . jd pusing deh
11 F4154LMAN on 6 Agustus 2009 berkata:

@Arfiula
biar gak pusing, saya anjurkan saudara pasien untuk istirahat dahulu sejenak..
12 Ginga Amirul Muizz Purnama ( 61n64 ) on 13 Oktober 2009 berkata:

Kakak , lain kali ada softwarenya Flashpaper donk.Kalo supaya agak maju teknologinya, jangan dari Sourcenya, tapi langsung via PDFnya.Semoga situs Pemandu Membuat Flash di Indonesia menjadi no 1 di Dunia.
13 F4154LMAN on 18 Oktober 2009 berkata:

@Ginga Amirul Muizz Purnama ( 61n64 )
Makasih atas komentarnya, cuman saya gak ngerti maksudnya.. seriuss!
14 Kevin on 22 November 2009 berkata:

artikel ne sangat membantu saya dlm memperdalam action script dalam flash…good job!! trzlah berkarya..!!!
15 F4154LMAN on 30 November 2009 berkata:

@kevin
yoi man, aq kan trz berkarya!!
16 sandy on 1 Desember 2009 berkata:

wah keren banget niih..makasih ya mas..kalo bisa mampir ke blogku.. http://sandywicaksono.blogdetik.com
17 okay on 9 Desember 2009 berkata:

mateb mas mas
18 F4154LMAN on 13 Desember 2009 berkata:

@sandy
sip bro

@okay
mateb juga
19 Edwin on 28 Januari 2010 berkata:

keren juga mas, thank
20 Ginga Amirul Muizz Purnama on 23 Februari 2010 berkata:

Oh kakak gak tau maksudnya ya. Kacian deh. Kalo buat pdfnya, cari di google sebagai [ Download Free PDF Excange ] supaya kakak punya juga web strogae. Bisa dari 4Shared ampe Ziddu. Kalo gak negerti juga, kebangetan kakak.!!!he…he…he…he…he!
21 agus on 2 Maret 2010 berkata:

keren cuy buat jm nya !!!!!
22 aa on 10 Maret 2010 berkata:

wah kerennnnnnnnnnn tapi sayang rumit buatnya
23 H4ryo on 16 Maret 2010 berkata:

thanks ya mas!!!
scriptnya sgt membantu!!
24 F4154LMAN on 28 Maret 2010 berkata:

@Edwin
thanks

@Ginga Amirul Muizz Purnama
-__- bukaan, yang saya nggak ngerti tuh konteks kalimat komentarnya dan hubungannya dengan artikel ini.. asli!

@aa
nggak akan begitu rumit kalau sudah paham algoritmanya.. beneran deh

@H4ryo
sama2 mas!!
25 Ginga Amirul Muizz Purnama (61n64) on 31 Maret 2010 berkata:

Oo gitu, gak ngerti yah, gaq pp kok kk. Maksud saya, filenya disertai File Source fla-nya dan pdfnya. Supaya gak ada yang ke sini lagi. Lagipula, kalo gitu, kk ajarkan yang sesat dong, dengan cara memboroskan uangnya ke warnet, atau membayar perbulan internet para pengunjung kk. WordPress dan Blogspot itu membutuhkan bite gede untuk full koneksi. Apalagi kalau kliennya kk memakai modem yang gak berabodemen, ya gitu kk. Jadi laksankan saran saya yang begitu berharga ini ah kk. Untuk sering chat, kunjungi di Facebook dengan :gingaamirulmuizzpurnama@ymail.com
26 putra gamapala on 7 April 2010 berkata:

keren…………….. bangetttttt…..
hebet …hebat…hebat….
27 iskandar on 5 Mei 2010 berkata:

Assalamualaikum,
salam knal nih,,
Gan ane mohon ijin kopy hyach… ane jga newbe blog mhon untuk main ke blog ane dan kasih kritik dan saran nye ya…
tenx bgt bro..
28 F4154LMAN on 5 Mei 2010 berkata:

@iskandar
Wa’alaikumsalam,

Makasih nih udah berkunjung ke blog ane met ngeblog aja..

Sedikit kritik dan saran dari ane nih: untuk artikel-artikel yang kita mengcopy-paste sama persis dari tempat lain, mungkin perlu juga nyantumin credits dalam bentuk link balik ke artikel aslinya, yah itung2 sebagai apresiasi buat penulis aslinya..

Misalkan di bagian bawahnya dikasih footnote:
[sumber: http://faisalman.wordpress.com/2008/12/21/buat-animasi-jam-analog-digital-dengan-flash/%5D

Klo nggak ntar tulisan kita bisa dibilang copycat/plagiat, hehe..

-F4154LMAN-
29 Ginga Amirul Muizz Purnama ( 61n64 ) on 1 November 2010 berkata:

Please mengertilah kk, bahwa ciptakan yang versi Adobe Acrobatnya. Please…
30 Poetra Panengah on 14 Januari 2011 berkata:

Mas … tolong dong saya baru mau blajar flash
ya terutama dengan topik membuat jam digital & analog..dari kemarin saya mencoba membuatnya namun belum berhasil juga
Mas… bisa gak file mentahannya (.fla) di upload trus kasih saya link buat downloadnya.
Berharap sangat permintaan ini dapat terpenuhi .. sebelum & sesudahnya saya haturkan banyak terimakasih..
31 Hikaru-sama on 11 Maret 2011 berkata:

Sankyu,
lagi butuh bgt tentang ini nih.. sekali lagi thanks
32 newbie on 16 Mei 2011 berkata:

oiya gan faisal yg d maksud flash itu pa ya ? oiya kalo punya link uuntuk download flash yg d maksud d atas tolong kasih tau saya ..
33 xxx on 10 Agustus 2011 berkata:

mungkin bisa lebih disederhanakan seperti ini :
http://rakaregian.web.id/web/index.php?option=com_content&view=article&id=25:membuat-jam-analog-dengan-flash&catid=2:flash&Itemid=3
34 desta on 16 September 2011 berkata:

Gan klau jam analog dan digital digabungkan jadi satu gimana tu cranya?
35 shafwansyahreza on 21 Oktober 2011 berkata:

nice post (y)