Samenvatting: Actionscript 3.0
-
Upload
sven-peeters -
Category
Documents
-
view
910 -
download
0
description
Transcript of 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");
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
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);
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);
}
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);
}