Tutorial membuat game Maze di macromedia flash

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 :

4. Kemudian warnai seperti gambar di bawah ini :

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 Pemain1 sebagai name dan movie clip sebagai type lalu tekan ok.

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 Pemain2 sebagai name dan movie clip sebagai type lalu tekan ok.

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 :

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: http://warungflash.com/2011/10/maze-double-player/

Tutorial membuat objek berputar dengan Macromedia Flash

Membuat objek berputar ada 2 cara yaitu dengan motion rotate dan actionscript _rotation.

A. Motion Rotate

1. Buatlah sebuah flash document.

2. Buat sebuah bintang segi 6. Seleksi bintang tersebut dan tekan F8. Pada panel yang muncul pilih Movie Clip sebagai type lalu tekan OK.

3.  Klik kanan frame 20 dan pilih Insert keyframe.

4. Klik frame 1 dan tekan Ctrl+F3. Pada panel properties yang muncul ubah Tween dari None menjadi Motion. Lalu ubah Rotate menjadi CW (Clock Wise/searah jarum jam) atau CCW (Counter Clock Wise/berlawanan arah jarum jam).

5. Terakhir test movie dengan menekan CTRL+ENTER. 

B. Actionscript

1. Buatlah sebuah flash document.

2. Buat sebuah bintang segi 6. Seleksi bintang tersebut dan tekan F8. Pada panel yang muncul pilih Movie Clip sebagai type lalu tekan OK.

3. Seleksi movie clip yang ada kemudian tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4

onClipEvent (enterFrame) { //semakin besar nilainya, semakin cepat putaran rotasinya _rotation += 15; }

4. Terakhir test movie dengan menekan CTRL+ENTER.

source: http://warungflash.com/2008/12/animasi-berputar/

tutorial membuat jam analog menggunakan Macromedia Flash pro 8

Untuk bisa membuat jam animasi flash tersebut, modal utama kita tentunya kita harus menginstall sebuah software berbasis flash pada netbook/computer kita. Dan disini saya menyarankan anda untuk menggunakan Macromedia Flash Propessional 8. Ukuran software ini, tidak lebih besar dari software Coreldraw  hanya sekitar 107MB.

Adapun langkah-langkah dalam membuat jam animasi flash adalah sebagai berikut :

1.     Buka applikasi Macromedia anda, kemudian klik Flash Documentpada bagian Create New.

Gambar.1

2.     Setelah muncul halaman baru, selanjutnya tekan Ctrl+F3 pada keyboard netbook/computer anda, sehingga muncul halaman seperti gambar dibawah.

Gambar.2

Pada halaman Document Properties seperti gambar no.2 diatas, silahkan isi form yang terdapat disana, dan ganti ukuran default media dengan ukuran jam yang ingin anda buat (contoh : 200 x 200 px), selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

Pada bagian ini, anda juga bisa menggunakan ukuran gambar/foto yang terdapat pada netbook/computer anda. Jadi, sebelum membukaMacromedia Flash, silahkan edit  terlebih dahulu file gambar/foto yang tersimpan pada netbook/computer anda, contohnya seperti file gambar logo WP yang saya buat dibawah. Anda juga bisa menggunakan foto anda sendiri sebagai background jam animasi flash.

3.     Setelah gambar/foto anda sudah siap, langkah berikutnya adalah, klik menu File–>Import–>Import to Stage

Gambar.3

4.     Setelah gambar/foto yang anda import ke stage sudah muncul, selanjutnya klik menu Text Tool atau tombol T pada keyboard anda.

Gambar.4

Selanjutnya buatlah teks area pada gambar/foto dan tulis angka 1sampai 12 secara terpisah. (Perhatikan gambar no.4 diatas)

5.     Langkah selanjutnya, klik Ctrl+F3 pada keyboard untuk mengatur ukuran dan warna angka pada Text Properties.

Gambar.5

Setelah selesai, klik Ctrl+F3 untuk menyembunyikan halaman text properties.

Selanjutnya, geser angka 1 sampai 12 tersebut seperti pada posisi angka jam pada umumnya, sehingga tampak seperti pada gambar no.6 dibawah.(Klik Selection Tool untuk menggeser)

6.     Langkah berikutnya, klik Line Tool pada menu, atau tombol N pada keyboard anda, kemudian buatlah 3 buah garis untuk penunjuk arah jam (jam, menit, detik) seperti pada gambar dibawah.

Gambar.6

Langkah berikutnya, klik Selection Tool atau tekan tombol V pada keyboard anda. Selanjutnya, klik garis pendek (jam) yang telah anda buat, kemudian tekan F8 pada keyboard anda.

Gambar.7

Pada halaman yang muncul seperti gambar diatas, pada kolom Name, ganti teks yang ada dengan jam_mc, pilih Movie klip untuk Type, dan pastikan titik Registration berada pada baris tengah bawah. Selanjutnya klik OK.

7.     Langkah berikutnya, tekan Ctrl+F3 untuk menampilkan halaman property.

Gambar.8

Pada gambar diatas, klik kolom <Instace Name> dan ganti denganjam_mc.

8.     Selanjutnya klik garis ke-2 (menit) kemudian tekan F8, ganti Name dengan menit_mc. Selanjutnya tekan Ctrl+F3 pada keyboard, ganti<Instance Name> dengan menit_mc.

9.     Langkah berikutnya, klik garis ke-3 (detik) kemudian tekan F8, gantiName dengan detik_mc. Selanjutnya tekan Ctrl+F3, ganti <Instance Name> dengan detik_mc.

10.     Langkah selanjutnya, geser ke-3 garis tersebut satu persatu, dan letakkan pada gambar/media (ditumpuk) dengan posisi garis pendek (jam) terletak paling bawah, kemudian garis menit, dan yang terakhir garis panjang (detik).

Gambar.9

11.     Selanjutnya klik dibawah angka 1 pada halaman frame, kemudian tekan F9.

Pada halaman Action yang muncul, copy kode dibawah kemudian paste pada halaman tersebut.

//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;

};

