nayzuko.com || animation n web tutorial

Tutorial#2: Flash Vector Drawing

Email Print PDF

TUTORIAL#2: MATA

b_250_100_16777215_0___images_swf_nztut_drawtut_20zmata.jpgTutorial kedua ini menunjukkan cara mudah membuat base mata, bola mata, bulu mata, dan alis mata. Teknik yang digunakan kebanyakan gradasi radial dan "soften fill edges".


Buka movieclip "mata", tentunya jika Anda sudah menjadikan hasil trace mata sebagai movieclip.

Agar tutorial ini lebih mudah dipahami, download file .fla awal ini.
DOWNLOAD


BASE MATA
b_250_100_16777215_0___images_swf_nztut_drawtut_13matagrad.jpgJadikan hasil trace-nya sebagai movieclip. Lalu beri warna dasar mata. Terserah warna apa, putih juga oke, karena nanti akan diubah. Kemudian buat menjadi gradasi radial melalui panel "color mixer". Buka panelnya melalui menu "window/color mixer" atau Shift+F9. Pilih type "radial". Pusat gradasi berwarna putih dengan bagian pinggir abu-abu seperti pada gambar ini. Geser pusat gradasi, dengan men-drag, tanda bulat di tengah sehingga posisi gradasi condong ke kanan.

Ingat saja, tutorial ini akan sangat banyak menggunakan teknik gradient.

BOLA MATA
Kemudian buat bola mata. Jadikan hasil trace bola mata menjadi movieclip.  Ada dua layer untuk bola mata ini. Pertama, layer bawah yang berisi warna abu-abu gelap. Ubah opacity-nya, di panel "property" menjadi sekitar alpha=20% lalu perlebar area pinggiran dengan shape yang lebih halus. Caranya klik menu "Modify" lalu pilih "shape/soften fill edges". Distance=4, steps=12.

