09
Oct

Jam Analog

Written by admin


Pada tutorial yang lalu, kita telah mempelajari cara membuat jam digital. Kali ini kita akan mempelajari cara membuat sebuah jam analog. Tampilan jam analog yang akan kita buat di sini masih sederhana. Anda dapat mengembangkannya dengan memperbaiki bagian grafiknya. Sehingga nantinya jam akan terlihat lebih bagus lagi.

1. Buatlah flash document.

2. Buatlah sebuah gambar seperti di bawah ini. Anda dapat menggunakan oval tool, text tool, dan panel transform untuk membuatnya.

3. Untuk garisnya kami akan membuat ukurannya seperti ini : garis jam lebih panjang dari garis menit, garis menit lebih panjang dari garis detik, garis detik lebih panjang dari garis jam Anda dapat mengubah ukurannya sesuai keinginan anda.

4. Buatlah tiga buah garis seperti gambar di bawah ini :

5. Seleksi garis yang paling kecil, kemudian tekan F8. Pada panel yang muncul masukkan jam_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.

6. Seleksi movie clip jam_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jam_mc sebagai instance name.

7. Seleksi garis kedua (garis yang tidak terlalu panjang), kemudian tekan F8. Pada panel yang muncul masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.

8. Seleksi movie clip detik_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan detik_mc sebagai instance name.

9. Seleksi garis ketiga (garis yang paling panjang), kemudian tekan F8. Pada panel yang muncul masukkan menit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.

8. Seleksi movie clip menit_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan menit_mc sebagai instance name.

9. Letakan movie clip jam_mc di tengah lingkaran yang kita buat sebelumnya.

10. Selanjutnya letakan movie clip menit_mc di tengah lingkaran (ditempat yang sama movie clip jam_mc berada).

11. Lalu letakan juga movie clip detik_mc di tengah lingkaran (ditempat yang sama movie clip jam_mc dan menit_mc berada).

12. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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;
};

13. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini

Apakah tutorial di atas menarik atau bermanfaat bagi anda? Bantulah Warung Flash agar tetap ada dan memberikan tutorial-tutorial yang lebih bagus dan bermanfaat lagi. Silahkan klik link berikut ini untuk lebih jelasnya : Bantu Warung Flash



Bookmark and Share

