ActionScripti õppematerjal

Vormid ja integratsioon andmebaasiga

XML (eXtensible Markup Language) on erinevate andmete struktureerimiseks mõeldud märgistuskeel. XMLi kunagisest põhieesmärgist – andmete kirjelduskeelest WWW rakenduste jaoks on välja kasvanud universaalse andmekirjeldus ning -edastus keele idee. Üha enam kasutatakse XMLi ärirakendustes süsteemi erinevate osade vahel informatsiooni vahetamiseks, samuti suhtlemiseks teiste süsteemidega. Kuna XML andmeid hoitakse tekstikujul, on neid lihtne vahetada paljude erinevate platvormide vahel taskuarvutist suurte serveriteni – tavaline tekstitöötlus on neile kõigile jõukohane.

XMLi saab Flashis ära kasutada mitmel moel – alates uudisesöödetest, kasutajahalduste, sisukordade ning isegi jututubadeni. Eeldan, et lugejal on piisavad teadmised XML-ist või suudab ta need teiste materjalide abil omandada, XMLi juhendit käesolev materjal ei korva.

Oletame, et veebilehel on Flashiga loodud menüü. Kui tahaksime seal midagi muuta, tuleks avada Macromedia Flash programm, vastav link muuta või lisada, seejärel kompileerida uus swf-fail ning see uuesti veebisaidile laadida.

Õnneks on olemas XML. Kasutame XMLi, et menüüstruktuuri defineerimiseks. Näitena on toodud menüü, mis võiks olla ühe informaatika eriala tudengi kodulehel.

Õpime:

Kuidas XML'i Flashis ära kasutada
Parameetritega funktsioonid praktikas
ActionScript MovieClip-sümboli sees

Näidetest fail menu.fla, menu.xml

Loome esmalt menüüfaili menu.xml:

<?xml version="1.0" encoding="iso-8859-1"?>
<lingikogu>
<link nimi="Esilehele" url="index.html"/>
<link nimi="Foto" url="#">
<alamLink nimi="Pildigalerii" url="pildid.html"/>
<alamLink nimi="Minu kaamera" url="a95.jpg"/>
</link>
<link nimi="Programmeerimine" url="#">
<alamLink nimi="XML" url="xml/index.html"/>
<alamLink nimi="Flash" url="flash/index.html"/>
</link>
<link nimi="3D disain" url="#">
<alamLink nimi="3DCanvas" url="3d/3dcanvas.html"/>
<alamLink nimi="POV-Ray" url="3d/povray.html"/>
</link>
<link nimi="Ülikool" url="http://www.tlu.ee"/>
</lingikogu>

Selle XML-dokumendi juurelemendiks on element "lingikogu". Kõik selle elemendid sees on selle alamelementideks. Tähele tasub panna, et element "link" võib olla ise menüüpunktiks või omada alamlinke (sellisel juhul on lingi URLina märgitud "#", mis ei vii hiirega klõpsates kuhugi). Linkimisel piiranguid pole, võib linkida nii samas kaustas või alamkaustas olevatele failidele või sootuks välislingile. Menüüpunkti alamlingid on tähistatud elemendina "alamLink". XML ei sea piiranguid elementide või atribuutide nimede kasutamises, oluline on hiljem õigesti viidata.

XML-faili lugemine ActionScripti abil

Peamine objekt XML-failiga manipuleerimiseks on Flashis spetsiaalne XML-objekt:

var lingidXML = new XML();

See lause loob uue XML-objekti ning omab paljusid meetodeid, seadistusi ja sündmusi.

XMLi meetodid
lingidXML.ignoreWhite = true; Muudab elemendid, mille ainsaks väärtuseks on tühik:
<element> </element>
kujule:
<element/>

lingidXML.load("links.xml"); Laeb failist XML-struktuuri.

lingidXML.onLoad = checkLoading; See sündmus kutsutakse välja XML faili laadimise ajal. Alles pärast faili laadimise lõppu saab objekti siseneda. Seda selleks, edasi tegutsetaks alles siis, kui kogu XML-fail on laetud, muidu oleks näha ainult tühi XML-fail.

