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




 
 
SEGÉDLETEK ActionScript

Dinamikus Flash képgaléria - mérethez igazodó felület
  feltöltve: 2003.10.25 | szerző: kiskp | olvasva: 20887 alkalommal

   
 

A fórumon vetődött fel a kérdés, hogy miként lehetne egy mc méreteit, pozicióját, dinamikusan betöltött képhez igazítani. Nos, sokféle megoldás küzül az egyiket vesszük szemügyre, egy kis maszkolási gyakorlattal fűszerezve.

Végeredményben valami ilyesmit kell kapnunk:

Mielőtt azonban belevágnánk a részletes útmutatóba, először nagy vonalakban nézzük csak meg mit is szeretnénk elérni. Adott egy képgaléria amiben van rengeteg (nekünk most csak 5) különféle méretű kép. A megfelelő gombokra kattintva a kívánt képet betöltjük, majd betöltés után hozzáigazítunk egy másik mc-t (jelen esetünkben a fejlécet). Rövid eszmefuttatásunk végére érve nézzük meg hogyan is valósul meg ez, lépésről-lépésre:

A fő timeline-on található egy function ami meghívja képeket ill. beállítja képek maszkolásához szükséges paramétereket.

function loadImg(name) {
     //mit töltsünk be
     img.loadThis = name;
     //rejtsük el a képet wipe-pal (úsztatás)
     img.wipeOut = false;
     //jelenítsük meg a képet wipe-pal
     img.wipeIn = true;
     //kezdhetjük-e a méretezést
     img.reSize = false;
     //be van-e már töltve a kép
     img.imgLoaded = false;
     img.gotoAndPlay(2);
}

Ugyanitt vannak a gombok, rajtuk a képet meghívó function-nel,

on (release) {
     loadImg("img03");
     //elég csak a kép kiterjesztés nélküli nevét megadnunk, a többit (útvonal, kiterjesztés) az img nevű      mc loadIMG cimkéjű frame-jén állítjuk be.
}

valamint egy 6 rétegből álló MovieClip (img), ami 26 frame hosszúságú. A rétegek alulról lefelé a következők:



1. kép - rétegek elhelyezkedése, ill. a cimkék

1. réteg - bgr

Hozzunk létre egy 320*180 pixeles téglalapot, majd konvertáljuk MovieClip típusú szimbólummá (F8 - Convert To Symbol...), figyelve arra, hogy a regisztrációs pont az pont középen legyen. Ez azért kell mert dinamikus méretezésnél, ehhez a ponthoz viszonyítva történik a méretváltozás. Így hogy középre tettük a regisztrációs pontot minden írányban azonos lesz a változás mértéke. Instance névnek adjuk a bgr-t.

A regisztrációs pontnak igen fontos szerepe van a későbbi méretezésnél, moszgásnál ill. forgatásnál.
2. kép - Convert To Symbol

Ezen az mc-n (bgr) lévő actionscript a következő:

onClipEvent (load) {
     /*Az fr ill. sp minden esetben ugyanazt a cél szolgálja, nevezetesen a méretezés/pozicionálás      sebességét ill. "csillapítását*/
     sp=0.7;
     fr=0.1;
}

onClipEvent (enterFrame) {
     _parent.bgrWidth = this._width;
     wd=_parent._blank._width-this._width;
     wrate=(wrate+(wd/sp))*fr; //a vízszintes csillapítás mértéke
     
hd=_parent._blank._height-this._height;
     hrate=(hrate+(hd/sp))*fr; //a horizontális csillapítás mértéke

     //ha betöltődött a kép és indulhat a méretezés is akkor
     if (_parent.imgLoaded && _parent.reSize) {
          //beállítjuk a fejléc pozicióját
          _parent.tf_header._x = _parent.wipe._x;
          _parent.tf_header._y = _parent._wipe._y - _parent.tf_header._height - this._height/2;
          //és a háttér méreteit az előbb kiszámolt csillapítással
          this._width +=wrate;
          this._height +=hrate;
     }
     //ha a méretezés engedélyezve van és a betöltött kép (_blank) mérete megegyezik a háttér      méretével
     if (_parent.reSize && Math.round(this._width) == Math.round(_parent._blank._width) &&           Math.round(this._height) == Math.round(_parent._blank._height)) {
          //akkor engedélyezzük a maszkolás kezdetését
          _parent.wipeOut = true;
     }
}

2. réteg - img

Ezen a rétegen egy üres mozi van csak (_blank) ide töltjük be a képeket. Az ehhez tartozó kód:

onClipEvent (load) {
     this._visible = false;
}

onClipEvent (enterFrame) {
     //a képet hozzáigazítjuk a bgr nevű mc-nkhez
     this._x = _parent.bgr._x-(this._width/2);
     this._y = _parent.bgr._y-(this._height/2);
}

 
   
 
 

© 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 >>> : .. .