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


 
 
SEGÉDLETEK Flash+XML

Flash + XML alapú képgaléria készítése
  feltöltve: 2003.10.15 | szerző: kiskp | olvasva: 23850 alkalommal

           
 

"Sliding Navigation System"

Ennek megvalósítása a következőképpen fog történni. Figyelni fogjuk az egér x pozicióját és ebből az értékből, nomeg a menürendszer szélességéből meghatározzuk, hogy mennyit kell a menürendszernek jobbra/balra mozognia. Mielőtt azonban ebbe belevágnánk létre kell hoznunk még egy gombot a menürendszerünk végére (az elején ugye már van egy üres gomb). Ez csupán kényelmi funkció, ha a két végén nincs valamennyi "holt tér", akkor teljesen a szélére (639. pixel) ill. az elejére (1.pixel) kell mozatni a kurzort (ami elég kényelmetlen, ha már a kész mű be van ágyazva egy .html file-ba), ahhoz hogy a két szélső gombot teljes egészében lássuk.
Szóval elöbbi kódrészletünkhöz még fűzzük az alábbi sorokat is:

// "holt-tér"
btn_left.duplicateMovieClip("btn_right"
, i+1);
//jobb oldali üres gomb létrehozása
btn_right._x = defWidth+currentPos+this["btn"
+(i-1)]._width;
//annak elmozgatása a megfelelő helyre letiltjuk a működésüket
btn_left.btn_nav.enabled = false;
btn_right.btn_nav.enabled = false;
//és visszaveszünk az átlátszóságukból
btn_left._alpha = 40;
btn_right._alpha = 40;


Itt találkozunk egy új gomb-tulajdonsággal, az enabled-del. Ezzel tudunk egy gombot engedélyezni ill. letiltani. Sok flash-es weboldalnál előfordul az a hiba, hogy egy gomb akkor is működik, ha nem kellene. Az enabled tulajdonsággal ezt tudjuk szabályozni.

Jöjjön akkor a mozgatás. (A mozgatáshoz nagy segítségemre volt Szathmáry Zoltán segédlete itt az swf.hu-n.) Menjünk a fő timeline-ra és a mouseDummy nevű rétegen hozzunk létre egy új mc-t, ami kezdetnek legyen egy sima pici kör. Instance neve legyen "mouseDummy". Ezt fogjuk hozzárendelni az egerünk kurzorjához. Kattintsunk rá jobb gombbal és adjuk hozzá a következő actiont:

onClipEvent (enterFrame) {
this._x=_parent._xmouse;
this._y=_parent._ymouse;
}


Ezzel elértük, hogy a kis kör (mouseDummy) mindig a kurzor poziciójában legyen. Most már kört ki is törölhetjük belőle, hogy ne zavarjon. Persze ha ezt akarjuk kurzornak akkor hagyjuk meg és adjuk hozzá még ezt:

onClipEvent (load) {
Mouse.hide();
}


Most készítsünk egy újabb mc-t, ezúttal egy 50*5 pixeles téglalapot (a regisztrációs pontja legyen a bal folső sarokban(4. kép)), neve és instance neve is legyen "navDummy". Erre már izgalmassab action jön:

onClipEvent (load) {
sp=0.7; //sebesség
fr=0.1; //kilengés
}

onClipEvent (enterFrame) {
xd=_parent.mouseDummy._x-this._x;
//hátralévő út
xrate=(xrate+(xd/sp))*fr
//csillapítás
this._x+=xrate;
//ha eléri a mozink szélességét
if (this._x < 0) {
this._x = 0;
}
if (this._x > 640-this._width) {
this._x = 640-this._width;
}
}


Ha most megnézzük alkotásunkat, akkor látjuk, hogy a téglalap kis késéssel követi a kurzor mozgását (változtatva az sp-t és az fr-t, ez mozgás befolyásolható, lehet próbálkozni). Igen ám, de a menürendszerünk még mindíg csak egy helyben áll! Ehhez (navSystem) hasonló megoldást fogunk használni, mint a navDummy-hoz. Íme:

onClipEvent (load) {
movieWidth = 640;
}

