Tampilkan postingan dengan label Flash. Tampilkan semua postingan
Tampilkan postingan dengan label Flash. Tampilkan semua postingan

30 Juni 2013

Create, Update, Delete Flash dan PHP Mysql

10.04  Unknown  No comments


flashcrudCreate, update, and delete (CRUD) entry database melalui Flash dengan bantuan PHP bukan barang baru dan tutorialnya ada banyak di internet. Sayangnya, tutorial yang ada cuma setengah-setengah, dalam arti hanya ada cara menambah entry database dan memanggil entry di database dengan bantuan PHP atau ada tutorial yang cuma menyuguhkan cara  mengubah entry namun tidak dijelaskan menambah data dan memanggil data. Tulisan ini menggabungkan hal mendasar memakai Flash untuk mengelola data melalui PHP.
Actionscript yang dipakai adalah AS2. Untuk AS3, silakan baca tutorial ini.
Pertama, buat tabel dalam database atau dump SQL di bawah ini di Phpmyadmin.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CREATE TABLE IF NOT EXISTS `posisi` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`topic` varchar(200) DEFAULT NULL,
`posx` varchar(10) DEFAULT NULL,
`posy` varchar(10) DEFAULT NULL,
`section` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=40 ;
 
--
-- Dumping data for table `posisi`
--
 
INSERT INTO `posisi` (`id`, `topic`, `posx`, `posy`, `section`) VALUES
(1, 'Ayam', '10', '10', 'Unggas'),
(2, 'Bebek', '30', '30', 'Unggas');

Hasilnya akan seperti ini jika Anda browse di Phpmyadmin.
Phpmyadmin

Mengapa memakai nama field seperti "topic", "posx"? Ya sejujurnya, Flash CRUD ini cuma batu loncatan untuk membuat aplikasi yang lain. Abaikan nama field-nya, Anda bisa membuat sendiri nama field yang diinginkan dan sesuaikan di file yang terkait.
Selanjutnya kita akan mengupas satu demi satu CRUD yang dimaksud

CREATE - DISPLAY
Yang dimaksud di sini adalah kemampuan menambahkan entry. Skrip di bawah ini, sebagian besar diambil dari flash-creations.com
Pertama, kita perlu mengambil data dari mysql dengan file "getpos.php" berikut 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
//ganti dengan nama server, user, password dan database Anda
$server = "localhost";
$username = "root";
$password = "";
$database = "";
 
if (!mysql_connect($server, $username, $password)) {
$r_string = '&errorcode=1&';   
 
} elseif (!mysql_select_db($database)) {
$r_string = '&errorcode=2&';
 
} else {
$qr = mysql_query("SELECT * from posisi");
 
if (!qr || mysql_num_rows($qr)==0) {
$r_string = '&errorcode=3&msg='.mysql_error().'&';
} else {
$r_string = '&errorcode=0&n='.mysql_num_rows ($qr);
$i = 0;
while ($row = mysql_fetch_assoc ($qr)) {
while (list ($key, $val) = each ($row)) {
$r_string .= '&' . $key . $i . '=' . stripslashes($val);
}
$i++;
}
 
$r_string .='&';
}
}
echo $r_string;


Berikut ini kode untuk insert. Namakan "insertpos.php":
?
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
<?
$server = "localhost";
$username = "root";
$password = "";
$database = "";
 
if (!mysql_connect($server, $username, $password)) {
$r_string = '&errorcode=1&';   
 
} elseif (!mysql_select_db($database)) {
$r_string = '&errorcode=2&';
 
} else {
$ins_str = "INSERT INTO posisi (id, topic, posx, posy, section) VALUES (NULL, '".addslashes($_GET['topic'])."', '".$_GET['posx']."', '".$_GET['posy']."', '".addslashes($_GET['section'])."')";
 
if (!mysql_query ($ins_str)) {
$msg = mysql_error();
$r_string = '&errorcode=3&msg='.$msg;
} else {
 
$id = mysql_insert_id();
$r_string = '&errorcode=0&id='.$id.'&';
}
}
 
echo $r_string;
?>

Tidak banyak berbeda dengan file php untuk insert umumnya. Hanya ada tambahan untuk error message dan proteksi input text dengan "addslashes" (walaupun addslashes disebut tidak 100% mampu mencegah injeksi sql, namun lebih baik daripada tidak ada proteksi sama sekali).

