Job Sheet (Lembar Kerja) Multimedia Membuat Animasi Tingkat Dasar
Job Sheet (Lembar Kerja) Multimedia Membuat Animasi Tingkat Dasar
Pengertian Umum
Frame berarti adegan, berarti satu frame pada movie anda melambangkan satu potongan
adegan, yang akan menyusun keseluruhan animasi atau movie anda. Setiap frame memiliki
properti, yang menentukan bagaimana frame tersebut menyusun movie. Keyframe berarti
frame kunci anda dapat meletakkan obyek pada keyframe (berlambang titik hitam)
1
Frame dengan shape tween, berarti bahwa tweening dilakukan untuk obyek
diantara dua keyframe berupa morphing dari benda yang bukan symbol atau
group. Shape tween hanya berlaku untuk obyek yang telah broken apart, ctrl +
b shortcut.
Frame kosong , kalau setelah sebuah keyframe terdapat rangkaian frame yang
kosong, maka movie akan menampilkan image atau obyek terakhir pada
keyframe sebelumnya. Hal ini dapat anda terapkan untuk membuat sebuah
background yang statis dengan animasi pada layer bagian atasnya.
Sound Frame , pada setiap keyframe dapat anda sertakan suara/sound, dengan double
klik, pilih frame properties, kemudian pilih tab sound. Sebelumnya anda telah mengimpor
file sound dengan ekstensi wav. Semacam grafik akan muncul untuk melambangkan
adanya sound pada frame tersebut.
Insert Frame, kita dapat menyelipkan rangkaian frame sekaligus dengan memilih frame
tab sekaligus, katakanlah dari timeline 10 hingga 25, dari layer 1 hingga 3, kemudian
setelah highlight muncul, kita klik kanan dan pilih insert frame, there you go.
Insert Blank Keyframe, kita menyelipkan sebuah keyframe kosong, berguna untuk
menghentikan animasi pada layer tersebut. Sebagai contoh, bila anda ingin agar animasi
pada suatu layar berhenti pada frame ke 25 maka anda klik kanan, dan pilih insert blank
keyframe.
Reverse Frame , berarti membalikkan urutan frame. Sangat berguna untuk
menimbulkan kesan reversi, misalnya sebuah tabel muncul perlahan dari bawah ke atas,
setelah di klik anda menginginkan efek bahwa tabel tersebut perlahan kembali ke bawah.
Anda tidak perlu membuat lagi motion tween yang baru cukup dengan copy frames yang
mengandung sekuens muncul, paste pada tempatnya, kemudian highlight dan pilih
reverse frames...done.
• Letakkan sebuah obyek pada frame pertama pada bagian kiri dari movie anda.
(pastikan berupa grup atau simbol).
• Kemudian insert keyframe pada angka timeline 30. Geser obyek jauh ke arah kanan,
atau ke manapun anda suka.
• Pilih frame manapun di antara timeline 1 hingga 30, kemudian klik kanan, akan
muncul sebuah dialog window.
• Pilih tween motion dan pilih apakah akan melambat menjelang akhir (easing out)
atau semakin mempercepat (easing in).
Untuk shape tween anda gunakan obyek yang telah broken apart, Ctrl + B
2
3
Membuat Animasi Sederhana dengan Permainan
Keyframe
Langkah 1
Buka Program Flash MX kamu
Langkah 2
Menentukan besarnya STAGE (coba pelajari dulu layout Flash agar lebih paham)
Caranya:
1. Klik Size pada Properties
2. Akan Muncul Document Properties
Atur dimensions:
disini saya menggunakan 300 x 200 px
3. Tekan OK
Langkah 3
4
1. Tekan R pada keyboad lalu gambar kotak di Stage
2. Lakukan pewarnaan dengan menekan V pada keyboard dan klik kotak lalu pilih
Fill yang ada tanda nomor 2 di gambar
3. Pilih warna disini saya menggunakan warna biru dongker dengan nilai
hexadecimal #000066
Langkah 4
Tekan T pada keyboard untuk menggunakan Text Tool lalu ketik terserah namun
disini saya mengeti huruf "F"
5
Langkah 5
Lihat Kotak Timeline
Di situ kita akan bermain... ;P
Baiklah sekarang tekan F5 pada keyboard... hasilnya frame akan bertambah
hal ini untuk mengatur ritme dari animasi
OK tekan sebanyak 5 X
Hasilnya:
lalu Tekan F6 pada keyboard... hasilnya key Frame (untuk animasi) akan muncul
jika sudah tambahkan huruf pada stage
6
Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan
FLASH
tutorial Flash
OK!!!
7
Membuat Gradien di Adobe Flash
Pada Tutorial kali ini kita akan mempelajari cara membuat gradien di Flash,
membuat gradien di flash agak sedikit berbeda dengan gradien di photoshop
karena di flash kita bukan memakai fill tapi cenderung memakai pengaturan color
(Shift + Alt + F9)
1. Buka Program Adobe Flash, Disini Bisa menggunakan Adobe Flash CS3,CS4,CS5
2. Pada Lembar kerja buatlah gambar terserah tapi disini saya akan mencontohkan
dengan menggambar kotak, pada pengaturan sudut (Rectangle Option) gunakan
angka 15
Gunakan Free Transform Tool (Q) untuk mengatur besar kecilnya kotak yang anda
buat
3. Seperti penjelasan saya di awal, kita tidak bisa merubah fill karena fill hanya
terdiri dari 1 Warna, untuk itu kita harus masuk ke pengaturan color dengan
Window - color (Shift + Alt + F9) nanti akan muncul Color Setting seperti ini
8
Pilih Linear Gradien atau Radial Gradien, namun disini saya mencontohkan dengan
linear gradien , Anda bisa memilih Flow: Extend Color
Untuk pengaturan Warna yang diinginkan bisa klik kedua panel di bawah yang ada
tanda 2 panah caranya klik kotak tersebut dan pilih warna yang anda inginkan
Contohnya:
Kombinasi hitam dan biru
9
4. Ok sekarang pasti anda bertanya-tanya.... bagaimana cara mengubah posisi
gradien agar tidak kaku seperti gambar di atas, ahaaa.... caranya gunakan
Gradient Transform Tool (F)
10
dan juga memberikan hiasan text
Gradien di Flash
11
Membuat Animasi Berputar (Kipas Angin)
Tutorial kali ini tak lepas dari Kipas angin, bagaimana kita membuat kipas angin atau animasi
berputar di Flash? ikuti langkah berikut ini :)
1. Siapkan Kipas angin, Lihat arah berputarnya, jangan lama-lama nanti pusing, wkwkwk....
2. Nyalakan komputer dan buka program Flash, Disini saya memakai Adobe Flash CS 4
3. Buat Object 2 buah segitiga + 1 Buah object lingkaran di Lembar kerja flash
Caranya:
Untuk membuat Segitiga gunakan PolyStar Tool pada toolbar , Untuk Pengaturan gunakan
Style: Polygon, Number Of Side: 3
Untuk membuat Lingkaran gunakan Oval Tool dan tekan dan tahan tombol shift agar lingkaran
bulat sempurna.
Petunjuk Gambar IG
4. Atur gambar sehingga membentuk Sebuah baling baling kipas dan seleksi semuanya lalu tekan
CTRL + G (Group) untuk menggabungkan 3 object tersebut menjadi 1 kesatuan
12
Petunjuk Gambar IG
5. Sekarang waktunya membuat Frame pada Layer 1 klik Frame 50 dan pilih insert Frame
Petunjuk Gambar IG
13
6. Masih di Frame 50, klik kanan lagi dan sekarang pilih Create Classic Tween
Petunjuk Gambar IG
Selesai
14
Membuat Animasi Ombak
2. Ganti warna fill color menjadi #336699 dan warna stroke dijadikan
none
15
4. Klik kanan di frame 15 lalu klik insert keyframe, Ubah gambar airnya dengan
16
7. Klik di frame 1 lalu pilih tween shape
gambarnya
17
Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti di bawah ini
18
8. Klik Di frame 15 pilih tween shape
Selamat mencoba...(@_@)
Jika semua sudah selesai tinggal kita menekan ctrl + enter dan nikmati hasilnya.
19
Motion Tween
1. Buatlah sebuah lingkaran. Seleksi lingkaran tersebut dan tekan F8. Pada kotak dialog yang
muncul pilih Movie Clip sebagai Type dan tekan OK.
3. Klik kanan frame 10 dan pilih Insert Keyframe. Ubah letak movie clip ke stage sebelah kanan
pada frame 10
4. Klik kanan frame 20 dan pilih Insert Keyframe. Ubah letak movie clip ke stage sebelah kiri
pada frame 20
5. Klik kanan frame 1 dan pilih Create Motion Tween, lakukan hal yang sama pada frame 10.
Lalu lihat hasilnya dengan menekan Ctrl+enter.
20
Animasi Sederhana dengan Motion Tweening
Langkah pertama, yaitu buat 3 layer. Karna kita di sini hanya menggunakan
sedikit layer untuk membuat animasi. Agar proses lebih mudah membuat layer lihat
gambar di bawah, di sana ada menu di lingkari dengan warna merah .. Nah klik
sebanyak 2 kali maka dengan mengeklik 1 kali kita membuat 1 layer klo 2 otomatis
2 layer
Nah selanjutnya, beri nama masing-masing layer seperti yang sudah dicontohkan
gambar dibawah ini. Agar memudahkan proses pembuatannya
21
Kemudian ubah warna backgoundnya menjadi hitam, biasanya di awal-awal kita
membuka flash bacgroundnya berwarne putih klo belum di rubah setingannya
Setelah itu klik layer teks dan buat tulisan seperti yang saya contohkan atau
sesuka hati kalian .. Pakek punyaku juga boleh…
22
Setelah itu klik layer bola , dan buat bentuk bola denga warna putih
23
Jika sudah semua hasilnya kurang lebih seperti ini
Setelah itu kita buat animasi motion tweening , sebagai objeknya layer bola
Buatlah keyframe , seperti yang saya contohkan >> kemudian klik kanan>>pilih
insert keyframe
24
Setelah langkah di atas selesai, drag layer bola / drag objek bolanya dengan
menekan tombol “ v “ di keyboard >>kemudian klik gambar bolanya
25
tanda panah kanan di keyboard agar posisinya tidak berubah )
26
Lanjut ke langkah berikutnya, kita menuju ke layer bola>>klik kanan di dalam
frame / seperti gambar di bawah ini>>kemudian pilih create motion tween
Setelah selesai klik juga frame ke 90 caranya>>klik kanan frame yg sudah kita
buat>>pilih create motion tween
27
Semua juga sama buat semua layer di rubah menjadi motion tweening
Jika semua sudah selesai tinggal kita menekan ctrl+enter dan nikmati hasilnya.
28
Mask
Mask merupakan fasilitas di flash yang mampu membuat objek gambar ditampilkan sesuai
dengan objek shape yang kita kehendaki. Di samping motion tween, mask merupakan tehnik
yang harus dikuasai. Karena di dalam pengembangannya nanti kita akan dapat membuat animasi
yang menarik dari variasi mask.
1. Import sebuah, gambar masukkan kedalam stage dengan menekan Ctrl+R pada keyboard.
Tempatkan gambar di tengah-tengah stage.
Tekan tombol yang diberi lingkaran di atas untuk meng-Insert layer baru
3. Atur posisi lingkaran sehingga berada di tengah gambar (pastikan ukuran lingkaran lebih kecil
dari gambar dan juga gunakan lingkaran yang sudah diberi warna/fill)
29
Lingkaran berwarna merah
4. Atur posisi layer sehingga layer yang berisi lingkaran berada di atas layer gambar.
30
Klik kanan dan tekan Mask
7. Anda juga dapat merubah hasil akhir dengan mengganti lingkaran dengan objek lain, misal
segi lima (dengan terlebih dahulu menghapus lingkaran tadi)
31
Membuat Taman MATAHARI
2. buat 4 layer yaitu dengan nama: Rumput hijau, tiang, kotak nama,
matahari
4. Klik di frame 1 pada layer: tiang lalu gunakan rectangle tool lagi untuk
membuat tiang penunjuk arah ,
setelah selesai pembuatan tiangnya maka untuk pemberian garis tiang dan
arah gunakanlah line tool setelah itu tekan tombol F8 dan beri nma
32
tiang_mc
lihat gambarnya:
33
6. langkah terakhir, klik frame 1 di layer matahari ganti warna fill color
34
7. Klik 2 kali pada objek sun_mc dan akan terlihat seperti gambar ini
35
9. klik di frame 1 layer 1
klik kanan > insert keyframe di frame 60
lalu klik pada frame 30 , klik di propertiesnya
36
Selamat Mencoba>>>>@_@
Untuk melihat hasilnya tekan Ctrl + enter
37
Membuat bintang dan awan
1. Bukalah fla yang terdapat pada tutorial bulan. Buat ukuran bulan sedikit mengecil dan
tempatkan di bagian kiri atas stage
Tekan tombol di tempat kursor berada pada gambar di atas, untuk lock layer 1
3. Pada layer yang baru, buatlah sebuah lingkaran cukup kecil di stage (akan digunakan sebagai
bintang). Seleksi lingkaran tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan
bintang sebagai name dan movie clip sebagai type lalu tekan ok.
4. Klik movie clip bintang di stage dan tekan Ctrl+F3. Pada panel properties yang muncul tekan
tab filters
5. Setelah berpindah ke panel filters, tekan add filter dan pilih Glow. ubah Blur X menjadi 5,
Blur Y menjadi 5, Strength 100%, Quality Low, dan color berkode #CCCCCC
6. Tekan add filter lagi dan pilih Glow. Pada Glow yang muncul masukkan settingan berikut :
ubah Blur X menjadi 33, Blur Y menjadi 33, Strength 100%, Quality High, dan color berkode
#FFFFFF
38
Tampilan pada Glow 2 movie clip bintang
7. Pastikan anda masih menyeleksi movie clip bintang di stage lalu tekan Ctrl+D sebanyak 15
kali. Letakan masing-masing bintang seperti di bawah ini:
8. Lock layer 2 kemudian tekan tombol Insert Layer pada timeline lagi.
Tekan tombol di tempat kursor berada pada gambar di atas, untuk lock layer 2
9. Pada layer yang baru buatlah sebuah objek berupa shape berwarna hitam tanpa garis yang
akan digunakan untuk awan. Seleksi objek tersebut dan tekan F8. Pada kotak dialog yang muncul
masukkan awan sebagai name dan movie clip sebagai type lalu tekan ok.
39
Gambar awan
10. Klik movie clip awan di stage dan tekan Ctrl+F3. Pada panel properties yang muncul ubah
Color menjadi Alpha 64%. Jika sudah tekan tab Filters.
11. Setelah berpindah ke panel filters, tekan add filter dan pilih Blur. Ubah Blur X menjadi 20,
Blur Y menjadi 20 dan Quality Low.
12. Pastikan anda masih menyeleksi movie clip awan di stage lalu tekan Ctrl+D sebanyak 3 kali.
Letakan masing-masing awan seperti di bawah ini:
Letak awan
40
14. Jumlah duplikasi dan letak masing-masing objek dapat anda ubah sesuai selera.
41
Animasi Shine - Mobil Mengkilap Bercahaya
Langkah - Langkahnya:
2. Setelah gambar berada pada stage, atur besarnya stage sesuai dengan ukuran
gambar yang telah di import tadi misalnya 500 px (width) dan 315 px (height)
42
3. Ganti nama layer1 menjadi mobil
4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek.
43
6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna
persegi panjang seperti gambar di bawah ini
44
8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan
satu layer lagi, kemudian ganti nama layer tersebut dengan animasi
10. Kemudian buatlah bagian yang akan dianimasikan misalnya seperti gambar di
45
bawah ini.
11. Setelah area yang dianimasikan selesai dibuat, maka langkah selanjutnya yaitu
klik kanan pada layer animasi pilih menu mask
12. Klik frame 30 pada setiap layer, kemudian tekan F6 untuk memberikan insert
46
keyframe
13. Klik kanan antara frame 1 – 30 pada layer efek, kemudian pilih menu create
motion tween
14. Klik frame 30 pada layer efek, kemudian pindahkan gambar persegi panjang ke
sebelah kanan dari gambar mobil, seperti gambar di bawah ini
47
15. Tekan ctrl + enter untuk melihat hasilnya…
48
Mewarnai Text Bagian 1
Cara 1
Cara ini hanya cara dasar mewarnai suatu text.
1. Buatlah sebuah flash document.
3. Seleksi static text tersebut dan tekan fill color. Silahkan pilih dan tekan warna yang anda
inginkan. Misalnya kita pilih warna merah.
49
Cara 2
Di cara yang kedua ini, kita akan membuat bayangan hitam pada text yang kita buat.
1. Buatlah sebuah flash document.
3. Seleksi static text tersebut dan tekan fill color. Silahkan pilih dan tekan warna yang anda
inginkan. Misalnya kita pilih warna merah.
4. Seleksi static text dan tekan CTRL+D sekali maka akan muncul duplikasi dari static text.
5. Seleksi static text hasil duplikasi tadi dan tekan fill color. Kemudian pilih dan tekan warna
hitam.
50
6. Pastikan anda masih menyeleksi static text hasil duplikasi. Pada menu bar silahkan anda pilih
Modify>Arrange>Send To Back.
7. Jika benar, static text hasil duplikasi akan berada di belakang static text yang asli.
8. Sekarang atur letak static text hasil duplikasi dengan menggunakan tombol panah pada
keyboard sampai letaknya kurang lebih seperti gambar di bawah ini :
51
Cara 3
Di cara ketiga ini, kita akan menggunakan Drop Shadow dari panel filters. Hasil yang akan
diperoleh akan mirip dengan yang kita buat dengan Cara 2 tetapi akan ada efek blur pada
bayangan hitamnya.
1. Buatlah sebuah flash document.
3. Seleksi static text tersebut dan tekan fill color. Silahkan pilih dan tekan warna yang anda
inginkan. Misalnya kita pilih warna merah.
4. Pastikan anda masih menyeleksi static text, lalu pada menu bar pilih
Window>Properties>Filters.
5. Pada panel filters yang muncul tekan tanda + dan pilih Drop Shadow.
52
6. Pastikan nilai-nilai drop shadow pada panel filters terlihat seperti gambar dibawah ini:
8. Nilai-nilai Drop Shadow pada panel filters tidak harus seperti yang di atas. Itu hanya contoh
saja. Anda dapat mengaturnya sampai dirasa cocok dengan yang anda buat.
Cara 4
Cara ke empat ini juga akan menggunakan panel filters. Kita akan menggunakan effect glow.
1. Buatlah sebuah flash document. Atur warna stage menjadi hitam.
53
2. Buatlah sebuah static text dengan tulisan WARUNG FLASH.
3. Seleksi static text tersebut dan tekan fill color. Silahkan pilih dan tekan warna yang anda
inginkan. Misalnya kita pilih warna cokelat (#006600).
4. Pastikan anda masih menyeleksi static text, lalu pada menu bar pilih
Window>Properties>Filters.
5. Pada panel filters yang muncul tekan tanda + dan pilih Glow.
6. Pastikan nilai-nilai Glow pada panel filters terlihat seperti gambar dibawah ini:
54
7. Dan hasil akhirnya akan seperti ini :
8. Nilai-nilai Glow pada panel filters tidak harus seperti yang di atas. Itu hanya contoh saja.
Anda dapat mengaturnya sampai dirasa cocok dengan yang anda buat.
Cara 5
Di cara kelima ini, cara pewarnaannya akan berbeda dengan sebelumnya. Kita akan mem-break
apart terlebih dahulu textnya sebelum di warnai.
3. Seleksi static text dan tekan Ctrl+B sebanyak 2 kali sehingga static text berubah menjadi shape
seperti gambar di bawah ini :
55
6. Anda akan melihat 2 buah slider warna yang berjajar horizontal.
7. Klik 2 kali slider warna yang pertama dan pilih warna putih.
8. Klik 2 kali slider warna yang kedua dan pilih warna gray (#666666).
56
9. Sehingga di panel color akan terlihat seperti gambar di bawah ini :
10. Seleksi seluruh shape bertuliskan Warung Flash lalu tekan tombol Paint Bucket.
11. Lakukan pewarnaan ke shape bertuliskan Warung Flash. Caranya klik (jangan lepaskan klik)
sembarang shape lalu drag ke bawah dan lepaskan klik.
57
12. Jika sudah, deselect (Ctrl+Shift+A) seluruh tulisan dan hasilnya akan terlihat seperti ini :
Cara 6
Cara keenam ini juga hampir sama dengan cara kelima. Bedanya kita tidak menggunakan
pewarnaan type linear tetapi type solid.
58
3. Seleksi static text dan tekan Ctrl+B sebanyak 2 kali sehingga static text berubah menjadi shape
seperti gambar di bawah ini :
4. Buatlah sebuah garis yang membelah tulisan Warung Flash menjadi 2 seperti gambar di
bawah ini :
6. Tekan tombol paint bucket lalu warnai seluruh tulisan Warung Flash bagian atas dengan
warna oranye.
8. Tekan tombol paint bucket lalu warnai seluruh tulisan Warung Flash bagian atas dengan
warna merah.
59
9. Hapus seluruh garis yang membelah tulisan.
60