Samenvatting: Actionscript 3.0

Creative Programming Actionscript Introductie Wat
is
een
variabele? Een
variabele
is
een
plaats
in
het
geheugen
die
een
bepaalde
waarde
bevat.
Deze
waarde
kan
 veranderen
7jdens
het
runnen
van
het
programma.
Iedere
variabele
hee<
een
datatype.
Het
 datatype
bepaalt
welke
waarde
een
variabele
kan
beva?en. vb:

var mijnVariabele:String; • var:
aangeven
dat
een
variabele
is • mijnVariabele:
de
naam
van
je
variabele • String:
het
datatype

Naamgeving
van
variabelen • Ac7onscript
3.0
is
case‐sensi7ve • Enkel
le?ers,
cijfers,
_
en
$
mogen
gebruikt
worden • Het
mag
niet
starten
met
een
getal • Het
mag
geen
keyword
zijn
(vb.
trace) • Het
moet
uniek
zijn • Gebruik
camel
case
nota7on

Datatypes • String:
voor
tekst • Boolean:
waar
of
niet
waar • int:
gehele
getallen
(posi7ef
en
nega7ef) • uint:
gehele
getallen
(enkel
posi7ef) • Number:
decimale
getallen
(posi7ef
en
nega7ef)

Hoe
gebeurt
een
conversie
naar
een
ander
datatype? var getal:uint; getal = “5” getal = uint(“5”);

Een
variabele
bereiken • Een
variabele
kan
pas
aangesproken
worden
na
declara7e • Daarna
is
hij
gekend
op
alle
frames
van
de
7jdslijn • Ople?en
met
variabelen
in
MovieClips

Operatoren en expressies Wiskundige
operatoren • +
optellen • ‐
a
String
operatoren var deelEen:String = “Creative”; var deelTwee:String = “Programming”; var deelDrie:String = “1”; var totaal:String = deelEen + deelTwee + deelDrie; trace(totaal);

Andere
operatoren • Vergelijkingsoperatoren • Booleaanse
operatoren

Expressies Expressies
zijn
uitdrukkingen
die
een
bepaalde
waarde
opleveren.
 • een
constante • een
variabele • resultaat
van
bewerking • resultaat
van
een
func7e

Werken met proporties OOP • OOP
=
Object
Oriented
Programming • Ac7onscript
is
een
OOP
taal. • Alles
is
een
object
en
een
object
is
een
instan7e
van
een
klasse. • Alles
is
een
object
en
objecten
hebben: • Propor7es
(eigenschappen) • Methods
(taken) • Events
(gebeurtenissen)

Een
concreet
voorbeeld… • Een
student: • Propor7es:
naam,
lengte,
schoenmaat,
… • Methods:
eten,
slapen,
studeren,
… • Events:
wakker
worden
als
de
wekker
afloopt

Te
onthouden! Propor7es
kunnen
ingesteld
worden
op
objecten. bal.width = 100; bal.height = 100;

Controlestructuren Condi7onals • (something
==
wZ)

is
gelijk
aan • (some7ng
!=
wZ)
is
niet
gelijk
aan • (something
>
wZ)
is
groter
dan • (something
<
wZ)
is
kleiner
dan • (something
<=
wZ)
is
kleiner
of
gelijk
aan • (something
>=
wZ)
is
kleiner
dan • (a
==
b
&&
a
==
c)
a
en
b
moeten
gelijk
zijn
EN
a
en
c
moeten
gelijk
zijn • (a
==b
||
a
==
c)
a
en
b
moeten
gelijk
zijn

OF
a
en
c
moeten
gelijk
zijn • (!a
==
b)
a
en
b
moeten
NIET
gelijk
zijn 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 }

Twee
mogelijkheden
om
waarden
te
controleren • if
en
else
structuur • 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:
te
tweenen
object
(meestal
een
movieClip) • prop:
eigenschap
van
object
dat
je
wil
tweenen
(vb.
alpha‐waarde) • func:
anima7e
func7e
(verandering
in
snelheid
anima7e) • begin:
startwaarde
van
de
eigenschap • finish:
eindwaarde
van
de
eigenschap • dura7on:
de
7jd
dat
de
anima7e
duurt
in
frames
of
seconden • useSeconds:
de
dura7on
in
seconden
(true)
of
frames
(false) De
tween
class
&
None
class
zijn
geen
classes