function checkLoading(success){
if (success == true){
/*XML-töötlus siia*/
}
} See funktsioon sisaldab tingimust: kui checkLoading on tõene, siis alusta XML-failist saadud info töötlemist. Kasulik on laadida kõik vajalikud XML-failid esimesel kaadril.

if(success == true){
gotoAndPlay(2);
} Kui andmed on käes, hüppame teisele kaadrile.

**XMLi meetodid**
lingidXML.ignoreWhite = true;	Muudab elemendid, mille ainsaks väärtuseks on tühik: <element> </element> kujule: <element/>
lingidXML.load("links.xml");	Laeb failist XML-struktuuri.
lingidXML.onLoad = checkLoading;	See sündmus kutsutakse välja XML faili laadimise ajal. Alles pärast faili laadimise lõppu saab objekti siseneda. Seda selleks, edasi tegutsetaks alles siis, kui kogu XML-fail on laetud, muidu oleks näha ainult tühi XML-fail.
function checkLoading(success){ if (success == true){ /XML-töötlus siia/ } }	See funktsioon sisaldab tingimust: kui checkLoading on tõene, siis alusta XML-failist saadud info töötlemist. Kasulik on laadida kõik vajalikud XML-failid esimesel kaadril.
if(success == true){ gotoAndPlay(2); }	Kui andmed on käes, hüppame teisele kaadrile.

Kuidas nüüd aga XML-objektis olevatele andmetele ligi pääseda? Tähele tasub panna, et enam ei tegele me XML-failidega vaid Flashi loodud XML-objektiga. Pääsemaks ligi atribuudi väärtusele elemendis:

<link nimi="Ülikool" url="http://www.tlu.ee"/>

kirjutame:

trace (aNode.attributes.nimi);

Väljastakse: "Ülikool"

Meie näiteks on kogu info toodud elementide atribuutidena, kui aga peaks väljastama atribuudi enda väärtust:

<koduloom liik="kass">Miisu</koduloom>

trace (aNode.nodeValue);

Annab väärtuseks "Miisu".

Järgnevalt vajame Flashi faili. Loome pikliku paneeli, muutes selleks vastavalt lava suurust.
Loome MovieClip-tüüpi sümboli, millele paneme nimeks lingiKast. Sümbol peaks sisaldama ühe dünaamilise tekstikasti, mille nimeks lingiTekst.
Lohistame vastloodud sümboli lingiKast stseenile, kuid mitte lavale, vaid sellest eemale ning paneme instantsile nimeks baasLink. See on vajalik sellepärast, et hiljem hakkame ActionScripti abil sellest uusi sümboleid dubleerima, kuid me ei soovi, et baassümbol ise nähtavale kohale segama jääks.
Kuigi ka vastloodud MovieClip-sümbol lingiKast hakkab sisaldama ActionScripti koodi, kirjutame esmalt koodi stseenile. Nagu tavaks saanud, uuele kihile.
Esmalt defineerime paar muutujat, algväärtustades dubleeritavate MovieClip-sümbolite positsiooni ning duplikaatideloenduri:
```
var yPos:Number = 20;
var dubLoendur:Number = 1;
var aLink:String;
```

Kirjutame ära ka juba eelnevalt selgitatud XML-faili laadimise:

var linksXML = new XML();
linksXML.ignoreWhite = true;
linksXML.load("menu.xml");
linksXML.onLoad = checkLoading;

Järgnevalt asume juba tõtakalt selle kallale, mis peaks juhtuma siis, kui XML-fail on edukalt laetud ning paneme kirja, mida saadud infoga peale peaks hakkama.
```
function checkLoading(success) {
	if (success == true) {
		var juurElement = linksXML.firstChild;
		var kokku = juurElement.childNodes.length;
```

