29 May 2012

Membuat Animasi Bola Mata Mengikuti Mouse/Cursor dengan Adobe Flash



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


9 comments:

Anonymous said...

Thanks for share.....
sy ijin donlot filenya bro...

sekalian mau tanya ttg action script
gimana caranya menghubungkan file FLA dengan file AS.
terima kasih sebelumnya

Aryo Widi on June 21, 2012 at 9:48 AM said...

Silahkan download mas brooo,,

untuk cara menghubungkan, saya sendiri juga pemula bro, hehehe :">

Achmad Alimin on August 15, 2012 at 4:01 PM said...

bro mau nanya gimana buat matanya itu bergerak dihomepage web kita bro bukan cuman di kotak putih persegi itu?

terima kasih :D

Aryo Widi on August 28, 2012 at 6:19 PM said...

@Achmad Alimin: Maaf mas bro, baru sempet jawab. Untuk full web, mungkin cara satu-satunya dengan merubah canvas size sesuai ukuran web misalnya: 1024 x 768px, 1440 x 900px,
begitu, semoga membantu :)

debby vela on May 1, 2013 at 11:50 PM said...

ini menggunakan action script 2.0 atau 3.0

Aryo Widi on May 22, 2013 at 3:18 AM said...

ini saya pakai AS 2.0 sis Debby

Junda Xu on July 23, 2015 at 11:19 AM said...

20150723 junda
kate spade bags
coach factory outlet
pandora jewelry sale
michael kors watches
coach outlet
oakley outlet
kate spade handbags
kate spade
coach outlet store online
oakley sunglasses outlet
louis vuitton sacs
kate spade handbags
longchamp pliage
coach factory outlet
louis vuitton borse
mont blanc
coach outlet online
cheap oakley sunglasses
true religion jeans
ralph lauren uk outlet
nike blazer high
mont blanc pens
longchamp pliage pas cher
hollister kids
gucci handbags
soccer jerseys for sale
pandora bracelets
prada shoes
mcm bags
pandora jewelry outlet
fitflops shoes
cheap jordan shoes
michael kors bags
abercrombie & fitch
true religion jeans outlet
ed hardy clothing uk
toms shoes sale
abercrombie and fitch
fitflops sale
ralph lauren homme

Derrydotcom on July 26, 2015 at 1:22 PM said...
This comment has been removed by the author.
dong dong23 on April 28, 2016 at 9:44 AM said...

toms shoes
coach outlet store online
ugg outlet
hollister kids
michael kors outlet
true religion outlet
gucci outlet
true religion
kate spade
cheap oakley sunglasses
louis vuitton handbags
cheap jerseys
air jordan retro
nike air max
cheap jordans
michael kors handbags
tods outlet
cheap oakleys
kobe shoes 11
coach outlet store online
christian louboutin
gucci outlet
hollister clothing
ray ban sunglasses
ray ban sunglasses
ray ban sunglasses
nike free run
coach outlet
toms shoes
marc jacobs
oakley sunglasses
oakley sunglasses wholesale
coach factory outlet
nfl jerseys wholesale
nike air max
nike roshe run
replica watches for sale
kevin durant shoes
louis vuitton outlet
michael kors purses
20164.28wengdongdong

Post a Comment

 

Aryo Widiantoko Graphic Design, Web Design, Production ©2012