Jumat, 30 September 2011

MEMBUAT HUJAN

Tutorial kali ini membahas cara membuat efek hujan. Ada beragam cara cara membuatnya diantaranya dengan menggunakan animasi tween. Tapi pada tutorial ini kita akan menggunakan actionscript untuk membuatnya.
1. Buatlah sebuah flash document.
2. Tekan Ctrl+F3, pada panel properties yang muncul ubah warna Background menjadi berkode #000033
3. Klik frame 1 dan tekan F9. Pada panel properties 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
//membuat sebuah movie clip kosong yang berisi jatuh
_root.createEmptyMovieClip("jatuh", 1);
//mengatur width sama dengan width stage dikali 2.5
width = Stage.width*2.5;
with (jatuh) {
//membuat garis
lineStyle(1, 0xFFFFFF, 100);
lineTo(2, 10);
}
//membuat variable i dengan nilai kurang dari 250
for (i=0; i<50; i++) {
//duplikasi jatuh dengan nama baru garis_hujan+i
duplicateMovieClip(jatuh, "garis_hujan"+i, 10+i);
//posisi x garis_hujan sama dengan nilai acak panjang stage
_root["garis_hujan"+i]._x = random(Stage.width);
//posisi y garis_hujan sama dengan nilai acak lebar stage
_root["garis_hujan"+i]._y = random(Stage.height);
//nilai variable kecepatan garis hujan sama dengan nilai acak 30 ditambah 10
_root["garis_hujan"+i].kecepatan = random(30)+10;
//nilai alpha`garis hujan sama dengan nilai acak 80 ditambah 20
_root["garis_hujan"+i]._alpha = random(80)+20;
}
onEnterFrame = function () {
//membuat variable i dengan nilai kurang dari 250
for (i=0; i<50; i++) {
//posisi x garis hujan ditambah variable kecepatan
_root["garis_hujan"+i]._y += _root["garis_hujan"+i].kecepatan;
//posisi y garis hujan ditambah variable kecepatan yang dibagi 4
_root["garis_hujan"+i]._x += _root["garis_hujan"+i].kecepatan/4;
//jika posisi x garis hujan lebih dari panjang stage
if (_root["garis_hujan"+i]._x>Stage.width) {
//posisi x garis hujan berada di nilai acak width dikurangi panjang stage dibagi 2
_root["garis_hujan"+i]._x = random(width)-Stage.width/2;
//posisi y garis hujan berada di koordinat 0
_root["garis_hujan"+i]._y = 0;
}
//jika posisi y garis hujan lebih dari lebar stage
if (_root["garis_hujan"+i]._y>Stage.height) {
//posisi y garis hujan berada di koordinat 0
_root["garis_hujan"+i]._y = 0;
//posisi x garis hujan berada di nilai acak width dikurangi panjang stage dibagi 2
_root["garis_hujan"+i]._x = random(width)-Stage.width/2;
}
}
};
4. Tekan Ctrl+Enter untuk melihat hasilnya.

MEMBUAT PRELOADER

Preloader dibuat untuk  menunjukan berapa lama proses loading movie anda berlangsung dan kapan selesainya hingga siap untuk dimainkan. Bisa juga untuk memberitahu apakah movie anda diload atau tidak saat ditaruh di website. Anda bisa melihat seperti apa preloader itu dengan membuka game-game yang sudah kami buat di My Game. Setelah anda membuka salah satu dari game kami, lihatlah di game tersebut apakah anda melihat bar yang memanjang kekanan. Jika anda melihatnya itulah yang namanya preloader. Preloader yang anda lihat di game kami adalah preloader berbentuk persegi panjabg. Preloader mempunyai berbagai macam bentuk mulai yang hanya persen saja, ukuran(size) yang sedang diload, persegi panjang, lingkaran, animasi dll. Di bawah ini terdapat beberapa macam tutorial preloader yang dapat anda gunakan :

A. Preloader persen

1. Buatlah sebuah dynamic text dengan Var angka_percent
2. Klik frame 1 dan masukan script berikut :
1
2
3
4
5
6
7
8
stop();
onEnterFrame = function () {
percent = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100);
angka_percent = percent+" %";
if (percent<=100) {
_root.gotoAndStop(2);
}
};
4. Klik frame 2 lalu tekan F7 maka anda akan memasukan frame kosong (Insert Blank Keyframe). Importlah sebuah gambar dan tempatkan pada frame 2. Nantinya gambar yang anda import tadi akan diload ketika preloader dijalankan. Kalau bisa importlah gambar yang sizenya lebih dari 1mb agar kita bisa mengetahui secara pasti apakah preloader yang kita buat berjalan baik atau tidak.
5. Test movie dengan menekan CTRL+Enter. Ketika preloader ini sedang dijalankan pilih menu View dan aktifkan Simulate Download.
Aktifkan Simulate Download untuk mensimulasikan cara kerja preloadernya.
Sourcenya dapat didownload disini

B. Preloader  berbentuk batang/persegi panjang :

