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