You are on page 1of 24

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<rekken
• *
vermenigvuldigen
• /
delen
• %
modulo
(restdeling)
• ()
gebruik
van
haakjes
gee<
voorrang

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<this.numChildren; i++)
{
var child:DisplayObject = this.getChildAt(i);
trace(child.name);
if (child.name == “bal3”)
{
break;
}
}

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