uit
de
default
package!

Functies Wat
is
een
func7e? Een
func7e
is
een
blok
code
dat
hergebruikt
kan
worden.
Het
kan
al
dan
niet
een
waarde
terug
 geven: return. Een
func7e
kan
al
dan
niet
bepaalde
parameters
beva?en. vb. function test(a:String, b:uint):void.

Standaard
func7es trace(), isNan(), gotoAndPlay(), gotoAndStop(), substring(), startDrag(), stopDrag(), hitTestObject(), …

Zelf
een
func7e
schrijven… /** 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 } • We
beginnen
met
het
keyword:
func7on • Dan
de
naam
van
de
func7e:
startSpel() • Eventueel
paramaters
ingeven:
a:String • Het
datatype
van
de
terugkerende
waarde
bepalen:
:String • void
gebruiken
indien
er
geen
terugkerende
waarde
is • Alle
statements
(code)
tussen
{
}

Betekenis
van
:void Als
een
func7e
geen
terugkerende
waarde
hee<,
moet
als
terugkerende
waarde
void
worden
 opgegeven.

Scope
of
bereik
van
variabelen
bij
een
func7e • Indien
de
variabele
enkel
binnen
de
func7e
gedeclareerd
is: • enkel
beschikbaar
binnen
de
func7e:
lokale
variabele • Indien
de
variabele
buiten
de
func7e • beschikbaar
over
de
hele
7jdslijn:
globale
variabele • Mogelijk
probleem
bij
de
Tween
class. • Als
een
tween
lokaal
gedaclareerd
is
kan
deze
problemen
geven • Tween
al7jd
globaal
declareren

Commentaar Soorten
commentaar? Er
bestaan
2
soorten
commentaren: • inline:
begint
met
//
en
eindigt
automa7sch
op
het
einde
van
de
lijn • block:
begint
met
/*
en
eindigt
met
*/

Debugging Soorten
fouten? • Compileerfouten:
worden
weergegeven
bij
het
runnen
van
de
toepassing • Run7me
fouten:
komen
voor
7jdens
de
uitvoering
van
het
programma

Display List Visuele
elementen
zi?en
in
de
display
list.


Display
Object
Container • MovieClip • Loader • Sprite • Stage

Display
object • textField • Bitmap • Video

Object
toevoegen • Display
object
aanmaken • Proper7es
instellen • addChild(displayObject)

