Membuat Jam Analog dengan Macromedia Flash 8

Nggak afdhol rasanya kalok udah nulis cara buat jam digital tapi nggak dilanjutin nulis
cara buat jam analognya sekalian. Jam analog alias jam yang pakek jarum caranya hampir mirip-
mirip dengan cara buat jam digital. Sok atuh kita mulai..

1. Cara pertama masih sama. Yaitu buka halaman baru macromedia flash 8. Aku masih sih
pakek ukuran 500x500 pixels. Masalah ukuran mah sesuai selera.. (Ngubahnya di
properties)
2. Ubah nama layer 1 menjadi jarum jam. Buat garis lurus dengan Line Tool (N). Sedikit
dimodif juga nggak pa-pa kok. Klik kanan pada garis tersebut → Convert to Symbol →
beri nama jarum jam → Movie Clip (ubah regristrasi menjadi bottom-center) → OK.
Ubah instance name pada properties menjadi jarum_jam.
3. Tambahkan layer baru, ubah nama menjadi jarum menit. Buat garis lurus di atas jarum
jam (usahakan pangkalnya menjadi satu) dengan Line Tool (N) lagi. Tapi jarum ini lebih
panjang dari jarum jam yang tadi dibuat. Klik kanan pada garis tersebut → Convert to
Symbol → beri nama jarum menit → Movie Clip (ubah regristrasi menjadi bottom-
center) → OK. Ubah instance name pada properties menjadi jarum_menit.
4. Tambahkan layer baru lagi, ubah nama menjadi jarum detik. Buat garis lurus di atas
jarum menit (usahakan pangkalnya menjadi satu) dengan Line Tool (N) lagi. Kali ini
jarum yang dibuat bisa sama panjang dengan jarum menit, hanya saja dibuat dengan
warna berbeda dan lebih tipis. Klik kanan pada garis tersebut → Convert to Symbol →
beri nama jarum detik → Movie Clip (ubah regristrasi menjadi bottom-center) → OK.
Ubah instance name pada properties menjadi jarum_detik.
5. Oke. Para jarum sudah siap. Sekarang tinggal masukin script-nya. Kembali ke layer
jarum jam. Klik pada jarum tersebut. Buka actions (Window → Actions, atau dengan
menekan F9). Kemudian isikan script seperti dibawah ini:

6. Nah.. Tinggal dilihat lewat Ctrl+Enter. Udah berhasil kan? Monggo silakan di rias send
Cara Membuat Gambar Animasi Berputar atau Baling Baling Animasi
Posted on 7 Februari 2012 by Nyoman CNd

Gambar Animasi Berputar

Membahas masalah gambar animasi adalah suatu hal yang sangat menarik, karena seiring
dengan perkembangan teknologi yang semakin maju, sehingga dengan semakin banyaknya
software pendukung yang bermunculan, secara langsung akan berpengaruh dengan
keanekaragaman bentuk gambar animasi yang akan dihasilkan.

Masih pada Macromedia Flash Professional 8, kali ini saya akan berbagi tutorial dasar animasi
ringan yaitu mengenai cara membuat gambar animasi berputar yang menyerupai baling-baling
atau kipas angin, dengan arah dan kecepatan putaran yang bisa kita atur/tentukan sendiri.

Apakah anda berminat mencobanya?? Silahkan ikuti langkah-langkah dibawah.

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

Gambar.1

2. Setelah muncul halaman baru, selanjutnya tekan Ctrl+F3 pada keyboard netbook/computer
anda, sehingga muncul halaman seperti gambar dibawah.
Gambar.2

Pada halaman Document Properties seperti gambar no.2 diatas, silahkan isi form yang
terdapat disana (contoh 200×200 px). Selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

3. Selanjutnya klik Rectangle Tool (R)kemudian pilih PolyStar Tool.

Gambar.3
 Klik Ctrl+F3 pada keyboard kemudian klik Option… pada halaman properties hingga muncul
halaman Tool Settings seperti dibawah.

Gambar.4

Ganti ukuran default Number of sides dengan angka 3

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

4. Buatlah 2 buah segitiga seperti gambar dibawah.

