Animasi

Untuk membuat Lingkaran yang Anda buat bisa bergerak seperti contoh dihalaman sebelumnya saya akan menerangkan sedikit mengenai frame dan layer. Frame adalah bagian-bagian dari suatu animasi yang dieksekusi oleh program secara berurutan. jadi bila Anda memasukan huruf A - Z pada frame 1 - 26 maka animasi itu akan menampilkan huruf A sampai Z tersebut secara berurutan mulai dari A, kecepatan eksekusi frame dinyatakan dengan satuan FPS ( frame per second ) artinya berapa banyak frame yang akan dieksekusi oleh program selama hitungan 1 detik. Bila Anda menginginkan tampilan Animasi yang lebih halus dari suatu gerakan yah Anda perbesar satuan FPS nya. Program sothink menggunakan 12 fps sebagai standard kecepatannya. tapi itu dapat Anda rubah sesuai keinginan Anda. Coba lihat pad tab properties dibagian bawah Canvas disitu ada yang namanya FRAME RATE, defaultnya 12 Anda bisa merubahnya sesuai keinginan Anda tapi ingat semakin besar frame rate dari animasi flash, semakin besar ukuran file nya, jadi jangan menset frame rate terlalu besar. Untuk contoh ini pakai saja default dari sothink yaitu 12 fps. Sedangkan Layer adalah kumpulan dari frame-frame yang akan dikerjakan secara bersamaan, misal layer kesatu Anda isi dengan huruf A pada frame kesatu dan layer kedua Anda isi dengan huruf Z pada frame kesatu, maka setelah animasi dijalankan huruf A dan Z akan ditampikan secara bersamaan, jadi bila Anda nanti membuat animasi seperti pada HALAMAN PRESENTASI di situs ini. Anda akan bergelut dengan yang namanya Layer dan Frame. Nah sekarang Anda sudah tahu apa itu frame dan layer, sekarang kita kembali pada proyek pertama kita yaitu membuat lingkaran itu bergerak. Ikuti langkah-langkah berikut :

Bersihkan dulu Canvas dari semua coretan yang mungkin saja tadi Anda mengikuti saya untuk coba-coba membuat bentuk-bentuk yang lain. Cari di library shape berbentuk lingkaran yang telah Anda buat sebelumnya dan taruh di Canvas bagian kiri, jangan sampai keluar dari canvas. Klik frame ke 10, lalu klik kanan mouse. pilih INSERT KEYFRAME Pindah kan lingkaran yang tadi ada disebelah kiri Canvas ke sebelah kanan Canvas. Klik frame ke satu lagi, lalu klik kanan mouse dan pilih CREATE MOTION TWEEN Sekarang Anda bisa tekan tombol PREVIEW dan lihatlah pekerjaan Anda tadi.

Anda akan melihat di PREVIEW lingkaran itu bergerak dari kiri ke kanan terus menerus, lalu bagaimana bila Anda menginginkan animasi itu tidak mengulang lagi, caranya gampang ikuti langkah berikut :

Tutup dulu Jendela PREVIEW kembali ke CANVAS. Klik frame ke 10. Klik Tab ACTION yang ada pada bagian bawah Canvas disebelah properties. Pada TAB ACTION ketik stop(); ( harus huruf kecil dan jangan lupa perhatikan tanda " ( " dan " ) " serta tanda semicolon " ; " tidak ada spasi. Sekarang Anda klik lagi tombol PREVIEW dan Anda lihat hasil pekerjaan Anda.

Nah animasi itu sekarang berhenti setelah berada disebelah kanan. Bagaimana.., mau yang lebih rumit OK ikuti langkah berikut :

Bersihkan dahulu Canvas dari semua atribut, gunakan tombol BACK sampai pada awal latihan diatas. Klik frame 1 Cari di library lingkaran yang Anda buat, dan tempatkan di Canvas sebelah kiri paling bawah tapi jangan keluar dari Canvas. Klik tombol PENCIL GUIDLINES dan pilih PEN GUIDLINES ( Ada pada menu toolbars sebelah kiri icon pencil berwarna kuning merah yang dibawah perhatikan keterangan yang dikeluarkan program ) Klik perlahan-lahan dan sedikit demi sedikit, ikuti gambar kurva berbentuk parabola seperti contoh dihalaman sebelumnya. Klik frame ke 10, lalu klik kanan mouse pilih INSERT KEYFRAME Klik frame ke 1, tempatkan lingkaran yang Anda buat di AWAL PEN GUIDLINES yang telah dibuat sebelumnya. Klik frame ke 10, tempatkan lingkaran yang Anda buat di AKHIR PEN GUIDLINES yang telah dibuat sebelumnya. Klik lagi frame ke 1, lalu klik kanan mouse dan pilih CREATE MOTION TWEEN. Klik Layer 1, lalu klik kanan mouse dan pilih INSERT LAYER Klik layer 2 yang baru saja Anda buat dan pilih frame ke 1 Klik tombol PENCIL bukan PENCIL GUIDLINES tapi yang diatasnya. Gambar Garis lurus kekanan seperti pada contoh dihalaman sebelumnya dan buatlah kurva berbentuk parabola mengikuti PENCIL GUIDLINES. Klik Frame ke 10 Layer ke 2, lalu klik kanan mouse dan pilih INSERT FRAME Klik tombol preview dan Anda lihat hasil kerja ANDA.

Bila Anda benar dalam mengikuti petunjuk diatas, maka animasi yang Anda buat tadi akan terlihat sama seperti contoh pada awal latihan kita dihalaman sebelumnya. OK Selanjutnya mari kita tingkatkan pengetahuan kita mengenai frame, layer dan sedikit mengenai script. Untuk Script atau bahasa pemrograman yang ada pada animasi flash akan disinggung lebih jauh lagi dalam tutorial flash tingkat lanjut ( Action Script 1 -- Tunggu saja yah.. ). Untuk saat ini saya hanya mengenalkan sedikit mengenai script dan fungsinya.

PENGERTIAN SCRIPT PADA FLASH

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.