2013. december 2., hétfő

Flash programozás 2.

Feladat:


Az alábbi alkalmazást kell elkészítenünk:

A mozi közepén képek jelenjenek meg 2 másodperces időközönként, a képeket az alkalmazás egy adott mappából vegye XML állományban megadott paraméterek, elérési utak felhasználásával.


A képek mappája legyen az alkalmazás helyének mappájában egy „pic” nevű mappa, amely az alábbi képeket tartalmazza (pic1.jpg, pic2.jpg, …, pic6.jpg):




Készítsük el azt az XML adatfájlt, amely a Flash applikáció számára tartalmazni fogja a képek alapvető adatait: elérési út, a vetítés képváltásának ideje másodpercekben:

<?xml version="1.0" encoding="utf-8" ?>
<slideshow speed="2">
<pic url="pic/pic1.jpg" />
<pic url="pic/pic2.jpg" />
<pic url="pic/pic3.jpg" />
<pic url="pic/pic4.jpg" />
<pic url="pic/pic5.jpg" />
<pic url="pic/pic6.jpg" />
</slideshow>


A fájlt mentsük el slideshow.xml néven.
Az alkalmazás főkönyvtárában eddig egy „pic” almappa benne a képekkel, és a slideshow.xml fájl van.
Ebbe a mappába érdemes létrehozni az fla, majd fordítás után az swf kiterjesztésű alkalmazás állományokat.

Lássunk neki!
Fájl/New/ActionScript 3 , a mozi legyen 550X400 pixel méretű.


Grafikusan egyetlen feladatunk van, létre kell hoznunk a színpad közepén egy MovieClipet, amelybe a képeket tölthetjük be a képfájlokból.
Alapértelmezés szerint a Rectangle Tool egy színtelen téglalapot rajzol, ami akkor látszik, ha rákattintva kijelöljük, célszerű ezért a rajzolás előtt, vagy kijelölés után színt választanunk a téglalapnak.


Készítsünk a téglalapból MovieClip-et, amely már objektumpéldány, azaz rendelhetünk hozzá paramétereket és nagyon sokféle metódust (eljárást).
A téglalapon nyomjunk jobb egeret és „Convert to Symbol”, majd adjuk a „box” nevet és OK.
Ügyeljünk rá, hogy a névadás alatt lévő típus a MovieClip legyen.
A MovieClip objektumot szintén a boksz néven példányosítsuk az instance name megadásával:


Szúrjunk be egy új réteget, amelyre beilleszthetjük az Actionscript kódot.
Az alapértelmezésben létrejött Layer 1 rétegen jobb egér és: Insert Layer, nevezzük ár AS3-ra. Az AS3 réteg első kulcskockáján jobb egér és „Actions”. A kódszerkesztőben is vagyunk.


Az alkalmazásnak egyetlen eseménye lesz, az idő múlása. Így az időzítő állapotaihoz kell az eljárásokat kötnünk. Meg kell oldanunk a képek betöltését és megjelenítését. Szkript nélkül a lefordított alkalmazásban csak egy szürke téglalapot fogunk látni a képernyő közepén.
Innen kezdve csak a szkripttel foglalkozunk, a grafikus felületen több dolgunk nincs.




Ezután meg kell tudnunk a grafikusan létrehozott MovieClip méretét, mert ebben a méretben kell megjelenítenünk a képeket.
Ehhez létrehozunk egy-egy változót a szélesség (x) és magasság (y) tárolására és azt mondjuk a Flashnek, hogy ez a két változó vegye fel a MovieClip szélességének és magasságának értékét, az értékadás egyszerűen = jel alkalmazásával történik:



Az alkalmazáshoz szükséges további változók létrehozása:


Az előkészületekhez hozzá tartozott a képek adatainak (név, elérési út) betöltése. Az adatok betöltése is egy esemény, amelynek végeztével meghatározzuk, hogy ha ez befejeződik, akkor induljon el a processXML eljárás. Az előző ábrán látható, hogy az Event.Complet bekövetkezésekor indul a processXML.
A változók meghatározása és az előkészületek (pl. képek adatainak betöltése) után az eljárások megírása következik. Az eljárásokat (függvényeket) a „function” szó vezeti be.
Vegyük észre, hogy egy eljárás könnyen használ magán belül egy másik (helyen megírt) eljárást és a paraméterek könnyen átadhatók és átvehetők.



Az eljárásokról:

Az ábrán lekövethető, hogy a ProcessXML eljárás beolvassa az xml fájl „speed” értékét és beteszi a „my_speed” változóba, beolvassa az XML fájl „pic” értékét, ami egy elérés út és beteszi a „my_images” változóba, ami XML lista típusú.
A „my_total” változóba ennek a listának a hossza kerül, ha tehát az XML-ben 6 képet helyeztünk el, akkor ennek értéke 6 lesz.

A loadImages eljárás felel a képek betöltéséért. Egy ciklusban, amely addig ismétlődik, amíg kép van, azaz 0-tól my_total-ig.
Betölti az összes képet a tomb nevű tömbbe, sőt a tovabb eljárással le is ellenőrzi, hogy mindegyik betöltődött-e.

Ha az összes kép betöltődött, a tovabb eljárás a StartShow eljárás indításával megjeleníti a képeket. A StartShow eljárás várakoztat 2 másodpercet, majd kezdeményezi a következő kép megjelenítését a nextimage eljárással. Előtte még a lejatszo_ellenor eljárással leellenőrzi, hogy a megjelenített kép az utolsó-e. Ha az utolsó, akkor a lejatszoszamlalo értékét 0-ra állítja, így biztosítva azt, hogy az utolsó kép után az első vetítésével folytatódjon a működés. Ha nem az utolsó képről van szó, akkor a lejatszo_szamlalo érétke 1-gyel növekszik.

Ami magyarázatra szorulhat:

var

A var kulcsszóval lefoglalunk egy helyet a memóriában adat(ok) tárolására és elnevezzük, hogy a memóriahelyet a gép megtalálja, pl.:
var my_speed:Number
Lefoglalunk egy my_speed nevű helyet a memóriában, ami szám (Number) tárolására lesz. A : után a változó (memóriahely) típusát szoktuk megadni, amivel a memóriahely nagyságát szabályozhatjuk.
Pl. a sztring típusnak vagy az XMLList típusnak több hely kell, mint a számnak. Látható, hogy Timer típus is van.
Van saját típus is, a típust rugalmasan változtathatjuk.
A változóknak kezdőérték is adható:
var tomb_szamlalo:Number = 0
vagy
var xBox = box.width

Az objektumokat általában a new kulcsszóval hozzuk létre, ha még nem léteznek.
var myLoader = Loader ( tomb [lejatszo_szamlalo])
Az objektumoknak már saját metódusaik is vannak, ilyen pl. az addchild:
box.addChild ( myLoader )
Az objektumpéldányok eljárásaihoz a . kötőelemmel juthatunk el:
var myLoader = new Loader
myLoader.load ( new URLRequest (myURL))
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, tovabb)


Rengeteg beépített objektumtípus van, aminek előre gyártott attribútumai (paraméterei) és eljárásai (metódusai) vannak.