Event Dan Objek

Pengertian Design

Design adalah seni (art) dalam merancang suatu objek yang ingin ditampilkan. Dalam hal mendesign Web yang interaktif perlu dilakukan tahapan langkah (step by step) baik design objeknya maupun script programnya. Hal ini bisa semuanya dilakukan pada software FlashMX, yang memadukan tampilan animatif dan script yang interaktif.

Tahap Design

Tahap design diperlukan agar seorang pendesign Web bisa menentukan objek yang dibuat dan menganalisa hasilnya dari penggabungan design animasi. Tahap design wajib diikuti seorang pendesign Web yang akan membuat Web lebih interaktif pada saat on-line lewat Internet. Misal, dalam FlashMX, tahap-1 membuat tampilan background yang sudah ditentukan sebelumnya oleh Client (si Peminta). Tahap-2, membuat objek logo perusahaan atau banner iklan yang interaktif. Tahap-3, membuat script untuk register atau validasi atau tampilan produk si Client, dan seterusnya.

Penggabungan Design Animasi

Setelah melewati fase tahap design, maka seorang pendesign Web FlashMX harus melakukan analisa hasil dan baru bisa ke fase penggabungan design animasi.

Setelah itu Anda bisa melihat hasil perbaikan yang sudah bisa ditampilkan di on-Line Internet dengan cara mem-Publish FlashMX menjadi file .html. Fasilitas publish dari file .SWF ke file .html sudah disediakan oleh FlashMX sendiri, dan Anda bisa lihat pada Impelementasinya.

PENGGABUNGAN DESIGN ANIMASI

KASUS

Kasus 3.K.1

Seorang Web Design ingin membuat Web animasi dari FlashMX dengan objek dan eventnya. Event ini adalah objek yang bergerak, berputar dan berubah bentuk menjadi objek lain ketika diklik dengan Tombol. Anda sebagai Design Animasi diharuskan membantu orang tersebut untuk memecahkan masalah di atas.

Langkah Penyelesaian Kasus

1.Buatlah bentuk objek sebagai latarbelakang Web
2.Buatlah masing-masing objek pada masing-masing Layer sesuai objek yang dibentuk.
3.Analisa hasil dan atur frame objek dari hasil Test Movie sebelumnya agar sempurna.

Catatan

Jangan menyerah menganalisa hasil objek dari Test Movie (lakukan terus perubahan agar kelihatan sempurna animasi objek yang dibuat).

Tugas1: Membuat Objek LatarBelakang Web

Langkah-langkah tugas1 :
1. Buat Objek Latar dengan Rectangle Tool dan Round Rectangle Radius
2. Buat Objek Garis dengan Line Tool dan tarik garis untuk membentuk lengkungan garis.
3. Buat Objek Oval berlapis-lapis dengan Oval Tool, lalu gabungkan dan jadikan symbol dengan Klik Menu Insert > Convert to Symbol.

Tugas Sumber Kasus Hasil
Membuat Objek LatarBelakang dengan Tool Kasus 3.k.1

Tugas2: Membuat Objek

Langkah-langkah tugas2 adalah :

1. Buat objek dengan Tool yang ada pada Toolbar FlashMX.
2. Objek yang dibuat harus terpilih menggunakan Arrow Tool pada Toolbar dan jadikan symbol dengan Klik Menu Insert > Convert to Symbol.

Tugas Sumber Kasus Hasil
Membuat Objek pada masing-masing Layer Kasus 3.k.1
1.Hanya pembuatan objek dari seluruh langkah dan belum dibuat animasi.
2.Lihat langkah-langkah pada Implementasinya.

Tugas3: Analisa Hasilnya

Langkah-langkah tugas3 adalah :
1. Analisa hasilnya dengan TestMovie dan atur kembali jika terjadi salah.
2. Sempurnakan animasi dalam framenya.

Tugas Sumber Kasus Hasil
Menganalisa hasilnya Kasus 3.k.1 Harus sempurna sesuai dengan Implementasinya

Implementasi Penyelesaian Kasus

Langkah-langkah pembuatan event dan objek :
Tugas1: Membuat Objek LatarBelakang Web

Tugas Tindakan
Buat Layer1 dan berinama Latar
1.Pada Layer Latar, di frame1, Klik Rectangle Tool ke stage (biarkan objek masih dalam keadaan terpilih), lalu di Properties Klik Option: Round Rectangle Radius dan Isikan 35 points pada Corner Radius > OK. Lalu beri warna Gradien: Radial. Kemudian Anda buat garis dengan Line Tool sehingga terbentuk seperti gambar 3.1 di atas.
Garis lurus jadikan lengkung dengan cara: Klik Arrow Tool, arahkan ke line dan drag ke luar sesuai bentuk lengkungannya (Terus dicoba!!).

