tugas animasi desain grafis saya mencoba membuat game basic...BUT-MEN...jadi Bantu BUT-MEN menghindar dari angry bird dengan menggunakan tombol arah pada keyboard....
silahkan menikmati....

NB: butuh Koneksi besar agar game berjalan sesuai semestinya...........

Membuat Jam Dinding

Tik tok tik tok, sambil menunggu waktu berbuka puasa lebih baik kita belajar animasi dan Action Script dengan Flash. Pada Tutorial Flash kali ini kita akan mencoba membuat Jam dinding sederhana. Penasaran cara membuatnya? mari kita belajar bersama di IlmuGrafis

Langkah - langkahnya sbb:
1. Buka Program Flash
Start >> All Program >> Flash , pilih flash dokumen
disini penulis menggunakan Flash MX 2004 namun tutorial ini bisa diterapkan di Adobe Flash versi berapapun termasuk Flash CS5


2. Buat lingkaran Gunakan oval tool (shortcut tombol: O), tips: tekan dan tahan tombol shift pada keyboard agar lingkaran bulat sempurna



3. Ubah warna fill jadi hitam, Gunakan text tool (Short cut tombol : T) dan tulis 1 per 1 nomor jam mulai dari 1 - 12 untuk penomoran angka
gunakan Selection tool untuk meletakkan nomor - nomor tersebut pada bagian jam



4. Dengan Line Tool (N) buatlah 3 buah garis untuk penunjuk arah jam
garis jam (pendek) , garis menit (agak panjang) , garis detik (panjang)

5. Seleksi garis yang paling pendek dengan selection tool (V) dan tekan F8
muncul jendela dan masukkan jam_mc dan pilih movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.

Seleksi movie clip jam_mc di Lembar kerja kemudian tekan Ctrl+F3 untuk memunculkan panel properties. Pada panel properties yang muncul masukkan jam_mc sebagai instance name.


6. Sama seperti di atas
Seleksi garis kedua (agak panjang), kemudian tekan F8. Pada panel yang muncul masukkan menit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
Seleksi movie clip menit_mc. Pada panel properties yang muncul masukkan menit_mc sebagai instance name.

7. Sama seperti di atas
Seleksi garis ketiga (paling panjang), kemudian tekan F8. Pada panel yang muncul masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
Seleksi movie clip detik_mc. Pada panel properties yang muncul masukkan detik_mc sebagai instance name.

8. Satukan dan letakkan garis dengan urutan jam lalu menit kemudian detik dan letakkan di dalam tempat jam


9. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :


Masukkan code script berikut ini:
//perintah yang dijalankan ketika frame dimainkan onEnterFrame = function () { //membuat variable waktu sebagai date object waktu = new Date(); //membuat variable jam dengan nilai sama dengan jam pada komputer jam = waktu.getHours(); //membuat variable menit dengan nilai sama dengan menit pada komputer menit = waktu.getMinutes(); //membuat variable detik dengan nilai sama dengan detik pada komputer detik = waktu.getSeconds(); //digunakan jika komputer menggunakan sistem 12 jam //jika nilai variable jam lebih dari 12 maka akan dikurangi 12 if (jam>12) { jam -= 12; } //movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30 yang ditambah nilai variable menit di bagi 2 jam_mc._rotation = jam*30+(menit/2); //movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6 menit_mc._rotation = menit*6; //movie clip detik_mc akan berotasi sesuai nilai variable detik dikali 6 detik_mc._rotation = detik*6; };

10. Tekan Ctrl+Enter untuk melihat hasilnya.
kira - kira seperti ini:

Animasinya bisa diexport dalam bentuk flash movie dengan cara klik File >> Export movie, beri nama dan pilih format swf
seperti ini:

Tutorial Jam Dinding dengan Action Script
Tutorial ini saya buat sederhana namun bertujuan agar mudah dipraktikkan oleh pemula yang baru belajar flash. Anda dapat mengembangkannya dengan memperbaiki bagian grafisnya sehingga nantinya jam akan terlihat lebih bagus lagi. sampai jumpa di Tutorial menarik lainnya: baca juga Memasukkan Animasi Flash Ke Website. Download File Hasil disini

Terima kasih, Selamat belajar
Semoga Bermanfaat