Gambar.5
5. Selanjutnya klik Oval Tool (O) kemudian buatlah 1 buah lingkaran kecil seperti gambar no.5
diatas.

4. Langkah selanjutnya, aturlah posisi ketiga gambar tersebut hingga menjadi seperti gambar
dibawah.

Gambar.6

Selanjutnya klik dibawah angka frame 30 kemudian klik F6 pada keyboard anda.

7. Langkah berikutnya, klik dibawah angka frame 15 kemudian klik kanan, selanjutnya pilih
Created Motion Tween
Gambar.7

8. Selanjutnya klik Ctrl+F3 pada keyboard hingga muncul halaman seperti gambar dibawah.

Gambar.8

Pada bagian Rotate pilih CW dengan 5 times.

9. Tekan Ctrl+ENTER untuk melihat hasilnya.

 Untuk menghasilkan putaran yang bagus, silahkan edit pada angka frame(langkah no.6)
dan angka frame rate (Langkah no.3). Contoh : Letakkan/geser Keyframe dibawah angka
70 dengan frame rate 50).

CW adalah putaran kekanan yang searah dengan jarum jam, dan CCW adalah putaran kekiri.

10. Untuk menyimpan gambar animasi tersebut, silahkan klik File–>Export–>Export Movie

Simpan dengan type Animated GIF(*.gif) atau Flash Movie(*.swf).

 SELESAI

Cara Membuat Jam Analog Animasi Dengan Macromedia Flash

Posted on 11 Januari 2012 by Nyoman CNd

Pada posting terdahulu, saya sudah menerbitkan artikel dengan judul Cara Membuat Jam Digital
dan Memasangnya Pada Sidebar- Blog, dan pembahasan tutorial pada artikel tersebut saya
menyarankan anda untuk menggunakan salah satu situs layanan online dalam membuat jam.
Hasilnya, jam animasi flash yang kita dapat masih terdapat tulisan nama website penyedia
layanan online tersebut.

Kalau jam animasi tersebut kita pasang pada sidebar blog, tulisan tersebut pastinya akan ikut
kelihatan, dan untuk menyembunyikannya kita harus mengutak-atik kode html agar tidak ikut
kelihatan pada sidebar blog kita, sungguh menjengkelkan sekali

Setelah berkali-kali saya nanya kepada mbah google tentang cara membuat jam animasi flash,
jawabannya sangat beraneka ragam, akhirnya rasa penasaran saya terjawab sudah, anda bisa
lihat hasilnya pada jam flash diatas.

Pada artikel saya kali ini, saya akan mencoba memodif sedikit tutorial-tutorial terdahulu, agar
teman-teman bloggers yang kebetulan masih belum tahu cara membuatnya, dapat ikut berkreasi

”Biarlah anjing menggonggong yang penting khafilah tetap berlalu”

Biarkan para bloggers senior mencibir dengan tutorial ini, yang penting artikel ini juga dapat
bermanfaat untuk teman-teman sesama junior

Untuk bisa membuat jam animasi flash tersebut, modal utama kita tentunya kita harus
menginstall sebuah software berbasis flash pada netbook/computer kita. Dan disini saya
menyarankan anda untuk menggunakan Macromedia Flash Propessional 8. Ukuran software ini,
tidak lebih besar dari software Coreldraw hanya sekitar 107MB.
Adapun langkah-langkah dalam membuat jam animasi flash adalah sebagai berikut :

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

Gambar.1

2. Setelah muncul halaman baru, selanjutnya tekan Ctrl+F3 pada keyboard

netbook/computer anda, sehingga muncul halaman seperti gambar dibawah.

Gambar.2

Pada halaman Document Properties seperti gambar no.2 diatas, silahkan isi form
yang terdapat disana, dan ganti ukuran default media dengan ukuran jam yang ingin
anda buat (contoh : 200 x 200 px), selanjutnya klik OK.
 Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

Pada bagian ini, anda juga bisa menggunakan ukuran gambar/foto yang terdapat
pada netbook/computer anda. Jadi, sebelum membuka Macromedia Flash, silahkan
edit terlebih dahulu file gambar/foto yang tersimpan pada netbook/computer anda,
contohnya seperti file gambar logo WP yang saya buat dibawah. Anda juga bisa
menggunakan foto anda sendiri sebagai background jam animasi flash.