2.Buat objek oval kecil berlapis-lapis dan beriwarna (Fill Color) sesuai warna pilihan Anda, lalu jadikan symbol dan Isikan Behaviour: Button, Name: Tkecil

Tugas2: Membuat Objek

Tugas Tindakan
Buat masing-masing objek dengan Tool pada masing-masing nama layer
1.Pada Layer Bola, di frame1 buat oval bola kecil jadikan symbol dan Isikan Behaviour: MovieClip; Name: bolabiru. Lalu buat Layer Guide:Bola, di frame1 buat line sesuai putaran bola

Kembali Layer Bola, Klik Keyframe 12, 22, 32 dan pilih
Tween: Motion; Ease:0; Rotate: Auto.

2.Masih Layer Bola, di frame33, buat objek bola besar (Warna terserah). Klik frame42, buat objek Teks “D3TKJ Unhas Animation by Untung” dengan Text Tool. Klik frame53, buat objek

Dari frame33 sampai dengan frame53 pilih Tween: Shape; Ease:0; Blend: Distributive. Pilih frame53, lalu Klik kanan mouse>Action dan tulis baris script Stop( );

3.Buat Layer baru, yaitu Layer Tombol. Buat objek 3 tombol dengan Rectangle Tool dan isikan point 35 pada option Round Rectangle Radius. Kemudian jadikan symbol dan Isikan Behaviour: Button; Name: T1 untuk tombol1, T2 untuk tombol2, dan T3 untuk tombol3. Lalu Klik Keyframe pada frame42 agar terjadi efek dua kali tekan tombol T3 pada perubahan objek di Layer Bola.

4.Buat Layer baru, yaitu Layer Teks. Buat objek Teks dengan Text Tool, pilih Static Text, ukuran 25, warna: #00CCFF, FontType: Verdana. Kemudian pilih objek Teks dengan Arrow Tool, Klik Menu Edit > Copy, lalu Klik Menu Edit > Paste in place akan terjadi duplikat teks. Beri warna hitam duplikat teks tadi, buat seakan-akan teks asli ada bayangannya di belakang. Setelah selesai gabungkan ke dua teks dengan Group.

5.Buat Layer baru, yaitu Layer BolaMuter. Buat objek bola kecil dengan Oval Tool jadikan symbol dan Isikan Behaviour: Graphic; Name: BolaMuter. Buat juga Layer baru, yaitu GuideReal dan buat objek seperti gambar 3.6 di bawah menggunakan Menu Modify > Transform > Envelope dan atur penarikan garis di titik-titik hitam sesuai bentuknya.

6.Kembali ke Layer BolaMuter, Copykan frame1 objek gambar 3.6 tersebut, kemudian masukkan Keyframe di frame14 dan gerakkan objek bolakecil menurut objek yang ada di Layer Guide: GuideReal, lalu masukkan Keyframe di frame29 dan gerakkan objek bola kecil menurut objek yang ada di Layer Guide: GuideReal, dan seterusnya untuk frame 43, 57 lakukan hal yang sama untuk langkah-langkahnya.

7.Buat Layer baru, yaitu Layer MunculTeks. Buat objek teks di frame1 dengan Text Tool pilih Static Text, ukuran 12, warna: #FFCC00, FontType: Verdana, kemudian geser frame1 ke frame56.

8.Kembali ke Layer Latar, Klik objek tombol TKecil yang sudah menjadi symbol di stage, lalu Klik kanan mouse>Action dan tulis baris script
on (rollOver) {
gotoAndPlay(56);
}

9.Buat Layer baru, yaitu Layer Action. Di frame1 Klik kanan mouse>Insert Blank Keyframe, lagi Klik kanan mouse>Action dan tulis baris script Stop( ); . Begitupun di frame12, 32 dan 53.

Di frame42 Klik kanan mouse>Insert Blank Keyframe, lagi Klik kanan mouse>Action dan tulis baris script
gotoAndPlay(“TextBerubah”);
stop();

Di frame57 Klik kanan mouse>Insert Blank Keyframe, lagi Klik
kanan mouse>Action dan tulis baris script
gotoAndPlay(57);
stop();

Tugas3: Analisa Hasilnya

Tugas Tindakan
Analisa hasilnya setiap melakukan perubahan dan efek scriptnya
1.Pada analisa ini Anda diharuskan memperhatikan efek yang terjadi setiap Anda selesai melakukan sesuatu terhadap objek dan scriptnya.
2.Imajinasi harus terbentuk dalam pikiran Anda sendiri sebagai Design Animasi.
3. Hasil harus sempurna dan jika terjadi kesalahan,

Verifikasi

Tugas: Buktikan bahwa output seperti hasil yang diinginkan.

Periksa apakah:
Semua langkah yang Anda lakukan sudah benar.
Hasil dari test movie sudah sempurna (jika belum, lakukan lagi terus-menerus).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s