Pertemuan 1 PENGENALAN ADOBE FLASH - …11sos.weebly.com/uploads/6/3/5/6/6356347/attachment.pdf · Tools berisi tombol-tombol untuk membuat dan mengedit gambar b. ... Hand tool Menggeser

Adobe Flash SMAK IPEKA P a g e | 1

Pertemuan 1 PENGENALAN ADOBE FLASH

Adobe Flash (Flash) merupakan standard profesional yang digunakan untuk membuat web yang lebih

hidup dengan permainan animasi dan sinkronisasi suara yang mengagumkan.

Dalam perkembangannya Flash sudah dipakai oleh banyak kalangan, bukan hanya untuk membuat web

tetapi juga untuk membuat profil perusahaan, CD interaktif, game, dll.

Mengatifkan Program Flash

Klik Start All Program Adobe Master Collection CS3 Adobe Flash CS3 Professional

Tunggu beberapa saat maka akan keluar layar kerja dari Flash sebagai berikut :

Dari pilihan diatas anda dapat memilih :

Create New Untuk membuat file yang baru pilih Flash File (ActionScript 2.0)

Open a Recent Item Untuk membuka file yang pernah dibuat pilih Open

Create from Template Untuk membuat file dari template yang sudah ada, pilih berdasarkan

kategori.


Catatan : Karena anda baru pertama kali membuka Flash maka pilih Flash File (ActionScript 2.0) untuk

membuat file yang baru

Pengenalan Area Kerja Flash

Beberapa Komponen Penting dalam Area Kerja Adobe Flash

1. Toolbar

Merupakan panel yang berisi berbagai macam tool. Tool-tool tersebut dibagi dalam 4 kelompok.

a. Tools berisi tombol-tombol untuk membuat dan mengedit gambar

b. View, untuk mengatur tampilan kerja

c. Colors, menentukan warna yang dipakai saat mengedit

d. Option, alat bantu lain untuk mengedit gambar

Lebih lengkapnya dapat dilihat lebih jelas pada tabel dibawah ini :

STAGE PROPERTY INSPECTOR

LAYER TIMELINE

STAGE

PANELS TOOLBAR

MENU INFORMATION BAR


Tool Nama Fungsi Shortcut

Selection tool Memilih dan memindahkan objek V

Sub Selection tool Mengubah bentuk objek dengan edit point A

Free Transform tool Mengubah ukuran atau memutar objek sesuai keinginan

Q

Gradient transform tool Mengubah warna gradasi F

Lasso tool Menyeleksi bagian objek yang akan diedit L

Pen tool Menggambar garis dengan bantuan titik-titik bantu seperti dalam pembuatan garis, kurva, atau gambar

P

Text tool Membuat objek teks T

Line tool Membuat atau menggambar garis N

Rectangle Tool Menggambar bentuk persegi panjang atau bujur sangkar

R

Oval Tool membuat bentuk bulat atau oval O

Pencil tool Menggambar objek secara bebas Y

Brush tool Menggambar objek secara bebas dengan ukuran ketebalan dan bentuk yang sudah ditetapkan

B

Ink Bottle tool Mengubah warna garis, lebar garis, dan style garis luar sebuah bentuk

S

Paint Bucket tool Memberi warna pada objek secara bebas K

Eye Dropped tool Mengambil contoh warna I

Eraser tool Menghapus objek E

Hand tool Menggeser tampilan stage tanpa mengubah pembesaran

H

Zoom tool memperbesar atau memperkecil tampilan stage

M atau Z

Stroke color Memberi warna pada suatu garis tepi

Fill color Memberi warna pada suatu objek

Black and White Memilih warna hitam dan putih saja

Swap Color Menukar warna fill dan stroke atau sebaliknya dari suatu gambar atau objek

Option tool Fungsi tambahan pada tool yang aktif


2. Time Line

Digunakan untuk mengatur dan mengontrol suatu animasi. Semakin panjang frame dalam layer maka

semakin lama animasi akan berjalan.

3. KeyFrame

Pada time line anda akan mengenal keyframe dalam membuat animasi. Keyframe adalah

sekumpulan frame-frame yang berisi objek di dalam timeline. Keyframe yang berisi objek ditandai

dengan bulatan hitam. Sedangkan Keyframe yang tidak diisi objek ditandai dengan bulatan kosong

dan disebut Blank Keyframe.

4. Stage

Merupakan area kerja, didalamnya anda bisa membuat objek, memasukkan gambar, teks, memberi

warna. Didalam Stage ini anda menempatkan objek yang akan dibuat animasi.

5. Panel

Beberapa panel penting dalam dalam Adobe Flash CS3 Professional,

diantaranya panel properties, Filter dan parameter, Action, library, color &

align info & Transform

6. Properties

Panel properties akan berubah tampilan dan fungsinya mengikuti bagian mana yang sedang

diaktifkan. Misalnya anda mengaktifkan line tool, maka yang muncul pada jendedla properties adalah

fungsi-fungsi untuk mengatur line/garis, seperti warna garis, bentuk garis, besarnya garis


7. Library

Berfungsi sebagai perpustakaan simbol/media yag akan

digunakan dalam animasi yang sedang dibuat. Simbol

merupakan kumpulan gambar baik movie, tombol (button),

sound dan gambar static (grafik)

8. Document Properties

Untuk melakukan pengaturan ukuran layar, warna backgorund, frame rate dan dimensi dari animasi

yang dibuat. Untuk memanggil kotak dialog Document Properties, pilih jendela properties dibawah

layar, kemudian pilih tombol size.

Judul dan diskripsi yang akan dimasukkan kedalam

metadata output. Bukan merupakan penamaan

file, jadi tidak masalah kalau tidak diisi

Dimensi atau ukuran stage yang diinginkan

Pilihan printer memaksimalkan ukuran movie

hingga area cetak penuh. Karena output

yanghasilkan animasi dan bukan print out, maka

pilihan yang diaktifkan adalah default

Klik dan pilih warna yang tersedia untuk

mengubah warna stage-area kerja flash

Kecepatan Flash dalam memutar animasi secara

utuh yang diukur dalam fps(frame per second)