Di Flash (bisa Flash8 atau CS3, CS4, yang penting AS2), letakkan komponen datagrid di stage, namakan bakigrid. Buat button mc, namakan "tambahbtn". Buat input text (atau ambil komponen input text, namakan "topik", "seksi", "posxt", "posyt". Posisinya di stage terserah Anda.

Lalu masukkan actionscript in di frame 1:
?
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
var select_lv:LoadVars = new LoadVars();
var insert_lv:LoadVars = new LoadVars();
var errorMsgs:Array = [
"",       
"Couldn't connect to server",
"Couldn't connect to database",
"Error running query",
"Tiga data pertama tidak bisa dihapus"];
 
var filepath:String;
var posInfo:Array = [];
 
// function to put a zero in front of a one-digit number
function zerofill(n:Number):String {
if (n<10) return '0' + n.toString();
else return n.toString();
}
 
if (_url.indexOf("http") != 0) filepath = "http://localhost/folder/";
else filepath = "../folder/";
 
topik.maxChars = 50;
seksi.maxChars = 20;
posxt.text = 10;
posyt.text = 10;
topik.text = "";
seksi.text = "";
 
////////////////////////////////////////////////////////////////////
///           Loadvars untuk ambil data dan display               ///
////////////////////////////////////////////////////////////////////
select_lv.onLoad = function(ok:Boolean) {
if (ok) {
 
if (this.errorcode=="0") {
 
//masukkan data yang diload ke dalam array posInfo
for (var i:Number=0; i < this.n; i++) {
posInfo.push(
{record:this["id"+i],
topic:this["topic"+i],
posx:Number(this["posx"+i]),
posy:Number(this["posy"+i]),
section:this["section"+i]
});
}
 
//buat datagrid
bakigrid.columnNames = ["topic", "posx", "posy", "section"];
bakigrid.getColumnAt(0).width = 90;
bakigrid.getColumnAt(0).headerText = "Topic";
bakigrid.getColumnAt(1).width = 40;
bakigrid.getColumnAt(1).headerText = "X";
bakigrid.getColumnAt(2).width = 40;
bakigrid.getColumnAt(2).headerText = "Y";
bakigrid.getColumnAt(3).width = 90;
bakigrid.getColumnAt(3).headerText = "Section";
 
//array posInfo sebagai penyedia data
bakigrid.dataProvider = posInfo;
 
msg_ta.text = "Masukkan data yang valid. Klik sel untuk update atau hapus, kecuali 3 data pertama.";
 
} //end if no error
 
else {
msg_ta.text = errorMsgs[Number(this.errorcode)];
if (this.errorcode == "3") msg_ta.text += ": " + this.msg;
}
 
} //end if onload ok
 
else {
msg_ta.text = "Gagal";
}
 
}//end select lv
 
msg_ta.text = "Konek ke database...";
select_lv.sendAndLoad(filepath + "getpos.php", select_lv, "GET");
 
////////////////////////////////////////////////////////////////////
///                   Loadvars untuk insert                              ///
////////////////////////////////////////////////////////////////////
 
insert_lv.onLoad = function(ok:Boolean) {
if (ok) {
if (this.errorcode == "0") {       
posInfo.addItem(
{record:this.id,
topic:topik.text,
posx:Number(posxt.text),
posy:Number(posyt.text),
section:seksi.text
});
 
topik.text = '';
seksi.text = '';
posxt.text = 10;
posyt.text = 10;
msg_ta.text = "Data sudah ditambahkan";
 
} else {
msg_ta.text = errorMsgs[Number(this.errorcode)];
 
}
} else {
msg_ta.text = "Gagal";
}
};
 
tambahbtn.onRelease=function() {
if (topik.text == '') {
msg_ta.text = "Ketik sesuatu";
} else if (isNaN(posxt.text) || isNaN(posyt.text) ||
Number(posxt.text) < 0 || Number(posxt.text) > 500 ||
Number(posyt.text) < 0 || Number(posxt.text) > 420) {
msg_ta.text = "Harus angka dan x harus 0-500 dan y 0-420";
} else {
insert_lv.topic = topik.text;
insert_lv.posx = posxt.text;
insert_lv.posy = posyt.text;
insert_lv.section = seksi.text;
insert_lv.sendAndLoad(filepath + "insertpos.php", insert_lv, "GET");
}
};

Pada saat tombol ditekan, input text harus dicek dulu apakah kosong atau isi, jika berisi, apakah isinya angka atau bukan, apakah di antara 0-500 atau tidak, dst. Sisanya adalah pengiriman variabel ke file php.

UPDATE - DELETE
Kadang kita heran mengapa banyak tutorial insert database dengan PHP namun hanya sedikit tentang update atau edit serta delete. Mungkin alasannya adalah segi kepraktisan: menampilkan data dari MySQL ke Flash merupakan kebutuhan yang nyata dan umum dibandinkan kebutuhan terhadap update/edit dan delete. Hanya sebagian kecil aplikasi yang memberikan kemampuan CRUD untuk user dan klien, yang pasti ini lebih berguna untuk admin. Soalnya, untuk apa Anda membolehkan user mengupdate database? Ini mengundang potensi masalah dan membahayakan keamanan database Anda. Jika hanya untuk kebutuhan admin, kata Anda. Bukankah PHP-Mysql langsung lebih mudah dan praktis? Membuat halaman php yang biasa, tidak "indah" apalagi interaktif, bukanlah masalah selama Anda bisa langsung update dan delete.
Oke, terserah Anda jika mau membuat halaman admin di Flash. Anda tahu ini akan berlebihan namun lebih baik tahu daripada tidak, bukan?

Berikut ini kode php untuk  "deletepos.php" mirip dengan "insertpos.php", hanya ubah di bagian "insert" dengan kode 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
$del_str = "DELETE FROM posisi WHERE id=".$_GET['id'];{/code}
 
Di Flash, buat layer "asdelete" dan tambahkan kode ini:
{code}
delete_lv.onLoad = function(ok:Boolean) {
if (ok) {
if (this.errorcode == "0") {
posInfo.removeItemAt(deleteIndex);
msg_ta.text = "Hapus sukses";
 
topik.text = '';
seksi.text = '';
posxt.text = 10;
posyt.text = 10;
 
} else {
msg_ta.text = errorMsgs[Number(this.errorcode)];
if (this.errorcode == "3") msg_ta.text += ": " + this.msg;
}
} else {
msg_ta.text = "Gagal";
}
};
 
hapusbtn.onRelease=function() {
deleteIndex = bakigrid.selectedIndex;
var id:Number = bakigrid.selectedItem.record;
delete_lv.id = id;
delete_lv.sendAndLoad(filepath + "deletepos.php", delete_lv, "GET");
hapusbtn._visible=false;
ubahbtn._visible=false;
}

Kodenya sudah sangat jelas. Fungsi delete_lv adalah menghapus baris yang diklik dari array posInfo. Baris yang diklik ditandai dengan deleteIndex. Setelah itu kembalikan semua input text ke nilai defaultnya; jika tidak sukses tampilkan pesan kesalahannya.
Ketika button delete ditekan, dia akan mengirimkan baris yang harus di-delete dan mengirimkannya ke file php.

Jangan lupa, di awal script sebelumnya tambahkan loadvars untuk delete. Dan juga untuk update.

var delete_lv:LoadVars = new LoadVars();
var update_lv:LoadVars = new LoadVars();
var deleteIndex:Number;
var updateIndex:Number;

Sekarang kita akan membuat fungsi update atau edit entry.
Kode php untuk update mirip dengan insert. Ubah perintah "insert" dengan "update" 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
56
57
58
59
60
61
62
63
64
$update_str = "UPDATE posisi SET topic='".addslashes($_GET['topic'])."', posx='".$_GET['posx']."', posy='".$_GET['posy']."', section='".addslashes($_GET['section'])."' WHERE id='".$_GET['id']."' ";
{/code}
Namakan file-nya "updatepos.php".
 
Buat di layer berikutnya, actionscript yang akan konek dengan "updatepos.php":
{code}
//Ketika sel datagrid ditekan maka input text akan berisi data dan  tombol "delete" serta "save" muncul
var seleksigrid = new Object();
seleksigrid.cellPress = function(event) {
topik.text = event.target.selectedItem['topic'];
posxt.text = event.target.selectedItem['posx'];
posyt.text = event.target.selectedItem['posy'];
seksi.text = event.target.selectedItem['section'];
hapusbtn._visible=true;
ubahbtn._visible=true;
};
bakigrid.addEventListener("cellPress", seleksigrid);
 
update_lv.onLoad = function(ok:Boolean) {
if (ok) {
if (this.errorcode == "0") {
 
topik.text = '';
seksi.text = '';
posxt.text = 10;
posyt.text = 10;
msg_ta.text = "Data sudah diubah";
 
} else {
 
msg_ta.text = errorMsgs[Number(this.errorcode)];
if (this.errorcode == "3") msg_ta.text += ": " + this.msg;
}
} else {
 
msg_ta.text = "Gagal";
}
};
 
 
ubahbtn.onRelease=function() {
if (topik.text == '') {
msg_ta.text = "Ketik sesuatu";
} else if (isNaN(posxt.text) || isNaN(posyt.text) ||
Number(posxt.text) < 0 || Number(posxt.text) > 500 ||
Number(posyt.text) < 0 || Number(posxt.text) > 420) {
msg_ta.text = "Harus angka dan x harus 0-500 dan y 0-420";
} else {
 
updateIndex = bakigrid.selectedIndex;
var id:Number = bakigrid.selectedItem.record;
update_lv.id = id;
update_lv.topic = topik.text;
update_lv.posx = posxt.text;
update_lv.posy = posyt.text;
update_lv.section = seksi.text;
update_lv.sendAndLoad(filepath + "updatepos.php", update_lv, "GET")
play();//ini cara tricky untuk merefresh datagrid setelah diedit.
//Kosongkan frame ke-1, datagrid ada di  frame ke-2, beri stop();.
//Idenya, ketika tombol "save" ditekan maka frame akan berjalan
//dan kembali ke frame ke-1 dan ke-2 lalu meload ulang  datagrid.
}
};
}
Read More