Animasi Burung Terbang

Animasi Burung Terbang

Dalam Tutorial kali ini akan membahas bagaimana membuat animasi sederhana yaitu Animasi burung yang terbang dengan mode Frame by Frame yaitu animasi dengan membuat gambar perframe beda halnya dengan Motion Tweening teknik frame by frame memerlukan waktu yang cukup banyak karma dalam setiap frame kita harus membuat gambar yang tidak sama, pada tutorial kali ini objek yang akan kita gunakan yaitu sebuah ilustrasi burung dan aplikasi yang digunakan yaitu Macromedia Flash MX Professional 2004

Langkah pertama yaitu buatlah gambar ilustrasi burung sebanyak 3 kali dengan menggunakan Toolbox Brush Tool

Untuk membuatnya perhatikan gambar dibawah ini

Buatlah ilustrasi gambar burung dengan brush tool bisa juga menggunakan Pen Tool
Sebelum menginjak langkah selanjutnya copy gambar yang sudah dibuat tadi, tujuannya yaitu agar kita tidak usah repot-repot membuat badan burung lagi jadi pada akhirnya  kita tinggal paste gambar setelah itu nanti hanya menambah bentuk sayap yang berbeda saja

buatlah sayap pada bagian atas , pada bagian ini kita sedang membuat gambar 1

Masuk ke pembuatan gambar kedua buatlah bentuk sayap di bawah



Untuk gambar yang terakhir buatlah sayap diatas punggung burung tetapi agak rendah sedikit, jika sudah selesai tinggal pewarnaan pada gambar
burung
langkah selanjutnya yaitu pembuatan animasinya pada gambar 1 letakkan dikeyframe pertama , atur posisi gambar sesuai keinginan anda asal semua gambar harus di 1 posisi yang sama semua

buatlah Keyframe dengan cara klik kanan frame kedua >> pilih Insert Keyframe, setelah itu masukan Gambar 2

buatlah Keyframe dan masukan gambar 3 keposisi yang sudah kita tentukan tadi
 
langkah selanjutnya blok semua Frame yang telah kita buat >> klik kanan dan pilih Copy Frame. Kemudian Paste ke frame selanjutnya

Hasilnya bisa dilihat dengan cara pilih Menu Control >> pilih Play atau Ctrl+Enter

Hasilnya:
bisa di lihat pada link di bawah ini... hehehe ni copas punya tetangga kita
Tetangga Sebelah

Animasi Burung Terbang :)
salam kreatif by MIKO IG
Selamat Belajar Flash, SEMOGA BERMANFAAT

Bikin Game Tangkap Nyamuk (Part 1)

Bikin Game Tangkap Nyamuk (Part 1)

Gak bisa tidur gara-gara banyak nyamuk? Pakailah obat nyamuk atau raket nyamuk! Ampuh ngusir nyamuk sampe pagi, walah, malah pasang iklan, hehee,.. semua orang pasti gak betah kalo di rumah banyak nyamuk. Apalagi kalo nyamuk nya susah di tangkap, malah makin stress kan,..?  nah, daripada kesel ngurusin nyamuk di rumah, mending urusin nyamuk yang satu ini.

Gak usah buru-buru beli raket nyamuk, karena yang dimaksud ialah kita akan membuat permainan Games Tangkap Nyamuk dengan menggunakan Adobe Flash. Rasakan kenikmatan meSM*SH nyamuk!! Caranya?
Ikuti tutorial Flash berikut ini:

1.] Buka program macromedia flash atau adobe flash (sama saja karena script yang digunakan masih action script 2.0)

2.] Setting ukuran stage menjadi 800x600 pixel.
Buat movie clip baru dengan memilih menu Insert > New Symbol. Beri nama nyamuk.

3.] Pada editor movieclip, buatlah gambar nyamuk! gak usah ribet-ribet yang penting kelihatan kayak nyamuk.

gambar : nyamuk

4.] Pada frame 2, buat blank keyframe baru (F7). lalu  gambarlah objek darah seperti di bawah ini.


5.] Ubah gambar darah tadi menjadi movie clip dengan mengklik kanan pada objek pilih Convert to Symbol.

6.] Pada frame 10, buat keyframe(F6) kemudian buka panel properties. Kemudian ubah color dengan alpha dengan persentase 0%.