Gambar.10

Selanjutnya tekan Ctrl+ENTER untuk melihat hasilnya.

12.     Simpan jam animasi anda dengan mengklik File–>Export–>Export Movie.

Pada halaman berikutnya, pilih type Flash Movie(*.swf) kemudian klikSave, dan pada halaman terakhir klik OK.

 

source: http://pratsetya.blogspot.com/2012/10/cara-membuat-jam-analog-animasi-dengan.html

Tutorial Macromedia Flash 8 bag.1

 bagi kalian yang ingin belajar Macromedia flash 8 silahkan di baca.



PENJELASAN USER INTERFACE
User interface di Flash terbagi atas 5 bagian, yaitu:
1. Stage

Stage merupakan daerah yang bewarna putih, dimana area kerja utama jika anda ingin membuat animasi maupun aplikasi flash lainnya. Seluruh objek/gambar/animasi yang ada di stage nantinya akan tampil di flash movie, dan sebaliknya apabila objek/gambar tersebut berada di daerah abu-abu di pinggiran Stage tidak akan terlihat di flash movie.

2. Panel Toolbox

Merupakan kumpulan alat gambar dan mewarnai sesuatu yang ada di stage.

3.Panel Color
Merupakan kumpulan kotak-kotak yang berfungsi untuk mengubah, mengatur dan mempercantik objek yang ada di stage. Misalkan memberi warna gradasi, meletakan objek persis di tengah stage, dan merotasi objek dengan sudut yang tepat.

4. Panel Properties

Merupakan bagian informasi objek yang ada di stage. sebagai contoh, klik saja salah satu objek di stage, maka informasinya akan terlihat disini. atau klik saja di daerah kosong yang ada di stage, maka informasi mengenai stage akan terlihat.

5. Panel Timeline

Terdiri dari baris dan kolom. Kolom berhubungan dengan waktu, baris berhubungan dengan objek. Setiap software animasi pasti memliki timeline untuk mencatat aktivitas objek kapan harus tampil di stage dan kapan harus menghilang.

HAL-HAL DASAR DALAM FLASH
1. Mengetahui dan mengubah properties

Panel Properties merupakan salah satu bagian yang sangat penting di flash.

Disini kalian bisa melihat properti/informasi detail tiap objek

Cobalah Klik daerah kosong di stage, kemudian kita bisa melihat ada beberapa informasi:

size : 550 x 400. yang berarti tinggi stage adalah 550 pixel dan lebar stage 400 pixel.
Background: warna stage

Frame Rate: 12 fps (12 frame per second) yang berarti dalam 1 detik akan di jalankan 12 frame.
sedangkan tombol publish setting berfungsi untuk mengatur settingan detail pada saat akan mempublikasi file flash yang telah kita buat.

ANIMASI DASAR DALAM FLASH

1. Animasi Frame to Frame

Animasi ini adalah jenis animasi yang paling banyak memakan kapasitas file dan memori, karena itu lebih baik penggunaan animasi ini hendaknya diminimalis. Animasi frame per frame menuntut banyak gambar yang harus dibuat. Efek animasi diciptakan dengan mengganti gambar yang satu dengan gambar yang lain selama beberapa waktu.. Semua gambar yang bergerak dihasilkan dari gambar yang berbeda-beda tiap framenya. Karena animasi frame per frame harus memiliki gambar yang unik tiap framenya maka animasi frame per frame sangat ideal untuk membuat animasi yang kompleks yang terdiri dari banyak perubahan seperti ekspresi wajah.
Membuat animasi frame per frame
Di bawah ini akan ditunjukkan proses pembuatan animasi frame per frame :
1. Buka file baru atau Ctrl+N.
2. Kemudian kita pilih Rectangle Tool (R) pada toolbox dan kita mulai membuat objek balok pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus berbeda dari warna background stage.

3. Kemudian klik kanan di frame ke-1, pilih Insert Keyframe atau tekan F6, maka akan muncul frame ke-2

