Drag n Drop Dengan Flash

Dengan sedikit kreatifitas dasar "drag n drop" ini bisa di modifikasi jadi game sederhana yang mengasyikan. For the basic, ini tahap-an nya ...

1. Buat file baru flash dengan AS 2.0. Di sini saya ubah properties ukuran menjadi 300 X 400 px, dan warna background biru muda.
2. Buat movie klip baru dengan cara insert > new symbol (ctrl + f8), beri nama objek A dan pilih type dengan movie clip. Buat objek di dalamnya, di sini saya membuat object oval dengan huruf A untuk memudahkan mengetahui nama object.
3. Setelah itu kembali ke scene 1 dan seret objek A yang ada di library ke dalam workspace. Pilih object A dan isi instance name pada bagian properties dengan nama A.
4. Sekarang kita akan membuat tempat untuk meletakkan object A tersebut. Buat movie clip baru dengan cara yang sama dengan di atas, beri nama tempat A. Isi dengan objek yang akan menjadi daerah untuk meletakkan object A, Jadi perkirakan agar luas tempat A lebih besar dari object A, dan beri tanda huruf A untuk memudahkan mengetahui nama tempat A. Kembali ke scene 1 dan pilih object tempat A beri instance name tempat_A pada bagian propertiesnya.
5. Sekarang buat layer baru dan beri nama action, untuk meletakkan action script dari masing - masing object. Pilih frame satu pada layer action buka frame action (f9) dan ketikkan script berikut :
   
   stop();
   function dragSetup(clip, targ) {
   clip.onPress = function() {
   startDrag(this);
   this.beingDragged = true;
   }
   
   clip.onRelease =
   circle_mc.onReleaseOutside = function () {
   stopDrag();
   this.beingDragged = false;
   
   if (eval(this._droptarget) == targ) {
   this.onTarget = true;
   _root.targ.gotoAndStop(2);
   }
   else{
   this.onTarget=false;
   _root.targ.gotoAndStop(1);
   }
   }
   clip.initialX = clip._x;
   clip.initialY = clip._y;
   clip.finalX = targ._x;
   clip.finalY = targ._y;
   
   clip.onEnterFrame = function() {
   if (!this.beingDragged && !this.onTarget) {
   this._x -= (this._x - this.initialX) / 5;
   this._y -= (this._y - this.initialY) / 5;
   }
   else
   if (!this.beingDragged && this.onTarget) {
   this._x -= (this._x - this.finalX) / 5;
   this._y -= (this._y - this.finalY) / 5;
   }
   }
   }
   
   //+untuk meletakkan nama object dan tempat object+
   dragSetup (A,t_A);
   
   
6. Pastikan object A ada di atas tempat A, caranya dengan pilih object A klik kanan > arrange > bring to front.
7. Setelah itu lakukan test movie dengan ctrl + enter. Mudah kan??
8. Untuk memodifikasinya tinggal lakukan duplikat pada movie clip yang dibuat dengan cara klik kanan object A yang ada di dalam library > duplicate > beri nama baru misal B, dst. Jangan lupa juga untuk mengganti masing-masing instance name nya dengan huruf selanjutnya misal, B, C, dst. Dan tambahkan nama object dan tempat baru pada action scriptnya. untuk lebih mudahnya silahkan download contoh file mentahnya di sini
9. here for the ex :
   

Membuat Aplikasi Aritmetika Dasar dengan Flash

Dengan memanfaatkan teknologi yang ada, kita bisa membantu adik – adik yang sedang ingin mempelajari aritmatika dasar. Nah ini salah satunya, teman – teman bisa membuatnya sendiri.

1. Buat file baru dengan type action script 2.0 dengan ukuran 300 x 400 warna background abu - abu. Buat dua buah dynamic text, dan susun secara vertical ke bawah

   2. Masing masing beri variable n1 untuk yang paling atas, n2 untuk di bawahnya

   3. Kemudian buat satu buah input text beri variable jawab dan letakkan vertical di bawah dua dynamic text yang lain.

   

   4. Untuk input text jawab buat agar tidak bisa meng-inputkan huruf alphabet dan hanya bisa menerima inputan angka dengan meng-klik tombol

   embed (character embeding) pilih Numerals [0..9] (11 ghlyps)

   5. Kemudian buat tombol untuk mengacak angka soal antara range 1 – 100, di sini saya menggunakan tombol dari library yang sudah tersedia dan beri

   instance name : tbl_acak dan beri action – button (f9) dan ketikkan sebagai berikut :

   on(release){

   n1 = random (100) ;

   n2 = random (100) ;

   jawab = ""

   cek = ""

   tbl_acak.enabled = false ;

   tbl_acak._alpha = 20 ;

   contreng.gotoAndStop(1);

   tbl_cek.enabled = true ;

   tbl_cek._alpha = 100 ;

   }

   6. Buat satu buat tombol lagi untuk mengecek jawaban yang diberikan dan beri

   instance name : tbl_cek dan beri action – button (f9) dan ketikkan sebagai berikut :

   on(release){

   if(jawab == n1+n2){

   cek = "Benar"

   }else{

   cek = "Salah"

   }

   tbl_cek.enabled = false ;

   tbl_cek._alpha = 20 ;

   tbl_acak.enabled = true ;

   tbl_acak._alpha = 100 ;

   }

   7. Buat satu dynamic text lagi untuk mengeluarkan tulisan ferifikasi apakah jawaban yang diberikan benar atau salah dan berikan variable : cek

   8. Buat satu layer baru dengan nama action untuk meletakkan action script. Pada frame satu beri action frame sebagai berikut :

   tbl_cek.enabled = false

   tbl_cek._alpha = 20 ;

   9. Lakukan test movie dengan ctrl + enter, jika sudah berhasil anda dapat memodifikasi tampilan sesuai keinginan. silahkan download di sini untuk file mentahnya.

   
   

