Job Sheet (Lembar Kerja) Multimedia Membuat Animasi Tingkat Dasar Pengertian Umum FRAME - informasi umum mengenai frame 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) 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) Istilah-istilah mengenai frame : Keyframe dengan actions, keyframe yang memiliki actions berarti keyframe tersebut akan memanggil sebuah kode yang kita tentukan dari modul yang tersedia. Beberapa diantaranya yakni, go to, play, get url, stop, tell target, if frame is loaded, dll. Pelan-pelan saja, semua istilah diatas akan dijelaskan di bagian lain...:) Frame dengan motion tween, jenis ini akan banyak anda jumpai. Ini 1
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Job Sheet (Lembar Kerja) MultimediaMembuat Animasi Tingkat Dasar
Pengertian Umum
FRAME - informasi umum mengenai frame
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)
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)
Istilah-istilah mengenai frame :
Keyframe dengan actions, keyframe yang memiliki actions berarti keyframe tersebut akan memanggil sebuah kode yang kita tentukan dari modul yang tersedia. Beberapa diantaranya yakni, go to, play, get url, stop, tell target, if frame is loaded, dll. Pelan-pelan saja, semua istilah diatas akan dijelaskan di bagian lain...:)Frame dengan motion tween, jenis ini akan banyak anda jumpai. Ini berarti bahwa diantara dua keyframe, Flash dapat mengambil perhitungan otomatis secara gerak dan skala tentang isi dari frame yang ada di antaranya dan akan menciptakan sekuens gerak atau animasi. Perhatikan bahwa motion tween ini hanya bisa dilakukan untuk obyek yang berupa symbol atau grup dan hanya dapat berlaku pada satu obyek setiap layer. Pada Flash 4 dilambangkan dengan warna biru muda.
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.
Shortcut dan Kesimpulanmenyelipkan frame - klik kanan pada area frame, pilih insert framemerubah urutan frame - klik kanan, pilih reverse frames
Secara singkat cara melakukan motion tween adalah sebagai berikut :
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 'Properties' dari dialog menu tersebut.
Klik tab 'Tweening' diantara beberapa tab yang timbul.
Pilih tween motion dan pilih apakah akan melambat menjelang akhir (easing out) atau semakin mempercepat (easing in).
Beres :), berlatihlah sesering mungkin menggunakan motion tween.
Untuk shape tween anda gunakan obyek yang telah broken apart, Ctrl + B
2
Membuat Animasi Sederhana dengan Permainan Keyframe
Langkah 1Buka Program Flash MX kamu
Lalu pilih new... Flash Document
Langkah 2Menentukan besarnya STAGE (coba pelajari dulu layout Flash agar lebih paham)
Caranya:1. Klik Size pada Properties2. Akan Muncul Document PropertiesAtur dimensions:disini saya menggunakan 300 x 200 px 3. Tekan OK
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 gambar3. Pilih warna disini saya menggunakan warna biru dongker dengan nilai hexadecimal #000066
Langkah 4Tekan T pada keyboard untuk menggunakan Text Tool lalu ketik terserah namun disini saya mengeti huruf "F"
4
Langkah 5 Lihat Kotak TimelineDi situ kita akan bermain... ;PBaiklah sekarang tekan F5 pada keyboard... hasilnya frame akan bertambah hal ini untuk mengatur ritme dari animasi
OK tekan sebanyak 5 XHasilnya:
lalu Tekan F6 pada keyboard... hasilnya key Frame (untuk animasi) akan munculjika sudah tambahkan huruf pada stage
Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan FLASH
5
tutorial FlashOK!!!
Untuk melihat hasilnya... berdoa dulu ya... Tekan CTRL + Enter
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)
Ok, mari kita praktekkan dengan Tutorial:
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
7
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
8
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)
Anda bisa mengatur bentuk gradien yang anda inginkan
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 43. Buat Object 2 buah segitiga + 1 Buah object lingkaran di Lembar kerja flashCaranya: Untuk membuat Segitiga gunakan PolyStar Tool pada toolbar , Untuk Pengaturan gunakan Style: Polygon, Number Of Side: 3Untuk 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
11
Petunjuk Gambar IG
5. Sekarang waktunya membuat Frame pada Layer 1 klik Frame 50 dan pilih insert Frame
Petunjuk Gambar IG
12
6. Masih di Frame 50, klik kanan lagi dan sekarang pilih Create Classic Tween
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
19
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…
20
Setelah itu klik layer bola , dan buat bentuk bola denga warna putih
Pembuatan objeknya sudah selesai kini kita menginjak ke animasinya, buatlah frame sepanjang 90 -> kemudian klik kanan lalu pilih insert frame
21
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
22
Setelah langkah di atas selesai, drag layer bola / drag objek bolanya dengan menekan tombol “ v “ di keyboard >>kemudian klik gambar bolanya
Setelah geser bolanya ( jangan menggeser menggunakan mouse pakai saja tanda panah kanan di keyboard agar posisinya tidak berubah )
23
Klo sudah selesai hasilnya seperti gambar yang di atas
Lanjut ke langkah berikutnya, kita menuju ke layer bola>>klik kanan di dalam frame / seperti gambar di bawah ini>>kemudian pilih create motion tween
24
Setelah selesai klik juga frame ke 90 caranya>>klik kanan frame yg sudah kita buat>>pilih create motion tween
25
Semua juga sama buat semua layer di rubah menjadi motion tweening
Jika semua sudah selesai tinggal kita menekan ctrl+enter dan nikmati hasilnya.
26
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.
Contoh gambar yang kami import
2. Insert layer baru, buat objek lingkaran di layer baru tersebut.
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)
7. Anda juga dapat merubah hasil akhir dengan mengganti lingkaran dengan objek lain, misal segi lima (dengan terlebih dahulu menghapus lingkaran tadi)
29
Membuat Taman MATAHARI
1. Buka program flash 8Ubah ukuran stage menjadi 768 x 576 pixels.Ganti warna bacground menjadi warna warna biru #0099FF
2. buat 4 layer yaitu dengan nama: Rumput hijau, tiang, kotak nama, matahari
3. Di layer rumput hijau Klik rectangle tool ,untuk membuat rumput hijau dengan mendragnya ke stage seperti gambar dibawah ini.
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 tiang_mclihat gambarnya:
30
5. sekarang klik frame 1 pada layer: kotak namaGanti fill color menjadi warna putih dan strokenya hitam lalu tekan tombol F8 dan beri nama Kotaknama_mc dan copy menjadi 4 lalu sesuaikan dengan gambar dan beri nama : jl. Grafis, jl.animasi, jl.film, jl.kartun.lihat gambarnya:
31
6. langkah terakhir, klik frame 1 di layer matahari ganti warna fill color menjadi #FFFF00
dan stroke dijadikan none gunakan rectangle toolUntuk mebuat perputaran matahari buat 8 kotak panjang lalu urutkan seperti gambar lalu tekan F8 dan beri nama sun_mclihat gambarnya:
32
7. Klik 2 kali pada objek sun_mc dan akan terlihat seperti gambar ini
8. buat 1 layer lagi dan beri nama bulatklik di frame 1 layer: bulat dan klik oval tool untuk membuat objek lingkaran klik kanan > insert keyframe di frame 60 lalu klikklik kanan create motion tween di frame 30.lihat gambarnya:
33
9. klik di frame 1 layer 1klik kanan > insert keyframe di frame 60lalu klik pada frame 30 , klik di propertiesnya
10. agar matahari terlihat dibelakang pindahkan layer matahari di paling bawah….untuk membuat rumputnya gunakan line tool buat seperti gambar
Selamat Mencoba>>>>@_@Untuk melihat hasilnya tekan Ctrl + enter
34
Membuat bintang dan awan
1. Bukalah fla yang terdapat pada tutorial bulan. Buat ukuran bulan sedikit mengecil dan tempatkan di bagian kiri atas stage
2. Lock Layer 1 lalu tekan tombol Insert Layer pada timeline.
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
Tampilan pada Glow 1 movie clip bintang
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
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:
Letak bulan dan bintang
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.
14. Jumlah duplikasi dan letak masing-masing objek dapat anda ubah sesuai selera.
38
Animasi Shine - Mobil Mengkilap Bercahaya
Langkah - Langkahnya:
1. Masukkan (import) gambar ke dalam stage
misalnya gambar mobil seperti gambar di bawah ini
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)
39
3. Ganti nama layer1 menjadi mobil
4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek.
5. Klik icon rectangle tool ( tekan huruf R di keyboard ), kemudian gambar persegi panjang melebihi gambar mobil, seperti gambar di bawah ini.
40
6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna persegi panjang seperti gambar di bawah ini
7. Kemudian untuk mendapatkan efek cahaya yang mengkilap, lakukan pengaturan warna persegi panjang seperti gambar di bawah ini
8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan satu layer lagi, kemudian ganti nama layer tersebut dengan animasi
41
9. Masih di layer animasi kill icon Pen tool
10. Kemudian buatlah bagian yang akan dianimasikan misalnya seperti gambar di bawah ini.
11. Setelah area yang dianimasikan selesai dibuat, maka langkah selanjutnya yaitu klik kanan pada layer animasi pilih menu mask
42
12. Klik frame 30 pada setiap layer, kemudian tekan F6 untuk memberikan insert 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
43
15. Tekan ctrl + enter untuk melihat hasilnya…
44
Mewarnai Text Bagian 1
Cara 1Cara ini hanya cara dasar mewarnai suatu text.1. Buatlah sebuah flash document.
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 merah.
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 :
Cara 3Di 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.
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 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.
6. Pastikan nilai-nilai drop shadow pada panel filters terlihat seperti gambar dibawah ini:
7. Dan hasil akhirnya akan seperti 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 4Cara ke empat ini juga akan menggunakan panel filters. Kita akan menggunakan effect glow.1. Buatlah sebuah flash document. Atur warna stage menjadi hitam.
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 5Di cara kelima ini, cara pewarnaannya akan berbeda dengan sebelumnya. Kita akan mem-break apart terlebih dahulu textnya sebelum di warnai.
1. Buatlah sebuah flash document. Atur warna stage menjadi hitam.
2. Buatlah sebuah static text dengan tulisan WARUNG FLASH.
3. Seleksi static text dan tekan Ctrl+B sebanyak 2 kali sehingga static text berubah menjadi shape seperti gambar di bawah ini :
4. Bukalah panel color dengan menekan tombol Shift+F9 pada keyboard.