1. Buatlah 2 buah persegi panjang tanpa garis/outline dengan panjang dan lebar yang sama.
2 buah persegi sama panjang
2. Ubah warna salah satu persegi panjang menjadi berwarna merah, seleksi persegi panjang ini lalu tekan F8 dan ubah menjadi movie clip dengan titik Registration menjadi seperti gambar dibawah ini. Tekan Ok jika sudah selesai. Berikan Instance Name : kotak pada movie clip ini.
Gambar titik Registration
Berikan kotak sebagai Instance Name-nya
3. Ubah warna persegi panjang yang satunya lagi menjadi berwarna hitam
4. Seleksi kedua persegi panjang tersebut dan tekan F8 pada keyboard, akan muncul kotak dialog Convert to Symbol, berikan preloader sebagai Name dan Movie clip sebagai typenya lalu tekan ok
Tampilan kotak dialog Convert to Symbol
5. Klik 2 kali movie clip preloader untuk masuk kedalam stage movie clip preloader dan pastikan kedua persegi panjang didalamnya berada ditengah-tengah stage movie clip preloader.
Gambar stage dalam movie clip preloader
6. Masih berada didalam stage movie clip preloader, klik frame 1 dan masukan actionscript berikut :
1
2
3
4
5
6
Total = _root.getBytesLoaded()/_root.getBytesTotal()*100;
if (Total != 100) {
kotak._xscale = Total;
} else {
_root.gotoAndPlay(2);
}
7. Insert Keyframe/tekan F6 pada frame 2 dan masukan actionscript berikut pada frame 2 tersebut :
1
gotoAndPlay(1);
8. Sekarang keluarlah dari stage movie clip preloader dengan menekan CTRL+E, klik frame 1 dan berikan script berikut :
1
stop();
9. Preloader sudah siap untuk dipakai, anda dapat menaruh file-file yamg anda ingin load mulai dari frame 2 dan seterusnya pada stage scene. Karena tidak ada file yang akan diload ketika preloader ini dijalankan maka saya mengimport gambar dan saya taruh diframe 2 (scene)
Gambar frame pada timeline scene
10. Test movie dengan menekan CTRL+Enter. Ketika preloader ini sedang dijalankan pilih menu View dan aktifkan Simulate Download.
Aktifkan Simulate Download untuk mensimulasikan cara kerja preloadernya.
Sourcenya dapat didownload disini

C. Preloader  berbentuk lingkaran.

1. Buatlah sebuah objek berbentuk seperti di bawah ini :
0
2. Seleksi objek tersebut dan tekan F8. Pada panel yang muncul masukkan preloader sebagai name dan movie clip sebagai type lalu tekan ok.
3. Seleksi movie clip preloader di stage dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan preloader sebagai instance name.
4. Klik kanan movie clip preloade dan pilih edit untuk masuk ke dalam stagenya.
5. Klik frame 1 dan tekan F9. Pada panel yang muncul masukkan script berikut :
1
stop();
6. Gambarlah objek berikut di frame 2 :
0
7. Gambarlah objek berikut di frame 3 :
0
8. Gambarlah objek berikut di frame 4 :
0
9. Gambarlah objek berikut di frame 5 :
0
10. Gambarlah objek berikut di frame 6 :
0
11. Gambarlah objek berikut di frame 7 :
0
12. Gambarlah objek berikut di frame 8 :
0
13. Gambarlah objek berikut di frame 9 :
0
14. Gambarlah objek berikut di frame 10 :
0
15. Gambarlah objek berikut di frame 11 :
0
16. Tekan Ctrl+E untuk kembali ke stage scene 1. Buatlah 3 buah dynamic text dan berikan masing-masing var pada panel properties : persen_tampil, loaded, total. Buatlah sebuah static text bertulisan /
17. Letakkan masing-masing objek seperti gambar di bawah ini :
tampil
18. Klik frame 1 dan masukkan script berikut pada panel actions :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
stop();
total = Math.round(_root.getBytesTotal())+" KB";
angka = 0;
persen_tampil = 0+"%";
_root.onEnterFrame = function() {
loaded = Math.round(_root.getBytesLoaded())+" KB";
if (Math.round(_root.getBytesTotal())<=Math.round(_root.getBytesLoaded())) {
gotoAndStop(2);
} else {
persen = Math.round(Math.round(_root.getBytesLoaded())/Math.round(_root.getBytesTotal())*100);
if (persen%10 == 0) {
angka = (persen/10)+1;
preloader.gotoAndStop(angka);
persen_tampil = persen+"%";
angka++;
}
}
};
19. Klik kanan frame 2 dan pilih Insert Blank KeyFrame. Masukkan gambar/konten di frame 2 ini.
20. Klik frame 2 dan masukkan script berikut pada panel actions:
1
stop();
21. Test movie dengan menekan CTRL+Enter. Ketika preloader ini sedang dijalankan pilih menu View dan aktifkan Simulate Download.

SUARA PADA TOMBOL

