PENGERTIAN SCRIPT PADA FLASH

Saya Sarankan Anda Baca Juga

Mungkin anda bertanya, apa itu script dan apa gunanya.?, Pada latihan diatas saya telah menerapkan salah satu fungsi script dalam flash, coba Anda simak lagi tulisan diatas., yah benar. Masih ingatkan perintah " stop(); " pada latihan diatas..!, itu salah satu dari perintah dalam flash yang berfungsi untuk menghentikan perulangan dalam animasi flash.

Bila Anda terbiasa dengan perintah-perintah JAVASCRIPT hal itu bukanlah sesuatu yang aneh. Dan memang bila Anda cukup mahir dalam bahasa Pemrograman JAVASCRIPT tentunya Anda tidak akan kesulitan untuk memahami script-script yang ada pada flash, karena memang dasar pemrograman nya diambil dari sintak-sintak bahasa JAVA dan C. Apalagi bila Anda mahir dengan JAVA APPLET mungkin keterangan saya ini bisa Anda abaikan.

Script atau perintah flash pada SOTHINK, SWISH, ANTECHINUS maupun MACROMEDIA FLASH diadobsi dari bahasa yang sama yaitu Bahasa Pemrograman JAVA. Lebih khusus lagi yaitu Bahasa JAVA yang digunakan untuk membuat animasi yaitu JAVA APPLET yang dikenal dengan nama ACTION SCRIPT. Maka seperti yang saya uraikan diatas, bila Anda mahir dalam bahasa JAVA dan JAVA APPLET tentunya tidak akan kesulitan untuk memahi perintah-perintah dalam flash.

Sebagai dasar pengenalan script dalam flash, sekarang Anda perhatikan Animasi flash dibawah ini.

Contoh animasi flash yang menggunakan script

Jangan bengong saja, cobalah Anda klik tombol yang ada pada animasi tersebut, terserah yang mana saja yang Anda sukai untuk di klik terlebih dahulu. Kalau Anda klik tombol Kedua maka akan ditampilkan animasi kedua, bila Anda klik tombol ketiga maka akan ditampilkan animasi ketiga. Itu akan berlaku terus menerus dan tidak akan berubah sampai Anda meng klik tombol yang lain. Nah dari contoh diatas Anda sekarang mengetahui bahwa Flash itu dapat Anda buat untuk berbagai keperluan dan dapat Anda program sesuka hati Anda. Apa ada contoh yang lain..? ada, coba klik Link ini, dan kemudian Anda coba-coba sendiri. Animasi flash itu dibuat oleh orang yang sudah mahir dalam pembuatan flash dengan memanfaatkan script, dan itu bukan buatan saya tapi buatan PUSTEKKOM DEPDIKNAS, tapi prinsip kerjanya hampir mirip dengan animasi diatas serta latihan Anda.

P R O Y E K K E D U A

Saatnya telah tiba bagi Anda untuk mencoba membuat animasi flash dengan bantuan script, agar animasi itu dapat dikontrol oleh kita. Ikuti petunjuk berikut untuk membuat animasi seperti contoh diatas.

Buat file baru dengan mengklik menu FILE -- NEW FILE. Klik tab properties, klik Canvas yang masih kosong lalu rubah nilai FRAME RATE jadi 16, ukuran CANVAS -- WIDTH = 300 -- HEIGHT = 200, BACKGROUND warna hitam. Klik tab SHAPE rubah ukuran LINE = 2 dengan warna putih, rubah FILL COLOR dengan SOLID warna orange. Klik tombol OVAL buat lingkaran pada canvas, klik tab TRANSFORM rubah ukuran width = 20 dan heigth = 20. Taruh lingkaran itu di pojok sebelah kiri canvas.

Menu transform, layout, library dan movie explorer Klik lagi menu SHAPE, rubah nilai LINE = 1 dengan warna hitam, ganti warna FILL dengan SOLID dan warna abu-abu. Klik lagi menu OVAL tekan tombol SHIFT pada keyboard ( dengan cara ini lingkaran akan benar-benar bulat ) buat lingkaran pada canvas. Rubah nilai HEIGTH = 100, WIDTH = 100 pada tab TRANSFORM, taruh lingkaran itu ditengah canvas. Buat lagi lingkaran berbentuk oval, rubah nilai HEIGTH = 270 dan WIDTH = 44 pada tab TRANSFORM, taruh oval tersebut ditengah-tengah lingkaran kedua yang telah dibuat oleh Anda tadi. Bila Anda mengikuti petunjuk ini dengan benar, seharusnya canvas Anda akan terlihat seperti gambar diatas.

Klik menu PENCIL GUIDLINES dan pilih PEN GUIDLINES, klik perlahan-lahan dan ikuti lingkaran berbentuk oval yang berada ditengah mulai dari kiri ke kanan, lihat contoh layout latihan 2 diatas. Klik panah berwarna biru pada menu sebelah kiri paling atas, klik canvas satu kali aja ( biasakan mengklik kanvas terlebih dahulu sebelum melakukan pekerjaan yang lain, ini untuk menghindari terjadinya pilihan ALL bila kita mengklik FRAME atau tab TRANSFORM dan lainnya, perhatikan tanda pilihan seleksi yang ada pada canvas ) Klik lingkaran berbentuk oval yang berada ditengah dan perhatikan tanda seleksi atau pilihan berbentuk segiempat berwarna biru dan ada titik titik transform nya. Tekan tombol DEL atau DELETE pada keyboard untuk menghapus lingkaran berbentuk oval ini. Oval ini digunakan hanya sebagai mall dari PEN GUIDLINE agar Anda mudah membuat GUIDLINES berbentuk oval. 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.