Pemberitahuan

Blog ini berisi Posting yang saya tulis sendiri dan ada yang bersumber dari website lain serta saya sertakan link sumbernya. di blog ini hanya untuk berbagi ilmu. bila ada kekhilafan saya mohon maaf. selamat berkunjung.
Tampilkan postingan dengan label Flash. Tampilkan semua postingan
Tampilkan postingan dengan label Flash. Tampilkan semua postingan

Efek Animasi Kobaran Api dengan Flash

Posted by Belajar Desain On Sabtu, 12 November 2011 0 comments



       berbagai macan efek animasi bisa kita buat dengan flash, kita sekarang akan membuat efek api yang menyala nyala menggunakan flash. yang kita perlukan hanya sedikit pembuatan objek lalu kita sisipkan code script ke objek tersebut lalu bukan sulap bukan sihir... jadilah api yang membara...^_^..
oke tanpa banyak bacot lagi langsung ikuti step by stepnya :



1. Buatlah sebuah flash document dengan warna stage hitam
.
2. Buatlah sebuah lingkaran berwarna radial dengan kode #FFFFFF alpha 100% dan #FFFFFF alpha 0%. Seleksi lingkaran tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan api sebagai name dan movie clip sebagai type lalu tekan ok.

3. Seleksi movie clip api di stage dan tekan F8 lagi. Pada kotak dialog yang muncul masukkan animasi_api sebagai name dan movie clip sebagai type serta titik registration berada ditengah-tengah lalu tekan ok. Klik 2 kali movie clip animasi_api untuk masuk ke dalam stagenya.

letaka
Letak objek di frame 1 movie clip animasi_api

4. Klik kanan frame 10 dan pilih Insert Keyframe. Seleksi movie clip api dan tekan Ctrl+F3. Pada panel properties yang muncul ubah Color menjadi Tint berwarna kuning. Ubah posisi movie clip api di frame 10 ke atas.

letakb

Letak objek di frame 10 movie clip animasi_api

5. Klik kanan frame 20 dan pilih Insert Keyframe. Seleksi movie clip api dan tekan Ctrl+F3. Pada panel properties yang muncul ubah Color menjadi Tint berwarna merah . Ubah ukurannya menjadi sedikit membesar dan juga ubah posisinya ke atas.
letakc
Letak objek di frame 20 movie clip animasi_api

6. Klik kanan frame 25 dan pilih Insert Keyframe. Seleksi movie clip api dan tekan Ctrl+F3. Pada panel properties yang muncul ubah Color menjadi Tint berwarna hitam. Ubah posisi movie clip api sedikit ke atas dan juga kecilkan bentuknya.
letakd2x
Letak objek di frame 25 movie clip animasi_api

7. Klik kanan frame 1 dan pilih Create Motion Tween. Klik kanan frame 10 dan pilih Create Motion Tween. Klik kanan frame 20 dan pilih Create Motion Tween.

8. Tekan Ctrl+E untuk kembali ke stage scene 1. Seleksi movie clip animasi_api dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan animasi_api sebagai instance name.

9. Klik frame 1 dan tekan F9. Pada kotak actions yang muncul masukkan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//membuat variable i dengan nilai 1
var i:Number = 1;
//membuat variable jumlah_api dengan nilai 50
var jumlah_api:Number = 50;
//membuat variable x dengan nilai koordinat awal x movie clip animasi_api
var x:Number = animasi_api._x;
onEnterFrame = function () {
 //jika nilai variable i kurang dari atau sama dengan nilai variable jumlah_api
 if (i<=jumlah_api) {
  //duplikasi movie clip animasi_api dengan nama bari api+i dan pada level kedalaman i
  duplicateMovieClip(animasi_api, "api"+i, i);
  //mengatur letak koordinat x movie clip api+i
  _root["api"+i]._x = x+6-(Math.round(12*Math.random()));
  //nilai variable i ditambah 1
  i++;
 //jika tidak
 } else {
  //nilai variable i menjadi 1
  i = 1;
 }
};
10. Tekan Ctrl+Enter untuk melihat hasilnya.


