Translate

Jumat, 31 Agustus 2012

Cara Membuat Jam Analog di Flash


(Membuat Jam Analog)
Pertama-tama buat flash document baru, dan set document propertis menjadi sebagai berikut (lihat Gb. 01):
Size : 250 x 250 px.
Background : white (#ffffff)
Frame rate : 12
Publish setting : Player 8 action script 2
Gb. 01
Kemudian buat movie clip baru. Insert–New Symbol(Ctrl+f8), dan atur setingnya sbb:
Name : jamMC
Type : Movie Clip
Setelah itu klik OK. (lihat Gb. 02)
Gb. 02
Selanjutnya pada area editing movie clip jamMC buat 7 layer dengan nama berurutan dari bawah; bg, digital, jr_jam, jr_menit, jr_detik, knop dan actions. (lihat Gb. 03). Untuk sementar lock semu layer
Gb. 03
Membuat Bacground
Buka pilih dan unlock layer bg(layer paling bawah). Kemudian klik Oval tool (0) dan buat lingkaran tanpa garis tepi (stroke) dan warna isi (fill color) adalah Circle gradient dengan ukuran 250x250px.(hijau / atau menurut selera).
. (lihat Gb. 04).
Gb. 04
Buka panel Align (Ctrl+k) untuk memposisikan objeck di tengah2 stage. Pastikan icon to stage aktif dan klik pada object lingkaran dengan selection tool (v) lalu klik icon align vertical center dan align vhorisontal center. (lihat Gb. 05)
Gb. 05
Select Text Tool (t) kemudian klik ditengah tengah agak keatas. Ketikkan text (muMTaza), atur proprti-nya sebagai berikut :
Mode : Static Text
Dimension : 104×26
Position : -52 x -50
Membuat angka jam
Buat simbol baru (Insert New Symbol (Ctrl+F8)) beri nama simbol tersebut dengan frameGR, type Grafik. Klik OK layar akan masuk pada area editing object frameGR.
Buat objek persegi panjang dengan Recatngle Tool (r). (4x15px, -2.5x-103 warna : biru laut (#00FFFF)). Klik Free Transorm Tool (q) dan posisikan node center angel pada tengah stage (tanda (+)) dan buka panel Transform (Ctrl+t) masukkan angka -30 pada rotate dan klik tombol copy and aply transform sebanyak 11 kali.(lihat gambar Gb. 06).
Gb. 06
Select semua object pada stage (Ctrl+a) kemudian group object tersebut (Ctrl+g). Kemudian geserlah group object tsb ke tempat lain menjauhi titik tengah stage (tanda +).
Buat objek persegi panjang degan Rectangle tool (r).(2x7px, -2.5x-103 wanrna Biru Laut (#00FFFF)). Klik Free Transform Tool (q) dan posisikan node center angle pada tengah stage (tanda (+)) dan buka panel Transform (Ctrl+t) masukkan anga -6 pada rotate dan klik tombol copy and aply transform sebanyak 59x. (lihat Gb. 06).
Select semua aboject pada stage (Ctrl+a), tekan Keyboard Shift dan klik objeck group yang pertama untuk men-deselct-nya, kemudian gabungkan (group) objeck yang teseleksi (Ctrl+g). kemudian select semua objek lagi (Ctrl+a) dan gabungkan objeck-object tersebut dengan Group (Ctrl+g), lalu buka panel align (Ctrl+k). aktifkan ikonto stage dan klik ikon Align Horisontal Center dan Align Vertical center. (lihat Gb. 07) dan pastikan hasil seperti : (lihat Gb. 08).
Gb. 07
Gb. 08
Pindahkan lagi gabungan gambar tadi dari pusat stage (tanda (+)). Lalu select Text Tool (t), klik pada stage dan ketikkan anga (12). Atur propertynya sbb (lihat Gb. 09):
Mode : Static Text
Font : Times New Roman, Bold
Color : biru laut(#00FFFF)
Size : 20
Render: Anti-alias for readability
Align : Center
Dimension : 29×23
Posisi : -16 x -116,2
Atau sesuaikan sesuai selera.
Gb. 09
Pastikan untuk Lebar(w) dan Tinggi (H), serta posisi (x) dan (y) sesuai pada gambar.
Select object Text dengan Selection Tool (v) kemudian pilih Free Transform tool (q) dan posisikan Center angel pada posisi tengah stage (tanda +).
Buka panel transform (Ctrl+t) kemudian isikan rotate dengan angka -30 lalu klik icon copy and aply transformation sebanyak 11 kali.(lihat Gb. 06).
Klik dua kali anga (12) pada posisi jam 1, dan ganti angka menjadi angaka (1), klik Selection Tool (v), dan klik ikon reset pada panel transformation.
Klik kembali free transformation tool (q) dan kembali center angelnya pada posisi tengah-tengah object.
Lakukan hal ini pada anga 3 s/d 11.
Select semua object (Ctrl+a) tekan keyboard Shift dan klik object garis (detik/menit/jam (selain object angka), kemudian group (Ctrl+g) object angka. Select kembali semua object (Ctrl+a) kemudian buka panel aling (Ctrl+k), aktifkan ikon to stage dan klik ikon Align Horisontal Center dan Align Vertical Center, lalu gabungkan semua object (Ctrl+g) sehingga tampak seperti pad Gb. 10. (lihat Gb. 10)
Gb. 10
Tampilkan panel library (Ctrl+l) dan edit movie clip jamMC (double klik).
Atur menjadi (230x230pc) dan posisinya (-115x-115) dan drag (tarik) frameGR masuk dalam stage. Lock (kunci) layer bg. (lihat Gb. 11).
Gb. 11
Membuat Jarum Jam
Buat Movie clip baru (Insert-New Symbol) :
Name : jarumMC
Type : Movie clip
Klik OK dan stage editing new movie clip terbuka. Disini buat persegi memanjang (jarum) dengan Rectangle Tool (r) sebagai berikut :
Stroke : none
Fill : Orange (#FF9900)
Dimensi: 8×130
Posisi : -4 x -113
(lihat Gb. 12)
Gb. 12
Buka Panel Library (Ctrl+l). Double klik movie clip (jamMC), buka kunci (unloc) layer jr_jam. Kemudian tarik movie clip (jarumMC) masuk dalam stage.
Atur ukuran dan posisi sebagai berikut :
Instant Name : jam_ns
Dimensi : 8x80px
Position : -4x-69.8
Kemudian lock kembali layer jr_jam. Lihat Gb. 13
Gb. 13
Buka kunci (unloc) layer jr_menit, tarik movie clip (jarumMC) masuk ke dalam stage. Dan atur ukuran serta posisi sebagai berikut :
Instant name : menit_ns
Dimensi : 6×110 px
Position : -3x-96
Dan lock kembali layer jr_menit.
Buka kunci (unloc) layer jr_detikik movie clip (jarumMC) masuk ke dalam stage. Dan atur ukuran serta posisi sebagai berikut :
Instant name : detik_ns
Dimensi : 413 px
Position : -2×113
Dan lock kembali layer jr_detik.
Buka kunci (unloc) layer jr_detik. Buat object lingakran dengan Oval tool (o) dengan ukuran dan posisi sebagai berikut :
Dimensi : 25x25px
Posistin : -12.5x-12.5
Dan kunci (lock) kembali layer knop
Membuat Format angka jam digital
Buka (unloc) layer digital. Select text tool dan klik pada stage diatas angak 6 frame jam, dan ketikkan sbb : 00:00:00. Kemudian select selection Tool (v) dan atur properti text sebagai berikut :
Mode : Dynamic Text
Instant Name : digital_ns
Dimension : 84.1 x 26.1
Position : -42 x 42
Font : Times New roman
Font Size : 20 / Color White (#FFFFFF) / Bold
Font align : Center
Anti alias : anti-alias for animation
Selectable : None (matikan ikonnya)
(Lihat Gb. 14)
Gb. 14
Lock (kunci) kembali layer digital
Animating With Action Script
(Mengerakkan jarum jam dengan Action script)
Sebelum menuliskan script, tambahkan satu frame pada masing-masing layer.
Pilih selection tool (v), klik frame-2 layer pada actions, tekan Shift pada keyboard , lalu klik frame-2 pada layer bg. Kemudian tekan F5.
Action Script
Klik frame-1 pada layer action, kemudian buka action script editor (F9) dan ketikkan secript berikut ini :
Selesai…….?
Kembali ke stage utama Scene 1.(klik Scene1)
Tarik (drag) movie clip (jamMC) kedalam stage dan atur ukuran dan posisinya sebagai berikut :
Dimensi : 250x250px
Position : 0×0
Jalankan movie ini dengan menekan (Ctrl+Enter)

1 komentar:

Terima Kasih Atas tutorialnya .. artikel yang sangat bagus ..

Posting Komentar