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

           
 

Munkánk során előfordulhat, hogy olyan weboldalt vagy annak egy részét kell elkészíteni, ahol sok képet, elég sűrűn kell(ene) cserélgetni, komlyabb programozási, flash-es ismeret nélkül. Gondoljunk csak bele! Adott egy fotóművész, aki interneten szeretné publikálni havonta frissülő fényképtárát, lehetőleg téma szerint csoportosítva. Aztán szertne egy olyan extra tulajdonságot is online galériájának, hogy ne csak egyenként kattintgatva lehessen képeit megtekinteni, hanem egy gombnyomásra amolyan diavetítés módjára, szépen, bizonyos időközönként cserélje a program a képeket, persze ne csak bevágva egyiket a másik után, hanem valamilyen szép áttűnési effektel. (Mi most az egyszerűség kedvéért egy autós galériát fogunk csinálni, sok szép, gyors autóval.)

>>> Ezt fogjuk kapni végeredményként!

Tervezés

Első dolgunk a megfelelő módszer kiválasztása. Megcsinálhatjuk azt is, hogy az összes képet legyártjuk külön .swf file-ba, a megfelelő fade in/out effektekkel és azt fogjuk valamilyen interaktivitás hatására betölteni. Pár darab képnél ez még nem okoz gondot, de mondjuk fél év elteltével, a kezdetben csak alig több mint 10 darabos kollekció felduzzad 100+ képre és különben is minek gyártanánk le egy rakat .swf file-t amikor FlashMX-szel síma mezei .jpg-ket is behívhatunk. Az átuszásokat is csak egyszer gyártjuk le és ezt alkalmazzuk majd az összes képre. A témák (esetünkben típusok) szerinti csoportosításhoz, és az egyes autotípusokon belüli képek rendszerezéséhez pedig XML-t fogunk használni. Most hogy sikeresen kiválasztottuk az eszközöket feladatunk megvalósításához, neki is láthatunk az előkészületeknek.

Előkészületek

Hozzunk létre egy könyvtárat mondjuk "slideshow" néven, ide fogunk dolgozni. Ezen belül még szükségünk lesz egy "xml", egy "images" és egy "music" nevű alkönyvtárra. Az "images" könyvtárban még létre kell hoznunk további könyvtárakat, típusok szerint - lehetőleg egyszerübb névvel, mert így fogunk rá hivatkozni az .xml file-ban is -, típusokon belül pedig még további két ("fullsize" - a teljes méretű képeknek, "thumbnails" - az előnézeti kis képeknek) könyvtárat (1. kép).

Amint beszereztük a szükséges fotókat, valamilyen rajzoló (Photoshop), vagy egy komolyabb képnézegető (ACDSee 4+) programmal méretezzük/vágjuk az összes képet méretre és mentsük le a megfelelő könyvtárba. A "fullsize"-ba 480*240 pixel méretűeket, img_01.jpg, img_02.jpg...stb. néven és 80*40 pixeleseket a "thumbnails" könyvtárba, tn_img_01.jpg, tn_img_02.jpg...stb. néven. (A file-ok egységes elnevezése nagyon fontos!)
A képek a helyükön vannak kezdhetjük a programozást!

Könyvtárszerkezet...
1. kép

XML menürendszer és a főbb beállítások

Navigációs rendszerünkhöz szükségünk lesz egy .xml file-ra, aminek a készítésébe én most nem mennék bele, egyrészt rengeteg infó található a neten erről a témáról, másrészt mellékelve úgy is meg találjátok, ahol meg szükséges ott úgyis ejtek majd pár szót róla.

Ha helyén van az .xml file-unk (xml/navigation.xml), indítsuk el a Flash MX-et. Kezdjük a mozi beállításaival:

Size: 640*400 pixel
Background: #666666
Frame Rate: 50 (Azért 50, mert így símábbak lesznek az áttűnési effektek)