Peta dengan Zoom, Info, dan Search ( Flash )

09.58  Unknown  1 comment


map zoomPada tutorial sebelumnya, kita telah membuat tombol zoom untuk memperbesar peta dan drag untuk menggeser peta. Sekarang saatnya menambahkan fitur lain yang tak kalah penting: keterangan area dan fungsi search.
Pada demo di atas, ada tambahan tiga fitur baru:
1. Objek dan keterangannya.
2. Search area.
3. Animasi penanda area hasil search.
Req: Flash 8

Tutorial sebelumnya tentang pemakaian virtual camera dan tombol zoom, serta file yang bisa didownload dapat dilihat di sini.


Membuat objek dan keterangan
Buat movieclip objek di dalam mc "map", tepat di atas areanya. Copy paste mc tersebut untuk posisi yang lain. Dalam demo di atas cuma ada 3 objek. Namakan "z1" .. "z3".
Buat mc keterangan, bentuknya bujur sangkar atau terserah sesuka Anda, dan letakkan di dalam mc "kamera", di atas layer "navmenu", di tengah stage. Namakan "info". Di dalamnya ada dynamic text "infot" untuk nama objek dan "infot2" untuk keterangan objek. Di antara dua dynamic text tersebut ada mc kosong bernama "gbr". Kita akan memuat gambar obyek di sana.