24 Responses to “Jam Analog”

  1. hadi Says:

    bagus /thanks =D>

  2. ferdy weduaes Says:

    /merayu nice post….aku newbie…ne…
    ne berguna bnget buta aku ..thankz…. /jempol
    btw..ne juga bisa dipasang…di wordpress gak yah….

  3. yuzz Says:

    Mantap kk admin hehe…

  4. ica Says:

    nice kk.
    akhirnya nemu juga tutornya
    makasi makasi min ;) ;)

  5. Imen Says:

    Very Good

  6. steve Says:

    warung flash yang pintar, saya sedang membuat mini game dengan petunjuk dari warung flash, saya membuat permainan dengan waktu dan saya berhasil membuat ketika waktu habis maka akan mucul ke frame game over tp saya tidak tau cara untuk membuat waktu tersebut berhenti ketika game sudah selesai.

    timer = 300;
    countdown = function ()
    {
    –timer;
    if (timer == 0)
    {
    clearInterval(countdownInterval);
    gotoAndPlay(424);} <== ini halaman game over

    }

    countdownInterval = setInterval(countdown, 1000);

    bisa ga admin membantu saya ketika game sudah di tamatkan maka waktu tersebut berhenti.

  7. steve Says:

    maksud saya tambahan script apa yg harus masukkan untuk membuat waktu tersebut berhenti ketika game selesai. :hope: :hope:

  8. Broo Says:

    Thanks zzZZ,.,.,.

  9. lidya Says:

    akirnya dapet pencerahan buad bljar fLash :idea:

    makasii kk admin ;)) ;)) ;)) ;)) ;)) ;)) ;))

  10. Renly Says:

    game2 dan animasinya bagus2…. =D> di tambah lagi da tutorial sma sourcenya. situs ini sangat membantu saya dalam belajar action script dan membantu dalam persiapan ujian sebentr nanti di kampus….. INTINYA bisa menambah pengetahuan mahasiswa.! :peace:

  11. Hendrabc Says:

    Jam Analog Tanpa Objek (Action Script Only)

    1. Buatlah flash document.
    2. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

    //pertama2 mazukkan code brikut ini (pozizi tempat berpuzatx semua objectActionScript yg dibwt):
    this.createEmptyMovieClip(“TempatJam”,3);
    TempatJam._x = 150;
    TempatJam._y = 150;

    //kemudian yg ini (bwt lingkaran warna biru):
    TempatJam.createEmptyMovieClip(“Lingkaran”,2);
    TempatJam.Lingkaran.lineStyle(4,0×000066,100);
    TempatJam.Lingkaran.moveTo(100,0);
    RadiusLingkaran = 100;
    for (a=0; a<361; a++) {
    SudutKemiringan = a*Math.PI/180;
    KoordinatX = Math.cos(SudutKemiringan)*RadiusLingkaran;
    KoordinatY = Math.sin(SudutKemiringan)*RadiusLingkaran;
    TempatJam.Lingkaran.lineTo(KoordinatX,KoordinatY);
    }

    //kemudian yg ini (bwt lingkaran warna biru/isi lingkaran biru transparan):
    TempatJam.createEmptyMovieClip("Lingkaran2",1);
    TempatJam.Lingkaran2.lineStyle(5,0x0000ff,20);
    TempatJam.Lingkaran2.moveTo(0,0);
    for(R=0; R<100; R++){
    RadiusLingkaran = R;
    for (a=0; a<361; a++) {
    SudutKemiringan = a*Math.PI/180;
    KoordinatX = Math.cos(SudutKemiringan)*RadiusLingkaran;
    KoordinatY = Math.sin(SudutKemiringan)*RadiusLingkaran;
    TempatJam.Lingkaran2.lineTo(KoordinatX,KoordinatY);
    }
    }

    //kemudian yg ini (bwt lingkaran warna hijau/lingkaran pinggirx):
    TempatJam.createEmptyMovieClip("Lingkaran3",3);
    TempatJam.Lingkaran3.lineStyle(16,0×009900,100);
    TempatJam.Lingkaran3.moveTo(110,0);
    RadiusLingkaran = 110;
    for (a=0; a<361; a++) {
    SudutKemiringan = a*Math.PI/180;
    KoordinatX = Math.cos(SudutKemiringan)*RadiusLingkaran;
    KoordinatY = Math.sin(SudutKemiringan)*RadiusLingkaran;
    TempatJam.Lingkaran3.lineTo(KoordinatX,KoordinatY);
    }

    //ini untuk Gariz tanda tiap pozizi waktu dalam zatuan jam
    TempatJam.Lingkaran.lineStyle(3,0×000000,100);
    TempatJam.Lingkaran.moveTo(100,0);
    RadiusLingkaran = 100;
    RadiusLingkaranKecil = 90;
    for (h=0; h<12; h++) {
    SudutJam = h*30;
    SudutKemiringanJam = SudutJam*Math.PI/180;
    KoordinatX1 = Math.cos(SudutKemiringanJam)*RadiusLingkaran;
    KoordinatY1 = Math.sin(SudutKemiringanJam)*RadiusLingkaran;
    KoordinatX2 = Math.cos(SudutKemiringanJam)*RadiusLingkaranKecil;
    KoordinatY2 = Math.sin(SudutKemiringanJam)*RadiusLingkaranKecil;
    TempatJam.Lingkaran.moveTo(KoordinatX1,KoordinatY1);
    TempatJam.Lingkaran.lineTo(KoordinatX2,KoordinatY2);
    }

    //ini untuk Gariz tanda tiap pozizi waktu dalam zatuan menit||detik
    KoordinatX1 = Math.cos(SudutKemiringanJam)*RadiusLingkaran;
    KoordinatY1 = Math.sin(SudutKemiringanJam)*RadiusLingkaran;
    KoordinatX2 = Math.cos(SudutKemiringanJam)*RadiusLingkaranKecil;
    KoordinatY2 = Math.sin(SudutKemiringanJam)*RadiusLingkaranKecil;
    TempatJam.Lingkaran.moveTo(KoordinatX1,KoordinatY1);
    TempatJam.Lingkaran.lineTo(KoordinatX2,KoordinatY2);
    TempatJam.Lingkaran.lineStyle(1,0×000000,100);
    TempatJam.Lingkaran.moveTo(100,0);
    RadiusLingkaran = 99;
    RadiusLingkaranKecil = 91;
    for (m=0; m

    Banyak inspirasi baru melihat content2x…!!!
    This 4 d’1st time I post a comment…!!! :peace:

  12. Hendrabc Says:

    8-> Waduhh ga’ muat zmua scripx….!!! Sorry gan..!!!
    Bisa post lagi lanjutanx klo mmg ada yg minat…!!! Thannk…!!! ;)

  13. sHapi_Q Says:

    ini cra download tutorial’y mna ya?? bsa g tutorial’y d’krm lwt email? trz ad komunitas’y g c?? biar bsa kmpl brng dn saling shering,,, ;)

  14. yayan Says:

    ilmu baru… :hope:

  15. de ozi Says:

    :hope:
    ad yg baru n lebih mennatang gak

  16. jodiE Says:

    sYa mW mnT bNtuAn Warun9 Flash,,,
    tlon9 sdiAin cara membuat game sederhana… !!
    pLiiiiiizzzZZZ !

  17. Sopyan Says:

    mas kalo pengganti shotcut ctrl+f3 apa?

  18. taufik Says:

    bagus agan – agan
    mo nanya nich
    ana mo buta bel sekolah, misalnya kalo jam dah nunjuin jam tujuh bel berbunyi. scriptnya gimana ya?
    mohon infonya

  19. ridwan Says:

    hatur nuhun pisan kang…. =DV

  20. resi Says:

    gan…mau tanya ne…di step No.5 agan ada tulis pastikan titik registrasionnya ditengah bagian bawah…itu artinya apa..di setiap titik beda y gan..jelaskan lah gan tentang titik registrasionnya itu,,,,,plizzz gan..

  21. admin Says:

    Titik registration itu titik pusat dari suatu symbol

    Coba anda lihat gambar dari link berikut :
    http://warungflash.com/wp-content/uploads/2008/12/01-12-2008-5-23-40.jpg

    Anda akan melihat tulisan Registration dan 9 buah kotak kecil. Anda juga akan melihat dari 9 kotak itu, kotak ditengah warnanya hitam. Nah itu yang kami maksud dengan titik registration ditengah :)

    Jika tutorial disini bilang titik registration di tengah bagian bawah, maka anda klik saja kotak paling tengah dan paling bawah. Maka titik registrationnya sudah berubah.

    Kalau efek dari setiap titik registration bisa berbeda-beda tergantung dari script yang digunakan.
    Misal kalau titik registrationnya dipilih paling tengah dengan script _rotation maka hasilnya kurang lebih seperti ini : http://warungflash.com/2009/10/rotation/
    Kalau pakai tengah bawah dengan script _rotation hasilnya seperti pada jarum jam ditutorial ini.

    Kira-kira itu penjelasan dari kami. Bila masih kurang jelas silahkan tanya lagi :)

  22. marizky Says:

    sippp
    klaian pintar

  23. febriana Says:

    apakah ini otomati jamnya sesuai dengan yang sedang berjalan????????????????// /??

  24. jojo Says:

    /jempol keren pengen coba /berpikir /berpikir /berpikir

Leave a Reply

B-) =DV <:-P ;)) ;) :yeye: :respect: :peace: :p :idea: :hope: :I: :D :-SS :-? :-/ :)) :) :(( 8-> more »

Komentar yang berisi pertanyaan atau request tutorial kemungkinan besar tidak bisa kami jawab dan penuhi. Hal ini dikarenakan kesibukan kami yang padat . Oleh karena itu kami mohon maaf dan pengertiannya.