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

     
 

Flash mozi tervezése


Most, hogy megismertük az XML-t (legalábbis annyit belőle ami elég a Flash-hez az esetek 98%-ban, de ehhez a segédlethez biztosan), vágjunk bele a Flash mozink megvalósításába. A száraz bevezető után egy kis kedv csinálóként és frissítőként lássuk mi lesz a vége munkánknak:)

Láthatjuk, hogy van egy igen egyszerű háttér grafikánk, mely természetesen Flash-ben készült. Ezen kívül van egy csúszó scroll a kis panelünk jobb oldalán, valamint, lent még két gomb, mellyel előre hátra lépdelhetünk híreink között. Az alsó gombok között pedig láthatjuk mennyi hír van még hátra. A hír kenyérszövege formázható kell hogy legyen HTML tagekkel, hiszen tudjuk, hogy ezt a FLMX tudja már kezelni. Ehhez az XML megírásánal egy kis cselre lesz szükségünk de erről majd a végén... Ezen kívül a panel mutatja a hír címét, postolásának dátumát és szerzőjének nevét. Ezek fixen maradnak a scrollozás ellenére is. Ez lehet hogy egyeseknek nem tetszik, de a segédlet végén könnyen kijavíthatják majd, hogy ez a HTML őskorára emlékeztető frame-es szerkezet eltűnjön. Nekem így tetszik:)

A hasonlóság a letagadhatatlan az swf.hu-val, melyet az onnan vett próbahírek erősítenek, de ami jó az jó. Nekem ennyi funkció is elég szokott lenni, de ki lehetne még egészíteni, egy gombbal, mely megcseréli az időrendi sorrendet, vagy bármelyik szempont szerint böngészhetővé teszi a betöltött híreket. Miután megvolt, hogy nekem hány funkcióra van szükségem, átgondoltam hogy ehhez milyen XML fát csinálok. Egy egység lesz egy hír, melyben a tagek közti szöveg a hír maga, és a nyitó tag paraméterei a következők: cim, datum, szerzo. Tehát:

<?xml version="1.0" encoding="UTF-8"?>
<hirek>
<h1 cim="valami" datum="2005.03.31." szerzo="BluesBreaker">
Hir szoveg, bla bla
</h1>
</hirek>

Töltsük fel egy két próba elemmel, hogy majd tudjuk tesztelgetni a mozinkat kódolás közben, majd mentsük el hirek.xml néven ugyanabba(!) a mappába, mint ahová a Flash mozink kerül majd. FIGYELEM! Még ne próbálkozz HTML tag-ek beszúrásával, mert azt az XML rendesen új jelölőnek veszi majd. A "trükk(?)", amivel kikerüljük ezt a kellemetlenséget a segédlet legvégén olvasható.

Flash kivitelezése


1. LÉPÉS: Hozzunk létre egy új 400*300 pixel méretű mozit. Majd ott négy darab layert, melyeket nevezzünk el fentről lefele sorban: AS, gombok, txtBox-ok, hatter. Én egy ötödiket is beraktam mind alá, komp. néven, mely a mozi előtöltését végző komponenst tartalmazza.

Három frame-re lesz szükségünk, mint az látszik is. Az elsőn van a preloading. Ezt mindenki oldja meg saját kedve szerint. A második frame-n van az XML file betöltése. A harmadikon pedig a felhasználó felület és a tényleges működés.

2. LÉPÉS: Hozzunk létre egy hatter_mc nevű mc-t. Ebbe igen meglepően a háttér fog kerülni. Ezt mindenkinek rábíznám a jóizlésére, azért hogy lásd én mit raktam a statikus, háttér grafikába itt egy kép.

Ezt tegyük ki a _root-on a színpadra, a megadott rétegre a harmadik frame-ben. Azután készítsük el a többi grafikai megjelítéshez szükséges elemet. Ezek a gombok és a textBox-ok lesznek.

A txtBox-ok layer-en hozz létre négy szövegdobozt egymás alá. A felsőt a címnek, txt_header instance névvel.
Egyet alatta txt_data névvel, a dátum és a szerző megjelenítésére.
Alattuk a legnagyobbat txt_main néven.
Legalulra pedig egy picit, txt_hany néven, mely azt fogja mutatni hol tart a user a hírek közt.
Mindegyik természetesen dynamic textField legyen.

Egyiken sem ágyazzuk be a fontokat. Én Arial-t használtam, de a méretekkel és a színekkel nem szeretnélek már terhelni, úgyis a sajátodat készíted:) Fontos eldönteni a hír panelünk egy, még nem említett funkcióját. Lehessen-e copy+paste-elni a híreidet, vagy non-selectable-ök legyenek a szövegdobozok? Szerintem szebb és biztonságosabb ha nem tudja egy az egyben kimásolni az írásokat a felhasználó. Ezt a textBox-ok létrehozásakor kell beállítani alul, az alap eset a non-selectable, tehát mi így is hagyjuk.

Már csak a gombokat kell létrehoznunk a kódolás előtt. Ezekre nem nagyon szeretnék kitérni. A fenti .swf-ből világosnak kell lennie, hogy két gombot kell készítenünk egy háromszög (nyíl) formájút és egy kör szerűt. Ezeket tegyük ki a színpadra a megfelelő layer-re. Az alsó, háromszögletű gomboknak adjuk a hatra_btn és a elore_btn neveket, ahol értelem szerűen a bal oldal a hátra irány. A kör alakú gombunkat pedig tegyük a scroll vonal tetejére. A vonal mentén fogjuk azt draggelve mozgatni. A neve pedig, igen furmányosan csak scroll_btn.

Lehet, hogy még nem teljesen tiszta. Tehát van egy XML-ünk amiben szép sorban vannak egymás után a gyökér elem alatt a gyerek. Ezeken fogunk végig lépdelni az alsó háromszögletű gombokkal, így lesz ez:)

 
     
 
 

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