BAB 1Mengenal Macromedia Flash

Program komputer Macromedia Flash 8 hadir untuk menambah kemampuan dan keterampilan siswa dalam animasi seperti animasi gambar, teks, dan aplikasi dengan program lain. Harapannya agar materi yang disampaikan dalam modul ini dapat dimengerti secara lebih atraktif, menarik dan mudah.

Macromedia Flash merupakan sebuah program yang didesain khusus oleh Macromedia, saat itu sebagai pengembangnya yang saat ini sudah dibeli oleh Adobe Incorporated sehingga berubah nama menjadi Adobe Flash, Flash didesain dengan kemapuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya.

Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan Database dengan pendekatan XML.

Beberapa jenis macromedia berdasarkan perkembangannya antaranya ada macromedia flash versi 5, kemudian berkembang kembali menjadi Macromedia 6 atau sering disebut sebagai macromedia MX, berkembang kembali menjadi Macromedia 7 atau sering disebut sebagai Macromedia MX 2004, dan berkembang kembali menjadi Macromedia Flash 8 dan saat ini setelah dibeli oleh Adobe berkembang kembali menjadi Adobe Flash CS3

Dibawah ini adalah beberapa Screenshoot Tampilan Utama Flash :

Macromedia Flash 8

Berikut penjelasan gambar di atas tentang tempat kerjaThe working environment di flash 8:

Bagian-bagian penting dalam area kerja di atas diantaranya: Menu, Toolbox, Timeline, Stage dan Panel. 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. Gambar 1.2: Contoh menu dan submenu Macromedia Flash Pro 8 1.2. Toolbox Dalam toolbox terdapat komponen-komponen 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: Gambar toolNama toolFungsiShortcut

Selection ToolMemilih dan memindahkan objekV

Subselection ToolMengubah bentuk objek dengan edit pointsA

Free Transform ToolMengubah atau memutar bentuk objek sesuai keinginan Q

Gradient Transform Tool Mengubah warna gradasiF

Line Tool Membuat g arisN

Lasso ToolMenyeleksi bagian objek yang akan dieditL

Pen ToolMembuat obyek secara bebas berupa titik-titik sebagai penghubngP

Text ToolMembuat teks (kata atau kalimat)T

Oval ToolMembuat objek elips atau lingkaran O

Ractangle ToolMembuat objek berbentuk segi empat atau segi banyakR

Pencil ToolMenggambar objek secara bebasY

Brush ToolMenggambar objek secara bebas dengan ukuran ketebalan dan bentuk yang sudah disediakanB

Ink Bottle ToolMemberi warna garis tepi (outline) S

Paint Bucket ToolMemberi warna pada objek secara bebasK

Eyedropper ToolMengambil contoh warnaI

Eraser ToolMenghapus objekE

Hand ToolMenggeser stageH

Zoom ToolMemperbesar atau memperkecil objekM atau Z

Stroke ColorMemberi warna pada g aris tepi-

Fill ColorMemberi warna pada pada objek-

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 lay er, maka semakin lama animasi akan berjalan.

Gambar 1.3: Layer dan frame pada Timeline1.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. 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. Panel Properties & Filters & Parameters digunakan untuk untuk meng atur ukuran background, warna background, kecepatan animasi dan lain-lain. Gambar 1.4: Panel Properties & Filters & Parameters1.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 dig unakan shortcut F9. Gambar 1.5: Panel Actions untuk membuat ActionScript1.5.3 Panel Library Library merupakan panel yang digunakan untuk menyimpan objek-objek berupa graphic atau gambar, button atau tombol, movie dan suara baik yang dibuat langsung pada stage ataupun hasil proses impor dari luar stage. Untuk memunculkan atau menyembunyikan panel ini dapat digunakan shortcut Ctrl+L.

Gambar 1.6: Panel Library1.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. Gambar 1.7: Bagian dari panel Color1.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. Gambar 1.8: Bagian dari panel Align & Info & TransformBAB 2Bekerja Dengan Macromedia Flash Pro 8A. Menjalankan Macromedia Flash 8

Pilih Start, All Programs, Macromedia, Maromedia Flash 8.

B. Membuat Dokumen Baru

Kegiatan 1

Untukmembuat dokumen baru , ikuti langkah-langkah sebagai berikut :

Pilih File, New

Muncul jendela New DocumentPilih General, Flash Document,Ok

C. Mengatur Dokumen Flash

Digunakan untuk untuk mengatur tayangan, background.

Untuk mengatur tayangan background , ikuti langkah-langkah sbb :

Pilih properties, size: 550 x 400 pixels

Muncul jendelaDocument properties.

