Membuat Flash Animasi untuk Pemula

Saya Sarankan Anda Baca Juga

P E N D A H U L U A N

Flash adalah suatu sotware yang digunakan untuk membuat sebuah animasi. Dengan flash kita dapat membuat tampilan website atau komputer kita menjadi hidup. Tidak mudah untuk mempelajari flash, selain diperlukan imajinasi juga diperlukan pemahaman mengenai SCRIPT. Bisa saja kita membuat sebuah animasi tanpa menggunakan script tapi file yang dihasilkan menjadi besar, hal itu mempengaruhi loading atau pemuatan data di workstation atau client. Selain flash kita juga bisa membuat sebuah animasi dengan Compuserver file, biasanya file ini berakhiran GIF, Untuk pengguna windows, microsoft menggunakan mesin animasi tersendri yang disebut Active X. Selain itu ada juga bahasa pemrogaman yang khusus untuk membuat sebuah animasi misalnya JAVA APPLET. bahkan jika anda mahir dalam sebuah pemrogaman seperti C, Pascal, Visual basic dan masih banyak lainnya, dapat membuat sebuah animasi. Pada tutorial kali ini SSC menginginkan Anda sebagai pengguna Situs ini, agar mengetahui teknik membuat flash animation dengan cara yang sederhana dan mudah. Untuk itu saya membuat tutorial ini untuk Anda. Ok mari kita mulai tutorial ini, tapi sebelumnya Anda harus menyiapkan bahan-bahan untuk tutorial ini. Apa saja bahan-bahan nya, simak yang baik jangan sampai terlewatkan satu bahanpun.

Software Utama untuk membuat animasi flash yaitu Sothink SWF Quicker yang bisa Anda download secara gratis di http://www.sothink.com, Klik Link yang ada di Pilar Kanan untuk men downloadnya. Software untuk edit gambar atau photo seperti Adobe photoshop CS, kalau tidak ada pakai Program Paint yang ada di windows juga bisa. Flash player 7.0 yang bisa didownload di http://www.macromedia.com, Klik Link yang ada di Pilar Kanan untuk men downloadnya. Microsoft Internet Explorer 6.0, FireFox 1,5 atau Opera 8.0 untuk melihat hasil publish dari file *.swf di Browser. Alat tulis antara lain kertas dan pulpen. Kopi satu gelas kalau anda suka kopi, kalau nggak suka, susu juga boleh, atau teh manis bagaimana.?,. Pokoknya terserah Anda sajalah hehehe

Bagaimana., sudah siap bahannya.? Kalau belum tunda aja tutorial ini untuk besok, kalau sudah mari kita lanjutkan. Oo ada yang tanya, kenapa pakai sothink swf quicker, kenapa nggak pakai macromedia flash mx atau program-program yang disebutkan diatas seperti bahasa C atau visual basic gitu ?. Wew.., Tutorial untuk program itu belum diizinkan oleh SPC untuk dipublikasikan jadi yah nrimo aja deh, kan baru belajar nanti kalau sudah mahir mungkin SPC akan menurunkan tutorial mengenai program-program tersebut. Setelah anda download program dari sothink, sekarang Anda membutuhkan program untuk mengekstrak file hasil download tersebut dengan WINZIP atau WINRAR, tempatkan hasil exstrak file tersebut pada sebuah direktory lain setelah itu instalasi program sothink pada komputer Anda, caranya gampang tinggal klik dua kali file SETUP.EXE hasil download dan klik YES aja terus kalau nggak mau pusing pada proses instalasi. Tapi perlu Anda perhatikan dan camkan baik-baik bahwa software tersebut cuma gratis untuk ujicoba saja selama 30 hari, setelah 30 hari pakai software itu tidak bisa dipakai lagi, kalau Anda menginginkan dipakai terus Anda harus membeli licence software nya. Sudah di install.., Ok sekarang anda klik dua kali icon sothink swf quicker yang ada didesktop setelah itu akan ditampilkan licence software dan peringatan masa uji coba software tersebut klik aja tombol CONTINUE bila masa uji coba software yang Anda Install masih Aktif (30 hari). Setelah masuk ke program maka akan ditampilkan pilihan untuk membuat animasi dari template antara lain : Blank Document, Album, Banner, Navigation button dan Presentasi. Dengan menggunakan template Anda tidak perlu pusing-pusing untuk membuat animasi yang ada, tapi bila Anda orang yang kreatif dan menginginkan animasi tersebut adalah hasil buatan Anda sendiri maka Anda pilih saja Blank Document. Setelah Anda pilih Blank Document pada menu template maka akan ditampilkan program utamanya seperti gambar dibawah ini. Tampilan Program Sothink swf quicker

