Modul Macro Media Flash Pro 8

AREA KERJA MACROMEDIA FLASH PRO 8 Pertama kali kita akan melihat secara sekilas area kerja Macromedia Flash Pro 8 yang akan digunakan dalam pembuatan animasi. Semakin Anda dapat mengenal dan menghafal bagian-bagian dalam area kerja Macromedia Flash Pro 8, maka Anda akan semakin mudah dalam mempraktikkan tutorial ini. Jika Anda baru belajar pertama kali, maka Anda dianjurkan untuk mengetahui komponen-komponen utama dalam area kerja Macromedia Flash Pro 8. Beberapa penjelasan mengenai komponen-komponen dalam area kerja akan dibahas pada tutorial atau langkah-langkah pada tutorial yang terkait.

Bagian-bagian penting dalam area atas diantaranya: Menu, Toolbox, Stage dan Panel.

kerja di Timeline,

1.1. Menu Menu pada Macromedia Flash Pro 8 terdiri dari: File, Edit, View, Insert, Modify, Text Commands, Control, Window dan Help. Anda dapat melihat submenu yang terdapat pada masing-masing menu dengan mengeklik satu kali pada menu yang ingin Anda pilih.

Mengenal Area Kerja Macromedia Flash Pro 8 Berikut ini tampilan file atau dokumen baru dari area kerja Macromedia Flash Pro 8:

1.2. Toolbox Dalam toolbox terdapat komponenkomponen penting diantaranya: Tools, View, Colors dan Options. Toolbox memiliki peran untuk memanipulasi atau memodifikasi objek dalam stage.

Berikut komponen-komponen dalam toolbox beserta fungsi atau kegunaannya:

No 1 2 3 4 5 6

1

2

3

4

5

6

7

8

9

10

11

12

Nama Tool Selection Tool Subselection Tool Free Free Transform Tool Gradient Transform Tool Line Tool Lasso Tool

7

Pen Tool

8

Text Tool

[email protected] [email protected]

13

14

15

16

17

18

19 20

Fungsi Memilih dan memindah objek Mengubah bentuk obyek dengan edit point Mengubah atau memutar obyek sesuai keinginan Merubah warna gradasi Membuat garis Menyeleksi bagian obyek yang akan diedit Membuat obyek secara bebas melalui titik-titik sebagai penghubung Membuat teks (huruf, kata atau kalimat)

Shortcut V A Q F N L P T

Tutorial Macromedia Flash

9 10 11

Oval Tool Rectangle Tool Pencil Tool

12

Brush Tool

13 14 15 16 17 18 19 20

Ink Bottle Tool Paint Bucket Tool Eyedropped Tool Eraser Tool Hand Tool Zoom Tool Stroke Tool Fill Tool

Membuat obyek ellips atau lingkaran Membuat obyek segi empat atau segi banyak Menggambar obyek secara bebas Membuat obyek secara bebas dengan ukuran ketebalan dan bentuk yang sudah disediakan. Memberi warna garis tepi (outline) Memberi warna obyek secara bebas Mengambil Contoh warna Menghapus obyek Menggeser Stage Memperbesar atau memperkecil tampilan Memberi warna pada garis tepi Memberi warna pada obyek

1.3. Timeline Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau mengontrol jalannya animasi. Timeline terdiri dari beberapa layer. Layer digunakan untuk menempatkan satu atau beberapa objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari frame-frame yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam layer, maka semakin lama animasi akan berjalan.

1.4. Stage Stage disebut juga layar atau panggung. Stage digunakan untuk memainkan objek-objek yang akan diberi animasi. Dalam stage kita dapat membuat gambar, teks, memberi warna dan lain-lain.

O R Y B S K I E H M atau Z -

1.5.2 Panel Actions Panel Actions digunakan untuk menuliskan script atau bahasa pemrograman flash (ActionScript). Anda dapat mengetikkan secara langsung pada layar Actions atau menggunakan bantuan yang disediakan oleh Macromedia Flash Pro 8. Untuk memunculkan atau menyembunyikan panel ini dapat digunakan shortcut F9. F9.

1.5.3 Panel Library Library merupakan digunakan untuk menyimpan berupa graphic atau gambar, tombol, movie dan suara baik langsung pada stage ataupun impor dari luar stage. Untuk atau menyembunyikan panel digunakan shortcut Ctrl+L. Ctrl+L.

panel yang objek-objek button atau yang dibuat hasil proses memunculkan ini dapat

1.5. Panel Beberapa panel penting dalam Macromedia

