Pertemuan 1PENGENALAN 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 webtetapi juga untuk membuat profil perusahaan, CD interaktif, game, dll.

Mengatifkan Program Flash Klik Start All Program Adobe Master Collection CS3 Adobe Flash CS3 ProfessionalTunggu 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 OpenCreate 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

LAYER MENU TIMELINE INFORMATION BAR

STAGE

TOOLBAR PROPERTY INSPECTOR STAGE PANELS

Beberapa Komponen Penting dalam Area Kerja Adobe Flash1. Toolbar

Merupakan panel yang berisi berbagai macam tool. Tool-tool tersebut dibagi dalam 4 kelompok. a. Tools berisi tombol-tombol untuk membuat dan mengedit gambarb. View, untuk mengatur tampilan kerjac. 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 :

Tool Nama Fungsi Shortcut

Selection tool Memilih dan memindahkan objek V

Sub Selection tool Mengubah bentuk objek dengan edit point A

Free Transform toolMengubah ukuran atau memutar objeksesuai keinginan Q

Gradient transform tool

Mengubah warna gradasi F

Lasso tool Menyeleksi bagian objek yang akan diedit L

Pen toolMenggambar garis dengan bantuan titik-titikbantu seperti dalam pembuatan garis, kurva, atau gambar

P

Text tool Membuat objek teks T

Line tool Membuat atau menggambar garis N

Rectangle ToolMenggambar bentuk persegi panjang ataubujur sangkar R

Oval Tool membuat bentuk bulat atau oval O

Pencil tool Menggambar objek secara bebas Y

Brush toolMenggambar objek secara bebas denganukuran ketebalan dan bentuk yang sudah ditetapkan

B

Ink Bottle toolMengubah warna garis, lebar garis, dan stylegaris 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 toolMenggeser tampilan stage tanpa mengubahpembesaran H

Zoom toolmemperbesar atau memperkecil tampilanstage 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 ColorMenukar warna fill dan stroke atausebaliknya dari suatu gambar atau objek

Option tool Fungsi tambahan pada tool yang aktif

2. Time LineDigunakan untuk mengatur dan mengontrol suatu animasi. Semakin panjang frame dalam layer maka semakin lama animasi akan berjalan.

3. KeyFramePada 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. StageMerupakan area kerja, didalamnya anda bisa membuat objek, memasukkan gambar, teks, memberi warna. Didalam Stage ini anda menempatkan objek yang akan dibuat animasi.

5. PanelBeberapa panel penting dalam dalam Adobe Flash CS3 Professional, diantaranya panel properties, Filter dan parameter, Action, library, color & align info & Transform

6. PropertiesPanel 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. LibraryBerfungsi 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 PropertiesUntuk melakukan pengaturan ukuran layar, warna backgorund, frame rate dan dimensi dari animasi yang dibuat. Untuk memanggil kotak dialog Document Properties, pilih jendela properties dibawahlayar, kemudian pilih tombol size.

Judul dan diskripsi yang akan dimasukkan kedalam metadata output. Bukan merupakan penamaanfile, 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, makapilihan yang diaktifkan adalah default

Klik dan pilih warna yang tersedia untukmengubah warna stage-area kerja flash

Kecepatan Flash dalam memutar animasi secarautuh yang diukur dalam fps(frame per second)

Pastikan satuan yang terpilih adalah Pixel, karena satuan ini yang akan digunakan

MENGGAMBAR BENTUK-BENTUK DASAR1. 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 toolPilih 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 ElipsPilih Oval Tool, untuk menggambar bentuk lingkaran atau Elipse. Klik pada Stage dan Drag sebesar lingkaran yang dihendaki

4. Menggambar KotakPilih 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 BebasGunakan 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 ObjekPilih 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 pilihoption yang ada di toolbar

MENGGUNAKAN WARNA1. Mengganti Warna

Untuk mengganti warna, anda gunakan Selection Tool untuk memilih objek. Kemudian pilih StrokeColor untuk mengubah warna garis tepi dan Fill Color untuk mengubah warna isi objek

2. Warna GradasiPilih 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 1Buatlah gambar seperti gambar dibawah ini mengunakan perintah-perintah yang telah diuraikan diatas

1. Buatlah data baru dengan mengklik menu FILE NEW2. 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, apakahsudah 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 klikobject 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 2MENGENAL 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 diamJenis-jenis animasi dalam Flash

1. Frame by frame2. Tweened Animation

a. Motion Tweenb. Motion Guidec. Shape Tweening d. Shape Hint

3. Masking

I. FRAME BY FRAMEFrame 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 21. 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.

Brush Size 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 63. 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

Perhatikan frame ini

4. Kemudian clik pada frame ke dua kemudian tekan F6 (convert to keyfarme) , jika benar maka tampilan time line akan seperti gambar dibawah ini

