Buat Animasi Jam Analog dan Digital dengan Flash

Mungkin kita sudah melihat dan memiliki jam dalam bentuk benda, atau dengan jarum sebagai penunjuk waktu. Dan juga kita sering memperhatikan jam dalam bentuk analog. Namun, apakah kita terpikir untuk membuat animasi jam analog. Mungkin sangat jarang orang berpikir demikian, karena toh kita kita tinggal membelinya, tak perlu membuatnya.

Bagi Anda yang yang tertarik untuk membuat jam animasi, baik analog maupun jarum, Anda bisa menggunakan tutorial sederhana ini sebagai petunjuk pembuatannya. Sehingga Anda tahu bagaimana cara membuat sebuah animasi yang paling sederhana, namun bisa sangat bermanfaat bagi Anda.

Petunjuk di bawah ini adalah tutorial bagaimana cara membuat jam animasi, timer, kalender, atau apa pun yang berkaitan dengan hitungan waktu. Anda bisa membuatnya dengan program falsh.

Program flash memiliki sebuah predefined date class yang berguna untuk mengambil data berupa waktu dan tanggal yang relatif terhadap GMT/ UTC atau dapat disesuaikan dengan waktu setempat, yaitu tempat di mana sistem operasi falsh player tersebut berjalan. Oleh karena itu, mari perhatikan bagaimana cara pembuatan jam animasi dengan flash player, baik yang digital maupun yang analog.

Pertama, untuk membuat jam digital yang harus Anda lakukan adalah membuat tiga buah teks untuk membuat tampilan jam pada stage yang telah disediakan oleh flash, yaitu tampilan untuk jam, tampilan untuk menit, dan tampilan untuk detik.

Setelah itu, ubahlah ketiga teks tersebut menjadi dynamic teks. Lalu, pada kolom variabel yang tersedia berikan nama teksnya, yaitu teks_displayJam, teks_displayMenit, teks_displayDetik.

Kemudian, di dalam frame masukan script dengan kode seperti yang tertera dibawah ini.

01. var dateobj:date;
02. var jam:Number;
03. var menit:Number;
04. var detik:Number ;
05. var teks_displayJam:String;
06. var teks_displayMenit:String;
07. var teks_displayDetik:String;
08. (kosongkan)
09. this.onEnterFrame=function()
10. {
11. dateObj = new Date ()
12. jam dateObj.getHours();
13. menit dateObj.getMinutes ();
14. detik dateObj.getSecon ();
15. kosongkan
16. if(jam < 10)
17. teks_displayJam = "0" + jam.toString();
18. Else
19. teks_displayJam = jam.toString();
20. kosongkan
21. if(menit < 10)
22. teks_displayMenit = "0" + jam.toString();
23. else
24. teks_displayMenit = menit.toString();
25. kosongkan
26. if(detik < 10)
27. teks_displayDetik = "0" + detik.toString();
28. else
29. teks_displayDetik = detik.toString();

Klik enter untuk melihat hasil akhir.

Untuk membuat jam analog pun tidak jauh berbeda dengan pembuatan jam digital. Yang pertama Anda lakukan adalah membuat tiga buah movie clip berbentuk garis yang akan dibentuk sebagai jarum penuntuk waktu, garis yang pertama untuk penunjuk jam, garis yang kedua untuk petunjuk menit, dan garis yang ketiga untuk penunjuk detik.

Kemudia berikan nama pada ktiga garis tersebut, yaitu, mc_jarumJam, mc_jarumMenit, dan mc_jarumDetik.

Hal yang terpenting dalam pembuatan jam analog yaitu mengconvert masing-masing garis menjadi simbol, lalu set registration point ke titik tengah. (lihat kotak yang ditunjuk oleh mouse).

Setelah itu, gambar sebuah kerangka jam, baik bulat ataupun persegi terserah sesuai dengan selera Anda dan kreasikan sebagus mungkin dengan menggunakan gambar-gambar yang sudah ada di komputer.

Gambar kerangka tersebut akan ditempeli jarum-jarum tersebut. Lalu, buat juga sebuah titik tepat di tengah jam tersebut, hal ini akan memudahkan Anda dalam menyusun angka-angka dan jarum-jarumnya agar tidak tumpang tindih. Dengan acuan bagian bawah ketiga movie clip jarum berada di titik tengah sehingga bagian atasnya mengarah tepat ke angka 12.

Terakhir, susun jarum sesuai dengan waktu yang sedang berjalan. Kemudian, buat script di bawah ini pada frame yang sudah tersedia.

01. this.onEnterFrame = function()
02. {
03. var dateObj:Date = new Date();
04. var detik:Number = dateObj.getSeconds();
05. var menit:Number = dateObj.getMinutes();
06. var jam:Number = dateObj.getHours();
07. kosongkan
08. mc_jarumDetik._rotation = detik*6;
09. mc_jarumMenit._rotation = menit*6;
10. mc_jarumJam._rotation = jam*30;
11. mc_jarumJam._rotation += (menit/2);
12. }
Tekan enter untuk melihat hasil akhir.

Selamat mencoba.


Sumber : http://www.anneahira.com/animasi-jam.htm