BAB I PENDAHULUAN 1.

1 Mengenal Komponen Interface Flash 8 Sebelum memulai membuat animasi pada Macromedia Flash, sebaiknya Anda mengenal terlebih dahulu area Flash dan istilah-istilah di dalamnya, karena hal itu nantinya akan sangat membantu dalam bekerja. Lihat gambar 1.1. Color Toolbox Menu Bar Timeline Panel library

Properties Gambar 1.1 Interface Macromedia Flash Interface Macromedia Flash 8 terdiri dari beberapa bagian, antara lain : Menu Bar

Menu bar merupakan bagian menu yang berisi kumpulan perintah yang digunakan pada Macromedia Flash 8. Menu bar terdiri dari beberapa submenu yang dilengkapi dengan shortcut (jalan pintas) menggunakan kombinasi tombol keyboard.

Gambar 1.2 Menu Bar

Toolbar

Toolbar merupakan baris menu yang ditAndai dengan berbagai ikon. Toolbar merupakan jalan pintas untuk menjalankan menu.

Gambar 1.3 Toolbar

Stage

Merupakan bagian dari Macromedia Flash 8 yang digunakan untuk membuat dan meletakkan objek. Stage

Gambar. 1.4 Stage Timeline

Timeline berisi berbagai frame yang berfungsi mengontrol objek yang dianimasikan. Selain itu, timeline juga dapat digunakan untuk menentukan kapan suatu objek ditampilkan. Timeline terbagi menjadi 3 bagian, antara lain :

Layer

Playhead

Frame

Gambar 1.5 Timeline Layer Layer merupakan susunan atau lapisan yang terdiri dari kumpulan objek atau komponen gambar, teks, atau animasi. Urutan posisi layer akan mempengaruhi urutan tampilnya objek yang dianimasikan.

Frame Merupakan bagian dari Macromedia Flash 8 yang terdiri dari berbagai segmen yang akan dijalankan secara bergantian dari kiri ke kanan.

Playhead Merupakan penunjuk posisi frame pada saat dijalankan. Playhead ditAndai dengan garis vertikal berwarna merah.

Toolbox

Bagian dari Macromedia Flash 8 yang terdiri dari berbagai macam tool yang berfungsi membuat gambar, memilih objek, dan memanipulasi objek yang merupakan komponen dari stage. Toolbox terbagi menjadi 4 bagian, antara lain :

Tools

View

Colors

Options

Gambar 1.6 Toolbox

Tools Merupakan bagian dari toolbox yang berfungsi membuat objek gambar, memberi warna objek, memilih, dan memodifikasi objek.

View Bagian dari toolbox yang digunakan untuk mengatur tampilan stage. Tools View ini bisaanya digunakan pada saat pengeditan objek pada stage.

Colors Digunakan untuk mengatur atau memanipulasi pewarnaan objek.

 Options Merupakan bagian dari toolbox yang akan tampil pada saat Anda mengaktifkan salah satu ikon dari toolbox. Setiap ikon toolbox memiliki option yang berbeda dengan ikon yang lain.

Panels

Bagian dari Macromedia Flash 8 yang berupa jendela dan berfungsi mengontrol atau memodifikasi berbagai atribut pada objek atau animasi secara cepat. Secara default, panel terdiri dari 4 bagian, antara lain :

Properties Merupakan salah satu panel yang berfungsi mengatur properti objek yang aktif.

Gambar 1.7 Panel Properties

Action Bagian dari panel yang berfungsi memberikan aksi atau kerja terhadap suatu objek pada stage, frame, atau layer.

Gambar 1.8 Panel Action Color Panel yang berfungsi mengatur pewarnaan terhadap suatu objek secara lebih detail.

Gambar 1.9 Panel Color

Library

Panel yang digunakan sebagai tempat penyimpanan objek yang telah dibuat pada stage.

Gambar 1.10 Panel Library 1.2. Dasar-Dasar Penggunaan Macromedia Flash 8 Seperti yang sudah disinggung pada pembahasan di atas bahwa Interface Macromedia Flash 8 terdiri dari beberapa bagian, seperti Menu Bar, Toolbar, dll. Pada Sub-bab ini kita akan mempelajari fungsi ikon yang terdapat pada menu tersebut, antara lain :

1.2.1 Main Toolbar Toolbar merupakan baris menu yang ditAndai dengan ikon-ikon. Toolbar merupakan jalan pintas untuk menjalankan menu. Bisaanya, Main Toolbar terletak di bawah menu Bar.

Gambar 1.11 Main Toolbar

Berikut ini diuraikan nama dan fungsi dari berbagai ikon yang menjadi komponen Main Toolbar : Nama Ikon New Open Save Print Cut Copy Paste Undo Redo Snap to Object Smooth Strighten Rotate and Skew Scale Align Ikon Fungsi Untuk membuka lembar kerja baru Untuk membuka lembar kerja Untuk menyimpan lembar kerja Untuk mencetak lembar kerja Untuk menyimpan objek pada clipboard Untuk menggAndakan objek Untuk menampilkan objek yang sudah tersimpan pada clipboard Untuk membatalkan perintah Untuk membatalkan Undo Untuk menempelkan objek pada Grid secara otomatis Untuk membuat garis lengkung Untuk membuat garis lurus Untuk memutar objek dan mengatur perspektif objek Untuk mengubah ukuran objek Untuk mengatur perataan objek Tabel 1.1 Tabel Ikon dan Fungsi Main Toolbar 1.2.2 Editing Toolbar

Merupakan bagian dari Macromedia Flash 8 yang terletak pada baris timeline. Editing toolbar terdiri dari beberapa ikon.

Gambar 1.12 Editing Toolbar

Komponen Editing Toolbar dijelaskan pada table di bawah ini : Nama Ikon Timeline Edit Scene Edit Simbol View Ikon Fungsi Untuk menampilkan atau menyembunyikan timeline Untuk memodifikasi scene Untuk mengedit simbol Untuk menampilkan ukuran stage pada layar monitor Tabel 1.2 Tabel Ikon dan Fungsi Editing Toolbar

1.2.3 Drawing Tool (Toolbox) Drawing Tool merupakan bagian dari toolbox yang berfungsi menggambar objek, member warna objek, memilih objek, dan memodifikasi objek. Drawing tool atau toolbox ini terdiri dari beberapa bagian, antara lain: Tool Area Color Area View Area Option Area a. Tool Area

Tool Area merupakan bagian dari toolbox yang digunakan untuk membuat objek gambar bebas dan untuk memanipulasi objek. Nama dan fungsi masing-masing ikon komponen Tool Area diuraikan pada table berikut : Nama Ikon Ikon Fungsi

Arrow Tool (V) Sub Select Tool (A) Free Transform Tool (Q) Gradient Transform Tool (F) Pen Tool (P) Text Tool (T) Oval Tool (O) Rectangular Tool Pencil Tool (Y) Brush Tool (B) Ink Bottle Tool (S) Paint Bucket Tool (S) Eye Dropper Tool (I) Erase Tool (E)

Untuk memilih objek Untuk mengedit garis Untuk mentransform objek Untuk mengatur setting gradasi Untuk membuat objek garis Untuk membuat objek teks Untuk membuat objek lingkaran Untuk membuat objek segi empat Untuk membuat objek bebas berupa garis Untuk membuat objek bebas berupa sapuan kuas Untuk memberi warna garis luar objek Untuk memberi warna dalam objek Untuk meniru warna Untuk menghapus bagian tertentu dari objek

Tabel 1.3 Tabel Ikon dan Fungsi Tool Area

b. View Area View Area merupakan bagian dari toolbox yang digubnakan untuk mengatur tampilan lembar kerja pada layar monitor. View Area terdiri dari 2 ikon, yaitu : (Hand Tool) : Digunakan untuk menggeser bidang kanvas ke atas/ke bawah.

(Zoom Tool) : Digunakan untuk mengatur ukuran lembar kerja dalam persentase. Semakin besar persentase yang dipilih, semakin besar tampilan lembar kerja pada layar monitor Anda.

c. Color Area

Color Area merupakan bagian dari toolbox yang berfungsi mengatur dan memodifikasi warna objek. Color area terdiri dari beberapa ikon. Nama dan fungsi dari ikon yang menjadi komponen Color Area dijelaskan pada table berikut.

Nama Ikon Stroke Color Fill Color Black and White(Q) No ColorTool (F) Swap Color

Ikon

Fungsi Untuk memilih warna garis luar objek Untuk memilih warna objek Untuk mengembalikan warna default hitam dan putih Untuk menghilangkan warna Untuk membalik warna

Tabel 1.4 Tabel Ikon dan Fungsi Color Area d. Option Area Option area merupakan bagian dari toolbox yang berfungsi mengatur setting objek pada lembar kerja. Option Area terdiri dari 3 ikon yang memiliki nama dan fungsi masing-masing. Nama dan fungsi masing-masing ikon terlihat pada table di bawah ini :

Nama Ikon Snap to Object Smooth Straighten

Ikon

Fungsi Untuk menempelkan garis tepi objek secara otomatis Untuk melengkungkan bagian garis Untuk melengkungkan garis

Tabel 1.5 Tabel Ikon dan Fungsi Option Area

1.3 Jenis File Macromedia Flash 8 Flash dapat menghasilkan banyak file keluaran. Namun secara umum, terdapat tiga jenis file utama pada Flash, di antaranya:
1. File Utama (.fla), adalah jenis file utama ketika kita menyimpan movie Flash