gimana.. gampang kan?.. 
kalau susah di sini saya sertakan file latihan untuk contohnya yang dapat di download di sini :














SOURCE : warung flash

Baca Selengkapnya

Animasi Revolusi Bulan mengitari Bumi

Posted by Belajar Desain On Senin, 07 November 2011 1 comments

Haaah... gara-gara hujan deras daerah jogja nih. saya tidak bisa masuk kuliah di amikom temn,.. diem di kontrakan sambil maen game terus lama-lama bosan juga.. dari pada pusing kita coba buat tutorial yang mudah-mudahan bisa bermanfaat bagi para pengunjung blog saya,


kali ini dalam tutorial belajar desain93, kita akan membuat sebuah animasi berupa bulan yg mengitari bumi. sebenarnya, teknik ini masih simple karena hanya menggunakan Motion Guide dan sedikit permak. oke langsung aja kita mulai tutorialnya oke :D




1. Buatlah 4 buah layer dengan mengklik tombol Insert Layer untuk memasukan layer baru. Pastikan posisi masing-masing layer seperti gambar di bawah ini:

timeline1-revo
Gambar awal timeline

2. Pastikan anda aktif di Layer 1. Gambarlah sebuah lingkaran besar (sebagai bumi) dan tempatkan di tengah-tengah stage. Seleksi seluruh lingkaran tadi dan tekan Ctrl+C untuk mengcopy lingkaran tersebut.
3. Klik Layer 4 agar anda aktif di layer tersebut. Setelah anda berada di Layer 4, klik kanan stage dan pilih Paste in Place.
4. Klik Layer 3 agar anda aktif di layer tersebut. Gambarlah sebuah garis berbentuk oval seperti di bawah ini.

oval-revo
Garis berbentuk oval

5. Hilangkan sedikit garis di bagian atas garis oval tersebut sehingga akan ada 2 ujung di garis oval tersebut.
garis-revo
Pastikan kedua ujungnya terpisah
6. Klik Layer 2 agar anda aktif di layer tersebut. Gambarlah sebuah lingkaran kecil (sebagai bulan) di stage Layer 2.
7. Seleksi lingkaran kecil tersebut dan tekan F8. Pada kotak dialog yang muncul masukan bulan sebagai Name dan Movie Clip sebagai type lalu tekan OK.
8. Tempatkan movie clip ini di ujung garis oval sebelah kiri (pastikan titik registration movie clip ini berada di ujung garis)
9. Klik kanan frame 70 Layer 3 dan pilih Insert Frame
10. Klik kanan frame 70 Layer 2 dan pilih Insert Keyframe. Ubah letak movie clip di frame 70 layer 2 ke ujung garis oval bagian kanan (pastikan titik registration movie clip ini berada di ujung garis)
11. Klik kanan frame 1 Layer 2 dan pilih Create Motion Tween
12. Klik kanan Layer 3 dan pilih Guide. Singgungkan Layer 2 ke Layer 3.
13. Klik kanan frame 30 Layer 1 dan pilih Insert Keyframe.
14. Klik kanan frame 63 dan pilih Insert Frame
15. Hapus lingkaran besar di frame 1 Layer 1
16. Klik kanan frame 70 Layer 4 dan pilih Insert Frame.
17. Klik kanan frame 64 Layer 4 dan pilih Insert Keyframe
18. Klik kanan frame 30 Layer 4 dan pilih Insert Keyframe. Hapus lingkaran besar di frame 30 Layer 4 ini
19. Sehingga di Timeline akan tampak seperti di bawah ini:

timeline-revo
Gambar akhir timeline

20. Tekan Ctrl+Enter untuk melinat hasilnya.

Gimana teman? gampang kan?.. kalau ingin lebih realistis kita tinggal menggambar bumi dan bulan seperti aslinya. tapi ya gak harus persis kayak aslinya.. kita sesuaikan dengan bentuk kartunnya oke..
sampai di sini dulu tutorial ini semoga bisa bermanfaat bagi pembaca.












source : warung flash

Baca Selengkapnya

membuat game maze double player dengan flash

Posted by Belajar Desain On Kamis, 27 Oktober 2011 0 comments