Pastikan satuan yang terpilih adalah Pixel, karena

satuan ini yang akan digunakan


MENGGAMBAR BENTUK-BENTUK DASAR

1. Membuat garis dengan line tool

Flash menyediakan pilihan untuk membuat

beragam jenis garis. Pilih Line Tool. Kemudian lihat

pilihan di properties (kiri bawah). Masukan

ketebalannya. Dan untuk memulai garis klik pada

stage dan drag sepanjang yang anda inginkan.

2. Membuat Garis dengan Pencil tool

Pilih Pencil Tool, tentukan warna yang diinginkan dengan

memilih warna di pilihan COLOR pada properties. Untuk

membuat garis lurus, pilih Option STRAIGHTEN, untuk

membuat garis lengkung yang halus, pilih SMOOTH, untuk

membuat garis sesuai gerakan mouse pilih INK

3. Menggambar Lingkaran atau Elips

Pilih Oval Tool, untuk menggambar bentuk lingkaran atau Elipse.

Klik pada Stage dan Drag sebesar lingkaran yang dihendaki


4. Menggambar Kotak

Pilih Rectangle Tool kemudian teknik menggambarnya Sama

halnya dengan cara menggambar Lingkaran.

Apabila anda menginginkan bentuk sudut kotak yang lebih

halus, anda bisa ubah PROPERTIES nya, sebelum anda

menggambar kedalam stage

5. Menggambar Bentuk Bersegi Banyak (Polygon)

Pilih Polystar tool. Untuk menggambar persegi banyak atau

Bintang anda tinggal mengubah di propertiesnya. Pada kotak

dialog yang muncul anda tinggal pilih model yang diinginkan.

Cara menggambarnya anda tinggal drag sesuai ukuran yang

anda inginkan.

6. Menggambar Bentuk Bebas

Gunakan Pen Tool untuk menggambar bentuk bebas dan unik. Klik mouse

pada Stage, drag dan lepas maka akan terbentuk suatu garis. Gerakkan

kembali mouse kearah yang diinginkan, klik untuk membentuk suatu sudut

(Anchor point). Bila bentuknya merupakan kurva tertutup maka dapat

diberi warna.


7. Mengubah Ukuran /Memutar Objek

Pilih Free Transform Tool, untuk Mengubah Ukuran /Memutar Objek. Pilih objek yang

akan diubah ukuran/putar. Disisi obejek yang terpilih muncul kotak kecil (handle).

Sebelum melakukan perubahan ukuran maupun memutar objek, anda bisa pilih

option yang ada di toolbar

MENGGUNAKAN WARNA

1. Mengganti Warna

Untuk mengganti warna, anda gunakan Selection Tool untuk memilih objek. Kemudian pilih Stroke

Color untuk mengubah warna garis tepi dan Fill Color untuk mengubah warna isi objek

2. Warna Gradasi

Pilih menu Windows, Color Mixer. Jendela Color Mixer akan muncul

di sebelah kanan atas layar. Pilih objek yang akan diberi warna

gradasi (pilih dengan menggunakan Selection Tool). Di menu pilihan

Pull Down anda bisa memilih model gradasi yang anda inginkan.

Catatan : Untuk mengedit warna gradasi pilih Gradient Transform

Tool. Klik dan drag Handle yang muncul sesuai dengan arah yang

diinginkan.


LATIHAN 1

Buatlah gambar seperti gambar dibawah ini mengunakan perintah-perintah yang telah diuraikan

diatas

1. Buatlah data baru dengan mengklik menu FILE NEW 2. Atur properties animasi tersebut dengan mengubah parameter menekan tombol Size pada

Properties.

Setelah itu akan muncul tampilan berikut :

Ubah dimensi menjadi ukuran yang anda inginkan misalkan 400 x 300 dimana 400 adalah lebar dan 300 adalah tinggi. Kemudian ubah Background dengan warna putih dengan cara mengklik segitiga kecil kemudian pilih warnanya. Ubah pula Frame Rate menjadi 15 fps.

3. Dengan Rectangle Tool pada toolbar buatlah segiempat bertumpukan seperti gambar di bawah ini. Clik and drag mouse dari titik kiri atas ke titik kiri bawah Kemudian lakukan hal yang sama untuk segi empat di bawahnya


Catatan : sebelum mengambar dan setelah memilih Rectangle Tool pada toolbar, lihat dulu warnanya, apakah sudah sesuai dengan keinginan anda? Warna putih dengan garis merah diagonal berarti tidak memakai warna atau tidak memakai bagian itu. Dalam contoh ini object yang dibuat tidak memakai garis tepi (stroke).

4. Editlah sudut sudutnya dengan mengunakan Subselection Tool pada toolbar. Kemudian klik object yang akan diedit sudutnya dengan mengklik bagian tepi object tersebut. Bila berhasil akan muncul garis hijau di bagian tepi dan segi empat di tiap sudutnya. Untuk merubah posisi sudutnya, clik and drag segi empat tersebut ke tempat yang anda inginkan. Setelah sesuai dengan bentuk yang diinginkan click ke tempat kosong, maka garis hijau akan hilang.

5. Buatlah tempat roda dengan menghapus gambar mengunakan erase pada tool bar. Hingga

menjadi seperti gambar dibawah ini

6. Dengan elips Tool pada toolbar buatlah dua buah lingkaran yang dipasang sebagai roda seperti gambar dibawah ini.


Pertemuan 2 MENGENAL ANIMASI

Animasi berasal dari kata “Animation” yang dalam bahasa Inggris “To Animate” yang berarti

menggerakan. Jadi animasi dapat diartikan sebagai Menggerakan sesuatu (gambar atau objek) yang

diam

Jenis-jenis animasi dalam Flash

1. Frame by frame

2. Tweened Animation

a. Motion Tween

b. Motion Guide

c. Shape Tweening

d. Shape Hint

3. Masking

I. FRAME BY FRAME