Copy isi bola mata, tidak perlu ikut shape sekitarnya, lalu paste pada layer di atasnya, di posisi yang sama (Ctrl+Shift+V). Untuk lapisan atas bola mata ini, gunakan type gradasi radial. Ada 4 kunci warna di sana, dengan pusat dan pinggir hitam (#000000). Lalu pada tengahnya gradasi #262626 ke #1A1A1A.

Pada gambar  ini, yang kiri, tampak dua lapisan; gambar yang atas adalah layer bawah, dan layer atas dengan gradasi di tempat aslinya. Jangan ragu-ragu untuk mengubah hasil kerja kita menjadi movieclip. Untuk bayangan mata, copy isi bola mata tadi, letakkan di layer atas layer bola mata. Lalu buat pola di dalam bola mata, dengan alpha yang berbeda-beda (gambar kanan). Ini untuk memunculkan kesan mata objek menerima pantulan cahaya dari sekelilingnya.

b_250_100_16777215_0___images_swf_nztut_drawtut_14eyeball2.jpgb_250_100_16777215_0___images_swf_nztut_drawtut_14eyeball.jpg

Kemudian tambahkan gradasi putih kecil (inti gradasi putih alpha=70 ke pinggir putih alpha=0) untuk kilatan cahaya. Tanpa ini, mata tidak tampak hidup. Ubah warna base bagian dalam dengan membuatnya menjadi abu-abu tua atau coklat. Tambahkan pula bayangan halus di pinggiran dalam mata. Coba tiru mata objek, termasuk bagian-bagiannya yang tidak halus, seperti di bagian dalam kanan atas.

Eksperimenlah pada bagian bola mata ini. Coba buat warna dasarnya dengan warna lain, hijau atau biru, lalu tambahkan layer dengan totolan warna coklat alpha=20, lalu di atasnya dengan gradasi abu-abu atau putih alpha=20, lihat efeknya.

BULU MATA
Kita mempunyai bulu mata dalam bentuk "line". Jadikan stroke solid 2 px (Line yang dipakai untuk men-trace adalah stroke "hairline". Sudah tahu kan? Ooppsss...). Kemudian convert line menjadi fill. Klik "modify" lalu pilih "shape/convert lines to fills" (gambar kiri).

Setelah menjadi fill, kita bisa mengubah bentuknya. Ubah ujung bulu mata menjadi lebih runcing (gambar tengah).
Agar bulu mata tampak melengkung, kasih type gradasi linear dari warna hitam ke arah abu-abu lalu ke abu-abu tua (#2F2F2F). Seperti pada gambar di bawah ini (gambar kanan).
b_250_100_16777215_0___images_swf_nztut_drawtut_15bulumt.jpgb_250_100_16777215_0___images_swf_nztut_drawtut_16bulusharp.jpgb_250_100_16777215_0___images_swf_nztut_drawtut_17bulumtlite.jpg

Sentuhan terakhir adalah mengisi bayangan di sekeliling mata dan di area lipatan kelopak mata. Lakukan ini di layer paling bawah, di bawah base, dan gunakan dua layer. Jangan ragu membuatnya menjadi movieclip.

Agar bisa bekerja lebih cepat, buka gambar asli di sebelah Flash. Melihat kembali gambar asli di stage Flash tidak praktis.
b_250_100_16777215_0___images_swf_nztut_drawtut_18closework.jpg

Layer bawah bayangan ini berisi shape dengan teknik "soften fill edges". Pada layer atasnya adalah area bayangan kelopak mata diisi dengan gradasi radial. Lakuka eksperimen untuk menghasilkan bayangan sekitar mata yang tidak begitu halus namun tidak terlalu gelap. Sementara untuk bayangan kelopak mata, hanya perlu sedikit area terang yang terlihat. Keunggulan teknik gradasi radial Flash dibandingkan pengolah vector lain, mungkin, kemampuannya membuat transformasi gradasi. Coba geser pusat gradasi sehingga pinggiran lengkungan yang berwarna terang berbatasan dengan gelap (tepat di garis kelopak hasil trace) ada di area kelopak mata.

b_250_100_16777215_0___images_swf_nztut_drawtut_18zmatasdw.jpg

Teknik "soften fill edges", alpha, gradasi akan banyak dipakai dalam tutorial ini. Keberhasilan "soften fill edges" akan ditentukan tingkat alpha shape, distance, dan steps. Distance akan dipengaruhi seberapa besar stage movie kita (stage asli flash tutorial ini adalah 500x270 px). Semakin besar stage, "distance" yang diperlukan akan semakin besar. Sementara "steps", yang bertugas membuat gradasi di pinggiran shape, maksimal hanya 50 steps. Hasil yang halus akan dicapai dengan "distance" yang lebih kecil dari "steps".

ALIS MATA
Jangan ragu (lagi) membuat hasil trace alis menjadi movieclip. Kita butuh 3 layer untuk alis mata ini. Pertama warna dasar abu-abu dengan alpha sekitar 20-30%. Layer kedua berisi garis-garis kecoklatan alpha 50% dengan alur mengarah ke samping. Gunakan "brush tool" untuk membuat alur alis. Di layer paling atas adalah alur alis dengan warna yang lebih tua.

Berikut ini gambar layer1, layer2, dan layer3.
b_250_100_16777215_0___images_swf_nztut_drawtut_20alis1.jpg b_250_100_16777215_0___images_swf_nztut_drawtut_20alis2.jpg b_250_100_16777215_0___images_swf_nztut_drawtut_20alis3.jpg

Membuat alis ini sangat mudah karena tidak perlu keteraturan untuk menciptakan efek alis mata. Cobalah bereksperimen dengan menambah alurnya dengan warna yang lebih muda pada layer bawah.

Done.

Hasil akhirnya, kurang lebih, akan seperti ini.
Download source fla untuk mata: DOWNLOAD.

 

Alternative content

Get Adobe Flash player