Anda. Anda bisa membuka dan mengedit semua jenis file .fla pada Flash.

2. File Hasil Ekspor (.swf), adalah jenis file yang bisaa digunakan pada halaman

web. File dalam format .swf dapat dilihat melalui web browser, selama browser tersebut memiliki Flash Player.
3. File Eksekusi (.exe), adalah jenis file yang dapat dieksekusi tanpa perlu memiliki

aplikasi Flash ataupun Flash Player. Dengan melakukan klik gAnda terhadap file .exe tersebut, maka file tersebut akan terbuka secara otomatis.

BAB II MENGGAMBAR OBJEK Macromedia Flash 8 menyediakan berbagai macam tools dalam menggambar sebuah objek. Disini, Anda diberikan kebebasan dalam menggambar suatu objek, objek yang Anda buat tergantung dari imajinasi Anda sendiri. 2.1 Membuat Objek Garis

Untuk membuat sebuah kurva dasar bentuk garis lurus, Anda dapat menggunakan ikon pada Toolbox (Line Tool). Namun, apabila Anda ingin membuat sebuah objek yang terdiri dari beberapa garis lurus, gunakan ikon pada Toolbox (Pen Tool). Pembahasan tentang cara menggunakan kedua tool di atas diuraikan pada pembahasan berikut.

a. Membuat Garis dengan Line Tool Langkah untuk membuat kurva dasar berupa garis lurus adalah menggunakan Line Tool pada Toolbox, arahkan pada stage, lalu buat objek garis dengan teknik drag. Agar garis yang Anda buat benar-benar lurus, tekan tombol SHIFT pada keyboard pada saat Anda melakukan drag. Untuk memodifikasi ketebalan garis, Anda dapat memanfaatkan panel Properties dengan men-drag slider Stroke Height.

Gambar 2.1 Mengatur Setting Ketebalan Garis

Selain membuat objek berupa garis lurus, Anda juga dapat membuat objek berupa garis lengkung. 1. Pertama, buatlah sebuah objek garis lurus.
2. Setelah selesai, arahkan mouse pointer pada sisi garis hingga bentuk mouse

pointer berubah menjadi

3. Setelah itu, drag dan bentuk sebuah garis lengkung.

b. Membuat Garis dengan Pen Tool

Apabila Anda ingin membuat sebuah objek, yang terdiri dari beberapa garis lurus, gunakan Pen Tool pada Toolbox. Ada dua jenis objek garis lurus yang dapat Anda buat dengan Tool ini : Garis Lurus Terbuka Garis Lurus yang membentuk objek tertutup

Cara menggunakan Tool ini juga berbeda dengan cara penggunaan Line Tool. Cara menggunakan ikon adalah dengan mengklik per titik. Untuk mengakhiri penggunaan Tool ini, dobel klik untuk objek terbuka, atau klik pada titik pertama untuk objek tertutup. Sebagai contoh, untuk membuat objek segitiga, usahakan Anda mengklik pada titik ketiga tepat pada titik pertama sehingga secara otomatis akan terbentuk objek segitiga.
1. 2.

3.

4.

Gambar 2.2 Tahap Pembuatan Objek Segitiga dengan Pen Tool

2.2 Pengetahuan Dasar Objek pada Macromedia Flash Di dalam Flash 8 terdapat berbagai macam objek yang sangat unik diantaranya yaitu oval tool (yang sering digunakan untuk menggambar sebuah lingkaran) dan rectangle tool (yang sering digunakan untuk menggambar sebuah bujur sangkar atau persegi panjang). Kedua tool tersebut bersifat paten yakni sudah menjadi bawaan Flash itu sendiri. Kedua objek tool (oval tool & rectangle tool) terdiri dari dua bagian yaitu: outline dan fill. Outline merupakan bagian luar dari objek tersebut, sedangkan fill merupakan bagian dalam dari objek tersebut yang dapat diisi dengan warna atau gambar.

Gambar 2.3 Fill dan Outline pada objek Flash Outline & Fill dapat disatukan dengan cara membuatnya menjadi satu grup, yaitu dengan perintah: Group (dapat dipilih melalui menu Modify > Group) atau dengan cara menekan tombol Ctrl+G secara bersamaan. Tetapi sebelum Anda menjadikan Outline & Fill menjadi satu grup yang harus Anda lakukan adalah memblok seluruh bagian Outline & Fill hingga terlihat seperti gambar.

Gambar 2.4 Objek sebelum dan setelah di group

2.3 Membuat Objek Segiempat Salah satu objek dasar yang bisa dibuat di Flash adalah segiempat/kotak. Untuk membuat sebuah objek kotak atau segiempat, Anda dapat menggunakan ikon pada toolbox, kemudian buat objek segiempat sama sisi, tekan tombol SHIFT pada saat Anda melakukan drag.

Gambar 2.5 Contoh Objek Segiempat Sama Sisi Apabila Anda ingin membuat sebuah objek kotak atau segiempat dengan sudut tumpul, berikut langkahnya :
1. Klik ikon

2. Berikutnya klik ikon 3. Setelah tampil jendela Rectangular Settings, masukkan angka 30 pada Corner

Radius, lalu klik OK.

Gambar 2.6 Mengatur Setting Sudut Tumpul Objek Segiempat 4. Setelah itu, buatlah objek segiempat pada stage.

Gambar 2.7 Hasil Akhir Objek Segiempat dengan Sudut Tumpul 2.4 Membuat Poligon Selain objek kotak dan objek garis seperti yang telah dibhas di atas, Macromedia Flash juga menyediakan fasilitas untuk membuat sebuah objek poligon atau segi banyak. Untuk membuat objek polygon, lakukan beberapa tahapan sebagai berikut :

1. Klik dan tahan ikon . 2. Berikutnya, pilih Polystar Tool.

Gambar 2.8 Mengaktifkan ikon Polystar Tool.

3. Pada panel properties, klik tombol Options.

Gambar 2.9 Tombol Option untuk mengatur setting Polystar.

4. Atur setting sebagai berikut :

Gambar 2.10 Mengatur Setting Polygon 5. Setelah selesai mengatur setting Polygon, buat objek polygon pada stage menggunakan teknik drag.

Gambar 2.11 Hasil Akhir Objek Poligon.

2.5 Membuat Objek Star Selain digunakan untuk membuat objek polygon, ikon Polystar Tool juga dapat digunakan untuk membuat sebuah objek berbentuk Star/Bintang. Untuk membuat sebuah objek star, lakukan beberapa langkah seperti di bawah ini :
1. Klik dan tahan ikon , lalu pilih Polystar Tool. 2. Pada panel Properties, klik tombol Options.

3. Selanjutnya, atur setting sebagai berikut:

Gambar 2.12 Mengatur Setting Objek Star 4. Setelah itu, buatlah objek Star pada Stage dengan cara drag.

Gambar 2.13 Hasil Akhir Objek Star 2.6 Membuat Oval dan Lingkaran Objek lain yang dapat Anda buat dalam Flash adalah objek berupa lingkaran atau oval. Untuk membuat objek ini, Anda dapat memanfaatkan ikon pada toolbox. Lakukan teknik drag pada stage untuk membuat objek kurva oval. Apabila Anda ingin membuat objek lingkaran dengan diameter yang sama, tekan tombol SHIFT pada saat Anda melakukan drag pada bidang Stage.

Gambar 2.14 Hasil Akhir Objek Oval dan Objek Lingkaran dengan Diameter sama

2.7 Membuat Objek Lengkung Setelah memahami cara membuat sebuah objek dasar lingkaran, segiempat, dan garis, Anda juga dapat memanipulasi objek tersebut dengan cara membuat gelombang atau lengkung pada siusi objek. Misalnya, dari sebuah objek kotak dibentuk gelombang pada sisi kanan atau kirinya. Caranya, arahkan mouse pointer pada salah satu sisi yang akan dijadikan gelombang hingga bentuk mouse pointer menjadi menggunakan teknik drag. . Setelah itu, buatlah objek lengkung

Gambar 2.15 Mengubah sisi Segiempat Menjadi Sisi dengan Garis Lengkung 2.8 Menggambar dengan Pencil Tool Dalam membuat sebuah objek, Anda dapat menggunakan ikon yang terdapat pada Toolbox. Selain digunakan untuk menggambar objek, Pencil Tool juga bisa digunakan untuk membuat objek bebas, sesuai dengan kehendak Anda. Ada beberapa parameter pada saat menggunakan Pencil Tool, yaitu Straighten, Smooth, dan Ink. Jika Anda memilih Straighten maka objek yang Anda buat akan berbentuk bujur sangkar yang rapi. Tetapi jika Anda memilih Smooth maka objek yang Anda buat akan tampak halus garisnya meskipun tidak serapi straighten. Begitu pula dengan Ink bentuknya juga tidak serapi Straighten, tetapi yang membedakan antara Ink dengan Smooth adalah garisnya yang kurang halus (masih terlihat kasar).

Gambar 2.16 Objek dengan straighten, smooth, dan ink Untuk mengatur ketebalan garis pada saat kita menggunakan Pencil Tool dapat dilakukan di Properties, drag slider Stroke Height sampai tercapai ukuran yang diinginkan. 2.9 Menggambar dengan Pen Tool

Selain digunakan untuk meggambar objek yang terdiri dari beberapa garis lurus, Pen tool bisa juga digunakan untuk menggambar objek dengan metode edit points. Untuk menggambar sebuah objek, Anda tinggal menentukan posisi dari edit points yang Anda inginkan.