Flash Pro 8 diantaranya panel: properties & Filters & Parameters, Actions, Library, Color dan Align & Info & Transform. 1.5.1 Panel Properties & Filters & Parameters Panel ini terdapat di bawah stage. Untuk mengeluarkan atau menyembunyikan panel ini dapat digunakan shortcut Ctrl+F3. Ctrl+F3. Panel Properties & Filters & Parameters digunakan untuk mengatur ukuran background, warna background, kecepatan animasi dan lainlain.


1.5.4 Panel Color Panel Color merupakan panel yang digunakan untuk memilih warna yang digunakan dalam pembuatan objek-objek pada stage. Ada dua jenis subpanel, yaitu: Color Mixer dan Swatches. Shortcut untuk Color Mixer adalah Shift+F9 dan shortcut untuk Color Swatches adalah Ctrl+F9. Ctrl+F9.


suatu objek (motion), seperti halnya definisi animasi yaitu teks/gambar yang bergerak. Langkah 1: Buat objek lingkaran menggunakan Oval Tool (C+O)

1.5.5 Panel Align & Info & Transform Untuk menampilkan panel ini Anda dapat menekan Ctrl+K pada keyboard. Panel ini digunakan untuk mengatur posisi objek, ingin diletakkan pada tengah stage, sebelah kiri atau kanan dan lain-lain. Dengan panel ini Anda juga dapat memutar objek dengan Transform.

Beberapa hal yang perlu diketahui : Frame : kotak-kotak dalam time line yang menentukan lama / tidaknya tampilan obyek dalam layer : bentuk frame yang yang belum terisi obyek obyek : bentuk frame yang di dalamnya telah berisi obyek : bentuk frame yang merupakan perpanjangan sebuah obyek tampil dalam sebuah layer Layer : lapisan-lapisan yang dibuat dalam sebuah stage F6 : tombol yang digunakan untuk menyisipkan keyframe F5 : tombol yang digunakan untuk menyisipkan frame F8 : tombol untuk mengkonvert atau merubah obyek menjadi tombol (button), graphic atau movie clip. F9 : menampilkan action untuk menulis script

ANIMASI DASAR: MOTION TWEEN, SHAPE DAN GUIDE Berikut akan pembuatan animasi Macromedia Flash 8.

dijelaskan teknik-teknik dasar menggunakan

1. Animasi Dasar Motion Tween Animasi ini merupakan animasi yang paling dasar karena animasi ini pada prinsipnya adalah pergerakan [email protected] [email protected]

Langkah 2: Seleksi objek menggunakan Selection Tool (C+V) atau Ctrl + A, A , untuk menyeleksi objek lingkaran. Setelah itu, klik kanan _ Convert to symbol _ pilih Movie Clip

Langkah 3: Pilih frame 20 pada Layer 1 di Timeline, setelah itu klik kanan dan Insert Keyframe. Geser objek ke arah kanan _ kembalikan objek ke frame 1.

Langkah 4: Pada Properties di bawah stage pilih Tween Motion. Jika langkah benar, maka di bagian layer 1 akan muncul panah dari frame 1 ke frame 20. Untuk menjalankan animasi: Enter atau Ctrl + Enter untuk melakukan Test Movie.

Untuk menghentikan test movie_ Ctrl Ctrl + W CATATAN: Animasi berhasil jika dalam layer terdapat tanda panah (). Jika belum berhasil (garis dalam layer berupa garis putus-putus), ulangi langkah Anda sampai berhasil ! Apabila ada beberapa obyek yang akan dikenai animasi, buatlah setiap obyek dalam layer yang berbeda. Menambah layer dilakukan dengan cara klik kanan layer kemudian klik insert layer. Atau klik pada time line. Merubah nama layer dilakukan dengan cara : Doble click layer, ketik nama layer baru


Sebagai latihan dengan jenis motion tween Anda dapat membuat: Animasi bola pantul Animasi tersebut berupa bola yang berpantul dari suatu titik ke titik yang lain, misalnya dari titk A ke B, dari B ke C dan seterusnya. Untuk pengembangan Anda juga dapat menambahkan background/gambar latar belakang, caranya dengan menambahkan layer baru yang dilengkapi dengan keyframe sepanjang objek tersebut berjalan.

A

Langkah 3: Pindahkan objek kotak dari frame 1 ke frame 40 setelah itu hapus objek dengan Delete. Langkah 4: Masih di frame 40, buat teks KOTAK, lalu tekan Ctrl + B (2x), agar teks terkonversi menjadi objek. Langkah 5: Kembali ke frame 1, pilih tween-shape, tekan Enter. Enter.

