Samenvatting: Actionscript 3.0

Creative ProgrammingActionscript IntroductieWatiseenvariabele?

Eenvariabeleiseenplaatsinhetgeheugendieeenbepaaldewaardebevat.Dezewaardekan

veranderen7jdenshetrunnenvanhetprogramma.Iederevariabelehee<eendatatype.Het

datatypebepaaltwelkewaardeeenvariabelekanbeva?en.

vb:var mijnVariabele:String;

• var:aangevendateenvariabeleis

• mijnVariabele:denaamvanjevariabele

• String:hetdatatype

Naamgevingvanvariabelen

• Ac7onscript3.0iscase‐sensi7ve

• Enkelle?ers,cijfers,_en$mogengebruiktworden

• Hetmagnietstartenmeteengetal

• Hetmaggeenkeywordzijn(vb.trace)

• Hetmoetuniekzijn

• Gebruikcamelcasenota7on

Datatypes

• String:voortekst

• Boolean:waarofnietwaar

• int:gehelegetallen(posi7efennega7ef)

• uint:gehelegetallen(enkelposi7ef)

• Number:decimalegetallen(posi7efennega7ef)

Hoegebeurteenconversienaareenanderdatatype?

var getal:uint;

getal = “5”

getal = uint(“5”);

Eenvariabelebereiken

• Eenvariabelekanpasaangesprokenwordennadeclara7e

• Daarnaishijgekendopalleframesvande7jdslijn

• Ople?enmetvariabeleninMovieClips

Operatoren en expressiesWiskundigeoperatoren

• +optellen

• ‐a<rekken

• *vermenigvuldigen

• /delen

• %modulo(restdeling)

• ()gebruikvanhaakjesgee<voorrang

Stringoperatoren

var deelEen:String = “Creative”;

var deelTwee:String = “Programming”;

var deelDrie:String = “1”;

var totaal:String = deelEen + deelTwee + deelDrie;

trace(totaal);

Andereoperatoren

• Vergelijkingsoperatoren

• Booleaanseoperatoren

Expressies

Expressieszijnuitdrukkingendieeenbepaaldewaardeopleveren.

• eenconstante

• eenvariabele

• resultaatvanbewerking

• resultaatvaneenfunc7e

Werken met proportiesOOP

• OOP=ObjectOrientedProgramming

• Ac7onscriptiseenOOPtaal.

• Allesiseenobjecteneenobjectiseeninstan7evaneenklasse.

• Allesiseenobjectenobjectenhebben:

• Propor7es(eigenschappen)

• Methods(taken)

• Events(gebeurtenissen)

Eenconcreetvoorbeeld…

• Eenstudent:

• Propor7es:naam,lengte,schoenmaat,…

•Methods:eten,slapen,studeren,…

• Events:wakkerwordenalsdewekkerafloopt

Teonthouden!

Propor7eskunneningesteldwordenopobjecten.

bal.width = 100;

bal.height = 100;

ControlestructurenCondi7onals

• (something==wZ)isgelijkaan

• (some7ng!=wZ)isnietgelijkaan

• (something>wZ)isgroterdan

• (something<wZ)iskleinerdan

• (something<=wZ)iskleinerofgelijkaan

• (something>=wZ)iskleinerdan

• (a==b&&a==c)aenbmoetengelijkzijnENaencmoetengelijkzijn

• (a==b||a==c)aenbmoetengelijkzijnOFaencmoetengelijkzijn

• (!a==b)aenbmoetenNIETgelijkzijn

var color:String= “blue”;

if(color == “blue”)

{

//believe whatever you want to believe

}

else if(color == “red”)

{

//see how deep the rabbit-hole goes

}

else if(color == “green”)

{

//dance in the grass

}

else if(color == “yellow”)

{

//eat an ice cream

}

Tweemogelijkhedenomwaardentecontroleren

• ifenelsestructuur

• switch

Math// willekeurig getal tusen 0 en 1

var a:Number = Math.random();

Tween// tween maken

var testTween:Tween = new Tween(obj:Object, prop:String,

func:Function, begin:Number, finish:Number, duration:Number,

useSeconds:Boolean = false)

• obj:tetweenenobject(meestaleenmovieClip)

• prop:eigenschapvanobjectdatjewiltweenen(vb.alpha‐waarde)

• func:anima7efunc7e(veranderinginsnelheidanima7e)

• begin:startwaardevandeeigenschap

• finish:eindwaardevandeeigenschap

• dura7on:de7jddatdeanima7eduurtinframesofseconden

• useSeconds:dedura7oninseconden(true)offrames(false)

