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.
Adobe Flash
SMAK IPEKA
Page |1
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 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 :
Adobe Flash
SMAK IPEKA
Page |2
Tool
Nama
Shortcut
Selection tool
Memilih dan memindahkan objek
V
Sub Selection tool
Mengubah bentuk objek dengan edit point Mengubah ukuran atau memutar objek sesuai keinginan
A
Free Transform tool
Q
Gradient transform tool
Mengubah warna gradasi
F
Lasso tool
Menyeleksi bagian objek yang akan diedit Menggambar garis dengan bantuan titik-titik bantu seperti dalam pembuatan garis, kurva, atau gambar
L
Pen tool
P
Text tool
Membuat objek teks
T
Line tool
Membuat atau menggambar garis
N
Oval Tool
Menggambar bentuk persegi panjang atau bujur sangkar membuat bentuk bulat atau oval
O
Pencil tool
Menggambar objek secara bebas
Y
Rectangle Tool
Brush tool Ink Bottle tool
Menggambar objek secara bebas dengan ukuran ketebalan dan bentuk yang sudah ditetapkan Mengubah warna garis, lebar garis, dan style garis luar sebuah bentuk
R
B S
Paint Bucket tool
Memberi warna pada objek secara bebas
K
Eye Dropped tool
Mengambil contoh warna
I
Eraser tool
Menghapus objek Menggeser tampilan stage tanpa mengubah pembesaran memperbesar atau memperkecil tampilan stage
E
Hand tool Zoom tool Stroke color
Memberi warna pada suatu garis tepi
Fill color
Memberi warna pada suatu objek
Black and White
Memilih warna hitam dan putih saja Menukar warna fill dan stroke atau sebaliknya dari suatu gambar atau objek Fungsi tambahan pada tool yang aktif
Swap Color Option tool
Adobe Flash
Fungsi
SMAK IPEKA
H M atau Z
Page |3
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
Adobe Flash
SMAK IPEKA
Page |4
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
Adobe Flash
SMAK IPEKA
Page |5
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
Adobe Flash
SMAK IPEKA
Page |6
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.
Adobe Flash
SMAK IPEKA
Page |7
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.
Adobe Flash
SMAK IPEKA
Page |8
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
Adobe Flash
SMAK IPEKA
Page |9
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.
Adobe Flash
SMAK IPEKA
P a g e | 10
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
Adobe Flash
SMAK IPEKA
P a g e | 11
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
Adobe Flash
SMAK IPEKA
P a g e | 12
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. 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 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
Adobe Flash
SMAK IPEKA
P a g e | 13
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-Enter 8. Setelah selesai simpan pekerjaan anda, dengan nama Latihan2-nama anda
Adobe Flash
SMAK IPEKA
P a g e | 14
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. Layer yang terdapat objeck yang akan digerakkan Keyframe Akhir
Keyframe Awal
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, NEW 2. Batlah Gambar seperti dibawah ini dan letakkan pada stage
Adobe Flash
SMAK IPEKA
P a g e | 15
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.
Adobe Flash
SMAK IPEKA
P a g e | 16
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 Tween Motion : Posisi Shape : 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
Warna Prosentase Pengganti Pencampuran
Color Brightness Tint
Adobe Flash
SMAK IPEKA
P a g e | 17
Mengganti Transparansi
Prosentase Transparansi
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 Garis Pinggir (warna Merah)
Garis Pinggir (warna Merah) 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.
Adobe Flash
SMAK IPEKA
P a g e | 18
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
Adobe Flash
SMAK IPEKA
P a g e | 19
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
Adobe Flash
SMAK IPEKA
P a g e | 20
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. 2. 3. 4.
Buat Dokumen baru dengan memilih menu File, New Ketik angka 1 (atur jenis huruf dan ukurannya) Kemudian di frame 15 anda buat Insert Key Frame 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
Adobe Flash
SMAK IPEKA
P a g e | 21
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
Adobe Flash
SMAK IPEKA
P a g e | 22
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….
Adobe Flash
SMAK IPEKA
P a g e | 23
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. 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 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
Adobe Flash
SMAK IPEKA
P a g e | 24
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
Adobe Flash
SMAK IPEKA
P a g e | 25
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. 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 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.
Adobe Flash
SMAK IPEKA
P a g e | 26
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.
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
Adobe Flash
SMAK IPEKA
P a g e | 27
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
Adobe Flash
SMAK IPEKA
P a g e | 28
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. 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
Adobe Flash
SMAK IPEKA
P a g e | 29
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 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.
Adobe Flash
SMAK IPEKA
P a g e | 30
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.
Adobe Flash
SMAK IPEKA
P a g e | 31
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
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 : 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.
Adobe Flash
SMAK IPEKA
P a g e | 32
Cara-cara memasukkan dan mengatur suara ke dalam frame dapat dilakukan dengan mencoba langkahlangkah 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
Adobe Flash
SMAK IPEKA
P a g e | 33
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 Klik 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 frame ditandai dengan munculnya grafik suara 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
Adobe Flash
SMAK IPEKA
P a g e | 34
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
Adobe Flash
SMAK IPEKA
P a g e | 35
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
Adobe Flash
SMAK IPEKA
P a g e | 36
2. 3. 4. 5. 6.
gambar diatas (Action, Teks, Tombol) Buatlah scrip stop(); di semua frame pada layer action. Buatlah tulisan frame dan angka dibawahnya seperti gambar diatas pada layer teks. Copikan sampai frame ke 15, kemudian edit angkanya sesuai dengan nomer frame. Buatlah tombol mengunakan common libraries dalam map play back. 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
Tempat 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 anda 12. Coba anda jalankan, apa pendapatmu ?
Adobe Flash
SMAK IPEKA
P a g e | 37
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
Pilih Playback Rounded Rounded Green Stop dan Rounded Green Play 5. 6. 7. 8.
Pada Tombol Play tambahkan Script Tambahkan Layer Baru dengan nama Script Klik kanan pada layer Script di Frame 1 pilih Insert Blank Keyframe Tambahkan script pada Frame 1 di Layer Script dengan Stopt()
9. Jalankan animasi anda, kemudian simpan dengan nama Latihan9-nama anda
Adobe Flash
SMAK IPEKA
P a g e | 38
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 :
Hapus Scene
Nama Scene Duplicate Scene
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 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.
Adobe Flash
SMAK IPEKA
P a g e | 39
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.
Adobe Flash
SMAK IPEKA
P a g e | 40