Untuk melengkapi kesempurnaan pada sebuah tombol selain bentuknya yang dibuat bagus, kita dapat menambahkan suara pada tombol tersebut. Sebelum membaca  tutorial di bawah ini anda harus sudah dapat membuat sebuah tombol di flash. Jika belum bisa membuat tombol silahkan baca tutorial dasar dasar membuat tombol. Hampir sama dengan memainkan suara pada flash, untuk memainkan suara pada sebuah tombol dapat dilakukan dengan dua cara yaitu menempatkan suara pada frame dan memainkan suara dengan menggunakan actionscript. Silahkan pilih menurut anda anda mana yang mudah untuk digunakan :
A. Menempatkan suara di frame
1. Buatlah sebuah flash document.
2. Buatlah persegi panjang berwarna merah bergaris hitam. Buatlah sebuah static text bertuliskan tombol dan tempatkan di tengah-tengah persegi panjang. Seleksi persegi panjang dan static text lalu tekan F8. Pada panel yang muncul masukkan tombol sebagai name dan button sebagai type lalu tekan ok.
3. Tekan Ctrl+R. Pada panel yang muncul cari 2 buah suara yang diinginkan dan tekan open.
4. Klik kanan tombol di stage dan pilih Edit.
5. Seleksi frame Over dan Down lalu tekan F6. Ubah warna persegi panjang di frame over menjadi merah muda dan juga ubah warna persegi panjang di frame down menjadi merah tua.
6. Seleksi frame Over dan tekan Ctrl+F3. Pada panel properties yang muncul ubah Sound menjadi suara yang akan digunakan sebagai suara saat mouse berada di atas tombol, Effect:None, Sync:Event Repeat 1.
7. Seleksi frame Down dan pada panel properties ubah Sound menjadi suara yang akan digunakan sebagai suara saat tombol diklik oleh mouse, Effect:None, Sync:Event Repeat 1.
8. Tekan Ctrl+Enter untuk melihat hasilnya.

MENU BAR PADA FLASH

Menu bar berisi kumpulan menu yang memiliki beragam fungsi. Letaknya berada di bar judul. Lihat gambar di bawah ini untuk lebih jelasnya :
menubar
Gambar dan letak menu bar
1. File : berisi kumpulan menu yang berhubungan pada dokumen flash anda. Misalnya menu save untuk menyimpan dokumen flash anda.
2. Edit : berisi kumpulan menu yang berhubungan dengan objek di stage. Misalnya menu select all yang digunakan menyeleksi seluruh objek di stage
3. View : berisi kumpulan menu yang berhubungan dengan tampilan di stage. Misalnya menu zoom in yang digunakan untuk memperbesar tampilan stage
4. Insert : berisi kumpulan menu yang berhubungan dengan timeline, symbol serta scene. Misalnya menu scene digunakan untuk menambahkan scene pada dokumen flash anda
5. Modify : berisi kumpulan menu yang digunakan untuk mengedit objek di stage. Misalnya menu convert to symbol yang digunakan untuk membuat objek menjadi symbol
6. Text : berisi kumpulan menu yang berhubungan dengan huruf. Misalnya menu font yang digunakan untuk memilih jenis huruf.
7. Commands : berisi kumpulan menu yang berhubungan dengan flash javascript. Misalnya menu run command yang digunakan untuk menjalankan flash javascript.
8. Control : berisi kumpulan menu yang digunakan untuk melihat hasil animasi/objek yang anda buat. Misalnya menu play yang digunakan untuk menjalankan animasi di timeline.
9. Window : berisi kumpulan menu yang berhubungan dengan panel-panel di flash. Misalnya menu actions yang digunakan untuk menampilkan panel actions.
10. Help : berisi kumpulan menu yang berhubungan dengan tutorial dan cara menggunakan flash. Misalnya menu flash help yang digunakan untuk menampilkan panel berisi tutorial dan cara menggunakan flash.

MEMBUAT LIFE BAR

Dalam sebuah game pasti sering kita melihat sebuah bar yang digunakan untuk menunjukan berapa banyak kesehatan/health ataupun jumlah peluru. Pada tutorial kali ini kita akan mempelajari cara membuat sebuah life bar.
1. Buatlah sebuah persegi panjang dengan warna merah. Seleksi persegi panjang tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan life_bar sebagai Name dan Movie clip sebagai Typenya. Buah Registrationnya menjadi di bagian kiri tengah seperti gambar di bawah ini. Jika sudah tekan OK.
2. Klik movie clip tadi dan tekan Ctrl+F3. Pada properties yang muncul masukkan lifeBar sebagai Instance Name.
cts
Klik posisi titik Registration seperti gambar di atas
3. Klik frame 1 dan tekan F9. Pada kotak dialog yang muncul masukkan script berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
//membuat variable energi dengan nilai 100
energi = 100;
lifeBar.onEnterFrame = function() {
//nilai skala x movie clip ini sama dengan nilai variable energi
this._xscale = energi;
//variable energi dikurangi 1 terus menerus
energi--;
//jika nilai variable energi kurang dari 0
if (energi<0) {
//nilai variable energi diubah menjadi 100 kembali
energi = 100;
}
};
4. Untuk tambahan agar terlihat lebih bagus, buatlah sebuah persegi panjang dengan panjang dan lebar sama dengan persegi panjang pada movie clip life_bar. Berikan warna merah transparan. Letakan persegi panjang yang baru di buat ini di koordinat yang sama dengan movie clip life_bar.
5. Tekan Ctrl+Enter untuk melihat hasilnya.

MEMBUAT PASSWORD