Detweenclass&Noneclasszijngeenclassesuitdedefaultpackage!

FunctiesWatiseenfunc7e?

Eenfunc7eiseenblokcodedathergebruiktkanworden.Hetkanaldannieteenwaardeterug

geven: return. Eenfunc7ekanaldannietbepaaldeparametersbeva?en.

vb. function test(a:String, b:uint):void.

Standaardfunc7es

trace(), isNan(), gotoAndPlay(), gotoAndStop(), substring(),

startDrag(), stopDrag(), hitTestObject(), …

Zelfeenfunc7eschrijven…

/**

Deze tekst beschrijft de functie naamVanDeFunctie() method.

*

* @param a beschrijf hier a

* @param b beschrijf hier b

*

@return beschrijf hier de terugkerende waarde

**/

function naamVanDeFunctie(a:type, b:type):terugkerendewaarde

{

// code binnen de functie

}

• Webeginnenmethetkeyword:func7on

• Dandenaamvandefunc7e:startSpel()

• Eventueelparamatersingeven:a:String

• Hetdatatypevandeterugkerendewaardebepalen::String

• voidgebruikenindienergeenterugkerendewaardeis

• Allestatements(code)tussen{}

Betekenisvan:void

Alseenfunc7egeenterugkerendewaardehee<,moetalsterugkerendewaardevoidworden

opgegeven.

Scopeofbereikvanvariabelenbijeenfunc7e

• Indiendevariabeleenkelbinnendefunc7egedeclareerdis:

• enkelbeschikbaarbinnendefunc7e:lokalevariabele

• Indiendevariabelebuitendefunc7e

• beschikbaaroverdehele7jdslijn:globalevariabele

• MogelijkprobleembijdeTweenclass.

• Alseentweenlokaalgedaclareerdiskandezeproblemengeven

• Tweenal7jdglobaaldeclareren

CommentaarSoortencommentaar?

Erbestaan2soortencommentaren:

• inline:begintmet//eneindigtautoma7schopheteindevandelijn

• block:begintmet/*eneindigtmet*/

DebuggingSoortenfouten?

• Compileerfouten:wordenweergegevenbijhetrunnenvandetoepassing

• Run7mefouten:komenvoor7jdensdeuitvoeringvanhetprogramma

Display ListVisueleelementenzi?enindedisplaylist.

DisplayObjectContainer

• MovieClip

• Loader

• Sprite

• Stage

Displayobject

• textField

• Bitmap

• Video

Objecttoevoegen

• Displayobjectaanmaken

• Proper7esinstellen

• addChild(displayObject)

Nieuw,legeobjectenaanmaken

