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


 
 
SEGÉDLETEK ActionScript alapok

Méretfüggetlen oldal készítése Flash MX-ben
  feltöltve: 2004.06.20 | szerző: savanya | olvasva: 16025 alkalommal

     
 

I. A háttér

4. lépés: készítsünk, vagy halásszunk elő a merevlemez bugyraiból egy megfelelőnek ítélt patternt, amely az oldal hátteréül fog szolgálni. Legyen mondjuk ez:

5. lépés: importáljuk be a könyvtárba (File -> Import To Library), húzzuk be a színpadra, és konvertáljuk szimbólummá (Insert -> Convert to Symbol). Legyen neve: back, regisztrációs pontja legyen középen. Instance-név nem kell neki, mivel nem fogunk AS-böl hivatkozni rá.

6. lépés: Igazítsuk az új mc-nket a színpadon az Align paletta segítségével az alábbiak szerint:

Ennek jelentőségét a továbbiakban látni fogjuk.

7. lépés: Kattintsunk kétszer a 'back' mc-re, majd a szinpadon levő pattern_.jpg-t ismét konvertáljuk szimbólummá(Insert -> Convert to Symbol), azonban most lényeges, hogy állítsuk be a Linkage paramétereket , mivel a későbbiekben hivatkozni fogunk AS-ből is erre az mc-re.

8. lépés: A szinpadon jelöljük ki az új "pattern_mc' mc-t, és adjunk neki instance névként a 'pattern' nevet. A timeline-on pedig hozzunk létre egy új Layert a leendő AS-ünknek.

9. lépés: jelöljük ki az új layerünk első framjét, és nyissuk meg az 'Actions' palettát. Most jönnek az izgalmak. Az alábbi kódra lesz szükségünk:

//lekérdezzük a felhasználó gépének monitorfelbontását
xres = System.capabilities.screenResolutionX;
yres = System.capabilities.screenResolutionY;
//a pattern méreteinek megállapítása:
wdth = pattern._width;
hght = pattern._height;
//az előbbiekből a szükséges sokszorosítási szám x és y irányban*
xdb = Math.ceil(Math.floor(xres/wdth)/2);
ydb = Math.floor(yres/hght);
//eltüntetjük az eredeti 'pattern' mc-t**
pattern._visible = 0;
//a függőleges sokszorozásért felelős for ciklus***
for (i=0; i<ydb; i++) {
     duplicateMovieClip(pattern, "patterny"+i, i);
     this["patterny"+i]._y = -i*wdth;
     //a vízszintes sokszorozásért felelős for ciklus****
     for (j=0; j<xdb; j++) {
          //jobb oldalra sokszorozás
          this["patterny"+i].attachMovie("pattern_mc", "patternxa"+j, j);
          this["patterny"+i]["patternxa"+j]._x = (j+1)*wdth;
          //bal oldalra sokszorozás
          this["patterny"+i].attachMovie("pattern_mc", "patternxb"+j, 100+j);
          this["patterny"+i]["patternxb"+j]._x = -(j+1)*wdth;
     }
}

* mivel a végcélunk, hogy az egész mozi majdan a böngészőablak alsó közepéhez igazodjon, a sokszorozandó darabszámot y irányban a monitor felbontásának y adatából és a pattern méretének y hányadosából számoljuk. Ugyanígy járunk el az x irányú méterekkel is, azzal a különbséggel, hogy itt jobbra-balra fogunk sokszorosítani, tehát a szükséges sokszorozás száma itt a fele. (a Math.ceil és Math.floor biztosítják, hogy az osztásból származó töredékértékek (azaz a monitor szélei) is megkapják a maguk patternjét.)

**eltüntetjük a 'pattern' mc-t mert csak a duplikálás végett van jelen, de a duplikált elemekkel még egyebeket is fogunk csinálni, ezzel viszont nem, ezért ez nem kell.

***létrehozunk egy for ciklust, amely az előbb meghatározott ydb változónak megfelelően függőleges irányban duplikálja a 'pattern' mc-t (Mivel annak láthatóságát (_visible))kódból adtuk meg, ezért ez a duplikátumokra nem vonatkozik.)

****az előbbi for cikluson belül létrehozunk egy másik for ciklust, ami viszont a minden egyes eddig duplikált, "patterny"+i nevű példányhoz hozzácsatolja a Libraryből a pattern_mc ID nevű mc-t, jobb és bal irányban annyiszor, ahányszor azt az xdb változóban meghatároztuk

Mi a szösz is ez? Az első pár sort gondolom nem kell magyaráznom, a szükséges alapadatok lekérdezésáről van szó. Bizonyára feltűnt, hogy kiindulásként nem a Stage vízszintes és függőleges méreteit használjuk, hanem a monitor felbontását. Miért is? Egyrészről nem akartam a pattern sokszorozási folyamatát is beleilleszteni a - majd későbbiekben részletezett - böngészőablak méretének változását kezelő AS-be, másrészről pedig - ebből kifolyólag - a biztonság javára való tévedéssel e módszer a legkisebb keretrendszerrel, menüsorral rendelkező böngésző esetében is biztosítja, hogy a pattern teljes egészében fedi a látható területet - valójában az egész monitort. (Aki pedig böngészés közben változtat monitorfelbontást, az meg is érdemli, hogy ne jól jelenjen meg neki a lap. :) )

Ha most teszteljük böngészőben a mozit, láthatjuk, hogy a pattern szépen sokszorozódik (remélhetőleg csak a megfelelő mennyiségben :) ), de az eredeti 300*300-as méretünk nem alulra igazodik, hanem pontosan középre, így a háttér is 'fel van csúszva'.

10. lépés: Térjünk hát vissza a fő timeline-hoz, és most ott jelöljük ki az 'actions' layert, illetve nyissuk meg az Action palettát és írjuk a következőket:

Stage.align = "B";
Stage.scaleMode = "noScale";

A Stage.align fogja megszabni, hogy az swf eredeti befoglalótéglalapja 4 sarka és 4 oldalfelezője közül melyik igazodik a böngészőablak ugyanazon sarkához/oldalfelezőjéhez. Jelen esetben ez "B", ami azt jelenti, hogy 'bottom', azaz alulra. Értékei lehetnének még: "T", "L", "R", "TL", "TR", "BL", "BR", hogy melyik mit jelent, javaslom elolvasni a az MX Helpjében. (Megjegyzem ezt az értéket a HTML kódban is megadhatjuk salign=B, illetve param name=salign value=B formában.)

A Stage.scaleMode -ot ugyan már beállítottuk a HTML kódhoz az 2. lépésben, de gondoljunk azokra az élelmes fiatalokra is, akik kiguberálják majd a Temporaryból az swf-et és magában játszatják le, ők se maradjanak le az élményről.

Teszteljük a mozit, remélem mindenki megelégedésére rendesen működik az oldal.

 
     
 
 

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