Video Tutorial Adobe Flash "Membuat Button Animasi"

Assalammualaikum sahabat blogger, kali ini saya akan mencoba berbagi video tutorial Adobe Flash. Video tutorial Adobe Flash ini berkaitan dengan pembuatan tombol atau button saat disentuh mouse, maka tombol atau button tersebut terdapat animasi berupa munculnya teks.
Langsung saja lihat video tutorianya..

Pengenalan sistem kordinat layar

Pada mata pelajaran matematika, kita mengenal sistem kordinat kartesian. Pengetahuan yang kuat akan matematika, akan sangat mendukung kita nantinya dalam memahami sistem korninat layar. Pada sistem kordinat kartesian sumbu utama dibagi menjadi sumbu x (horisontal) dan sumbu y (vertikal). Persimpangan antara sumbu tersebut merupakan kordinat (0,0). Pada sumbu x semakin ke kiri maka nilai x semakin kecil dan sebaliknya semakin ke kanan nilai x semakin besar. Pada sumbu y semakin ke bawah maka nilai y semakin kecil dan sebaliknya semakin ke atas nilai y semakin besar.

Pada sistem kordinat layar komputer, hampir sama dengan kordinat kartesian, sumbu utama dibagi menjadi sumbu x (horisontal) dan sumbu y (vertikal). Akan tetapi kordinat (0,0) adalah pojok kiri atas layar. Perbedaan selanjutnya adalah pada sumbu y. Pada sumbu y semakin ke bawah maka nilai y semakin besar dan sebaliknya semakin ke atas nilai y semakin kecil. Perhatikan gambar berikut:

Kordinat kartesian dan kordinat layar pada flash

Contoh penerapan dari sistem kordinat layar dalam flash adalah sebagai berikut :


untuk menyelesaikan soal tersebut, kita gambarkan dahulu secara visual sebagai
berikut :

Jadi untuk menggerakan bola secara diagonal, maka pada saat yang bersamaan sumbu x digerakkan ke kanan (ditambah) dan sumbu y digerakan ke bawah (ditambah).




Proses pembuatan aplikasinya adalah sebagai berikut :
1. Buatlah sebuah obyek lingkaran dengan menggunakan oval tool.

2. Seleksi obyek lingkaran tersebut kemudian convert menjadi symbol dengan menekan tombol F8 (pilih menu insert>convert to symbol). Pilih movieclip pada option behaviour dan ketikan bola pada name. Perhatikan bagian regristration, bagian tersebut menentukan posisi suatu movieclip.

Sebagai contoh, ketika kita memilih  regristration  pada  bagian  tengah,  maka  posisi  penghitungan  kordinat movieclip nantinya dihitung di  bagian tengah tidak seperti  yang terlihat  pada properties (karena pada properties hitungan posisi dimulai dari pojok kiri atas).

3. Klik movieclip  bola   ubah posisinya tau letakan di pojok kanan atas stage,  dan } dalam  kondisi  terseleksi  buka  panel  action  (  tekan  f9  atau  klik  menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8). Kemudian ketikan script sebagai berikut :

 

4. Jalankan movie dengan menekan tombol Ctrl+Enter.  Maka bola akan bergerak diagonal  dari kiri atas ke kanan bawah sampai  hilang dari layar.  Tekan tombol Ctrl+W untuk kembali ke stage

