Buat Screensaver Jam Analog dengan Screentime untuk Flash

() translation by (you can also view the original English article)

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana membangun Jam Analog bergaya menggunakan ActionScript 3.0. Kami akan menggunakan film swf yang dihasilkan dengan Screentime untuk Flash untuk membuat screensaver yang berfungsi penuh. Waktunya bersenang-senang ..

Langkah 1: Tinjauan Singkat

Menggunakan objek Tanggal dan propertinya, kita akan mendapatkan hari, jam, menit dan detik dan menggunakan Matematika sederhana untuk menampilkan data yang diperoleh dalam Jam Analog. Pembaruan akan ditangani oleh Timer.

Anda juga dapat menambahkan Jam Digital ke Screensaver dengan mengikuti Tutorial FlashTuts + ini.

Langkah 2: Mulai

Buka Flash dan buat File Flash baru (ActionScript 3).

Atur ukuran panggung ke 640x400 dan tambahkan latar belakang linear abu-abu (#DBDBDD, # B3B2B7). Screentime akan secara otomatis mengatur skala film ke layar penuh sehingga kami tidak perlu mengatur panggung dalam resolusi penuh.

Langkah 3: Latar Belakang Jam

Kami akan mulai dengan membuat latar belakang jam.

Pilih Alat Oval (O) dan gambar lingkaran 250x250 px dan tambahkan latar belakang linier hitam (# 313131, # 000000). Gunakan Gradient Transform Tool (F) untuk memutar gradien agar terlihat seperti gambar berikut:

Buat lingkaran lain, kali ini 248x248, dengan gradien linier ini (# 595959, # 000000). Sekali lagi, gunakan Gradient Transform Tool untuk memutar dan menyesuaikan gradien.

Langkah 4: Angka

Sekarang mari kita tambahkan angka ke jam kita.

Pilih Alat Teks (T), pilih font pilihan Anda dan ukuran yang sesuai untuk jam. Saya menggunakan Myriad Pro Regular, 22 Pt, #DDDDDD.

Tulis angka dalam satu Bidang Teks untuk masing-masing dan selaraskan ke jam, ini bisa sedikit sulit tanpa referensi, periksa panduan dalam gambar.

Horisontal:

Vertikal:

Langkah 5: Jarum Jam

Waktu untuk membuat jarum jam.

Pilih Poly Star Tool (klik dan tahan di Tombol Alat Rectangle), lalu di Properties Panel klik tombol Options di bagian Tool Settings. Ubah jumlah sisi menjadi 3.

Buat segitiga putih 20x70 px, konversikan ke MovieClip dan beri nama "hourHand".

Ulangi proses ini untuk jarum menit, tetapi ubah tinggi menjadi 110 px. Ingatlah untuk mengatur nama instance ke "minuteHand".

Pilih Alat Oval dan buat lingkaran 26x26 px, konversikan ke MovieClip dan terapkan filter sebagai berikut:

Untuk tangan kedua menggabungkan lingkaran 8x8 px dan persegi panjang 2x116 px. Isi dengan warna ini # C90303.

Langkah 6: Srip Aksi

Buat Dokumen ActionScript baru dan simpan sebagai "Analog Clock.as".

Langkah 7: Kelas yang Diperlukan

Ini adalah kelas-kelas yang akan kita butuhkan:

package 
{
  import flash.display.Sprite;
	import flash.utils.Timer;
	import flash.events.TimerEvent;

Langkah 8: Memperluas Kelas

Kita akan menggunakan metode dan properti spesifik Sprite sehingga kami memperluas menggunakan Kelas Sprite.

1	public class AnalogClock extends Sprite
2	{

Langkah 9: Variabel

Ini adalah variabel yang akan kita gunakan, dijelaskan dalam komentar.

/* A Date object used to get the time */

var date:Date = new Date();

/* Time Variables */

var hours:int = date.hours;
var minutes:* = date.minutes;
var seconds:* = date.seconds;

/* A Timer object that will handle the updates, executed every second */

var timer:Timer = new Timer(1000);

Langkah 10: Fungsi Utama

Fungsi ini dieksekusi ketika kelas dimuat.

public function AnalogClock():void
{
	/* This code will set the clock hands in the correct position using the Date object data */

	hourHand.rotation = hours * 30 + (minutes * 0.5);//The Hour Hand rotates 30 degrees in 60 minutes, that's 0.5 degrees per minute
	minuteHand.rotation = minutes * 6;//The Minute rotates 6 degrees per minute, that's 360 degrees in 60 minutes - an hour
	secondHand.rotation = seconds * 6;//The Second Hand rotates 6 degrees per second, that is 360 degrees in 60 seconds - a minute
			
	timer.addEventListener(TimerEvent.TIMER, updateClock);
	timer.start();
}

Langkah 11: Perbarui Fungsi

Ini adalah fungsi yang menangani Jam. Ini kode yang sama dari fungsi pertama, hanya dijalankan setiap detik oleh penghitung waktu.

private function updateClock(e:TimerEvent):void
{
	date = new Date();

	hours = date.hours;
	minutes = date.minutes;
	seconds = date.seconds;

	hourHand.rotation = hours * 30 + (minutes * 0.5);
	minuteHand.rotation = minutes * 6;
	secondHand.rotation = seconds * 6;
}

Langkah 12: Kelas Dokumen

Kembali ke file .fla dan di Panel Properties tambahkan "AnalogClock" di bidang Class untuk menjadikan ini sebagai Document Class.

Langkah 13: Screentime untuk Flash

Screentime for Flash adalah alat pembuat Screensaver, cepat dan mudah digunakan. Anda bisa mendapatkan versi uji coba dari situs web. Demo berfungsi penuh, kecuali screen saver yang mereka bangun akan berakhir satu minggu setelah dibuat. Dalam tutorial ini saya menggunakan versi Mac sehingga Screensaver akan menjadi mac-only.

Langkah 14 : Screen Saver

Buka Screentime dan di tab Konten, pilih file Anda dengan mengklik tombol "..." dan menjelajah ke swf. Masukkan nama untuk screensaver Anda.

Biarkan tab Properties dan Installer sebagai default dan di tab Publikasikan beri nama installer, pilih opsi yang Anda butuhkan dan klik Build.

Ketika build selesai, buka aplikasi installer dan klik install. Sekarang Anda dapat memilih screensaver mencolok Anda dari System Preferences.

Kesimpulan

Anda baru belajar betapa mudahnya mengonversi film flash atau aplikasi ke screensaver, menjelajahi aplikasi Screentime dan membuat sendiri!

Terima kasih sudah membaca :)