Tutorial animasi flash menggunakan vectorian giotto
Upcoming SlideShare
Loading in...5
×
 

Tutorial animasi flash menggunakan vectorian giotto

on

  • 660 views

Tutorial Animasi Flash menggunakan freeware Vectorian Giotto

Tutorial Animasi Flash menggunakan freeware Vectorian Giotto

Statistics

Views

Total Views
660
Views on SlideShare
657
Embed Views
3

Actions

Likes
0
Downloads
30
Comments
0

1 Embed 3

http://www.slideee.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tutorial animasi flash menggunakan vectorian giotto Tutorial animasi flash menggunakan vectorian giotto Document Transcript

  • 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