. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Navigáció, Scroll

Vektoros térkép navigáció készítése Flash-ben
  feltöltve: 2004.05.01 | szerző: caber_net | olvasva: 12614 alkalommal

 
 

Régebben a fórumban segítettem valakinek egy gombokkal mozgatható és nagyítható térkép Flash alapú megvalósításában. Nem állítom, hogy ez a megoldás a létező legtökéletesebb és azt se, hogy nem lehet egyszerűbben kivitelezni. A teljes scriptet a fő idősíkra írtam, és nem objektumokhoz rendeltem. Megszoktam, hogy inkább írok hosszabb kódot, de az lehetőség szerint legyen egy helyen a könyebb áttekinthetőség végett.

Hát akkor vágjunk bele. Ezt fogjuk elkészíteni:

1. LÉPÉS: Szerezz be egy vektoros térképet, vagy használd a mellékelt "hungary.swf" fájlt. Bitmap formátumú képek használatát nem javaslom, mert azok nagyításkor veszítenek minőségükből, pixelesek lesznek. Az általam használt térkép nagysága miatt a következő beállításokat használtam.

2. LÉPÉS: Importáld a térképet a library-be, majd hozz létre 5 layert az alábbi ábrának megfelelően.

3. LÉPÉS: Ctrl+F8-cal hozz létre egy új moziklip szimbólumot, majd húzd bele a grafikát, és helyezd el 0, 0 koordinátákon. A regisztrációs pont legyen a bal felső sarokban.

4. LÉPÉS: Ezután készíts még egy moziklipet, ami egy sima téglalapot tartalmaz, ez lesz a maszk. Mérete legyen akkora, mint a térképé, koordinátái szintén 0, 0.

5. LÉPÉS: Menj vissza a fő idősíkra, és húzd be az előbbi mozit a "terkep", layerre, helyezd 3, 3 koordinátákra majd add neki a terkep_mc instance name-et. A "mask" rétegre pedig húzd be a maszk moziklipet szintén 3, 3 koordinátákra, add neki a mask_mc instance name-et, majd a layer properitesben állítsd át maszkká.

6. LÉPÉS: Készíts 6db gombot, azokat helyezd el a buttons layeren, majd add nekik a következő instance name-eket: zoomin_btn, zoomout_btn, bal_btn, fel_btn, jobb_btn, le_btn. Gondolom elég beszédes elnevezések, nem kell elmagyarázni, melyik mire való.

Most, hogy minden a helyén van, kezdődhet a tánc. Menj az actions rétegre, jelöld ki az első képkockát, majd nyisd meg az actions palettát.

Feladat megfogalmazása, változók meghatározása.

Mielőtt nekirugaszkodnánk, nem árt megfogalmazni magunkban és egy kis papírfecnire felrajzolni, tulajdonképpen mit is akarunk megvalósítani. Célunk, hogy a térképet nagyítani-kicsinyíteni tudjuk, majd ezt gombok segítségével, illetve drag-eléssel mozgassuk úgy, hogy közben a térkép szélei soha ne kerüljenek a maszkolt területen belülre.

7. LÉPÉS: Ehhez meg kell határoznunk néhány értéket:

var a;
var b;
var c;
var d;
var fhatar;
var bhatar;
a = mask_mc._x;
b = mask_mc._x+mask_mc._width;
c = mask_mc._y;
d = mask_mc._y+mask_mc._height;
fhatar = d-terkep_mc._height;
bhatar = b-terkep_mc._width;
//a mozgatás és zoom sebességének meghatározása
sebesseg = 10;

Az a, b, c, d, terkep_mc._width és terkep_mc._height értékek segítségével tudjuk majd kiszámítani, hogy az adott nagyítás mellett milyen koordináta értékekig mozgathatjuk a térképünket. A felfele mozgatás határa fhatar, a balra mozgatásé bhatar, mely értékek a nagyítástól függően változnak. A jobbra és a lefele mozgatás határa nagyítástól függetlenül a, illetve c.

Callback-ek írása az egyes gombok eseményeihez.

8. LÉPÉS:

//nagyítás
zoomin_btn.onPress = function() {
  onEnterFrame = function () {
    with (terkep_mc) {
      szelesseg = _width;
      magassag = _height;
      if (_xscale<500) {
        _xscale = _yscale += sebesseg;
        _x -= (_width-szelesseg)/2;
        _y -= (_height-magassag)/2;
        fhatar = d-_height;
        bhatar = b-_width;
      }
    }
  };
};
zoomin_btn.onRelease = zoomin_btn.onReleaseOutside=function () {
  delete onEnterFrame;
};
//kicsinyítés
zoomout_btn.onPress = function() {
  onEnterFrame = function () {
    with (terkep_mc) {
      szelesseg = _width;
      magassag = _height;
      if (_xscale>100) {
        _xscale = _yscale -= sebesseg;
        _x -= (_width-szelesseg)/2;
        _y -= (_height-magassag)/2;
      }
      fhatar = d-_height;
      bhatar = b-_width;
// Kicsinyítés közben ellenőriznünk kell, hogy a térkép széle nem mászik-e bele a maszkolt területbe.
      if (_x<bhatar) {
        _x = bhatar;
      } else if (_x>a) {
        _x = a;
      }
      if (_y<fhatar) {
        _y = fhatar;
      } else if (_y>c) {
        _y = c;
      }
    }
  };
};
zoomout_btn.onRelease = zoomout_btn.onReleaseOutside=function () {
  delete onEnterFrame;
};

Nézzük meg mit is csinálnak ezek a gombok. A zoomin_btn lenyomásakor elindul egy onEnterFrame eseménykezelő, ami a beállított sebességértéknek megfelelően növel a térkép _xscale és _yscale értékét. Mivel a regisztrációs pont a bal felső sarokban van, ezért a nagyítás közben a látható terület eltolódik. Ez nem éppen felhasználóbarát megoldás, ezért a nagyítás előtti méreteket megjegyeztetjük a flash-el, majd nagyítás utániakkal összehasonlítva a változás értékének felével elmozgatjuk a térképet.
Kicsinyítésnél zoomout_btn lenyomásakor ugyanez a megoldás, csak fordítva. Itt azonban fennáll annak a veszélye, hogy ha elmozdítottuk a képet, akkor kicsinyítéskor a szélei bele fognak lógni a maszkolt területbe. Ezt egy feltételrendszer beiktatásával küszöbölhetjük ki. onRelease és onReleaseOutside eseményeknél töröljük az onEnterFrame-et ezzel megszűntetve a mozgást.

9. LÉPÉS: A mozgató gombokhoz tartozó scriptet írjuk meg:

//mozgatás felfele
fel_btn.onPress = function() {
  onEnterFrame = function () {
    with (terkep_mc) {
      if (_y>=fhatar+sebesseg) {
        _y -= sebesseg;
      } else if (_y<fhatar+sebesseg && _y>fhatar) {
        _y = fhatar;
      }
    }
  };
};
fel_btn.onReleaseOutside = fel_btn.onRelease=function () {
  delete onEnterFrame;
};
//
//mozgatás lefele

le_btn.onPress = function() {
  onEnterFrame = function () {
    with (terkep_mc) {
      if (_y<=c-sebesseg) {
        _y += sebesseg;
      } else if (_y>c-sebesseg && _y<c) {
        _y = c;
      }
    }
  };
};
le_btn.onRelease = le_btn.onReleaseOutside=function () {
  delete onEnterFrame;
};
//
//mozgatás jobbra

jobb_btn.onPress = function() {
  onEnterFrame = function () {
    with (terkep_mc) {
      if (_x<=a-sebesseg) {
        _x += sebesseg;
      } else if (_x>a-sebesseg && _x<a) {
        _x = a;
      }
    }
  };
};
jobb_btn.onRelease = jobb_btn.onReleaseOutside=function () {
  delete onEnterFrame;
};
//
//mozgatás balra

bal_btn.onPress = function() {
  onEnterFrame = function () {
    with (terkep_mc) {
      if (_x>=bhatar+sebesseg) {
        _x -= sebesseg;
      } else if (_x<bhatar+sebesseg && _x>bhatar) {
        _x = bhatar;
      }
    }
  };
};
bal_btn.onRelease = bal_btn.onReleaseOutside=function () {
  delete onEnterFrame;
};

Azt hiszem a fentiek nem sok magyarázatot igényelnek. Az egyes gombok onPress eseményre onEnterFrame segítségével a nekik megfelelő irányban mozgatják a térképet, miközben vizsgáljuk, hogy az nem lépi-e túl a behatárolt tartományt. onRelease és onReleaseOutside törlik az eseményt.

Drag

10. LÉPÉS: Egy elektronikus térkép mit sem ér, ha nem drag-elhető. Erre a flash egy külön mc metódust tartogat számunkra, aminek a neve startDrag. Lássuk csak, hogyan működik:

terkep_mc.onPress = function() {
  terkep_mc.startDrag(false, bhatar, fhatar, a, c);
}

Működésé a következő:
moziklip.startDrag(középrezárt, baloldali határ, felső határ, jobboldali határ, alsó határ);

A térkép elengedését a stopDrag metódussal valósíthatjuk meg.

terkep_mc.onRelease = terkep_mc.onReleaseOutside=function () {
  terkep_mc.stopDrag();
};

 
 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .