Tutorial Membuat Efek Masking dengan Adobe Flash CS6

Pada tutorial kali ini, saya mencoba membuat video tutorial tentang animasi dengan menggunakan Adobe Flash CS6. Tutorial ini bisa juga dibuat menggunakan Adobe versi dibawahnya, seperti Adobe Flash CS5, Adobe Flash CS4, Adobe Flash CS3, Adobe Flash CS2, maupun menggunakan Macromedia.

Tutorial membuat animasi efek masking pada teks ini, sebenarnya sudah pernah dibuat juga versi teksnya yang berjudul Efek Text Masking. Jadi selain dibuatkan video tutorialnya, teman-teman blogger juga bisa lihat video nya...
Langsung saja lihat disini..

Tutorial Adobe Flash Company Profile (part 1)

Video tutorial cara membuat company profile dengan Adobe Flash CS6 ini, dibuat pada saat memberikan materi tentang desain grafis 2 (dasar-dasar animasi flash). Tutorial membuat company profile dengan Adobe Flash CS6 ini, merupakan penggabungan materi sebelumnya. Mudah-mudahan dengan materi yang diberikan ini bisa bermanfaat bagi teman-teman semua.
Untuk lebih jelasnya silahkan langsung saja lihat dan download video tutorialnya...

Animasi Button (Bagian 2)

Tutorial kali ini saya akan membagikan bagaimana cara membuat animasi button dengan efek rotation. Video tutorial berikut saya buat pada saat memberikan materi tentang membuat animasi dasar. Mudah-mudahan apa yang saya bagikan bisa bermanfaat bagi temen-temen semua, khususnya bagi saya sendiri. Video tutorial animasi ini saya buat menggunakan Adobe Flash, semoga bermanfaat.... :D

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"

Cara Penulisan Action Script pada Frame

Selamat datang kembali teman-teman blogger pecinta desain grafis. Pada tutorial desain grafis ini khususnya pada kategori tutorial adobe flash, tutorial ini bisa juga dijalankan semua versi adobe flash, dari Adobe Flash Cs3, Cs4, Cs5, Cs6 maupun yang masih menggunakan macromedia flash.

Pada tutorial sebelumnya yaitu penulisan script di dalam button dan di dalam movieclip, dapat ditulis dalam bentuk lain yang mana penulisan scriptnya diletakan didalam sebuah frame. Hal utama yang harus diingat dalam penulisan action pada frame adalah instance name. Instance name merupakan salah satu identitas yang terpenting dalam flash yang membedakan antara obyek satu dengan obyek yang lain.

 

 Aturan pemberian nama instance name antara lain adalah :

1. Nama intansi boleh sama dengan nama symbol.
2. Tidak boleh menggunakan spasi, titik, dan tanda baca yang lain.
3. Tidak boleh menggunakan nama yang sama dengan suatu perintah dalam flash misalnya : obyek, level, break dan sebagainya.
4. Tidak boleh menggunakan angka saja untuk nama akan tetapi sebuah nama instansi boleh diikuti dengan angka. Contoh yang salah :12, 13, dan sebagainya, contoh yang benar : bola1, bola_2 dan sebagainya.
5. Tidak boleh ada nama instansi yang sama.
6. Untuk mempermudah proses penulisan script, dapat ditambahkan “_mc” untuk symbol bertipe movieclip dan “_btn” untuk symbol bertipe button. Contoh : “bola1_mc”, “tombol1_btn” dan sebagainya.
7. Dua atau lebih symbol yang sama boleh dipakai, tetapi harus memiliki nama instansi yang berbeda.

Berikut cara penulisan action pada movieclip:
1. Pilih oval  tool pada tool box, buatlah sebuah obyek lingkaran.  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.

 

2. Klik symbol pada objek bola tersebut, kemudian buka panel instance dan ketikan nama “bola”
pada instance name.

 

3. Buatlah sebuah layer baru dan ubah namanya menjadi layer action. Penambahan layer action akan mempermudah kita dalam penulisan action pada frame, sehingga tidak akan mengganggu obyek yang lain.

 

4. Klik frame 1 layer action, dan dalam kondisi frame 1 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).

5. Jalankan Movie dengan menekan tombol Ctrl+Enter, maka kita akan melihat hasil yang sama dengan dengan cara penulisan action pada movieclip.

Penjelasan pola penulisan action script pada frame adalah sebagai berikut :
1. Sebuah penulisan script di frame memiliki 3 tipe penulisan yaitu penulisan di dalam suatu blok movie event atau mouse event, contoh onEnterframe = function(){} dan penulisan tanpa movie event atau mouse event, tipe penulisan yang ke tiga adalah kombinasi dari keduanya.

2. Pada dasarnya penulisan action pada frame sama dengan penulisan pada movieclip maupun pada button. Hanya saja pada frame terdapat script function() dan penggunaan nama instansi.

3. Perhatikan perbedaan antara penulisan pada frame dan penulisan pada moviclip berikut:

 

4. Apabila ingin menuliskan action button pada frame, maka yang harus di ubah adalah movie event diubah menjadi mouse event. contoh : tombol.onRelease =function(){}

Keuntungan penulisan script pada frame :
1. Dibandingkan  dengan  menulis  action  di  movieclip,  penulisan  script  di  dalam movieclip  cenderung  lebih  rumit,  akan  tetapi  bagi  programmer  yang  familiar dengan bahasa pemrograman seperti C++,  Java,  Delphi atau V basic,  penulisan pada frame akan menjadi lebih mudah.
2. Lebih mudah dalam menuliskan function tertentu atau perintah berulang yang sering dipakai.
3. Karena  seluruh  script  biasanya dituliskan pada  frame,  maka  mengecek  action
seluruh obyek yang ada akan lebih mudah, tanpa harus ke masing-masing obyek.

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

Cara Membuat Menu Pop Up pada Flash

Pop up menu merupakan tombol menu yang berisikan beberapa sub-menu lain. Flash tidak memiliki tool khusus untuk membuat menu seperti ini. Namun dengan sedikit trik, kita bisa membuatnya, bahkan untuk yang kompleks sekalipun. Untuk menggunakan tutorial ini, saya asumsikan anda telah mengenal konsep menggambar dalam Flash, serta penggunaan Symbol berbentuk Movie Clip dan Button. untuk mendownload tutorialnya langsung saja klik link berikut >> Cara Membuat Menu Pop Up pada Flash

by Anggi Prima Nadvi Lubis, ST

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