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


 
 
SEGÉDLETEK Flash+XML

XML támogatott hír panel készítése
  feltöltve: 2005.04.03 | szerző: ismeretlen | olvasva: 11805 alkalommal

     
 
ActionScript

Végre kódolhatunk, nem mintha szeretnék, de legalább közeledik a munkánk vége!
Az AS réteg első kockájára helyezz egy stop; utasítást. A preloading többi részét mint mondtam rád bízom. A második frame-n a kódon kívül még egy kis felirat található: XML töltődik... Ezt helyezzd el te is a színpadon. Előfordulhat ugyanis hogy a kis XML file felhízik úgy 100 kB-ra a sok sok hírrel és azt már nem biztos hogy kivárja minden info nélkül egy szerencsétlen modemes. Jó tudni hogy az XML file-ok töltését is lehet figyelni egyébként százalékosan, én nagyon ritkán szoktam, de ha neked extra igényeid vannak ilyen téren akkor erre a frame-re építheted be a plussz kódot.

stop();
//Inicializálás
hirek = new XML();
hirek.load("hirek.xml");
hirek.ignoreWhite = true;

//onLoad függvény
hirek.onLoad = function() {
//XML node-jainak valtozókban való elmentése
root = hirek.firstChild;
h = root.childNodes;
hirMax = h.length-1;
nextFrame();
};


Létrehozzuk az XML objektumunkat, majd tölteni kezdjük a hirek.xml-t. A térközöket figyelmen kívül hagyjuk az ignoreWhite=true sorral. Ezután megírjuk az eseménykezelőt, ami akkor hívódik meg, ha betöltött az XML. Majd jön három változó, melyek az XML-ből a szövegdobozokba való olvasást segítik majd, illetve a hirMax, annak lesz az indikátora, hogy az elore gomb mikor tiltsa le magát, ha már nincs több hír előtte a sorban. Ha ezek beállítása megtörtént a mozink szárnyal a következő képkockára, hát kövessük mi is, ahol ezt a kódot találjuk:

stop;
//Hol tart az XML a hírek közt
hirCounter = 0;
//txtMain beállítasa
txt_main.html = true;
//Szöveg elhelyező függvény
builder = function (i) {
txt_main.htmlText = h[i].firstChild.nodeValue;
txt_header.text = h[i].attributes.cim;
txt_data.text = h[i].attributes.datum+" | by:"+h[i].attributes.szerzo;
txt_hany.text = hirCounter+1+" / "+h.length;
scrollOptimizer();
};


Bevezetünk egy valtozót mely azt nézi majd hol tartanak a híreink, melyik van épp kiírva a user elé. Azért állítjuk 0-ra, mert a childNodes metódusa az XML osztálynak egy tömböt ad vissza, a tömbökről pedig tudjuk hogy a számunkra első elemük az számukra a nulladik. Ezért kellett az előző frame-n lévő hirMax változónál a hírek darabszámából levonni egyet.

Ezután a builder nevű fv. jön, mely majd elhelyezi mindig a paraméterben kapott számmal kiolvasott információt a a szövegdobozokban. Mivel a fő szövegdoboznál kívánság volt hogy tudja a HTML szövegformázást, így ezt beállítjuk, majd átadjuk a szövegeket és meghívjuk a scrollOptimizer fv-t is. Hogy erre miért van szükség arról később.

//Melyik gomb legyen letiltva mert a végén jár a sorban
trackControl1 = function () {
if (hirCounter == hirMax) {
this.enabled = 0;
} else {
this.enabled = 1;
}
};
trackControl2 = function () {
if (hirCounter == 0) {
this.enabled = 0;
} else {
this.enabled = 1;
}
};


A trackControl1-2 fv-ek arra vannak hogy az alsó lépető gmbok figyeljék, mikor kell letiltaniuk magukat. Az első az elore_btn-t figyeli és ha a hirCounter (melyet majd mindig egyel növelünk ill. csökkentünk a gombok nyomogatásával) egyenlő a hirMax-al akkor letiltja a gombot. A második pedig a hatra_btn-t figyeli. Hogy miért nullához mér a feltételben, annak már világosnak kell lennie.

//Gomb actions
elore_btn.onPress = function() {
hirCounter += 1;
builder(hirCounter);
trackControl1.apply(this);
trackControl2.apply(hatra_btn);
};
hatra_btn.onPress = function() {
hirCounter -= 1;
builder(hirCounter);
trackControl1.apply(elore_btn);
trackControl2.apply(this);
};


Itt jön a két alsó gombunk action-je. Növeljük vagy csökkentjük a hirCounter számlálót, attól függően, hogy előre, vagy hátra léptünk. Az új értékkel meghívjuk a builder fv.-t mely így kiolvassa az XML-ből az adott hír tag szövegét és paramétereit, majd kiírja azokat a txtBox-okba. Ezután az előbb megtárgyalt trackControl fv.-ek lefutnak, az apply segítségével.

Most ha lefuttatod a mozit és mindent jól csináltál, akkor be kell hogy töltse szépen az XML-t, és tudnod kell léptetgetni a híreidet. Egyetlen kis adóság maradt, a csúszó scroll megoldása. Erre Ducky-nak egész segédlet könyvtára van itt az swf.hu-n, de azért jöjjön a scroll, csak hogy kerek legyen a script magyarázata.

