Animasi

Klik lagi menu SHAPE ubah nilai LINES = 1 dengan warna putih, rubah juga FILL COLOR dengan SOLID warna orange, Klik tombol RECTANGLE yang ada pada menu sebelah kiri pilih RECTANGLE buat kotak untuk tombol berukuran WIDTH = 64 HEIGTH = 20. Buatlah sebanyak 3 buah dan atur posisi ketiga kotak tadi agar terlihat cantik, lihat contoh diatas kalau Anda tidak punya ide untuk menempatkan ketiga tombol itu, walaupun itu bisa Anda taruh sesuka hati Anda, asal jangan di luar canvas aja. Catat posisi ketiga tombol yang Anda taruh ( lihat tab TRANSFORM nilai untuk X dan Y, ingat catat di kertas jangan sampai lupa posisi tombol yang Anda taruh ). Klik tombol pertama lalu klik kanan mouse dan pilih CONVERT TO SYMBOL setelah itu akan keluar menu pop-up untuk memilih jenis dari symbol. Pilih BUTTON dan rubah namanya jadi TOMBOL1, maka pada LIBRARY akan terlihat tombol hasil convert yang Anda buat tadi. Lakukan hal yang sama dengan dua buah kotak yang lain dengan nama TOMBOL2 dan TOMBOL3. Sekarang Anda lihat pada menu library, disitu ada tiga buah tombol hasil convert yang Anda lakukan tadi. Klik dua kali TOMBOL1 yang ada pada library, maka Anda akan masuk pada MODE EDITING untuk TOMBOL1. Pada Mode ini hanya ditampilkan khusus untuk meng-edit bagian-bagian yang Anda inginkan. Setelah masuk pada mode editing disitu Anda melihat pada bagian atas ada layer1 dan frame-frame dengan kata UP, OVER, DOWN dan HIT. Klik frame UP kemudian klik tombol TEKS ( berlambang huruf T disebelah kiri ), Rubah properties dari teks, pilih jenis huruf ARIAL typenya STATIC dengan ukuran huruf 10 dpi warna putih terus klik tombol BOLD, drop mouse di canvas dan ketik " PERTAMA ". Terus klik tanda panah berwarna biru, atur posisi teks tadi tepat ditengah kotak yang dibuat oleh Anda sebelumnya. Sekarang klik frame OVER, klik kanan mouse pilih INSERT KEYFRAME. Lakukan hal yang sama pada frame DOWN dan HIT. Sampai disini Anda sudah berhasil membuat sebuah tombol untuk digunakan nanti dalam animasi flash yang sedang Anda buat. Sekarang Anda klik kata SCENE 1 yang ada pada bagian atas, maka Anda akan kembali lagi pada mode GLOBAL seperti semula, dan Anda lihat pada canvas, sekarang kotak yang Anda buat tadi sudah ada tulisan " PERTAMA '. Lakukan seperti diatas untuk TOMBOL2 dan TOMBOL3. dengan teks " KEDUA " dan " KETIGA " Sekarang simpan pekerjaan Anda dengan meng klik icon berbentuk DISKET.

Sebelum saya lanjutkan, saya jadi khawatir dengan keadaan Anda saat ini yang mungkin masih bingung atau pusing mengikuti langkah langkah yang separuh jalan itu. OK BABY pada awal tutorial ini saya membuat daftar bahan-bahan yang perlu Anda siapkan untuk mengikuti tutorial ini antara lain minuman seperti kopi, teh susu atau apa saja yang Anda sukai. Minum dulu bahan itu santai saja jangan terlalu tegang karena saya juga melakukan hal yang sama ketika mengetik tutorial sampai disini, malah sempat buang hajat dulu hehehe. jadi malu sama Pak EDISON yang ada di layar nih karena lampu toilet saya kelap-kelip pengen rusak.

