Cara Membuat Jam Animasi Digital Flash dan Kalender

Pada artikel terdahulu, kita sudah belajar mengenai Cara Membuat Jam Analog dengan menggunakan Macromedia Flash 8.Kurang lengkap rasanya kalau kita tidak mempelajari cara membuat jam animasi digital sekaligus kalendernya.

Contoh Jam Digital 1

Contoh Jam Digital 2

Selain tutorial menggunakan software macromedia flash diatas, pada posting terdahulu saya juga telah membuat artikel tutorial Cara Membuat Jam Digital, dan Cara Membuat Jam 3 Dimensi Flip Clock serta cara pemasangannya pada sidebar blog. Pada tips tersebut, saya menyarankan anda untuk menggunakan situs layanan online, sehingga kita tidak perlu memikirkan kode-kode scrift yang kita tahu sangat membingungkan.

Namun pada file jam yang kita dapat, masih terdapat nama situs tempat kita membuat jam online tersebut, dan pada pemasangan disidebar blog, kita harus mengutak-atik kode pemasangannya agar tulisan tersebut tidak kelihatan.

Dan pada artiklel kali ini, saya akan membagikan tips cara membuat jam dengan menggunakan software yang terdapat pada netbook/computer kita, sehingga hasil yang kita dapat merupakan murni dari hasil kreasi kita sendiri. Disini akan saya jelaskan secara lebih rinci, agar teman-teman yang masih baru menggunakan applikasi ini, tidak merasa kebingungan.

Kita langsung saja…

1.     Buka macromedia anda, kemudian klik Flash Document pada bagian Create New.

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.1

2.     Setelah halaman kerja muncul, selanjutnya tekan tombol Ctrl+F3 pada keyboard anda.

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.2

Pada halaman Document Properties seperti gambar diatas, silahkan isi form yang terdapat disana, dan ganti ukuran default media dengan ukuran jam yang ingin anda buat (contoh : 200 x 60 px), selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

Jalankan(geser) scroll halaman untuk menampilkan media yang telah diedit.

3.     Selanjutnya klik ikon Insert Layer yang terletak dipojok kiri bawah halaman layer, tambahkan 2 layer baru.

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.4

4.     Klik kanan pada layer ke-3(paling atas), kemudian pilih properties.

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.5

Pada halaman Layer Properties yang muncul seperti gambar diatas, ganti Nama layer menjadi action selanjutnya klik OK.

Lakukan hal yang sama pada layer ke-2, ganti nama layer menjadi tanggal, dan layer ke-1 menjadi jam.

5.     Selanjutnya klik Text Tool atau tombol T pada keyboard anda.

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.6

Buatlah teks area pada media yang telah anda siapkan, kemudian tulis 00:00:00 am (pastikan panjang tulisan tidak melebihi media) selanjutnya tekan Ctrl+F3, maka akan muncul halaman property seperti pada gambar dibawah.

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.7

Pada kolom dibawah Dynamic text, ganti <Instance Name> menjadi clock_txt.

Pada halaman tersebut anda juga bisa mengatur jenis font,warna, serta besar kecilnya font.

6.     Selanjutnya klik layer tanggal, buat area teks dibawah teks yang sudah ada, kemudian tulis Minggu, 31 Desember 2012

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.8

Selanjutnya tekan Ctrl+F3, pada kolom Variable ditulis myDate. (Aturlah jenis font, warna, dan ukuran fonts agar tidak melebihi halaman media).

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.9

7.     Langkah berikutnya, klik dibawah Frame 1 pada layer jam, kemudian tekan F9 pada keyboard anda, selanjutnya Copy kode dibawah dan Paste pada halaman Action yang muncul.

time=new Date(); // time object

var seconds = time.getSeconds()

var minutes = time.getMinutes()

var hours = time.getHours()

if (hours<12) {

ampm = “am”;

}

else{

ampm = “pm”;

}

while(hours >24){

hours = hours – 12;

}

if(hours<10)

{

hours = “0″ + hours;

}

if(minutes<10)

{

minutes = “0″ + minutes;

}// author: Nyoman CNd

// http://www.lombokdihati.wordpress.com

if(seconds<10)

{

seconds = “0″ + seconds;

}

clock_txt.text = hours + “:” + minutes + “:” + seconds +” “+ ampm;

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.10

8.     Selanjutnya klik dibawah Frame 1 pada layer tanggal kemudian tekan F9.

Copy kode dibawah dan Paste pada halaman Action.

myDate = new Date();

weekday = new Array(“Minggu,”, “Senin,”, “Selasa,”, “Rabu,”, “Kamis,”, “Jumat,”, “Sabtu,”);

month = new Array(“JaNuaRi”, “FebRuaRi”, “MaRet”, “ApRil”, “Mei”, “JuNi”, “JuLi”, “AgusTus”, “SepTeMbEr”, “OkToBer”, “NoVemBer”, “DeSeMbEr”);

// author: Nyoman CNd

// http://www.lombokdihati.wordpress.com

myDate = (weekday[myDate.getDay()]+” “+myDate.getDate()+” “+month[myDate.getMonth()]+” “+myDate.getFullYear());

9.     Pada Layer action, klik kanan dibawah Frame 2, kemudian pilih Insert KeyFrame,

Membuat Jam Animasi Digital dan Kalender dengan Macromedia

Gambar.11

Selanjutnya tekan F9 pada keyboard anda, dan langkah yang terakhir Copy kode dibawah dan Paste pada halaman Action

gotoAndPlay(1);

Tekan Ctrl+ENTER untuk melihat hasilnya.

1.     Selanjutnya simpan jam animasi anda dengan mengklik File –>Export–>Export Movie.

Pada halaman berikutnya, pilih type Flash Movie(*.swf) kemudian klik Save, dan pada halaman terakhir klik OK.

SELESAI

Untuk mengganti warna background atau memasukkan gambar/foto untuk background jam, silahkan anda baca pada artikel terkait dibawah

Artikel terkait :

1.     Cara Membuat Jam Analog Animasi Dengan Macromedia Flash

2.     Cara Membuat Teks Animasi Dengan Macromedia Flash 8

3.     Cara Membuat Teks Berjalan Dengan Macromedia Flash

4.     Cara Membuat Banner Teks Animasi Dengan Easy GIF Animator

5.     Cara Membuat Banner Teks Animasi Berlogo Dengan Easy GIF Animator

6.     Cara Membuat Tombol Button Animasi Dengan Easy GIF Animator

About these ads

39 responses to “Cara Membuat Jam Animasi Digital Flash dan Kalender

  1. Great blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple tweeks would
    really make my blog shine. Please let me know where you got your
    theme. With thanks

  2. Ping balik: HarSya Techno

Silahkan tinggalkan komentar, untuk silaturahmi selanjutnya

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s