Először a scoll_btn-ra írd ezt az action-t:

on (press) {
startDrag("scroll_btn", false, xpos, ypos1, xpos, ypos2);
cscr();
}
on (release, releaseOutside) {
stopDrag();
del();
}


Ez beállítja, hogy mekkora négyzetben draggelhetjük, illetve a dragelés kezdetekor meghívja a cscr fv.-t. A gomb felengedésekor pedig lefut a del fv. és a dragelés is abbamarad. Innen tartsd fejben a cscr és a del fv.-eket és a startDrag-ben megadott változókat, hogy könnyebben követni tudd a következő kódrészt.

//SCROLL FV.-EK
scrollOptimizer = function () {
// alap helyzet visszaállítasa
xpos = scroll_btn._x;
ypos = scroll_btn._y = 66;
msc = txt_main.maxscroll;
if (msc<=2) {
scroll_btn.enabled = 0;
ypos1 = 62;
ypos2 = 62;
} else {
scroll_btn.enabled = 1;
ypos1 = 62;
ypos2 = 260;
}
bcscr();
};


A scrollOptimizer fv. tehát mint feljebb láttuk akkor hívódik meg mikor a builder fv. lefutott. Tehát mindig amikor új hírt töltünk a szövegdobozokba. Ekkor ennek (scrollOptimizer) meg kell néznie, hogy a szöveg scrollozható-e, vagy nem mert olyan pici. Ekkor le kell tiltani a scroll_btn-t. Éppenséggel ha nem a hatter_mc-ben lenne a scroll alapvonala, hanem egy külön mc-ben kint a színpadon, akkor még el is tüntethetnénk ilyenkor az egész scroll "berendezésünket". Ha scrollozni kell, akkor az ypos1 és az ypos2 változókkal megadja hogy a startDrag lefutásakor milyen korlátok közt mozgatható a gombunk/csúszkánk. Ezután meghívja a bcscr fv.-t ami már következik is:)

function bcscr() {
maxa = ypos2-ypos1;
scs = (Math.abs(ypos-scroll_btn._y)/maxa)*msc;
txt_main.scroll = scs;
}

Itt a hangzatos maxa változóban eltároljuk az ypos1 és az ypos2 távolságát, vagyis a csúszkának csúszható utat:) Majd kiszámoljuk az scs változóban, azt hogy az út hány százalékánál jár a gombunk. Ez tegyük fel 0.52, tehát madjnem középen van. Így megszorozzuk a textBox-unknak a maxScroll értékét ennyivel és ezt állítjuk be az aktuális scroll értéknek. Ha pixelfonttal csináljátok ezt a hírpanelt, akkor annak fontos lesz, hogy egész pixelen legyen. Így súgok hogy itt kell majd babrálni.

//csúszó gomb
function cscr() {
this.onEnterFrame = bcscr;
}

//törlés
function del() {
delete this.onEnterFrame;
}


Majd itt jön a cscr fv., melyet egyszer hívunk meg a startDrag lefutásakor. Ez a fv. az onEnterFrame eseménykezelőhöz hozzárendeli az előbb tárgyalt bcscr fv.-t így az minden frame-ben lefut, egészen addig, amíg a gombot fel nem engedjük, ekkor ugyanis a del fv. meghívásával törlődik cscr-re mutató hivatkozás. (A lényeg hogy nem fut le minden frame-ben a továbbiakban:))

//FV-HÍVÁSOK
builder(hirCounter);
trackControl1.apply(elore_btn);
trackControl2.apply(hatra_btn);


Itt a végén pedig meghívjuk a builder fv.-ünket egyszer. Innentől már a gombok fogják hívogatni. Apropó gombok! Le kell tiltani a hátra gombot biztosan, hiszen mi a builder fv-t az első (emlékezz a nulladik) elemmel hívjuk meg, tehát nincs hátralépés. De nem lehetünk elég óvatosak:), mivan ha csak egy hírt adtunk az XML-hez. Akkor előre menetet is sztornó. Így lefuttatjuk mindkét trackControl-t és ezzel bármíly hihetetlen de készen is vagyunk.


Zárszó


Adós vagyok még a "trükkel". Az XML file-t gondolom most szeretnéd megírni. Szeretnél benne sok dőlt, kövér és színes betűt is használni, hogy szépen formázott legyen. De ezt csak egy különleges XML elemmel érheted el. Ez a <![CDATA[ .... ]]> . Itt a ...-ok helyére kerülhet majd bármilyen kacsacsőrben megadott HTML tag. A letölthető forrásfile-ban benne van az én hír XML file-om, ahonnan világos lesz a használata ennek a kiegészítő tagnek.

Remélem sok embernek segített ez a rövid XML ismertetés és a hírgyüjtő panel elkészítése. Még egy csomó funckiót bele építhetünk. Én pl. tervezem, hogy komponenst csinálok belőle, mely "két szintes" XML fát fog tudni kezelni. Vagyis mint itt az swf.hu-n lesznek témakörök és bennük a hírek szelektálva, képekkel, linkekkel.

Mostmár minden tudásod és eszközöd megvan ahhoz hogy te is megcsináld ezt. Minden esetre várom a kérdéseiteket és jó munká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 >>> : .. .