[Flash Tutorial] For Begginer

[ernest]

Berikut ini beberapa istilah Flash yang akan saya gunakan dalam menerangkan teknik-teknik pembuatan Flash. Mungkin banyak dari Anda yang sudah tahu artinya, tapi banyak juga yang belum.

1. Symbol. Symbol bisa disebut objek Flash. Sebelum Anda memberi efek animasi, skala, rotasi, atau warna pada suatu objek, Anda harus mengubahnya dulu menjadi symbol. Ada tiga macam symbol, yaitu graphic, button, dan movie.

2. Vektor. Bila Anda menggambar sesuatu dengan Flash (lingkaran, kotak, pokoknya segala sesuatu yang digambar dengan tool Flash), Anda menggambar dalam bentuk vektor. Contoh software lain yang menggambar dalam bentuk vektor misalnya Coreldraw atau Adobe Illustrator. Gambar yang biasa Anda lihat (bmp, jpg, tiff, dan sebagainya), bukanlah vektor.

3. Alpha. Alpha bisa dikatakan urutan transparansi suatu objek. Pada alpha 100 objek tersebut benar-benar terlihat, pada alpha 50 objek tersebut transparan, dan pada alpha 0 objek tersebut nyaris tidak terlihat.

4. Layer. Movie-movie Flash tersusun dalam layer, sama seperti halnya dalam Adobe Photoshop. Objek yang terletak pada layer yang lebih tinggi akan menutupi objek yang terletak pada layer di bawahnya. Layer ini juga mengakibatkan beberapa pembatasan. Misalnya, Anda tidak dapat melakukan motion tweening pada layer yang mengandung lebih dari satu symbol.

[ernest]

LAYER - informasi umum mengenai layer

Bila anda bayangkan, layer adalah semacam lapisan plastik transparan yang dapat kita letakkan bertumpukan dengan masing-masing plastik transparan tersebut mengandung elemen tersendiri, sehingga memudahkan kita untuk mengorganisasikannya.



Angka 10, 20, 30, dan seterusnya pada bagian atas gambar merupakan timeline, atau penanda waktu. Jadi sederhananya, bila pada detik ke-10 dan layer satu anda letakkan elemen gambar tertentu, gambar itu hanya akan terlihat pada satuan waktu ke-10 dari movie anda. Pengertian tentang penanda waktu atau timeline ini sangat penting dan berperan pada penguasaan kita pada Flash.
Keseluruhan garis putih horizontal pada sisi sebelah kanan tulisan layer adalah frame-frame yang akan muncul secara bergantian sepanjang waktu yang anda tetapkan. Movie anda didasarkan pada frame-frame, nilai defaultnya 12 frame per detik, 12 f/s, berarti kecepatannya 12 frame perdetik.

• Untuk merubah nama layer kita dapat memilih layer dengan mouse kemudian double klik atau tekan enter, lalu masukkan nama layer untuk memudahkan pengorganisasian movie. Setiap layer sebaiknya mengandung satu obyek atau grup karena animasi hanya dpat dilakukan satu obyek/grup per layer.
• Urut-urutan layer dapat kira rubah dengan men-drag menarik layer, ke atas dan kebawah, layer yang tampil di atas adalah yang terlihat lebih dahulu saat movie berjalan. Sebagai contoh, bila anda menginginkan satu movie dengan latar belakang hitam pada layer 1, dan tulisan teks pada layer 2, namun anda terlanjur membuat layer tersebut (insert layer) secara terbalik, anda tinggal menarik layer 1 ke bawah. Mudah bukan ?
• Pada Flash 4 dengan klik kanan pada layer bar, kita dapat merubah properti dari layer tersebut, menambah, menghapus, mengganti nama, menyembunyikan, mengunci, dan lain-lain. Pada Flash 3 kita dapat melakukan ini dengan klik pada sebuah button kotak di sebelah layer bar.

MODE PADA LAYER
Sangat penting untung mengerti mode yang dapat diterapkan pada layer, karena akan mengurangi banyak frustasi anda saat akan membuat movie.

Di antara mode-mode tersebut antara lain :