Frame by frame adalah animasi yang biasa digunakan pada berbagai aplikasi program pembuat film animasi atau kartun. Pemahaman konsep animasi ini sangat simple, dimana anda memiliki gambar yang banyak yang memiliki sedikit perubahan. Bila gambar ini anda tampilkan secara berurutan maka gambar yang tampak seolah-olah merupakan gambar yang bergerak. Konsep ini sama seperti konsep pembuatan film kartun pada jaman dahulu. Meski konsepnya sangat sederhana dan sangat kuno, tapi konsep animasi frame by frame ini masih digunakan apabila semua type animasi yang ada dalam flash tidak dapat dilakukan. Dalam pembuatannya animasi frame by frame ini sangat rumit karena anda harus membuat gambar

setiap frame yang berbeda agar animasi kelihatan bergerak, tetapi anda dapat membuat animasi

dalam bentuk apapun.

Sebagai contoh,

1. Buat dokumen baru dengan memilih menu FILE, NEW, Flash File (ActionScript 2.0)

2. Gambarlah sebuah lingkaran ke dalam Stage, dengan menggunakan OVAL TOOL (berikan warna

Kuning pada lingkaran yang dibuat atau sesuaikan dengan warna yang anda inginkan)

3. Kemudian di Bar Time Line, di frame 5 anda klik kanan pilih Insert Key Frame


4. Sekarang gunakan Selection Tool untuk memilih objek lingkaran. Pada Frame 5 ini anda ganti

warna lingkaran menjadi warna Hijau (atau bedakan dari warna sebelumnya)

5. Coba ulangi langkah 3 dan 4, untuk Frame 10 15 dan 20. (masing-masing frame bedakan warna

lingkarannya).

6. Sekarang lihat animasi dengan memilih menu CONTROL, PLAY atau anda bisa menggunakan

tombol CTRL + ENTER

Selamat anda berhasil membuat animasi, ternyata gampang bukan ? 7. Simpan Hasil pekerjaan anda dengan nama AnimasiFrame-nama anda.

Catatan :

Dari animasi yang barusan anda buat, anda bisa mengembangkannya misalnya pada frame ke 5 gambar

lingkaran berubah ukuran atau muncul gambar yang lain, begitu juga di frame 10 dan seterusnya.

Sebagai latihan, coba kerjakan latihan berikut ini


LATIHAN 2

1. Buatlah Animasi frame by frame dengan ukuran width = 240 px dan height = 260 px. 2. Buatlah gambar yang sederhana dahulu yang merupakan gambar berurutan. Seperti gambar

dibawah ini. Gunakan BRUSH TOOL, jangan lupa atur dahulu warnanya (fill color) sebelum mengoreskan ke stage. Untuk lebih detailnya sesuaikan pula brush size dan brush shape. Catatan : Pada saat anda pilih Brush Tool, pastikan Object Drawing di Toolbar tidak terpilih (Supaya memudahkan mengedit gambar)

1 2 3

4 5 6

3. Setelah selesai. Buatlah gambar pada frame selanjutnya. Untuk memudahkan proses copykan frame pertama dengan menekan tombol F5 (Insert > frame), jika benar maka tampilan time line akan seperti gambar dibawah ini

Brush Size Brush Shape


4. Kemudian clik pada frame ke dua kemudian tekan F6 (convert to keyfarme) , jika benar maka

tampilan time line akan seperti gambar dibawah ini

5. Bila sudah seperti pada gambar diatas kemudian ubah gambar yang anda inginkan bergerak

(perhatikan contoh gambar di atas menurut urutannya no. 2). Intinya bahwa yang anda ubah hanya posisi lengannya.

6. Hal yang sama juga berlaku untuk membuat gambar pada frame 3, 4, 5 dan 6. Bila anda mengambar sampai frame 6 maka tampilan time line akan seperti gambar dibawah.

7. Untuk mencoba animasi yang sudah anda buat, tekan Ctrl-Enter 8. Setelah selesai simpan pekerjaan anda, dengan nama Latihan2-nama anda

Perhatikan frame ini

Perhatikan frame ini


Pertemuan 3 TWEENED ANIMATION

Motion Tween adalah fasilitas pada Adobe Flash yang berfungsi untuk menggerakkan object dalam satu layer. Agar object yang lain tidak ikut bergerak maka object tersebut harus diletakkan pada layer yang berbeda. Pada Motion Tween anda dapat menggerakkan object berdasar posisi maupun berputar, bahkan anda dapat mengubah warnanya.

Posisi awal dan posisi akhir pada sebuah gerakan (tween) ditandai dengan adanya keyframe. Jadi keyframe ini memuat data objeck. Data object yang dimuat dalam keyframe adalah data posisi, warna, ukuran dan rotasi. Anda juga bisa memasang keyframe di tengah-tengah tween bila anda menginginkan ada perubahan di tengah tween. Lebih jelasnya, buatlah latihan dibawah ini :

1. Siapkan dokumen baru dengan memilih menu FILE, NEW 2. Batlah Gambar seperti dibawah ini dan letakkan pada stage

Keyframe Akhir Keyframe Awal

Layer yang terdapat objeck

yang akan digerakkan

akan muncul tanda panah dan background biru sebagai tanda kalau sudah berujut motion tween


3. Tambahkan layer untuk menggambar objek Roda (Atur warnanya sesuai dengan selera anda)

4. Panjangkan frame hingga frame 30 dengan cara mengklik kanan frame ke 30 pada layer tersebut

kemudian pilih insert frame. Lihat gambar berikut

5. Kemudian buatlah motion tween pada layer roda dengan mengklik kanan keyframe roda (keyframe disimbolkan dengan frame yang ada titiknya) lalu pilih create motion tween. Jika benar maka time line menjadi biru dan terdapat garis putus-putus dan akan menjadi seperti gambar dibawah ini.

6. Kemudian buatlah keyframe pada frame terakhir dengan mengklik kanan frame terakhir roda lalu

pilih insert keyframe. Jika benar maka time line akan menjadi seperti gambar dibawah ini.


7. Pada saat ini anda sudah memiliki dua posisi object ditandai dengan dua keyframe. Jadi keyframe

adalah status motion tween. Untuk membuatnya bergerak anda tinggal merubah posisi pada keyframe yang lain. Caranya klik key frame yang belakang lalu ubah posisi roda ke sebelah kanan seperti gambar berikut.