Nieuw,
lege
objecten
aanmaken • MovieClip
hee[
een
7jdslijn var mijnMovieClip:MovieClip = new MovieClip(); addChild(mijnMovieClip);

• Sprite
hee[
geen
7jdslijn var mijnSprite:Sprite = new Sprite(); addChild(mijnSprite);

Depth Management Bij
Depth
Management
kunnen
we
onze
movieClip
bovenaan
aan
de


eenClip

display
list
toevoegen. setChildIndex(eenClip, 0); setChildIndex(tweeClip, 2);

tweeClip

tweeClip
zal
boven
eenClip
geplaatst
worden.

Drawing API De
Drawing
API
is
een
func7onaliteit
binnen
Ac7onscript
om
vector
bestanden
te
tekenen
en
te
 tonen
op
de
stage.

Standaard
func7es

• 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);

Events

Een
event
is
een
gebeurtenis
die
7jdens
het
uitvoeren
van
het
programma
voorkomt.
Een
 gebeurtenis
waar
je
naar
kan
luisteren
(middels
Event
Listeners),
waardoor
je
kan
reageren
op
het
 Event. vierkant.addEventListener(MouseEvent.CLICK, vierkantClickHandler); function vierkantClickHandler(evt:Event):void { trace(“click”); }

Drag & Drop bril1.startDrag(); bril1.stopDrag();

Event
Bubbling We
hebben
onze
stage,
waar
2
movieClips
opstaan.
Binnen
mc1
bevindt
zich
mc2.
We
ze?en
een
 eventListener
op
onze
stage
die
luistert
naar
MouseEvent.CLICK.
Als
we
op
onze
stage
 klikken
gaan
we
die
event
triggeren.
Maar
als
we
op
mc1
of
mc2
klikken
triggeren
we
dit
event
 ook.
Dit
komt
omdat
het
event
van
mc2
omhoog
“gebubbled”
wordt
naar
de
stage.
 Wel
ople?en
dat
mouseEvent.bubbling = true
is;

Objecten
slepen event.target = waar trad het event op.

Lussen Wat
is
een
lus? Een
lus
is
een
herhaling
van
een
aantal
statements trace(1); trace(2); trace(3);

kan korter met een lus

trace(4) … trace(1000);

Er
bestaan
2
soorten
lussen: • begrensde
herhaling • voorwaardelijke
herhaling

Begrensde
herhaling • Een
exact
aantal
keer
uitvoeren
van
een
bepaalde
statements • Het
aantal
herhalingen
is
op
voorhand
gekend. • vb.
getallen
van
1
tot
10
in
het
output
venster
weergeven for(teller=start;teller=eindwaarde;stap) { // uit te voeren statements } for (var i:uint=0;; i<=10; i++) { trace(i); }

Voorwaardelijke
herhaling • Het
aantal
herhalingen
is
op
voorhand
niet
gekend. • Twee
mogelijkheden • while:
voorwaarde
controleren
en
dan
uitvoeren • do…while:
uitvoeren
en
dan
voorwaarde
controleren • Oppassen
voor
een
oneindige
lus

while(condition) { // statements } De
statements
worden
uitgevoerd
zolang
de
condi7e
waar
is.
Als
de
condi7e
waar
blij<,
dan
 spreken
we
van
een
oneindige
lus.

Do…While • Ongeveer
dezelfde
structuur
als
de
while
lus • De
statements
worden
minstens
1
maal
uitgevoerd • De
condi7e
wordt
pas
op
het
einde
van
de
lus
geëvalueerd var i:uint = O; do { trace(1); i++; } while(1<=10);

Begrensde
vs.
voorwaardelijke
herhalingen Elke
for
lus
kan
als
een
while
lus
geschreven
worden.
Zelf
de
teller
aansturen.
Niet
elke
while
lus
 kan
als
een
for
lus
geschreven
worden.
Het
aantal
herhalingen
is
niet
op
voorhand
gekend.

For
each
lus De
for
each
lus
is
ook
een
begrensde
herhaling.
Het
wordt
vaak
gebruikt
om
een
verzameling
te
 overlopen.
Deze
lus
is
korter
en
performanter
dan
de
gewone
for
lus.


Ontsnappen
uit
de
lus Het
gebruik
van
het
keyword
break
onderbreekt
de
lus for (var i:uint = 0; i
HitTest Uitleg De
hitTest
controlleert
of
er
contact
is
tussen
2
movieClips.
Er
bestaan
2
mogelijke
func7es
in
 Ac7onscript: • hitTestObject():

controle
of
twee
objecten
elkaar
overlapen • hitTestPoint():
controle
of
een
object
een
bepaald
punt
overlapt

hitTestObject() Deze
func7e
verwacht
een
DisplayObject
als
paramater.
Het
gee<
een
boolean
terug
als
resultaat if (bal.hitTestObject(vierkant)) { trace(“vierkant geraakt”); }

hitTestPoint(); Deze
func7e
verwacht
twee
Numbers
als
parameters
(x
of
y‐coördinaat).
Het
gee<
een
boolean
 terug
als
resultaat. if (bal.hitTestPoint(stage.mouseX, stage.mouseY)) { trace(“punt geraakt”); }

Arrays Waarom
array’s
gebruiken? Om
gegevens
die
bij
elkaar
horen
in
1
variabele
op
te
slaan. • Bijvoorbeeld: • Bijhouden
van
adresgegevens
(
naam,
voornaam,
straat,
postcode,
gemeente
) • Een
verzameling
van
movieclips
bijhouden • String
=
een
array
van
karakters • ...

Wat
is
een
array? • Is
een
verzameling
(
=
collec7e
)
van
verschillende
gegevens
in
1
variabele • Te
vergelijken
met
een
ladekast • De
array
bevat
verschillende
elementen
die
elk
met
een
unieke
index
kunnen
aangesproken

Declara7e
van
array’s • Lege
array
aanmaken • var myArray:Array = new Array(); • De
array
een
vaste
lengte
geven • var myArray:Array = new Array(5); • De
array
opvullen
bij
declara7e • var myArray:Array = new Array(“een”,”twee”,”drie”); • Alterna7ef • var myArray:Array = [“een”,”twee”,”drie”];

Een
array
opvullen • Opvullen
bij
declara7e: • var myArray:Array = [“element1”,”element2”,”element3”]; • Opvullen
met
behulp
van
de
index:
opgepast
is
zero‐based!!!!! • myArray[0] = “element4”; • myArray[1] = “element5”; • Gebruik
van
de
push()
methode • myArray.push(“element6”); • Verschillende
datatypes
in
1
array
is
toegelaten

Een
array
uitlezen Wanneer
we
een
array
tracen,
worden
alle
elementen
getoond
gescheiden
door
een
komma
in
 het
output
venster.
Dit
dient
enkel
om
de
waarden
uit
de
array
te
testen. trace(myArray); Voor
een
array
uit
te
lezen
gebruiken
we
een
lus: • for
lus • for
each
lus • gebruiken
om
array
in
code
te
overlopen

Demo:
een
array
uitlezen // 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); }

Array
Demo’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"); trace(letters3); // a,b,c // reverse: draait de elementen om in de array var letters4:Array = new Array("a", "b", "c"); trace(letters4); // a,b,c letters4.reverse(); trace(letters4); // c,b,a // shift: verwijdert het eerste element uit de array en slaat het op in een string var letters5:Array = new Array("a", "b", "c"); 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

Tekst De
verschillende
stringfunc7es Net
zoals
bij
array’s
bestaat
er
een
methode
om
een
string
te
manipuleren.
Een
string
is
niet
meer
 dan
een
“array
van
karakters”.

Strings
manipuleren 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());

TextFields Het
aanmaken
van
TextFields 1. Uit
de
toolbox
slepen
op
de
stage 2. Aanmaken
via
Ac7onscript
3.0 • Vergelijkbaar
met
dynamisch
op
de
stage
plaatsen
van
Movieclips • Verschil:
gebruik
maken
van
de
TextField
class • Ook
mogelijk
om
verschillende
proper7es
in
te
stellen

Demo:
Het
aanmaken
van
een
TextField 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:
Tekst
aanpassen
van
een
TextField 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");

Loader Wanneer
we
een
grote
file
hebben
is
het
nodig
dat
we
gaan
“preloaden”. loaderInfo.bytesLoaded

loaderInfo.bytesTotal

Demo var 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); trace(imageLoader.width + "x" + imageLoader.height); } function imageLoaderInitHandler(event:Event):void{ trace("init"); trace(imageLoader.width + "x" + imageLoader.height); } function imageLoaderCompleteHandler(event:Event):void{ trace("complete"); trace(imageLoader.width + "x" + imageLoader.height); }

Timer Class Demo 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) Wat
is
XML? • eigen
tags • 1
root
tag • a?ributen
zijn
mogelijk
(<user
id=”1”>) • data
dynamisch
inladen • schrijven
in
een
teksteditor • teksten
in
browser
(=
xml
parser)

Enkele
regels
i.v.m
een
tag • moet
starten
met
le?er
of
underscore
(_). • mag
niet
beginnen
met
cijfers,
speciale
karakters.(@) • bevat
alleen
le?ers,
cijfers,punten
,_
of‐
(geen
spa7es)
 • kan
niet
beginnen
met
XML
in
elke
vorm
(Xml,XML…)

Demo:
externe
XML‐file
inladen 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); }