OK mari kita lanjutkan lagi langkah-langkahnya. Kita fokuskan lagi pada lingkaran-lingkaran yang telah dibuat. Klik lingkaran kecil berwarna orange bawa lingkaran itu pada awal PEN GUIDLINES disebelah kiri. Klik frame ke 50 kemudian klik kanan mouse pilih INSERT KEYFRAME, pindahkan lingkaran berwarna orange yang tadi berada di awal PEN GUIDLINES ke akhir dari PEN GUIDLINES disebelah kanan. Klik frame ke 1 dan klik kanan terus pilih CREATE MOTION TWEEN. Klik lagi frame ke 50, klik tab ACTION yang ada dibawah canvas. Pada teks editor dari ACTION ketik script ini gotoAndPlay(1); perhatikan, tulisannya harus sama seperti itu jangan dirubah serta perhatikan huruf besar dan huruf kecil yang ada. Perintah itu artinya ulangi animasi pada frame ke 1. Simpan lagi pekerjaan Anda untuk menghindari hal-hal yang tidak diinginkan. Sekarang lihat hasil kerja Anda dengan meng klik tombol PREVIEW ( icon berbentuk kaca pembesar ). Bila sudah terlihat lingkaran berwarna orange seakan-akan mengitari ligkaran besar berwarna abu-abu, berarti hasil kerja Anda selama ini boleh dikatakan cukup lumayan. Tutup jendela PREVIEW. Sekarang klik frame ke 1, klik canvas ( jangan lupa ! ), terus klik tombol PERTAMA, pada TAB ACTION ketik script berikut :

on(release) { gotoAndPlay(1); }

Klik frame ke 50 dan klik tombol PERTAMA, ketik script yang sama seperti diatas pada teks editor ACTION. Script ini mempunyai arti, " Ketika tombol di klik maka lakukan perintah yang ada dalam kurung kurawal ". Klik lagi frame ke 1, dan klik tombol KEDUA kemudian pada tab ACTION ketik script berikut :

on(release) { gotoAndPlay(51); }

Kerjakan perintah diatas untuk frame ke 50 untuk tombol KEDUA. Sekarang klik lagi frame ke 1, pilih tombol KETIGA kemudian klik script berikut :

on(release) { gotoAndPlay(101); }

Hal yang sama Anda lakukan pada frame ke 50 untuk tombol KETIGA. Sampai disini Anda sudah berhasil mengatur jalannya animasi pertama dengan menggunakan script script singkat tapi bermanfaat. Nah sekarang kita mulai membuat animasi kedua dengan cara menambahkan animasi lain pada LAYER yang lain. Klik kanan LAYER 1, pilih INSERT LAYER. Klik frame ke 50 pada LAYER 2 yang baru saja Anda buat, Klik kanan dan pilih INSERT KEYFRAME, klik lagi frame ke 51 LAYER 2 klik kanan dan pilih INSERT KEYFRAME Disini Anda Akan melihat canvas tidak ada apa-apa alias kosong. Sekarang Drop TOMBOL1, TOMBOL2 dan TOMBOL3 dari library ke Canvas. Pada langkah-langkah diatas saya pernah menyuruh Anda untuk mencatat posisi dari tombol-tombol itu. Sekarang Anda susun lagi tombol-tombol itu dengan posisi yang sama. Masih di frame ke 51 LAYER 2, Klik TEKS TOOL dan ketikan kata-kata berikut :

INI ANIMASI TEKS PERTAMA

Rubah formasi huruf sedemikian rupa dengan menarik bagian bawah dari kotak SELEKSI kata-kata tersebut terserah selera Anda mau seberapa besar. Klik Frame ke 100 LAYER 2, klik kanan mouse pilih INSERT KEYFRAME. Sekarang Anda beralih lagi ke frame 51 layer 2, kalau tadi Anda membesarkan ukuran dengan seleksi tool sekarang kebalikannya yaitu mengecilkan ukuran dari kata tersebut sampai tidak terlihat di canvas. Klik frame 51 layer 2, klik kanan mouse pilih CREATE MOTION TWEEN. Masih di frame 51 layer 2, klik TOMBOL1, klik ACTION, pada teks editor ketik script berikut:

on(release) { gotoAndPlay(1); }

Klik TOMBOL2 dan ketik script berikut,

on(release) { gotoAndPlay(51); }

