Coba lah lihat contoh diatas ! sifat flashnya lebih interaktif dikarenakan adanya Tombol Zoom yang dapat memperbesar gambar.
Membuat 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 puisat 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).
Untuk memperbesar area yang diklik, kita dengan mudah menyatakannya dengan langkah berikut
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.
_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":
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:
_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
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:
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.
Bagi yang mau dowload sorce disini
0 komentar:
Post a Comment