Password digunakan untuk melindungi data-data agar hanya bisa dibuka oleh pemiliknya saja. Hal serupa dapat kita lakukan di Flash. Kita dapat membuat sebuah form Password yang kita tempatkan saat swf tampil sehingga ketika password yang dimasukan salah maka swf tidak bisa dijalankan. Tutorial mengenai bentuk dasar form password tersebut dapat anda lihat di bawah ini :
1. Buatlah 3 buah Blank Keyframe (seleksi 3 buah frame lalu tekan F7) dan berikan script berikut pada ketiga Blank Keyframe tersebut :
1
stop();
timeline-tri-frame
Gambar Blank Keyframe yang telah diberi script stop();
2. Pilih frame 1 dan buatlah sebuah Static Text bertuliskan Password:
3. Buatlah sebuah Input Text dengan Var : jawaban. Berikan angka 11 pada Maximum characters (hal ini akan membuat jumlah huruf/angka yang dapat dimasukan di Input Text hanya 11 karakter) dan ubah Line type menjadi Password (hal ini akan membuat huruf/angka yang dimasukkan tulisannya akan berbentuk * ,   jika anda tidak ingin tulisannya berbentuk * maka pilih Single Line sebagai Line Type)
it-properties
Gambar Properties Input Text
4. Masih di Frame 1 buatlah sebuah Symbol Button bertuliskan OK dan masukan script berikut pada Button tersebut :
1
2
3
4
5
6
7
8
9
10
on (press) {
//jika jawaban diisi warungflash
if (jawaban == "warungflash") {
//jawaban benar, mainkan frame 2
gotoAndStop(2);
} else {
//jawaban salah,mainkan frame 3
gotoAndStop(3);
}
}
5. Pindah ke Frame 2, buatlah sebuah Static Text bertulisakan Password yang anda masukan benar
6. Buatlah sebuah Symbol Button bertuliskan Back dan berikan script berikut pada button tersebut :
1
2
3
4
5
6
on (release) {
//jawaban dikosongkan
jawaban = "";
//mainkan frame 1
gotoAndStop(1);
}
7. Copy seluruh objek-objek yang ada di Frame 2. Lalu pindah ke Frame 3 dan paste-kan yang tadi dicopy.
8. Ubah Static Text di Frame 3 menjadi Password yang anda masukan salah
9. Test Movie dengan menekan Ctrl+Enter

APAKAH onClipEvent ?

Anda pasti sering melihat onClipEvent() pada setiap script yang kami tulis. Anda juga bingung kenapa tidak ada penjelasan mengenai hal itu ketika script ditulis. Hal itu memang sengaja kami lakukan karena setiap menulis actionscript pasti sering menulis onClipEvent() jadi kami tidak menuliskan penjelasan mengenai onClipEvent(). Sebagai gantinya silahkan baca  dibawah ini untuk mengetahui penjelasan mengenai beberapa onClipEvent()
onClipEvent wajib digunakan saat menulis actionscript di movieclip. Bisa juga diartikan sebagai script pembuka saat menulis actionscript di movie clip. Ada beberapa jenisnya namun yang akan kami jelaskan hanya 5 saja.
1. load
Scipt yang ada didalam onClipEvent ini akan dijalankan satu kali ketika keyframe movieclip ini berada dimainkan. Di movieclip script ini ditulis onClipEvent(load){} sedangkan di frame script ini ditulis onload=function(){};

2. enterFrame

Scipt yang ada didalam onClipEvent ini akan dijalankan secara terus menerus ketika ketika keyframe movieclip ini berada dimainkan. Di movieclip script ini ditulis onClipEvent(EnterFrame){} sedangkan di frame script ini ditulis onEnterFrame=function(){};
3. mouseMove
Scipt yang ada didalam onClipEvent ini akan dijalankan ketika mouse bergerak. Di movieclip script ini ditulis onClipEvent(mouseMove){} sedangkan di frame script ini ditulis onMouseMove=function(){};
4. mouseDown
Scipt yang ada didalam onClipEvent ini akan dijalankan ketika mouse ditekan. Di movieclip script ini ditulis onClipEvent(mouseDown){} sedangkan di frame script ini ditulis onMouseDown=function(){};
5. mouseUp
Scipt yang ada didalam onClipEvent ini akan dijalankan ketika tekanan mouse dilepaskan. Di movieclip script ini ditulis onClipEvent(mouseUp){} sedangkan di frame script ini ditulis onMouseUp=function(){};
Untuk contoh penggunaannya masing-masing akan kita berikan script
1
2
_x = random(300);
_y = random(300);
Contoh 1 : Buatlah lingkaran dan seleksi lingkaran tersebut lalu tekan F8 dan tekan ok. Tempatkan movie clip ini di tengah-tengah stage. Berikan script berikut pada lingkaran tersebut :
1
2
3
4
onClipEvent (load) {
_x = random(300);
_y = random(300);
}
Test movie dengan menekan CTRL+Enter.

POSISI X DAN Y PADA FLASH

Di sekolah kita pasti diajari tentang sumbu cartesius. Sumbu cartesius dibagi menjadi 2 garis yaitu garis horisontal untuk posisi x dan garis vertikal untuk posisi y. Pertemuan antara 2 garis tersebut berada di koordinat (0,0). Selanjutnya lihatlah gambar di bawah ini :
xy-normal1
Sumbu cartesius pada matematika
Pada gambar di atas terlihat jelas bahwa :
semakin kekiri nilai x akan bernilai negatif dan semakin kekanan nilai x akan bernilai positif
semakin keatas nilai y akan bernilai positif dan semakin kebawah nilai y akan bernilai negatif
Tetapi di Flash terdapat perbedaan mengenai sumbu cartesius tersebut. Perhatikan gambar dibawah ini :
xy-flash1
Sumbu cartesius pada Flash
Melalui gambar diatas kita dapat mengetahui 2 perbedaan mengenai sumbu cartesius di Flash :
1. Posisi koordinat (0,0) berada di pojok kiri atas stage.
2. Pada sumbu y semakin ke atas nilai y akan bernilai negatif dan semakin ke bawah nilai y akan bernilai positif.
Sebagai contoh jika anda ingin membuat sebuah objek turun ke bawah gunakan script berikut :
1
2
3
onClipEvent (enterFrame) {
_y += 5;
}
Ingatlah 2 perbedaan di atas. Bagi anda yang terbiasa menggunakan sumbu cartesius pada matematika, mungkin anda akan sering mengalami masalah tentang penulisan posisi y pada Flash. Anda akan membutuhkan waktu untuk membisakan diri dengan perbedaan tersebut.

