Tutorial Membuat Jam Digital Menggunakan Adobe Flash CS 6

Halo PalComSter. Pada tutorial kali ini kita tidak membahas mengenai animasi dan cara menggambar, tetapi lebih banyak menyinggung tentang ActionScript. Actionscript adalah bahasa program yang digunakan flash untuk mengatur dan mengontrol berbagai objek maupun jalan nya animasi. Contoh projek yang …

Review Overview

User Rating: 4.7 ( 2 votes)
0

Halo PalComSter. Pada tutorial kali ini kita tidak membahas mengenai animasi dan cara menggambar, tetapi lebih banyak menyinggung tentang ActionScript. Actionscript adalah bahasa program yang digunakan flash untuk mengatur dan mengontrol berbagai objek maupun jalan nya animasi.

Contoh projek yang akan dibuat:

Sebelum kita mulai, sebaiknya kita mempersiapkan semuanya terlebih dahulu. Hal yang paling penting untuk di siapkan adalah font. Karena kita akan membuat jam digital, dan jam digital tidak menggunakan font standart yang disiapkan oleh windows. Kita disini kita meggunakan font “DS-DIGITAL”. Font ini bisa di download gratis di www.dafont.com, atau kalian bisa download font lain yang berbentuk digital. Di tutorial sebelumnya Kak Ridho Ardiansyah sudah membuatnya dengan judul Membuat Jam dan Kalender Digital Menggunakan Adobe Flash, Nah sekarang saya akan membagikan tutorial yang lebih detail lagi. Eh ya, setelah kita membuat jam digital ini, nanti akan ada tips untuk menggunakan jam digital yang sudah kita buat ini agar bisa tampil/jalan di saat kita menghidupkan windows, yang sering di sebut dengan istilah start up windows, jadi kita bisa menggunakan desain kita ini untuk menghiasi tampilan windows kita. Penasaran? Yuk simak tutorialnya berikut ini.

Langkah 1

Buka software adobe flash cs 6 dan buat file baru dengan tipe ActionScript 2.0.

ActionScript 2.0 adalah bahasa program yang digunakan lebih sederhana dibandingkan tipe yang lainnya.1

Tampilan setelah kita pilih ActionScript 2.0:2

Langkah 2

Buat tulisan digital di stage area.

Sebelum membuat tulisan, kita harus setting terlebih dahulu tipe teks yang kita gunakan. Tipe teks yang kita gunakan yaitu “Dynamic Text”, dan beri warna hijau. Kenapa harus dynamic text? Karena dynamic text adalah tipe teks yang bisa kita rubah sewaktu-waktu menggunakan ActionScript dan pemanggilannya menggunakan variable.3

Buat tulisan berisikan angka 0, karena jam hanya menggunakan angka. Size font pada jam dan menit 100 pt dan size detik 60 pt. Lihat Gambar berikut.4

Langkah 3

Setting type character text.

Pada tahap kali ini jangan sampai terlewatkan, karena jika lewat hasil jam pada teks kita nanti tidak akan keluar tulisan angka. Tipe Dynamic Text yang biasa dibuat itu menggunakan tipe “Anti-alias For Animation”. Kita rubah mejadi “Use Device Fonts”.5

Langkah 4

Beri nama variable pada teks.

Untuk mengontrol teks menggunakan ActionScript, kita harus memberikan nama variable pada masing-masing teks. Untuk memudahkan kita, beri nama variable sesuai dengan nama jam seperti biasanya yaitu jam, menit, dan detik. Seperti pada gambar berikut:6

Lakukan langkah yang sama pada semua teks menit dan detik.

Langkah 5

Masukan ActionScript.

Ini tahap yang paling penting, yaitu memasukan ActionScript pada frame yang berisikan teks. Caranya klik kanan pada frame pilih action, atau bisa klik frame yang berisikan teks, lalu tekan F9. Berikut penjelasan mengenai ActionScript yang kita gunakan agar lebih mengerti:7

Ketikan ActionScript berikut:8

Berikut penjelasan ActionScript diatas.

onEnterFrame = function: untuk mengatur fungsi agar jalan hanya pada frame yang di beri ActionScript.

waktu = new Date: membuat variable baru bernama “waktu” yang bertipe date.

