Author: Unknown | Filed Under: Design

Mata merupakan alat indra yang terdapat pada tubuh manusia dan memiliki bentuk yang indah. Secara konstan mata menyesuaikan jumlah cahaya yang masuk, memusatkan perhatian pada objek yang dekat dan jauh serta menghasilkan gambaran yang berkelanjutan yang dengan segera dihantarkan ke otak

Tapi dalam posting kali ini, saya akan membahas gerakan mata.
Gambar dibawah ini  terlihat seperti foto biasa, namun apabila kursor atau mouse didekatkan ke arah foto ini dan digerak-gerakkan, maka mata dalam foto ini akan bergerak mengikuti kemanapun kursor akan bergerak :D








Uniknya, animasi tersebut dengan mudah dapat kita buat dengan bantuan software ADOBE FLASH CS3, walaupun untuk orang awam sekalipun, Ok langsung saja saya berikan tutorialnya:


1.     Buka software Adobe Flash CS3
2.     Buat dokumen baru, File > New > Pilih Type: Flash File (ActionScript 2.0)





3.     Ubah ukuran dokumen atau (Size) dengan Width: 480px, dan Height: 640px
4.     Buat sebuah lingkaran dengan menggunakan Oval Tool, ukuran: W = 80px, H = 80px, beri warna putih atau abu-abu muda pada lingkaran itu.
5.     Convert lingkaran itu menjadi Movie Clip dengan cara klik kanan pada lingkaran tersebut, klik Convert to Symbol pada dialog Convert to Symbol, masukkan parameter sebagai berikut, lalu klik OK



6.      Masuk ke Scene Mata dengan cara men-double klik lingkaran yang kita beri nama "Mata"  tersebut
7.      Dalam scene mata, kita buat layer baru, buat yang belum tau, silahkan lihat gambar dibawah


8.     Di dalam layer 2 tersebut, kita akan membuat pupil yang akan bergerak mengikuti kursor. Buatlah sebuah lingkaran lagi dengan properti: W = 42px dan H = 42px, beri warna hitam lingkaran tersebut, dan konvert sebagai Movie Clip
9.     Beri nama instance lingkaran hitam tersebut dengan nama: Pupil_mc


10.    Buat sebuah Layer dan buatlah sebuah lingkaran lagi seperti kita membuat pupil dengan properti W = 42px dan H = 42px, lingkaran ini adalah lingkaran batas untuk pupil agar posisinya terkunci didalam dan tidak bisa keluar melewati bola mata.
11.    Beri warna kuning lingkaran ini, convert sebagai "Movie Clip" dan beri nama instance: Circle_mc
12.    Lingkaran kuning ini hanya berfungsi sebagai batas, maka visibilitas-nya akan dimatikan dengan cara klik lingkaran kuning > Pada kolom Color, pilih Advanced > Settings > Isikan Parameter berikut:


13.    Untuk komponen grafik yang diperlukan, kita sudah membuat semuanya kira-kira hasilnya seperti ini

13.    Kita sudah membuat sebuah "jasad" dan tinggal kita beri nyawa deh, Ok langsung saja kita buat layer baru lagi, kali ini kita beri nama layer dengan nama "action"
14.    Di posisi layer action, klik F9 untuk memunculkan jendela Actions dan kita tambahkan ActionScript yang berfungsi untuk menggerakkan mata, Copy code berikut kedalam jendela ActionScript

var Radius;
var Distance;
Radius = Circle_mc._width/4;
Pupil_mc.onEnterFrame = function ()
{
    Distance = Math.sqrt(Math.pow(Circle_mc._xmouse, 2)+Math.pow(Circle_mc._ymouse, 2));
    if (Radius < Distance)
    {
        Pupil_mc._x = Math.round(Circle_mc._xmouse * (Radius / Distance));
        Pupil_mc._y = Math.round(Circle_mc._ymouse * (Radius / Distance));
    }
    else
    {
        Pupil_mc._x = Circle_mc._xmouse;
        Pupil_mc._y = Circle_mc._ymouse;
    } // end else if
};

Hasilnya akan seperti ini



15.    Hampir selesai, sekarang kita kembali ke Scene 1, pada Scene 1 kita buat sebuah layer baru dan beri nama "Action". Berikan Script yang berfungsi untung menghentikan movie saat pertama kita membuka animasi.

 stop();

16.    Ok, sekarang tinggal kita test animasi dengan menekan tombol CTRL + Enter, bila diikuti secara benar seharusnya hasilnya seperti ini:













Untuk finishing-nya, libatkan kreasi anda untuk membuat foto anda sendiri ataupun foto teman anda dengan bantuan program semisal Adobe Photoshop, dll
Bagaimana? Menarik bukan.....

Berikut saya sertakan file mentah, bila anda kesulitan untuk mempraktekkan tutorial diatas:
Silahkan Download:  DISINI

Semoga Bermanfaat,



--Aryo