• Current Mode, memiliki pengertian bahwa layer tersebut merupakan layer tempat anda bekerja saat ini, sehingga segala perubahan yang anda terapkan pada leyer lain akan diabaikan, untuk Flash 4 hal ini telah diperbaiki dengan mengasosiasikan setia frame dan obyek yang anda klik untuk langsung berubah menjadi current layer.
• Normal Mode,bila layer tersebut pasif dan tidak ada apa-apa yang dimodifikasi saat itu.
• Locked Mode, bila layer tersebut ingin kita kunci sehingga modifikasi yang kita lakukan pada layer sekitarnya tidak mengganggu are layer tersebut. Hal ini memudahkan anda untuk merubah surrounding dari layer tanpa mengganggu hal-hal yang saat itu telah anda fixed. Contohnya bila terdapat jajaran kotak, yang masing masing terletak pada layer yang berbeda dan anda ingin agar kotak kedua (yang telah baik posisinya) tidak berubah, namun anda ingin menggeser semua kotak lainnya sedikit ke kanan misalnya, gunakan Locked Mode pada layer tersebut.
• Hidden Mode, bila anda ingin berkonsentrasi pada suatu obyek, dan ingin agar yang lain tersembunyi anda dapat menggunakan mode ini sehingga perubahan yang anda lakukan bisa lebih cepat dan mudah serta akurat. Contoh apabila anda telah mengorganisir puluhan animasi yang simpang siur dan hendak menyembunyikan mereka agar anda dapat meletakkan sebuah teks pada sudut kanan bawah dengan baik, gunakan Hidden Mode.

tip: Bila anda menginginkan penempatan sebuah obyek pada layer yang lain, anda dapat meng-cut kemudian pilih layer yang anda inginkan dan paste in place, dengan demikian posisi obyek tersebut tidak berubah.

[ernest]

SIMBOL - SENJATA UTAMA FLASH

Simbol atau Symbols adalah keunggulan utama dalam Flash. Simbol merupakan gambar atau obyek apapun yang kita definisikan sebagai simbol (pilih dan tekan F8), untuk dapat kita pergunakan dan modifikasi berulang kali tanpa harus menambah ukuran file dan menduplikasi simbol tersebut untuk kegunaan lain. Dengan simbol yang terorganisir dengan baik kita dapat menyusun sebuah animasi spektakuler dengan sesedikit mungkin sakit kepala.



Jenis Simbol ada tiga, graphic, button, dan movie clip. Keseluruhan sumber daya baik itu sound, raster image, graphic, button, dan movie clip, yang kita miliki dikelola dalam sebuah Library. Pada Flash 4 dengan mudah kita mengambil sebuah obyek dari library dan menempatkannya di stage, kelola dengan baik seperti kita mengelola file pada explorer, gunakan direktori.
Untuk meng-edit simbol tersebut kita klik tombol paling kanan atas dari stage (terlihat pada gambar) dan sebuah dialog menu akan muncul, kita pilih simbol yang hendak kita edit. Dari Library Window (lihat gambar) hal tersebut juga dapat kita lakukan dengan double klik pada item yang dimaksud. Kemudian pilih edit symbol.

• Pada Library kita dapat melihat preview dari symbol yang kita pilih, dan untuk button, sound, dan movie clip terdapat menu yang akan memutar secara preview apa isi dari button, sound, dan movie clip tersebut (di bawah tulisan options pada window library)
• Untuk kembali dari area edit symbol pada flash empat di sebelah kiri tombol symbol (pojok kanan gambar) terdapat tombol lain yang melambangkan scene. Pilih Scene tempat anda bekerja dan kembali menyusun movie.
• Kelebihan lain dari simbol adalah bila anda melakukan editing pada simbol tersebut perubahan yang terjadi akan berlangsung di keseluruhan simbol yang anda telah taruh pada movie anda. Bayangkan anda menggunakan 26 button dan ada cacat sedkit pada button tersebut, setelah anda edit anda tidak perlu repot-repot merubah 25 buttons lain yang ada di stage...hebat bukan ?!?!
• Jangan kaku dalam menggunakan simbol karena sebuah graphic simbol dapat digunakan dalam button, demikian juga sebuah button dapat digunakan dalam sebuah movie clip (pengelolaan simbol lebih lanjut). Sebuah rangkaian button (katakanlah 25) dapat anda buat dalam sekejap dengan menggunakan duplicate (pada library window), anda hanya perlu merubah elemen yang berbeda katakanlah teks misalnya, maka berapapun button yang akan anda buat tidak akan menyita waktu terlalu lama...cool eh !!!

shortcut :
membuat simbol baru - F8
melakukan edit pada simbol - Ctrl + E

tip: Dengan membiasakan mengorganisir (memberi nama dan urutan sesuai jenis dan hirarkinya) simbol dan library sejak dini anda akan memiliki kebiasaan sangat baik untuk bekerja pada sebua proyek besar yang melibatkan ratusan simbol.

[ernest]

LIBRARY - efektif dan efisien

Library hanyalah merupakan jendela anda dalam mengamati dan mengorganisasi simbol dan sumber daya yang anda miliki.