3. Setelah gambar/foto anda sudah siap, langkah berikutnya adalah, klik menu File–
>Import–>Import to Stage

Gambar.3

4. Setelah gambar/foto yang anda import ke stage sudah muncul, selanjutnya klik menu
Text Tool atau tombol T pada keyboard anda.
Gambar.4

Selanjutnya buatlah teks area pada gambar/foto dan tulis angka 1 sampai 12 secara
terpisah. (Perhatikan gambar no.4 diatas)

5. Langkah selanjutnya, klik Ctrl+F3 pada keyboard untuk mengatur ukuran dan warna
angka pada Text Properties.

Gambar.5

Setelah selesai, klik Ctrl+F3 untuk menyembunyikan halaman text properties.

 Selanjutnya, geser angka 1 sampai 12 tersebut seperti pada posisi angka jam pada
umumnya, sehingga tampak seperti pada gambar no.6 dibawah.(Klik Selection Tool
untuk menggeser)

6. Langkah berikutnya, klik Line Tool pada menu, atau tombol N pada keyboard anda,
kemudian buatlah 3 buah garis untuk penunjuk arah jam (jam, menit, detik) seperti
pada gambar dibawah.

Gambar.6

Langkah berikutnya, klik Selection Tool atau tekan tombol V pada keyboard anda.
Selanjutnya, klik garis pendek (jam) yang telah anda buat, kemudian tekan F8 pada
keyboard anda.

Gambar.7
 Pada halaman yang muncul seperti gambar diatas, pada kolom Name, ganti teks
yang ada dengan jam_mc, pilih Movie klip untuk Type, dan pastikan titik Registration
berada pada baris tengah bawah. Selanjutnya klik OK.

7. Langkah berikutnya, tekan Ctrl+F3 untuk menampilkan halaman property.

Gambar.8

Pada gambar diatas, klik kolom <Instace Name> dan ganti dengan jam_mc.

8. Selanjutnya klik garis ke-2 (menit) kemudian tekan F8, ganti Name dengan menit_mc.
Selanjutnya tekan Ctrl+F3 pada keyboard, ganti <Instance Name> dengan
menit_mc.

9. Langkah berikutnya, klik garis ke-3 (detik) kemudian tekan F8, ganti Name dengan
detik_mc. Selanjutnya tekan Ctrl+F3, ganti <Instance Name> dengan detik_mc.

10. Langkah selanjutnya, geser ke-3 garis tersebut satu persatu, dan letakkan pada
gambar/media (ditumpuk) dengan posisi garis pendek (jam) terletak paling bawah,
kemudian garis menit, dan yang terakhir garis panjang (detik).
Gambar.9

11. Selanjutnya klik dibawah angka 1 pada halaman frame, kemudian tekan F9.

Pada halaman Action yang muncul, copy kode dibawah kemudian paste pada
halaman tersebut.

//perintah yang dijalankan ketika frame dimainkan

onEnterFrame = function () {

//membuat variable waktu sebagai date object

waktu = new Date();

//membuat variable jam dengan nilai sama dengan jam pada komputer

jam = waktu.getHours();

//membuat variable menit dengan nilai sama dengan menit pada komputer

menit = waktu.getMinutes();
 //membuat variable detik dengan nilai sama dengan detik pada komputer

detik = waktu.getSeconds();

//digunakan jika komputer menggunakan sistem 12 jam

//jika nilai variable jam lebih dari 12 maka akan dikurangi 12

if (jam>12) {

jam -= 12;

//movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30 yang ditambah nilai
variable menit di bagi 2

jam_mc._rotation = jam*30+(menit/2);

//movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6

menit_mc._rotation = menit*6;

//movie clip detik_mc akan berotasi sesuai nilai variable detik dikali 6

detik_mc._rotation = detik*6;

};

Gambar.10

Selanjutnya tekan Ctrl+ENTER untuk melihat hasilnya.

12. 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