Lugemist alustatakse esimesest elemendist (juurElement) ning loetakse kokku alamelemendite arv. Seejärel hakatakse tegutsema juba iga elemendiga üksikult. for-tsüklid saadavad parameetritena tulevase objekti nime ning sisu (muutuja tnLink, mis ei kujuta endast muud kui vastavat rida XML-koodist) allpool kirjeldatud funktsioonile looLink.

			var tLink = juurElement.firstChild;
			for (i=0;i<kokku;i++) {
				looLink("tLink" + i, tLink);
				var lasteArv = tLink.childNodes.length;
				var tnLink = tLink.firstChild;
				for (j=0;j<lapsteArv; j++){
					looLink("tnLink" + j + ""+ i, tnLink);
					tnLink = tnLink.nextSibling;
				}
				tLink = tLink.nextSibling;
			}
			gotoAndStop(2);
		}
}

Funktsioon looLink dubleerib igast link-elemendist baasLink-sarnase MovieClip-sümboli, mis saab nimeks uusObj väärtuse (näiteks tnlink13, sellise nime saab link Pov-Ray'le). Funktsiooni eval() ülesandeks on Flashis viidata dünaamiliselt loodud objektile või MovieClip-sümbolile.

Iga järgnev MovieClip-sümbol liigutatakse 30 pikslit allapoole.

function looLink(uusObj, aNode){
			duplicateMovieClip(_root.baasLink, uusObj, dubLoendur++);
			var tcl = eval(uusObj);
tcl.aLink = aNode.attributes.url;
			yPos +=30
			if (aNode.nodeName == "link"){
				setName(tcl, aNode.attributes.nimi, 1);
				tcl._x = 50;
			}else{
				setName(tcl, aNode.attributes.nimi, 0.95);
				tcl._x = 60;
			}
			tcl._y = yPos;
		}

gotoAndStop(1);

Funktsioon setName() seab objektidele parameetriteks kõrguse, laiuse (need arvutatakse koefitsendi järgi, mis tuleb eelnevast if-tingimusest) ning lingi nime.

function setName(obj, nimi, suurus){
			obj._height = obj._height*suurus;
			obj._width = obj._width*suurus;
			obj.TextLink.lingiNimi.text = nimi;
			obj.embedFonts = true;	
}

Põhimõtteliselt meie rakendus juba töötabki, veel on vaid tarvis panna hiireklõps lingil ka soovitud aadressile minema. Silmailu mõttes lisame MovieClip-sümbolile veel ka lahenduse, mis näitaks hiirekursoriga osutatava lingi kõrval väikest noolekest. Kui varem oli sümbolil lingiKast vaid üks kiht, siis nüüd teeme neid kolm tükki juurde lisaks.
Ühe vastloodud kihi teisele kaadrile paigutame graafilise sümboli nooleke, mille võib oma maitse järgi kujundada. Lohistame selle vasakule, sümboli lingiKast ette.
Järgmised kaks kihti on ActionScipti tarvis. Esimese kihi esimesele kaadrile kirjutame skripti, mille mõjuala ulatuks ka teisele kaadrile:
```
onRelease = function () {
			getURL(aLink, "_top");
}
```
Nagu koodist lugeda võib, liigutakse hiirenupu vabastamisel etteantud URL-ile. Funktsiooniga getURL() puutusime esmakordselt kokku juba eelmises harjutusülesandes, kus toimus andmete välja saatmine Flash rakendusest.
Teise ActionScipti kihi eesmärgiks on näidata noolekest lingi ees, millel hiirega peatume. Ilma selle funktsioonita piisaks ka teistel selle MovieClip-sümboli kihtidel vaid ühest kaadrist.

1. kaadri kood:

this.onRollOver = function () {
  			gotoAndPlay(2);
}
stop();

2. kaadri kood:

this.onRollOut = function () {
			gotoAndPlay(1);
}
this.onDragOut = function() {
			gotoAndPlay(1);
}
stop();

Ilma sündmuseohjurita onDragOut jääksid hooletul hiire kasutamisel, kus kasutaja klõpsab lingil ning sellest allhoitud hiireklahviga üle sõidab, nooled ette ja need ei kaoks sealt enam ära.

Olemegi loonud toimiva, XML-i kasutava lahenduse. Sarnaselt, olles eelnevalt uurinud kasutatava XML-faili struktuuri, saab luua mitmeid erinevaid rakendusi, sh uudisteloendit või muid andmeid kuvava rakenduse.

Tagasi sirvima