-->
banner

10.06.2015

author photo
Apa kabar sobat blogger semua?! Setelah kemarin saya memposting bagaimana cara membuat animasi dengan adobe flash. Kali ini saya akan melanjutkannya ke level berikutnya yaitu bagaimana cara membuat animasi dengan motion tween yang dapat dikontrol dengan actionscript pada buttonl. Menarik bukan! :) Kali ini saya akan membuat animasi cicak yang berjalan menggunakan Motion tween dan Actionscript.
Langsung saja siapkan alat dan bahannya. Berikut langkah-langkah mengerjakannya akan dibagi menjadi 3 baginan: 1. membuat animasi cicak, 2. Membuat Button, 3. Actionscript 2.0

Membuat Animasi Cicak
1. Pertama buka software Adobe flash, disini saya menggunakan Adobe flash cs6, boleh juga menggunakan versi lama atau baru yang terpenting lalu pilih Actionscript 2.0 jangan salah pilih Actionscript 3.0 karena sudah berbeda dari aturan scriptnya.
2. Siapkan gambar cicak yang telah dipisahkan berdasarkan urutan nomernya, bisa menggunakan corel atau photoshop, lalu simpan dengan format .PNG. Jadi total gambar ada 8 gaya cicak.

3. Buatlayer baru dan berinama "cicak". Import gambar cicak yang telah dipisahkan menurut urutan nomernya satu persatu kedalam library. Pada cicak no 1 drag ke dalam stage dan convert to symbol(F8) pilih graphic, beri nama cicak1.


4. Double click cicak 1 yang ada di stage lalu akan menuju ke graphic, disitulah kita akan membuat animasi gerakan cicaknya. Drag cicak 2 di library dan tempatkan di frame 2. lakukan langkah berikut sampai cicak ke 8 pada frame 8.
5. Atur masing-masing ukuran cicak dari frame 1-8 menjadi ukuran yang sama, di properties objectnya. Agar lebih mudahnya convert to symbol(F8) terlebih dahulu semua gambar cicak dari cicak 2-8 kedalam graphic.


Sehingga akan menghasilkan pergerakan cicak seperti gambar.


6.  Setelah animasi cicak selesai kembali ke Scane 1. Klik kanan object cicak 1 pilih create motion tween. Atur motion tween sampai ke layer berapa saja terserah, yang penting panjang. Pada frame terakhir drag cicak ke arah yang berseberangan.


7. Setelah terlihat garis hijau (garis motion tween) kreasikan kemana arah cicak akan berjalan dan ataur gerak dan posisinya dengan memberikan titik titik dimana cicak akan berbelok, dengan cara insert keyframe(F6) pada frame pertengahan dan atur sesuai keinginan. Untuk membuat lengkungan dengan Convert Direction(Shift+C), kreasikan sesuai kebutuhan.



Membuat Button
1. Buat layer baru dan beri nama button untuk tombolnya. Buat object button dengan rectangle tool(R) convert to symbol(F8) pilih button dan beri nama "b_play".


2. Karena kita membutuhkan 3 button yaitu play, stop, dan replay maka kita duplikat saja button yang tadi sudah dibuat dengan cara klik kanan "b_play" di library lalu duplicate. Beri nama "b_stop" dan duplicate lagi beri nama "b_replay".


3. Setelah ketiga button dibuat kreasikan dengan double click object button dan buat perbedaan pada frame Overnya agar button yang satu dengan yang lainnya berbeda. Lakukan pada setiap button.


Actionscript 2.0
1. Di scane 1 klik kanan button play, pilih action.


Lakukan pada semua button dan isi dengan script berikut!
Actionscript 2.0 pada "b_play":

on (release){
    play();
}

Actionscript 2.0 pada "b_stop":

on (release){
    stop();
}

Actionscript 2.0 pada "b_replay":

on (release){
    gotoAndPlay();
}

Test hasilnya dengan playmovie(Ctrl+Enter) dan test juga buttonnya berfungsi atau belum! :D :)


Berikut download juga documen Adobe Flash cs6. :)

Selesai sudah semoga berhasil dan bermanfaat bagi teman-teman semua.
your advertise here

This post have 9 komentar

avatar
Anonymous delete 6 October 2015 at 15:00

oalah gtu toh tutor'y, nice share gan (y)

Reply
avatar
masfanyt delete 6 October 2015 at 15:05

manfaat gan , bisa dipraktekin dirumah :D

Reply
avatar
Damai Putra delete 6 October 2015 at 15:07

makasih gan informasi nya (y)

Reply
avatar
Tips trik Bayu Widiyanto delete 6 October 2015 at 15:10

Keren gan,kebetulan ini salah satu mata kuliah ane,nice post gan

Reply
avatar
Unknown delete 9 October 2015 at 21:20

oke Gan silahkan dcoba. :)

Reply
avatar
Unknown delete 9 October 2015 at 21:26

iya Gan dicoba dulu. beat refrensi tugas. ;)

Reply
avatar
D Sukmana Adi delete 17 November 2015 at 09:04

mantap mas sip..lanjutkan, adsennya jangan terlalu banyak bikin berat tuh

Reply
avatar
Unknown delete 17 November 2015 at 13:10

siap pak, tugas yg laen mnyusul. :D

Reply


EmoticonEmoticon

Next article Next Post
Previous article Previous Post

Advertisement

Themeindie.com