BAB 1 Mengenal Macromedia Flash

BAB 1 Mengenal 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 kerja”The working environment” di flash 8: Bagian-bagian penting dalam area kerja di atas diantaranya: Menu, Toolbox, Timeline, Stage dan Panel. Modul Macromedia Flash SMA 6 Malang

1

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 tool

Nama tool

Fungsi

Shortcut

Selection Tool

Memilih dan memindahkan objek

V

Subselection Tool

A Q

Gradient Transform Tool

Mengubah bentuk objek dengan edit points Mengubah atau memutar bentuk objek sesuai keinginan Mengubah warna gradasi

Line Tool

Membuat g aris

N

Lasso Tool

Menyeleksi bagian objek yang akan diedit Membuat obyek secara bebas berupa titik-titik sebagai penghubng Membuat teks (kata atau kalimat)

L

Free Transform Tool

Pen Tool

Text Tool Oval Tool Ractangle Tool Pencil Tool Brush Tool

Ink Bottle Tool Modul Macromedia Flash SMA 6 Malang

Membuat objek elips atau lingkaran Membuat objek berbentuk segi empat atau segi banyak Menggambar objek secara bebas Menggambar objek secara bebas dengan ukuran ketebalan dan bentuk yang sudah disediakan Memberi warna garis tepi (outline)

F

P

T O R Y B

S 2

Paint Bucket Tool

Memberi warna pada objek secara bebas

K

Eyedropper Tool

Mengambil contoh warna

I

Eraser Tool

Menghapus objek

E

Hand Tool

Menggeser stage

H

Zoom Tool Stroke Color

Memperbesar atau memperkecil objek Memberi warna pada g aris tepi

Fill Color

Memberi warna pada pada objek

M atau Z -

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 Timeline

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

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 & Parameters Modul Macromedia Flash SMA 6 Malang

3

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

Gambar 1.5: Panel Actions untuk membuat ActionScript

1.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 Library

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

Gambar 1.7: Bagian dari panel Color

Modul Macromedia Flash SMA 6 Malang

4

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

Gambar 1.8: Bagian dari panel Align & Info & Transform


5

BAB 2 Bekerja Dengan Macromedia Flash Pro 8 A. 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


6

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


7

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.


8

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.


9

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.


10

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.

Kampus SMA 6

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. Modul Macromedia Flash SMA 6 Malang

11

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 ( dan stroke color (

) untuk mengganti warna arsir,

) untuk perubahan warna garis.


12

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.


13

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. Modul Macromedia Flash SMA 6 Malang

14

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.


15

BAB 3 Model Animasi ANIMASI SEDERHANA Gambaran 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.


16

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. Modul Macromedia Flash SMA 6 Malang

17

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, Modul Macromedia Flash SMA 6 Malang

18

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.


19

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 Modul Macromedia Flash SMA 6 Malang

20

2

1 Pilih Close Button untuk mengakhiri

TUGAS 2

B.Animasi Tweening Ada 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.


21

1. Motion Tweening Pada 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.

Frame 1

Frame 5 Gambar Tweened frames

Berdasarkan 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 Guide Motion 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 path

Perhatikan 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 frameframe antaranya yang disebut in between.


22

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).


23


24

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.


25

7. Melihat Hasil Pilih menu control, test movie

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

2.

Shape Tweening

Pada 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. Modul Macromedia Flash SMA 6 Malang 26

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 ke15) 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 shape

4. 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


27

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.


28

Gambar 3. Jendela Dialog Pemilihan Jenis Animasi Untuk 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 6 Sebagai 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.

C

A B

D

Gambar 4. Ilustrasi Bola Pantul


29

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 30 b. Animasi Bentuk Dinamis Jenis animasi ini merupakan pengembangan dari animasi bentuk statis. Pada jenis animasi ini akan diberikan contoh objek kotak berubah menjadi teks kotak. Langkah-langkahnya adalah: Langkah 1: Buat bentuk objek bentuk kotak di frame 1 menggunakan rectangle tool. 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.


30

Gambar 6.Perubahan objek kotak menjadi teks “KOTAK” Sederhana 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


31

Gambar 7. Posisi layer dan Guide Layer Langkah 5: Pilih kembali layer 1, frame 1, pindahkan objek ke pangkal jalur, posisikan objek dengan tepat, sehingga terlihat lingkaran kecil di tengah-tengah objek persegi

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


32

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.


33

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.


34

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,


35

geser lingkaran ke ujung lainnya.

8. Pilih keyframe lingkaran time line 1,

Pilih tween motion agar animasi berlangsung halus/tidak kaku


36

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,


37

Tutup test movie dengan menekan close ( ).


38

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.


39

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.


40

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


41

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. Modul Macromedia Flash SMA 6 Malang

42

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.


43

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 (


).

44

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


45

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.


46

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 Modul Macromedia Flash SMA 6 Malang

47

3. Pilih OK Hasil publish bisa dibuka dengan double klik.

Hasil seperti berikut ini.


48

PROJECT MEMBUAT BERBAGAI ANIMASI 1. 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


49

•

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. 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 pilihlah pada color : Alpha dengan nilai 0 %


50

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 Masking

1. 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.


51

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 Rotasi

1. Klik Rectangle tool, lalu gambarlah segiempat panjang di kiri layar

2. Pada Timeline, klik kanan pada frame 1, piihlah Create Motion Tween 3. 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


52

PROJECT

Project 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. 2.

Buatlah dokumen baru di Flash. File → New. 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) Modul Macromedia Flash SMA 6 Malang

53

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.5 Hasilnya akan seperti gambar di bawah ini.


54

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.


55

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). Modul Macromedia Flash SMA 6 Malang

56

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


57

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

5. Klik rectangle tool gambar dibawah ini.

dan warna stroke dijadikan none

untuk membuat airnya dengan mendragnya ke stage seperti

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


58

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

8. Klik Di frame 15 pilih tween shape 9. Lalu copy frame 1 caranya : klik kanan pada frame 1 dan pilih Copy Frames kemudian Pastekan di frame 60 10. Klik Di frame 35 pilih tween shape Seperti gambar dibawah ini:

Selamat mencoba...(@_@) Jika semua sudah selesai tinggal kita menekan ctrl + enter dan nikmati hasilnya ( Jika sudah dianggap sempurna , mintalah untuk dinilai )


59

Project 3 Membuat 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.


60

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 (hours<12) { ampm = "AM"; } else{ ampm = "PM"; } while(hours >12){ hours = hours - 12; } if(hours<10) { hours = "0" + hours; Modul Macromedia Flash SMA 6 Malang

61

} if(minutes<10) { minutes = "0" + minutes; } if(seconds<10) { seconds = "0" + seconds; } Clock_text.text = hours + ":" + minutes + ":" + seconds +" "+ ampm; 7. Pada layer acton ketikan script pada frame 2 gotoAndPlay(1); 8. Insert key frame 2 pada layer dynamic text dan backround

9. Ctrl+Enter untuk melihat hasil

Selamat Mencoba dan berkreasi ….

Project 4 Membuat Navigasi Sederhana Pada dasarnya tutorial ini dapat dikembangkan untuk membuat sebuah permainan atau game yang sederhana. Mungkin Anda pernah melihat atau bahkan Anda sudah pernah bermain game pesawat tempur, untuk menggerakkan pesawat tempur tersebut kita dapat menggunakan tombol navigasi anak panah yang ada di dalam keyboard. Tombol anak panah atas, bawah, kiri dan kanan dipakai untuk mengendalikan gerak pesawat. Tentu Anda bertanya apa sulit untuk membuat navigasi dengan menggunakan keyboard? Tentu tidak karena Flash telah menyediakan printah-printah praktis untuk menggerakkan gambar atau objek apa saja lewat tombol-tombol pada keyboard. Berikut langkah-langkah membuat navigasi sederhana dengan menggunakan anak panah pada keyboard. 1. Buka halaman Flash dan buat 1 buah layer dengan nama layer navigasi


62

2. Pada layer navigasi klik file>inport>import to library pilih objek yang akan dijadikan navigasi utama.

3. Klik pada objek yang dijadikan objek navigasi kemudian tekan F9 dan ketikan script di bawah ini : onClipEvent (enterFrame) { if(Key.isDown(Key.UP)) { this._y -=10; } if(Key.isDown(Key.DOWN)) { this._y +=10; } if (Key.isDown(Key.RIGHT)) { this._x +=10; } if (Key.isDown(Key.LEFT)) { this._x -=10; } }

4. Tekan Ctrl+enter untuk melihat hasil


63

Macromedia Flash Professional 8: Proteksi SWF dengan Password Macromedia Flash menghasilkan file bertipe SWF yang bisa digunakan untuk situs Web, Multimedia Interaktif, atau aplikasi lainnya. Sudah bukan rahasia lagi, SWF sebenarnya bisa dibongkar kembali menjadi FLA yaitu format file project Flash yang berisi elemen seperti movie clip, action script serta elemen lainnya. Tentu bukan hal yang menyenangkan kalau ada orang lain yang dengan seenaknya menyontek hasil karya kita dengan meniru konsep desain dan mengambil action script dengan cara membongkar projectnya. Untuk inilah Macromedia menambahkan fitur baru pada Macomedia Flash Professional 8 untuk mengunci file SWF dengan kata sandi. Tanpa banyak omong langsung saja kita coba. 1. Klik menu [File] > [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.


64

BAB 1 Mengenal Macromedia Flash

Recommend Documents