C B Ilustrasi Bola Pantul

D

2. Animasi Motion Shape Animasi bentuk/shape dibedakan menjadi 2 bagian yaitu: a. Animasi bentuk dengan objek statis/diam di tempat b. Animasi bentuk dengan objek dinamis/bergerak (ada motion-nya) Yang perlu diperhatikan ketika Anda akan membuat animasi bentuk baik yang statis ataupun dinamis adalah bahwa objek tidak perlu di Convert to Symbol. a. Animasi Bentuk Statis Langkah-langkahnya: Langkah 1: Buat objek lingkaran dengan Oval Tool. Langkah 2: Klik Frame 30, kemudian Insert Keyframe. Langkah 3: Ubah bentuk lingkaran menjadi bentuk bukan lingkaran, menggunakan subselection tool. Langkah 4: Klik frame 1, pilih tween-shape di bawah stage. Langkah 5: Tekan Enter untuk Play atau Ctrl + Enter untuk Test Movie.

Perubahan objek kotak menjadi teks “KOTAK” Untuk pengembangan animasi berikut:

Anda

dapat

membuat

i. Animasi Tumbukan Fisika Ilustrasi: Objek mobil bergerak dari titik A ke titik B. Objek truk bergerak dari C ke B. Titik B merupakan titik tengah A dan C. Di titik B kedua objek bertemu dan terjadi tumbukan. Namun karena objek truk lebih besar dan kuat maka objek truk hanya bergerak beberapa meter saja, sedangkan objek mobil terpelanting jauh. Bagaimanakan animasinya ? Berkhayalah ..... ii. Animasi Bola Sodok Ilustrasi: Buatlah background area billiard dengan satu stick dan 2 bola, misalnya bola A dan B. Setelah itu stick akan menyodok bola A dan mengenai bola B, bola A dan bola B sama-sama terpental hanya karena menyodoknya tidak terlalu keras, maka bola A terpental lebih pendek daripada bola B. Bagaimanakah animasinya ? Animasi ini dapat dikembangkan dengan jumlah bola lebih banyak, area billiard ada lubangnya dan bola yang dsodok berturutan dan lebih banyak.

3. Animasi Gerak Putar dengan Motion Path Cara ini merupakan pengembangan dari cara sebelumnya dimana obyek berubah berada di satu titik putar. Perubahan bentuk objek dari Frame 1 ke Frame 30 b. Animasi Bentuk Dinamis Jenis animasi ini merupakan pengembangan dari animasi bentuk statis. Pada jenis animasi ini akan diberikan contoh objek kotak berubah menjadi teks kotak. Langkah-langkahnya adalah: Langkah 1: Buat bentuk objek bentuk kotak di frame 1 menggunakan rectangle tool.

Contoh : Animasi gerakan sayap sebuah kelelawar Langkah-langkahnya : Langkah 1 : Buat obyek shape dengan menggunakan pen tool pada frame 1, dengan cara klik setiap titik sudut obyek yang akan dibuat.

Langkah 2: Klik frame 40, insert keyframe. [email protected] [email protected]


Langkah 2 : Rubah obyek tersebut dengan cara klik selection tool letakkan kursur pada sisi-sisi obyek sampai kursor berubah bentuk menjadi panah dengan garis lengkung dibawahnya Pada saat tersebut drag mouse dan rubah obyek sesuai keinginan. Contohnya seperti di bawah ini.

Langkah 3 : Klik free transform sehingga muncul titik edit. Pindahkan titik putar ke samping.

Tes animasi dengan Ctrl + Enter. Tambahkan layer baru untuk badan, kepala atau obyek yang lain. 4. Animasi Motion Path Animasi ini merupakan dasar dari animasi game balapan mobil atau motor, yaitu bahwa mobil/motor bergerak mengikuti jalur/track yang sudah ditentukan. Hati-hati dalam membuat animasi ini, karena langkah tidak sesuai prosedur, maka animasi tidak akan berhasil. Langkah-langkah: Langkah 1: Buat objek persegi menggunakan rectangle tool dan convert object to symbol (F8), pilih Movie Clip Langkah 2: Klik kanan pada layer 1, pilih Add Motion Guide