ANIMASI GERAKAN DENGAN ACTION SCRIPT

Berikut ini kita akan membuat sebuah animasi gerakan dengan menggunakan actionscript. Gerakan yang akan kita gunakan adalah gerakan ke kanan dan ke kiri.
1. Buatlah sebuah lingkaran. Seleksi lingkaran tersebut dan tekan F8. Pada kotak dialog yang muncul pilih Movie Clip sebagai Type dan tekan OK.
2. Klik movie clip lingkaran dan tekan Ctrl+F3 untuk memunculkan panel properties. Ubah niali X: pada panel properties menjadi 9,7
3. Select movie clip lingkaran tadi dan tekan F9.
4. Masukan actionscript ini pada kotak actions yang muncul :
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
onClipEvent (load) {
gerak = 1;
}
onClipEvent (enterFrame) {
//jika koordinat x movie clip ini berada lebih dari 255
if (_x>255) {
gerak = 2;
}
//jika koordinat x movie clip ini berada kurang dari 45
if (_x<45) {
gerak = 1;
}
//jika gerak sama dengan 1
if (gerak == 1) {
//koordinat x movie clip ini akan ditambah 20 (movie clip ini akan bergerak kekanan)
//semakin besar nilainya semakin cepat gerakannya
_x += 20;
}
//jika gerak sama dengan 2
if (gerak == 2) {
//koordinat x movie clip ini akan dikurangi 20 (movie clip ini akan bergerak kekiri)
//semakin besar nilainya semakin cepat gerakannya
_x -= 20;
}
}
5. Terakhir test movie dengan menekan CTRL+ENTER.

SCROLLING BACKGROUND DENGAN MOTION TWEEN

Scrolling background adalah animasi bakground yang bergerak secara terus menerus (berulang). Scrolling background biasanya digunakan di game-game pesawat. Sesuai judulnya, kita akan membuatnya dengan menggunakan animasi motion tween. Bacground pada tutorial kali ini akan bergerak ke kiri
1. Buatlah sebuah flash document.
2. Buatlah sebuah objek seperti gambar di bawah ini dengan panjang yang sama dengan panjang stage dan letakan di tengah-tengah stage bagian bawah.
letak1
2. Seleksi objek tersebut dan tekan Ctrl+G agar objek tersebut menjadi group.
3. Seleksi objek yang sudah di group tadi dan tekan Ctrl+D.
4. Ubah letak objek kedua hasil duplikasi ke samping kanan objek pertama seperti gambar di bawah ini:
letak2
5. Seleksi kedua gambar tadi dan tekan F8. Pada panel yang muncul masukkan background sebagai name dan Movie clip sebagai type lalu tekan OK.
6. Klik kanan frame 41 pada stage dan pilih Insert Keyframe.
7. Ubah letak movie clip background di frame 41 seperti gambar di bawah ini :
letak3
8. Klik kanan frame 1 dan pilih Create Motion Tween.
9. Klik kanan frame 40 dan pilih Insert Keyframe.
10. Klik kanan frame 41 dan pilih Remove Frame.

MENGGERAKKAN OBJEK DENGAN GERAKAN MOUSE

ebelumnya kita telah mempelajari bagaimana cara menggerakan objek dengan keyboard. Sekarang kita akan membahas cara menggerakan objek dengan gerakan mouse. 1. Buatlah sebuah lingkaran dan ubah menjadi movieclip
2. Seleksi movieclip tersebut dan tekan F9
3. Masukan actionscript berikut kedalam kotak dialog Actions :
1
2
3
onClipEvent (enterFrame) {
startDrag(this, true, 55, 55, 345, 345);
}
4. Test movie dengan menekan CTRL+ENTER.
Movieclip bergerak sesuai gerakan mouse
5. Seperti terlihat diatas movieclip hanya bergerak didalam kotak putih saja. Hal ini dikarenakan parameter yang suda saya setting.
6. Untuk lebih jelasnya lihat dibawah ini
startDrag(target, lock, left, top, right, bottom)
target   : Siapa yang didrag. Dalam hal ini kita menggunakan this yang artinya movieclip ini sendiri
lock      : Nilainya true dan false. Jika true maka titik pusat movieclip sama dengan titik pusat mouse
left       : Batas kiri maksimal
top       : Batas atas maksimal
right     : Batas kanan maksimal
bottom  : Batas bawah maksimal
7. Kalau lock kita ubah menjadi false maka akan terlihat seperti dibawah ini :
Lock yang nilainya false
8. Jika kita ingin hanya ingin movieclip tersebut hanya dapat bergerak kekanan dan kekiri maka ubah parameternya menjadi seperti dibawah ini :
1
2
3
4
5
6
7
8
onClipEvent (enterFrame) {
//movieclip ini bergerak mengikuti gerakan mouse dengan titik pusat movieclip ini sebagai titik pusat gerakan
//batas kiri moviclip ini adalah 55 artinya gerakan movieclip ini akan berhenti jika koordinat x movieclip ini kurang dari 55
//batas atas moviclip ini adalah 200 artinya gerakan movieclip ini akan berhenti jika koordinat y movieclip ini kurang dari 200
//batas kanan moviclip ini adalah 345 artinya gerakan movieclip ini akan berhenti jika koordinat x movieclip ini lebih dari 345
//batas bawah moviclip ini adalah 200 artinya gerakan movieclip ini akan berhenti jika koordinat y movieclip ini lebih dari 200
startDrag(this, true, 55, 200, 345, 200);
}
9. Test movie dengan menekan CTRL+ENTER.
Objek hanya bergerak kekanan dan kekiri