Penjelasan program
1. Baris  onClipEvent (enterFrame) { berarti bahwa perintah dalam blok  { } akan dijalankan sepanjang frame aktif artinya pada default seting frame rate : 12 fps (frame  per  secon),  maka  perintah  dalam  blok  {  }  akan  dijalankan  setiap seperduabelas detik sepanjang movie tersebut dijalankan.

2. Baris  // menggerakan bola diagonal merupakan baris komentar, baris ini tidak dijalankan oleh flash.

3. Baris _x += 10; berarti setiap seperduabelas detik kordinat x dari bola ditambah 10  pixel, sehingga  bola  bergerak  kekanan.  Tanda  += merupakan  bentuk penyedehanaan dari action _x = _x+10;

4. Baris _y += 10; berarti setiap seperduabelas detik kordinat y dari bola ditambah 10 pixel, sehingga bola bergerak kebawah.

5. Karena komputer mengitung dengan sangat cepat, perhitungan dalam satu blok { } dapat dikerjakan dengan sekaligus sehingga bola tampak bergerak diagonal.

Referensi: Wandah W "Dasar Pemograman Flash Game"

Pola Penulisan Action Script pada Button

Cara penulisan action script pada tombol adalah sebagai berikut :

1. Pilih  rectangle  tool pada toolbox kemudian buatlah sebuah kotal. Anda juga bisa membuat rounded rectangle dengan memilih option rounded rectangle radius atau bisa juga membuat dengan gaya button bulat dan elips (sesuai selera masing-masing).

 

2. Aturlah static text “tombol” tepat diatas kotak yang sebelumnya telah kita buat, caranya klik text tool, kemudian buka properties dan atur jenis huruf, ukuran dan warna. Buka panel properties (apabila belum terbuka pilih menu window>properties). Pastikan option static text pada text type.

 

3. Seleksi tombol tersebut, kemudian konvert menjadi symbol dengan dengan menekan tombol F8 (pilih menu insert>convert  to symbol). Pilih button pada option behaviour dan ketikan tombol pada name.

 

4. Double klik tombol tersebut sehingga masuk dalam pengaturan tombol. Perhatikan dalam symbol bertipe button terdapat 4 frame yaitu up, over, down dan hit. Up menunjukan kondisi normal suatu tombol. Over menunjukan kondisi tombol saat mouse berada tepat di atasnya. Down menunjukan kondisi tombol saat ditekan dan Hit merupakan area penekanan (sensor) tombol tersebut.

 

5. Klik frame over kemudian masukan keyframe dengan menekan tombol F6 (pilih menu insert>keyframe). Ubah warna dan ukuran tombol pada frame over tersebut Untuk frame Down dan Hit biasanya bisa kita abaikan.

Perbedaan warna antara frame up dan frame over

6. Tekan tombol  Ctrl-E untuk kembali  ke  Stage utama.  Klik tombol dan dalam kondisi  tombol  terpilih  buka  panel  action (  tekan  F9  atau  klik  menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8). Kemudian ketikan script sebagai berikut :

 

7. Tekan Ctrl+Enter untuk menjalankan movie. Tekan tombol Ctrl+W untuk kembali ke stage.

 

Cara membuat Animasi pada Button

1. Buka Adobe Flash > Pilih Action Script 2.0 2. Pilih Rectangle Tool > drag sehingga membentuk button persegi panjang

3. Klik objek button (persegi panjang), tekan f8 pada keryboard ( convert to symbol ) sehingga muncul jendela convert to symbol > pilih type button

4. Klik 2 kali pad button sehingga muncul halaman symbol button > tekan f6 pada bagian over > dan jadikan atau convert kembali button dengan menekan f8 kemudian pilih type Movie Clip

5. Klik 2 kali pada objek sehingga muncul halaman symbol 2, kemudian buat layer baru (layer 2) > buat objek misalnya segi lima > kemudian tempatkan layer 2 dibawah layer 1 ( sehingga objek segi lima berada dibawah objek button )

6. Klik objek segi lima > jadikan symbol movie clip ( seperti langkah ke 4 ) > kemudian berikan scrip pada objek segi lima dengan cara klik objek segilima ( harus sudah dijadikan movie clip dahulu ) kemudian tekan f9 (untuk memmunculkan jendela action ) kemudian tuliskan script rotation seperti pada tutorial membuat animasi putar

7. Jalankan animasi dengan menekan Ctrl+Enter, sentuh button sehingga akan muncul animasi putar saat di sentuh. DOWNLOAD

Efek Text Masking

1. Buka Adobe Flash >> pilih ( Action Script 2.0 )
2. Pilih Tex Tool > Tuliskan misalkan nama “Muryan Awaludin” dengan warna orange ( FF9900 )


3. Klik new layer ( buatlah 2 layer ) berarti ada layer 2 dan layer 3 , copy teks “Muryan Awaludin” pada layer 3 dan posisikan sama dengan text pada layer 1.


4. Klik layer 2 >> buat objek kotak dengan Rectangle Tool ( pilih warna gradient )


5. Aturlah pada Layer 1 dan layer 3 ( pilih frame 40 : Insert frame [tekan F5 pada keyboard]) ), pada Layer 2 ( pilih frame 40 : Insert Key Frame [tekan F6 pada keyboard] ). Kemudian pada layer 2 buatkan Motion Tween( jika menggunakan adobe cs3 ) , Classic Tween ( jika menggunakan adobe cs5 ).


6. Pindahkan objek ( pada layer 2 ) ke sebelah kanan


7. Kemudian pada layer 3 jadikan layer mask, caranya klik kanan pada layer 3 >> Pilih Mask >> Jika sudah selesai untuk menjalankan animasinya tekan Ctrl + Enter


DOWNLOAD Efek Text Masking
DEMO ANIMASI SWF
Password rar: www.ilmudesain.web.id

Animasi Spiral

Tutorial kali ini kita tidak membuat objek di halaman stage, karena objek akan langsung dibuat menggunakan script dimana nanti akan muncul sebuat garis di tengah stage, garis tersebut akan terus berputar sehingga membentuklah sebuah objek spiral. udah dulu ngobrolnya sekarang langsung kita ke TKP aja ya..


1. Bukalah Adobe Flash document, ukuran misalnya 500 x 500 px
2. Klik frame 1 kemudian tekan f9, pada panel actions ketikan script seperti berikut :

jarak = 0;
sudut = 0;
posX = 0;
posY = 0;
kecepatan = 0.2;
this.createEmptyMovieClip("spiral", this.getNextHighestDepth());
spiral._x = Stage.width/2;
spiral._y = Stage.height/2;
spiral.lineStyle(8, 0xea1a06);
onEnterFrame = function () {
 spiral._rotation += 20;
 if (jarak<150) {
  jarak += 0.7;
  sudut += kecepatan;
  posX = Math.cos(sudut)*jarak;
  posY = Math.sin(sudut)*jarak;
  spiral.lineTo(posX, posY);
 }
};

3. Tekan Ctrl Enter untuk menjalankan Animasinya

DEMO ANIMASI
DOWNLOAD TUTORIAL
Password : www.ilmudesain.web.id

Animasi Next dan Preview Gambar

1. Buka program Adobe Flash ( pilih Action Script 2.0 )
2. Pada Layer 1, Frame 1 > import gambar (Ctrl + R), kemudian tekan f6 pada Frame 2 > import gambar (ctrl +R) sampe Frame 6 ( pada setiap frame tekan f6 atau insert keyframe)



3. Insert new layer ( layer 2 ) >> pilih rectangle tool >> jadikan button dengan menekan f8 dan pilih button >> buatlah 2 button ( Preview dan Next )


4. Klik pada button Preview >> tekan f9 > kemudian isikan script seperti berikut >>

on(press) {
 prevFrame();
}

http://www.blogger.com/img/blank.gif
5. Klik pada Button Next >> tekan f9 > kemudian isikan script seperti berikut >>

on(press) {
 nextFrame();
}

6. Pada layer2 >> klik frame1 >> tekan f9 >> isikan script >> stop();
7. Jalankan animasi dengan menekan Ctrl + Enter ..LIHAT DEMO

DOWNLOAD
Password PDF : www.ilmudesain.web.id

Animasi Mask Gambar Gerak

1. Buka Program Adobe Flash CS > pilih Action Script 2.0
2. Import beberapa gambar atau foto ke dalam layer 1 dan Grup semua gambar dengan cara menekan ctrl + g >> duplikat semua gambar (masih dalam layer 1)