Langkah 4 : Konvert obyek menjadi movie clip dengan cara klik kanan obyek pilih Convert to Symbol kemudian pilih Movie Clip berilah nama misalnya sayap. sayap. Atau dengan menekan F8. F8. Langkah 5 : Rubah layer menjadi sayap kiri. Langkah 6 : Putar obyek ke atas dengan cara drag pada sudut titik edit saat panah berbentuk panah melingkar.

Langkah 3: Buat jalur bebas menggunakan Pencil Tool di layer guide Langkah 4: Gunakan Selection Tool, klik frame 30, dan insert keyframe di layer guide Langkah 5: Pilih kembali layer 1, frame 1, pindahkan objek ke pangkal jalur, posisikan objek dengan tepat, sehingga terlihat lingkaran kecil di tengah-tengah objek persegi

Posisi layer dan Guide Layer Langkah 7 : Klik frame 5 (sesuai keinginan) tekan F6. F6. Rubah putaran sayap sedikit ke bawah. Langkah 8 : Antara frame 1 dan frame 5 klik kanan kemudian pilih Create Motion Tween. Lakukan langkah 7 dan 8 pada frame 10, 15, 20 dsb. Atur putaran agar gerakan terlihat seperti sayap yang naik turun. Langkah 9 : Tambahkan layer dengan cara klik kanan layer1 pilih Insert Layer. Rubah nama layer dengan sayap kanan. Langkah 10 : Aktifkan frame 1 layer sayap kiri klik Edit, klik Edit, Copy. Pada frame 1 layer sayap kanan klik Edit, klik Edit, Paste in Place (Ctrl+Shift+V). (Ctrl+Shift+V). Langkah 11 : Cerminkan obyek secara horisontal dengan cara : Modify, Transform, Flip Horisontal. Atur letaknya bersebelahan dengan sayap kiri. Lakukan langkah 4 sampai 8. Usahakan putaran sayap kanan simetris dengan sayap kiri. [email protected] [email protected]

Posisi Objek setelah diletakkan di pangkal jalur Langkah 6: Klik frame 30 pada layer 1, lalu Insert Keyframe Langkah 7: Pindahkan objek dari pangkal ke ujung sesuai jalur yang dibuat, hati-hati pada langkah ini ! Langkah 8: Klik kembali frame 1 pada layer 1 kemudian pilih Tween Motion Langkah 9: Tekan Enter untuk Play animasi yang baru saja Anda buat, jika belum berhasil ulangi langkahlangkah tersebut. Tutorial Macromedia Flash

* Animasi Motion dengan dengan Orient to to Path Animasi ini merupakan dasar dari animasi game balapan mobil atau motor, yaitu bahwa mobil/motor bergerak mengikuti jalur/track yang sudah ditentukan dimana gerakan mobil / obyek bergerak sejajar dengan lintasan. Hati-hati dalam membuat animasi ini, karena langkah tidak sesuai prosedur, maka animasi tidak akan berhasil. Langkah-langkah: Langkah 1: Buat objek pesawat dan convert object to symbol (F8), pilih Movie Clip Langkah 2: Klik kanan pada layer 1, pilih Add Motion Guide Langkah 3: Buat jalur bebas menggunakan Pencil Tool di layer guide Langkah 4: Gunakan Selection Tool, klik frame 30, dan insert keyframe di layer guide Langkah 5: Pilih kembali layer 1, frame 1, pindahkan pesawat ke pangkal jalur, posisikan pesawat dengan tepat, sehingga terlihat lingkaran kecil di tengah-tengah objek persegi, putar, sejajarkan dengan lintasan.

Langkah 9: Tekan Enter untuk Play animasi yang baru saja Anda buat, jika belum berhasil ulangi langkahlangkah tersebut. Test dengan CTRL Enter. Enter. Untuk animasi 2 pesawat yan berjalan beriringan. Silahkan dicoba sendiri. * Animasi Mobil yang bergerak pada lintasan Animasi ini hampir sama dengan animasi pesawat hanya saja ada 2 obyek / roda yang berputar. Langkah-langkah: Langkah 1: Buat objek lingkaran / roda menggunakan oval tool (usahakan jangan 1 warna) dan convert object to symbol (F8), pilih Movie Clip Langkah 2: Klik kanan lingkaran, pilih Timeline Effects Transform/Transition  Transform.



Langkah 3: Pilih arah putaran pada times, isi dengan 360 pada rotate, ubah angka effect Duration untuk mengatur kecepatan putar. Klik Update Preview untuk melihat hasilnya. Klik Ok untuk mengakhirinya.

Posisi layer dan Guide Layer Langkah 4: Kopi roda dengan cara drag sambil tekan Ctrl.

