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




 
 
SEGÉDLETEK Effektus-trükk

Panorámakép előkészítése és programozása Flash-ben
  feltöltve: 2004.10.18 | szerző: ismeretlen | olvasva: 14242 alkalommal

 
 

Panorámaképet, ahogyan az a legtöbbször előfordul, akár ingyenesen beszerezhető java programokkal is megjeleníthetünk, de Flash-ben elkészítve teljes Flash oldalakba is beágyazhatjuk és ahogy azt látni fogjuk, nem is olyan bonyolult az elkészítése.

2002.10.20. by Lakatos Norbert // a szerző jelenleg nics regisztrálva honlapon így nem tudtuk a nevéhez rendelni a segédletet.

Néhány szó a panorámaképekről

Panorámaképet már egy egyszerű, kis felbontású digitális fényképezőgép segítségével és egy speciális, a képek összeillesztésére (image stitching) alkalmas szoftver segítségével is készíthetünk. A képek elkészítésénél ügyeljünk arra, hogy azok 50%-ban fedjék egymást, ahogy az 1. ábrán is látható, hiszen így kapjuk meg a 2. ábrához hasonló képet. Körülbelül 20 db képre lesz szükségünk egy teljes, 360%-os kép elkészítéséhez. Ezután illesszük őket. Fontos az összefűzés módszere, hiszen egy egyszerű illesztgetéssel végeredményként egy torz panorámát fogunk kapni. Sajnos az Interneten rengeteg rossz példával találkozhatunk.


1. ábra


2. ábra

Mivel most a hangsúly a flash megjelenítőn van, a panorámakép elkészítését nem kívánom jobban részletezni. Ha valakit mélyebben érdekel a téma, annak ajánlom a Panoguide.com oldalt. Ezen az oldalon segítséget kapunk az összeillesztő program kiválasztásában is.

Előkészületek

Egy panorámakép akkor tökéletes, ha az összeillesztés során nem, vagy csak kevés és nem feltünő szellemképek keletkeznek, illetve a kép két vége tökéletesen illeszthető egymáshoz. A példában használt képet Csongrádon, a Körös-torokban készítettem. A kép mérete 2308 x 200 pixel (3. ábra).


3. ábra

Tegyük fel, hogy 400 x 200 pixel a panoráma megjelenített mérete. Ahhoz, hogy ezt a képet megjelenítsük flashben, módosítsunk még rajta egy keveset. Nyissuk meg kedvenc képszerkesztőnkben. Változtassuk meg a kép méretét vízszintes irányban 400 pixellel úgy, hogy a jobb oldalon egy üres terület keletkezzen. Ne nyújtsuk (resize) a képet, hanem a méretét növeljük (canvas size)! Ezután a bal oldali részéből jelöljünk ki egy 400 x 200 pixel méretű részt, azt mentsük a vágólapra, majd a vágólapról illesszük be az előbb keletkezett jobb oldali területre. (4. ábra) Tehát a most létrejött 2708 x 200 pixel méretű képnek a bal és a jobb oldali végén található 400 pixelnyi széles terület megegyezik. Majd később meglátjuk, miért is volt szükség erre.


4. ábra

Ez a kép megtalálható a mellékelt zip fájlban koros-torok.jpg néven.

Most rajzoljunk egy nekünk tetsző keretet, amelyben a panorámakép látható lesz. Ez a kép legyen 400 x 200 pixel méretű, a keret szélessége pedig lehetőleg ne takarjon túl sokat a képből (5. ábra). A képet átlátszó gif formátumba mentsük!


5. ábra

Az általam készített keret megtalálható a mellékelt zip fájlban keret.gif néven.
A flash objektumok létrehozása, elhelyezése

Indítsuk el a flasht és kezdjük meg az "igazi" munkát!

A jelenet tulajdonságaiban állítsuk be a következő paramétereket:

Width: 400 pixel
Height: 200 pixel
Frame Rate: 25 fps

A Layer 1-et nevezzük át "keret"-re, majd importáljuk be a keret.gif képet. Ezután a teljes jelenethez viszonyítva helyezzük el vízszintesen és függőlegesen középre (6. ábra).


6. ábra

Hozzunk létre egy új réteget, helyezzük át a "keret" layer alá és nevezzük el "kep"-nek.

Hozzunk létre egy új objektumot (Ctrl+F8). Nevezzük el "kep"-nek, a típusának pedig adjuk a "Movie Clip"-et. A létrehozás után alapértelmezésben ebben az objektumban találjuk magunkat. Importáljuk be ide a panorámaképünket. A beillesztés után, alapértelmezettként ki is van jelölve a kép. Mivel a flash átméretezi a képet, ezért a tulajdonságokban adjuk meg neki a kép eredeti méretét (7. ábra).


7. ábra

Ezután a 8. ábrán látható módon, helyezzük el a képet a "kep" objektumon belül függőlegesen középre és vízszintesen balra zárva.


8. ábra

Menjünk vissza a fő jelenet szerkesztőjébe.

Jelöljük ki a "kep" layert és a Library-ból (Ctrl+L) dobjuk be a jelenetbe a "kep" objektumunkat, majd ahogy a 8. ábrán is volt, ezt is függőlegesen középre és vízszintesen balra zárjuk. A tulajdonságokban az Instance name-nek adjuk a "kep"-et! Ha minden jól ment, a 9. ábrán látható eredményt láthatjuk.