Keseluruhan sumber daya baik itu sound, raster image, graphic, button, dan movie clip, yang kita miliki dikelola dalam sebuah Library. Pada Flash 4 dengan mudah kita mengambil sebuah obyek dari library dan menempatkannya di stage, dengan cara men-drag pada window preview ke area yang kita inginkan. Kelola dengan baik seperti kita mengelola file pada explorer, gunakan direktori, dengan demikian katakanlah anda memiliki 120 button dengan masing-masing scene, anda bisa meilah mereka menjadi beberapa direktori.
Dari Library Window (lihat gambar) pengelolaan simbol dapat kita lakukan dengan double klik pada item yang dimaksud. Kemudian pilih edit symbol, edit properties, dll.

• Pada Library kita dapat melihat preview dari symbol yang kita pilih, dan untuk button, sound, dan movie clip terdapat menu yang akan memutar secara previe apa isi dari button, sound, dan movie clip tersebut (di bawah tulisan options pada window library)
• Urutan pada Library secara default berdasarkan abjad, namun anda dapat mengatur tampilan apakah hanya button saja, graphic saja, atau semuanya dengan urutan tertentu, semuanya dapat meudahkan anda dalam mengefektifkan resource anda.
• Khusus untuk sound dan bitmap image, sekali anda telah mengimpornya, maka item tersebut akan tetap tersimpan dalam Library meskipun tidak anda gunakan untuk movie anda. Bitmap image dapat anda atur kompresinya sesuai kualitas yang paling sesuai dengan kemauan anda. Nilai defaultnya adalah jpeg 50. Demikian juga dengan sound, anda dapat mengatur semuanya sekaligus dengan kompresi default atau per item. Misalnya anda ingin satu item sound tetap kedengaran jerneh dan yang lainnya anda kompres dengan ketat untuk mengurangi waktu loading, anda rubah melalui Library ini...asyik kan :P

[ernest]

SCENES - EPISODE

Bila movie anda adalah sebuah film, maka scene adalah episodenya, dengan scene kita bisa mengatur susunan adegan dalam movie kita. Dengan demikian akan lebih terorganisir terutama bila melibatkan berbagai menu dan lompatan isi.
Scene hanya ada untuk memudahkan anda dalam mengorganisir, tidak berbeda dengan yang lainnya, kita bisa cut, paste, dan lain-lain.


Dalam Flash 4 kita dengan mudah dapat pindah dari satu scene ke scne lainnya dengan tombol yang terlihat pada gambar. Klik kemudian pilih scene yang anda inginkan.


Untuk membuat sebuah scene baru, gunakan insert/scene/ kemudian masukkan parameter scene gara memudahkan anda mengenalinya.

tip: Biasakan menggunakan scene untuk setiap perbedaan isi pada movie anda, misalkan untuk pembukaan, isi, dan penutup.

tip: Scene dapat diduplikasi sehingga bila anda menginginkan beberapa peristiwa yang sama urutannya, namun berbeda beberapa propertinya...buat dahulu base-nya kemudian duplicate, dan terapkan perubahan yang anda inginkan.

[ernest]

MOVIE CLIPS

Adalah salah satu jenis simbol, namun sering terjadi kekeliruan dengan movie. Movie adalah keseluruhan file shockwave anda, sementara movie clips merupakan bagian yang lebih kecil lagi, yakni sejenis simbol yang boleh dikatakan merupakan sejenis movie di dalam movie. Salah satu bentuk simbol yang lain adalah graphics, juga memiliki time line seperti movie clips bedanya bila movie clips akan terus bermain meski frame telah berakhir atau anda menggunakan actions stop, sementara graphics akan berhenti.


TWEENING - informasi umum mengenai animasi


Tweening, sangat mempermudah kerja kita untuk melakukan animasi, karena flash dapat meprediksi (dengan parameter yang kita masukan) bagaimana isi dari frame di antara kedua keyframe yang kita tentukan. Secara garis besar terdapat dua jenis, yakni motion, dan shape.


Gambar di sebelah atas, merupakan hasil dari animasi tweening di atas. Sesuai dengan urutan dari atas ke bawah, jadi yang paling bawah adalah motion tween, dan yang paling atas adalah shape tween.


Shape Tween , dengan toolbar yang telah disediakan kita dapat membuat sebuah box dengan warna apapun, dan kita letakkan pada keyframe 1, kemudian pada timeline 8 kita insert keyframe (F6), lalu kita buat sebuah lingkaran dengan posisi di tengah movie. Kemudian, kita double klik antara keyframe 1 dan 8, maka akan muncul dialog menu, kita pilih tweening.
Kemudian pilih shape, maka jadilah animasi anda yang pertama, sebuah box yang perlahan berubah menjadi lingkaran berwarna biru, animasi berikutnya pada frame 8 hingga 15, sama. Anda insert keyframe pada timeline 15, buat bentukan segitiga, isi dengan warna merah kemudian klik kanan diantara frame bar, pilih frame properties dan pilih shape.

