Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Code
  2. ActionScript
Code

Buat Screensaver Jam Analog dengan Screentime untuk Flash

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by rizzu (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).

flash clock analog

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.

flash clock analog

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:

flash clock analog

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

flash clock analog

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:

flash clock analog

Vertikal:

flash clock analog

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.

flash clock analog

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

flash clock analog

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

flash clock analog

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

flash clock analog

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

flash clock analog

Langkah 6: Srip Aksi

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

flash clock analog

Langkah 7: Kelas yang Diperlukan

Ini adalah kelas-kelas yang akan kita butuhkan:

Langkah 8: Memperluas Kelas

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

Langkah 9: Variabel

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

Langkah 10: Fungsi Utama

Fungsi ini dieksekusi ketika kelas dimuat.

Langkah 11: Perbarui Fungsi

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

Langkah 12: Kelas Dokumen

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

flash clock analog

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.

flash clock analog

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

flash clock analog

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 :)

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.