Buat layer actionscript di stage utama.
Masukkan kode untuk membuat mc "info" tidak kelihatan saat awal:
_root.kamera.info._visible=false;

Setelah itu, kita perlu membuat fungsi agar mouse kembali normal saat mouse rollover dan rollout di atas objek "z1"..."z3" seandainya kita sedang berada dalam mode zoom atau drag.
Kodenya sama dengan fungsi rollover dan rollout tombol navigasi.

Karena sama, kodenya kita sederhanakan menjadi fungsi tersendiri dengan nama "overmouse" dan "overout". Dengan begini, actionscriptnya adalah:

_root.map.z1.onRollOver=overmouse;
_root.map.z2.onRollOver=overmouse;
_root.map.z3.onRollOver=overmouse;
atau yg lebih singkat:

for (az=1; az<=3; az++) {
_root.map["z"+az].onRollOver=overmouse;
_root.map["z"+az].onRollOut=outmouse;
}
Saat mc "z1"..."z3" ditekan, mc "info" akan muncul kemudian keterangan obyek

function pressmouse() {
_root.kamera.info._visible=true;
_root.kamera.info.infot2.text="This house bla bla bla";
_root.zoomin=false;
_root.zoomout=false;
_root.dragme=false;
Mouse.show();
}
Jadi ketika area diklik akan muncul keterangannya, load fotonya:

_root.map.z1.onPress=function() {
pressmouse();
_root.kamera.info.infot.text="House#1";
_root.kamera.info.gbr.loadMovie("http://yourwebsite.com/flashfiles/image1.jpg");
}
Lakukan hal yang sama untuk button "z2" dan "z3" dengan informasi yang berbeda dan meload gambar berbeda.

Tentu kita perlu membuat pengunjung bisa menutup mc "info". Buat button "clos" di dalam mc "info". Dan tutup dengan actionscript ini:

_root.kamera.info.clos.onRelease=function() {
_root.kamera.toolzoom.gotoAndStop(1);
_root.kamera.info._visible=false;
hilang();
Mouse.show();
}
Ada fungsi hilang() di dalam script di atas. Fungsi itu untuk menghilangkan penanda yang muncul setelah search.
Jangan lupa, buat mc "info" tidak kelihatan saat menekan tombol zoom dan drag. Tambahkan kode ini di script onrelease button navmenu.b1...b3:
_root.kamera.info._visible=false;

Preview.

Membuat searchNama area dan posisinya dalam stage kita masukkan ke dalam array.

area = new Array("block g", "block h", "block i");
posisix = new Array(500, 420, 180);
posisiy = new Array(150, 330, 170);

Untuk mengetahui posisi area di tengah swf, geser map lalu trace x, y mc tersebut. Jangan terkecoh dengan x, y pada properti mc. Dalam demo ini, posisi mc "map" di properti panel x=-92, y=-108. Ketika di trace x y "map" yang muncul adalah x=395, y=195.

Untuk mengetahui posisinya, buatlah 2 dynamic text dengan nama posX dan posY di root, lalu  letakan script ini di root:
map.onEnterFrame=function() {
_root.posX.text="map x= "+map._x;
_root.posY.text="map y= "+map._y;
}
Pada demo di bawah ini, geser map sehingga posisi objek bertanda "X" merah ada di tengah stage dan lihat posisi x y map.

Jika angkanya desimal, bulatkan saja. Tidak usah terlalu perfeksionis. Nah sekarang Anda sudah punya koordinat x y map untuk masing-masing objek ketika berada di tengah. Masukkan ke dalam array "posisix" dan "posisiy". Kita membutuhkan fungsi untuk menggeser map ke posisi x y yang ada di array.

function gesermap(mc, waktu)
{
type = mx.transitions.easing.Strong.easeOut;
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, posisix[i], waktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, posisiy[i], waktu, true);
}
Idenya, ketika nama area ditemukan, maka map akan bergeser posisinya sehingga area tersebut ada di tengah swf. Untuk itu kita perlu input text untuk mengisi nama area dan button search. Lalu kita buat fungsi untuk membandingkan teks di input text dengan elemen dalam array.
Buat mc "oksrc" berisi input text dan button "bsearch". Masukkan dalam mc "kamera" di atas layer "info". Berikut ini fungsi search, dari neilmmm, forum actionscript.org:

kamera.oksrc.bsearch.onRelease = function() {

_root.map["tanda"+i].gotoAndStop(1);

if (kamera.oksrc.input_txt.text != "") {

for (i=0; i<area.length; i++) {

trace(marker[i]);
if (area[i] == kamera.oksrc.input_txt.text.toLowerCase()) {
kamera.myinfo.text = "Found "+kamera.oksrc.input_txt.text;
_root.map["tanda"+i].gotoAndStop(2);
gesermap(map, 1);               
break;
} else {
kamera.myinfo.text = "No data";
}
}
} else {
kamera.myinfo.text = "Please type something";
}
};

Dalam kode di atas ada script _root.map["tanda"+i].gotoAndStop(2); untuk mengontrol timeline animasi penanda yang akan dijelaskan kemudian, bersama fungsi hilang() sebelumnya.

Catatan tambahan, kita perlu membuat map kembali ke ukuran semula agar search dilakukan saat skala "map" 100%. Ini cara yang lebih mudah agar kita tidak perlu membuat script localtoglobal untuk mengarahkan x y map yang sedang dalam mode zoom. Caranya? Buat fungsi zoom2 dengan meng-copy paste fungsi zoom yang ada. Bedanya mc._xcale dan mc._yscale akhirnya diubah menjadi 100 atau 91. Dan letakkan fungsi zoom2() itu di dalam button search "dummy".
Idenya, ketika button search "dummy" ditekan, map akan berskala normal, mode zoom dan drag adalah false, klik direset menjadi 0 lagi, dan barulah input text dan button search muncul.
Scriptnya sederrhana:
kamera.oksrc._visible=true;
kamera.bsearch0._visible=false; // ini dummy search button
Membuat animasi penanda hasil search.Tidak perlu berkerut kening untuk meletakkan animasi penanda pada posisi area yang dicari. Ini mungkin cara yang remeh tapi membuat aplikasi peta Anda tampak keren.

Buat animasi tanda panah berkedap-kedip dengan gaya tradisional: frame 1 isi, frame 2 kosong. Masukkan animasi ini dalam mc yang diberi nama "tanda1" pada frame ke-2. Frame 1 biarkan kosong. kasih stop() di setiap frame. Copy paste "tanda1" dan namakan menjadi "tanda2" dan "tanda3". Letakkan di dekat objek area dalam peta.

Idenya sederhana: ketika area ditemukan, maka penanda akan ke frame 2 sehingga animasi tanda panah kedap-kedip muncul. Ketika tombol "bsearch" kembali ditekan untuk pencarian berikutnya, mc penanda akan ke fram 1 sehingga animasi lenyap. Itulah gunanya script:
_root.map["tanda"+i].gotoAndStop(1); dan _root.map["tanda"+i].gotoAndStop(2);pada kode search di atas.

Terakhir, kita juga perlu menghilangkan animasi penanda ketika tombol zoom dan drag ditekan. Buat fungsinya:

function hilang() {
kamera.myinfo.text = "";
for (sz=0; sz<=3; sz++) {
_root.map["tanda"+sz].gotoAndStop(1);
}
}
Lalu tambahkan fungsi itu pada script button "clos" dan button "b1"..."b3" di "navmenu" dan juga kembalikan dummy button.  Jadinya akan seperti ini:

kamera.navmenu.b3.onRelease=function() {
...
kamera.oksrc._visible=false;
kamera.bsearch0._visible=true;hilang();}

Catatan:
Peta ini dibuat untuk menjawab pertanyaan seorang user di sebuah forum, jadi masih ada bagian yang perlu diperbaiki agar lebih sempurna.
Read More

Zoom Tool dengan Virtual Camera

09.55  Unknown  No comments


map zoomMembuat tombol zoom untuk memperbesar peta bukan hal sulit dan cukup menambah skala x dan skala y ketika tombol diklik. Yang sulit adalah jika kita ingin bagian peta yang diklik membesar dan menjadi pusat stage. Jika kita hanya memperbesar skala movie clip, dan mengubah x, y movieclip berdasarkan x, y mouse di titik yang diklik, maka yang didapatkan: poin  registrasi movie clip yang bergeser ke arah x, y mouse sehingga area yang diklik mungkin bergeser ke arah lain secara relatif, tergantung poin registrasi (apakah di tengah atau di kiri-atas).
Req: Flash 8

Untuk memperbesar area yang diklik, kita dengan mudah menyatakannya dengan:
movieclip._xscale +=50;//ini perbesar 50% dari skala movieclip.
movieclip._yscale +=50;
Dan untuk membuat x, y movie clip ke arah yang diklik, secara sederhana, poin registrasi movieclip di buat di tengah (x, y tidak 0, 0 tapi lebar minus movieclip/2; jika lebarnya 400 maka x-nya akan -200) lalu script-nya kita gunakan:
movieclip._x =  _root._xmouse;
movieclip._y = _root._xmouse;