onClipEvent (enterFrame) {
dummyX = -_parent.navDummy._x;
//a navDummy x poziciója, negatív értékkel az ellentétes mozgáshoz
ratio = (this._width - movieWidth) /(movieWidth - _parent.navDummy._width);
//ez határozza meg, hogy mennyit mozoghat a menü, jobbra/balra
NewPos = Number((dummyX*ratio));
//a fentiekből kiszámolja az új poziciót
difX = newPos - this._x;
//az új pozicióból a mozgás késleltetését
this._x = this._x + difX / 3;
//végül pedig a menürendszer x pozicióját
}


A ratio-nál látjuk, hogy a mozgáshoz felhasználtuk a navDummy szélességét is. Ezt a szélesség azért fontos, mert ez határozza meg, hogy mennyire kell e kurzort jobbra vinni ahhoz, hogy az utolsó menüt is lássuk. Ha ez az érték nagyon kicsi akkor teljesen ki kell vinni jobbra, hogy a mozgás megálljon. Ez is csak kényelmi dolog, nyilván egy nem mozgó menügombra könnyebb kattintani, könnyebb elolvasni a gomb feliratát. Lehet kisérletezgetni.

Meg van a mozgás is, de honnan tudjuk, hogy jól működnek a gombok, oda hivatkoznak-e ahová kell?
Csináljunk a fő timeline-on egy új "titles" nevű réteget, rajta egy dynamic textField-del, aminek a szélessége megint mindegy, hogy mekkora, de Variable névnek adjunk "titles"-t, instance névnek pedig "tf_titles". Válasszuk ki egyik kedvenc betűtípusunkat, és méretre adjunk mondjuk 16-ot. Hogy ne legyen recés a betűk széle ágyazzuk be nagy- és kisbetűket ill. a számokat (7. kép)


7. kép

A createNavigation cimkéjű frame-re tegyük fel még ezt a pár sort:

tf_titles._alpha = 50;
tf_titles.autoSize = true;
titles = entryNode.attributes.name;

Így megadtuk a szövegmezőnek, hogy mi legyen az első galéria címe (.xml file első eleme). Mivel beágyaztuk a karektereket így lehet az átlátszóságot is változtatni, izlés szerint.
Most válasszuk ki a "btn" nevű mc-t. A Library-ban (Ctrl+L) kattintsunk kettőt a "btn" nevű mc-n, vagy a timeline alatt a jobb oldalaon keressük ki az Edit Symbol gomb segítségével (8. kép).

Edit Symbol
8. kép - Edit Symbol. Ha gyorsan akarunk jelenetet (scene), vagy szimbólumot megkeresni, szerkeszteni, akkor használjuk ezt a funkciót. Egy komolyabb oldalnál nagy nagy segítség.

Itt a gombunkra írjuk be a következő sorokat:

on (rollOver) {
//definiáltuk az .xml-ben, hogy milyen színek legyenek rollOver ill. rollOut esetén, most ezeket alkalmazzuk
tf_btnName.setTextFormat(_parent._parent.btnOn);
}

on (rollOut, releaseOutside) {
tf_btnName.setTextFormat(_parent._parent.btnOff);
}

on (release) {
//minden kattintáskor kicseréljük a fő timeline-on lévő "titles" értékét a btnName változóval
_parent._parent.tf_titles.autoSize = true;
_parent._parent.titles = btnName;
}

Láthatjuk, hogy a cimünk minden esetben a btnName nevű változó értékét veszi fel. Akkor hogy lehet, hogy az nem ugyanaz minden kattintáskor. Nos azért , mert mikor duplikáltuk a gombokat, akkor a for ciklus segítségével minden másolat más-más btName értéket kapott az .xml file-ból. Így két legyet ütünk egy csapásra, mert a title értéke ugyanaz mint a gomb neve. Ha változtatjuk a gomb nevét (az .xml-ben) akkor a cím is változni fog. Persze azt is megtehetjük, hogy a cím ne ugyanaz legyen, mint a gomb neve. Ilyenkor csak annyi a teendőnk, hogy az .xml file-ban az egyes elemeknek adunk még egy tulajdonságot és a flash-ben a for ciklusnál - hasonlóan ahogy megadtuk a btnName változót - minden másolatnak adunk egy új változót és a kattintáskor erre hivatkozunk.

Ide még vissza fogunk térni, de előbb meg kell csinálnunk a "slideshow"-t

 
           
 
 

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