Gambar 2.17 Objek dengan Pen Tool dan edit point

2.10 Menggambar dengan Brush Tool Selain menggunakan Pencil Tool, Anda dapat memanfaatkan Brush Tool untuk membuat sebuah objek bentuk bebas. Pembuatan objek tersebut dapat Anda lakukan menggunakan teknik drag pada stage. Untuk mengubah warna garis, klik ikon pada Color Tools. Sedangkan untuk mengatur ukuran brush, klik ikon Brush Size pada Option Tool. Setelah itu, buat objek bebas menggunakan teknik drag.

Gambar 2.18 Mengatur Setting Ukuran Brush Selain digunakan untuk menggambar objek, Tool ini bisa juga digunakan untuk mewarnai sebuah objek secara keseluruhan. Ada 5 metode pemberian warna pada brush tool yang ditunjukkan pada gambar :

Gambar 2.19 Gambar asli, paint normal, paint behind, paint selection, paint fills, paint inside 2.11 Merubah Bentuk Objek dengan Arrow Tool Merubah dalam Macromedia Flash sangatlah mudah dan efisien untuk mengubah bentuk suatu objek Anda dapat menggunakan arrow tool. Dengan arrow tool Anda tinggal mengubah suatu objek dengan menggerakkan outline (garis objek) dari objek tersebut.

Gambar 2.20 Merubah Objek dengan Arrow Tool 2.12 Merubah Bentuk Objek dengan Subselection Tool Merubah bentuk suatu objek dengan menggunakan Subselection tool juga sangatlah mudah, karena dengan subselection tool Anda dapat merubah suatu objek tool menjadi suatu objek yang Anda inginkan. Lihat gambar dibawah ini yang telah dipilih dengan menggunakan subselection tool.

Gambar 2.21 Merubah Bentuk Objek dengan Subselection Tool Dengan menggunakan subselection tool maka objek diatas dapat diubah menjadi objek baru (seperti gambar dibawah ini).

Gambar 2.22 Objek yang telah diubah 2.13 Menggabungkan Objek Beberapa objek yang sudah Anda buat dapat digabungkan menjadi satu. Bisaanya, tujuan penggabungan iniadalah untuk mempermudah modifikasi beberapa objek sekaligus. Untuk menggabungkan beberapa objek, klik ikon pada toolbox, lalu pilih salah satu objek. Berikutnya, tekan dan tahan tombol SHIFT, kemudian pilih objek lain. Anda dapat juga menggunakan teknik jaring terhadap beberapa objek yang dipilih.

Gambar 2.23 Menjaring Objek Yang akan Digabungkan Setelah memilih beberapa objek, klik menu modify > Combine Object > Union. Anda dapat juga menggunakan kombinasi tombol CTRL + G. Apabila penggabungan objek berhasil, akan tampil garis biru di sekeliling objek yang digabungkan.

Gambar 2.24 Hasil Penggabungan objek Untuk memisahkan objek yang sudah digabungkan, Anda dapat menggunakan Break Apart, yang ada di menu modify > Break Apart.

BAB III DASAR PEMBUATAN ANIMASI FLASH Cara kerja animasi tergantung dari pengaturan frame pada layer. Panjang pendeknya frame sangat mempengaruhi kecepatan gerakan objek yang dianimasikan. Animasi yang dapat dibuat pada Macromedia Flash dapat dibedakan menjadi beberapa jenis, di antaranya : a. Animasi Frame by frame b. Animasi Motion Tween c. Animasi Masking d. Animasi Shape Tween e. Animasi Color Tween

3.1 Animasi Frame by frame

Animasi Frame by frame adalah animasi yang dibuat hanya dengan menggunakan berbagai frame dalam satu layer ataupun antar layer. Lama tidaknya sebuah animasi dijalankan sangat tergantung dari jumlah frame. Pembuatan animasi Frame by frame lebih membutuhkan waktu yang lama. Hal itu disebabkan karena terlalu banyak objek yang harus ditempatkan pada frame yang berbeda. Pada bagian berikut akan dibahas beberapa latihan animasi Frame by frame.

a. Animasi Teks 1

Animasi teks adalah animasi menggunakan objek teks. Contoh animasi teks berikut yaitu animasi teks yang hasil akhirnya berupa perubahan warna teks setiap kali movie dijalankan. Berikut langkah-langkahnya : 1.
2.

Buka lembar kerja baru

Klik ikon pada toolbox, kemudian ketik MACROMEDIA pada stage. Atur setting teks pada panel properties. Jenis font : Viner Hand ITC, ukuran huruf 40, dan pilih huruf warna biru.

Gambar 3.1 Mengatur setting teks MACROMEDIA Klik kanan pada frame 5. Pilih Insert Keyframe untuk menambahkan keyframe.
3.

Gambar 3.2 Mengaktifkan menu Insert Keyframe

4. 5.

Selanjutnya, ubah warna huruf menjadi merah.

Kemudian klik kanan pada frame 10, pilih Insert Keyframe dan pada keyframe 10 ubah warna huruf menjadi hijau. Ulangi langkah 5 untuk frame 15 dan 20 dengan menggunakan warna yang berbeda.
6.

Setelah selesai, lakukan test movie dengan menekan kombinasi tombol Control + Enter.
7.

b. Animasi Teks 2

Animasi teks kategori frame by frame berikutnya adalah animasi teks yang muncul huruf per huruf. Berikut langkahnya : 1.
2. 3.

Buka lembar kerja baru. Kemudian, klik ikon .

Berikutnya, ketik huruf M pada stage.

Gambar 3.3 Huruf M pada frame 1

4. 5.

Klik frame 3, kemudian klik kanan, pilih Insert Keyframe.

klik ikon , kemudian klik huruf M pada stage dan tambahkan huruf A dengan warna Hijau.

Gambar 3.4 Huruf MA pada frame 3

6. 7.

klik frame 5, kemudian klik kanan, pilih Insert Keyframe.

klik ikon , kemudian klik huruf MA pada stage dan tambahkan huruf C dengan warna merah.

lakukan langkah 6 dan 7 pada frame-frame selanjutnya hingga terbentuk animasi teks MACROMEDIA dimana setiap hurufnya mempunyai warna yang berbeda.
8.

Sebagai langkah terakhir, lakukan Test Movie pada animasi yang sudah Anda buat.
9.

3.2 Animasi Motion Tween

Animasi Motion Tween merupakan bentuk animasi yang paling mendasar pada Macromedia Flash. Animasi ini digunakan untuk menggerakkan objek dari satu titik ke titik lain. Berikut merupakan beberapa latihan membuat motion tween.

3.2.1

Animasi Objek Bergerak

Latihan pertama adalah membuat sebuah objek segiempat bergerak dari kiri ke kanan, kemudian kembali lagi ke kiri. 1. Pertama, buka lembar kerja baru.
2. Berikutnya, klik ikon

pada toolbox dan buat objek segiempat pada stage.

Gambar 3.5 Objek segiempat pada frame 1

3. Klik frame 20 lalu klik kanan, pilih Insert Keyframe. 4. Kemudian, klik ikon

pada toolbox, dan pindahkan objek ke sisi kanan.

Gambar 3.6 Objek segiempat pada frame 20

5. Selanjutnya, klik frame 40 lalu klik kanan, pilih Insert Keyframe. 6. klik ikon

pada toolbox, dan pindahkan objek ke sisi kiri.

Gambar 3.7 Objek Segiempat pada frame 40

7. kemudian klik layer 1 untuk mengaktifkan frame 1 sampai frame 30. 8. Klik menu Insert > Timeline > Create Motion tween.

Gambar 3.8 Frame Objek Segiempat setelah ditambahkan Create Motion Tween
9. Terakhir, lakukan Test Movie.

Hint :

Selain langkah 7 & 8 yang disebut di atas, ada cara yang lebih mudah untuk

menambahkan Motion Tween, yaitu ketika langkah 6 selesai, pilih frame di antara frame 1 dan frame 20, klik kanan lalu pilih Create Motion Tween. Lakukan langkah tersebut untuk frame 20 dan frame 40.

Untuk animasi di atas, terdapat cara lain untuk mempersingkat langkah yang

digunakan, yaitu ketika selesai membuat objek pada frame 1 di sebelah kiri, klik kanan frame 40, pilih Insert keyframe. Lalu klik kanan pada salah satu frame antara frame 1 dan 40 > Create Motion tween. Setelah terbentuk Motion Tween, pada frame 20 pindahkan posisi objek ke kanan. Setelah itu, akan didapat animasi objek seperti pada langkah-langkah di atas.

3.2.2

Animasi Rotasi

Berbeda dengan animasi tween pertama (objek bergerak), animasi rotasi juga termasuk dalam kategori animasi Motion Tween. Hanya saja pada animasi rotasi, objek yang dianimasikan tidak bergerak dari kiri ke kanan, melainkan bergerak dan berputar di tempat. Berikut beberapa cara untuk membuat animasi rotasi sesuai dengan contoh yang ada.

a. Lingkaran berputar 1. Buka lembar kerja baru.

2. Klik ikon

, tekan dan tahan tombol SHIFT, kemudian buat objek lingkaran pada stage. Tombol SHIFT digunakan agar objek lingkaran yang Anda buat memiliki diameter yang sama.

Gambar 3.9 Objek pada animasi lingkaran berputar

3. Klik ikon

pada toolbox, kemudian pilih warna gradasi putih.

Gambar 3.10 Memilih Warna Gradasi Putih

4. Setelah itu, klik tool dengan ikon

, lalu warnai objek dengan meng-klik di bagian kanan bawah objek lingkaran untuk menentukan pusat gradasi di kanan bawah.

Gambar 3.11 Menentukan Warna gradasi dengan Pusat gradasi di Kanan Bawah

5. Selanjutnya, klik kanan pada frame 20, lalu pilih Insert Keyframe . 6. Lalu klik kanan pada frame tengah (antara frame 1 dan frame 20), pilih

Create Motion Tween. 7. Hasil akhir penambahan animasi tween akan terlihat seperti berikut.

Gambar 3.12 Keadaan Frame Setelah Ditambahkan Animasi Tween

8. Frame masih dalam keadaan aktif (klik salah satu frame tengah), atur properti

frame Rotate = CW (ClockWise searah jarum jam), Times = 3 (berputar sebanyak 3 kali putaran).

Gambar 3.13 Mengatur Properti Tween

9. Untuk melihat hasil animasi, lakukan Test Movie.

b. Kincir Angin Animasi berikutnya adalah animasi kincir angin. Animasi ini sebenarnya hampir sama dengan animasi lingkaran berputar, perbedaannya hanya terletak pada bentuk objek yang dianimasikan. Berikut langkah pembuatannya : 1. Buka lembar kerja baru.

2. Selanjutnya, klik ikon

pada toolbox. Kemudian, buat objek segiempat memanjang ke bawah. Atur property tanpa stroke seperti yang terlihat pada gambar berikut.

Gambar 3.14 Membuat objek pertama kincir angin

3. Lalu copy objek tersebut dengan cara klik kanan pada objek > copy. 4. Klik pada stage kosong dan pilih Paste In Place. 5. Barikutnya, atur putaran objek baru dengan mengklik menu Modify > Transform

> Scale and Rotate. Atur setting rotasi seperti pada gambar.

Gambar 3.15 Mengatur Setting Putaran Objek Kincir Angin 6. Ganti warna objek segiempat dengan warna yang berbeda dengan objek segiempat pertama/sebelumnya.

Gambar 3.16 Hasil Objek segiempat Setelah diputar 90 derajat

7. Ulangi langkah 3-6 hingga hasil akhir objek kincir angin menjadi seperti yang terlihat pada Gambar berikut.

Gambar 3.17 Hasil Akhir objek kincir angin

8. Pada tahap selanjutnya, buatlah animasi putaran dengan mengklik kanan pada

frame 40, pilih Insert Keyframe.

9. Klik kanan pada frame tengah (antara frame 1 dan frame 40), pilih Create Motion

Tween.
10. Pada panel properties, atur setting Rotate : CCW (Counter ClockWise) dan

Times : 3 (objek berputar 3 kali).

Gambar 3.18 Mengatur Setting Rotasi Objek Kincir Angin

11. Terakhir, lakukan test movie.

c. Animasi Jarum Jam Jika sebelumnya Anda sudah membuat latihan animasi motion tween menggunakan 1 layer, maka pada pembuatan animasi jarum jam ini digunakan dua layer. Namun, hanya satu layer yang dianimasikan. Beberapa langkah untuk membuat animasi jarum jam ini antara lain : 1. Buka lembar kerja baru
2. Ganti warna background lembar kerja dengan wara biru muda dengan memilih

warna biru muda pada panel properties background.

Gambar 3.19 Mengganti Warna Background dengan Warna Biru Muda

3. Buat ojek lingkaran jam dengan mengklik ikon

, tekan dan tahan tombol SHIFT, kemudian buat objek lingkaran pada stage. Tombol SHIFT digunakan agar objek lingkaran yang Anda buat memiliki diameter sama.
4. Klik ikon

pada toolbox, kemudian pilih warna abu-abu untuk mengisi Fill-

nya.
5. Untuk Stroke atau garis luarnya, Anda bisa memilih warna, Stroke Style dan

ukuran pada properties seperti pada gambar berikut.

Gambar 3.20 Mengganti warna, tebal dan tipe Stroke untuk Objek Lingkaran

Gambar 3.21 Objek Lingkaran jam

6. Tampilkan komponen bantu Ruler dengan mengklik menu View > Ruler. 7. Setelah itu, arahkan mouse pointer pada Horizontal Ruler, kemudian drag ke

bawah untuk menampilkan komponen bantu Horizontal Guide. Drag hingga kira-kira berada pada titik diameter tengah lingkaran. Begitu pula untuk garis Bantu Vertikal Guide.

Gambar 3.22 Tampilan Komponen Guides Lingkaran jam

8. Pada tahap selanjutnya, klik ikon

pada toolbox dan tambahkan angka 1 sampai 12, lalu atur letak setiap angka seperti yang terlihat pada gambar berikut.

Gambr 3.23 Mengatur Letak Angka pada Lingkaran Jam

9. Setelah selesai, ganti nama Layer 1 menjadi nama jam dengan dobel klik pada

Layer 1, lalu ketikkan jam.

10. Tambahkan layer baru dengan mengklik ikon

pada kolom layer, lalu ganti

nama layer baru menjadi nama jarum. 11. Letakkan layer jarum di atas layer jam.

12. Tambahkan garis bantu guide horizontal dan vertical untuk memudahkan Anda

dalam pembuatan objek jarum jam. Untuk jumlah dan susunan guide, lihat gambar berikut.

Gambar 3.24 Susunan Guide Untuk membuat Objek Jarum Jam

13. Selanjtnya klik ikon

pada toolbox untuk membuat objek jarum jam.

3.25 Hasil Akhir Pembuatan Objek Jarum Jam

14. Ukuran tebal dan tipe garis bisa diubah pada panel properties jarum. Untuk

menampilkannya klik objek jarum, lalu buka properties.

15. Setelah Anda menyelesaikan pembuatan objek jarum jam, pada layer jarum, klik

kanan pada frame 30, pilih Insert Keyframe.

16. Lakukan hal tersebut untuk layer Jam, namun pilih Insert Frame karena pada

layer jam, objek yang ada tidak dianimasikan.

3.26 keadaan frame 30 untuk layer jarum dan layer jam

17. Untuk membuat animasi pada layer jarum, klik kanan frame tengahnya, lalu pilih

Create Motion Tween.

18. Karena animasi jarum berputar merupakan animasi berputar yang bertitik tumpu

pada pusat jam, maka pada frame awal dan frame akhir (frame 1 dan frame 30) ubah posisi titik pusat jarum menuju ke posisi pusat jam dengan mengklik frame 1 dan gunakan ikon untuk mengubah titik pusat jarum, begitu pula untuk frame 30.

Gambar 3.27 mengubah titik pusat jarum

19. Selanjutnya atur properti frame seperti terlihat pada gambar.

Gambar 3.28 properti jarum jam

20. Sebagai langkah terakhir, lakukan test movie dan bila perlu tambahkan beberapa

objek untuk menghias layer Jam.

Gambar 3.29 Hasil Akhir Animasi Jarum Jam

3.2.3

Motion Guide Tween

Animasi Moiton Guide merupakan animasi Motion Tween tahap lanjut, dimana pada animasi ini Anda dapat menentukan jalur atau track yang dilewati oleh objek. Berikut beberapa contohnya.

a. Motion Guide Tween Sederhana Pada animasi berikut ini merupakan salah satu contoh dari animasi Motion Guide sederhana, berikut langkah-langkahnya : 1. Buka lembar kerja baru

2. Gambarkan sebuah objek sederhana berbentuk roket seperti gambar berikut.

Gambar 3.30 Objek berbentuk roket pada frame 1

3. Buat Motion Tween dengan cara klik kanan pada frame 40, pilih Insert

Keyframe, kemudian klik kanan pada frame tengahnya, pilih Create Motion Tween.
4. Tambahkan layer Guide dengan cara klik ikon

yang terletak di bawah layer.

Gambar 3.31 Lokasi ikon

5. Setelah layer Guide terbentuk, klik layer tersebut lalu buat jalur untuk jalannya

objek dengan menggunakan ikon

, seperti pada contoh berikut.

Gambar 3.32 Menggambar Jalur Objek pada layer Guide 6. Langkah berikutnya yaitu klik frame awal objek (frame 1) layer Objek, lalu pindahkan objek ke salah satu ujung garis sebagai permulaan jalur dengan cara mendrag titik pusat objek untuk ditempelkan pada jalur tersebut. 7. Kemudian, klik frame akhir objek (frame 40) dan pindahkan objek ke ujung garis yang lain dengan cara yang sama sebagai akhir dari jalur.

Gambar 3.33 Memindahkan Objek ke ujung garis Guide

8. Terakhir lakukan Test Movie.

Hint : Untuk merubah orientasi objek supaya mengikuti jalur, dapat digunakan fitur Orient to Path dengan mengatur setting pada properties Motion Tween seperti berikut :

Gambar 3.34 Fitur Orient to path

b. Animasi Orbit Animasi orbit ini merupakan animasi menyerupai bulan yang berputar mengelilingi bumi. Dimana bumi sebagai objek tetap dan bulan sebagai objek bergerak yang mengikuti jalur orbitnya. Berikut langkah pembuatannya : 1. Buka lembar kerja baru.
2. Dobel klik layer 1, lalu ganti nama Layer 1 menjadi lingk 1.

3. Tambahkan layer baru dengan mengklik ikon