• MovieCliphee[een7jdslijn

var mijnMovieClip:MovieClip = new MovieClip();

addChild(mijnMovieClip);

• Spritehee[geen7jdslijn

var mijnSprite:Sprite = new Sprite();

addChild(mijnSprite);

Depth ManagementBijDepthManagementkunnenweonzemovieClipbovenaanaande

displaylisttoevoegen.

setChildIndex(eenClip, 0);

setChildIndex(tweeClip, 2);

tweeClipzalboveneenClipgeplaatstworden.

Drawing APIDeDrawingAPIiseenfunc7onaliteitbinnenAc7onscriptomvectorbestandentetekenenente

tonenopdestage.

Standaardfunc7es

•drawRect(x:Number, y:Number, width:Number, height:Number);

•drawCircle(x:Number, y:Number, radius:Number);

•drawEllipse(x:Number, y:Number, width:Number, height:Number);

•drawRoundRect(x:Number, y:Number, width:Number, height:Number,

ellipseWidth:Number, ellipseHeight:Number);

eenClip

tweeClip

Events

Eeneventiseengebeurtenisdie7jdenshetuitvoerenvanhetprogrammavoorkomt.Een

gebeurteniswaarjenaarkanluisteren(middelsEventListeners),waardoorjekanreagerenophet

Event.

vierkant.addEventListener(MouseEvent.CLICK, vierkantClickHandler);

function vierkantClickHandler(evt:Event):void

{

trace(“click”);

}

Drag & Dropbril1.startDrag();

bril1.stopDrag();

EventBubbling

Wehebbenonzestage,waar2movieClipsopstaan.Binnenmc1bevindtzichmc2.Weze?eneen

eventListeneroponzestagedieluistertnaarMouseEvent.CLICK.Alsweoponzestage

klikkengaanwedieeventtriggeren.Maaralsweopmc1ofmc2klikkentriggerenweditevent

ook.Ditkomtomdatheteventvanmc2omhoog“gebubbled”wordtnaardestage.

Welople?endatmouseEvent.bubbling = trueis;

Objectenslepen

event.target = waar trad het event op.

LussenWatiseenlus?

Eenlusiseenherhalingvaneenaantalstatements

trace(1);

trace(2);

trace(3);

trace(4)

…

trace(1000);

Erbestaan2soortenlussen:

• begrensdeherhaling

• voorwaardelijkeherhaling

Begrensdeherhaling

• Eenexactaantalkeeruitvoerenvaneenbepaaldestatements

• Hetaantalherhalingenisopvoorhandgekend.

• vb.getallenvan1tot10inhetoutputvensterweergeven

for(teller=start;teller=eindwaarde;stap)

{

// uit te voeren statements

}

for (var i:uint=0;; i<=10; i++) {

trace(i);

}

Voorwaardelijkeherhaling

• Hetaantalherhalingenisopvoorhandnietgekend.

• Tweemogelijkheden

• while:voorwaardecontrolerenendanuitvoeren

• do…while:uitvoerenendanvoorwaardecontroleren

• Oppassenvooreenoneindigelus

kan korter met een lus

while(condition)

{

// statements

}

Destatementswordenuitgevoerdzolangdecondi7ewaaris.Alsdecondi7ewaarblij<,dan

sprekenwevaneenoneindigelus.

Do…While

• Ongeveerdezelfdestructuuralsdewhilelus

• Destatementswordenminstens1maaluitgevoerd

• Decondi7ewordtpasopheteindevandelusgeëvalueerd

var i:uint = O;

do {

trace(1);

i++;

} while(1<=10);

Begrensdevs.voorwaardelijkeherhalingen

Elkeforluskanalseenwhilelusgeschrevenworden.Zelfdetelleraansturen.Nietelkewhilelus

kanalseenforlusgeschrevenworden.Hetaantalherhalingenisnietopvoorhandgekend.

Foreachlus

Deforeachlusisookeenbegrensdeherhaling.Hetwordtvaakgebruiktomeenverzamelingte

overlopen.Dezelusiskorterenperformanterdandegewoneforlus.

Ontsnappenuitdelus

Hetgebruikvanhetkeywordbreakonderbreektdelus

for (var i:uint = 0; i<this.numChildren; i++)

{

var child:DisplayObject = this.getChildAt(i);

trace(child.name);

if (child.name == “bal3”)

{

break;

}

}

HitTestUitleg

DehitTestcontrolleertofercontactistussen2movieClips.Erbestaan2mogelijkefunc7esin

Ac7onscript:

• hitTestObject():controleoftweeobjectenelkaaroverlapen

• hitTestPoint():controleofeenobjecteenbepaaldpuntoverlapt

hitTestObject()

Dezefunc7everwachteenDisplayObjectalsparamater.Hetgee<eenbooleanterugalsresultaat

if (bal.hitTestObject(vierkant))

{

trace(“vierkant geraakt”);

}

hitTestPoint();

Dezefunc7everwachttweeNumbersalsparameters(xofy‐coördinaat).Hetgee<eenboolean

terugalsresultaat.

if (bal.hitTestPoint(stage.mouseX, stage.mouseY))

{

trace(“punt geraakt”);

}

ArraysWaaromarray’sgebruiken?

Omgegevensdiebijelkaarhorenin1variabeleopteslaan.

• Bijvoorbeeld:

• Bijhoudenvanadresgegevens(naam,voornaam,straat,postcode,gemeente)

• Eenverzamelingvanmovieclipsbijhouden

• String=eenarrayvankarakters

• ...

Watiseenarray?

• Iseenverzameling(=collec7e)vanverschillendegegevensin1variabele

• Tevergelijkenmeteenladekast

• Dearraybevatverschillendeelementendieelkmeteenuniekeindexkunnenaangesproken

Declara7evanarray’s

• Legearrayaanmaken

• var myArray:Array = new Array();

• Dearrayeenvastelengtegeven

• var myArray:Array = new Array(5);

• Dearrayopvullenbijdeclara7e

• var myArray:Array = new Array(“een”,”twee”,”drie”);

• Alterna7ef

• var myArray:Array = [“een”,”twee”,”drie”];

Eenarrayopvullen

• Opvullenbijdeclara7e:

• var myArray:Array = [“element1”,”element2”,”element3”];

• Opvullenmetbehulpvandeindex:opgepastiszero‐based!!!!!

• myArray[0] = “element4”;

• myArray[1] = “element5”;

• Gebruikvandepush()methode

• myArray.push(“element6”);

• Verschillendedatatypesin1arrayistoegelaten

Eenarrayuitlezen

Wanneerweeenarraytracen,wordenalleelementengetoondgescheidendooreenkommain

hetoutputvenster.Ditdientenkelomdewaardenuitdearraytetesten.

trace(myArray);

Vooreenarrayuittelezengebruikenweeenlus:

• forlus

• foreachlus

• gebruikenomarrayincodeteoverlopen

Demo:eenarrayuitlezen

// declaratie van de array

var myArray:Array =

["element1","element2","element3","element4","element5"];

// in het output venster tonen via trace

trace(myArray);

// gebruik van een for lus

for(var i:uint=0;i<=myArray.length;i++)

{

trace(myArray[i]);

}

// gebruik van een for each lus

for each(var element:String in myArray)

{

trace(element);

}

ArrayDemo’s

// concat: twee array's samenvoegen

var numbers:Array = new Array(1, 2, 3);

var letters:Array = new Array("a", "b", "c");

var numbersAndLetters:Array = numbers.concat(letters);

var lettersAndNumbers:Array = letters.concat(numbers);

trace(numbers); // 1,2,3

trace(letters); // a,b,c

trace(numbersAndLetters); // 1,2,3,a,b,c

trace(lettersAndNumbers); // a,b,c,1,2,3

// indexOf: de index voor een bepaalde waarde uit de array

opzoeken

var arr:Array = new Array(123,45,6789);

arr.push("123-45-6789");

arr.push("987-65-4321");

var index:int = arr.indexOf("123");

trace(index); // -1

var index2:int = arr.indexOf(45);

trace(index2); // 1

// join: voegt een string toe tussen elk element in de array en

maakt een string van het geheel

var myArr:Array = new Array("one", "two", "three");

var myStr:String = myArr.join(" and ");

trace(myArr); // one,two,three

trace(myStr); // one and two and three

// lastIndexOf: de index voor het laatste element met een bepaalde

waarde opzoeken

var arr2:Array = new Array(123,45,6789,123,984,323,123,32);

var index12:int = arr2.indexOf(123);

trace(index12); // 0

var index22:int = arr2.lastIndexOf(123);

trace(index22); // 6

// pop: verwijdert het laatste element uit de array en stopt het

in een string

var letters2:Array = new Array("a", "b", "c");

trace(letters2); // a,b,c

var letter2:String = letters2.pop();

trace(letters2); // a,b

trace(letter2); // c

// push: voegt een element toe op het einde van de array

var letters3:Array = new Array("a");

letters3.push("b");

letters3.push("c");


// reverse: draait de elementen om in de array



letters4.reverse();

trace(letters4); // c,b,a

// shift: verwijdert het eerste element uit de array en slaat het

op in een string


var firstLetter:String = letters5.shift();

trace(letters5); // b,c

trace(firstLetter); // a

// slice: kopieert de gevraagde elementen naar een nieuwe array

var letters6:Array = new Array("a", "b", "c", "d", "e", "f");

var someLetters:Array = letters6.slice(1,3);

trace(letters6); // a,b,c,d,e,f

trace(someLetters); // b,c

// sort: sorteert de array volgens een bepaalde orde die in de

parameters kan meegegeven worden

var vegetables:Array = new Array("spinach","green

pepper","Cilantro","Onion","Avocado");

vegetables.sort();

trace(vegetables); // Avocado,Cilantro,Onion,green pepper,spinach

vegetables.sort(Array.CASEINSENSITIVE);

trace(vegetables); // Avocado,Cilantro,green pepper,Onion,spinach

// splice: toevoegen en verwijderen van elementen zonder een kopie

te maken

var vegetables2:Array = new Array("spinach","green

pepper","cilantro","onion","avocado");

var spliced:Array = vegetables2.splice(2, 2);

trace(vegetables2); // spinach,green pepper,avocado

trace(spliced); // cilantro,onion

vegetables.splice(1, 0, spliced);

trace(vegetables2); // spinach,cilantro,onion,green pepper,avocado

//unshift: voegt elementen toe aan het begin van de array

var names:Array = new Array();

names.push("Bill");

names.push("Jeff");

trace(names); // Bill,Jeff

names.unshift("Alfred");

names.unshift("Kyle");

trace(names); // Kyle,Alfred,Bill,Jeff

TekstDeverschillendestringfunc7es

Netzoalsbijarray’sbestaatereenmethodeomeenstringtemanipuleren.Eenstringisnietmeer

daneen“arrayvankarakters”.

Stringsmanipuleren

var tekst:String = "Dit is een stuk tekst";

// charAt: toont het karakter van de gevraagde positie

trace(tekst.charAt(2));

//fromCharCode: geeft een string terug van de gevraagde unicodes

trace(String.fromCharCode(65,32,66,32,67));

//split: zal de string splitsen naar een array op een bepaald

teken

var persoon:String = "Naam;Voornaam;Adres;Leeftijd";

var arrPersoon:Array = persoon.split(";");

trace(arrPersoon);

//substring: neemt een bepaald deel uit een string

trace(tekst.substring(11,15));

//toLowerCase: alles omzetten naar kleine letters

trace(tekst.toLowerCase());

//toUpperCase: alles omzetten naar hoofdletters

trace(tekst.toUpperCase());

TextFieldsHetaanmakenvanTextFields

1. Uitdetoolboxslepenopdestage

2. AanmakenviaAc7onscript3.0

• VergelijkbaarmetdynamischopdestageplaatsenvanMovieclips

• Verschil:gebruikmakenvandeTextFieldclass

• Ookmogelijkomverschillendeproper7esintestellen

Demo:HetaanmakenvaneenTextField

var t:TextField = new TextField();

t.x = 100;

t.y = 250;

addChild(t);

// instellen van de tekst

t.text = "Voorbeelden van properties voor TextFields";

// gebruik van autosize

t.autoSize = TextFieldAutoSize.LEFT;

// instellen van background en backgroundColor

t.background = true;

t.backgroundColor = 0x00FFFF;

// instellen van border en borderColor

t.border = true;

t.borderColor = 0xFF0000;

// instellen van de textColor

t.textColor = 0xFF00FF;

// instellen van wordwrap

t.wordWrap = true;

Demo:TekstaanpassenvaneenTextField

var t:TextField = new TextField();

t.x = 100;

t.y = 150;

t.autoSize = TextFieldAutoSize.LEFT;

addChild(t);

// gebruik van de text property

t.text = "Een stuk tekst";

// gebruik van appendText(): veel beter dan t.text += " met een

tweede stuk tekst";

t.appendText(" met een tweede stuk tekst");

// gebruik van de methode replaceText()

t.replaceText(15,18,"gevolgd door");

// of

t.text = "abcde";

t.replaceText(1,4,"x");

// vervangen zonder verwijderen

t.text = "mat";

t.replaceText(2,2,"s");

LoaderWanneerweeengrotefilehebbenishetnodigdatwegaan“preloaden”.

Demovar imageLoader:Loader;

init();

function init():void{

imageLoader = new Loader();

imageLoader.load(new URLRequest("joshua-davis.jpg"));

imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,

imageLoaderProgressHandler);

imageLoader.contentLoaderInfo.addEventListener(Event.INIT,

imageLoaderInitHandler);

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,

imageLoaderCompleteHandler);

trace(imageLoader.width + "x" + imageLoader.height);

addChild(imageLoader);

}

function imageLoaderProgressHandler(event:ProgressEvent):void{

trace(event.bytesLoaded + "/" + event.bytesTotal);


}

function imageLoaderInitHandler(event:Event):void{

trace("init");


}

function imageLoaderCompleteHandler(event:Event):void{

trace("complete");


}

loaderInfo.bytesLoaded

loaderInfo.bytesTotal

Timer ClassDemo

var myTimer:Timer = new Timer(1000, 1); // 1 second

myTimer.addEventListener(TimerEvent.TIMER, runOnce);

myTimer.start();

function runOnce(event:TimerEvent):void {

trace("runOnce() called @ " + getTimer() + " ms");

}

Extensible Markup Language (XML)WatisXML?

• eigentags

• 1roottag

• a?ributenzijnmogelijk(<userid=”1”>)

• datadynamischinladen

• schrijvenineenteksteditor

• teksteninbrowser(=xmlparser)

Enkeleregelsi.v.meentag

• moetstartenmetle?erofunderscore(_).

• magnietbeginnenmetcijfers,specialekarakters.(@)

• bevatalleenle?ers,cijfers,punten,_of‐(geenspa7es)

• kannietbeginnenmetXMLinelkevorm(Xml,XML…)

Demo:externeXML‐fileinladen

var xmlLoader:URLLoader;

var usersXML:XML;

init();

function init():void{

xmlLoader = new URLLoader();

xmlLoader.addEventListener(Event.COMPLETE,

xmlLoaderCompleteHandler);

xmlLoader.load(new URLRequest("users.xml"));

}

function xmlLoaderCompleteHandler(event:Event):void{

usersXML = new XML(xmlLoader.data);

trace(usersXML);

}

Documents

Samenvatting: Actionscript 3.0