Kemudian bayangkan, movie clip akan bergeser ke x, y yang baru. dan menjadikannya berada di tengah stage swf, coba bayangkan area yang diklik akan ikut bergeser. Ke mana? Kalau areanya di kiri poin registrasi maka ia akan ke arah kiri, dan sebaliknya.

Metode di atas bisa dilihat pada contoh di bawah ini: zoom akan memperbesar area movieclip ("map") namun area yang diklik tidak menjadi pusat stage swf. Zoom model ini tentu saja bukan hal yang dikehendaki.
Terlihat bahwa poin registrasi peta, yakni tanda "+" akan ke x, y mouse (titik yang diklik).

Solusi yang paling mudah adalah memakai kamera virtual (vcam). Jadi ketika suatu area yang diklik maka poin registrasi kamera yang akan ke x, y yang diklik. Karena poin registrasi vcam adalah di tengah, maka area yang diklik akan berada di tengah vcam. Selain menggeser x, y vcam, kita juga perlu memperkecilnya untuk membuat area peta menjadi lebih besar.

Tool Zoom in/out
Masukkan mc vcam ke dalam stage, namakan instance-nya menjadi "kamera". Untuk mendowload vcam, klik di sini: vcam bryanheisey

Buat button zoom in, zoom out, dragme, kemudian buat movieclip kaca pembesar, namakan "toolzoom".
Mc toolzoom berisi 4 frame:
frame 1: kaca pembesar dg tanda +
frame 2: kaca pembesar dg tanda _
frame 3: kosong
frame 4: gambar tangan untuk drag
buat stop(); di setiap frame

Di dalam mc vcam, buat layer baru, masukkan button "zoomin" dan "zoomout" serta mc "toolzoom" di dalam mc "kamera".

Pada layer AS di vcam (mc "kamera) tambahkan AS ini:
this.toolzoom.gotoAndStop(3); // ini agar toolzoom tidak kelihatan apa-apa dulu.
Kemudian ubah kode:
_visible=false;
menjadi:
_visible=true;

Script ini berguna agar aset di dalam mc vcam ("kamera") yakni button zoom in/out serta toolzoom tetap kelihatan jika visible=false, maka button tidak akan kelihatan.

Kenapa tidak memasukkan button di _root? karena _root akan di-override vcam, sehingga semua aset di _root akan membesar/mengecil sesuai zoom vcam.

Berikan actionscript pada button "zoom in":
?
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
on(release) {
Mouse.hide();
this.toolzoom.gotoAndStop(1);
_root.zoomin=true;
_root.zoomout=false;
_root.dragme=false;
trace(this);
}
on(rollOver) {
Mouse.show();
this.toolzoom.gotoAndStop(3);
}
on(rollOut) {
Mouse.show();
if (_root.zoomin) {
this.toolzoom.gotoAndStop(1);
Mouse.hide();
} else if (_root.zoomout) {
this.toolzoom.gotoAndStop(2);   
Mouse.hide();
}
else if (_root.dragme) {
this.toolzoom.gotoAndStop(4);   
Mouse.hide();
}
}

Keterangan:
sewaktu button di tekan maka mouse akan disembunyikan lalu "toolzoom" akan menunjukkan tanda "+" atau tanda "-" atau tanda drag tergantung mode yang lagi aktif: zoomin, zoomout, atau dragme.

Pada saat rollover, kembalikan mouse agar kaca pembesar tidak mengganggu penglihatan; saat rollout kembalikan toolzoom kepada posisi sebelumnya (mode zoom in atau out atau dragme)

AS di button zoom out dan dragme di bagian on(release) sama saja, kecuali:
button zoomout:
_root.zoomout=true; this.toolzoom.gotoAndStop(2);
button dragme:
_root.dragme=true;
this.toolzoom.gotoAndStop(4);

Kembali ke main stage. Di root, layer paling atas, copy paste kode ini:
{code}
_root.zoomin=false;
_root.zoomout=false;
_root.dragme=false;
klik=0;
// ini untuk mendeklarasikan variabel zoom false di awal dan jumlah klik=0
// variabel "klik" berguna untuk membatasi jumlah zoom
{/code}
Karena kita ingin menggantikan mouse dengan kaca pembesar, maka kita harus membuat x,y "toolzoom" mengikuti x,y root setelah button zoom in atau out di tekan.

Actionscript di root:

kamera.onMouseMove=function() {
if(_root.zoomin || _root.zoomout) {
this.toolzoom._x = this._xmouse;
this.toolzoom._y = this._ymouse;
updateAfterEvent();
}
}

Dengan "onMouseMove" kita membuat "toolzoom" menggantikan mouse yang sudah di-hide sewaktu mengklik tombol zoom in atau out. Kondisi ini hanya terjadi jika variabel "zoomin" atau "zoomout" is true.
jika tidak (berarti button zoom in/out tidak ditekan) maka mouse seperti biasa muncul. mengapa mousemove di "kamera" bukan di "map" atau root? karena vcam akan meng-override root, jadi x,y root sudah berubah.

Script Zoom In/Out dan Drag
Untuk fungsi zoom:

function zoom (mc, faktor, waktu)
{
type = mx.transitions.easing.Strong.easeOut;

besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, mc._xscale*faktor, waktu, true);
besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, mc._yscale*faktor, waktu, true);
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, _root._xmouse, waktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, _root._ymouse, waktu, true);
}