di bagian bawah kolom

layer. Ganti nama Layer 2 dengan nama Lingk 2.

Gambar 3.35 Keadaan Frame Awal Animasi Orbit

4. Klik Layer Lingk1, kemudian tambahkan layer guide dengan mengklik ikon

5. Setelah itu, hilangkan warna fill ikon Color pada toolbox.

Gambar 3.36 Memilih Fill Tanpa Warna

6. Berikutnya, klik ikon

pada toolbox, lalu buat objek berbentuk elips sebagai

guide atau garis jalur orbit.

Gambar 3.37 Membuat Bentuk Elips sebagai Jalur Orbit

7. Klik ikon

pada toolbox, lalu putar orbit elips hingga keadaan akhir objek elips seperti terlihat pada gambar berikut.

Gambar 3.38 Keadaan akhir objek elips setelah dirotasi

8. Hapus sedikit bagian kedua ujung elips menggunakan ikon

, pilih ukuran

brush paling kecil pada Option Tool.

Gambar 3.39 Memilih ukuran Brush paling kecil 9. Setelah itu mulailah melakukan penghapusan pada kedua ujung jalur orbit.

Gambar 3.40 Menghapus sebagian dari kedua ujung jalur orbit 10. Setelah dilakukan penghapusan pada kedua ujung objek elips, objek elips akan menjadi 2 bagian yang terpisah.
11. Pada tahap selanjutnya, dobel klik pada objek, lalu klik bagian garis elips di

bagian 2, klik kanan lalu pilih Cut. kemudian dobel klik pada stage untuk kembali ke stage setelah mengedit objek.

Gambar 3.41 Keadaan Garis Orbit setelah bagian ke-2 dari orbit dihilangkan
12. Aktifkan Layer Lingk2, lalu klik ikon

untuk menambahkan layer guide ke-2.

13. Klik frame 1 layer guide kedua, klik kanan stage kosong dan pilih Paste In Place.

Gambar 3.42 Keadaan Frame dan Objek Jalur (Guide)

14. Aktifkan layer guide pertama, klik kanan pada frame 20, pilih insert frame. 15. Aktifkan juga layer guide kedua, klik kanan pada frame 20, pilih insert frame.

3.43 Keadaan kedua layer Guide

16. Berikutnya klik layer Guide kedua dan klik ikon

untuk menyembunyikan layer

Guide kedua.
17. Klik frame 1 Lingk1. 18. Klik ikon

pada toolbox untuk membuat objek yang akan digerakkan pada

orbit.

Gambar 3.44 Membuat objek lingkaran

19. Setelah itu, klik kanan pada frame 20 layer lingk1, pilih Insert Keyframe. 20. Buat Motion Tween dengan cara klik kanan frame tengah, pilih Create Motion

Tween.
21. Pada frame 1 layer Lingk1, tempatkan objek lingkaran pada ujung kiri jalur.

Usahakan titik tengah lingkaran tepat berada pada ujung kiri orbit.
22. Begitu pula untuk frame 20, tempatkan pada ujung kanan jalur.

Gambar 3.45 Menempatkan Lingkaran pada ujung kanan jalur.

23. Copy objek lingkaran sebelum membuat animasi pada lingk2, dengan cara klik

kanan pada objek > copy.

24. Berikutnya, klik Layer Guide pertama dan layer Lingk1, lalu klik ikon

untuk

menyembunyikan layer guide pertama dan layer lingk1.

25. Pada frame 1 layer Lingk2, klik pada stage kemudian klik kanan > Paste in

Place.
26. Ulangi langkah 19 dan 20 untuk membuat motion Tween.

27. Pada frame 1 layer Lingk2, pindahkan objek ke ujung kanan jalur.

Gambar 3.46 Lingkaran dipindahkan pada ujung garis kanan pada frame 1
28. Untuk frame 20 layer Lingk2, pindahkan objek ke ujung kiri jalur. 29. Selanjutnya, klik kanan frame 40 layer guide pertama, pilih Insert Frame.

Lakukan hal itu pula pada frame 40 layer Guide kedua.

30. Klik layer Lingk2, lalu arahkan mouse pointer Anda pada frame layer Lingk2 dan

pindahkan pada posisi frame 21.

Gambar 3.47 Memindahkan frame layer Lingk2

Gambar 3.48 Posisi akhir Frame layer Lingk2

31. Lihat pada posisi frame layer lingk2 pada gambar 3.48. Tambahkan layer baru di

atas layer Guide 2 dengan mengklik layer Guide 2 kemudian klik ikon

Gambar 3.49 Posisi layer baru di atas layer Guide 2

32. Buat objek lingkaran pada layer tambahan, lalu tambahkan warna gradasi pada

objek lingkaran yang baru. Pengaturan warna gradasi dapat menggunakan ikon Lihat hasil akhir pengaturan objek lingkaran baru pada Gambar berikut.

Gambar 3.50 Keadaan akhir Frame dan Objek pada animasi Orbit.
33. Setelah selesai, lakukan Test Movie.

3.3 Animasi Masking Animasi masking adalah animasi objek yang menutupi objek lain sehingga objek yang ditutupi terlihat transparan. Layer masking ditandai dengan simbol seperti yang terlihat pada gambar 3.52. cara membuat layer mask adalah mengklik mouse kanan pada layer yang akan di-masking, lalu pilih menu mask.

Gambar 3.51 Cara membuat masking layer

Setelah Anda memilih menu mask, maka layer yang di-masking akan terlihat seperti pada gambar 3.52.

Gambar 3.52 Tampilan layer masking Untuk mengetahui lebih jelas lagi mengenai cara membuat dan hasil akhir masking, lakukan latihan berikut :
1. Buka lembar kerja baru, lalu ganti warna lembar kerja dengan warna hitam pada

Panel property.

Gambar 3.53 Tampilan property layer Masking

2. Klik ikon

pada toolbox, lalu ketik ANIMASI MASKING pada stage, dan letakkan di tengah stage.

Gambar 3.54 Tampilan Font pada Stage

3. Perpanjang frame sampai frame 20, dengan cara klik kanan pada frame 20, pilih

Insert Frame.
4. Dobel klik Layer 1, lalu ganti nama menjadi Teks.

Gambar 3.55 Keadaan layer teks

5. Klik ikon

untuk menambahkan layer baru dan beri nama Lingkaran pada

layer baru.
6. Klik layer Lingkaran dan buat objek lingkaran dengan warna biru, lalu letakkan

objek tersebut di sisi kiri teks ANIMASI MASKING.

Gambar 3.56 Keadaan layer dan posisi pertama objek Lingkaran pada frame 1
7. Klik kanan frame 10, pilih Insert Keyframe.

8. Pindahkan objek lingkaran di sisi kanan teks ANIMASI MASKING.

Gambar 3.57 Keadaan layer dan posisi kedua Objek Lingkaran pada frame 10
9. Klik kanan frame 20, lalu pilih Insert Keyframe.

10. Pindahkan objek lingkaran ke sisi kiri objek teks ANIMASI MASKING.

Gambat 3.58 Keadaan layer dan posisi ketiga objek Lingkaran pada frame 20
11. Berikutnya buat motion tween dengan cara klik kanan frame antara frame 1 dan

10, pilih Create Motion Tween. Begitu pula untuk frame 11 dan 20, buat Motion Tween juga.
12. Buat layer lingkaran menjadi masking layer dengan mengklik kanan layer

lingkaran, lalu pilih menu Mask sehingga hasil akhir layer seperti terlihat pada gambar berikut.

Gambar 3.59 Keadaan akhir Layer setelah ditambahkan masking.

13. Lakukan Test movie.

Agar hasil akhir animasi masking terlihat lebih dahsyat, tambahkan objek segiempat dengan warna gradasi pada layer TEKS. Cara menambahkan objek segiempat pada layer teks :
1. Klik tanda anak kunci pada layer teks, lalu klik ikon

dan buat objek

segiempat.

Gambar 3.60 Keadaan stage setelah ditambahkan Objek segiempat

2. Lakukan Test Movie

Gambar 3.61 Test Movie Animasi Masking

3.4 Animasi Shape Tween Animasi shape sering disebut juga dengan animasi bentuk atau animasi perubahan bentuk. Dalam pembuatan animasi ini dibutuhkan Blank Keyframe, yaitu sebuah frame kosong yang akan digunakan untuk menambahkan bentuk objek yang berbeda pada

keyframe sebelumnya. Di bawah ini akan diuraikan pembuatan beberapa latihan menggunakan animasi Shape Tween.

a. Animasi Shape Tween Sederhana

1. Pertama, buka lembar kerja baru / kosong.

2. Berikutnya klik ikon

pada toolbox, lalu atur setting warna stroke dengan warna hijau dengan ketebalan gris (Height color) : 14, dan warna fill kuning. 3. Setelah itu buat objek lingkaran pada stage.

Gambar 3.62 Pengaturan setting dan Hasil Akhir Objek Lingkaran

4. Selanjutnya, tambahkan Keyframe kosong pada posisi frame 10 dengan klik

kanan frame 10, pilih Insert Blak Keyframe.

5. Klik ikon

pada toolbox, lalu atur setting warna stroke dengan warna orange dengan ketebalan garis (Height color) : 14 dan warna fill hijau. 6. Kemudian buat objek segiempat pada stage.

Gambar 3.63 Pengaturan setting dan Hasil Akhir Objek Segiempat