Posisi Objek setelah diletakkan di pangkal jalur Langkah 6: Klik frame 30 pada layer 1, lalu Insert Keyframe Langkah 7: Pindahkan objek dari pangkal ke ujung sesuai jalur yang dibuat, hati-hati pada langkah ini ! Putar pesawat sejajarkan dengan lintasan. Langkah 8: Klik kembali frame 1 pada layer 1 kemudian pilih Tween Motion pada properties dan aktifkan Orient to path.

Langkah 5: Buat bodi mobil dan seleksi semua obyek (2 roda dan bodi mobil) Convert to Symbol (F8) menjadi Movie Clip. Langkah selanjutnya atur seperti langkah pada membuat pesawat (Langkah ke 2 – akhir). Test dengan CTRL Enter. * Membuat Animasi Masking Animasi ini merupakan animasi irisan dari 2 obyek yang saling bersinggungan. Terlihat seperti sebuah obyek yang terlihat sebagian karena disinari. Langkah-langkah: Langkah 1: Buat objek lingkaran pada Layer1. Rubah nama menjadi sinar. Langkah 2 : Tambahkan layer dengan klik kanan layer1  pilih insert layer. Pada layer ini buat sebuah text dengan text tools. Pada teks tekan Ctrl B 2x. 2x. Rubah layer dengan nama text.



Langkah 3 : Pada frame 30 (misalnya) tekan F6 pada kedua layer. Tekan F6 pada frame 15 pada layer sinar. Geser lingkaran ke sebelah kanan teks. Create Motion Tween antara Frame 1 - 15 dan frame 1530.

Langkah 3 : Buat obyek gelas pada layer Gelas1, dengan menggunakan rectangle tool. Rubah bentuk dengan menggunakan subselective tool. Pisahkan Obyek Gelas menjadi 2 bagian yaitu warna gelas1 dan gelas2. Usahakan warna dibedakan dengan warna air untuk mempermudah.

Gelas2 Langkah 4 : Klik kanan pada layer text pilih Mask . Sehingga tampilannya seperti berikut.

Gelas1

Langkah 4 : Masing-masing gelas Convert to Symbol (F8) menjadi Movie Clip beri nama Gelas1 dan Gelas2. Langkah 5 : Lakukan Edit > Cut pada Gelas2 dan Edit > Paste to Place pada Frame 1 layer Gelas2.

Test dengan cara tekan CTRL Enter. * Membuat Animasi Masking dengan obyek Gambar Untuk animasi ini prinsip sama seperti masking text di atas. Hanya saja kita perlu 3 layer. Langkah-langkah : Langkah 1 : Siapkan 3 layer dengan urutan : Gambar1, Sinar dan Gambar2. Langkah 2 : Sisipkan gambar pada Gambar1 dan Gambar2 dengan cara File > Import > Import to Stage > Pilih Gambar. Atur ukuran kedua gambar seukuran stage. Langkah 3 : Buat Obyek persegi panjang (misalnya) di sebelah kiri gambar. Langkah 4 : Lakukan seperti Langkah ke 3 – akhir animasi masking text seperti contoh di atas. * Animasi Gelas Berisi Air di Tumpahkan dengan Teknik Masking Langkah-langkah : Langkah 1 : Siapkan 2 layer dengan urutan dari bawah : Air, Gelas1 dan Gelas2.

Langkah 6 : Pastikan titik putar gelas di pojok kiri atas, letakkan posisi 2 gelas di atas air. Pastikan kedua gelas pada posisi yang sama persis sehingga kelihatan hanya 1 obyek saja.

Langkah 7 : Tekan F6 pada frame 30 (misalnya) pada ketiga layer. Langkah 8 : Pada Frame 30 Layer Gelas1 putar gelas ke atas, seperti gambar di samping. Pastikan titik putar tidak bergeser. Lakukan cara yang sama untuk Gelas2, sehingga 2 gelas ini terlihat tumpang tindih. Langkah 9 : Lakukan Create Motion Tween pada layer Gelas1 dan Gelas2. Langkah 10 : Klik kanan Layer Gelas1 > Mask. Test dengan CTRL ENTER. Tambahkah layer baru, rubah nama dengan tumpah. Pada Layer ini animasikan gerakan tumpahan air dari Gelas dan Animasi untuk air yang ditampung pada sebuah wadah. Cobalah !

Langkah 2 : Buat persegi panjang pada layer Air kira-kira separuh dari stage.



Modul Macro Media Flash Pro 8

Recommend Documents