Klik TOMBOL3 dan ketik script berikut,

on(release) { gotoAndPlay(101); }

Sekarang klik frame 100 layer 2, di Tab ACTION ketik, stop(); Sampai disini animasi yang kedua telah Anda buat dengan sukses bila pada PREVIEW Anda melihat animasi yang pertama yaitu lingkaran orange mengitari lingkaran abu-abu dan ketika anda klik tombol KEDUA akan terlihat kata " INI ANIMASI TEKS PERTAMA " dari kecil terus membesar kemudian berhenti disitu. Lalu bila Anda Klik tombol PERTAMA maka animasi dari lingkaran akan diplay lagi. Saya ucapkan selamat kepada Anda bila keterangan diatas benar, tetapi bila tidak Anda harus berusaha mencari kesalahan sendiri, dengan begitu Anda tahu dimana kesalahan Anda Sendiri.

Uahhh sudah ngantuk nih.., untung saja ada segelas kopi dan sebatang rokok serta beberapa potong pisang goreng yang menemani saya mengetik tutorial ini, jadi saya terus berusaha untuk menyelesaikan tutorial ini. bagaimana dengan Anda ?, masih mau terus..?, hmmm saya salut atas kegigihan Anda dalam mempelajari tutorial ini. OK kita lanjutkan.

Klik kanan layer 3, dan pilih INSERT LAYER, sekarang layer ketiga sudah dibuat. klik frame 100 pada layer ketiga yang baru saja Anda buat. Klik kanan mouse dan pilh INSERT KEYFRAME. Lalu klik frame 101 layer 3 klik kanan mouse dan pilih lagi INSERT KEYFRAME. Klik lagi frame 101 layer 3, Drop TOMBOL1, TOMBOL2 dan TOMBOL3 dari library ke Canvas atur posisi tombol tersebut seperti langkah sebelumnya. Klik frame 101 layer 3, lalu ketik kata-kata berikut. INI ANIMASI TEKS KEDUA Atur teks tersebut dan besarkan ukurannya dengan bantuan kotak SELEKSI. Sekarang klik menu MODIFY yang berada diatas, pilih BREAK APPART, kemudian klik menu insert disebelahnya. dan pilih CREATE EFFECT maka akan ditampilkan menu pop-up untuk memilih jenis animasi dari teks yang kita kehendaki. Pada menu pop-up pilihan animasi, klik MOVE dan pilih SLIDING kemudian klik tombol OK. Klik frame 155 layer 3, klik kanan mouse dan pilih INSERT KEYFRAME. Masih di frame 155 layer 3, Pada Tab ACTION ketik stop(); Klik TOMBOL1 masih dalam frame yang sama seperti diatas, ketik script berikut :

on(release) { gotoAndPlay(1); }

Klik TOMBOL2 ketik di tab ACTION script berikut:

on(release) { gotoAndPlay(51); }

Klik TOMBOL3 ketik di tab ACTION script berikut:

on(release) { gotoAndPlay(101); }

Lakukan hal yang sama seperti diatas pada frame 101 layer 3, terhadap TOMBOL1, TOMBOL2 dan TOMBOL3.

Dan akhirnya..., uaaaaaaaaahh sudah ngantuk berat, tapi mata saya tidak bisa terpejam walaupun mulut saya sudah menguap belasan kali. Itu karena kekhawatiran saya kepada Anda sehingga membuat mata saya tidak bisa terpejam sebelum Anda benar-benar mengerti dengan apa yang saya tulis pada tutorial ini. Agar mata saya bisa terpejam dan dapat beristirahat dengan baik berilah tanggapan dan pertanyaan Anda tentang tutorial ini di SSC Forum. Ingat yah Semua pertanyaan hanya saya jawab melalui SSC Forum, jadi bila Anda mengirim pertanyaan lewat Email, tidak akan saya jawab pertanyaan Anda. OK sampai disini dulu tutorial kita mengenai Flash Insya Allah pada Up-Date mendatang akan dilanjutkan lagi dengan tutorial ACTION SCRIPT 1 FOR FLASH PROGRAMING. Salam dari saya.