Shape Tween, atau tweening apapun sebenarnya sama dengan rangkaian keyframe seperti terlihat pada animasi baris kedua. Perhatikan frame bar, dari frame 1 hingga 15 terdapat jajaran keyframe yang setiap keyframenya menentukan bagaimana posisi obyek pada saat itu. Cara ini hanya efektif bila antara keyframe satu dengan yang lainnya berisi obyek yang tidak berhubungan, namun bila kita ingin menciptakan efek sekuensial, maka gunakan tween, lebih cepat dan ukuran file lebih kecil.


Motion Tween ease out, untuk proses motion tween, perhatikan animasi baris ketiga dan keempat. Pembuatannya sama dengan shape tween, namun obyeknya telah kita rubah menjadi simbol (pilih obyek, tekan F8). Pada keyframe 1 posisi obyek di sebelah kiri dan key frame 15 saya geser ke kanan. Lalu diantara frame bar, kita double klik, pilih frame properties, pilih tweening, lalu pilih motion. Untuk animasi ini kita atur bahwa obyek easing out, perhatikan, pertama-tama dia melaju cepat (lebih cepat dari animasi bawahnya bukan ?), kemudian menjelang akhir obyek melambat dan berhenti di waktu yang sama dengan animasi baris empat. Lalu kita bisa tentukan obyek berotasi atau tidak, pada animasi ini, kita set rotation clockwise, lalu isi 1 pada times.

Motion Tween , animasi baris empat adalah motion tween biasa, dengan tanpa easing in atau out, dan tanpa rotasi. Perhatikan bahwa obyek bergerak konstan dari kiri ke kanan. Bila obyek pada keyframe 15 membesar ukurannya kita dapat menerapkan tween scaling (check pada tween scaling) sehingga dengan motion tween kita dapat melakukan sekuens perubahan posisi, skala dan ukuran, serta warna. Shape tween relatif lebih kecil efeknya pada ukuran file dan penggunaan CPU, sehingga lebih sering digunakan. Efek yang dapat anda timbulkan sangat beraneka ragam oleh karenanya kuasai proses tweening ini dengan baik.

[chessboard]

wow...
liat tutorial kk Alex
serasa baca buku flash nih....

Btw, itu ketik sendiri atau ada nara sumbernya...?

[ernest]

narasumbernya bbrp buku flash yg g baca nanti g sebutin begitu tutorialnya beres, ini lg males ngetik T_T bsk pagi aja lanjut lg

[chessboard]

kalo bagi temen-temen yang ngerasa tutorial nya kurang ngerti/ kurang lengkap.. tanya aja langsung ....

atau kalau mau, boleh nanya di www.babaflash.com/forum
Babaflash merupakan komunitas flash indonesia...

Gue juga aktif di sono sih....... hhehehe.....

[BiniX]

narasumbernya bbrp buku flash yg g baca nanti g sebutin begitu tutorialnya beres, ini lg males ngetik T_T bsk pagi aja lanjut lg

Kalo di liat dari SS nya ini flash versi JADUL alias Jaman Dulu dan tutorial nya sama persis kaya di web ini http://lecturer.eepis-its.edu/~dhoto/pelatihan/flash/

BTW gpp lah, yg penting maju selalu flash indonesia

[ryokons1]

Ya meski jadul juga gpp...beda tampilan doang...
kalo sekedar animasi sederhana kan ga terasa perbedaannya ^_^
Lagipula ditulis for Beginner, jadi perbedaan versi actionscriptnya masih ngga butuh2 banget...

[chessboard]

kalau sebatas action script 1.0 masih OK lah untuk newbie ..

tapi kalau dah action script 2, itu sudah rada berat...

Apalagi Action script 3 yang sudah mulai di bicarakan beberapa komunitas flash di luar negri... ini cocok buat game developer..

[ernest]

Kalo di liat dari SS nya ini flash versi JADUL alias Jaman Dulu dan tutorial nya sama persis kaya di web ini http://lecturer.eepis-its.edu/~dhoto/pelatihan/flash/

BTW gpp lah, yg penting maju selalu flash indonesia

tuh web ngambil dr bbrp buku flash jg ::angel_not:: hauhauhahua, maju trus d flash indo :: tar g ajakin si hadi kesini deh chess buat ngajar2 ::

[chessboard]

OOT :

si hadi ? lu ajakin ke sini?
hehhehee... dia indogamers juga?
dia spesialisnya bukan di flash... di fotografi dan di graphic desain lex..
(bukan multimedia)

hhehehee... nanya di sini dan di babaflash sama aja...
coz gue juga moderator di babaflash. so, ga usah jauh jauh ke sono.
disini juga bisa nanya-nanya..

[winnie]

wah keren nih thread...ikutin terus aaaah