Kita menggunakan fungsi generik dg parameter nama mc, faktor zoom ini/out, dan waktu yg dibutuhkan utk zoom in/out (jika ingin menggunakan frame, di script tween ganti "true" menjadi "false").

Selebihnya script zoom akan dijalankan jika dipanggil pada saat diklik dan tidak dalam mode dragme. Zoom in atau zoom out akan tergantung mode yang sedang aktif.  Jika sedang dalam mode dragme maka drag harus distop. Mode drag hanya dijalankan saat mouse ditekan (onPress).
Untuk memanggilnya:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
map.onRelease=function() {
if (!dragme) {
if (_root.zoomin && klik <5) {
zoom (kamera, 0.5, 1);
klik++;
}
if (_root.zoomout && klik>0) {
zoom (kamera, 2, 1);
klik--;
}
}
this.stopDrag();
trace(klik);
}
map.onPress=function() {
if (dragme) {
this.startDrag();
}
}


Keterangan:
Jika sedang dalam zoomin mode dan jumlah klik di bawah 5 maka skala mc kamera akan di buat menjadi lebih kecil 0.5x setiap klik. Semakin kecil skala vcam maka mc di root akan semakin besar (zoom in), sebaliknya semakin besar skala vcam, maka yg terjadi adalah zoom out.
Jadi jika awalnya skala 100%, klik 1 akan menjadi 50, jika diklik lagi maka zoom akan menjadi (50x0.5) yakni 25%. 50% adalah skala mc yang terakhir setelah diklik. lihat di fungsi zoom, pada bagian mc._xscale*faktor. begitu dst.

Begitu juga saat zoomout mode. kita kalikan skala dengan 2, artinya skala vcam akan membesar sehingga mc yang ada di root menjadi semakin kecil.

Sengan mengarahkan x,y vcam ke x,y mouse maka kita akan memperbesar mc di titik yang diklik, bukan membuat registrasi point mc ke sesuai x,y yg diklik.

Di bawah ini adalah hasil akhirnya.


Untuk peta dengan fitur keterangan objek dan search, baca tutorial ini.
Read More

Penggunaan Combo Box ( Update ) dalam Flash

09.44  Unknown  No comments

combobox flashDalam bagian kedua, ini kita akan melakukan update dan delete data dari database. Ini akan menjadi tutorial yang singkat karena Anda sudah mengetahui bagaimana memasukkan data ke database dari Flash. Proses update dan delete tidak sulit. Jika  masuh kesulitan, baca lagi tutorial sebelumnya. Biasanya, salah ketik dan salah nama field di database yang membuat Anda pusing. Jangan lupa untuk clear recen history agar perubahan terbaru muncul di browser.

UPDATE AND DELETE
Di Flash, Anda sudah mempunyai 3 variable untuk melakukan tugas inserting: variables, varSend, and varLoader. Sekarang kita akan membuat 3 variabel lain yang melakukan updating job dan 3 lainnya untuk delete.Buat layer actionscript untuk skrip di bawah ini:
...
edit_btn.visible=true;hapus_btn.visible=true;tambah_btn.visible=true;submit_btn.visible=false;//removeChild(loader); //we dont need this anymore. or you will get Error #2025
...
?
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/////////////////////////////////
 
/// the updating section /////
 
////////////////////////////////
 
var editvariables:URLVariables = new URLVariables();
 
var editvarSend:URLRequest = new URLRequest("crud.php");
 
editvarSend.method = URLRequestMethod.POST;
 
editvarSend.data = editvariables;
 
var editvarLoader:URLLoader = new URLLoader;
 
editvarLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
 
editvarLoader.addEventListener(Event.COMPLETE, editDone);
 
function editDone(event:Event):void {
 
 ket.text = "";
 
 ket2.text = "";
 
 img.text = "";
 
 gotoAndPlay(1);
 
 status_txt.text = event.target.data.kode;
 
}
 
edit_btn.buttonMode=true;
 
edit_btn.mouseChildren = false;
 
edit_btn.teks.text="EDIT";
 
edit_btn.addEventListener(MouseEvent.CLICK, editDo);
 
function editDo(event:MouseEvent):void {
 
 removeChild(loader);
 
 loader.unload();
 
 editvariables.action= "edit";
 
 editvariables.id = xid.text;
 
 editvariables.name = ket.text;
 
 editvariables.description = ket2.text;
 
 editvariables.image = img.text;
 
 editvarLoader.load(editvarSend);
 
  
 
 play();
 
}
 
 
/////////////////////////////////
 
 /// the deleting section /////
 
 ////////////////////////////////
 
