LINGKUNGAN FLASH MX

Hubungan Toolbox, Timeline, Stage, Property, Panels seperti Panggung Drama. Toolbox (1) adalah peralatannya, Timeline (2) adalah sang sutradara, Stage (3) merupakan panggung drama, Property (4) adalah papan informasi dari objek yang ada di stage dan Panel (5) adalah si tukang rias atau panel-panel seperti pada pesawat.

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

SHAPE, STROKE, FILL & OBJEK

Shape adalah suatu bentuk yang terdiri dari garis (stroke) dan/atau warna (fill). Objek adalah kumpulan dari shape (garis dan warna).

Kalau anda lihat ada dua objek, yaitu lingkaran dan makhluk aneh di atas terdiri dari kumpulan shape (beberapa garis yang diberi warna).

PROPERTY INSPECTOR
Dengan Property Inspector, Anda bisa melihat semua informasi-informasi objek yang ada di Stage. Buat lingkaran di stage, kemudian dengan Arrow Tool , klik bagian Fill dari shape sehingga bagian fill akan terseleksi (ditandai dengan kumpulan titik-titik pada fill). Informasi: - Objek yang sedang di seleksi di stage tersebut adalah Shape - Warnanya adalah Abu-Abu. Anda juga bisa menggantinya lewat Property Inspector ini.

Sekarang klik bagian stroke dari shape lingkaran tersebut sehingga bagian stroke akan terseleksi (ditandai dengan kumpulan titik-titik pada stroke). Perhatikan icon Stroke (gambar pensil, ) dan icon Fill (gambar kaleng cat, Kalau Anda ingin mengganti warna, lihat dulu jenis shape-nya, apakah stroke atau fill. ). Jadi

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Informasi: - Objek yang sedang di seleksi di stage tersebut adalah Shape - Warnanya adalah Hitam. Anda juga bisa menggantinya lewat Property Inspector ini. - Kemudian ketebalan dan jenis strokenya bisa bermacammacam.

ARROW & SUBSELECTION TOOL

Kolaborasi antara Arrow Tool (V) dan Subselection Tool (A) untuk menggambar hati. Aktifkan Snap to Objects (Ctrl+Shift+/).

Buat objek dengan garis seperti yang terlihat pada gambar di samping.

Dengan panah hitam (Arrow Tool), lengkungkan garis seperti yang terlihat pada gambar.

Perhatikan icon lengkung dan lancip diinformasikan oleh komputer saat Anda mengarahkan kursor ke daerah tertentu.

yang

Perbaiki gambar Anda, sampai terlihat seperti bentuk hati di samping kiri ini. Sekarang kita ingin melancipkan bagian bawah hati seperti gambar di kanan. Dengan Arrow Tool, hal tersebut tidak memungkinkan. Kita harus menggunakan sub selection tool (panah putih). Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Dengan panah putih, perbaiki kembali gambar tersebut sehingga sesuai dengan tujuan yang kita inginkan, yaitu lebih melengkungkan sudut bawah hati. Perhatikan icon panah putih saat mendekati sebuah titik. Hal ini berguna untuk membuat lengkungan. Perhatikan icon panah putih saat mendekati garis. Hal ini berguna untuk menggerakkan keseluruhan objek. Perhatikan icon panah putih saat mendekati titik tangen.

Cara kerja inilah yang membedakan panah hitam dan panah putih.

Symbol adalah salah satu keunggulan dari Flash dalam hal animasi karena dapat mengurangi ukuran file dan mempermudah pekerjaan. Anda dapat membuat symbol dari awal atau merubah dari objek yang sudah ada ke dalam bentuk symbol.

MERUBAH OBJEK MENJADI SYMBOL

Anda harus membuat sesuatu objek terlebih dahulu di Stage, misalkan lingkaran. Dengan panah hitam, seleksi objek yang ingin di jadikan symbol.

menyeleksi objek

objek yang sudah terseleksi

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Pilih menu Insert > Convert to Symbol (F8) , maka akan muncul kotak dialog Convert to Symbol. Beri Nama bulatan dan pilih Behaviour Graphic.

MELIHAT SYMBOL DI LIBRARY

Semua objek yang telah dirubah menjadi symbol akan tersimpan otomatis di Library. Untuk membuka library, klik menu Window > Library (F11). Perhatikan icon dari symbol graphic Library. pada