8. Tekan enter untuk melihat hasil tween. Bila motion tween berhasil maka roda akan bergerak dari kiri

ke kanan. Ops….. ada yang kurang, rodanya memang bergerak tetapi tidak berputar, bagaimana caranya ?

9. Untuk membuat rodanya berputar maka klik Tween Properties seperti gambar dibawah ini.

10. Kalau semua telah selesai dan benar dikerjakan maka setelah ditekan enter akan terlihat roda yang

menguling dari kiri ke kanan. Untuk membuat perubahan warna atau transparansinya anda dapat mengklik posisi frame kemudian mengklik object yang akan anda ubah. Untuk parameternya dapat dilihat pada object properties berikut

Mode Tween

Motion : Posisi

Shape : Bentuk

Mode Tween

Motion : Posisi

Shape : Bentuk

Color

Brightness

Tint

Warna

Pengganti

Prosentase

Pencampuran


11. Kalau semua telah selesai dan benar dikerjakan maka setelah ditekan enter akan terlihat roda yang

menguling dari kiri ke kanan dan berubah warna 12. Simpan hasil kerja anda dengan nama : Animasi-Tween-nama anda LATIHAN 3

1. Buatlah dkumen baru dengan memilih menu File, NEW,

2. Buatlah tiga buah bintang seperti berikut. Susunan warna hijau, merah, merah.

3. Blok semua bintang tersebut kemudian Convert menjadi simbol dengan cara klik kanan, dengan

nama : Lampu

4. Gunakan Rectangle Tool untuk membuat kotak, lihat gambar

5. Klik 2x di gambar bintang (Lampu)

6. Insert Keyframe di frame 5. Susunan warna merah, hijau, merah.

7. Insert Keyframe di frame 10. Susunan warna merah, merah, hijau.

Mengganti

Transparansi Prosentase

Transparansi

Garis Pinggir (warna Merah)

Garis Pinggir (warna Merah)


8. Insert frame di frame 15.

9. Susunan layer seperti berikut:

10. Pilih Scene 1

11. Tambahkan 1 layer baru Buat balon seperti gambar berikut. Setelah selesai Balon tersebut Covert ke

Simbol (seperti langkah nomor 3). Beri nama symbol : BALON

12. Klik 2 kali di objek Balon, tambahkan 1 layer untuk memberikan tulisan Be what I Wanna be

13. Tambahkan 1 layer lagi untuk memberikan tulisan Kids fest, lengkapnya seperti berikut

14. Pilih layer 3 (tulisan Kids Fest). Insert Key Frame di frame ke-2, kemudian ganti warna tulisan

menjadi warna Biru

15. Ulangi langkah ke 14 untuk frame ke 3, 4 dan 5 dengan memberikan warna (Hijau, Hitam dan

Orange) atau sesuai dengan selera anda.

16. Di Layer 2 dan layer 1 blok sampai frame 5 dan klik kanan pada time line pilih Insert Frame, time line

lengkapnya dapat melihat gambar dibawah ini


17. Kembali ke Scene 1

18. Ganti Layer 1 dengan nama Lampu, ganti Layer 2 dengan nama Balon

19. Tambahkan 3 layer baru untuk mengetik tulisan Kidsfest 2011, Atrium Pejaten Village, 10 – 15

Desember 2011, seperti dibawah ini

20. Sekarang anda akan melengkapi animasinya. Di text 1 (tulisan Kidfest 2011). Create Motion Tween,

di frame 3 insert KeyFrame.

Pada frame 1 pindahkan text keluar stage (sehingga nantinya animasinya masuk dari luar sebelah

kiri ke dalam)

21. Lakukan hal yang sama untuk Teks2 dan Teks 3

22. Balonnya juga lakukan hal yang sama dengan memanfaatkan Create Motion Tween, tentukan

posisi awal dan akhir, lebih lengkapnya dapat dilihat bentuk Timeline dibawah ini

Create Motion Tween,

23. Simpan hasil kerja anda dengan nama Latihan3-nama anda

24. Jalankan animasi anda tekan CTRL + Enter


Pertemuan 4 SHAPE ANIMATION

Shape Tween adalah fasilitas pada Adobe Flash yang berfungsi untuk mengubah bentuk object dalam

satu layer.

Prinsipnya adalah mengubah atau men-tween bentuknya atau shapenya. Dengan tweening shape, anda

dapat membuat efek morphing yang membuat perubahan bentuk satu ke yang lain. Selain men-tween

shape, Flash juga dapat men-tween lokasi, ukuran dan warna shape.

Object yang dapat diubah bentuk adalah object shape. Bila object tersebut bukan sebuah shape maka

anda harus mengubah object tersebut menjadi object shape dengan cara menekan Ctrl+B (Break Apart).

Contoh objeck bukan object shape adalah object Teks.

1. Buat Dokumen baru dengan memilih menu File, New

2. Ketik angka 1 (atur jenis huruf dan ukurannya)

3. Kemudian di frame 15 anda buat Insert Key Frame

4. Tambahkan angka 2 masih di frame 15

Karena tulisan adalah teks blok maka anda harus membuatnya menjadi shape terlebih dahulu

5. Klik angka 1 pada keyframe 1 dan jadikan Shape. Pilih menu Modify, Break Apart atau klik kanan

pilih Break Apart

6. Ulangi langka 5 untuk angka 2

7. Untuk melakukan Shape tweening, klik salah satu frame diantara frame ke 2 sampai frame ke 14

sehingga akan membuat seluruh frame dari frame ke 1 sampai frame ke 14 menjadi tersorot

8. Pada Properties di kotak Tween, pilih Shape


Maka seluruh frame yang tadinya berwarna abu-abu menjadi hijau terang

9. Simpan hasil kerja anda dengan nama SHAPE Animation1-nama anda

10. Jalankan animasi anda dnegan menekan tombol CTRL + ENTER

Catatan anda bisa mengembangkan/memodifikasi animasi ini dalam bentuk yang lain

Catatan :

Untuk memperoleh animasi yang gerakannya lebih teratur dapat digunakan SHAPE HINT. Sebagai