jam = waktu.getHours: mengatur teks dengan variable jam sesuai dengan jam pada windows.

menit = waktu.getMinutes: mengatur teks dengan variable menit sesuai dengan menit pada windows.

detik = waktu.getSeconds: mengatur teks dengan variable detik sesuai dengan detik pada windows.

Jika sudah selesai test jam sudah kita buat dengan cara tekan CTRL + Enter. Jika benar akan keluar hasil seperti gambar di bawah ini :9

*jika jam tidak jalan dan tidak sesuai dengan gambar perhatikan lagi penulisan ActionScript.

Langkah 6

Buat logika ActionScript untuk menambahkan angka 0. Logika kali ini untuk menambahkan angka 0 jika kondisi jam, menit, dan detik menunjukan angka kurang dari 10 atau lebih kecil dari 10 ( < 10). Berikut contoh ActionScript yang sudah kita beri logika penambahan 0.10

Penjelasan mengenai ActionScript diatas:

If (jam<10) {: Logika script dengan kondisi jika jam lebih kecil dari angka 10

   Jam = “0”+jam; } : Menunjukan penembahan angka 0 pada text jam

dan lakukan langkah yang sama pada menit dan detik jika benar akan sama seperti pada gambar di bawah ini:11

Langkah 7

Buat desain jam digital sesuai dengan selera anda masing-masing.

Berikut ini langkah-langkah contoh desain yang saya buat:

  • Create layer baru dan beri nama background
  • Turunkan layer background ke layer yang paling bawah12
  • Buat kotak pada layer background menggunakan Rectangle Tool.13
  • Klik dua kali di kotak yang sudah kita buat.
  • Tentukan ukuran dari kotak yang sudah kita buat tadi dengan ukuran width 400px dan height 150px seperti pada gambar berikut:14
  • Buat garis untuk desain garis tepi jam digital yang kita buat, dan buat bentuk semenarik mungkin. Buatlah line dengan ukuran stroke 5. Setelah garis tepi jadi convert menjadi movie clip.15
  • Ganti warna background dan bentuk seperti garis tepi dalam movie clip, dan beri warna gradasi pada warna dalam movie clip, dengan menggunakan radial gradient pada menu color.16
  • Beri efek Filter “Drop Shadow” pada tulisan jam menit dan detik. Dengan cara klik frame jam klik tulisan jam dan beri efek filter drop shadow sesuai dengan selera anda.17

Langkah 8

Resize ukuran stage sesuai dengan ukuran gambar yang kita buat.18

Jika sudah selesai maka hasil nya akan seperti gambar di bawah ini:

Nah sesuai dengan janji saya di atas tadi, di sini saya akan memberikan tutorial untuk menambahkan aplikasi jam yang sudah kita buat tadi ke startup windows kita, yaitu dengan cara berikut:

1. Export terlebih dahulu hasil desain flash kita tadi menjadi aplikasi yang ber-extension *.exe

  • Menu file pilih Publish Setting
  • Centang hanya Win Project
  • Tentukan folder untuk menempatkan file exe
  • Klikk Publish19

Jika sudah maka akan keluar file seperti berikut:20

2. Copy file yang telah di publish tadi ke dalam folder startup windows berikut ini:

C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup

3. Restart Windows anda dan pastikan jam yang sudah kita buat tadi jalan saat windows login pertama kali.

Tenang aja deh aplikasi yang jalan saat startup ini tidak begitu berpengaruh terhadap kecepatan startup windows kalian. Karena hanya menjalankan aplikasi yang ringan menggunakan adobe flash player. Untuk menghilangkan aplikasi jam ini anda bisa menghapus file yang kita copy ke dalam folder startup tadi.

Bagaimana PalComSter? Menarik bukan untuk dicoba. Sekian tutorial dari saya, semoga bermanfaat dan sampai jumpa di tutorial-tutorial selanjutnya. Salam kreatif!

Penulis: Dwi Apriansyah (Staf multimedia)

UKM Multimedia

UKM Multimedia adalah salah satu UKM di STMIK-POLTEK PalComTech Palembang, yang mempelajari tentang Desain, Animasi, Video & Sound Editing.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

[+] kaskus emoticons nartzco

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Yuk kita share...