Membuat Jam digital dengan Flash

1. Buat file baru dengan aplikasi flash anda. Di sini saya menggunakan adobe flash CS 3 dan AS 2.0

2. Rubah properties terserah anda. Di sini saya menggunakan ukuran 100px X 300px, warna background abu- abu dan frame rate 20 fps (semakin tinggi semakin halus animasi yang dihasilkan)

3. Pilih Text tool dan buatlah kotak text kosong. Kemudian ganti propertiesnya sebagai berikut : jenisnya -> Dinamic Text

Isi Instance name -> “txtJam”

Baris -> Single Line

Warna -> berbeda/kontras dengan warna background

4. Pilih kotak teks kosong tersebut kemudian copy hingga dua kali, ubah masing – masing namanya dengan “txtMenit” dan “txtDetik”. Atur berderet mulai dari jam, menit, ke detik dari kiri ke kanan

5. Buat layer baru dengan nama action. Pada frame pertama buka jendela action frame (f9) dan isikan kode sebagai berikut :

var tgl, timeint;

function timer() {

tgl = new Date();

txtJam.text = tgl.getHours();

txtMenit.text = tgl.getMinutes();

txtDetik.text = tgl.getSeconds();

}

timeint = setInterval(timer, 1000);

6. Lakukan test movie (ctrl + enter), jika tidak berhasil cek kembali penamaan dan action yang anda tuliskan karena action script bersifat case sensitive

7. Untuk memperindah anda bisa meletakkan separator seperti tanda titik dua dengan menggunakan static text di antara kotak teks kosong

8. Sangat mudah bukan?

Animasi Sederhana dengan AS 2.0

1. Mungkin anda sudah terbiasa menggerakan object dengan menggunakan “motion tween” yang menghubungkan 2 buah keyframe, tapi di sini saya akan membagi cara menggerakan benda tanpa motion tween tapi melalui script yang diketikan pada jendela action – frame

2. Buat file baru dengan aplikasi flash anda. Di sini saya menggunakan adobe flash CS 3 dan AS 2.0

3. Rubah properties terserah anda. Di sini saya menggunakan ukuran 300px X 400px,

warna background abu- abu dan frame rate 20 fps (semakin tinggi semakin halus

animasi yang dihasilkan)

4. Pada layer 1 frame 1 buat object terserah dengan menggunakan tool, di sini saya membuat object lingkaran tanpa border dengan warna gradasi. Letakan di ujung kiri halaman.

5. Pilih object yang tadi sudah dibuat klik kanan -> convert to symbol (f8) -> movie clip (rubah namanya di sini saya gunakan nama “lingkaran”). Kemudian isi instance name movie clip tsb dengan nama -> “bola”

6. Buat layer baru diatas object tersebut dengan nama “action”, buka jendela action-frame dan ketikkan script berikut :

bola.onEnterFrame = function():Void {

this._x = this._x+30;

if (this._x > 300) {

this._x = 30;

}

};

7. Coba test movie (ctrl + enter)

8. Anda bisa merubah angka pada script

// this._x = this._x+30;

Untuk menambah atau mengurangi kecepatannya

Merubah Icon Cursor Pada Flash

1. Buat file baru dengan aplikasi flash anda. Di sini saya menggunakan adobe flash CS 3 dan AS 2.0
2. Rubah properties terserah anda. Di sini saya menggunakan ukuran 300px X 400px, warna background abu- abu dan frame rate 20 fps (semakin tinggi semakin halus animasi yang dihasilkan)
3. Buat icon yang akan digunakan untuk mengganti cursor panah bawaan dari sistem operasi. Atau anda bisa meng-import dari icon yang sudah tersedia(bisa menggunakan format .ai atau .png). Ingat ukurannya jangan terlalu besar. Di sini saya membuatnya dengan bantuan tool yang tersedia dalam adobe flash, cukup simple saja
4. Pilih keyframe yang berisi image icon anda klik kanan -> confert to new symbol(f8) -> pilih movie clip (rubah nama sesuai keinginan, di sini saya gunakan “mouse icon”)
5. Pilih movie clip yang telah anda buat tadi buka jendela action-movie clip (f9) kemudian ketikkan ini di dalamnya

onClipEvent(load)

{

startDrag(this,true);

Mouse.hide();

}

6. Setelah itu lakukan test movie (ctrl+enter)

7.Mudah bukan?