contoh mari praktekkan latihan dibawah ini

1. Buatlah sebuah file baru

2. Dengan menggunakan Oval Tool buatlah objek seperti dibawah ini

3. Klik di frame 40 pada timeline, klik kanan mouse , pilih Insert Blank KeyFrame

4. Di posisi frame yang ke-40 buatlah persegi panjang seperti dibawah ini

5. Klik mouse dibagian tengah Timeline, kemudian di Properties, pada pilihan Tween, pilih SHAPE

6. Jalankan animasi

Sampai disini anda sudah membuat shape animtion yang standard, mari lanjutkan supaya gerakan

animasinya lebih teratur

7. Klik mouse pada frame yang pertama


8. Pilih menu MODIFY – SHAPE – ADD SHAPE HINT, akan muncul bulatan kecil berwarna merah

9. Ulangi sebanyak 3 kali kemudian drag masing masing titik a, b, c, d seuai gambar

10. Klik mouse pada frame terakhir (frame 40)

11. Pindahkan masing-masing titik a, b, c, d sesuai gambar. Titik akan berubah menjadi warna hijau

12. Klik kembali mouse pada frame yang pertama. Anda perhatikan bahwa titik berubah jadi warna

kuning, artinya Shape Hint telah berhasil

13. Simpan hasil pekerjaan anda dengan nama SHAPE Animation2-nama anda

14. Jalankan animasi

Coba anda bandingkan sebelum hasil animasinya sebelum diberikan Shape Hint….


Pertemuan 5 MOTION GUIDE

Pembuatan Motion Tween telah dibahas pada pertemuan seblaumnya. Motion Tween akan menggerakkan object dari satu posisi ke posisi yang lain dengan garis lurus. Kalau anda menginginkan gerakan objek tersebut tidak lurus maka anda dapat memasangkan motion guide pada tween tersebut. Dengan kata lain anda dapat membuat jalur yang akan dilewati gerakan objek tween mengunakan Motion Guide.

Dengan Motion Guide ini anda dapat membuat jalur pergerakan sesuai dengan garis yang anda buat

pada layer motion guide. Isi dari layer motion guide ini adalah garis dalam bentuk apa saja, bisa lurus,

belok, melengkung dan lain-lain.

Mari ikuti langkah-langkah dibawah ini sebagai contoh anda akan membuat suatu objek kemudian

animasinya sesuai dengan jalur garis yang anda inginkan.

1. Buatlah Gambar bola seperti dibawah ini pada kiri atas stage.

2. Gerakkan ke arah kanan bola mengunakan motion tween. (pelajari lagi modul 3 jika anda lupa). 3. Lalu click kanan layer hingga muncul tulisan seperti gambar berikut

layer motion guide

layer object yang gerakannya diatur oleh layer motion guide. Layer ini ditandai dengan posisi icon agak menjorok ke dalam


Kemudian pilih add motion guide. Kalau benar layer akan bertambah seperti gambar berikut.

4. Buat garis pada layer guide dengan diawali mengclick keyframe layer guide lalu membuat garis mengunakan line tool pada toolbar. Buat garis tersebut di state yang menandakan jalur pergerakan tween. Lihat gambar dibawah ini

5. Rubah garis lurus menjadi melengkung dengan cara mendekatkan mouse pada garis hingga gambar

mouse berubah seperti gambar dibawah ini, kemudian klik and drag ke bentuk lengkung sesuai keinginan anda.

6. Bila proses benar maka akan dapat terbentuk gambar seperti dibawah ini.

Tekan enter untuk melihat hasil motion guide. Kalau gagal coba lakukan TIP berikut ini Tip : Posisikan awal object dan akhir object sesuai dengan awal dan akhri garis guide. Garis guide

dapat dihilangkan dengan mengklik titik dibawah mata pada layer guide,

7. Simpan hasil kerja anda dengan nama Animasi-Motion Guide-nama anda


Pertemuan 6 MASKING

Masking adalah fasilitas Adobe Flash yang berfungsi untuk menutup gambar atau objek dan menampilkan gambar atau objek sesuai dengan objek mask yang anda buat. Misal objek mask adalah lingkaran maka bila animasi dijalankan akan tampak objek yang asli tetapi yang terlihat hanya bentuk lingkaran. Masking ini juga dapat dilakukan terhadap tween dan anda juga dapat melakukan tween terhadap layer masking.

Dengan metoda masking anda dapat mengatur objek yang akan ditampilkan dalam sebuah animasi. Metoda masking akan terlihat dalam stage bila kedua layer dalam keadaan lock. Bila tidak dalam keadaan lock masking tidak dapat berpengaruh terhadap view stage, tetapi akan tetap berjalan bila animasi dijalankan dalam mode preview. Sebagai latihan mari ikuti langkah dibawah ini 1. Buat dokumen baru 2. Buatlah tulisan pada layer 1 di tengah state seperti gambar dibawah ini

3. Kemudian pada layer yang berbeda (buat layer baru) buatlah gambar lingkaran pada posisi di

sebelah kiri tulisan seperti gambar dibawah ini

4. Buatlah semua layer menjadi 15 frame hingga timeline seperti gambar di bawah ini.

5. Buatlah tween pada layer dua (gambar lingkaran) dari kiri ke kanan tulisan. Hingga pada saat

dijalankan lingkaran menutupi tulisan.

Layer masking

Layer objeck yang dimasking. Layer ini ditandai dengan menjorok ke dalam.


6. Agar Mask menjadi melakukan masking pada layer 1 maka klik kanan layer dua lalu pilih mask. Lihat gambar berikut.

7. Jika langkah ke 5 betul berarti timeline akan berubah menjadi seperti gambar berikut.

8. Coba jalankan dengan menekan enter. Jika proses anda benar maka tulisan yang tampak adalah bentuk lingkaran seperti objeck mask yang menutup.