7. Klik frame tengah (antara frame 1 dan frame 10), kemudian pada panel

properties pilih Shape pada option Tween.

Gambar 3.64 Memilih Tween Shape pada panel properties

8. Setelah Anda menentkan Shape Tween, pada frame akan trlihat anak panah

berwarna hijau muda.

Gambar 3.65 Bentuk frame Shape Tween.

9. Terakhir, lakukan Test Movie.

b. Animasi perubahan Bentuk Segiempat menjadi Teks

Selain animasi shape tween pada objek shape, objek teks juga dapat dijadikan bagian dari animasi shape tween. Hanya saja perlakuannya sedikit berbeda jika dibandingkan dengan objek shape. Agar objek teks dapat ditambahai animasi shape tween, objek teks tersebut harus melalui proses Break Apart dahulu. Caranya, klik menu Modify > Break Apart atau klik mouse kanan pada objek teks, kemudian pilih menu Break Apart. Break Apart berfungis memisahkan teks menjadi beberapa bagian. Khusus untuk objek teks, proses Break Apart harus dilakukan sebaganyak 2 kali. Break Apart pertama dilakukan untuk memisahkan teks menjadi beberapa bagian. Misalnya, pada teks FLASH, proses break apart pertama kaan memisahkan teks menjadi 5 bagian (sesuai jumlah karakter teks).

Gambar 3.66 Teks FLASH Sebelum di-Break Apart

Gambar 3.67 Teks FLASH Setelah dilakukan Break Apart pertama

Break Apart kedua akan memisahkan teks FLASH menjadi sebuah objek bentuk yang dapat dihancurkan menjadi bagian yang lebih kecil.

Gambar 3.68 Teks FLASH setelah dilakukan Break Apart kedua

Pada latihan berikut, Anda akan diajak untuk membuat animasi Tween Shape dari objek kotak ke bentuk teks. 1. Buka lembar kerja baru
2. Setelah itu, klik ikon

, lalu buat objek segiempat. Tempatkan di luar stage

bagian atas.

Gambar 3.69 Menempatkan objek Segiempat di luar stage

3. Pada tahap selanjutnya, tambahkan frame kosong pada frame 20 dengan cara klik

kanan pada frame 20, pilih Insert Blank Keyframe.

4. Klik ikon

pada toolbox, ketikkan hayo, dan tempatkan di bagian bawah

stage.

Gambar 3.70 Menempatkan teks HAYO

5. Berikutnya, pisahkan objek menjadi beberapa bagian dengan mengklik kanan

objek teks, lalu pilih menu Break Apart, lakukan Break Apart 2 kali.

Gambar 3.71 Apart kedua pada teks hayo

6. Agar teks hayo dapat tampil lebih lama, tambahkan frame baru sampai pada

posisi frame 25. Klik kanan frame 25, pilih Insert Frame

Gambar 3.72 Keadaan frame sebelum ditambahkan Shape Tween

7. Berikutnya, buat animasi tween dengan cara mengklik frame tengah (antara frame

1 dan frame 20) lalu pada panel properties pilih Shape pada option Tween.

Gambar 3.73 Keadaan frame setelah ditambahkan shape tween

8. Sebagai langkah terakhir, lakukan test movie.

3.5 Animasi Color Tween

Animasi Color Tween adalah animasi warna pada Macromedia Flash. Hasil akhir dari animasi ini adalah perubahan warna atau kesan menghilang/kabur pada objek yang dianimasikan. Objek yang dapat dibuat animasi color tween ini adalah objek berupa simbol. Apalagi objek yang akan diberi animasi berupa objek yang diimpor dari file lain, maka objek tersebut harus dikonversi menjadi bentuk simbol dengan perintah Convert to Simbol.

Macromedia Flash animasi warna atau Color Tween dibedakan menjadi 4, antara lain : a. Brightness b. Tint c. Alpha d. Advanced

a. Animasi Brightness Animasi Color Tween pertama adalah animasi Brightness, hasil akhir animasi ini adalah kesan memudar menjadi warna putih. Latihan yang akan diuraikan disini adalah menampilkan objek foto secara bergantian dengan efek transisi (pergantian foto) menggunakan efek brightness. 1. Sebagai langkah pertama, buka lembar kerja baru.
2. Selanjutnya, klik menu File > Import > Import to the Stage untuk mengambil

file foto direktori lain, serta nama file foto yang akan diimpor. Setelah itu, klik open.
3. Setelah objek foto tampil di stage, atur ukuran dan posisi objek foto pada panel

properties. W=200, H=200, X=160, dan Y=100.

Gambar 3.74 Mengatur Posisi dan Ukuran objek foto pada panel properties

4. Agar objek foto dapat ditambahkan animasi Color Tween, konversikan objek foto.

Klik mouse kanan pada objek foto, lalu pilih menu Convert to Simbol.
5. Setelah tampil kotak Convert to Simbol, beri nama Foto 1, lalu pilih tipe Movie

Clip.

Gambar 3.75 Menentukan Setting Konversi Objek Foto

Setelah dilakukan konversi pada objek foto, bagian tengah objek foto akan ditandai dengan tanda lingkaran kecil dan garis border biru.

Gambar 3.76 Objek Foto sebelum dan sesudah dilakukan konversi

6. Sebagai langkah selanjutnya, ganti nama Layer 1 menjadi Foto 1. 7. Tambahkan layer baru dengan mengklik ikon

pada kolom layer, lalu ganti

nama menjadi foto2.

8. Klik menu File > Import > Import to Stage.

9. Pilih direktori dan pilih nama file foto yang akan diimpor.
10. Selanjutnya, atur setting ukuran dan posisi foto pada panel Properties (untuk

mengatur setting foto) seperti pada langkah 2.

11. Klik mouse kanan pada objek foto, pilih Convert to Simbol, dan atur setting

Simbol.

Gambar 3.77 Keadaan awal Objek Foto 2 pada frame 1

12. Berikutnya, pada tiap layer, lakukan insert Keyframe pada frame 10 dan 20.

Gambar 3.78 Keadaan layer setelah diberikan keyframe pada frame 10 & 20

13. Lalu, aktifkan semua layer dengan mengklik layer Foto 1, tekan dan tahan tombol

SHIFT, kemudian klik layer Foto 2. Kemudian klik kanan pada frame yang sudah diblok, pilih Create Motion Tween.

Gambar 3.79 Keadaan layer setelah diblok.

14. Tambahkan layer baru dengan mengklik ikon

, lalu ganti nama layer baru

dengan nama Border.

15. Selanjutnya klik layer Foto 2 untuk mengaktifkan frame 1-20 layer Foto 2, lalu

drag dan pindahkan pada posisi frame 20.

Gambar 3.80 Memindahkan frame layer Foto 2

16. Pada layer foto 1, atur brightness pada objek dengan cara mengklik frame

terakhir dari layer foto 1, lalu klik objek, buka properties, pilih brightness pada option Color. Pilih tingkat brightness 50 %.
17. Lakukan langkah 16 pada layer foto 2. 18. Aktifkan layer Border, tambahkan frame dengan cara klik kanan pada frame 39,

pilih Insert Frame.

19. Pada tahap selanjutnya, klik frame 1 layer Border serta tambahkan variasi border

dengan mengklik ikon . Atur setting garis stroke Height = 20, warna Stroke=hijau muda, dan pilih salah satu bentuk garis pada Stroke Style.

Gambar 3.81 Mengatur setting border pada panel Properties 20. Buat garis border di sekeliling objek foto pada stage.

Gambar 3.82 Keadaan stage setelah ditambahkan border

21. Tambahkan teks SULE dengan mengklik ikon

dan tempatkan di atas objek

foto.

Gambar 3.83 Keadaan stage setelah ditambahkan Border dan Teks

22. Sebagai tahap akhir, lakukan test movie.

Gambar 3.84 Movie Animasi Brightness b. Animasi Tint Animasi tint merupakan salah satu bentuk Color Tween yang hasil animasinya berupa proses perubahan warna pada setiap titik Keyframe. Pada latihan berikut akan dijelaskan cara membuat animasi sederhana menggunakan color tween bentuk animasi tint. 1. Sebagai langkah pertama, buka lembar kerja baru.
2. Klik dan tahan ikon

pada toolbox, lalu pilih polystar.

3. Klik tombol option pada panel property, lalu atur setting Polystar.

Gambar 3.85 Mengatur setting Objek Star

4. Setelah itu, pada panel properties atur setting objek polystar dengan pengaturan

Stroke Height = 2, Stroke Color = kuning, dan Fill = birumuda. 5. Setelah selesai, buatlah objek star pada stage.

Gambar 3.86 Hasil pembuatan Objek star pada stage

6. Selanjutnya, berikan keyframe pada frame 5, 10, 15, dan 20 dengan cara klik

kanan, pilih Insert Keyframe.

Gambar 3.87 Keadaan frame setelah ditambahkna Keyframe

7. Selanjutnya klik ikon Layer 1 untuk mengaktifkan frame 1 sampai frame 20. 8. Setelah itu, buat motion tween dengan cara klik kanan pada frame yang di-blok,

pilih Create Motion Tween.

3.88 Keadaan frame setelah ditambahkan Create Motion Tween

9. Klik frame 5, lalu klik objek star pada stage. Atur properties seperti pada gambar

berikut.

Gambar 3.89 Mengatur setting Tint Objek Star pada keyframe 5

10. Berikutnya, klik frame 10 dan klik objek star pada stage. Kemudian, atur