9. ábra

Most látszik a keretünk és alatta a teljes panoráma. Hozzunk létre egy maszkot a képhez úgy, hogy csak a szükséges rész látszódjon.


Az ActionScriptek megírása

Hozzunk létre egy új layert az utasításoknak és nevezzük el "utasitasok"-nak. Hozzunk létre még egy kulcskockát (F6), a többi layeren pedig egy-egy kockát (F5), ahogy a 10. ábra mutatja.


10. ábra

Az első kulcskockát jelöljük ki és kezdjük meg az ActionScript megírását.

A kép aszerint fog mozogni, hogy az egerünket a kép melyik részére toljuk és milyen messze a kép középpontjától és természetesen milyen irányba. Először is ellenőrizzük, hogy az egér mutatója egyáltalán a kép területére esik-e. Ebben a példában ez teljesen felesleges, mivel a panoráma a teljes területet kitölti, de később egy komplexebb alkalmazásnál hasznos lehet. Ahogy az jól látszik a forrásban, a "scroll" változó értéke akkor lesz IGAZ, ha az egérmutató x koordinátája 0 és 400, az y koordinátája pedig 0 és 200 közé esik. Ellenkező esetben ez a változó értéke HAMIS.


// benne van a mezőben

if ((_xmouse>0) & (_xmouse<400) & (_ymouse>0) & (_ymouse<200))

	{

	scroll=TRUE;

	}

else

	{

	scroll=FALSE;

	}

                  

A forgás működése egyszerű. A képet vízszintes irányban eltoljuk, azaz az x koordinátáját változtatjuk attól függően, hogy balra vagy jobbra fordulunk. Ha balra fordulunk, akkor a képet jobbra toljuk, tehát növeljük az x koordináta értékét, ha jobbra fordulunk, akkor a képet balra toljuk, tehát csökkentjük az x koordináta értékét.

A jelenet közepén megjelölünk egy területet, ami semleges lesz, tehát az egérmutató ha erre a területre érkezik, akkor nincs mozgás. Ez legyen 190 és 210 között.

Ha az egérmutató x koordináta értéke tehát nagyobb, mint 210, akkor elindul a mozgás. Hogy elegánsabbá tegyük a mozgatást, vizsgáljuk azt is, hogy mennyivel toltuk el 210-től. Így minél jobban közelítünk a kép széle felé (azaz minél jobban távolodunk 210-től), annál nagyobb értékekkel mozgatjuk el a képet, azaz annál gyorsabban fogunk "forogni". (A másik irányba ugyanaz a logika, csak a 190-es érték alapján.)

A forrás önmagáért beszél:


// jobbra pörgetés

if (scroll==TRUE)

		{

		if (_xmouse>210)

			{

			eltolodas=(_xmouse-210)/5;

			kep._x=kep._x-eltolodas;

			}

		}





// balra pörgetés

if (scroll==TRUE)

		{

		if (_xmouse<190)

			{

			eltolodas=(_xmouse-190)/5;

			kep._x=kep._x-eltolodas;

			}

		}

                  

Most már tudjuk mozgatni a képet, viszont ki is tudjuk tolni a képből.

Induláskor a kép bal oldali széle jelenik meg, az x koordináta értéke 0. Ha elkezdünk jobbra fordulni, azaz balra tolni a képet, addig jó lesz, amíg az x koordináta el nem éri a -2308-at, hiszen ez az utolsó eset, amikor teljesen kitölti a 400 pixel széles területet. Ha mégis tovább akarunk fordulni, akkor előről kell kezdenünk a megjelenítést, azaz vissza kell állítanunk az x koordináta értékét 0-ra. hasonló a helyzet a balra fordulásnál, azaz a kép jobbra tolásánál is. Ha nagyobb az x koordináta értéke 0-nál, állítsuk át -2308-ra.

A forrás alapján talán érthetőbb:


// kép váltás

if (kep._x<-2308)

	{

	kep._x=0;

	}

if (kep._x>0)

	{

	kep._x=-2308;

	}

                  

Most már látjuk, hogy miért volt szükség az elején átszerkeszteni a képet úgy, hogy kétszer szerepeljen benne egy 400 pixel széles rész (2708-400=2308). Persze más megoldás is lehetséges, de szerintem ez a leggyorsabb és legegyszerűbb. Viszont ebben az esetben, ha később módosítani akarjuk a megjelenített panoráma szélességét, már csak maximum 400 pixel széles területet jeleníthetünk meg.

Ennyi lett volna a panorámakép megjelenítésének a lényeges része. Most az "utasitasok" layer második kulcskockájában utasítsuk a flash movie-t ismétlésre:


gotoAndPlay(1);

                  

Végezetül

Most már hátradőlhetünk és élvezhetjük munkánk gyümölcsét:


A kész flash

Remélem tudtam segíteni ezzel az egyszerű, de mégis látványos példával. Az ebből létrehozott swf fájl-t később egy nagyobb flash movie-ba illeszthetjük, akár menüből kiválasztva, hogy melyik panorámát jelenítse meg a sok közül. A kép mérete eléggé megnöveli a flash movie méretét, ezért érdemes még egy betöltés trükköt is alkalmazni.

Jó munkát mindenkinek!

 
 
 
 

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