pernahkah anda berpikir anda ingin membuat sebuah game? jik jawabannya ya, lalu sulitkah pembuatannya? kalau game berbasis flash kita masih bisa memahaminya. oleh karena itu, pada tutorial kali ini kita akan mencoba membuat sebuah game maze dengan 2 pemain. apakah sulit? jika mengikuti tutorial ini, saya rasa tidak terlalu sulit. yuk langsung kita coba...









Berikut ini pengembangan dari tutorial dasar maze game. Di permainan ini kita akan menggerakan 2 pemain sekaligus dalam sebuah maze.
1. Buatlah sebuah flash document.
2. Buatlah sebuah garis persegi.

3. Buatlah beberapa garis seperti gambar dibawah ini :
garis-garis maze
4. Kemudian warnai seperti gambar di bawah ini :
vektor maze
5. Seleksi seluruh objek, kemudian tekan F8. Pada panel yang muncul masukkan Dinding sebagai name dan movie clip sebagai type lalu tekan ok.
6. Seleksi movie clip Dinding kemudian tekan Ctrl+F3. Pada panel properties yang muncul ketikkan dinding di dalam kotak instance name.
7. Letakkan movie clip Dinding ditengah-tengah stage.
8. Buatlah sebuah lingkaran berwarna merah kemudian tekan F8. Pada panel yang muncul masukkan Pemain1sebagai name dan movie clip sebagai type lalu tekan ok.
red ball
9. Seleksi movie clip Pemain1 kemudian pada panel properties, ketikkan pemain1 di dalam kotak instance name.
10. Buatlah sebuah lingkaran berwarna biru kemudian tekan F8. Pada panel yang muncul masukkan Pemain2sebagai name dan movie clip sebagai type lalu tekan ok.
blue circle
11. Seleksi movie clip Pemain2 kemudian pada panel properties, ketikkan pemain2 di dalam kotak instance name.
12. Letakkan movie clip Pemain1 dan Pemain2 seperti gambar di bawah ini :
letak pemain di maze

13. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

stop();
//jari-jari pemain
jarijari1 = pemain1._width/2;
jarijari2 = pemain2._width/2;
//kecepatan pemain bergerak
kecepatan = 5;
onEnterFrame = function() {
 //jika tombol panah kiri ditekan
 if (Key.isDown(Key.LEFT)) {
  //pemain1 dan pemain2 bergerak ke kiri
  pemain1._x -= kecepatan;
  pemain2._x -= kecepatan;
 }
 //jika tombol panah kanan ditekan
 if (Key.isDown(Key.RIGHT)) {
  //pemain1 dan pemain2 bergerak ke kanan
  pemain1._x += kecepatan;
  pemain2._x += kecepatan;
 }
 //jika tombol panah atas ditekan
 if (Key.isDown(Key.UP)) {
  //pemain1 dan pemain2 bergerak ke atas
  pemain1._y -= kecepatan;
  pemain2._y -= kecepatan;
 }
 //jika tombol panah bawah ditekan
 if (Key.isDown(Key.DOWN)) {
  //pemain1 dan pemain2 bergerak ke bawah
  pemain1._y += kecepatan;
  pemain2._y += kecepatan;
 }
 //membuat pemain1 tidak dapat melewati dinding
 while (dinding.hitTest(pemain1._x, pemain1._y+jarijari1, true)) {
  pemain1._y--;
 }
 while (dinding.hitTest(pemain1._x, pemain1._y-jarijari1, true)) {
  pemain1._y++;
 }
 while (dinding.hitTest(pemain1._x-jarijari1, pemain1._y, true)) {
  pemain1._x++;
 }
 while (dinding.hitTest(pemain1._x+jarijari1, pemain1._y, true)) {
  pemain1._x--;
 }
 while (dinding.hitTest(pemain1._x-jarijari1, pemain1._y+jarijari1, true)) {
  pemain1._x++;
  pemain1._y--;
 }
 while (dinding.hitTest(pemain1._x+jarijari1, pemain1._y-jarijari1, true)) {
  pemain1._x--;
  pemain1._y++;
 }
 while (dinding.hitTest(pemain1._x-jarijari1, pemain1._y-jarijari1, true)) {
  pemain1._x++;
  pemain1._y++;
 }
 while (dinding.hitTest(pemain1._x+jarijari1, pemain1._y+jarijari1, true)) {
  pemain1._x--;
  pemain1._y--;
 }
 //membuat pemain2 tidak dapat melewati dinding
 while (dinding.hitTest(pemain2._x, pemain2._y+jarijari2, true)) {
  pemain2._y--;
 }
 while (dinding.hitTest(pemain2._x, pemain2._y-jarijari2, true)) {
  pemain2._y++;
 }
 while (dinding.hitTest(pemain2._x-jarijari2, pemain2._y, true)) {
  pemain2._x++;
 }
 while (dinding.hitTest(pemain2._x+jarijari2, pemain2._y, true)) {
  pemain2._x--;
 }
 while (dinding.hitTest(pemain2._x-jarijari2, pemain2._y+jarijari2, true)) {
  pemain2._x++;
  pemain2._y--;
 }
 while (dinding.hitTest(pemain2._x+jarijari2, pemain2._y-jarijari2, true)) {
  pemain2._x--;
  pemain2._y++;
 }
 while (dinding.hitTest(pemain2._x-jarijari2, pemain2._y-jarijari2, true)) {
  pemain2._x++;
  pemain2._y++;
 }
 while (dinding.hitTest(pemain2._x+jarijari2, pemain2._y+jarijari2, true)) {
  pemain2._x--;
  pemain2._y--;
 }
};
14. Tekan Ctrl+Enter untuk melihat hasilnya :