MELACAK KOORDINAT MOUSE

Kali ini kita akan melacak keberadaan kursor mouse. Cara kerjanya mudah anda hanya tinggal menggerakan kursor mouse maka akan tampil posisi koordinat x dan y  sesuai keberadaan koordinat kursor mouse.
1. Buatlah 2 buah dynamic text dengan masing-masing Var diberi nama posisix dan posisiy
2. Buat 3 buah static text dan beri tulisan Posisi Kursor Mouse, x:, y: pada masing-masing static text tersebut.

Gambar Peletakan
3. Klik frame 1 lalu tekan F9 dan beri actionscript berikut:
1
2
3
4
5
6
onMouseMove = function () {
//nilai posisix sama dengan nilai koordinat x mouse
posisix = _root._xmouse;
//nilai posisiy sama dengan nilai koordinat y mouse
posisiy = _root._ymouse;
};
4. Test Movie dangan menekan CTRL+Enter
Pelacak koordinat mouse

Senin, 12 September 2011

PLAY, PAUSE dan STOP Animasi Suara

Tutorial berikut ini digunakan sebagai pelengkap tutorial Pause dan Play Suara. Pada tutorial kali ini kita akan membahas tentang bagaimana cara menghentikan suara yang sedang dimainkan. Sebenarnya pada script Pause dan Play Suara sudah ada. Tapi karena digunakan dalam tombol pause, mungkin ada yang belum tahu.
Untuk menghentikan suara kita cukup menuliskan stop() pada variable yang menampung suara yang sedang dimainkan. Misalnya : suara ditampung pada variable Musicz, maka untuk menghentikannya kita menuliskan Musicz.stop()
Untuk contoh lainnya, kita akan menggabungkannya dengan tutorial Pause dan Play Suara :
1. Bukalah fla dari source Pause dan Play Suara.
2. Buatlah sebuah objek seperti gambar dibawah ini :
3. Seleksi objek tersebut dan tekan F8. Pada panel yang muncul masukan stop_btn sebagai name dan button sebagai type lalu tekan ok.
4. Letakan seluruh objek di stage menjadi seperti ini :
5. Klik frame 1 dan tekan F9. Pada panel actions yang muncul ubah seluruh scriptnya menjadi seperti ini :
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
//membuat variable bernama Pause dengan nilai false
Pause = false;
//membuat variable bernama Stop dengan nilai false
Stop = false;
//membuat fungsi bernama mainkanMusik
function mainkanMusik() {
//membuat variable musik sebagai sound object
musik = new Sound();
//masukkan suara berlinkage bgm dari panel library ke dalam variable musik
musik.attachSound("bgm");
//mainkan suara di dalam variable musik sebanyak 999 kali
musik.start(0,999);
}
//jika tombol pause_btn ditekan
pause_btn.onPress = function() {
//membuat variable posisi dengan nilai pembualatan ke bawah dari posisi terakhir suara pada variable musik yang dibagi 1000
posisi = Math.floor(musik.position/1000);
//hentikan suara pada variable musik
musik.stop();
//ubah nilai variable Pause menjadi true
Pause = true;
};
//jika tombol play_btn ditekan
play_btn.onPress = function() {
//jika variable Stop bernilai true
if (Stop) {
//mainkan suara di dalam variable musik sebanyak 999 kali
musik.start(0,1);
//ubah nilai variable Pause menjadi false
Pause = false;
//ubah nilai variable Stop menjadi true false
Stop = false;
}
//jika variable Pause bernilai true dan variable Stop bernilai false
if (Pause &amp;&amp; !Stop) {
//mainkan suara di dalam variable musik sesuai nilai variable posisi sebanyak 1 kali
musik.start(posisi,1);
//ubah nilai variable Pause menjadi false
Pause = false;
}
//jika suara di dalam variable musik selesai dimainkan
musik.onSoundComplete = function() {
//jalankan fungsi mainkanMusik
mainkanMusik();
};
};
//jika tombol stop_btn ditekan
stop_btn.onPress = function() {
//ubah nilai variable Stop menjadi true
Stop = true;
//hentikan suara pada variable musik
musik.stop();
};
//menjalankan fungsi mainkanMusik ketika swf pertama kali dijalankan
mainkanMusik();
6. Tekan Ctrl+Enter untuk melihat hasilnya.
7. Selain menggunakan stop(), kita juga bisa menggunakan stopAllSounds() untuk menghentikan suara. Bedanya, stop() hanya menghentikan 1 suara sedangkan stopAllSounds() akan menghentikan seluruh suara yang ada. Silahkan anda pilih sesuai kebutuhan.

ATHENAEUM LIGHT