var delvariables:URLVariables = new URLVariables();
 
var delvarSend:URLRequest = new URLRequest("crud.php");
 
delvarSend.method = URLRequestMethod.POST;
 
delvarSend.data = delvariables;
 
var delvarLoader:URLLoader = new URLLoader;
 
delvarLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
 
delvarLoader.addEventListener(Event.COMPLETE, completeDelete);
 
function completeDelete(event:Event):void {
 
 ket.text = "";
 
 ket2.text = "";
 
 img.text = "";
 
 gotoAndPlay(1);
 
 status_txt.text = event.target.data.kode;
 
}
 
hapus_btn.buttonMode=true;
 
hapus_btn.mouseChildren = false;
 
hapus_btn.teks.text="DELETE";
 
 
hapus_btn.addEventListener(MouseEvent.CLICK, deleteData);
 
function deleteData(event:MouseEvent):void {
 
 removeChild(loader);
 
 loader.unload();
 
 delvariables.action= "deleting";
 
 delvariables.id = xid.text;
 
 delvarLoader.load(delvarSend);
 
 
 play();
 
 
}

Skrip updating dan deleting hampir mirip dengan fungsi inserting. Perbedaannya adalah nama-nama variable: URLVariables "action", dan data yang dikirim ke  php. Jangan lupa juga untuk mengubah "crud.php".Ini modifikasi "crud.php".

crud.php:
?
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
$server = "localhost";
 
$username = "root";
 
$password = "";
 
$database = "you database";
 
$nameTable = "kuliner";
 
 
if (!mysql_connect($server, $username, $password)) {
 
 $vartoflash = 'kode=Connection failed&';   
 
} elseif (!mysql_select_db($database)) {
 
 $vartoflash = 'kode=Database select failed&';
 
  
 
} else {
 
//if no error, begin the insert
 
if ($_POST['action'] == "adding") {
 
 $insertQ = "INSERT INTO $nameTable (id, nama, `desc`, gambar)VALUES (NULL, '".addslashes($_POST['name'])."', '".addslashes($_POST['description'])."', '".addslashes($_POST['image'])."')";
 
//"desc" is a MySQL reserved word, should use the backtick
 
 if (!mysql_query ($insertQ)) {
 
 $msg = mysql_error();
 
 $vartoflash = 'kode=Query failed&msg='.$msg;
 
 } else {
 
 // inserted record get the original id
 
 $id = mysql_insert_id();
 
 $vartoflash = 'kode=Success&id='.$id.'&';
 
 }
 
 
};// end if adding
 
 
if ($_POST['action'] == "edit") {
 
 
 $updateQ = "UPDATE $nameTable SET nama='".addslashes($_POST['name'])."', `desc`='".addslashes($_POST['description'])."', gambar='".addslashes($_POST['image'])."' WHERE id='".$_POST['id']."' ";
 
  
 
 if (!mysql_query ($updateQ)) {
 
 $msg = mysql_error();
 
 $vartoflash = 'kode=Query failed&msg='.$msg;
 
 } else {
 
 $id = mysql_insert_id();
 
 $vartoflash = 'kode=Success&id='.$id.'&';
 
 }
 
 
};// end edit
 
 
if ($_POST['action'] == "deleting") {
 
 
 if ($_POST['id'] > 2) {
 
 $deleteQ = "DELETE FROM $nameTable WHERE id=".$_POST['id'];
 
 
 if (!mysql_query ($deleteQ)) {
 
 $msg = mysql_error();
 
 $vartoflash = 'kode=Query failed&msg='.$msg;
 
 } else {
 
 $vartoflash = 'kode=Success&';
 
 }
 
 } else {
 
 $vartoflash = 'kode=You not able to delete 2 firts records&';
 
 }
 
}; //end deleting
 
};
 
 
echo $vartoflash;//flash will use this output. it is important to check where the problem is when something going wrong
 
Jangan lupa bahwa "edit_btn" and "hapus_btn" tidak kelihatan di awal dan hanya kelihatan ketika user memilih item di combobox. Ini untuk mencegah user mengklik kedua button pada saat awal. Di file Fla dari tutorial sebelumnya, ada fungsi "tampilkan" untuk menampilkan data dari database.Tambhakn kode ini:... edit_btn.visible=true; hapus_btn.visible=true; tambah_btn.visible=true; submit_btn.visible=false; //removeChild(loader); //we dont need this anymore. or you will get Error #2025...Done. Notes: - Tutorial ini modifikasi dari script Adam Khoury's guestbook script.- Sebaiknya cari teknik foler dan sanitasi untuk keamanan database Anda.Hasil akhir:
Read More

Related Posts Plugin for WordPress, Blogger...
Daftar Isi Award Langganan Artikel Link Saya Community
Award Pertama
Photobucket
Langganan Artikel Si Boersan :

Enter your email address:

Delivered by FeedBurner

Monggo Di Copy Linknya :
Text Link

Banner Link

Komunitas Blogger Indonesia Komunitas Blogwalking