3. Insert Layer > pilih Ractangle Tool > buat kotak menutupi gambar


4. Pada Layer 1 > pilih Insert keyFrame (f6) di frame 40 dan pada layer 2 > pilih Insert Frame (f5) di frame 40. Kemudian pada layer 1 dibuatkan Motion Tween lalu geser gambar kesebelah kiri

5. Klik kanan layer 2 >> mask


6. Jalankan dengan menekan Ctrl + Enter

DOWNLOAD
DEMO SWF
Password : www.ilmudesain.web.id

Animasi Suara Play, Pause dan Stop

1. Buka program Adone Flash CS5

2. Pada Frame 1 buatlah gambar seperti dibawah ini :


3. Jadikan button pada setiap gambar ( misalnya : grup ( drag + ctrl G ) gambar Play kemudian tekan f8 pada keyboard sehingga muncul jendela symbol.



4. Kemudian pada Properties ( Ctrl + f3 ) isikan instance name nya sama dengan nama symbolnya yaitu play_btn



5. Lakukan langkah 3 dan 4 pada button Pause ( nama symbol : pause_btn | nama instance : pause_btn ) dan Stop ( nama symbol : stop_btn | nama instance : stop_btn ).
6. Langkah berikutnya yaitu megimport musik > tekan Ctrl + R > pilih musik > Open


7. Jika sudah di import > lihat pada panel Library ( Ctrl + L ) > Lingkage > tulis bgm


8. Langkah terakhir yaitu memberikan script pada frame 1, klik frame 1 > tekan f9 sehingga munjul jendela Action Fram >> kemudian Ketik script berikut :

Pause = false;
Stop = false;
function mainkanMusik() {
 musik = new Sound();
 musik.attachSound("bgm");
 musik.start(0,999);
}
pause_btn.onPress = function() {
 posisi = Math.floor(musik.position/1000);
 musik.stop();
 Pause = true;
};
play_btn.onPress = function() {
 if (Stop) {
  musik.start(0,1);
  Pause = false;
  Stop = false;
 }
 if (Pause) 
  musik.start(posisi,1);
  Pause = false;
 }http://www.blogger.com/img/blank.gif
 musik.onSoundComplete = function() {http://www.blogger.com/img/blank.gif
  mainkanMusik();
 };
};
stop_btn.onPress = function() {
 Stop = true;
 musik.stop();
};
mainkanMusik();

9. Jalankan dengan menekan Ctrl + Enter

DOWNLOAD
Demo
Password : www.ilmudesain.web.id

Animasi Acak Angka

Tutorial kali ini kita akan membuat acak angka, jika kita tekan tombol acak maka angka akan diajak, dan jika kita tekan tombol stop maka angka akan berhenti dan ukuran angka akan di perbesar....

1. Buatlah sebuah file flash document
2. Pilih Text tool > kemudian klik drag, tuliskan misalnya 12345. Pada Panel Properties aturkah type text : Dynamic Text, Instance name : angka_mc ( setelah dijadikan movie clip ), dan non aktifkan tombol select table.

3. Pastikan seleksi teks ( teks dynamic yang 12345 ) jadikan movieclip, dengan cara klik teks 12345 >> tekan f8 (pada keyboard) pilih movie clip name:angka_mc, kemudian pada scene1 jadikan instance name : angka_mc.
4. Buatlah sebuah dynamic text bertuliskan Acak. Seleksi dynamic text ini dan pada panel properties nonaktifkan tombol selectable serta aktiakan tombol show border around text dan Seleksi acak_btn di stage dan pada panel properties masukkan acak_btn di dalam kotak instance name.

5. Buatlah sebuah dynamic text bertuliskan Stop. Seleksi dynamic text ini dan pada panel properties nonaktifkan tombol selectable serta aktiakan tombol show border around text dan Seleksi acak_btn di stage dan pada panel properties masukkan stop_btn di dalam kotak instance name.