7.] Klik kanan di tengah frame lalu pilih Create Motion Tween.


8.] Pada frame 1. Buka panel action kemudian beri perintah stop();

9.] Keluar dari editor, lalu masukan movieclip nyamuk yang telah kita buat dari library ke stage dengan cara mendrag nya.
Taruh movieclip nyamuk di luar area stage karena movieclip yang asli tidak kita gunakan.

10.] Klik movie clip nyamuk kemudian buka panel action. Ketikan script di bawah ini.
//kondisi awal onClipEvent(load) { moveX=0; moveY=0; nyamukMati=0; } onClipEvent(enterFrame) { //menentukan pergerakan acak pada nyamuk acakMoveX=Math.floor(Math.random()*10); acakMoveY=Math.floor(Math.random()*10); if(nyamukMati==0) { if(acakMoveX<2) { moveX =20; } else if(acakMoveX>6) { moveX =-20; } if(acakMoveY<2) { moveY =20; } else if(acakMoveY>6) { moveY =-20; } if(this._y>600) { this._y=0; } else if(this._y<0) { this._y=600; } else if(this._x<0) { this._x=800; } else if(this._x>800) { this._x=0; } } else { moveX=0; moveY=0; } this._x +=moveX; this._y +=moveY; //menghapus movieclip nyamuk yang mati if(this._currentframe==10) { removeMovieClip(this); } } //kondisi saat nyamuk terpukul raket onClipEvent(mouseDown) { if(this.hitTest(_root.raket.area)&&this._currentframe==1) { this.play(); nyamukMati=1; } }

11.] Buka panel properties, kemudian pada kolom instance name beri nama nyamuk


12.] Selanjutnya, buat movie clip baru dengan nama raket.

13.] Buatlah 3 buah keyframe dan pada masing-masing frame gambarkan sebuah raket dengan bentuk berbeda-beda seperti di bawah ini.

Langkah di atas di maksudkan untuk animasi raket saat tombol mouse di tekan.

14.] Seleksi gambar raket pada frame 1 dengan Selection Tool (V) tetapi tidak dengan pegangan raket. Liat gambar dibawah.


15.] Setelah diseleksi, ubah menjadi movieclip. Pada properties, beri nama area  pada instance name.

16.] Pada frame 1, beri perintah stop();

17.] Keluar dari editor, masukan movieclip raket ke stage kemudian beri action script di bwah ini:
//menghilangkan pointer window onClipEvent(load) { Mouse.hide(); } //mengganti pergerakan pointer dengan raket onClipEvent(enterFrame) { startDrag(this, true); updateAfterEvent(); } //animasi raket saat tombol mouse ditekan onClipEvent(mouseDown) { this.play(); }

Lalu, buka panel propertise, beri nama instance “raket”


18.] Langkah terakhir, pada frame 1 main movie ketikan script berikut:
//memperbanyak movieclip nyamuk for(i=0;i<10;i++) { duplicateMovieClip(_root.nyamuk,"nyamuk"+i,i); _root["nyamuk"+i]._x=Math.random()*800; _root["nyamuk"+i]._y=Math.random()*600; } //menyembunyikan movieclip nyamuk yang asli _root.nyamuk._visible=0;

19.] Jalankan movie (CTRL+ENTER).

20.] Hasil nya seperti di bawah ini
liat punya tetangga nie postingan masih copas dari sebelah...hehehehe
Tetangga
Game Tangkap Nyamuk... Ciaaatttttt!!!!

Nah, asik kaaannn??? Eittss,.. jangan senang dulu, karena tutorial ini masih berlanjut.
Silahkan Akses Tutorial Game Nyamuk bag.2 karena disitu kita akan menambahkan efek suara, score dan counter time agar permainan ini jadi lebih menantang.
Terima kasih, semoga tutorial Belajar Membuat Game ini bermanfaat

Share URL

Share the URL of this Tutorial in IM, Email or post in forums http://www.ilmugrafis.com/flash.php?page=bikin-game-tangkap-nyamuk-1 * Klik Link, copy (ctrl + c) dan paste (ctrl + v)

Feedback : Pertanyaan, Kritik, dan Saran silahkan hubungi Penulis :