RSS

FLASHCS6[AS3]—Membuat jam analog

06 Okt

Halo🙂
Postingan kali ini tentang membuat jam analog menggunakan AS3.
Software yang di gunakan :
Flash CS6 dan Flash Develop
AS [ActionScript] yang digunakan :
AS 3.0
Preview hasil jadi :

HasilJadi

Flash dari postingan ini bisa dilihat di sini

Cara membuat jam menggunakan Photoshop bisa dilihat di sini

Sebelumnya saya pernah membuat postingan tentang jam digital menggunakan AS2 yang bisa dilihat di sini

Gambar-gambar yang digunakan bisa di unduh nanti bersama dengan fla hasil jadinya di bagian bawah postingan ini. Jadi silakan meng-download kalau ingin menggunakan gambar yang sama atau silakan gunakan gambar sendiri. Untuk ukuran jam adalah 550×550 pixel, untuk penunjuk waktu detik 215×5 pixel, untuk penunjuk waktu menit 218×30 pixel -karena ada panah di ujungnya- dan untuk penunjuk waktu jam 180×60 pixel -karena ada panah di ujungnya-.

  • Buat file baru, atur ukuran dokumen sesuai dengan jam yang akan dibuat.

1

  • Import semua gambar yang digunakan ke dalam stage menggunakan menu File->Import->Import to Stage atau dengan menekan Ctrl+R.

2

3

  • Klik pada gambar penunjuk waktu untuk jam dan ubah menjadi symbol Movie Clip dengan nama mc_Penunjuk_Jam. Karena gambar yang saya buat ujung panah [yang tumpul] berada di sebelah kiri maka pilih titik registrasi yang sesuai yaitu di kiri tengah. Lakukan hal yang sama untuk gambar yang lain. Jadi sekarang ada 3 Movie Clip di library, mc_Penunjuk_Jam, mc_Penunjuk_Menit dan mc_Penunjuk_Detik.

4

  • Klik pada gambar jam dan ubah menjadi symbol dengan nama mc_Jam, pilih titik registrasi di tengah dan jangan lupa centang pilihan Export for ActionScript. Akan muncul tanda di bagian tengah, sekarang atur supaya posisi ujung panah yang ada tanda di ujungnya berada pada bagian tengah mc_Jam yang ada tandanya. Cara paling cepat adalah dengan menggunakan tab Properties. Karena ukuran stage adalah 550×550 maka koordinat titik tengah adalah 275×275. Jadi isikan 275 di X dan 275 di Y.

5

6

7

  • Kalau sudah sekarang hapus semua gambar dari stage. Buka Flash Develop atau buat file AS3 baru dengan menggunakan menu File-> New->ActionScript File dan ketikkan code di bawah ini :

8

  • Kalau sudah test dengan menekan Ctrl+Enter.

9

Penjelasan code :

      import flash.display.MovieClip;
      import flash.events.TimerEvent;
      import flash.utils.Timer;

Memanggil library yang diperlukan.

var waktu:Timer = new Timer(1000); //1 detik
var tanggal:Date;
var jam:mc_Jam = new mc_Jam();
var penunjuk_detik:mc_Penunjuk_Detik = new mc_Penunjuk_Detik();
var penunjuk_menit:mc_Penunjuk_Menit = new mc_Penunjuk_Menit();
var penunjuk_jam:mc_Penunjuk_Jam = new mc_Penunjuk_Jam();
var nol:mc_nol = new mc_nol();
var tegaklurus:mc_seratusdelapanpuluh = new mc_seratusdelapanpuluh();
var nine:mc_sembilan = new mc_sembilan();

Membuat variabel yang diperlukan. Var waktu bertipe Timer yang akan dipanggil setiap 1 detik. Var tanggal bertipe Date untuk mengambil tanggal dari system. Var jam, penunjuk_detik, penunjuk_menit dan penunjuk_jam adalah variabel dari 4 gambar yang sudah dibuat di awal. Sekarang perhatikan ada 3 var baru dengan tipe yang tidak ada ditulis sebelumnya di awal. Ini adalah tambahan untuk membantu penjelasan.

10

Perhatikan titik pusatnya. Untuk mc_seratusdelapanpuluh titik pusatnya ada di bagian atas, untuk mc_sembilan titik pusatnya di sebelah kanan dan untuk mc_nol titik pusatnya di bagian bawah. Selanjutnya akan dijelaskan di bagian code yang berbeda.

jam.x = jam.y = 275;
addChild(jam);
penunjuk_detik.x = penunjuk_detik.y = 275;
addChild(penunjuk_detik);
penunjuk_menit.x = penunjuk_menit.y = 275;
addChild(penunjuk_menit);
penunjuk_jam.x = penunjuk_jam.y = 275;
addChild(penunjuk_jam);
/* contoh kode yang digunakan kalau posisi penunjuk waktu berbeda dengan yang contoh di blog
nol.x = nol.y = 275;
addChild(nol);
tegaklurus.x = tegaklurus.y = 275;
addChild(tegaklurus);
 nine.x = nine.y = 275;
addChild(nine);*/

Mengatur posisi gambar yang digunakan. Kenapa semuanya sama 275? Karena ukuran stage adalah 550 dan 275 adalah 550/2. Jadi sesuaikan saja kalau nanti membuat jam dengan ukuran yang berbeda🙂

waktu.addEventListener(TimerEvent.TIMER, mulaijalan);
waktu.start();

Memanggil fungsi bernama mulaijalan yang dijalankan setiap kali waktu dipanggil yaitu setiap 1 detik. Kemudian waktu dijalankan dengan menggunakan start.

public function mulaijalan(e:TimerEvent):void
{
tanggal = new Date();
      penunjuk_detik.rotation = -90 + (6 * tanggal.getSeconds() ); //360/60 untuk posisi 'panah' menunjuk ke kanan
      penunjuk_menit.rotation = -90 + (6 * tanggal.getMinutes() ); //360/60
      penunjuk_jam.rotation = -90 + (30 * tanggal.getHours() ) + (tanggal.getMinutes() / 2 ) ; //360/12
      //nol.rotation = 6 * tanggal.getSeconds(); // untuk posisi 'panah' menunjuk tegak lurus di atas
      //tegaklurus.rotation = 180 + (6 * tanggal.getSeconds() ); // untuk posisi 'panah' menunjuk tegak lurus di bawah
      //nine.rotation=90 + (6 * tanggal.getSeconds() ); //untuk posisi 'panah' menunjuk ke kiri
}

Fungsi mulaijalan yang memanggil detik, menit dan jam dari system kemudian memutar gambar yang ada. Karena gambar yang digunakan menunjuk ke arah kanan sebanyak 90 derajat maka itu dihitung sebagai -90 derajat sehingga rumusnya -90 + (untuk menit dan detik sama karena 360 derajat dibagi 60 sama dengan 6 dan untuk jam 360 derajat dibagi 12 sama dengan 30 derajat).

FLA dari postingan ini bisa di download di

FLASHCS6

Terima kasih sudah mampir dan membaca blog saya ^_^

 
Tinggalkan komentar

Ditulis oleh pada Oktober 6, 2014 in Flash

 

Tag: , , ,

Tinggalkan Balasan

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

Logo WordPress.com

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

Gambar Twitter

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

Foto Facebook

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

Foto Google+

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

Connecting to %s

 
%d blogger menyukai ini: