MEMBUAT JAM DIGITALMEMBUAT JAM DIGITAL

By : gapra27

86

Disini kita akan mencoba untuk membuat sebuah jam digital dengan keampuhan ActionScript Macromedia Flash 8. Berikut adalah langkah-langkahnya (ikuti dengan benar) :

Langkah yang pertama adalah membuat bentuk dari jam digital tersebut.

Buka file baru Ctrl + N. Lalu atur ukuran stage dengan ukuran 460 x 260 pixel, dengan warna putih.

Gambar 4.43 Kotak dialog Document Properties

Pilih Rectangle Tool pada toolbox, ubah ukuran pada Set Corner Radius

menjadi 20.

87

Gambar 4.44 Kotak dialog Rectangle Settings

Buatlah objek persegi panjang dengan Fill Color biru tua (#003366) dan tanpa Stroke Color . Ubahlah ukuran menjadi 450 x 250. Tekan tombol Ctrl + Alt + 2 dan Ctrl + Alt + 5 untuk menengahkan objek tepat ditengah-tengah objek.

Gambar 4.45 Objek persegi panjang

Pilih objek persegi panjang dan pada panel Color Mixer pilih Color Fill dan pada Type pilih Linier. Beri warna dari warna biru tua (#003366) ke warna biru agak muda (#02A9D3). Lihat gambar :

88

Gambar 4.46 Memberi warna gradasi linier

Atur perwarnaan dengan Paint Bucket Tool pada toolbox dari bawah ke atas hingga seperti gambar berikut :

Gambar 4.47 Mengatur warna gradasi dengan Paint Bucket Tool

Sehinga hasilnya akan tampak seperti gambar berikut :

#003366 #02A9D2

89

Gambar 4.48 Hasil dari warna gradasi pada objek persegi panjang

Pilih Free Transform Tool (Q) pada toolbox lalu pilih objek tadi dan lalukan penyalinan dengan tekan tombol Ctrl + C kemudian tekan Ctrl + Shift + V. Kemudian sambil menekan Alt kecilkan ukuran dari atas ke bawah dan dari kanan ke kiri sehingga objek kedua menjadi lebih kecil seperti gambar berikut:

Gambar 4.49 Menyalin objek dan mengecilkan objek

Ubah warna gradasi pada panel Color Mixer dengan warna dari warna biru (#006699) ke warna biru muda (#68E0FD) hingga seperti gambar berikut :

90

Gambar 4.50 Mengubah warna gradasi linier objek persegi kedua

Pilih Line Tool lalu buat garis lurus seperti gambar berikut :

Gambar 4.51 Membuat garis lurus

Kemudian pilih Selection Tool klik objek yang kecil yang dilewati garis lurus (lihat gambar).

91

Gambar 4.52 Memilih objek yang dilewati garis

Lalu ubah warnanya menjadi warna biru agak tua (#006699) dan beri warna pada garis dengan warna putih, hapus garis-garis yang melewati objek yang kecil dengan cara pilih dan tekan tombol Delete hingga seperti terlihat pada gambar berikut :

Gambar 4.53 Memberi warna pada objek yang terpilih tadi

Langkah selanjutnya kita akan membuat sebuah animasi Masking untuk mempercantik tampilan. Klik Text Tool lalu ketikan tulisan Animations For Human Beings dengan jenis Font : Arial, size : 16, Bold.

Gambar 4.54 Mengatur jenis dan ukuran teks

92

Lalu posisikan teks tersebut seperti gambae berikut :

Gambar 4.55 Memposisikan teks

Teks masih dalam keadaan terpilih, ubah menjadi symbol tekan F8 pada keyboard, pilih behavior Movie clip dan beri nama ”mask”. Klik OK.

Pilih objek movie clip mask (objek teks yang baru diubah ke symbol), lalu klik dua kali untuk masuk ke modus edit symbol untuk membuat animasi masking di dalam symbol.

Gambar 4.56 Modus edit symbol

Tambahkan satu layer lagi. Kemudian klik Rectangle Tool dengan radius 0 pada Fill Color warna putih dan tanpa Stroke Color lalu buat objek persegi panjang dan posisikan seperti gambar berikut :

93

Gambar 4.57 Menambah layer dan membuat objek persegi panjang

Pilih layer 1, lalu klik di frame 40 pada layer 1, klik kanan dan pilih Insert Keyframe atau dengan tekan tombol F6 pada keyboard.

Gambar 4.58 Insert Keyframe pada frame 40 layer 1

Pilih layer 2, lalu klik di frame 40 pada layer 2, klik kanan dan pilih Insert Frame atau dengan tekan tombol F5 pada keyboard.

Gambar 4.59 Insert Frame pada frame 40 layer 2

94

Pilih layer 1 lalu pilih klik frame 40. Kemudian pilih objek teks dan pindahkan objek teks hingga berada seperti gambar berikut :

Gambar 4.60 Memindahkan objek teks

Selanjutnya kita akan memberi efek animasi Tween Motion dengan cara klik di antara frame 1 sampai 40 (ditengah frame 1 – 40 ). Klik kanan pada mouse dan pilih Create Motion Tween maka frame akan berubah menjadi ada tanda panah.

Gambar 4.61 Memberikan animasi Tween Motion pada frame

Pilih layer 2 dan klik kanan mouse lalu pilih Mask. Maka hasilnya akan terlihat seperti berikut :

95

Gambar 4.62 Memberikan masking pada layer 2

Terlihat diatas terdapat perubahan pada layer 1 dan 2, itu adalah yang disebut masking. Masking bertujuan untuk memnyembunyikan objek agar tidak tampak dan yang tampak Cuma objek yang berada dibawah layer masking.

Coba lakukan tes movie dengan Ctrl + Enter , nampak teks berjalan dan objek persegi tidak tampak.

Selanjutnya kembali ke modus edit dokumen, tekan Ctrl + E untuk kembali ke modus edit dokumen. Klik Text Tool pilih jenis Font : Book Antiqua, Size : 20, warna : putih. Lalu tuliskan teks “GAPRANIMATOR” dan posisikan seperti gambar berikut :

Gambar 4.63 Membuat objek teks dan posisi pada bagian atas

Objek teks masih dalam keadaan terpilih, Klik tab Filter pada panel Properties.

96

Gambar 4.64 Tab Filter pada panel Properties

Klik tombol + (Plus) pada bagian atas, lalu pilih Drop Shadow untuk memberikan efek bayangan pada objek teks.

Gambar 4.65 Memilih Drop Shadow

Aturlah pada Blur x dan y dengan nilai 4, Color : hitam, Strength : 150%, Quality : Low, Angle : 45, dan Distance : 3.

Gambar 4.66 Mengatur nilai Drop Shadow

97

Maka hasilnya akan nampak seperti gambar berikut :

Gambar 4.67 Hasil dari pemberian efek Drop Shadow

Klik Text Tool dan buat teks ”Animation For Human Beings” dan posisika seperti gambar berikut :

Gambar 4.68 Membuat teks

Kita mulai untuk membuat jamnya. Buat satu layer lagi. Klik Rectangle Tool dan ubah corner radius menjadi 5, pilih Fill Color dengan warna biru tua (#003366) dan pada Stroke Color warna putih. Buat objek persegi panjang dengan ukuran 250 x 50 pixels dan posisikan seperti gambar berikut :

98

Gambar 4.69 Membuat objek persegi panjang

Objek masih dalam keadaan terpilih, jika belum, pilih layer 2 klik pada frame 1 untuk memilih semua objek yang ada di layer 2. Ubah menjadi symbol tekan F8 pilih behavior Movie clip dan beri nama “jamdigital” klik OK.

Gambar 4.70 Mengubah menjadi symbol

Kemudian klik Text Tool pilih Dynamic Text, Font : Arial, Color : putih, Size : 28, Bold. Lalu buat teks tepat ditengah objek movie clip jamdigital seperti gambar berikut :

Dynamic text

99

Gambar 4.71 Membuat dynamic teks

Objek Dynamic teks masih dalam keadaan terpilih. Beri nama instance dengan “jam_digital” pada Instance Name.

Gambar 4.72 Memberi nama pada Instance

Langkah selanjutnya kita akan memberikan ActionScript. Pertama, buat layer baru dan ganti nama menjadi action.

Gambar 4.73 Menambah layer dan mengganti nama menjadi action

Pilih layer action, lalu sorot semua frame 2 mulai dari layer action sampai dengan layer 1 (lihat gambar).

100

Gambar 4.74 Menyorot semua frame yang ada di frame 2 mulai dari layer action sampai ke layer 1

Klik kanan pada mouse dan pilih Insert Keyframe atau tekan tombol F6 pada keyboard.

Gambar 4.75 Insert Keyframe pada semua layer di frame 2

Pilih layer action dan klik di frame 1 pada layer action, buka panel Action untuk menuliskan script dan tuliskan script seperti berikut :

Menyorot semua frame 2 mulai dari action sampai layer 1

101

Gambar 4.76 Script untuk frame 1 pada layer action

Tutup panel Action, lalu klik di frame 2 pada layer action. Tuliskan script seperti berikut :

102

Gambar 4.77 Script untuk frame2 pda layer action

Simpan movie tersebut, lalu lakukan publish dengan cara pilih menu File > Publish Settings. Pilih format file tipe Flash ( .swf) dan format file tipe Windows Projector ( .exe). Tekan tombol Publish lalu tekan OK.

Jalankan movie dengan tekan Ctrl + Enter. Maka hasilnya akan terlihat aplikasi jam digital yang menunjukan waktu saat ini.

Gambar 4.78 Hasil dari aplikasi jam digital