APA ITU ATHENAEUM LIGHT
Kata Athenaeum diambil dari bahasa Yunani, yang artinya perpustakaan atau reading room. Nama ini digunakan oleh Sumware Consulting, NZ untuk nama produk perangkat lunak “gratisan” yang mereka buat.
Versi Light, adalah versi sederhana dan merupakan potongan dari versi yang lebih lengkap Athenaeum Pro (tidak gratis). Sekalipun aplikasi ini adalah gratisan dan sekedar potongan perangkat lunak untuk tujuan promosi, nampaknya fitur-fitur dalam Athenaeum Light masih sangat menarik untuk dipakai sebagai salah satu sarana otomatisasi perpustakaan secara sederhana. Tentang Athenaeum bisa dilihat di http://sumware.co.nz/athenaeum/light.php
Selain menyuguhkan fasilitas untuk mengemas pangkalan data buku (collections), aplikasi ini juga menyediakan fasilitas untuk melakukan peminjaman dan membuat laporan. Fasilitas lain seperti seperti pembuatan label, barcode, statistik dan stock opname juga disediakan. Hal ini menjadi nilai tambah tersendiri yang jarang dijumpai pada aplikasi gratisan lain.
Athenaeum dibangun dari Software Database Filemaker Pro 6.0 (www.filemaker.com). Sebuah perangkat lunak untuk mengelola data dengan operasi yang sangat mudah dan sederhana. Kemudahan yang diberikan Filemaker telah menobatkannya sebagai software yang “paling mudah” digunakan, versi majalah PC World 2004. Kemudahannya pula yang memberi peluang pada banyak orang (non-programer) mampu untuk memodifikasi bahkan membuat sendiri sebuah aplikasi yang sesuai dengan kebutuhan,
Athenaeum Light 6.0 dikemas secara open-script, artiya kode atau formula di dalamnya tidak ditutup oleh pembuatnya. Hal ini memudahkan para pemakainya untuk meperbaiki, memodifikasi tampilan, field, bahasa, serta relasi data sesuai dengan kebutuhan masing-masing.

DIMANA CARI SOFTWARENYA?
Ini software free alias tidak berbayar. Anda bisa mendapatkannya dengan mendownload di sini (4shared) atau di “download software Athenaeum Light 6.0″ (rapidshare) dan “download manual bahasa Indonesia” (rapidshare)

INSTALASI DAN KONFIGURASI
Athenaeum Light 6.0 dikemas secara runtime [exe] dan bekerja pada OS Windows / 95 / 98/ ME / 2000 / XP. Dengan mengkopi seluruh file ke dalam perangkat keras (copy paste). Aplikasi ini bisa dibuka dengan meng “klik” 2x.
Athenaeum Light Application atau EXE

MEMBUKA PROTEKSI (READ ONLY)
Untuk dapat melakukan entry data dan perintah lain secara penuh, maka proteksi (read only) yang umumnya jika kita mengkopi Athenaeum Light dari CD-ROM ke komputer dengan OS Windows / 95 / 98/ ME / 2000 / XP harus dibuka terlebih dahulu.
Caranya adalah sebagai berikut;
Klik kanan pada folder Athenaeum Light à Properti
2. Hilangkan status Read Only yang masih aktif dengan cara mengklik tanda check list-
3. Tanda check-list Read-only telah hilang
Pilih Apply à pilih Apply changes to this folder, subfolders and file
Catatan: untuk OS Windows XP perintah di atas bisa diabaikan.

MENGGUNAKAN ATHENAEUM LIGHT 6.0
Klik 2x pada file Athenaeum Light Application atau EXE
Lalu akan muncul tampilan seperti gambar di bawah ini
Password
Ada 3 pilihan password untuk membuka Athenaeum Light 6.0
Masukkan password (pilih salah satu password di bawah ini) à ok
Admin (tertinggi) : merdeka
Petugas/pustakawan : freedom
Pengguna (OPAC) : user
Untuk Athenaeum 8.5 v.1 : Kolom user name DIKOSONGI SAJA
Interface (tampilan depan) Athenaeum Light 6.0 dengan menggunakan password merdeka atau freedom
Interface (tampilan depan) Athenaeum Light 6.0 dengan menggunakan password user

MENU ADMINISTRASI
Pada interface (tampilan depan) Athenaeum Light 6.0, terdapat menu Administrasi yang berfungsi untuk merubah beberapa setting seperti memasukkan data organisasi, memasukkan nama administrator, merubah setting athenaeum menjadi multi-user, menetapkan jumlah maksimal buku yang dapat dipinjam, membuat batasan masa atau waktu peminjam dan juga merubah default kertas yang akan dicetak.
Memasukkan Nama dan Logo Organisasi serta Nama Petugas dan Jabatannya
Pilih menu Administrasi, kemudian isilah nama organisasi, nama petugas serta jabatannya dan bila perlu masukkan logo organisasi anda.
Contoh:
Nama Organisasi : Perpustakaan Indonesia Membaca
Nama Admin/petugas : Edo Kasela
Jabatan : Librarian
Maksimum buku yang boleh dipinjam : 10 buku / items
Jangka waktu peminjaman : 14 hari termasuk hari Sabtu dan Minggu (dengan merubah tombol off ke on). Jika jangka waktu peminjaman selama 14 hari tidak termasuk hari Sabtu dan Minggu, maka pindahkan tombol On ke posisi Off.

MENU INFORMASI
Menu ini digunakan untuk memasukkan informasi cara pemakaian Athenaeum, peraturan perpustakaan dan informasi apa saja yang ditujukan kepada pemakai perpustakaan.
Untuk mengisi informasi serta peraturan-peraturan perpustakaan, cukup mengetikkan aturan-aturan/informasi pada kolom yang tersedia.