6. Klik Frame 1 dan tekan F9. Pada Panel Actions masukan script berikut :
//membuat variable acak dengan nilai true
acak = true;
//perintah yang dijalankan ketika frame pada movie clip angka_mc dimainkan
angka_mc.onEnterFrame = function() {
//jika variable acak bernilai false dan scala x serta scala y movie clip angka_mc kurang dari 230
if (!acak && this._xscale<230 && this._yscale<230) {
//scala x movie clip angka_mc ditambah 20
this._xscale += 20;
//scala y movie clip angka_mc ditambah 20
this._yscale += 20;
}
//jika variable acak bernilai true
if (acak) {
//scala x movie clip angka_mc diubah menjadi 100
this._xscale = 100;
//scala y movie clip angka_mc diubah menjadi 100
this._yscale = 100;
//tampilkan nilai acak 0-99999 pada dynamic text dengan Var angka di dalam movie clip angka_mc
this.angka = random(99999);
}
};
//ketika button acak_btn ditekan
acak_btn.onPress = function() {
//ubah nilai variable acak menjadi true
acak = true;http://www.blogger.com/img/blank.gif
};http://www.blogger.com/img/blank.gif
//ketika button stop_btn ditekan
stop_btn.onPress = function() {
//ubah nilai variable acak menjadi false
acak = false;
};

7. Tekan Ctrl+Enter untuk menjalankan animasinya.



Password : www.ilmudesain.web.id

Action pada Button

Sebelum Anda membuat sebuah action pada button, Anda harus sudah membuat sebuah animasi yang lain jika belum silahkan lihat contoh tutorial sebelumnya dan trik button rollover. Karena pada trik kali ini saya hanya akan menambahkan script pada button untuk menjalankan dan memberhentikan animasi. Ok langsung aja ke TKP ya...

1.Setela h Anda membuat sebuah animasi : misalnya pada latihan kali ini saya kasih contoh animasi guide line, buatlah layer baru untuk layer button.
2. Setelah muncul layer baru kemudian pilihlah Rectangele Tool, buatlah sebuah kotak kecil ( tujuannya untuk tombol ) dan berikan teks Play dan Stop

3. Pilih kotak play >> tekan f8 ( sehingga muncul jendela convert to symbol ) > pilih type button


4. Setelah dijadikan symbol “button”, masih pada button play >> tekan f9 >> kemudian ketikan script berikut :


5. Klik pada button stop >> tekan f9 >> isikan script berikut :


6. Jika semua langkah trik dilakukan dengan bener maka hasilnya Lihat Demo


Password PDF : www.ilmudesain.web.id

Animasi Teks

Berikut ini adalah contoh animasi teks sederhana menggunakan Macromedia Flash, dimana terdapat 3 buah teks yang akan berjalan secara bersamaan namun dengan arah yang berlainan. Ditunjukkan juga kegunaan dari property change direction of text untuk mengubah arah penulisan teks. Untuk membuat animasi ini langkah-langkahnya adalah sebagai berikut :

1. Pada layer 1 ketiklah teks " Ilmu Desain Grafis " persis diatas batas stage, untuk mengubah arah penulisan teks pada bagian properties pilih change orientation of text pada saat kursor berada di akhir teks.


Agar teks tertulis secara vertikal, pilihlah Vertical, Left to Right seperti ditunjukkan dalam gambar berikut :


2. Tulisan "Ilmu Desain Grafis" pada layer 1 akan nampak seperti dalam gambar berikut ini :

Animasikan teks tersebut jalan dari atas ke bawah sampai frame 30.

3. Tambahkan layer baru, beri nama layer 2, kemudian ketik teks "TUTORIAL DESAIN" Tambahkan layer baru lagi (layer 3) dan ketik teks ketiga "ANIMASI FLASH" dengan arah teks horizontal di batas kiri stage, lalu animasikan jalan dari kiri ke kanan sampai frame 30.




Password PDF : www.ilmudesain.web.id