Belajar Flash Dan Action Script

(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 ikon to 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)

About these ads