Mentsük el xml_slideshow.fla néven. Ha ez kész akkor csináljunk egy keretet, ami nekünk fog a későbbiekben segíteni, hogy hova pakolgassuk a gombokat stb. Ez a keret legyen pont egy pixellel kisebb - x és y irányban is - mint a mozi mérete (tehát 639*399), mert ha teljes méretben hagyjuk és beágyazzuk egy .html file-ba akkor a jobb széléről és alulról is el fog maradni egy pixel. Így átméretezve már jól néz ki (Ctrl+F12 -vel megnézhetitek). Ezt a layer-t (border) 'lock'-oljuk, így elkerüljük azt hogy véletlen elmozgassuk, vagy módosítsuk. (2. kép)

Rétegeink: label (cimke, ezekre hivatkozunk később), actions, border (keret), mouseDummy (a menü mozgatásához kell), navigation (itt helyezkedik el a menürendszer), img (ide töltjük majd a képeket)

2. kép - Munkánkat megkönnyítve bátran használjuk a show/hide ill. lock/unlock kapcsolókat!

Mint a képen is látható szükségünk lesz még további 5 rétegre:

label - főbb actionscriptek cimkéi, ezekre fogunk hivatkozni néhány esetben, meg az egész átláthatóbb, ha nem egymás hegyén-hátán vannak a frame-k. (3. kép)
actions - na vajon mi?
border - az előbb említett segéd keret. Ezt persze később le is törölhetjük
mouseDummy - a menü mozgatásához kell (erről később lesz szó)
navigation - maga a menürendszer helyezkedik el ezen a rétegn
img - ide jönnek majd a képek

Így cimkézve azért átláthatóbb...
3. kép - Az egyes frame-k megjelölése sokat segít az eligazodásban. A label-ek elnevezésében használjuk a következőket (mint a képen is látszik...ezekre fogunk hivatkozni): initialize, LoadXML, ErrorLoading, FinishedLoading, createNavigation

Inicializálás és XML betöltés

A föbb actionscript -eket a cimkék alatti frame-re fogjuk írni.

initialize - a szokásos

System.usecodepage = true; //az ékezetes betűkhöz
fscommand("allowscale", false);
//ne méretezze a flash-t

parancson kívűl itt található egy script (nem sajátom egy Colin Moock nevű flash guru írta), ami arra hivatott, hogy az .xml olvasásakor hagyja figyelmen kívűl az ún. whitespace-eket.

LoadXML - itt töltjük be az xml könyvtárból a navigation.xml-t, ami alapján létrehozzuk menürendszerünket. Emellet definiáljuk az XML objectünket (xData) és egy onLoadFunction nevű függvénnyel ellenőrizzük, hogy a betöltés sikeres volt vagy nem.

ErrorLoading - ha sikertelen volt az .xml file betöltése akkor ide kerülünk. Itt kiírathatjuk, hogy valamilyen hiba lépett fel az .xml file-betöltésekor, sőt elhelyezhetünk egy gombot is ami visszavisz minket az "initialize" részhez, így megkisérelhetjük még egyszer a betöltést.

FinishedLoading - amennyiben sikeres volt a betöltés akkor ide kerülünk. Itt megint definiálunk egy csomó változót, amik a későbbiekben nagyon sokat fognak segíteni. Ezenkívűl itt vezetünk be két paramétert, amelyek a gombokon lévő szöveg színeit kontrollálják. Hasonló a CSS-nél használatos a:hover-hez és társaihoz. Ezeket a színeket az .xml file-unkban határozzuk meg (így bármikor módosíthatók anélkül, hogy bele kellenne nyúlni a Flash forrásfile-ba) így: main_onColor="F8F8F8" main_offColor= "CCCCCC"
És így hivatkozunk rá a flash-ben:

// ha a gomb fölött van a kurzor
btnOn = new TextFormat();
btnOn.color = "0x"+categoryNode.attributes.main_onColor;
// ha nincs a gomb fölött a kurzor
btnOff = new TextFormat();
btnOff.color = "0x"+categoryNode.attributes.main_offColor;


createNavigation - itt csak egy egyszerű stop(); utasítás van meg egy
_blank.loadMovie("slides.swf"); utasítás, amivel a "_blank" nevű üres mc-be betöltjük a "slides.swf" nevű file-t (erről majd később).

 
           
 
 

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