Perhatikan frame 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-Enter8. Setelah selesai simpan pekerjaan anda, dengan nama Latihan2-nama anda

Pertemuan 3TWEENED 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.

Layer yang terdapat objeck yang akan digerakkan

Keyframe AwalKeyframe Akhir

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

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, NEW2. Batlah Gambar seperti dibawah ini dan letakkan pada stage

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.

Mode Tween Motion : Posisi Shape : Bentuk

Mode TweenMotion : PosisiShape : Bentuk

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

WarnaPengganti

ProsentasePencampuran

Color Brightness Tint

MenggantiTransparansi

ProsentaseTransparansi

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

Garis Pinggir (warna Merah)

5. Klik 2x di gambar bintang (Lampu)

Garis Pinggir (warna Merah)

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

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 keSimbol (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 be13. 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 danOrange) 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 Balon19. 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 322. Balonnya juga lakukan hal yang sama dengan memanfaatkan Create Motion Tween, tentukan

posisi awal dan akhir, lebih lengkapnya dapat dilihat bentuk Timeline dibawah iniCreate Motion Tween,

23. Simpan hasil kerja anda dengan nama Latihan3-nama anda24. Jalankan animasi anda tekan CTRL + Enter

Pertemuan 4SHAPE 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, New2. Ketik angka 1 (atur jenis huruf dan ukurannya)3. Kemudian di frame 15 anda buat Insert Key Frame4. 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 anda10. 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 ini1. Buatlah sebuah file baru2. 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 SHAPE6. 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 anda14. Jalankan animasi

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

Pertemuan 5MOTION 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.

layer motion guide

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

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 kemudiananimasinya 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

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 iniTip : 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 6MASKING

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.

Layer masking

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

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 ini1. Buat dokumen baru2. 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.

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 layertidak terkunci. Meski masking seperti tidak berfungsi tetapi pada saat anda export (publish) masking tetap dapat berfungsi.

Klik di sini untuk mengunci atau membuka kunci

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

Pertemuan 7IMPORT 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 StageFasilitas 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 LibraryFasilitas 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 IMPORT1. Buat dokumen baru2. Klik file pada pulldown menu kemudian akan terlihat seperti gambar berikut

Importyang di import langsung masuk ke stage dan library

Import to libraryyang di import tidaka masuk dalam stage tetapi hanya diLibrary

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

Direktory tempat File Media

Nama File Media

Type File Media

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.

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

Tip : Pada saat mouse mendekati garis atau pointer atribut mouse akan berubah. Ada3 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

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

7. Untuk import suara prosesnya sama dengan import to library, sedang untuk pengunaannya akan dibahas pada modul selanjutnya.

LATIHAN EXPORTFasilitas export pada Adobe Flash lebih dikenal dengan nama Publish. Ada juga export yang tidakterdapat 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 bisamengklik 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.

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 8MEMASUKKAN 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 Properties Sound

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 :

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

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

SyncMensinkronkan suara dengan frame.

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

Cara-cara memasukkan dan mengatur suara ke dalam frame dapat dilakukan dengan mencoba langkah- langkah dalam latihan berikut ini.

LATIHANAgar 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 dariC:\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 iniKlik panah lalu pilih suara yang akan dimasukkan

Mengedit Suara

Jumlah Repat bila diinginkan repeat suara

Memberikan efek pada suara

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

File suara telah masuk kedalam frameditandai dengan munculnya grafik suara

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

Pertemuan 9BUTTON

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 HitOver : bila krusor berada di area HitDown : bila mouse di klik dan krusor berada di area hitHit : 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

Nama button yang sedang di edit

Posisi gambar saat ditampilkan

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

T

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.

Tanda kalau action scriptnya untuk button empat untuk listing action script

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();}

9. Untuk tombol no 3 isikan Action Script seperti list dibawah ini :on (release) {prevFrame();}

10. Untuk tombol no 4 isikan Action Script seperti list dibawah ini :on (release) {gotoAndPlay(15);}

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

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

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

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

Pilih Playback Rounded Rounded Green Stopdan Rounded Green Play

5. Pada Tombol Play tambahkan Script6. Tambahkan Layer Baru dengan nama Script7. Klik kanan pada layer Script di Frame 1 pilih Insert Blank Keyframe8. Tambahkan script pada Frame 1 di Layer Script dengan Stopt()

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

ne

Pertemuan 10SCENE

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 :

Hapus Scene

Nama Sce DuplicateScene

Tambah Scene

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

K ete r a n g a n 1. Scene pertama

seperti modul 9 (Button-nama anda)

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

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

Langkah kerja

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

symbol, lalu pilih button dan beri nama Tombol4. 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 scene6. 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 frame8. 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 anda10. Simpan hasil kerjanya.