Tutorial animasi flash menggunakan vectorian giotto
-
Upload
ambar-erna -
Category
Education
-
view
1.684 -
download
29
description
Transcript of Tutorial animasi flash menggunakan vectorian giotto
Tutorial Vectorian Giotto - 1
Tutorial Animasi Flash menggunakan Vectorian Giotto
Disusun oleh : Ambar Erna W.
1. Pengenalan ........................................................................................................2
1.1. Menginstalasi Vectorian Giotto............................................................................ 2
1.1. Editor Victorian Giotto.......................................................................................3
2. Movie.......................................................................................................................4
2.1. Create New Movie................................................................................................4
2.2. Setting Format document :................................................................................... 6
2.3. Menyimpan File................................................................................................... 7
2.4. Membuka file....................................................................................................... 8
3. Layer........................................................................................................................9
3.1. Mengganti nama layer..........................................................................................9
3.2. Menambah Layer baru........................................................................................10
3.3. Menghapus Layer............................................................................................... 11
4. Animasi Text..........................................................................................................12
4.1. Menulis Text.......................................................................................................12
4.2. Memindahkan posisi Text...................................................................................12
4.3. Memodifikasi ukuran text.................................................................................. 13
4.4. Mengganti Warna Text....................................................................................... 13
4.5. Menambah effect pada Text............................................................................... 13
5. Animasi gambar.....................................................................................................14
5.1. Insert gambar......................................................................................................14
5.2. Membuat layer baru............................................................................................16
5.3. Membuat gambar................................................................................................16
5.4. Mengganti warna gambar...................................................................................18
5.5. Membuat keyframe.............................................................................................19
5.6. Memindahkan gambar........................................................................................20
5.7. Memodifikasi bentuk gambar.............................................................................20
Tutorial Vectorian Giotto - 2
5.8. Membuat twinning............................................................................................. 22
6. Membuat Flash Movie...........................................................................................23
1. Pengenalan
Vectorian Giotto, merupakan freeware yang digunakan untuk membuat animasi flash.
Kita dapat mempelajari dan men-download software tersebut dari website : vectorian.com
Untuk mendownload, pilih : download.
1.1. Menginstalasi Vectorian Giotto
Pilih Open atau Run tergantung browser yang digunakan. (Jika browser hanya
Tutorial Vectorian Giotto - 3
memberikan pilihan “save”, maka simpan file terlebih dahulu kemudian jalankan file
tersebut.
Lanjutkan langkah-langkah instalasi :
“Welcome to the Vectorian Giotto Setup Wizard”: klik “Next” untuk melanjutkan
“Select Destination Location”: Kita dapat memilih direktory tempat
vectorian giotto diinstalasi. Pilihan terbaik adalah direktori default. kemudian pilih
“next” untuk melanjutkan.
“Select Additional Tasks”: click “Start” to continue.
“Ready To Install”: click “Install” to continue.
“Installing”: wait a couple of seconds for Vectorian Giotto to be installed on your
computer.
“Completing the Vectorian Giotto Setup Wizard”: click “Finish” to complete the
Vectorian Giotto installation. Vectorian Giotto is now installed on your computer!
1.1. Editor Victorian Giotto
Setelah kita menjalankan aplikasi Vectorian Giotto, muncul editor seperti dibawah ini :
Tutorial Vectorian Giotto - 4
Gambar disebelah merupakan tool yang digunakan
untuk meng-edit, yang terdiri dari selection tools,
sub-selection tools, Line tools, Lasso tools, insert
bitmap tools, text tools, oval tools, rectangle tools,
pencil tools, brush tools, free transform tools, fill
transform tools, ink bottle tools, paint bucket tools,
eyedropper tools, eraser tools
2. Movie
2.1. Create New Movie
Untuk membuat movie baru menggunakan menu “File - New Movie”
Tutorial Vectorian Giotto - 5
Tampilan awal new movie seperti gambar berikut :
Kita juga dapat membuat movie baru dari template yang sudah ada. Menu yang
digunakan adalah : “File-New From Template”.
Tutorial Vectorian Giotto - 6
Kemudian pilih template sesuai yang diinginkan.
2.2. Setting Format document :
Seringkali kita menginginkan ukuran dokumen tidak seperti defaultnya, begigu juga
dengan warna background dokumen Kita bisa memodifikasi dokumen dengan
menggunakan menu “Modify - Document”.
Setelah itu, akan tampil property document default seperti berikut :
Kita dapat mengubah default property sesuai kebutuhan, misalnya dimensinya menjadi
800 x 300 pixel dengan warna background hitam dan frame rate 15 frame per second.
Tutorial Vectorian Giotto - 7
Untuk meng-edit, letakkan kursor pada field yang akan diedit kemudian ketikkan properti
yang dibutuhkan.
klik OK, maka tampilan dokumen akan berubah :
2.3. Menyimpan File
File project kita, disimpan dengan extention .vgd (vectorian giotto document) . Menu
yang digunakan adalah “File Save” atau jika file yang sudah tersimpan ingin disimpan
menggunakan nama yang berbeda adalah “File - Save as”.
Tutorial Vectorian Giotto - 8
2.4. Membuka file.
Untuk membuka dokumen project yang sudah ada, digunakan menu “File - Open”.
Dalam contoh ini, kita menggunakan file Latihan flash 1.vgd .
Tampilan menu seperti dibawah :
Tutorial Vectorian Giotto - 9
3. Layer
Kita dapat mempergunakan beberapa layer untuk mengatur gambar animasi yang kita
buat. Pengaturan layer akan mempermudah dalam menampilkan hasil akhir maupun pada
saat kita perlu memodifikasi animasi yang kita buat.
Pada saat kita membuat dokumen baru, vectorian giotto menyediakan sebuah layer,
dengan nama default layer 1. Kita dapat mengubah nama layer, menambah layer dan
menghapusnya sesuai kebutuhan.
3.1. Mengganti nama layer
Untuk mengganti nama layer, letakkan kursor pada nama layer, contoh disini adalah
layer1, blok nama layer tersebut kemudian ganti dengan nama yang diinginkan. Pada
contoh ini layer1 diganti dengan circle1.
Tampilan sebelum nama layer diganti :
Tampilan setelan nama Layer diganti
Tutorial Vectorian Giotto - 10
3.2. Menambah Layer baru
Untuk menambah atau meng-insertkan layer baru, klik tanda + pada sebelah kiri dibawah
layer yang ada.
Akan nampak seperti berikut :
Tutorial Vectorian Giotto - 11
3.3. Menghapus Layer
Untuk menghapus Layer, pilih layer yang akan dihapus kemudian klik tanda silang.
Selain cara tersebut, setelah memilih layer yang akan dihapus, klik kanan pada mouse
kemudian pilih “Remove Layer”.
Tutorial Vectorian Giotto - 12
4. Animasi Text
4.1. Menulis Text
Sebelum menuliskan text, pilih layer yang akan digunakan, misalkan layer
text 1 kemudian pilih icon T (Text Tools) pada tools pallete dan letakkan
kursor pada posisi yang diinginkan kemudian tuliskan text yang
diperlukan : Misalkan : Pengenalan Victorian Giotto.
4.2. Memindahkan posisi Text
Pilih layer tempat text kemudian pilih icon “selection tools” dari tool pallete kemudian
klik pada tulisan dan pindahkan ke posisi yang diinginkan
Tutorial Vectorian Giotto - 13
4.3. Memodifikasi ukuran text
Pilih icon “Free transform tools,” kemudian klik pada text. Setelah itu,
kita dapat megubah ukuran atau mentransformasi text.
4.4. Mengganti Warna Text
Untuk mengganti warna, pilih text menggunakan “selection tools” , kemudian
pilih “icon brush” dan ganti dengan warna yang diinginkan
4.5. Menambah effect pada Text
Vectorian Giotto menyediakan effect-effect yang langsung dapat digunakan untuk text.
Cara menambahkannya adalah : pilih text, kemudian klik “modify-effect-add” atau
menggunakan klik kanan pada mouse dan pilih “effect-add”.
Tutorial Vectorian Giotto - 14
5. Animasi gambar
Pada bagian ini, kita pelajari membuat animasi sederhana, yang merupakan gabungan
penggunaan beberapa tools yang disediakan oleh vectorian giotto, yaitu :
- import gambar/image
- membuat layer baru
- membuat gambar
- memodifikasi warna dan bentuk gambar
- membuat frame dan keyframe
- membuat twinning
- menyimpan file dalam flash.
5.1. Insert gambar
Untuk mengimport gambar, digunakan menu insert-bitmap. Kita dapat mengambi gambar
dengan berbagai extention, misal : bmp, jpg, png.
Tutorial Vectorian Giotto - 15
Pada contoh ini, kita insertkan gambar kepala kartun tanpa mulut dan bola mata, karena
untuk bola mata dan mulut akan kita buat gambar.
Kemudian kita ganti nama layer menjadi kartun00.
Tutorial Vectorian Giotto - 16
5.2. Membuat layer baru
Kita buat dua layer baru, yang satu diberi nama mata untuk menggambar bola mata dan
layer lainnya diberi nama mulut untuk menggambar mulut.
5.3. Membuat gambar
Untuk menggambar bola mata, pilih layer mata, kemudian ganti warna pen dan brush
menjadi hitam.
Tutorial Vectorian Giotto - 17
Kita gunakan tools oval. Klik pada oval tools kemudian letakkan bolamata pada posisi
yang tepat.
Untuk menggambar bola mata yang lain, kita cukup meng-copy dari yang ada agar
besarnya sama.
Tutorial Vectorian Giotto - 18
Untuk membuat gambar mulut, kita bisa menggunakan brush atau oval tool. Jangan lupa
pilih layer mulut agar kita mudah untuk mengeditnya.
5.4. Mengganti warna gambar
Pilih colors-pen untuk mengganti warna garis pinggir dan pilih colors-brush untuk
mengganti warna isinya.
Tutorial Vectorian Giotto - 19
5.5. Membuat keyframe
Ketika kita membuat keyframe pada timeline, secara otomatis kita sudah menambahkan
frame pada time sebelumnya. Letakkan kursor pada frame yang akan difungsikan sebagai
keyframe, kemudian klik kanan mouse dan pilih insert keyframe.
atau dapat menggunakan menu insert-timeline-keyframe. Setelah dilakukan insert
keyframe, gambar terlihat seperti berikut :
Tutorial Vectorian Giotto - 20
5.6. Memindahkan gambar
Pilih Layer yang digunakan untuk gambar yang posisinya akan dipindahkan. Dalam
contoh ini pilih layer mata kemudian kita letakkan kursor pada frame 11 yang sudah
terdapat keyframe, klik 'selection tool' dari tool pallete dan klik bola mata serta pindahkan
posisi bola mata tersebut.
5.7. Memodifikasi bentuk gambar
Pilih layer yang digunakan untuk gambar yang bentuknya akan dimodifikasi. Dalam
contoh ini pilih layer “mulut”, dan kita akan memodifikasi bemtuk mulut/bibir sehingga
nanti akan terlihat bergerak.
Buat keyframe terlebih dahulu tempat gambar yang bentuknya diubah, kemudian dari
tools pallete, pilih “sub selection tools”,
Tutorial Vectorian Giotto - 21
Kemudian klik pada gambar mulut, dan pindahkan sesuai dengan bentuk yang
diinginkan.
Contoh gambar setelah dimodifikasi
Tutorial Vectorian Giotto - 22
5.8. Membuat twinning
Agar perpindahan gambar terjadi secara halus, kita buat twinning dari satu keyframe
menuju keyframe yang lain.Letakkan kursor pada salah satu frame yang terletak diantara
dua keyframe kemudian klik kanan mouse dan pilih 'create motion tween'.
Setelah berhasil membuat motion tween, maka akan terdapat anak panah dari keyframe
yang lebih awal menuju keyframe berikutnya.
Tutorial Vectorian Giotto - 23
Gambar dibawah merupakan contoh twinning untuk layer mata dan mulut.
6. Membuat Flash Movie
Setelah animasi selesai dibuat, hasilnya kita export dalam flash menggunakan menu “File
- Export Flash Movie”.
Contoh tutorial :
http://www.ambars99.blogspot.com