properties seperti gambar berikut.

Gambar 3.90 Mengatur setting Tint Objek Star pada keyframe 10

11. Klik frame 15, lalu klik objek star pada stage. Atur properties seperti gambar.

Gambar 3.91 Mengatur setting Tint Objek Star pada keyframe 15

12. Selanjutnya, Klik frame 20, lalu klik objek star pada stage. Atur properties seperti

berikut.

Gambar 3.92 Mengatur setting Tint Objek Star pada keyframe 20

13. Sebagai langkah terakhir, lakukan test movie.

c. Animasi Alpha Animasi warna berikutnya adalah animasi Alpha. Hasil dari animasi ini hampir sama dengan animasi warna Brightness, yaitu kesan menghilang/kabur pada objek yang dianimasikan. Untuk membuat latihan menggunakan animasi alpha, ikuti beberapa langkah berikut :

1. Buka lembar kerja baru.

2. Klik ikon

dan ketikkan teks MACROMEDIA.

Gambar 3.93 Teks Macromedia

3. Klik kanan pada frame 25, pilih insert frame. 4. Ganti nama layer 1 dengan nama Teks. 5. Klik kanan pada teks MACROMEDIA, pilih copy. 6. Tambahkan layer baru dengan mengklik ikon 7. Ganti nama layer 2 menjadi Horizontal. 8. Klik frame 1 layer Horizontal kemudian Klik kanan stage kosong dan pilih Paste

In Place.
9. Klik kanan frame 25 layer Horizontal, pilih Insert Keyframe. 10. Tambahkan Create Motion Tween pada layer Horizontal. 11. Ubah ukuran objek teks Macromedia pada frame 25 dengan mengklik ikon

pada toolbox, lalu ubah ukuran objek teks secara Horizontal.

Gambar 3.94 Mengubah Teks secara Horizontal

12. Setelah itu, atur property objek teks yang sudah diperbesar secara horizontal

dengan opsi Color = Alpha sebesar 10%.

Gambar 3.95 Mengatur setting Blur Hasil akhir layer horizontal yang sudah ditambahkan animasi blur akan terlihat seperti pada gambar berikut.

Gambar 3.96 Hasil Pengaturan Setting Blur Secara Horizontal

13. Lakukan langkah 6-12 untuk membuat animasi Font Vertical. 14. Terakhir, lakukan test movie.

BAB IV SIMBOL Sebelum kita membuat animasi movie clip, sebaiknya kita memahami simbol terlebih dahulu. Simbol adalah objek Flash. Di dalam simbol inilah animasi dibuat, jadi objek harus diubah ke simbol terlebih dahulu agar bisa dianimasikan. Dalam Flash, jenis simbol dibagi menjadi tiga, yaitu :

Movie Clip, berguna untuk membuat rangkaian animasi didalamnya. Jadi di dalam movie clip, kita bisa membuat animasi yang berdiri sendiri. Button, berguna untuk membuat tombol interaktif. Graphic, berguna untuk membuat gambar atau simbol diam yang siap dianimasikan Sebenarnya, animasi-animasi yang kita buat sebelumnya juga objek berupa simbol, yaitu simbol Graphic, tetapi kita melakukannya lebih cepat, tanpa harus melakukan konversi atau pengubahan ke simbol secara manual. Jadi, ketika kita memberikan perintah Create Motion Tween. Secara otomatis Flash akan mengubah objek tersebut menjadi simbol. 4.1 Animasi Movie Clip Pada trik ini, kita akan membuat animasi dengan simbol Movie Clip, yaitu dalam simbol tersebut kita bisa membuat serangkaian animasi yang berdiri sendiri. Adapun langkah-langkah yang dilakukan adalah sebagai berikut:
1. Klik menu Insert > New Simbol, isikan pada Name: Movie 1 dan pilihlah pada

Behaviour : Movie Clip

Gambar 4.1 tampilan jendela pada saat membuat simbol movie clip
2. Buat objek yang akan dianimasikan, klik ikon

, lalu gambarlah kotak tepat di tengah layar (dalam mode edit simbol, tengah layar ditandai dengan tanda plus). Pastikan objek yang dibuat ada pada stage movie clip (adanya ikon di sebelah ikon ).

Gambar 4.2 objek pada movie clip 3. Buat animasi rotasi sederhana dengan klik kanan pada frame 30, pilih Insert Keyframe. Kemduian Create Motion Tween. 4. Klik frame tengah (antara frame 1 dan frame 30) dan pada properties, pilih CW pada option rotate, atur putaran sebanyak 1 kali.

Gambar 4.3 Tampilan properties motion tween

5. Bila animasi putaran sudah terbentuk, kemudian kembali ke scene 1 dengan

mengklik ikon . 6. Setelah kembali ke scene 1, buka panel library dengan menekan control + L, ataupun klik pada menu Window > Library. 7. Drag movie clip yang sudah Anda buat ke dalam Stage.

Gambar 4.4 Objek Movie Clip yang ada pada panel Library
8. Pada keadaan ini Anda sudah bisa melakukan test movie, walaupun pada scene 1

hanya terdapat 1 frame. 9. Objek Movie Clip yang ada di stage, dapat menjadi objek animasi untuk Motion Tween, Guide Tween, dll. Dimana hasil dari animasi adalah animasi pada movie clip itu sendiri ditambah dengan animasi yang diberikan pada objek pada scene 1. 10. Pada contoh berikut merupakan animasi motion tween dimana objek movie clip bergerak dari kiri ke kanan.

Gambar 4.5 Animasi Motion Tween pada objek Movie Clip

11. Untuk mengetesnya, lakukan Test Movie.

Gambar 4.6 Hasil Test Movie objek Adapun hal-hal yang berkaitan dengan Movie Clip : 1. Pada frame 1 terdapat 1 Keyframe yang menandakan bahwa pada frame tersebut terdapat objek berupa simbol Movie Clip (Movie 1). Anda bisa memasukkan lebih dari satu kali Movie 1 ke Scene. Apabila ingin menggunakan animasi movie clip lebih dari satu kali, letakkanlah di layer yang berbeda. 2. Library adalah semacam tempat penyimpanan untuk simbol-simbol(movie clip, button, graphic) dan objek-objek yang diimpor dari tempat lain (sound, gambarbitmap, video). Fungsi utama Library agar objek-objek tersebut terorganisasi dengan baik, sehingga mudah digunakan kapan saja. 3. Flash juga menyediakan suatu Library khusus yang bernama Common Libraries, pada Library tersebut sudah tersedia berbagai jenis tombol, suara dan contoh actionscript dan kita bisa mempelajarinya untuk berbagai keperluan. 4.2 Button Objek button merupakan salah satu bentuk simbol selain Movie Clip dan graphic. Ketika akan membuat sebuah button (tombol), pada timeline button akan ditampilkan 4 tipe frame, antara lain: Up : keadaan normal tombol atau keadaan awal tombol Over : keadaan tombol ketika pointer mouse berada di atas tombol Down : keadaan ketika tombol ditekan Hit : area tombol yang dapat diklik Untuk lebih memahami pengertian dan penggunaan sebuah tombol, berikut akan diuraikan beberapa tahapan untuk membuat tombol sederhana.

1. Klik menu Insert > New Simbol. Kemudian pada kotak Name isilah dengan

nama Tombol 1. Pilih Button pada option Type.

Gambar 4.7 tampilan jendela pada saat membuat simbol Button 2. Klik frame Up, lalu buat objek elips dengan menggunakan Oval tool dengan warna biru. 3. Kemudian klik Text tool untuk membuat teks PLAY dengan warna merah kemudian letakkan di tengah bidang elips.

Gambar 4.8 Tampilan Button pada Frame Up 4. Kemudian klik kanan pada frame Over lalu pilih Insert Keyframe, ganti warna elips dengan cara klik area elips hingga aktif atau terblok kemudian ganti warna dengan hijau muda. Selanjutnya pada frame Down dengan cara yang sama ganti warna elips menjadi kuning. Frame UP Frame OVER Frame DOWN

Gambar 4.9 Tampilan Button pada masing-masing frame

5. Pada tahap selanjutnya, kembali ke stage utama (Scene 1) dengan mengklik ikon

. 6. Setelah di stage utama maka tampilkan panel Library dengan klik menu Windows > Library. Pilih objek tombol 1, lalu drag ke bidang stage. 7. Terakhir, lakukan test movie. Hint : untuk membuat button yang interaktif, kita dapat menggunakan Movie Clip, dengan cara sebagai berikut : 1. Karena frame hit jarang digunakan dan frame down secara umum mempunyai durasi yang pendek, maka kita bisa membuat movie clip untuk mengisi frame UP dan frame OVER saja. 2. Awalnya, buat dua movie klip yang berbeda untuk frame UP dan frame OVER. 3. Setelah selesai kembali ke scene 1 dan mulailah membuat button dengan mengklik Insert > New Simbol, pilih behavior : Button. 4. Insert-kan Keyframe pada Frame OVER dan frame DOWN. 5. Masukkan movie clip pada Frame UP dengan cara klik frame UP, lalu drag movie clip dari panel library. 6. Lakukan hal yang sama pada frame OVER dengan movie clip yang berbeda. 7. Untuk frame DOWN, karena durasinya pendek, Anda dapat membuat objek yang sederhana tanpa menggunakan movie clip.

8. Bila sudah selesai, kembali ke scene 1 dan lakukan test movie.

4.2.1

