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




 
 
SEGÉDLETEK ActionScript alapok

Képmérethez igazodó galéria Drawing API-val
  feltöltve: 2005.04.18 | szerző: roy.t | olvasva: 13277 alkalommal

 
 

Egy egyszerű képgalériát fogunk elkészíteni, amiben a betöltött kép kerete ruganyosan igazodik a képmérethez. Persze a képek helyett mást is be lehet tölteni, ez már csak ízlés és szükség kérdése.

De lássuk mi is lesz a végeredmény:

Grafika, előkészületek:

Először is készítsük elő a képeket, tegyük őket egy 'kepek' mappába! Lehetőleg a képek mérete legyen kisebb, mint a leendő mozink mérete.. csak gondoltam szólok.. (:

Flash:

Kezdésnek nyissunk meg egy új mozit, legyen mondjuk 600x400-as, az fps legyen lehetőleg 24, vagy inkább nagyobb.

4 rétegre lesz szükségünk a főmoziban (én legalábbis annyit használtam), 'keret', 'kep', 'gombok', 'tolto':

A 'tolto' rétegen rajzoljunk egy 100x10 pixeles (fekete) téglalapot, majd alakítsuk moziklippé, instance nevet is adjunk neki: 'tolto'.

A 'gombok' rétegen legyenek a gombok, a 'kep' rétegre egy üres, vagy átlátszó MC kerül (ne az MC alfája legyen 0, hanem a benne lévő alakzaté), 'kep' instance névvel. Ide tölti be a képet. Én még erre a rétegre pakoltam a kisképeket is, de ez már magánügy.. (:

A 'keret' rétegen van a lényeg, ide jön (a szabadon megrajzolt statikus kereten kívül) egy moziklipp (instance: 'keret'), ami egy üres mozklipp 8 példányát tartalmazza. Az üres moziklippek a leendő mozgó keret sarkainál, illetve az oldalai felezőpontjainál vannak, a 'keret' MC regisztrációs pontja a középpontban van.

A sarkokon lévő üres moziklippek instance nevei (a bal felsőtől kezdve, óramutatóval megegyező irányban): 's1', 's2', 's3', 's4', az oldalaknál lévő MC-k nevei (felsőtől kezdve): 'o1', 'o2', 'o3', 'o4'.

Ebben a moziklippben 2 rétegre van szükség, 'akciok' (ide jön majd a szkript) és 'sarkok':

Action Script:

A célunk az, hogy a 8 segédMC ('s1'-'s4','o1'-'o4') segítségével mozgassunk egy, a Drawing Api-val rajzolt alakzatot. A Drawing Api használatának alapjait caber_net segédletéből lehet megtanulni.

A keret belső oldalai olyan Bezier-görbék, amik az 's1','s2','s3','s4' pontokat kötik össze, a kontrollpontok pedig az 'o1'-'o4' pontok. A külső oldalak 5 pont távolságra lesznek a belsőktől, így a határoló görbék a belső görbék koordinátáinál 5-tel kisebbek/nagyobbak lesznek:

A 'keret' MC első kockájára kerül a script:

//a keret sebessége (minél kisebb, annál gyorsabb) > 1
seb = 2;
//a keret sarkainak a rugalmassága (itt is a kisebb a rugalmasabb) > 1
rug1 = 1.5;
//a keret oldalainak a rugalmassága > 1
rug2 = 1.3;
//a keret sarkainak kezdokoordinátái
xhol1 = 150;
yhol1 = 100;
//a keret oldalainak kezdokoordinátái
xhol2 = 150;
yhol2 = 100;
//a kezdo méret (most a töltocsík paramétereit adjuk meg, mivel kezdéskor is tölt)
szeles = 100;
magas = 10;
xmozgas1 = 0;
ymozgas1 = 0;
xmozgas2 = 0;
ymozgas2 = 0;
//a 'toltes' értéke 1, ha a kép töltése jön, 2, ha már elkezdtre betölteni, 0, ha betöltodött
toltes = 1;
_parent.tolto._width = 0;
_parent.kep._alpha = 0;
//csinálunk egy üres moziklippet a keretnek
this.createEmptyMovieClip("keret");
function tolt(mit) {
this.onEnterFrame = function() {
//ha a keret mérete 1 tizedes pontossággal megegyezik a kívánt mérettel és ha a 'toltes' változó 1, akkor elkezdi betölteni a képet
if (Math.round(xhol1*10) == szeles*5 and Math.round(xhol2*10) == szeles*5) {
if (toltes == 1) {
_parent.kep.loadMovie("kepek/"+mit);
toltes = 2;
} else {
if (toltes == 2) {
if (_parent.tolto._width == 100) {
//a töltocsík eltüntetése
if (_parent.tolto._alpha>0) {
_parent.tolto._alpha -= 10;
} else {
toltes = 0;
_parent.tolto._width = 0;
_parent.tolto._alpha = 100;
//a kép adatainak lekérdezése
szeles = _parent.kep._width;
magas = _parent.kep._height;
}
} else {
szazalek = _parent.kep.getBytesLoaded()/_parent.kep.getBytesTotal();
_parent.tolto._width = szazalek*100;
}
} else {
//a kép középre igazítása, a 360 és a 210 a keret középpontjának koordinátái
_parent.kep._x = 360-szeles/2;
_parent.kep._y = 210-magas/2;
_parent.kep._alpha = 100;
//végeztünk, töröljük az onEnterFrame-t
delete this.onEnterFrame;
}
}
} else {
//a keret mérethez igazítása
xtav1 = xhol1-szeles/2;
ytav1 = yhol1-magas/2;
xtav2 = xhol2-szeles/2;
ytav2 = yhol2-magas/2;
xmozgas1 = (xmozgas1-xtav1/seb)/rug1;
ymozgas1 = (ymozgas1-ytav1/seb)/rug1;
xmozgas2 = (xmozgas2-xtav2/seb)/rug2;
ymozgas2 = (ymozgas2-ytav2/seb)/rug2;
xhol1 += xmozgas1;
yhol1 += ymozgas1;
xhol2 += xmozgas2;
yhol2 += ymozgas2;
s1._x = Math.round(-xhol1);
s1._y = Math.round(-yhol1);
s2._x = Math.round(xhol1);
s2._y = Math.round(-yhol1);
s3._x = Math.round(xhol1);
s3._y = Math.round(yhol1);
s4._x = Math.round(-xhol1);
s4._y = Math.round(yhol1);
o1._y = Math.round(-yhol2);
o2._x = Math.round(xhol2);
o3._y = Math.round(yhol2);
o4._x = Math.round(-xhol2);
}
//a keret megrajzolása
with ("keret") {
clear();
lineStyle(1, 0x000000, 0);
moveTo(s1._x, s1._y);
beginFill(0x0099cc, 100);
curveTo(o1._x, o1._y, s2._x, s2._y);
curveTo(o2._x, o2._y, s3._x, s3._y);
curveTo(o3._x, o3._y, s4._x, s4._y);
curveTo(o4._x, o4._y, s1._x, s1._y);
moveTo(s1._x-5, s1._y-5);
curveTo(o1._x, o1._y-5, s2._x+5, s2._y-5);
curveTo(o2._x+5, o2._y, s3._x+5, s3._y+5);
curveTo(o3._x, o3._y+5, s4._x-5, s4._y+5);
curveTo(o4._x-5, o4._y, s1._x-5, s1._y-5);
moveTo(s1._x, s1._y);
endFill();
}
};
}
tolt("kep1.jpg");
stop();

A gombokon a következő szkript:

on (press) {
 //a 'kép1' helyére írjuk be a betöltendő képünk nevét
 keret.tolt("kep1.jpg");
 keret.toltes = 1;
 keret.szeles = 100;
 keret.magas = 10;
 kep._alpha = 0;
}

Meg is volnánk! (:

 
 
 
 

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