30 Juni 2013

Zoom Tool dengan Virtual Camera


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.

0 komentar:

Poskan Komentar

Silahkan TInggalkan Komentar Anda di Blog Saya..
No SPAM and No PORN...
Terimakasih Telah meninggalkan Jejak Anda

Related Posts Plugin for WordPress, Blogger...
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