Tip : Setelah layer diset sebagai mask maka layer tersebut akan secara otomatis dikunci (lock) pada posisi ini layer tak bisa diedit. Untuk mengedit terlebih dulu membuka kunci dengan mengklik gambar kunci pada layer yang akan anda edit. Setelah diedit jangan lupa mengkunci kembali layer, karena masking tidak dapat berjalan bila layer tidak terkunci. Meski masking seperti tidak berfungsi tetapi pada saat anda export (publish) masking tetap dapat berfungsi.

9. Coba lakukan modifikasi pada animasi. Misalkan lingkaran sebagai masking yang diam tetapi tulisan sebagai yang dimasking justru yang bergerak.

10. Simpan hasil pekerjaan anda dengan nama Animasi masking-nama anda

Klik di sini untuk mengunci atau membuka kunci


Pertemuan 7 IMPORT DAN EXPORT MEDIA

Seperti halnya software-software yang lain Adobe Flash juga terdapat fasilitas export dan import. Fungsi import ini digunakan untuk memasukkan media lain misal gambar (jpg, gif, bmp dll), suara (wav, mp3 dll), vector (ai, wmf dll), animasi (swf, gif aminasi dll) atau movie (avi, mpg, mov, wmf dll). Terdapat dua metoda import yang terdapat dalam Adobe Flash yaitu Import dan Import to library. Kedua metoda ini memiliki maksud yang tersendiri, jadi anda harus menentukan metoda import apa yang akan anda gunakan. Import to Stage Fasilitas ini menghasilkan media yang anda import akan langsung ditampilkan dalam stage dan tersimpan pula dalam library. Jadi bila anda mengunakan fasilitas ini, anda harus mengatur dulu ke layer dan frame mana import anda lakukan. Metoda ini tidak dapat anda gunakan dalam import media suara. Meski anda melakukan import suara tetapi media suara tidak langsung masuk ke frame. Untuk suara anda tetap harus memasukkan ke frame dengan cara manual. Import to Library Fasilitas ini menghasilkan media yang anda import hanya masuk ke dalam library. Jadi bila anda akan mengunakan media tersebut, anda harus memasukkan melalui library. Jadi anda harus menampilkan docker library dengan cara menekan Ctrl+F11. Setelah muncul docker tersebut anda bisa mengunakan media tersebut dengan meng-click and drug media tersebut dan dimasukkan ke stage. Anda harus mengigat bahwa sebelum anda memasukkan media anda siapkan dahulu frame mana anda akan memasukkan media. Cara ini hanya diperuntukkan memasukkan media selain media suara. Untuk memasukkan media suara diperlukan cara tersendiri yang akan anda pelajari dalam latihan.

Fungsi export digunakan untuk mengubah animasi Adobe Flash menjadi media lainnya, misal: swf, wav, avi, mov, gif animasi, exe, wmf, html dll. Export ini dalam Adobe Flash lazim diistilahkan dengan Publish. Memang dalam Adobe Flash terdapat berbagai macam export yang dapat dilakukan. Modul ini hanya akan membahas export media berwujud swf. Anda memilih swf karena memiliki ukuran file yang kecil. LATIHAN IMPORT 1. Buat dokumen baru 2. Klik file pada pulldown menu kemudian akan terlihat seperti gambar berikut

Import yang di import langsung masuk ke stage dan library

Import to library yang di import tidaka masuk dalam stage tetapi hanya di Library


3. Dengan memilih perintah Import maupun Import to library akan muncul tampilan seperti dibawah

ini

4. Bila tadi anda memilih import maka gambar langsung tampil di stage. Sebagai contoh dapat dilihat

pada gambar berikut

Tip : Gambar dengan format jpg atau bmp akan selalu memberi warna dan background segi empat. Bila anda menginginkan gambar yang di import tidak mempunyai background atau background transparan anda sebaiknya mengunakan format gambar gif (gif mengenal warna transparan). Tentu saja saat membuat gambar dengan format gif backgrundnya harus dibuat transparan. 5. Bila anda ingin mengubah ukuran anda bisa mengunakan free transform tool pada tool bar. Bila

anda menekan tombol tersebut maka gambar akan menjadi seperti dibawah ini.

Tip : Pada saat mouse mendekati garis atau pointer atribut mouse akan berubah. Ada

3 macam atribut mouse, temukan dan coba masing-masing fungsinya.

6. Kalau anda melakukan import to library maka gambar tidak tampak pada stage. Untuk

menggunakan anda harus menampilkan library dengan F11 atau click window pull down lalu pilih Library. Kalau perintah benar akan muncul library seperti pada gambir berikut

Nama File Media

Type File Media

Direktory tempat File Media

Click and drag pointer segi empat ini ke tempat yang anda inginkan untuk mengubah ukuran


7. Untuk import suara prosesnya sama dengan import to library, sedang untuk pengunaannya akan

dibahas pada modul selanjutnya. LATIHAN EXPORT Fasilitas export pada Adobe Flash lebih dikenal dengan nama Publish. Ada juga export yang tidak terdapat pada publish yaitu export movie dan export image. Penjelasan tentang macam-macam export dapat dijelaskan pada langkah-langkah berikut. 1. Sebelum anda melakukan publish sebaiknya anda melakukan publish settings dengan cara click File

pada pull down menu lalu pilih publish settings. Maka akan muncul gambar berikut.

Dari gambar diatas anda dapat menset file apa yang akan anda inginkan sebagai animasi hasil publish. Untuk biasa digunakan swf, maka tanda centang di HTML sebaiknya anda hilangkan saja dengan mengklik tanda tersebut.

2. Setelah anda klik OK maka pengaturan setting publish telah selesai. Untuk mem-publish anda bisa mengklik File pada pull down menu lalu pilih Publish. Kalau proses publish berhasil anda akan melihat tampilan animasi hasil Publish. Tip : Untuk membuat media animasi, anda check swf saja. Jadi file hasil publish hanya swf. Hal ini

dilakukan agar proses publish lebih cepat. File hasil publish terletak di direktori tempat file Adobe Flash anda simpan.

Untuk menggunakan gambar ini click and drag icon lalu letakkan di stage


3. Export movie digunakan untuk membuat animasi dengan format video. Caranya adalah mengklik