Symbol yang ada di library ini dapat digunakan berkali-kali di stage. Anda hanya tinggal mengambil dari library dan meletakkannya di stage sebanyak apapun Anda mau. Symbol yang sudah ada di stage mempunyai nama baru, yaitu Instance . Hebatnya, biarpun di stage ada ratusan symbol yang di ambil dari library. Flash hanya menyimpan satu Master Symbol yang ada di library saja. Instance-instance yang ada di stage tidak mempengaruhi ukuran file.

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

MATER SYMBOL

INSTANCE

MEMBUAT SYMBOL BARU

Sebelumnya kita telah membuat objek yang sudah ada di stage menjadi symbol. Kini bagaimana bila ingin membuat symbol baru tanpa membuat objek terlebih dahulu ? Pilih menu Insert > New Symbol (Ctrl+F8) untuk menampilkan kotak dialog Create New Symbol. Langsung saja klik tombol OK.

Anda akan menemukan stage kosong dengan bulatan kosong pada timeline, berarti daerah ini belum ada penghuninya, oleh karena itu bisa dimulai gambar apa saja.

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Lingkungan editor Symbol 1, bukan lagi di Scene 1 (Panggung yang bisa dilihat penonton). Di sini Anda bisa mulai menggambar lingkaran sebagai contoh.

Setelah di gambar, maka bulatan kosong tadi berubah menjadi hitam pada timeline, yang berarti daerah ini sudah diisi oleh penghuni. Kini dengan panah hitam, klik tulisan Scene 1 di samping tulisan Symbol 1 untuk kembali ke stage Scene1.

stage Symbol 1

stage Scene1