Gunakan tombol panah untuk menggerakan pada pemain
Cobalah untuk menggerakan pemain sampai diujung atas

15. Ketika anda memainkkannya memang akan terkesan mudah sekali dimainkan. Tapi ini hanya dasarnya saja. Anda dapat menambahkan rintangan, semisal monster atau tombak dinding, yang mana jika pemain menabraknya maka permainan akan berakhir. Sehingga game akan menjadi lebih menantang untuk dimainkan.



source : warung flash
Baca Selengkapnya

Panduan belajar Flash bagi pemula

Posted by Belajar Desain On Minggu, 23 Oktober 2011 0 comments
sahabat sekalian. Flash adalah software untuk pembuatan animasi yang sangat mudah di pahami, flash pada mulanya di kembangkan oleh macromedia dan kini telah beralih tangan dan di kembangkan oleh adobe.











bagi teman-teman yang ingin belajar flash, silah kan download dulu buku panduannya untuk mengenali tool-tool yang ada di flash

silahkan download di sini

selamat belajar..
Baca Selengkapnya

Membuat animasi kincir kipas

Posted by Belajar Desain On 0 comments
Pada tutorial belajardesain93 kali ini kita akan membuat animasi sebuah kipas yang akan berputar dan berhenti dengan tombol on/off. Ini adalah tutorial yang sangat menarik.. prosesnya tidak terlalu sulit dan mudah di mengerti. Langsung saja kita buat 








1. Buatlah sebuah flash document.
2. Buatlah sebuah objek seperti di bawah ini :