File pada pull down menu lalu pilih Export Movie. Selanjutnya anda tinggal mengisi nama file dan format video yang akan anda buat. Dalam modul ini tidak membahas lebih lanjut export metoda ini.

4. Export image digunakan apabila anda ingin meng-export frame by frame ke dalam format gambar. Dalam modul ini tidak membahas lebih lanjut export metoda ini.


Pertemuan 8 MEMASUKKAN MEDIA SUARA

Untuk memperindah dan menghidupkan sebuah animasi anda dapat memasukkan suara untuk sound effect maupun narasi. Dengan tambahan media suara anda mengharapkan animasi yang anda buat akan lebih bagus. Cara memasukkan suara ke dalam animasi didahului dengan meng-import file suara. Cara meng-import suara sama dengan cara meng-import media lain yang telah diuraikan pada modul sebelumnya. Sebelum anda mencoba memasukkan media suara sebaiknya anda pahami dahulu parameter yang berhubungan dengan suara. Pada saat anda mengklik keyframe maka dibagian bawah stage terdapat parameter keyframe seperti gambar dibawah ini.

Properties tween telah dibahas pada modul sebelumnya. Properties sound berisi parameter suara yang berfungsi untuk mengatur pemunculan suara pada animasi yang anda buat. Parameter tersebut antara lain : Sound Parameter ini berisi nama file suara yang terdapat pada library. Kalau ingin diubah anda bisa mengklik panah di sebelah kanan tulisan dan anda pilih suara apa yang ingin anda tampilkan dalam frame tersebut. Bila dalam Library tidak terdapat media suara maka pada saat anda mengklik panah anda tidak mendapatkan nama file suara tetapi hanya tertulis none. Effect Parameter ini berfungsi agar anda dapat mengatur bagaimana suara itu muncul pada frame tersebut. Bisa muncul dari pelan terus keras, awalnya keras trus berakhir pelan, pindah channel kiri ke kanan dan lain lain. Bahkan anda dapat memilih custom dengan cara mengklik tombol Edit di sebelah kanannya.

Sync Mensinkronkan suara dengan frame. Loop Berapa kali suara akan muncul setelah frame dijalankan. Atau dengan kata lain jumlah pengulangan yang anda inginkan. Dengan mengatur parameter di atas anda dapat secara leluasa mengatur pemunculan suara seperti yang anda inginkan.

Properties Tween Properties Sound


Cara-cara memasukkan dan mengatur suara ke dalam frame dapat dilakukan dengan mencoba langkah-langkah dalam latihan berikut ini. LATIHAN Agar anda dapat leluasa mencoba memasukkan media suara, anda harus terlebih dahulu membuat animasi yang akan anda masuki media suara. Apa bila anda masih kesulitan membuat animasi yang terdapat dalam latihan ini sebaiknya anda membuka kembali modul yang sebelumnya.

1. Buatlah animasi bola memantul seperti gambar dibawah ini

2. Posisi bola pada frame 1 dan 30 melayang sedang pada frame 15 menyentuh lantai. Jadi saat animasi

dijalankan bola memantul ke lantai. 3. Bila prosedur import Anda benar maka dalam library akan muncul seperti gambar dibawah ini.

Untuk memunculkan library Anda dapat menekan Ctrl+F11.

File Suara hasil Import dari

C:\WINDOWS\Media


4. Buat layer baru dengan nama suara (double click layer untuk menganti nama). Kemudian buat keyframe pada frame 15 (klik kanan pada frame 15 lalu pilih insert keyframe). Kalau benar akan terlihat seperti gambar dibawah ini.

5. Klick keyframe 15 pad layer suara lalu ubah keyframe properties seperti gambar dibawah ini

6. Bila langkah anda benar maka time line akan berubah menjadi seperti gambar dibawah ini.

7. Jalankan animasi dengan menekan enter. Untuk melihat hasil akhir animasi tekan Ctrl F12 8. Simpan hasil pekerjaan anda dengan nama Media Suara-nama anda

Klik panah lalu pilih suara yang akan dimasukkan

Memberikan efek pada suara

Jumlah Repat bila diinginkan repeat suara

Mengedit Suara

File suara telah masuk kedalam frame

ditandai dengan munculnya grafik suara


Pertemuan 9 BUTTON

Button adalah komponen yang penting dalam Adobe Flash. Karena dengan button anda dapat membuat animasi yang interaktif. Misalnya dengan mengunakan botton user dapat memerintah animasi untuk melompat ke scene atau frame yang lain. Selain itu dapat digunakan membuat effek-effek yang lain. Di dalam button ada 2 macam keadaan yaitu Up, Over dan Down. Jadi untuk membuat buttonanda harus membuat tiga gambar. Bila kita mambuat button maka nomor frame akan berubah menjadi Up, Over, Down dan Hit.

Up : bila krusor berada di luar Hit Over : bila krusor berada di area Hit Down : bila mouse di klik dan krusor berada di area hit Hit : area untuk mengaktifkan fungsi button. Bila kosong maka areanya sesuai dengan gambar

yang ada.

Dengan tiga keadaan di atas maka button akan menjadikan animasi yang dibuat interaktif. Agar button yang kita buat menjadi lebih dinamis kita dapat memasangkan movie clip pada salah satu keadaan. Misalkan pada frame down kita pasangkan movie clip dan pada frame up gambar statis maka bila button tersebut dijalankan dan mouse berada di posisi hit maka gambar button tersebut bergerak dinamis sesuai dengan movie clip yang dipasangkan. Ada dua cara untuk mengunakan button yaitu : 1. Mengunakan Common Libraries yang sudah tersedia. Untuk

mengaktifkannya kita dapat mengambil Pulldown menu Windows > Common Libraries > Buttons. Dengan perintah ini akan muncul docker seperti gambar di sebelah kanan. Gambar tas menunjukkan folder yang berisi bermacam-macam button dan icon segi empat dengan tangan menandakan symbol button yang bisa digunakan. Sedangkan gambar diatas adalah bentuk button yang dipilih.

2. Membuat sendiri dari awal, dengan memilih di pulldown menu Insert > New Symbol. Setelah itu

akan muncul tampilan berikut ini :

Name adalah nama symbol yang akan tampil di library.