Anda akan melihat stage Scene1 tidak ada isinya sama sekali (belum ada penghuninya yang ditandai dengan bulatan kosong. Symbol 1 yang kita telah buat tadi masih tersimpan dalam library dan harus Anda tarik ke Stage Scene 1 agar bisa dilihat oleh penonton.

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

MERUBAH MASTER SYMBOL

Bagaimana bila kita ingin mengedit master symbol, misalkan bentuknya kita ingin rubah tidak lingkaran, melainkan kotak. Untuk merubah master symbol, Anda klik dua kali pada gambar symbol yang ingin di edit untuk masuk ke dalam stage Symbol 1. Setelah itu baru Anda bisa merubahnya. Masuk ke stage Symbol 1.

KLIK DUA KALI

Setelah masuk ke dalam stage Symbol 1, gantilah gambar lingkaran dengan kotak. Anda bisa menghapus terlebih dahulu gambar lingkaran itu baru kemudian menggambar kotak seperti yang terlihat pada gambar berikut ini.

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Klik tuilsan Scene 1 untuk kembali ke stage Scene 1, Anda akan melihat perubahan secara otomatis di stage Scene 1.

Merubah master symbol yang ada di library, berarti merubah seluruh instance yang ada di stage Scene 1. Ini adalah sifat dari symbol !!!

MERUBAH INSTANCE
Seperti yang telah kita ketahui sebelumnya, instance adalah symbol yang ada di stage. Setiap bisa instance mempunyai posisi, rotasi, skala dan warna yang berbeda. Tetapi Anda tidak bisa merubah bentuk instance !!! Kalau sudah kotak, yah kotak saja. Kalau mau berubah bentuk, Anda harus merubah master symbolnya, yang berarti merubah seluruh bentuk instance yang ada di stage. Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Dengan alat perubah bebas (Free Transform Tool (Q)) , Anda bisa merubah skala dan memutar instance yang ada di stage satu per satu seperti gambar di bawah ini.

Klik salah satu instance di stage untuk melihat informasinya di Property Inspector.

Informasi Instance : Jenis Graphic dari Symbol 1

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Dengan pilihan Color untuk mengatur terang gelap instance (Brightness), Warna (Tint), Transparansi (Alpha), dan pilihan lain (Advanced). Maka Anda akan membuat instance-instance yang ada di stage lebih bervariasi lagi seperti di gambar di samping.

Animasi mempunyai ukuran FPS (Frame per Second). Untuk layar bioskop yang sering kita tonton mempunyai ukuran 24 FPS, artinya mata kita melihat 24 gambar (frame) dalam setiap detiknya. Bayangkan bila kita menonton selama satu jam, berapa banyak gambar yang telah ditembakkan ke mata kita. Tetapi animasi Flash mempunyai ukuran 12 FPS. Oleh karena itu sebelum Anda membuat animasi, tentukan dulu berapa lama animasi tersebut akan berjalan.

ilustrasi di film bioskop

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

FRAME 1

FRAME 2

FRAME 3

FRAME 4

ilustrasi roll film Playhead Kumpulan Frame Layer

Stage

implementasinya di flash

INSERT BLANK KEYFRAME

Saat Anda membuat sesuatu yang baru, kita melihat timeline dengan satu blank keyframe yang diwakili dengan gambar bulat kecil yang berwarna putih. Artinya Stage dalam frame tersebut tidak berpenghuni. Atau arti lain dari blank keyframe adalah seperti Anda mempersiapkan kertas yang kosong. Pastikan terdapat simbol blank keyframe di timeline atau Anda tidak bisa menggambar apapun di Stage. Blank Keyframe

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Sekarang coba gambarkan kotak dengan rectangle tool di Stage. Keyframe

Artinya setelah titik bulat kosong tersebut menjadi berisi (titik hitam), yang menandakan bahwa stage telah terisi sesuatu.

Kemudian kita perlu kertas baru lagi (blank keyframe) untuk menggambar sesuatu yang baru. Klik kanan frame k-2 dan pilih Insert Blank Keyframe.

sebelum insert blank keyframe

setelah insert blank keyframe

Kembali stage dalam keadaan kosong. Dan gambarkan objek lingkaran di frame ke-2 ini. Setelah itu Anda akan melihat blank keyframe tadi menjadi keyframe yang berisi (titik hitam).

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Buat gambar segitiga di Frame ke-3 dengan cara yang sama. Kini Anda mempunyai tiga frame yang masing-masing bergambar kotak, bulat dan segitiga. Pilh menu Control > Play (Enter) untuk melihat bagaimana animasi tersebut berjalan. Bila ingin melihat animasi tersebut secara terus menerus dijalankan pilih menu Control > Loop Playback. Kemudian kembali tekan Enter. Kini Anda akan melihat gerakan animasi tersebut di stage. Stage seperti layar bioskop dan timeline seperti alat untuk memproyeksi gambar atau frame secara bergantian ke stage.

INSERT KEYFRAME
Kalau insert blank keyframe adalah membuat frame kosong di frame selanjutnya. Kalau insert keyframe justru menduplikasi frame sebelumnya di frame selanjutnya. Ini seperti memfotokopi kertas.

MOTION TWEENING
Teknik animasi motion tweening adalah teknik animasi di mana Anda hanya menentukan beberapa keyframe dan Flash yang membuat animasi di antara (tween) keyframe tersebut. Syarat : Objek harus berupa Symbol dan hanya satu (1) symbol dalam satu layer. Minimal harus mempunyai 2 keyframe agar terjadinya gerak dalam sebuah animasi. Yang bisa di animasi adalah property dari symbol, yaitu Color, Position, Rotation, Scale

MEMBUAT BOLA MEMANTUL

Kita melakukan persiapan dulu dengan dua objek bola dan lantai yang masing-masing terpisah oleh layer. Bola berada di atas lantai. Bola sudah berupa symbol , jadi syarat pertama sudah terpenuhi. Tujuannya adalah membuat bola tersebut memantul ke atas dan ke bawah. Pertama -tama kita harus menentukan dulu berapa panjang animasi yang akan dibuat. Untuk bola ke atas, kita tentukan saja 5 frame dan bola ke bawah ditentukan juga 5 frame. Jadi total frame keseluruhan adalah 10 frame. Mari kita mulai

Kita akan membuat bola tersebut bergerak ke atas sebanyak 5 frame. Insert keyframe pada frame ke-5 untuk menduplikasi objek bola sehingga kita hanya tinggal merubah posisinya. Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Sekarang kita telah memiliki 2 keyframe pada pada layer bola di timeline (ditandai dengan dua titik hitam), sehingga syarat kedua telah terpenuhi. Tetapi ada sedikit keanehan, di frame ke-5 objek lantai hilang, sedangkan di frame ke-1 objek lantai muncul kembali. Oleh karena itu frame lantai harus sama panjang dengan frame bola sehingga kemanapun gambar bola muncul, gambar lantai juga tetap ada. Pada frame ke-5 di layer lantai, klik Insert Frame sehingga panjangnya sama dengan frame dari bola. Pilihan Insert Frame ini tidak akan membuat sebuah keyframe (titik hitam), tetapi hanya memperpanjang frame saja. Oleh karena lantai tidak bergerak, jadi frame lantai sudah cukup mempunyai satu keyframe.

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Sekarang pada frame ke-5, geser gambar bola yang ada di stage ke atas seperti yang terlihat pada gambar di samping. Bola sudah dipindahkan ke atas. Anda hanya bisa merubah gambar bola yang ada di stage pada dua key frame itu saja. Frame yang tidak memiliki titik hitam tidak disarankan untuk diganggu gugat karena hal tersebut akan mengganggu tujuan kita semula. Setelah Anda menentukan posisi gambar dari keyframe-1 dan keyframe-2, bagaimana dengan frame sisanya ? Fram e-1 = Keyframe-1 Frame 2 = Frame 3 = Frame 4 = Frame 5 = Keyframe-2 Flash harus mengisi animasi pada frame 2,3 dan 4 yang diapit oleh dua (2) keyframe tersebut. Klik frame di antara dua keyframe tersebut dan pilih Tween: Motion pada Properties Inspector yang berada di bawah.

Anda akan melihat tanda panah dengan latar belakang warna biru yang menandai adanya motion tweening. Flash telah membuatkan animasi sisanya untuk Anda. Coba Jalankan animasi tersebut. Setelah menaikkan bola tersebut, kita harus menurunkannya kembali ke lantai sehingga seolaholah bola tersebut memantul. Sebelumnya kita telah menentukan panjang frame adalah 10, jadi kita akan membuat keyframe ke-3 yang sama persis dengan keyframe ke-1. Anda bisa mengcopy keyframe ke-1 tersebut pada keyframe ke-3. Caranya : Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

1. 2. 3. 4.

Klik kanan pada frame -1 (keyframe 1) Pilih Copy Frames Klik kanan pada frame -10 (keyframe 3) Pilih Paste Frames.

Untuk diperhatikan, perintah Copy tidak sama dengan Copy Frames. Perintah Copy hanya berlaku pada objek yang ada di stage. Sedangkan perintah Copy Frames hanya berlaku untuk menduplikasi frame. Sekarang muncul tiga keyframe pada frame bola, berikan motion tweening antara keyframe -2 dan keyframe -3. Kemudian panjangkan frame lantai sehingga sama dengan panjang frame bola. Baru setelah itu kembali jalankan animasinya.

MOVIE CLIP
Sebelumnya kita telah mengenal bahwa symbol mempunyai tiga (3) sifat, yaitu graphic, movie clip dan button. Kita sudah mempelajari symbol graphic yang mempunyai sifat statis atau diam. Kini kita akan mengenal movie clip yang mempunyai sifat bergerak.

symbol graphic bola

Buat symbol baru dengan memilih menu Insert > New Symbol F8 , dan beri nama bola_bergerak dengan sifat movie clip.

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Seperti biasa, Anda akan menemukan halaman kosong setiap kali m embuat symbol baru. Anda kini berada pada stage movie clip bola bergerak. Kemudian tarik symbol graphic bola ke dalam stage ini. Movie clip mempunyai gambar simbol berbeda dengan symbol graphic kalau Anda perhatikan di library. Di stage ini, kita akan membuat bola ini berputar.

Pertama-tama tentukan dulu berapa panjang frame animasi ini, misalkan 15 frame. Dan kita masih akan menggunakan teknik animasi motion tweening. Syarat pertama sudah terpenuhi bahwa gambar bola sudah berupa symbol. Setelah itu syarat kedua, minimal animasi harus mempunyai dua (2) keyframe, oleh karena itu Insert Keyframe di frame ke-15. Klik di antara dua keyframe tersebut, pilih animasi Motion di Properties dan klik Rotate : CW, 1 times. (Lihat tanda bulatan di samping). Ini berarti bola akan berputar sesuai arah jarum jam (CW) sebanyak 1 kali. Ini adalah syarat ketiga (Rotation).

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net

Setelah itu balik ke Scene 1 dan kita akan menemukan gambar bola, tetapi dengan sifat graphic. Anda bisa mengambil movie clip bola bergerak dan meletakkannya di stage sebanyak apapun. Kemudian Coba jalankan. Perhatikan ada bola yang bergerak dan ada yang tidak. Inilah perbedaan antara symbol dengan sifat graphic dan movie clip. Untuk diingat kembali bahwa Anda harus tahu dari mana symbol tersebut berasal sehingga sewaktu-waktu kita ingin merubah bentuknya akan tahu tempat yang benar. Dalam kasus ini, symbol movie clip bola bergerak berasal dari symbol graphic bola. Oleh karena itu bila Anda ingin merubah bentuk bolanya, Anda harus masuk ke dalam stage symbol graphic bola. Hal ini berguna mengetahui dari mana symbol tersebut berasal atau terbentuk bila Animasi tersebut sudah melibatkan begitu banyak symbol dalam symbol dalam symbol dalam symbol kedalamannya bisa tidak terbatas !

Address: Tanjung Duren Utara III A no. 328, Jakarta 11470, Indonesia Phone: 5682713, info@babastudio.com, http://training.babastudio.net