Isikan Title: ::: Dasar-dasar Flash

Description: Dasar-dasar animasi menggunakan Macromedia Flash Dimention: 550 ppx (width x 500 px (height) Background color: ganti warna abu-abu.

Pilih Ok untuk mengakhiri.

Lihatlah perubahan background

D. Menyimpan Dokumen Flash

Pilih File, Save As

Simpan di flash disk masing-masing dan beri nama dasar-dasar flash, pilih save untuk mengakhiri.

E. Mengimpor Media

Digunakan untuk mengambil gambar dari tempat/folder lain yang sudah jadi seperti foto atau hasil scan.

Pilih File, Import, Import to Stage.

Muncul Jendela Import, pilih missal gambar picture1.wmf (atau ekstensi lain seperti jpg, bmp),

Pilih open untuk membuka gambar.

Gunakan View, Zoom Out untuk menampakkan seluruh gambar (memperkecil gambar).

Untuk memperbesar gambar gunakan menu View, Zoom In.

Gunakan Scroll horizontal atau vertikal di sebelah stage untuk memposisikan gambar.

Import dapat dilakukan langsung ke library (disimpan di program Flash) dengan cara

Pilih File, Import, Import library.

Agar gambar yang dipilih tersedia/muncul di library, pilih menu Window, Library

.

Gambar muncul di kotak library seperti berikut ini.

F. Mengorganisir Layer

Double klik pada layer1 ganti tulisan dengan mengetikkan kata foto, lakukan double enter untuk mengakhiri.

G. Membuat layer baru

Pilih insert layer ( ), double klik layer 2, ketik tulisan teks. Maka terbentuk layer baru.

H. Membuat Teks

Pilih Text tool (T) , tekan dan geser pointer pada gambar (stage) sampai berbentuk kotak, ketik Kampus SMA 6 Malang sehingga menjadi bentuk seperti berikut. Klik sebarang lokasi untuk mengakhiri tulisan.

I. Menggambar Obyek (Object Drawing )

Kegiatan 2

Diawali dengan membuka file baru, kali ini menggambar obyek kotak dan menulis teks.

Menggambar Obyek ( ikuti langkah-langkah sebagai berikut ) Pilih file, New

Muncul kotak New Document, pada general pilih flash document, akhiri dengan Ok.

Pilih rectangle tool ( )

x Lakukan penggambaran dengan tekan mouse, geser ke kanan dan bawah, lepaskan mouse.

J. Merubah Warna

Pilih selection tool ( )

Pilih properties pada property panel, pilih fill color ( ) untuk mengganti warna arsir, dan stroke color () untuk perubahan warna garis.

K. Mengganti nama layer

Double klik pada layer 1, ketik kotak.

L. Membuat Layer baru

Pilih insert layer ( ), double klik pada layer 2, ketik teks akhiri dengan menekan tombol enter pada keyboard. Pilih text tool (), buatlah kotak untuk mengisi tulisan, lakukan pengetikan menggambar akhiri dengan enter sehingga menghasilkan bentuk berikut ini.

M. Mengganti warna huruf

Pilih teks, pada properties klik text fill color ( ), pilih warna biru. Klik sembarang

tempat untuk mengakhiri.

Tugas 1:

1. Buatlah bentuk lingkaran dengan layer bernama lingkaran, beri warna merah.

2. Buatlah teks menggambar lingkaran dengan warna merah, layer teks 2.

3. Cek hasil anda seperti berikut ini.

Jika belum sama dengan yang tergambar, jangan segan untuk bertanya.

Tugas 2.

1. Lanjutkan membuat layer baru bernama garis, buatlah garis dengan menggunakan line tool ( ) dengan warna biru.

2. Buatlah layer baru dengan nama teks 3, buatlah teks menggambar garis, warna biru.

3. Rubahlah ketebalan garis dengan memilih garis, klik stroke height pada properties ( ), Rubah juga bentuk garis sesuai keinginan dengan klik stroke style ( ).

4. Cek dengan hasil berikut ini.

Simpanlah hasil kerja dengan nama drawing 2.

BAB 3Model Animasi

ANIMASI SEDERHANAGambaran Animasi pada Timeline

Anda akan menemui gambaran pada area timeline sewaktu membuat frame by frame animation atau motion tweened animation.

Gambaran keyframe pada area timeline dapat dilihat dalam bentuk titik hitam. Anda akan melihat berbagai gambaran berikut ini pada area timeline sewaktu membuat animasi:

Gambaran ini merupakan motion-tweened animation. Frame-frame tween diwakili oleh panah hitam dengan warna latar biru terang.

Gambaran ini merupakan shape-tweened animation. Frame-frame yang di tween diwakili oleh panah hitam dengan warna latar hijau terang.

Gambaran ini bisa terjadi pada motion atau shape tweened animation. Garis titik-titik tersebut menandakan bahwa keyframe terakhir tidak ada. Untuk melihat perubahan dalam suatu animasi, minimal dibutuhkan dua keyfame Kalau hanya terdapat 1 keyframe, Anda akan seperti melihat gambar-yang diam tidak bergerak.

Gambaran ini berisi frame-frame yang sama dengan keyframe awal yang diwakili oleh warna abu-abu terang dan gambar kotak putih menandakan frame terakhir.

Gambar 'a' kecil menandakan bahwa ada perintah atau script agar di frame tersebut melakukan sesuatu.

Gambar 'bendera merah' menandakan bahwa di frame tersebut berisi atau komentar.

A. Animasi Frame to Frame

Frame By Frame Animation animation ini seperti pekerjaan manual yang dilakukan oleh Manusia bila membuat film kartun dan penggunaannya sangat cocok untuk animasi yang rumit. Mereka menggambar satu per satu gambar pada frame dan setelah semuanya baru kemudian dianimasikan.

Cara kerja di Flash pun tidak berbeda seperti yang telah dijelaskan di atas. Kita menggambar frame per frame di stage, setelah itu baru dijalankan. Animasi jenis ini ukuran file jauh lebih besar dibanding tweened animation. Oleh karena itu disarankan bila animasi yang kita buat tidak terlalu rumit, gunakan tweened animation untuk mengurangi ukuran movie kita.

Berbagai model animasi yang ada, animasi frame to frame merupakan model yang paling sederhanan.

Kegiatan 3

Untuk membuat animasi Frame to Frame ikuti langkah-langkah sebagai berikut :

1. Membuat Dokumen baru

Pilih File, New, Flash Document, ok, maka muncul gambar seperti berikut.

2. Mengganti layer 1 menjadi garis

Lakukan double klik pada layer 1, ganti dengan mengetikkan kata garis, akhiri dengan

double klik.

Semula layer 1

menjadi garis

3. Membuat Garis

Pilih line tool (), buat garis vertikal, warna biru, dengan ketebalan 6,75 sehingga

menjadi gambar berikut.

4. Copy, Insert Blank Keyframe, paste in place.

Pilih garis dengan menggunakan selection tool ( ), klik garis, copy, insert blank

keyframe pada timeline, klik sembarang lokasi pada stage, klik kanan pilih paste in place,

geser garisnya.

Pilih garis,

Klik kanan,

Copy

Pointer di timeline 10, klik kanan, Insert Blank Keyframe

Pada stage, Klik kanan, Paste in Place

1

2 3Ulangi 4 kali hingga timeline ke 40, seperti berikut ini.

A. Menyimpan

File, save beri nama frame2frame

Menggeser garis dari titik 1 ke 2

Titik 1 Titik 2

Ulangi 4 kali hingga timeline ke 40, seperti berikut ini.

B. Menjalankan Animasi

Pilih menu Control, Test Movie. Lihatlah gerakan animasinya.

Pilih Close Button untuk mengakhiri

Close

2 1 Pilih Close Button untuk mengakhiriTUGAS 2

B.Animasi TweeningAda dua jenis tweened animation. Pertama adalah motion tweening, Anda menentukan property seperti posisi, ukuran dan rotasi untuk sebuah instance, group atau text block untuk satu titik keyframe, dan pada saat bersamaan Anda juga mengubah property yang sama di keyframe berikutnya.Kedua adalah shape tweening, Anda menggambar shape pada satu keyframe dan sekaligus juga mengubah bentuk shape tersebut di keyframe berikutknya. Berdasarkan informasi perubahan nilai atau shape tersebut, Flash membuat beberapa frame di antara keyframe tersebut (frames,in between) untuk membuat animasi.1. Motion TweeningPada animasi ini, Anda mengubah property dari instance, group, atau text block. Flash dapat men-tween posisi, ukuran, rotasi, dan memiringkan instance, group, dan tulisan. Flash dapat men-tween warna dari instance dan tulisan, gradasi warna, fade in atau fade out. Tetapi untuk men-tween warna dari group atau Tulisan, Anda harus membuat mereka menjadi symbol terlebih dahulu. Untuk membuat motion tweening, Anda tinggal menentukan keyframe awal dan akhir. Kemudian Flash otomatis akan men-tween frame-frame di antaranya sehingga terbentuklah animasi.

Gambar Tweened framesBerdasarkan ilustrasi di atas, ikan pada frame kedua, ketiga, dan keempat adalah hasil tweening yang dibuat oleh Flash berdasarkan pada frame pertama dan kelima. Frame ke-1 dan ke-5 merupakan frame kunci atau keyframe dalam proses tweening.

Motion GuideMotion guide berguna untuk membuat objek bergerak mengikuti jalur atau path yang Anda buat sendiri. Lihat Gambar. Prinsip animasinya mirip dengan motion tweening, hanya tinggal menambahkan path sebagai panduan untuk membuat animasinya.

Gambar Objek yang mengikuti pathPerhatikan pada Gambar terlihat bahwa objek ikan di atas akan bergerak mengikut garis atau path.Animasi selain menggunakan frame toframe, juga dapat menggunakan tweening.

Pembuatan animasi dengan metode tweening atau in betweening yaitu pengguna hanya perlu membuat adegan awal dan adegan akhir saja, kemudian computer akan menggenerate secara otomatis frame-frame antaranya yang disebut in between.

Kegiatan 4

Langkah-langkah pembuatan animasi Tweening sebagai berikut :

1. Membuat dokumen baru

Pilih menu File, New, Flash Document, Ok.

2. Membuat Layer

Lakukan double klik pada layer name (layer 1), ganti menjadi kotak, akhiri dengan menekan tombol keyboard enter.

3. Menggambar kotak

Pilih rectangle tool ( ), buatlah gambar kotak di stage.

4. Convert to Symbol

Pilih gambar kotak pada stage menggunakan selected tool ( ), klik kanan, pilih convert to symbol.

Muncul jendela convert to symbol, isikan name: kotak 1 dan pilih type graphic,

pilih Ok untuk menutup jendela.

Pilih Frame 25,

Klik kanan mouse, pilih insert keyframe,

Geser kotak ke kanan (panjang sesuai keinginan).

Geser ke tempat baru

5. Memberi efek Motion

Tujuannya adalah agar gerakan kotak menjadi halus caranya: Klik kanan pada timeline antar frame, pilih Creat motion tween.

1

2

3

6. Menyimpan

Simpanlah hasil kerja dengan nama

tweening, klik save.

7. Melihat Hasil

Pilih menu control, test movie

Lihatlah gerakan kotak ke kanan, akhiri dengan menekan close ( ).

2. Shape TweeningPada animasi ini, Anda mengubah atau men-tween bentuknya atau shape-nya. Dengan tweening shape ini Anda dapat membuat efek mirip morphing yang membuat perubahan dari bentuk satu ke yang lain. Selain men-tween shape, Flash juga dapat men-tween lokasi, ukuran dan warna shape.Untuk hasil yang baik biasanya digunakan satu shape. Jika Anda menggunakan banyak shape, semuanya harus dalam layer yang sama.

Gambar File latihan

1. Anda lihat pada gambar terdapat hanya satu layer yang memiliki dua keyframe. Keyframe pertama (frame ke-1) adalah tuhsan "1" dengan warna hitam dan keyframe kedua (frame ke-15) adalah tulisan "2" dengan warn merah.

Sesuai dengan namanya, tipe animasi shape tweening hanya dapat men-tween shape saja, jadi tidak dapat men-tween symbol, gambar bitmap, text block.

Karena tulisan di atas adalah text block, maka Anda harus membuatnya menjadi shape terlebih dahulu.

2. Klik tulisan "1" pada keyframe ke-1 dan jadikan shape. Pilih menu ( Break Apart (CTRL+B).

3. Ulangi langkah 2 untuk tulisan "2".

Gambar Text block yang berubah menjadi shape4. Untuk melakukan shape tweening, klik salah satu frame di antara frame ke-2 sampai frame ke-14 sehingga akan membuat seluruh frame dari frame ke-1 sampai frame ke-14 menjadi tersorot.

5. Pada properties di bawah, pada tween pilih shape

6. Jalankan Ctrl + Enter

7. Hasilnya

Kegian 5

Animasi Dasar Motion Tween Animasi ini merupakan animasi yang paling dasar karena animasi ini pada prinsipnya adalah pergerakan suatu objek (motion), seperti halnya definisi animasi yaitu teks/gambar yang bergerak. Langkah 1: Buat objek lingkaran menggunakan Oval Tool (C+O) Langkah 2: Seleksi objek menggunakan Selection Tool (C+V) atau Ctrl + A, untuk menyeleksi objek lingkaran. Setelah itu, klik kanan Convert to symbol pilih Movie Clip

Gambar 1. Jendela dialog Convert to Symbol (F8 )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

Gambar 2. Insert Keyframe (F6)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.

Gambar 3. Jendela Dialog Pemilihan Jenis AnimasiUntuk menghentikan test movie 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 ! Kegiatan 6Sebagai latihan dengan jenis motion tween Anda dapat membuat: Animasi bola pantulAnimasi 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 nlatar belakang, caranya dengan menambahkan layer baru yang dilengkapi dengan keyframe sepanjang objek tersebut berjalan.

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.

Gambar 5. Perubahan bentuk objek dari Frame 1 ke Frame 30b. 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. Langkah 2: Klik frame 40, insert keyframe. 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.

Gambar 6.Perubahan objek kotak menjadi teks KOTAKSederhana dan mudah bukan ? Untuk pengembangan Anda dapat membuat animasi berikut: i. Animasi Tumbukan Fisika Ilustrasi: Objek mobil bergerak dari titik A ke titik B. Objek truk bergerak dari C ke B. Titik B merupakan titk 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 stcik 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 Motion Path / Guide 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 3: Buat jalur bebas menggunakan Pencil Tool di layer guide Langkah 4: Gunakan Selection Tool, klik frame 30, dan insert keyframe di layer guide

Gambar 7. Posisi layer dan Guide LayerLangkah 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

Gambar 8. Posisi Objek setelah diletakkan di pangkal jalurLangkah 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 langkah-langkah tersebut Masih banyak animasi-animasi yang dapat dibuat dengan Macromedia Flash, namun langkah-langkah yang diberikan di atas kiranya dapat panduan bagi pemula yang ingin belajar animasi Flash. Selamat mencoba, semoga berhasil .... C. Animasi Motion Guide

Motion guide artinya obyek akan bergerak sesuai garis panduan yang dibuat.

Langkah-langkah membuat animasi motion Guide sbb :

1. Membuat Dokumen Baru

Pilih menu File, New, Flash Document, Ok.

2. Membuat Motion Guide

1. Pilih ikon motion guide ()

2. Membuat garis guide menggunakan pencil tool ()

3. Merubah layer name layer 1 menjadi lingkaran, menggambar lingkaran menggunakan oval tool ( ) menjadi bentuk berikut.

4. Memilih lingkaran, klik kanan, pilih convert to symbol, memberinya nama

lingkaran, type graphic, akhiri dengan memilik Ok.

5. Pada time line 25, klik kanan, pilih insert keyframe.

Gambar guide menjadi tak tampak seperti berikut ini.

6. Klik pada time line 25 di guide, lakukan klik kanan time line 25, pilih insert frame.

Nampak ada perubahan di frame kotak putih kecil di time line, perubahan arsiran, dan

garis guide terpilih.Bandingkan perintah keyframe yang berupa titik di timeline.

7. Memilih keyframe timeline 25,

geser lingkaran ke ujung lainnya.

8. Pilih keyframe lingkaran time line 1,

Pilih tween motion agar animasi berlangsung halus/tidak kaku

9. Lakukan pengetesan perjalanan lingkaran agar sesuai dengan garis guide (pandu)

dengan menggeser kotak merah di time line.

10. Melihat hasil animasi, pilih menu Control, test Movie,

Tutup test movie dengan menekan close ( ).

Simple Action Script

Action script merupakan bahasa script yang digunakan dalam pemrograman flash, dengan script ini animasi lebih menarik dan interaktif.

1. Membuat Dokumen baru, pilih menu File, New, Flash Document, Ok.

2. Merubah layer 1 menjadi bejana (karena cara sama dengan sebelum bab 6 maka

penjelasan tidak diulang).

3. Menggambar kotak menggunakan rectangle tool ( ) rubahlah warnanya sesuai

keinginan.

4. Merubah kotak menjadi symbol dengan klik kanan pada kotak, pilih convert to symbol.

Mengisi name bejana, dan type graphic, akhiri dengan Ok.

5. Membuat layer baru zat cair

6. Menggambar kotak, berikan warna berbeda.

7. Memasukkan frame dengan klik pada time line 30 layer bejana, klik kanan pilih

insert frame. Artinya bejana akan bergerak hingga waktu ke-30.

8. Memasukkan keyframe layer zat cair pada timeline 30. Lakukan klik kanan pada

time line 30 layer zat cair, pilih keyframe.

9. Free Transform

Pilih kotak zat cair, klik kanan, free transform.

Geser ke atas kotak zat cair

10. Pilih time line 1, layer zat cair

Pada properties, pilih tween: Shape, klik sembaran lokasi di stage.

Lihat ada perubahan di time line.

Lihat juga hasil animasi dengan menggeser kota merah di time line. Gambar yang betul

ketika bergeser, warna kuning juga bergerak.

Membuat Script Stop

1. Buat layer baru Stop, klik time line 1.

2. Pilih Action untuk memunculkan Action panel.

Klik tanda add a new item to the script (), pilih global function, timeline control,

stop.

3. Klik tanda minimize ( ) untuk menutup Action panel.

Membuat Script Tombol Play

1. Membuat layer baru tombol Play

2. Memunculkan library button, dengan pilih window, commont library, button.

3. Geser ke kanan, pilih bentuk buttonnya. Pilih button circle flat, circle flat purple

4.Tekan dan geser ke stage,

5. ubah ukuran agar serasi dengan gambar menggunakan free transform tool ().

Memberi Action pada tombol play

1. Pilih Action ( ) untuk mengeluarkan Action panel

2. Pilih tanda add a new item to the script ( ), pilih global functions, movie clip

control, on.

Pada jendela mucul script berikut

Pilih tanda show code hint ( ) setelah tanda kurung buka, pilih release dengan cara

double klik muncul tambahan script.

Tekan enter setelah buka kurung kurawal

Pilih tanda , pilih global functions, timeline control, play

Script akhir tombol play bertambah menjadi

Minimize kan action

Lakukan Test Movie, jika enter dipilih maka animasi bergerak

Menutup layer dengan menekan tanda close ( )

Lakukan penyimpanan, pilih menu File, save as, beri nama action script, klik save.

Mengatur Lebar layer

1. Pilih Properties,

2. ubah ukuran (size) menjadi 250 x 300 agar tidak banyak halaman yang nampak kosong.

3. Lakukan penyimpanan kembali dengan menu File, save

Presentation Publishing

Melanjutkan praktek sebelumnya, agar mudah dibuka perlu dibuat format file publikasi.

1. Pilih Menu File, Publish Setting.

7Keluar jendela pilih *.exe, pilih publish

3. Pilih OK

Hasil publish bisa dibuka dengan double klik.

Hasil seperti berikut ini.

PROJECTMEMBUAT BERBAGAI ANIMASI1. Cara Cepat membuat animasi

Klik Rectangle tool, lalu gambarlah kotak di sebelah kiri layar

Pada timeline, klik kanan frame 1, akan tampil menu, pilihlah Create Motion Tween

Kemudian klik kanan pada frame 20, akan tampil menu, pilihlah Insert Keyframe

Masih di frame 20, klik Selection tool, lalu pindahkan kotak ke sebelah kanan layar

Untuk melihat hasilnya klik menu control ( test movie (ctrl + enter) Simpan filenya klik File ( Save as beri nama animasi1.

2. Cara Cepat membuat animasi

Buka file animasi1

Klik menu Insert ( Timeline ( Motion Guide, akan tampil Guide : Layer 1 di atas Layer 1

Pada Guide : Layer 1, klik frame 1, lalu klik Pencil tool dan gambarlah garis seperti gambar

Setelah kita selesai menggambar garis di layer Guide : Layer 1, secara otomatis objek kotak di frame 1 akan menempatkan posisinya pada awal garis dan objek kotak di frame 20 akan menempatkan posisinya pada akhir garis.

3. Animasi Marquee

Aturlah ukuran dan kecepatan frame movie. Klik menu Modify ( Document, lalu isikan pada bagian Dimension : 400 px X 30 px dan Frame Rate : 6

Klik Text tool, lalu tulislah Selamat Datang di luar layar bagian kanan.

Pada bagian Timeline, klik kanan pada frame 1, pilihlah Create Motion Tween

Klik kanan pada frame 20, pilihlah insert Keyframe, lalu pindahkan teks ke luar layar bagian kiri

ANIMASI TRANSPARAN

1. Atur baground berwarna hitam, lalu klik Text tool dan tulislah Welcome to Flash Heaven dengan warna putih

2. Pada Timeline, klik kanan pada frame 1, pilihlah Create Motion Tween. Kemudian, klik kanan pada frame 20, pilihlah Insert Keyframe.3. masih di frame 20, pilih teks Welcome to Flash Heaven lalu atur properties,pilihlah pada color : Alpha dengan nilai 0 %

4. ANIMASI WARNA WARNI

1. Buat tulisan C E R I A

2. Pada Frame 1 tulisan C E R I A berwarna hitam

3. Beri Insert keyframe pada frame 5,10,15,20

4. Pada Frame 5 huruf E berwarna biru

5. Pada Frame 10 huruf R berwarna hijau

6. Pada Frame 15 huruf I berwarna merah

7. Pada Frame 20 huruf A berwarna kuning

5. Break Apart

1. Klik Oval tool, lalu gambarlah bulatan berbentuk oval di layar

2. klik kanan frame 20, pilihlah Insert blank key frame

3. Pada frame 20, klik teks tool lalu tuliskan BERUBAH di layar. Kemudian, pilih teks BERUBAH klik menu Modify ( Break Apart sebanyak 2 kali.

4. klik frame 1 untuk kembali ke frame 1, lalu atur Properties, pilihlah pada Tween shape.

6. Animasi Masking1. Klik Text tool, lalu tulislah MASKING di layar. Kemudian klik kanan pada frame 25, dan pilihlah Insert Frame.

2. Klik menu Insert ( Timeline ( Layer untuk membuat layer baru. Klik rectange tool, lalu gambarlah segi empat berwarna gradiasi orange kuning disebelah kiri teks.

3. Pada Timeline, klik kanan frame 1, pilihlah Create Motion Tween.4. Klik kanan pada frame 25, pilihlah Insert Keyframe, lalu pindahkan segiempat gradiasi ke sebelah teks.

5. Pindahkan layer 1 keatas layer 2, lalu klik kanan Layer 1 dan pilihlah Mask.

7. Animasi Rotasi1. Klik Rectangle tool, lalu gambarlah segiempat panjang di kiri layar

2. Pada Timeline, klik kanan pada frame 1, piihlah Create Motion Tween3. Klik kanan pada frame 15, pilihlah Insert Keyframe, lalu pindahkan segiempat panjang ke kanan layar.

4. Klik pada frame 1 untuk kembali ke frame 1, lalu atur Properties, isikan pada Rotate : CW dengan nilai 2

PROJECTProject 1

KALEIDOSKOP

Pernahkah anda melihat kaleidoskop? ( klik disini untuk melihat contoh kaleidoskop) Sebuah tabung kecil seperti teropong yang ketika kita gerak-gerakkan maka kita akan melihat bentuk-bentuk yang berwarna-warni.

Pada dasarnya, kaleidoskop itu terdiri dari beberapa potongan lingkaran.Nah, kita bisa membuat kaleidoskop versi digital dengan menggunakan Flash.

Setting the stage.

1. Buatlah dokumen baru di Flash. File New.2. Default size adalah 550 x 400 px. Kita tidak perlu mengubah ukuran stage.

Membuat potongan lingkaran

1. Buatlah sebuah lingkaran dengan menggunakan oval tool (atau O untuk shortcut).

2. Buatlah sebuah garis vertikal yang membelah lingkaran yang baru kita buat menjadi dua. Lihat gambar 2.

3. Pilih garis tersebut dan copy paste in place (ctrl + shift + v)Kemudian pilih menu Modify Transform Scale and Rotate (ctrl + alt + s).Maka akan muncul dialog tab seperti pada gambar dibawah. Isikan kolom Rotate sebesar 22.5

Maka, hasilnya akan terlihat seperti pada gambar 3.

4. Hapuslah fill dan garis luar lingkaran tersebut sehingga membentuk potongan pizza seperti gambar 4.

5. Pilih bentuk potongan lingkaran tersebut dan convert menjadi symbol movieclip.Tekan F8 untuk memunculkan dialog convert to symbol.Namai symbol tersebut dengan nama 'potongan' dan pilih Movieclip diantara 3 pilihan yang tersedia.Ubahlah nama layer 1 menjadi 'Pecahan'.

6. Klik tool Free Transform Tool (Q). Geserlah pivot point ke bagian bawah (sudut) potongan lingkaran tersebut.

7. Copy Paste in Place (ctrl + shift + v) potongan tersebut dan pilih menu Modify Transform Scale and Rotate (ctrl + alt + s).Isikan bagian Rotate sebesar 22.5Hasilnya akan seperti gambar di bawah ini.

8. Ulangi langkah 7 sampai semua potongan membentuk formasi lingkaran seperti gambar di bawah.

9. Klik layer Pecahan dan tekan F8 untuk memunculkan dialog convert to symbol.Beri nama 'Kaleidoskop' dan pilih Movieclip. Biarkan Registration di tengah.

10. Pada bagian Library (Tekan L atau menu Window Library), pilihlah movieclip Pecahan. Klik kanan pada movieclip tersebut dan pilih Edit.

Dalam stage movieclip Pecahan, buatlah sebuah layer baru bernama 'Warnawarni' dan drag layer tersebut hingga berada dibawah layer 1.Buatlah beberapa segi enam yang berwarna warni. Pilih tool Rectangle (Klik beberapa detik) dan pilih polystar tool (shortcut R).

Copy paste segi enam tersebut sehingga membentuk formasi seperti yang terlihat pada gambar di bawah ini.

Pilih layer Warnawarni dan tekan F8 untuk convert formasi segi enam tersebut menjadi movieclip.Posisikan tepat di sebelah kiri bentuk potongan lingkaran.

Pada layer 1, klik frame 40, dan masukan frame (Klik kanan Insert Frame).Pada layer Warnawarni, klik frame 20.Tepat di frame 20, masukkanlah keyframe (Klik kanan Insert Keyframe).Masih di frame 20, geserlah movieclip warnawarni tepat ke sebelah kanan potongan lingkaran (tips : sambil mendrag movieclip tsb, tekan Shift agar posisi y tidak berubah)Klik diantara frame 1 sampai 20 dan klik kanan Create Motion Tween

Klik frame 40 pada layer Warnawarni, dan masukkan keyframe.Pada frame 40, geserlah posisi movieclip Warnawarni tepat seperti pada posisi di frame 1.Kemudian diantara frame 20 dan 40, klik kanan Create Motion Tween.Klik tab Properties (Window Properties), dan pada bagian Rotate, pilih CW dan kolom sebelahnya 1.

Setelah itu, pilih layer 1 dan ubah menjadi Mask dengan cara klik kanan Mask.Play movie dengan menekan ctrl + Enter.

Anda bisa membuat variasi animasi warna kaleidoskop dengan mengubah bentuk movieclip Warnawarni dan pergerakannya (tween animation, rotation, dsb).

Selamat menikmati visualisasi kaleidoskop yang ajaib Project 2

Animasi Ombak

Untuk membuat animasi ombak , ikuti tutorial sebagai berikut :

1. Buka program flash 8

2. Ubah ukuran stage menjadi 768 x 576 pixels.

3. Ganti warna bacground menjadi warna hitam

4. Ganti warna fill color menjadi #336699 dan warna stroke dijadikan none 5. Klik rectangle tool untuk membuat airnya dengan mendragnya ke stage seperti gambar dibawah ini.

4. Klik kanan di frame 15 lalu klik insert keyframe, Ubah gambar airnya dengan cara tarik ke atas menggunakan selection tool yang sebelah kiri Gambarnya :

7. Klik di frame 1 lalu pilih tween shape

gambarnya

Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>

8. Klik Di frame 15 pilih tween shape9. Lalu copy frame 1caranya : klik kanan pada frame 1 dan pilih Copy Frames kemudian Pastekan di frame 6010. Klik Di frame 35 pilih tween shapeSeperti gambar dibawah ini:

Selamat mencoba...(@_@)Jika semua sudah selesai tinggal kita menekan ctrl + enter dan nikmati hasilnya

( Jika sudah dianggap sempurna , mintalah untuk dinilai )

Project 3Membuat Digital Clock di Flash

Bagaimana perasaan Anda ketika berhasil membuat sebuah aplikasi sederhana?

Pastilah bangga bukan, Jika Anda ingin berkreasi membuat aplikasi sederhana

tersebut disinilah jawabannya. Tutorial ini akan menuntun Anda membuat aplikasi

sederhana berupa Digital Clock yang dibuat di Flash 8. Dengan dukungan Action

Script yang lebih mudah dipahami, Anda akan dapat membuat aplikasi sederhana

tersebut dalam hitungan detik. Percaya peu hana (percaya atau tidak)

Langkah Pembuatan

1. Buka halaman Flash dan buat 3 buah layer dengan nama layer action, dynamic

text, dan backround.

2. Buat ukuran document

3. Pada layer backround buat desain untuk dijadikan backround.

4. Pada layer dynamic text buat text tool dengan pilihan Dynamic Text.

5. Buat nama variable pada dynamic Text dengan nama Clock_text

6. Pada layer action ketikan script pada frame 1

time=new Date(); // time object

var seconds = time.getSeconds()

var minutes = time.getMinutes()

var hours = time.getHours()

if (hours12){

hours = hours - 12;

}

if(hours [Publish Settings...].2. Beri tanda pada kotak Flash.3. Aktifkan tab menu [Flash].4. Pada grup Option beri tanda kotak Protect from import dan Debugging permitted.5. Masukkan kata sandi pada kotak Password.6. Klik [Publish] untuk mengkompilenya menjadi SWF yang terproteksi.

Nah, dengan cara diatas Macomedia Flash akan meminta kata sandi jika file tersebut akan diimport. Juga ketika akan dikonversi kembali menjadi FLA.

Kampus SMA 6 Malang

Frame 5

Frame 1

A

B

C

D

Gambar 4. Ilustrasi Bola Pantul

1