Membuat Jam Digital PDF [PDF]

Citation preview

MEMBUAT JAM DIGITAL By : gapra27



86



Disini kita akan mencoba untuk membuat sebuah jam digital dengan keampuhan ActionScript Macromedia Flash 8. Berikut adalah langkahlangkahnya (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 ditengahtengah 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



#003366



#02A9D2



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 :



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



Menyorot semua frame 2 mulai dari action sampai layer 1



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 :



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