Memasukkan Button dari Panel Common Libraries

Pada Macromedia Flash 8 telah disediakan library tombol. Koleksi tombol ini bisa Anda dapatkan dengan mengaktifkan panel Common Libraries Button. 1. Pilih menu Window > Other Panels > Common Libraries > Buttons. 2. Pada panel Common Libraries Button tersebut terdapat beberapa kelompok tombol. 3. Klik gAnda folder tersebut untuk melihat tombol-tombol yang ada.

Gambar 4.10 Tampilan Common Libraries - Button 4. Untuk memasukkan tombol tersebut pada Stage, drag tampilan atau nama tombol tersebut menuju Stage.

BAB V SEKILAS TENTANG ACTIONSCRIPT Salah satu kelebihan Macromedia Flash adalah kemampuannya membuat sebuah animasi objek. Animasi yang sudah Anda buat akan terlihat lebih interaktif apabila ditambahkan dengan Actionscript. 5.1 mengenal fungsi ActionScript Salah satu fungsi Actionscript adalah memberikan sebuah konektivitas terhadap suatu objek, yaitu dengan menuliskan perintah-perintah di dalamnya. untuk membangun sebuah interaksi menggunakan ActionScript, Anda diharapkan mampu memahami 3 buah hal penting, antara lain : Event Target Action 5.1.1 event

event merupakan peristiwa atau kejadian untuk mendapatkan aksi pada sebuah objek. Event pada macromedia Flash dibagi lagi menjadi 4, antara lain : Mouse Event Keyboard Event Frame Event a. Mouse Event Event pada kategori ini berkaitan dengan penggunaan mouse, meliputi : on (press) keadaan ketika mouse pointer ditekan di atas tombol. on (realease) keadaan ketika mouse pointer ditekan di atas tombol dan dilepaskan. Event ini merupakan event yang sering digunakan untuk action sebuah tombol dan hamper sama dengan on (press). on (realeaseOutside) keadaan yang terjadi ketika mouse pointer menekan tombol dan melepaskannya di luar area tombol. dll.
b. Keyboard Event

Keyboard event adalah kejadian pada saat Anda menekan sebuah tombol keyboard. Keyboard event meliputi : KeyPress <Left> Aksi yang akan terjadi ketika tombol panah kiri oada keyboard ditekan. KeyPress <Right> Aksi yang akan terjadi ketika tombol panah kanan pada keyboard ditekan. Dll.

c. Frame Event Frame event merupakan event yang diletakkan pada keyframe. Misalnya, Anda akan menghentikan animasi objek movie clip pada frame 10. Cara membuat Frame Event untuk aksi tersebut adalah : 1. Klik keyframe 10 yang akan diberi action. 2. Tekan tombol F9 untuk menampilalkan panel action 3. Klik tanda + > Timeline Control > stop.

Gambar 5.1 Mengaktifkan Event stop Hasil akhir action stop pada panel action akan terlihat seperti berikut.

Gambar 5.2 Contoh Framescript. Adapun Frame Event yang lain adalah sebagai berikut : gotoAndPlay gotoAndStop nextFrame stopAllSounds dll.

4.2 Mengenal Struktur Bahasa Action Script

Untuk memahami sebuah pemrograman ActionScript, Anda harus memahami terlebih dahulu struktur bahasa pemrograman. Pemahaman tentang bahasa ActionScript memerlukan banyak latihan dan referensi. Pemahaman dasar ActionScript memungkinkan Anda akan dengan mudah menerapkannya secara langsung pada pengolahan animasi yang Anda buat sehingga hasilnya sesuai yang diharapkan. Struktur bahasa penulisan ActionScript dikenal dengan istilah syntax. Penulisan bahasa ActionScript pada setiap objek memiliki syntax yang berbeda-beda. Berkaitan dengan hal tersebut, maka pembahasan struktur bahasa ActionScript akan dibedakan menjadi beberapa hal, antara lain : syntax di frame syntax di button

a. syntax di frame Syntax di frame dapat disebut juga dengan framescript, artinya script yang diletakkan di frame. Agar sebuah script dapat dijalankan dengan sempurna, Anda harus mengetahui struktur atau syntax penulisan Script dengan benar. Bisaanya, syntax frame atau framescript hanya terdiri dari satu event saja misalnya :

Untuk menuliskan syntax di frame, Anda dapat langsung menuliskan perintah yang diinginkan. Misalnya, Anda ingin menghentikan animasi pada frame 20. Cara penggunaan framescript untuk perintah tersebut adalah sebagai berikut :
1. tentukan posisi frame yang akan diberi script, misalnya pada frame 20

(penempatan script harus berada pada keyframe).

2. Tekan tombol F9 untuk menampilkan panel Action. 3. Klik tanda + pada panel Action, lalu pilih Global Function > Timeline Control

> stop. Sebagai hasil, penulisan script akan terlihat sebagai berikut.

Gambar 5.3 Menghentikan Event Stop

Gambar 5.4 Hasil penulisan Framescript

Keadaan akhir frame yang telah ditambahkan script dapat Anda lihat pada Gambar berikut.

Gambar 5.5 Frame yang telah ditambahkan script

b. Syntax di button

Syntax di button adalah pemberian perintah script pada objek button/tombol. Agar tombol atau button yang Anda buat dapat dijalankan dengan baik, maka Anda harus tahu penulisan Script di button dengan benar. Syntax script di button memiliki bentuk umum sebagai berikut :

On (nama_event) { Perintah atau Handler } Cara membuat script di tombol :

1. Siapkan sebuah objek button pada stage. Misalnya, embillah objek button dari

Library. Klik menu Window > Common Library > Button. Pilih salah satu button, lalu drag dan masukkan button pada stage. 2. Klik objek button pada stage, lalu tekan tombol F9 untuk menampilkan panel Action.
3. Pada panel Action klik tanda +, lalu pilih Global Function > Movie Clip Control

> on > release.

Gambar 5.6 Mengaktifkan event on

4. Tempatkan kursor di belakang tAnda {, lalu tuliskan perintah Handler. Misalnya,

Anda ingin memberikan perintah menjalankan frame 10. Caranya, klik tanda +, lalu pilih Global Function > gotoAndPlay.

Gambar 5.7 Mengaktifkan Event gotoAndPlay

5. Masukkan angka 10 di antara tanda ().

Hasil akhir penulisan script akan terlihat seperti pada gambar berikut.

Gambar 5.8 Hasil Penulisan Script Button

4.3 Membuat Mouse Pointer dengan ActionScript

Latihan membuat framescript lain adalah latihan membuat mouse pointer pribadi : 1. Sebagai langkah pertama, buka lembar kerja baru.
2. Lalu untuk membuat objek mouse, dapat Anda lakukan di Movie Clip dengan cara

Insert > New Simbol, pilih behavior : movie clip dengan nama mouse.
3. Setelah masuk stage movie clip, Tampilkan ruler pada lembar kerja dengan

mengklik menu View > Ruler. 4. Setelah itu, buat guides seperti yang terlihat pada gambar, untuk membuat objek mouse pointer terlihat simetris.
5. Klik ikon

pada toolbox, lalu buat objek anak panah seperti berikut.

Gambar 5.9 Objek bebas Mouse pointer

6. Jaring seluru bagian objek menggunakan ikon

, setelah itu putar objek anak

panah dengan menggunakan ikon

Gambar 5.10 Merotasi objek Mouse Pointer

7. Pindahkan objek anak panah sehingga ujung anak panah berada pada tanda +.

Gambar 5.11 Menempatkan Ujung Mouse Pointer pada TAnda +

8. Ganti warna objek pada frame 5, 10, 15, dan 20 dengan terlebih dahulu Insert

Keyframe, dan setelah selesai buat Motion Tween.

Gambar 5.12 Keadaan frame setelah ditambahkan Motion Tween

9. Klik Keyframe 5, lalu klik objek panah pada stage. Pada panel properties Color

pilih Tint dan pilih warna merah.

10. Lakukan hal tersebut untuk Keyframe 10 warna biru, Keyframe 15 warna Hijau,

dan Keyframe 20 warna orange.

Gambar 5.13 Mengatur setting Color Tint pada Keyframe. 11. Kembali ke Movie utama (scene 1), kemudian drag mouse dari library menuju ke stage.
12. Setelah itu, klik objek anak panah dan beri nama kursor pada instance.

Gambar 5.14 Memberi nama Instance Objek Movie Clip Mouse Pointer
13. Klik frame 1, kemudian tekan tombol F9 untuk menampilkan panel action. 14. Klik tanda + pada panel action, lalu klik Global Function > Movie Clip Control

> Startdrag. Dalam tanda () isikan : nama instance,true

Gambar 5.15 Mengaktifkan Event Mouse Startdrag

15. Klik tAnda + pada panel Action, lalu klik ActionScript 2.0 Classes > Movie >

Mouse > Method > Hide. Hasil akhir penulisan script akan terlihat seperti pada gambar.

Gambar 5.16 Mengaktifkan Event Mouse Hide

Gambar 5.17 Hasil penulisan Script Mouse pointer pribadi

16. Langkah terakhir, lakukan test movie.

REFERENSI

Dwi Astuti. 2006. Teknik Membuat Animasi Profesional Menggunakan Macromedia Flash 8. Yogyakarta. ANDI OFFSET

Andi Pramono. 2004. Berkreasi Animasi dengan Macromedia FLASH MX Profssional 2004. Yogyakarta. ANDI OFFSET