Jenis symbol yang akan dibuat


Jika sudah diberi nama dan jenis simbol (Button) yang akan dibuat maka klik OK dan tampilan akan menjadi seperti dibawah ini

Setelah tampilan Timeline berubah seperti gambar di atas maka anda bisa memulai mengambar pada stage. Untuk menjalankan interaktifnya button selalu mengunakan action script sebagai program bantunya. Dalam pengunaan action script pada button ada dua macam

on(press) {

perintah ;

}

on (release) {

perintah ;

}

On (press) : Perintah dilakukan saat tombol mouse ditekan. On (release) : Perintah dilakukan saat tombol mouse dilepas. Perintah : perintah-perintah action sript yang dijalankan. Sebagai latihan, coba buatlah animasi interaktif seperti dibawah ini : Keterangan : 1. Berisi tulisan seperti gambar diatas angka

sesuai dengan nomer frame. 2. Animasi tidak bergerak otomatis, tapi

menunggu respon tombol dibawahnya. 3. Tombol paling no 1 untuk melompat ke awal

frame (frame 1) 4. Tombol paling no 2 untuk melompat ke frame

sebelumnya (previous frame) 5. Tombol paling no 3 untuk melompat ke frame

selanjutnya (next frame) 6. Tombol paling no 4 untuk melompat ke akhir

frame (frame 15) Langkah kerja : 1. Buatlah tiga layer dan diberi nama seperti

Posisi gambar saat ditampilkan

Nama button yang sedang di edit


gambar diatas (Action, Teks, Tombol) 2. Buatlah scrip stop(); di semua frame pada layer action. 3. Buatlah tulisan frame dan angka dibawahnya seperti gambar diatas pada layer teks. 4. Copikan sampai frame ke 15, kemudian edit angkanya sesuai dengan nomer frame. 5. Buatlah tombol mengunakan common libraries dalam map play back. 6. Buatkan action script pada masing masing tombol dengan cara mengklik kanan tombol lalu pilih

action. Maka akan muncul tampilan seperti dibawah ini.

7. Untuk tombol no 1 isikan Action Script seperti list dibawah ini :

on (release) {

gotoAndPlay(1);

}

8. Untuk tombol no 2 isikan Action Script seperti list dibawah ini : on (release) {

NextFrame();

}


prevFrame();

}


gotoAndPlay(15);

}

11. Simpan hasil pekerjaan anda dengan nama Button-nama anda 12. Coba anda jalankan, apa pendapatmu ?

Tempat untuk listing action script Tanda kalau action scriptnya untuk button


LATIHAN 9 1. Buka file animasi Masking-nama anda yang pernah anda buat pada pertemuan-pertemuan

sebelumnya 2. Buat layer baru dan beri nama Kontrol, sehingga tampilannya seperti gambar dibawah ini

3. Tampilkan Library Button dengan memilih menu Windows, Common Libraries, Button 4. Buat objek tombol pada layer Kontrol yang barusan anda tambahkan, seperti dibawah ini

5. Pada Tombol Play tambahkan Script 6. Tambahkan Layer Baru dengan nama Script 7. Klik kanan pada layer Script di Frame 1 pilih Insert Blank Keyframe 8. Tambahkan script pada Frame 1 di Layer Script dengan Stopt()

9. Jalankan animasi anda, kemudian simpan dengan nama Latihan9-nama anda

Pilih Playback Rounded Rounded Green Stop

dan Rounded Green Play


Pertemuan 10 SCENE

Scene adalah satu macam animasi yang berisi berbagai layer dan frame. Pada animasi yang telah anda bahas sebelumnya hanya memiliki 1 scene. Bila anda akan membuat satu file animasi dengan dua macam animasi yang berbeda dan anda akan memisahkannya anda bisa membuatnya dengan 2 scene. Dengan menggunakan 2 scene anda dengan mudah melakukan editing karena meskipun terdapat dalam satu file tetapi masing-masing animasi terpisah. Untuk mengatur scene anda dapat mengaturnya dalam docker seperti dibawah ini :

Dengan mengunakan dua scene anda lebih leluasa melakukan lompatan dari satu frame ke satu frame dalam scene yang lain. Dalam pengunaannya untuk e-learning anda dapat memanfaatkan scene untuk memisahkan menu materinya. Jadi dalam pengeditannya anda lebih mudah. Untuk lebih jelasnya mari ikuti langkah-langkah berikut ini

Keterangan 1. Scene pertama

seperti modul 9 (Button-nama anda)

2. Scene kedua berisi seperti modul 9 tetapi tidak berisi angka melainkan huruf.

3. Tambahkan tombol huruf untuk scene angka dan tombol angka untuk scene huruf.

Nama Scene Duplicate

Scene

Hapus Scene

Tambah Scene


Langkah kerja

1. Buka file modul 9 (Button-nama anda) lalu save as dengan nama Scene-nama anda 2. Pada layer tombol buat tulisan huruf dengan segi empat seperi gambar diatas 3. Ubah tulisan huruf dan kotak menjadi tombol dengan mengklik kanan dan pilih convert to

symbol, lalu pilih button dan beri nama Tombol 4. Tambahkan action script pada tombol huruf dengan list script dibawah ini

on (release) {

gotoAndPlay("Huruf", 1);

}

5. Duplikat scene dengan cara mengklik tombol duplikat pada docker scene 6. Ubah nama scene ke dua menjadi huruf ( ada dua scene yang satu bernama ANGKA dan yang

satu HURUF) 7. Edit layer teks dari angka ke huruf berurutan dalam setiap frame 8. Buat tombol angka dan sciptnya seperti langkah 2, 3 dan 4. Tetapi mengunakan list script

sebagai berikut : on (release) {

gotoAndPlay("Angka", 1);

}

9. Coba jalankan animasi anda 10. Simpan hasil kerjanya.

Pertemuan 1 PENGENALAN ADOBE FLASH - …11sos.weebly.com/uploads/6/3/5/6/6356347/attachment.pdf · Tools berisi tombol-tombol untuk membuat dan mengedit gambar b. ... Hand tool Menggeser

Documents