P R O Y E K   P E R T A M A

Saya tidak akan menerangkan mengenai fungsi tombol-tombol yang ada pada program tersebut satu persatu ( terlalu lama dan tidak mendidik kreativitas ) , karena nanti juga Anda akan terbiasa dengan tombol-tombol tersebut disamping itu, nanti akan disinggung juga pada latihan-latihan kita.

Mari kita mulai pada proyek pertama. Klik File -- Save -- ketik " latihan 1 " -- save. maka dibagian atas program yang tadinya ada kata untitled jadi latihan 1. Setelah di save Anda klik tombol anak panah berwarna biru lalu Anda klik tombol LINE ( gambar pincil disebelah kanan atas yang ada pada menu shape ) ganti nilainya jadi 2 dengan warna hitam, lalu klik tombol FILL dibawahnya rubah jadi solid dengan warna Orange. Setelah itu klik tombol lingkaran yang ada pada menu sebelah kiri. Tempatkan kursor bertanda + di KANVAS lalu drop kursor itu terserah Anda, tapi jangan besar-besar sedang aja. maka akan terlihat sebuah lingkaran berwarna Orange dengan garis pinggir (Out Line) berwarna hitam. Ini dapat Anda rubah sesuai selera Anda mau merah, putih, hijau atau apapun itu tergantung selera Anda saja, kenapa saya suruh berwarna Orange yah karena saya suka warna orange, kenapa nggak yang lain yah karena saya tidak suka warna yang lain itu saja.

Setelah membuat ligkaran, sekarang Anda coba coba sendiri fungsi dari RECTANGEL dan sebagainya. coba-coba saja tidak akan terjadi apa-apa. kalau anda tidak suka dengan setingan pertama, Anda dapat menekan tombol back yang berada pada bagian atas menu, maka setingan yang sebelumnya anda buat akan kembali lagi. Gampang kan.

Kita kembali lagi, nah lingkaran yang Anda buat tadi sekarang sudah disimpan pada Library. Bila pertama kali Anda menjalankan program ini maka akan ada keterangan berwarna kuning yang menerangkan bahwa hasil kerja Anda tadi telah masuk di library ( Panel sebelah kanan bawah ). Lingkaran itu sekarang bisa Anda Hapus dengan cara mengklik lingkaran tersebut lalu menekan tombol DEL pada keyboard, bisa juga dengan klik kanan mouse dan pilih DELETE. Anda tidak usah khawatir dengan hilangnya lingkaran yang dengan susah payah Anda buat tadi, karena setelah disimpan pada library lingkaran tersebut dapat Anda panggil kembali caranya, klik shape yang ada pada library maka dibagian atas library akan ditampilkan bentuk lingkaran yang Anda buat tadi. Sekarang Anda klik dan tahan dengan tombol kiri mouse, lalu bawa lingkaran tadi ke CANVAS. Maka Lingkaran yang baru saja Anda Buat lalu dihapus akan kembali lagi, ini penting untuk Anda ingat karena nantinya kita akan banyak memanfaatkan fungsi library ini, agar dapat mudah Anda kenali jenis dari library yang dibuat, Anda dapat mengganti namanya dengan cara mengklik kanan tombol mouse pada file yang ada dilibrary lalu pilih RENAME gantilah dengan nama sesuai selera Anda, contoh : ganti namanya dengan lingkaran1.

Sampai disini saya rasa Anda sudah mengerti mengenai pembuatan bentuk lingkaran, kotak atau persegi lima dan sebagainya, kalau belum Anda coba-coba sendiri saja, sengaja tidak saya beritahukan kepada Anda biar Anda jadi kreatif dan tidak menelan mentah-mentah apa yang saya paparkan disini.

Langkah berikutnya yaitu bagaimana caranya membuat lingkaran yang baru saja Anda buat itu dapat bergerak seperti contoh dibawah ini.

Contoh Animasi yang dibuat oleh sothink SWF Quicker

Contoh diatas dibuat dengan sothink swf quicker termasuk banner yang ada dibagian atas halaman ini juga dibuat dengan software yang sama bahkan bila Anda ingin contoh yang lebih rumit Anda bisa klik tombol presentasi yang ada pada Menu, bagaimana kreatif kan..!, saya tunjukan itu agar Anda bersemangat dalam mengikuti tutorial ini dan tidak ragu-ragu lagi berlatih flash dengan software ini, sebab bila Anda sudah menguasai sothink swfquicker maka Anda juga akan mudah mempelajari Software Flash apapun seperti Flash MX, Swish, dan Antechinus. OK !.

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.