Lihat gambar di bawah ini :
MENU PENCARIAN
Menu ini berfungsi sebagai katalog untuk mencari buku. Pada menu ini terdapat beberapa fasilitas untuk mencari / menemukan kembali suatu koleksi dengan menggunakan beberapa metode:
1. Fast Find
Pencarian suatu koleksi dengan pendekatan keyword. Dengan mengetikkan keyword, kita dapat memperoleh beberapa list buku yang sesuai dengan keyword yang kita ketikkan pada kolom pencarian.
Contoh
Ketiklah keyword management à Klik OK (tombol ENTER tidak dapat digunakan sebagai shortcut OK) maka akan muncul list buku yang berkaitan dengan kata kunci yang diketik.
2. Easy
Pencarian suatu koleksi dengan menggunakan empat (4) pendekatan, pendekatan judul, pengarang, subyek dan nomor panggil (call number)
3. Detail
Pencarian detail, biasanya digunakan oleh para pengelola perpustakaan dalam mencari koleksi menurut kategori yang lebih detail.
Contohnya, mencari buku dengan kriteria tertentu yaitu dengan pendekatan penerbit tertentu, harga tertentu, jenis tertentu dan lainnya.
Berikut ini gambar tampilan penelusuran secara detail

KATALOG
Katalog pada Athenaeum, telah disesuaikan dengan standar AACR (Anglo-American Cataloguing Rules). Hal ini memudahkan pengguna Athenaeum untuk langusng memasukkan data pada setiap field-fieldnya.
Salah satu katalog Athenaeum:
Bagaimana cara mengisi data buku atau koleksi kita pada katalog Athenaeum?
1. Klik tombol Isi data yang ada di bagian atas
2. Ketik data yang telah kita buat pada setiap field
3. untuk mengisi tampilan cover buku atau koleksi, lakukan copy and paste
Contoh:
Judul : Aku seorang pustakawan
Pengarang : Mulan Kwok
Subyek : pustakawan, novel, perpustakaan
Item id : 0306060001
ISBN : 0-7879-5077-7
Jika telah selesai mengisi data, klik gambar rumah (home) yang ada di pojok sebelah kiri. Athenaeum akan menyimpan data yang sudah kita masukkan secara otomatis.
Jika kita menginginkan buku ini menjadi buku reference, maka pilihlah tab Admin
Kemudian berikan check list dengan cara mengklik kolom Not for issue.

MENGISI DATA ANGGOTA
Untuk mengisi data anggota, pilih menu Anggota pada tampilan awal, kemudian pilih Isi data, dan masukkan data yang kita miliki

PEMINJAMAN
Jika sudah ada data buku dan data anggota, kita dapat melakukan transaksi peminjaman dan pengembalian buku.
Untuk melakukan peminjaman, klik menu Peminjaman
Masukkan No. ID Anggota, jika berhasil, akan muncul nama anggotanya.
Kemudian, masukkan no. ID buku/koleksi, kemudian klik OK.

PENGEMBALIAN
Untuk melakukan pengembalian, masukkan no. ID buku/koleksi kemudian klik OK

PERPANJANGAN
Jika ada anggota yang belum sempat untuk mengembalikan buku/koleksi tepat waktu, ia dapat melakukan perpanjangan masa peminjaman, Athenaeum menyediakan fasilitas tersebut untuk memenuhi kebutuhan anggota untuk memperpanjang masa peminjaman.
Klik tab Perpanjangan, masukkan no. id buku/koleksi yang akan diperpanjang.

MEMBUAT BARCODE
Athenaeum Light, menyediakan fasilitas untuk membuat barcode yang berfungsi untuk memudahkan pengelola perpustakaan/taman bacaan dalam melakukan transaksi peminjaman, pengembalian dan juga perpanjangan buku.
Untuk membuat barcode yang diperlukan adalah meng-install font barcode terlebih dahulu ke komputer kita.
Caranya: buka folder seperti yang terlihat di bawah ini
Kemudian copy file yang di-shortir biru, dan paste di folder Font Windows
Buka Athenaeum, dan pilih menu Katalog, pilih Fasilitas Lain
Maka akan muncul tampilan seperti ini;
klik menu Print yang terdapat dalam kolom Barcode & DDC, kemudian OK
maka akan muncul tampilan seperti ini:
pastikan komputer kita telah terkoneksi dengan printer, kemudian pilih menu Continue yang terdapat di sebelah kiri, pilih OK jika kita ingin mengeprint. Kertas A4 dapat memuat 21 barcode yang akan di cetak.

MEMBUAT KARTU KATALOG
Ada beberapa perpustakaan/taman bacaan yang memerlukan kartu katalog secara manual, meskipun katalog tersebut telah berbentuk elektronik.
Berikut ini cara membuat kartu katalog
Pilih menu Katalog, kemudian klik Fasilitas Lain dan pilih Kartu Katalog
Agar tidak terpotong seperti tampilan di atas, maka sebelum kita mencetak ubahlah set up kertas menjadi landscape. Kertas A4 dapat mencetak 6 kartu katalog.

MEMBUAT LABEL
Sebelum kita membuat label, pastikan dalam tampilan katalog, kita telah memasukkan data pada kolom Nomor Panggil yang terdapat di sebelah kanan.
Jika kita telah memasukkan data pada kolom Nomor Panggil, pilihlah menu Fasilitas Lain, kemudian pilih Item Label, kemudian Ok. Maka akan muncul tampilan seperti di bawah ini
Pilih Continue, kemudian Ok