4. Pada frame ke-2 kita pilih Free Transform Tool (Q), kemudian kita putar balok sedikit ke kanan dan letaknya dirubah sedikit kebawah dengan meneka tombol Shift + Panah bawah satu kali.


5. Kemudian masukan kembali KeyFrame hingga menjadi tiga frame, kemudian putar kembali balok sedikit ke kanan dan sedikit kebawah.
6. Ulangi langkah di atas sampai frame 8 hingga balok tampak jatuh.
7. Kemudian tekan Enter untuk melihat hasilnya.

2. Animasi Motion Tween

Animasi motion tween digunakan apabila kita ingin membuat gerakan animasi yang teratur. Animasi ini sangat mengurangi waktu karena kita tidak perlu membuat animasi secara frame per frame. Sebaliknya Anda hanya membuat frame awal dan frame akhir saja. Dua alasan utama mengapa Animasi motion tween sangat baik yaitu karena mengurangi pekerjaan mengambar dan meminimalkan ukuran file karena isi dari setiap frame tidak perlu disimpan.

Membuat animasi motion tween
Di bawah ini akan ditunjukkanproses pembuatan animasi motion tween :

1. Buka file baru atau Ctrl+N
2. Kemudian kita pilih Oval tool (O) pada toolbox dan kita mulai membuat objek lingkaran pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus berbeda dari warna background stage.
3. Kemudian klik kanan di frame ke-1, pilih Create motion tween
4. Pada frame ke-10 klik kanan kita pilih Keyframe,, kemudian kita geser lingkaran ke kanan sehingga tampak seperti pada gambar
5. Kemudian pada frame ke-20 klik kanan kita pilih Insert Keyframe kemudian kita geser lingkaran ke bawah sehingga tampak seperti pada gambar.
6. Kemudian pada frame ke-30 klik kanan kita pilih Insert Keyframe, kemudian kita geser lingkaran ke kiri sehingga tampak seperti pada gambar.
7. Kemudian tekan Enter untuk melihat hasilnya

3. Animasi Motion Shape

Animasi jenis ini adalah animasi dimana kita dapat merubah bentuk atau memecah bentuk dari objek yang kita animasikan.

Membuat animasi Motion Shape
Disini akan ditunjukkan bagaimana carapembuatan animasi Motion Shape
1.    Buka file baru atau Ctrl+N

2.    Pada Frame pertama kita buat sebuah objek lingkaran dengan menggunakan Oval Tool.

3.    Kemudian pada frame 20 buatlah sebuah keyframe.

4.    Setelah itu pada frame 20 yang telah kita buat sebuah key frame, kita hapus dengan cara klik frame 20 kemudian tekan Delete pada keyboard.

5.    Setelah keyframenya kosong kita buat sebuah objek persegi pada frame 20 tersebut.

6.    Klik frame 1 kemudian buka panel properties, pada pilihan animasi tween pilih shape.

7.    Kemudian tekan Enter untuk melihat hasilnya

4. Animasi Motion Guide

Animasi motion guide adalah animasi yang mempunyai gerakan sesuai dengan jalur yang kita buat. Animasi ini merupakan lanjutan dari animasi motion tween. Animasi ini sangat cocok digunakan untuk jenis animasi yang membutuhkan ketelitian dalam pergerakan yang dikehendaki atau sesuai keinginan pembuat animasi.

Membuat animasi motion guide
Di bawah ini akan ditunjukkanproses pembuatan animasi motion guide :
1.    Buka file baru atau Ctrl+N

2.    Kemudian kita pilih Oval tool (O) pada toolbox dan kita mulai membuat
objek lingkaran pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus berbeda dari warna background stage.

3.    Kemudian klik kanan di frame ke-1, pilih Create motion tween

4.    Pada frame ke-10 klik kanan kita pilih Keyframe,, kemudian kita geser lingkaran ke kanan sehingga tampak seperti pada gambar

5.    Kemudian klik kanan layer 1 kemudian pilih Add Motion Guide maka akan muncul layer baru seperti tampak pada gambar.

6.    Kemudian dengan layer guide masih terseleksi kita pilih Pencil Tool untuk membuat jalur yang akan menjadi lintasan animasi dari lingkaran.

7.    Agar objek lingkaran dapat bergerak sesuai jalur, maka tengah objek haruslah berada di tengah jalur.

8.    Oleh karena itu, klik frame 1 layer 1, Kemudian pilih Free Transform Tool agar bulatan tengah objek terlihat. Kemudian pindahkan objek sampai lingkaran tengah objek berada di ujung awal jalur.

9.    Kemudian klik frame 40 layer 1, Kemudian pilih Free Transform Tool agar bulatan tengah objek terlihat. Kemudian pindahkan objek sampai lingkaran tengah objek berada di ujung akhir jalur.

10. Kemudian tekan Enter untuk melihat hasilnya.
Catatan : dalam Motion Guide, tengah objek harus berada di tengah (jalur).

 silahkan kunjungi blog asal nya:

http://dian75.wordpress.com/2010/12/04/tutorial-dasar-macromedia-flash-8/