3. Seleksi objek tersebut dan tekan F8. Pada panel yang muncul masukkan baling sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada ditengah-tengah lalu tekan ok.
4. Seleksi movie clip baling lalu tekan Ctrl+F3. Pada panel properties yang muncul masukkan baling dalam kotak instance name.
5. Buatlah sebuah static text berwarna putih bertuliskan OFF dan buatlah sebuah persegi panjang berwarna hitam dengan panjang dan lebar sama dengan panjang dan lebar static text bertuliskan OFF.
6. Seleksi static text dan persegi panjang tadi lalu tekan F8. Pada panel yang muncul masukkan onoff sebagai name dan movie clip sebagai type lalu tekan ok.
7. Seleksi movie clip onoff dan pada panel properties masukkan onoff sebagai instance name.
8. Pastikan anda masih menyeleksi movie clip onoff lalu tekan Ctrl+E untuk masuk ke dalam stage movie clip onoff.
9. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1
stop();
10. Klik kanan frame 2 dan pilih Insert Keyframe. Ubah warna static text di frame 2 menjadi merah dan juga ubah tulisannya menjadi ON.
11. Klik frame 2 dan masukkan script berikut pada panel actions:
1
stop();
12. Tekan Ctrl+E untuk kembali ke stage scene 1.
13. Klik frame 1 dan pada panel actions masukkan script berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//membuat variable bernama angka dengan nilai 0
angka = 0;
baling.onEnterFrame = function() {
         //movie clip baling bertambah nilai rotasinya berdasarkan nilai variable angka
         this._rotation += angka;
         //jika movie clip onoff berada di frame 2
         if (onoff._currentframe == 2) {
                 //ubah nilai variable angka menjadi 7
                 angka = 7;
         //jika movie clip onoff tidak berada di frame 2 dan nilai variable angka lebih dari 0
         } else if (angka>0) {
                 //nilai variable angka dukurangi 0.2
                 angka -= 0.2;
         }
};
//ketika tekanan pada movie clip onff dilepas setelah ditekan
onoff.onRelease = function() {
         //jika movie clip ini berada di frame 1
         if (this._currentframe == 1) {
                 //mainkan frame 2 movie clip ini
                 this.gotoAndStop(2);
         //jika tidak
         } else {
                 //mainkan frame 1 movie clip ini
                 this.gotoAndStop(1);
         }
};
14. Tekan Ctrl+Enter untuk melihat hasilnya.

Selamat berkreasi...

bila anda mengalami kesulita silahkan download buku panduannya di sini

dan untuk memudahkan pekerjaan saya sertakan juga file latihannya untuk contoh di sini





source : warung flash
Baca Selengkapnya

Animasi tombol life bar

Posted by Belajar Desain On Jumat, 07 Oktober 2011 0 comments
Life bar biasanya berbentuk batang. Yah, namanya juga bar pasti bentuknya batang. Namun kita dapat berkreasi membuat penunjuk life tersebut tidak hanya berbentuk bar/batang. Misalnya kita membuatnya dalam bentuk hati seperti tutorial berikut ini :




1. Buatlah sebuah flash document.
2. Buatlah sebuah hati seperti di bawah ini :
3. Seleksi shape hati berwarna merah kemudian tekan F8 (ingat hanya shapenya saja, garis hitamnya tidak perlu diseleksi). Pada panel yang muncul masukkan heart_mc sebagai name dan movie clip sebagai type lalu tekan ok.
4. Seleki movie clip heart_mc kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkanheart_mc di dalam kotak instance name.
5. Letakkan movie clip heart_mc ini di tengah-tengah stage namun agak ke atas sedikit.
6. Buatlah sebuah dynamic text bertuliskan PUKUL. Seleksi dynamic text ini dan pada panel properties, nonaktifkan tombol selectable dan aktifkan tombol show border around text.
7. Pastikan anda masih menyeleksi dynamic text tadi kemudian tekan F8. Pada panel yang muncul masukkanpukul_btn sebagai name dan button sebagai type lalu tekan ok.
8. Seleksi button pukul_btn di stage kemudian pada panel properties masukkan pukul_btn di dalam kotak instance name.
9. Letakkan button pukul_btn ini di bawah movie clip heart_mc.
10. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//membuat variable life dengan nilai 100
life = 100;
//perintah yang dijalankan ketika frame di timeline dimainkan
onEnterFrame = function () {
 //nilai scala x movie clip heart_mc sama dengan nilai variable life
 heart_mc._xscale = life;
 //nilai scala y movie clip heart_mc sama dengan nilai variable life
 heart_mc._yscale = life;
 //jika variable life bernilai kurang dari atau sama dengan 0
 if (life<=0) {
  //ubah nilai variab;e life menjadi 100
  life = 100;
 }
};
//ketika button pukul_btn ditekan
pukul_btn.onPress = function() {
 //variable life dikurangi 5
 life -= 5;
};
11. Tekan Ctrl+Enter untuk melihat hasilnya.
    untuk tutorial dalam bentuk pdf bisa di download disisi
    untuk source nya bisa di download disisi
Baca Selengkapnya