1. Variabelen, datatypes, eigenschappen, methodes, trace command........................1 2. Het verschil tussen datatyping en Strong datatyping .............................................11 3.

Het this keyword......................................................................................................19 4. Het datatype Array...................................................................................................19 5. Opvullen van een dynamische tekstbox..................................................................30 6. Toevoegen van items aan een textbox....................................................................35 7. Verwijderen van items uit de tekstbox.....................................................................39 8. Gebruik van zelf gemaakte functies........................................................................43 9. Oefening op CTRL invoer........................................................................................46 10. Dynamisch een MC op de stage zetten................................................................52 11. Oefening op Dynamisch MC op stage zetten MOUSETRAIL..............................59 12. De scope van een variabele..................................................................................61 13. De Tijdslijn.............................................................................................................61 14. De functie..............................................................................................................62 15. Globale variabelen.................................................................................................64 16. Een Dynamische knoppenmenu...........................................................................65 17. Het TextObject......................................................................................................69 18. startDrag stopDrag..............................................................................................75 19. onEnterFrame.......................................................................................................82 20. setInterval.............................................................................................................85 21. Oefening Dynamische sliders...............................................................................87 22. hitTest...................................................................................................................91 23. Bewerkingen op string en herbruikbaarheid van code (AS bestand)..................92 24. loadMovie.............................................................................................................99 25. onEnterFrame preloader....................................................................................103 26. setInterval preloader...........................................................................................108 27. movieClipLoader................................................................................................109 28. loadVars (gegevens van de server halen via url)...............................................113 29. Oefening op loadVars.........................................................................................116 30. Tekstopmaak (htmlText en stylesheet)...............................................................121 31. Oefening op loadVars (dynamische website).....................................................124 32. Dynamische UIScrollBarr...................................................................................130 33. sendAndLoad (gegevens terug sturen naar de server).....................................132 34. Dynamisch Masken............................................................................................135 35. XML lezen ..........................................................................................................139 36. Dynamisch menu met XML................................................................................143 37. XML lezen en in een Object steken.....................................................................146 38. Oefening Filmsite met XML (albumslider)...........................................................152 1. Variabelen, datatypes, eigenschappen, methodes, trace command Even wat herhalen ivm met tween (animatie) Motion tween Je stelt de motion in steeds tussen 2 keyframes. De animatie zelf laten uitrekenen doe je op het eerste van de twee keyframes. Je kan het enkel op een samenhangend element. Dat zie je aan het feit dat er een blauwe rand rond de object(en) staat. Ofwel is het een groep (Modify/group) (CTRL+G) Ofwel is het een symbool (Insert Symbol) (CTRL+F8)

Action script Basis Met ease In/Out kan je de animatie sneller laten beginnen en laten uitdeinen of trager laten starten en naar het einde toe sneller laten verlopen.

Shape Tween Getekende objecten waar geen blauw kader rond staat. Als je een gegroepeerd symbool of een symbool hebt Klik je er rechts op en kies je Break Apart. Dat geldt zeker ook zo voor tekst. Voeg je een tekst in dan kan je daar geen shape animatie mee doen. Klik je rechts en selecteer je Break Apart dan zal je zien dat de letters van de tekst nog steeds door een blauwe kader zijn omrandt.

Oefening : Maak een letter A en die die shape-tweenen naar een B Variabelen Waar kunnen we code op schrijven? Op een movieclip Op een knop (Button) Centraal op de keyframe (liefst op 1 frame) desnoods op 2. Bij voorkeur maak je daar een aparte laag voor aan die je Scripts of Actions noemt. Actions panel openen door F9 Veronderstel we willen een (movieclip = MC) bol aansturen. We maken een nieuw MC symbool bol en we slepen een instance ervan op de stage. Met deze instance geselecteerd openen we het properties panel. Daar geven we hem een Instance Name. Alle instanties in de zelfde tijdlijn moeten een unieke naam hebben.

pag

2

Action script Basis

Regels ivm de naamgeving: De variabele naam mag geen spaties bevatten Mag geen rare tekens bevatten zoals ( ¨ , /, \ ) in principe gebruik je bij voorkeur a-z,A-Z,0-9 Mag wel maar wordt aanzien als Bad Practice Niet starten met een hoofdletter. Starten met een hoofdletter is bedoeld op een Class aan te duiden. Niet starten met een cijfer. Niet starten met een _ (underscore) deze notatie is voorzien voor eigenschappen bv bol._x (maar dat gaat in action script 3.0 anders zijn. Men maakt gebruik van Camel casing. Elk onderdeel van een woord begint met een hoofdletter. Vb mijnRodeBol We maken een nieuw flash document en maken er een symbool Bol aan van het type Movieclip. Eigenschappen van een object Elk object heeft een aantal vaste eigenschappen. Je kan die veranderen: Object._eigenschap = waarde;

pag

3

Action script Basis

Er zijn verschillende soorten variabelen. Een variabele is een object gestockeerd in het geheugen Aan het stukje ruimte geef je een naam. Net zoals met een potje confituur. Je kleeft er een etiket op waarop je zet wat er in zit (je bepaalt het type). Als je het potje vult geef je inhoud (een waarde) aan de variabele

pag

4

Action script Basis Data types String Een tekst. De tekst moet tussen enkele of dubbele aanhalingstekens staan. Vb Var naam = “Familienaam” ; Var voornaam = ‘voornaam’; Number In tegenstelling met andere programmeertalen wordt geen onderscheid gemaakt tussen verschillende soorten gehele- en komma- getallen. Getallen worden niet tussen aanhalingstekens geplaatst. Vb Var leeftijd = 20; Boolean Booleans kunnen enkel de waarde true of false hebben. Deze woorden worden niet tussen aanhalingstekens gezet. Je zal zien dat de woorden blauw kleuren, wat betekent dat ze herkend worden als gereserveerde woorden. Vb Var zwanger = false; Objects (objecten) Er zijn een hele reeks voor gedefinieerde objecten zoals Movieclip, Array, Sound,… Declareren van variabelen Volgens de regels : String(), Number(), Boolean, Array(),… worden telkens met een hoofdletter geschreven omdat ze namen zijn van Classes. var familienaam = new String(); var leeftijd = new Number(); var getrouwd = new Boolean(); var leerlingen = new Array(); Je mag bij de declaratie meteen een waarde toekennen aan de variabele. var familienaam = “Claerhout”;

pag

5

Action script Basis Weergeven van waarden via het trace() commando: Maak een nieuw flashdocument en open het Actions Panel (F9) tik daarin

Meteen als je de haakjes opent krijg je een helptekst met wat deze functie verwacht. Merk op dat in de eerste frame in de tijdlijn nu een kleine a in de frame staat. Dit om aan te duiden dat er script in staat. Vervolledig de opdracht als volgt:

Druk nu CTRL+Enter om de animatie te testen. Er opent zich een nieuw venster : Het Output Panel. Daarin verschijnt wat we net hebben ingetikt.

Je kan het type van een constante of variabele ophalen met de functie “typeof()”

Dit zal resulteren in String in het Output Panel. Neem de volgende code over en test vervolgens uit met CTRL+ENTER

pag

6

Action script Basis

Als alles juist is krijg je in het Output Panel :

Je kan meerdere opdrachten in door één tracé() opdracht laten uitvoeren om op die manier een duidelijker beeld te krijgen wat je nu precies traced. Pas even de code als volgt aan :

En druk CTRL+ENTER om het resultaat te bekijken. Sla het bestand op als ASLes01_trace.fla

pag

7

Action script Basis Operatoren: Tekst : Open een nieuw Flashdocument : Een string heeft slechts één eigenschap namelijk zijn lengte.

Neem onderstaande tekst over :

Het verschil tussen een Property (eigenschap) en een Method (methode, functie of opdracht) kan je zien aan de haakjes na de methode. Eigenschappen hebben NOOIT haakjes. Methodes hebben er altijd.

pag

8

Action script Basis

Test uit en sla op als ASLes01_propertiesAndMethods.fla Optellen van strings: Start een nieuw flashdocument en neem in het Actions Panel de volgende tekst over.

Druk CTRL+ENTER. Je zou het volgende moeten krijgen in het Output Panel:

Teksten optellen is dus aan elkaar plakken. Andere methodes voor string zijn: charAt()

Geeft het eerste karakter van de tekst terug
pag 9

Action script Basis

pag

10

Action script Basis

2. Het verschil tussen datatyping en Strong datatyping Gewone datatyping : var naam = “Jan” Hierbij wordt meteen een waarde aan de variabele toegekend nl het constante stukje tekst “Jan”. Een constant stukje tekst wordt ook wel een litteral genoemd. of var naam = New String(); In flash is het in beide gevallen mogelijk om er achteraf een ander datatype in te stoppen bv naam = 12 waarbij nu een getal in plaats van een stukje tekst in de variabele Strong datatyping : var naam:String = “Jan” of var naam:String = new String(); Hier wordt aan de compiler gezegd dat het datatype String is waardoor bij compilatie gecheckt wordt of de waarde die in een variabele wordt gestoken wel van het juiste type is. Als dat niet het geval is krijg je een foutmelding.

Per object zijn er Eigenschappen, Methodes en Events Properties (Eigenschappen) Object Methods (Bewerkingen) Events (Gebreurtenissen)

We maken een nieuwe MC (movieclip) animatie van een bol die groter en terug kleiner wordt met een shape tween. We noemen deze animatie bol. Sleep een instantie (vanuit de library) op de stage. Zoals je weet blijft deze animatie zich herhalen.

pag

11

Action script Basis

We willen nu dat deze animatie stopt als je er op klikt. Om de MC aan te sturen moeten we hem eerst een naam geven. Wijzig de naam via het properties panel in bol. Je kan je code schrijven als je het object aanklikt of op het frame zelf. We schrijven alles in het eerste keyframe van de hoofdtijdlijn. Zodat alle code bij elkaar blijft staan.

Test even uit. Je zal merken dat er nu een handje (als een link) komt als je over het object gaat en als je op de animatie klikt, stopt ze. Dit werkt gewoon  sla op als Les02_oef01.fla Wat we nu willen is dat als we op de bol klikken de animatie stopt maar als die al gestopt is dat die weer verder doet. Daarvoor hebben we een selectie (keuze) nodig.

pag

12

Action script Basis De selectie (keuze)

Loopt de animati

Ja

Stop de animatie

Neen Start de animatie

Dit wordt in actionscript : If (AnimatieLoopt == true) { //Stop de animatie } else { //Start de animatie }

De selectie begint met het woordje if (als) gevolg door de voorwaarde. De voorwaarde die tussen haakjes wordt gezet moet steeds een vraag zijn met ondubbelzinnig een JA of een Neen als antwoord. Bij afspraak staat het ja antwoord steeds (links in de voorstelling) bovenaan. Indien er een neen kant is wordt die gescheiden door het woord else. Alles wat in de ja of neen kant staat wordt samengehouden door accolades.

pag

13

Action script Basis Als er maar één opdracht is moet je niet persé de accolades zetten maar het verhoogt de leesbaarheid wel. Merk op dat in de keuze (vraag) de OPERANDEN (wat vergeleken wordt) gescheiden worden door een Vergelijkings Operator. < <= == Kleiner dan Kleiner of gelijk aan Gelijk aan (zelfde waarde) > >= != Groter dan Groter of gelijk aan Niet gelijk aan (verschillend)

Om te weten of de animatie loopt of niet houden we een Boolean variabele AnimatieLoopt. Deze variabele bevat een waarde die true of false (waar of niet waar) bevat. We zetten deze variabele op true omdat in het begin de animatie loopt.

Nu zal je denken dat vermist een animatie zich steeds herhaalt 12 keer per seconde die AnimatieLoopt op true wordt gezet maar dat is niet het geval omdat een animatie die slechts één frame bevat niet herhaald wordt. Sla op als Les02_oef02.fla De scope van een variabele De scope is de ruimte waarin een object kan aangesproken worden. Bv Als je iemand aanspreekt kan dat allen als je ermee in een zelfde ruimte zit.

pag

14

Action script Basis We maken een nieuw flashdocument en een nieuw MC (movieclip) symbool. Teken daarop een groene rechthoek.

Sluit het symbool door op Scene1 te klikken en sleep een instantie van de knop op de stage. Geeft via het Properties Panel de knop de naam”knop”.

pag

15

Action script Basis Selecteer de enige keyframe in de hoofdtijslijn en schrijf volgende code.

Test even uit. Open het symbool Knop door er in de library op te dubbel klikken. We maken er een laag bij en zetten een keyframe op 5 en op 10. Maak daar de rechthoek respectievelijk (5)rood en (10)blauw Maak een nieuwe layer aan en noem die Actions. Bij elke keyframe van vorige laag maak je een nieuwe laag en ze er stop() in.

We geven elke keyframe een naam. Dat heeft als voordeel dat als je ze later verplaats je steeds naar de naam kan verwijzen ipv naar de nummer. We noemen respectievelijk frame1 “Up”, Frame5 “Over” en frame10 “Down”.

pag

16

Action script Basis We schrijven code voor de verschillende events van onze knop. knop.onPress = function() { trace ("Geklikt"); } knop.onRelease = function() { trace ("Knop gelost"); } knop.onRollOut = function() { trace("Weg van de knop"); } knop.onReleaseOutside = function() { trace("Knop gelost buiten de knop"); }

Test even uit en sla op als Les02_oef03.fla We passen de code wat aan zodat onze zelfgemaakte knop werkt zoals we dat willen: knop.onPress = function() { knop.gotoAndStop("Down"); } knop.onRelease = function() { knop.gotoAndStop("Up"); } knop.onRollOut= knop.onReleaseOutside = function() { knop.gotoAndStop("Up"); } knop.onRollOver = function() { knop.gotoAndStop("Over"); }

Sla op als Les01_oef04.fla

pag

17

Action script Basis

pag

18

Action script Basis

3. Het this keyword this slaat op de plaats (object) waar de code staat. Van op de hoofdtijdlijn kan je de release van de knop aanspreken via knop.onRelease. Vermits de hoofdlijn dan actief is kan je ook schrijven this.knop.onRelease. knop.onRelease = function({ this.gotoAndStop(“Up”); } this slaat nu niet meer op de hoofdtijdlijn maar om de instantie knop. Het is een betere manier van noteren omdat knop dynamisch bepaald kan zijn. Kortom het is wat flexibeler als je meerde knoppen hebt in dit geval. Om dat even aan te tonen slepen we vanuit de library een nieuwe instantie van knop op de stage en geven we hem via het properties panel knop1. We passen onze code snel even aan. We vervangen knop in alle events aan naar this en maken meteen de events voor de knop1. knop.onPress = knop1.onPress =function() { this.gotoAndStop("Down"); } knop.onRelease = knop1.onRelease =function() { this.gotoAndStop("Up"); } knop.onRollOut= knop.onReleaseOutside = knop1.onRollOut= knop1.onReleaseOutside =function() { this.gotoAndStop("Up"); }

Test uit en bewaar als Les02_oef05.fla 4. Het datatype Array var leerlingenLijst = new Array() (of Strong Typed var leerlingenLijst:Array = new Array()) Een array kan je vergelijken met een cd-rekje waarbij henummerd wordt vanaf 0 (nul)

pag

19

Action script Basis leerlingenLijst [ 0 ] is dus het eerste element van het rekje. Wat bijzonder is aan arrays in actionscript is dat je er alle soorten datatypes door elkaar kan in bewaren in tegenstelling tot de meeste andere programmeertalen.

pag

20

Action script Basis Het datatype Aaray heeft slechts één eigenschap nl zijn lengte.

We bespreken enkele methodes van de Array:

Willen weeën bepaald element van de lijst opvragen bv het derde in de lijst, dan doen we een tracé van het n-1 de element (zero-based list remember).

De eigenschap length :

Toevoegen van element:

pag

21

Action script Basis Een element verwijderen:

Splice verwacht minstens 2 parameters. Waarbij het eerste het n-1 de element is dat je wil verwijderen. Het tweede is het aantal dat je er vanaf die plaats wil wegdoen.

Het laatste element verwijderen

Sla op als Les02_oef06.fla

We willen nu een lijstje met namen onder elkaar in tekstveldje krijgen. Maar daarvoor een nieuw flashdocument en vullen via het actions panel een array met gegevens toe

En tekenen met de Text tool van het tools panel een kader om er statische tekst in te zetten. Merk op dat de greep op de tekstbox groter te maken rechtsboven staat en dat je de box geen instance name kan meegeven.

We teken nog een tekstbox waar de namen straks moeten in komen. Dit moet een dynamische textbox zijn en we zettenook het multi-line property.

pag

22

Action script Basis

Merk hier op dat de greep rechts onderaan staat. We geven het veld de instancename studentenVeld. De namen in de tekstbox plooien is maar een koud kunstje 

Nu is dat wel eenvoudig maar niet zoals we het eigenlijk zouden willen. We willen ze onder elkaar als volgt :

We moeten de lijst naam per naam lezen en na elke naam een nieuwe regel beginnen. Daarvoor hebben we een herhaling nodig. En omdat we steeds weten (length) weten hoeveel elementen we hebben gebruiken we een for-lus. Wis lijn 6 en neem de code hieronder over.

Dit geeft :

pag

23

Action script Basis

pag

24

Action script Basis Wijzigen we de code wat zodat er iets in studentenVeld komt:

Dan zal je merken dat enkel het laatste element in het veld terechtkomt. Ttz ze komen er wel allemaal in maar dat gaat zo snel dat we enkel het laatste zien. De inhoud van het veld wordt snel na een i+1. Willen we alle getallen zien dan moeten we ze toevoegen in plaats van ze te overschrijven.

Nu nog zorgen voor een nieuwe na elke getal.

Zorg ervoor dat je tekstbox nu groot genoeg is om alle items weer te geven als dat nog niet het geval zou zijn . Dikwijls wordt ook “\n” gebruikt om een nieuwe regel te beginnen. Nu plooien we er de namen heel eenvoudig tussen door :

We breiden de oefening nog wat uit. Om te beginnen voegen we een knop toe om een naam te kunnen toevoegen. Daarvoor zetten we een input textbox op de stage en geven die de instancename nieuweNaam. Vanuit de Components Panel slepen we een Button op de stage, wijzigen de tekst in Toevoegen en geven we de instance-name cmdToevoegen. Als je het Components Panel niet hebt maak je die zichtbaar door in het menu Window/Development Panels/Components aan te klikken of door op CTRL+F7 te klikken

pag

25

Action script Basis

Omdat we na het toevoegen de textbox opnieuw moeten tekenen is het een beter idee deze code in een functie te stoppen; We wijzigen de code dus :

We maken de textbox eerst leeg voor we de gegevens er in zetten. Dat moet omdat straks bij het toevoegen de gegevens er zouden bijgeschreven worden ipv ze te vervangen.

pag

26

Action script Basis Voor de knop cmdToevoegen wordt dan :

Kort gezegd voegen we de text die in nieuweNaam zit toe aan de array via de push methode en vullen we de textbox opnieuw. We beëindigen de opdracht door een knop cmdVerwijder toe te voegen. We willen nu als de naam in de lijst voorkomt en je op de Verwijderen klikt, dat deze naam uit de lijst wordt verwijderd.

We moeten dus de lijst aflopen en element per element vergelijken met wat in nieuweNaam.text staat.

pag

27

Action script Basis

Sla op als Les02_oef07.fla Dit is een eenvoudige manier om de naam uit de lijst te verwijderen. Ze houdt er geen rekening mee dat die naam meerdere keren in de lijst voorkomt. Dat zou je kunnen doen door de waarden bij te houden bv in een array en ze na het vergelijken te wissen.

pag

28

Action script Basis Een goed idee maar als je een item verwijderd ben je verandert meteen de index van elk item ik heb dat hier opgelost door :

Sla op als Les02_oef08.fla

pag

29

Action script Basis

5. Opvullen van een dynamische tekstbox Even herhalen en wat uitbreiden van vorige oefening: Dit willen we maken. Een lijst waar 4 namen vanzelf in komen, een input-veld om namen toe te voegen en te verwijderen en 2 knoppen. 1.Opvullen van een array met namen. Zoals we al zagen is een variabele een stukje geheugen waar we een naam aan geven. Deze objecten worden in het geheugen opgeslaan zodat we ze in de loop van het programma kunnen aanroepen of een eigenschap kunnen wijzigen zoals de plaats op de stage.

Om een Array te maken en meteen op te vullen selecteren we het eerste frame op de stage, openen het Actions Panel (F9) en voegen volgende code in:

Om te laten zien dat die gegevens wel degelijk in de array (lijst) zitten tonen we de gegevens met het tracé() commando. Deze opdracht opent een venster nl het Output Panel. We voegen dus wat code toe

En drukken CTRL+ENTER om het resultaat te bekijken. De bedoeling is nu om de gegevens uit de Array (leerlingenLijst) onder elkaar weer te geven.

pag

30

Action script Basis Dat doen we door de namen één voor één te tonen. De array is genummerd vanaf 0 tot 3 in dit geval. Het nulde element is Jan, het eerste Piet, het tweede Joris en het derde Korneel. Wat we dus doen is de Array met behulp van een tellertje af te lopen tot het einde. Met eigen woorden : start vanaf 0, en doe zolang het einde van de lijst niet bereikt is er telkens ééntje bij. In actionscript en in heel wat andere programmeertalen gebruikt men daar een forlus voor. For (startpositie; zolang eindpositie niet bereikt is; verhoog met) Startpositie is in ons geval nul (0) Zolang eindpositie niet bereikt is, is bij ons <4 (of <=3) En verhogen doen we telkens met 1 We moeten die waarde telkens onthouden (allez de pc moet dat doen) dus stoppen we die ook in een variabele. Dit keer van het type getal (Number) zodat we ermee kunnen tellen we geven als naam teller. Opmerking: Om één veld uit een lijst (array) aan te duiden schrijf je de naam van de array gevolgd door het nummer. De nummer wordt tussen rechte haakjes geschreven. Hier wordt dit leerlingenLijst[teller]. We breiden de code dus wat uit.

Opmerkingen: teller= teller +1 wil eigenlijk zeggen; Stop in teller de waarde die teller vroeger had en verhoog het met 1. Omdat dat een handeling is die vrij vaak voorkomt wordt dit dikwijls afgekort tot teller++. Nu in dit geval is het einde van de lijst 3 maar als we de array (lijst) uitbreiden of als we er namen zullen uithalen dan zal die waarde anders zijn. Een array heeft een eigenschap waarin bewaard wordt hoeveel elementen er in zitten. Die eigenschap heet length.

pag

31

Action script Basis

We passen daarom onze code wat aan

Druk CTRL+ENTER om het resultaat te bekijken. In het Output Panel wordt eerst de volledige lijst (array) getoond en daarna worden de namen één voor één weer gegeven. Laten we nu iets op de stage tonen. We beginnen met een statisch veld txtTitelop de stage te tekenen. Selecteer het A symbool uit het Tools Panel en teken een kadertje op de stage. Je ziet dat het veld bovenaan rechts een vulgreep heeft en dat je in het Properties Panel geen naam kan geven aan het veld.

Tik in het veld “Studentenlijst” en zet de lettergrootte op 20. Druk CTRL+ENTER om het resultaat te bekijken.

pag

32

Action script Basis

Nu zou het wel mooier zijn dat de gegevens van de lijst in een dynamisch tekstveld worden getoond in plaats van in het output panel. We tekenen net zoals daarnet een tekstveld op de stage. Via het properties panel geven we het veld de naam txtStudentenlijst en zorgen we ervoor dat het een dynamisch tekstveld is. We zorgen er bovendien voor dat dit veld meerdere lijnen kan weergeven door Multiline te selecteren in het properties panel. Kies ook voor een kleiner lettertype bv 12.

Om nu de namen onder elkaar weer te geven in txtStudentenlijst vervangen we de trace() opdracht. We moeten aangeven dat er telkens iets aan het veld wordt bijgevoegd net zoals we dat daarnet bij teller deden. Hier moet aan de text van het veld txtStudentenlijst telkens een naam uit de lijst worden toegevoegd. Je kan dus schrijven txtStudentenlijst.text = txtStudentenlijst.text + VolgendeNaam. We passen de code wat aan. We gooien de trace() opdrachten er uit en zorgen ervoor dat alles nu in het dynamische tekstveld komt.

pag

33

Action script Basis

Opmerking: Net zoals we een verkorte notatie hebben voor teller = teller+1 -> teller++ is er ook een voor txtStudentenlijst.text = txtStudentenlijst.text + VolgendeNaam nl txtStudentenlijst.text += VolgendeNaam

Als je nu CTRL+ENTER doet om het resultaat te bekijken zal je zien dat niet alle namen ondereen staan maar aan elkaar geplakt. We moeten dus telkens een naam is toegevoegd ook de opdracht geven om een nieuwe lijn te beginnen. Dat doe je met de opdracht newline.

Pas de code aan en druk op nieuw op CTRL+ENTER om het resultaat te bekijken. Sof ar so good  Nu willen we nog dat er een nummer aan de lijst komt (zie start afbeelding). Omdat we willen dat hier gestart wordt met 1 ipv van 0 schrijven we

Doe snel even CTRL+ENTER om te zien of het lukte. Een punt en een spatie na elke nummer zetten is een fluitje van een cent  De lijst er alfabetisch gesorteerd erop zetten is maar een kleine moeite. Het object Array heeft namelijk een ingebouwde methode sort() waarmee je de lijst sorteert. We passen de code aan :

pag

34

Action script Basis

Druk CTRL+Enter om het resultaat te bekijken en sla op als Les03_oef01.fla 6. Toevoegen van items aan een textbox Open Les03_oef01.fla We hebben nu een lijst met namen die in een dynamisch tekstveld worden getoond. Wat we nu willen is dat er via een invoerveldje een naam kan worden ingegeven en door op een knop te drukken die we cmdToevoegen zullen noemenwillen we die naam toegevoegd aan de lijst. Maak het veld txtStudentenlijst wat smaller en teken er een veld onder.

pag

35

Action script Basis

Een input text verschilt van een dynamisch tekstveld door het feit dat je er kan in tikken. Noem het veld txtInvoer. Als je nu CTRL+ENTER doet lijkt het alsof er geen invoerveld is. We passen dit even aan door er een kadertje rond te zetten.

Voorlopig hebben we nu zoiets als :

Nu willen we een knop waarop de gebruiker kan klikken om een naam aan de lijst toe te voegen. We maken dus een nieuw MovieClip symbool aan en noemen die toevoegknop. We maken er twee layers Achtergrond waar we een blauw vierkant op tekenen en Tekst waar we de tekst “Toevoegen” in zetten

pag

36

Action script Basis

Sleep vanuit de library (CTRL+L als die niet zichtbaar is) een instantie van de knop op de stage en noem hem via het Properties Panel : cmdToevoegen.

Als je nu CTRL+ENTER doet kan je wel gegevens intikken maar op de knop staat nog geen link. Opmerking: We maken geen gebruik van knoppen omdat MovieClips flexibeler zijn. Het is een goed idee om steeds in je code te noteren wat je van plan bent om te doen.

Een item aan de lijst toevoegen doen we met de push() opdracht.

pag

37

Action script Basis

De lijst tonen hebben we al dus kopiëren en plakken we het zootje:

Wat je nu ziet hangt wat af van de grootte van je dynamisch tekstveld. Maak het groter als het nodig is. Je ziet bij het toevoegen het tekstveld eerst moet leeggemaakt worden.

Het zou mooier zijn dat de tekst in het invoerveld na het klikken wordt leeggemaakt. Waar je txtInvoer.text = “” schrijft maakt niet uit als je het maar doet ‘na’ je de tekst hebt toegevoegd aan de lijst.

pag

38

Action script Basis

Maak het dynamisch veld nu weer wat kleiner. De bedoeling is om er later een scroll venster van te maken. Als je nu namen blijft toevoegen zullen er op een bepaald moment niet getoond worden. Sla op als Les03_Oef03.fla 7. Verwijderen van items uit de tekstbox Verwijderen van Items uit een array Open de Les03_Oef03.fla als die nog niet open is. Daarnet hebben we gegevens toegevoegd aan een lijst en ze weergegeven in een dynamisch tekstveld. Nu willen we een naam, die we in txtInvoer intikken verwijderen uit de lijst als deze in de lijst voorkomt. We hebben dus weer een knop nodig. Vermits we er al een MC (MovieClip) hebben die toevoegknop heet klikken we er rechts op in de library en kiezen Duplicate. Wijzig de naam in verwijderknop. Open de knop door er op te dubbelklikken en wijzige de tekst in Verwijder. Sleep een instance van de knop op de stage. Noem hem via het properties panel cmdVerwijderen.
pag 39

Action script Basis

We schrijven op wat het ding moet doen en we testen even met CTRL+ENTER

De lijst aflopen doen we net zoals we dat deden om ze in het dynamisch tekstveld te krijgen.

Vergelijken met het txtInvoer veld doen we met een Als() functie Als het huidig element (leerlingenLijst[teller]) de zelfde waarde heeft als de tekst van txtInvoer, verwijder het dan.

pag

40

Action script Basis

Opmerking: if (leerlingenLijst[teller] == txtInvoer.text) “== “is eenvergelijkings operator. Niet te verwarren met de toekenningsopdracht “=” waarmee je een waarde toekent aan een variabele. In het begin zal je dat wel eens vergeten. Even kijken wat er gebeuren zou als we dit over het hoofd zien. We zetten even een trace() functie.

Druk CTRL+ENTER Je zal zien dat bij elke naam die hij tegenkomt hij de tracé uitvoert. Dat komt omdat een waarde toekennen aan een variabele ‘altijd waar is. Bovendien is heel onze lijst naar de vaantjes. We testen dit snel even uit door de lijst na de lus weer te gevenin een trace() opdracht.

Druk CTRL+ENTER om het resultaat te bekijken. Tik in txtInvoer de naam “Pol” en klik verwijderen.

pag

41

Action script Basis

Kortom “==” is niet wat het “=”  We wijzigen “=” terug in “==” en verwijderen de tracé() opdracht terug. Om een naam te verwijderen maken we gebruik van de splice() methode. En lus stoppen voor die helemaal doorlopen is doe je met de break opdracht.

Nu moeten we enkel nog de gegevens opnieuw tonen. Dit doen we door * lijst sorteren * dynamisch tekstveld leegmaken. * lijst aflopen en in het dynamisch veld stoppen We hebben die code al want dat doen we ook in de knop cmdToevoegen.

pag

42

Action script Basis

Druk CTRL+ENTER om uit te testen. Voeg enkele namen toe en verwijder er een aantal. Sla op als Les03_Oef04.fla

8. Gebruik van zelf gemaakte functies In een vorig deel zagen we dat we zelf functies ( ook wel methodes genoemd) kunnen aanmaken. Dit om : De code te vereenvoudigen (herhalende gegevens samenbrengen) Centraal beheer : Een aanpassing moet maar op één plaats gebeuren. Herbruikbaarheid van de code

We hadden het al over parameters. Daar gaan we even op in. Maak een nieuw flashdocument en we schrijven een functie.

pag

43

Action script Basis Doe CTRL+ENTER om het uit te testen. Er gebeurt helemaal niets omdat de functie wel gemaakt is maar ze wordt nergens aangeroepen. We voegen dus een zinnetje bij en drukken weer CTRL+ENTER. Dit werkt maar deze code rekent de som van 10 en 10 uit en is niet herbruikbaar. We kunnen via parameters deze functie steeds met andere getallen laten werken.

Parameters staan steeds tussen haakjes. Ik heb de gewoonte om ze te laten beginnen met een kleine “p”. Het zijn Placeholders het eerste element wordt in de eerste parameter gestopt (pGetal1), het tweede inde pGetal2

pag

44

Action script Basis Deze parameters moeten aan 2 voorwaarden voldoen: Er moeten er evenveel zijn. Ze moeten van het zelfde type zijn. Jammer genoeg is Flash daar heel flexibel in en zal ook teksten optellen

Test eens uit met volgende code :

Het beste is dus ook hier gebruik maken van strong typing zodat je niet voor verrassingen komt te staan.

Een functie kan ook zelf een waarde teruggeven ipv enkel iets uit te voeren. Dat doe je door de een return waarde weer te geven.

Ook hier kan je strong typed gebruiken: Waarmee je eigenlijk wil zeggen telOp is een functie die net als een variabele een waarde bevat. Hier van het type Number.

pag

45

Action script Basis

9. Oefening op CTRL invoer We willen een invulformuliertje Zoiets als dit:

De bedoeling is dat voornaam ‘en’ familienaam ‘moeten’ ingevuld zijn om dan als je op Log In klikt door te verwijzen naar een welkomst scherm. Start daarvoor een nieuw flashdocument. Zorg dat je 3 lagen hebt : Achtergrond, Formulier en Actions. Teken op Achtergrond een kader met een achtergrondkleur naar keuze. Op de laag Formulier tekenen we 2 statische textboxen met respectievelijk Voornaam en Familienaam erin, een dynamisch tekstvak die we txtTitel noemen met als tekst : “Vul je voornaam en familienaam in en klik op login”. Verder nog 2 input text textboxen die we txtVoornaam en txtFamilienaam noemen. We maken een nieuw Movieclip (MC) symbool LogInKnop en maken er 3 lagen aan : Achtergrond, Tekst en Actions.

Op de Achtergrond tekenen we een rechthoek met afgeronde hoeken (45°), op de Tekst laag zetten we het “Log In” en het eerste frame van de Actions laag geven we de naam “Up” via het properties panel.
pag 46

Action script Basis

In het Actions Panel schrijven we voor deze frame stop(); We voegen keyframes in op frame5 (die we “Over” noemen) en op frame 10 een keyframe die we “Down” noemen. Voeg ook keyframes in op de andere lagen op frame 5 en 10 en pas daar de achtergrondkleur wat aan. Sleep ten slotte een instantie van deze knop op de laag Formulier en geef hem via het Proportie Panel de instance-name cmdLogIn Op de hoofdlijn schrijven we in de laag actions op het eerste keyframe:

Test even uit en bewaar als Les03_Oef10.fla

pag

47

Action script Basis Nu schrijven we de code nodig voor het invullen. We doen dit met een functie van het type Boolean die de waarde true zal teruggeven als een naam is ingevuld. We maken 2 variabelen aan en zetten de waarde ervan standaard op false (namen zijn niet ingevuld.

De meegegeven naam wordt vergeleken met een lege string (“”). Indien die leeg is, is is de lengte ervan nul en is het resultaat (return value) false. In het andere geval is het true. Als de knop gelost wordt (onRelease) passen we de functie toe een keer voor txtVoornaam en een keer voor txtFamilienaam. Het resultaat van deze functies stoppen we in de daarvoor aangemaakte variabelen.

Vervolgens kijken we of beide variabelen true (waar) zijn. Even checken met een trace().

pag

48

Action script Basis

Test dit even uit door CTRL+ENTER te drukken. Dit lijkt prima te werken. Sla op als Les03_Oef11.fla We checken even of beide velden ingevuld zijn.

Even testen  Als één van beiden niet is ingevuld passen we de tekst van txtTitel aan. Als het invullen van de velden ok zouden we naar een ander frame kunnen gaan. Maar hoe we de waarden van die velden naar een ander frame kunnen meepakken weten we nog niet dus foefelen we even. Maak boven de laag Formulier een nieuwe laag aan en noem deze Ingelogd. Maak een nieuw symbool(MC), noem die Ingelogd en maak er twee lagen: Achtergrond met een rechthoek erop en Tekst met een leeg dynamisch textbox.

pag

49

Action script Basis

Sluit het symbool door op Scene1 te klikken en sleep een instantie ervan op de net aangemaakte laag. Maak die precies even groot als de huidige achtergrond en zet via het properties panel de alfawaarde op nul en geven het ding de naam ingelogd.

pag

50

Action script Basis

Zorg ervoor dat de laag formulier nu wel weergegeven wordt. Als beide velden ‘wel’ zijn ingevuld dan zetten we de alpha waarde terug op 100. En in txtBoodschap zetten we voorlopig een tekst “OK”.

Test even uit en sla even op als Les03_Oef12.fla Vermist we er “ok” kunnen in stoppen kunnen we er ook de text van txtVoornaam en txtFamilienaam in stoppen.

Test uit en sla op als Les03_Login.fla

pag

51

Action script Basis 10. Dynamisch een MC op de stage zetten Elementen op een dynamische (willekeurige) manier vanuit de library op de stage zetten en aansturen. Start een nieuw flashdocument en maak er een nieuw symbool in aan van het type MC (Movieclip). We maken gewoon een cirkel (75 pixels) die verkleint (40pixels) en dan weer groter wordt.

Als je rechts klikt op het element in de library krijg je een snelmenu. Een van de opties van dit menu is Linkage.

Klik je bij linkage Export for actionScript aan, dan kan je dit symbool een identifier meegeven. Dezelfde regels voor de naamgeving van variabelen geldt ook hier.

De Identifier moet uniek zijn binnen de zelfde library De naam heeft in wezen niets te maken met de naam van het symbool in de library

pag

52

Action script Basis

Zo’n identifier moet je opgeven omdat je nu niet meer een instantie op de stage gaat zetten en daar dan via het properties panel een naam gaat geven.

pag

53

Action script Basis De animatie op de stage zetten doe je met attachMovie().

Deze methode vraagt 3 parameters: De identifier (die je aan het object in de library hebt gegeven) Een instance naam De diepte Van zodra je een nieuwe MC attached met dezelfde naam OF dezelfde diepte wordt de vorige overschreven.

We zetten even drie van die animaties op de stage

We maken hier gebruik van absolute referentie. _root is de hoofdtijdlijn ‘waar’ je je ook bevindt. Vermits we dit schrijven op de hoofdtijdlijn kan je ook gebruik maken van de relatieve verwijzing. In dat geval schrijf je this.attachMovie().

Nu wordt het wat ingewikkeld als je zo’n 10 tal van die objecten op het scherm wil zetten. We maken daarom gebruik van een Named Array.

Bij elke attachMovie wordt een animatie toegevoegd aan de _root Array.

pag

54

Action script Basis

pag

55

Action script Basis Als je dit uitvoert .. zal je een rij met geanimeerde bolletjes zien. We stellen ook de _y waarde in.

Erg leuk is dit niet.. leuker zou zijn als de animaties willekeurig op het scherm komen. Sla op als Les04_Oef01.fla Math.random() Geeft een willekeurig getal tussen 0 en 1 Even uittesten. Wis alle code en neem de volgende over:

Onze stage is 550 pixels breed (X) en 400 pixels (Y). Hoe krijgen we nu een willekeurig getal tussen 0 en 550? Simpel .. we vermenigvuldigen het met 550.

Nu zal dat wel werken

Maar iets netter is het toch als je afrondt.

pag

56

Action script Basis

Als we willen dat onze bol volledig op het scherm staat moet onze x waarde tussen 37.5 en 512.5 liggen .. we ronden af tussen de 40 en de 510. Eigenlijk kan je zeggen dit getal ligt tussen 0 en 470 als je er telkens 40 bij telt. Het zelfde geldt voor de hoogte…de animaties mogen pas beginnen vanaf 40 en mogen niet lager dan 360 getoond worden. Kortom we willen een willekeurig getal tussen 40 en 360 .. of 40+ een willekeurig getal tussen 0 en 320.

Ok ze staan nu telkens op een willekeurige plaats… maar ze bewegen allemaal tegelijk. Je kan dat veranderen door de Clip op een willekeurige plaats gedurende de animatie te sturen. Onze animatie verloopt over 20 frames. Dus sturen we de clip naar een willekeurig getal tussen 1 en 20

Laten we nu ook de grootte variëren tussen 40 en 80:

pag

57

Action script Basis

pag

58

Action script Basis Ook de alpha-waarde kunnen we doen varieren en omdat je eenbeter effect krijgt verhogen we het aantal MC (50).

Test uit en sla op als op als Les04_Oef02.fla Afronden : Behalve Math.round() zal je ook dikwijls Math.floor() tegen komen. Bij deze laatste manier wordt ip van afgrond, afgekapt 1,9 wordt dan 1 ipv van 2

11. Oefening op Dynamisch MC op stage zetten MOUSETRAIL Mousetrail We maken een animatie die onze muis volgt. Open Les04_Oef2.fla en gooi er alle code af. We willen telkens als de frame zich herhaalt, dat er iets gebeurt.

Dit doet wel iets…maar telkens we een nieuwe clip attachen.. krijgt die dezelfde naam en diepte. Vandaar dat we een teller voorzien en die ook bij elke onEnterFrame ophogen.

pag

59

Action script Basis

We zagen tot nu toe dat een animatie in één frame zich niet herhaalt maar dat doet die wel als je een onEnterFrame schrijft. Afhankelijk van de framerate gaat die nu x-aantal keer per seconde een clip toevoegen om de plaats waar je muis zich bevindt. Nu passen we een truukje toe om telkens te zorgen dat er maar 10 clips zijn. Door telkens de teller op 0 te zetten als het 10 de element bereikt is krijgen we duplicaten in naam en diepte, waardoor de vorige MovieClips overschreven worden.

Willen we de cursor ‘zelf’ verbergen dan tikken we nog Mouse.hyde() na de declaratie van teller. Test uit en sla op als MouseTrail.fla

pag

60

Action script Basis

12. De scope van een variabele Scope van een variabele.Object vervolg; De scope is de ruimte waarin een Object/Variabele bestaat

13. De Tijdslijn Een eerste SCOPE is de tijdslijn. Elke MC heeft er één. Alles wat op de stage wordt gezet staat ook op een tijdslijn. Deze SCOPE noemen we _root. Start een nieuw flasgdocument. We beginnen met een nieuwe MC te maken. We noemen deze “bol”. Teken er een cirkel op en sluit het symbool door op Scene1 te klikken. Klik in de library rechts op dit symbool en kies in het snelmenu Linkage.

Klik Export for ActionScript aan en geef als naam voor de Identifier “bol” in. Vanaf nu bestaat het object in actionscript en kunnen we het op de stage zetten. Selecteer daarvoor het eerste frame en open het ActionScript Panel.

De eerste “bol” slaat op de naam die we er via Linkage aan gegeven hebben. De tweede “bol” id de naam die we aan het huidige object geven zodat we er de eigenschappen zoals _x en _y kunnen van instellen. 10 is de diepte. Daarvan hebben we al gezegd dat die uniek moet zijn in de tijdslijn. Elk nieuw object met dezelfde naam of dezelfde diepte overschrijft het vorige. De debugger open je met CTRL+SHIFT+ENTER

pag

61

Action script Basis We drukken CTRL+SHIFT+ENTER om de debugger te openen.

Voorlopig zien we _global en _mevel0. Als je nu op start klikt :

Zie je dat er op _level0 een object staat : _level0.bol. We voegen er een tweede bol bij :

Open terug het debugvenster :

Sluit en sla het bestand niet op. 14. De functie Een tweede SCOPE is de functie. Daar zijn wat rare dingen aan de hand bij het al dan niet gebruiken van het keyword var. We starten een nieuw flashdocument. We voeren volgende code on:

pag

62

Action script Basis

De variabele naam is bepaald binnen de SCOPE hoofdtijdslijn en kan binnen dezelfde tijdslijn opgevraagd worden. Als je de animatie uitvoert krijg je Frederik in het output panel. Wijzig de code in:

Als resultaat (na het uitvoeren) krijg je de melding undefined. Voeren we de functie uit net voor de trace() opdracht ;

Dan krijg je wel Claerhout in het output panel. Maw familieNaam wordt buiten de scope van de functie getoond. Zet je binnen de functie het keyword var ‘voor’ de variabele naam dan blijft de variabele enkel bekend binnen de scope van de functie.

Zal dus ook undefined weergeven. Wil je die familieNaam dus buiten de functie nog bereiken, dan zal je die buiten de functie moeten declareren zoals dat bij naam het geval was.

pag

63

Action script Basis 15. Globale variabelen Deze variabelen zijn toegankelijk op alle momenten van je applicatie: _global.variabeleNaam We maken terug een MC aan die we via linkage de identifier bol meegeven. In de MC tekenen we gewoon een bol. We definiëren een globale variabele _global.naam en zetten via code een instance van die MC op het scherm.

We koppelen de variabele naam aan de MC en kennen er een waarde aan toe. Via de trace() opdracht vragen we de naam op.

pag

64

Action script Basis Druk CTRL+ENTER om het resultaat te bekijken.

Wijzigen we _global in var. Dan zal dat net zo goed werken omdat alle variabelen gedeclareerd op de hoofdtijdlijn in alle onderliggende objecten kunnen ‘gezien’ worden. We voegen een tweede MC via code.

16. Een Dynamische knoppenmenu De bedoeling is om een eenvoudige website te maken met 3 knoppen : Home, Wie zijn we en Wat doen we. Daarvoor maken we één knop aan die we 3 keer zullen gebruiken, een MC voor Home, Wie, en Wat. We starten met het aanmaken van een nieuwe MC en geven hem meteen een Identifier naam mee. Eerst vink je wel export for ActionScript aan. We maken er twee lagen op aan Achtergrond met daarop een knop en Tekst met daarop een dynamisch tekstveld met de instancename tekst.

pag

65

Action script Basis

Sluit het ontwerp door op Scene1 te klikken.

Maak een MC voor Home (teken een Huisje), een MC voor Wie (Teken een ventje) en Wat (Maak een bewegende tekst). Zorg ervoor dat je telkens Export For actionscript selecteert en geef als identifier respectievelijk home, wie en wat op. Sla op als Les05_Oef02.fla (of open die als je geen zin hebt de animaties zelf te maken  In het actions panel maken we eerst 2 Arrays aan om de labels en de identifiers op te slaan.

We zetten dynamisch de knoppen op de stage :

pag

66

Action script Basis

We zorgen er nu voor dat de naam op de knop komt. Die halen we uit de lijst (Array) labelLijst. We hadden het dynamisch tekstveld op onze knop tekst genoemd. Om er tekst ik te krijgen moeten we die in tekst.text steken.

pag

67

Action script Basis De knoppen komen er nu wel op maar we kunnen er nog niet op klikken. We maken dus een onRelease event.

Telkens we nu op een knop klikken krijgen we een boodschap “Geklikt”. Maar we weten niet op welke knop we geklikt hebben. Daarom geven we de knoppen op het moment dat ze aangemaakt worden een identificatie (ID) mee. We testen ook uit of die daadwerkelijk meegegeven wordt.

In de plaats van het bericht te tonen laden we de juiste movieclip. De nummer ervan zit in de ID. De naam halen we uit de identifierLijst-Array. De root die dus de parent van de de knop is. Daarin laden we de MC met de naam uit de lijst. We geven hem steeds de naam inhoud en de diepte is telkens 20. Daarom zal telkens als we op een knop klikken de vorige MC vervangen worden.

pag

68

Action script Basis We zouden dus ook kunnen schrijven (maar het is niet de voorkeursschrijfwijze:

We zetten de MC op een goeie plaats.

Test uit en sla op als Les05_Oef03.fla 17. Het TextObject

TextField Object  Daar stel je het veld zelf mee in, je zegt op welke tijdlijn het staat. TextFormat Object Daar maak je de opmaak mee (de stijl)

Maak een nieuw FlashDocument aan en neem onderstaande code over.

pag

69

Action script Basis

Er zijn een hele boel eigenschappen voor een TextField. Je vindt ze door op het plusje te klikken en Built-in Classes/Movie/TextField/Properties te klikken.

TextField eigenschappen _alpha, autosize, background, backgroundColor, embededFonts, html, htmlText, length, multiline, password, text, textColor, textHeight, textWidth, type, wordWrap, _width, _height,_x, _y, _xmouse, _ymouse Op gelijkaardige wijze vind je ook de eigenschappen voor het TextFormat object Align, blockIndent, bold, bullet, color, font, indent, italic, leading, leftMargin, rightMargin, size, tabStops, target, underline, url We maken dus een nieuw TextFormat Object en passen er een paar eigenschappen van aan.

pag

70

Action script Basis

We passen de opmaak toe op naamVeld :

Nu zal je zien dat de tekst niet helemaal meer in het veld past. We stellen daarom de eigenschap autosize in.

De linkerkant van het tekstveld blijft staan en de rechterkant wordt verplaatst tot waar nodig. naamVeld.autoSize = “right” doet het omgekeerde. Om dat aan te tonen maken we een nieuw TextField en passen er dezelfde opmaak aan toe.

Test even uit

pag

71

Action script Basis We maken een dynamisch invulveld. Dat is ook een dynamisch veld maar het type ervan is input.

Als je nu een lettertype wil die niet op de pc staat van de gebruiker moet je het lettertype in de animatie stoppen. Dat heet Embedden. We maken een nieuwe opmaak:

Klik New Font.. en kies je font uit de lijst. Geef de naam in en je zal zien dat het font in de library verschijnt.

pag

72

Action script Basis

Als je er rechts op klikt kan je Linkage… aanklikken. Geef een Identifier mee en klik OK.

pag

73

Action script Basis We maken een nieuw TextFormat en we zeggen dat het nieuwe font moet geEmbed worden

Willen we een veld om een wachtwoord in te vullen dan maken we een input tekstveld en zorgen ervoor dat de eigenschap password op true staat.

Je kan de opmaak in een tekstveld ook via HTML tags opmaken. Deze opmaak is vrij rudimentair. Je kan er bv geen figuren mee invoeren. Om de tekst te laten uitbreiden naar onder moet je multiline op true, wordwrap op true en autosize op true zetten. Om de html te zien moet je de eigenschap html op true zetten en htmlText gebruiken ipv text.

Test uit en sla op als Les05_Oef04.fla

pag

74

Action script Basis

18. startDrag stopDrag startDrag & stopDrag startDrag hangt een MC aan de muispointer. Open een nieuw flashdocument en teken op de stage een bol (zonder rand). Klik of dubbelklik om de cirkel te selecteren en klik er rechts op om hem te converteren naar een MC. Geef hem de instancename bol. Dubbelklik er op en plaats hem als dat niet het geval is uit het centerpunt. We schrijven nu code om de bol versleepbaar te maken.

Test even uit. Je zal zien dat de muis pointer op het centerpunt blijft staan als je de bol versleept. Nu willen we natuurlijk dat de bol gelost wordt als we de muis lossen. Dus schrijven we code voor de onRelease:

Als je dit uittest zal je merken dat je de bol nooit kan lossen omdat de cursor nooit ‘op’ de bol staat. We moeten hier dus een onReleaseOutside hebben die hetzelfde doet als de onRelease.

Sla op als Les06_Oef01.fla

pag

75

Action script Basis Oefening : We starten met een nieuw leeg flashdocument met daarin een nieuwe MC die we balk noemen. We zetten de y coördinaat op 0 dat zal het ons straks gemakkelijker maken om de slider op 0 te zetten De breedte stellen we in op 2px en we centreren zodat de x positie op -1 komt te staan. Ook gemakkelijk om te rekenen is de hoogte van de balk op 100 px in te stellen. Inkleuren kan je zoals je dat zelf wilt maar ik hou het eenvoudig op zwart.

We maken gelijkaardig ook een een MC slider die we zullen gebruiken als schuifknop. Ik maakte hem 30px breed en 10 px hoog en centreerde hem zowel horizontaal als vertikaal en kleurde hem donkerblauw. We maken de verschillende lagen aan om er de balken, de sliders, de bol en actionscript op te zetten.

pag

76

Action script Basis

We geven beide balken een instancename mee en positioneren zoals hierboven. Op de layer sliders zetten we de sleephandels. Vermits de slider 30 px breed is zetten we de x-waarde op 35 ( positie van de balk – de helft van de breedte van de slider) (50-15 =35). Vermits de slider op de balkAlpha beneden staat is de y-waarde (startpositie balkAlpha + hoogte balkAlpha = 150 + 100 = 250) De zelfde redenering gebruiken we om er de sliderGrootte op te zetten. Sla op als Les06_oef02.fla

pag

77

Action script Basis

We gaan er nu voor zorgen dat we de slider op de balkAlpha kunnen bewegen. Vermits we het centrum op het midden staan hebben, maakt het niet uit of we lockCenter op true zetten of niet.

De rechthoek waarin de slider mag bewegen is een lijn waar van de bovenste positie (50,150) is en de onderste (50,250).

Test even uit of het allemaal wel klopt We schrijven even snel de functie om de slider te lossen.

pag

78

Action script Basis Aanpassen voor de sliderGrootte is snel gedaan, copy & paste, aanpassen van de namen en het gebied waar de slider mag sliden.

Als beide sliders werken slaan we het bestand op als Les06_Oef03.fla Nu gaan we iets doen met de sliders. Met de linkse zullen we de alphawaarde die nu op 0 staat vergroten naar 100 om een object doorzichtig te maken. We maken dus een MC, een groen bol van 250 x 250 px en we geven deze MC via het propertiesvenster een instancename bol. 100 % is de hoogte van de balk. We zouden dus kunnen schrijven 250-this._y. Maar om het een beetje algemener te houden als de balk zou verplaatst worden schrijven we dat 100% De balk._y waarde is + de hoogte van de balk. Het percentage waar de slider op staat is dus (balk._y +balk._hoogte) – this._y. En vermits we van onder naar boven gaan 0->100 wordt het 100- percentage van de slider. Omdat we die waarde straks in een tekstveldje willen laten zien stoppen we dit resultaat in een variabele alphaPercentage. We passen de onRelease van de sliderAlpha aan.

pag

79

Action script Basis Vermits we die waarde in een tekstveldje willen zien verschijnen maken we een nieuwe layer die we tekst noemen. Boven de beide balken tekenen we een dynamisch tekstveld en stellen de lettergrootte ervan in op 12 en de breedte van het tekstveld op 40. Als lettertype Verdana. We noemen de tekstvelden respectievelijk txtAlphaPercentage en txtGroottePercentage.

Het resultaat in het tekstvak zetten is kinderspel.

We doen nu net hetzelfde voor de grootte. De grootte pas je aan via _xscale.

pag

80

Action script Basis Sla op als Les06_Oef04.fla

pag

81

Action script Basis

19. onEnterFrame Dit werkt maar de waarden worden pas aangepast nadat de muistoets gelost is. We lossen dit op door het gebruik van onEnterFrame. Als je hier pas inspringt open Les06_StartSetInterval.fla De functie onEnterFrame voert afhankelijk van de framerate code uit. Pas de sliderAlpha.onPress aan, neem de volgende code over en test uit.

Je zal zien dat het woord “gesleept” verschillende (12 keer per seconde) keren in het trace-venster verschijnt en nooit stopt. Stoppen moeten we doen bij de onRelease. Stoppen met de code die uitgevoerd wordt onEnterFrame doe je door delete this.onEnterFrame.

Eigenlijk zou de code die bij de onRelease staat moeten uitgevoerd worden bij onEnterFrame en moet de delete gebeuren wanneer de knop gelost wordt. Zo wordt de code voor de sliderAlpha:

pag

82

Action script Basis

pag

83

Action script Basis De code voor het aanpassen van de grootte is gelijkaardig.

onEnterFrame Wordt aan de snelheid van de famerate uitgevoerd. Elke MC kan slechts 1 onEnterFrame hebben Wordt gestopt door delete MC.onEnterFrame Test uit en sla op als Les06_Oef06.fla

pag

84

Action script Basis

20. setInterval De functie setInterval is de moderne versie van onEnterFrame. Je kan meerdere setIntervals hebben. Telkens je er een aanroept krijgt die een nummer mee. Met dit nummer kan je het setInterval ook verwijderen. Open Les06_StartSetInterval.fla

setInterval verwacht minstens een functie die moet uitgevoerd worden en een tijd (interval) in miliseconden waarin het wordt uitgevoerd.

Roept de functie checkSliderAlpha aan om de 100 ms (dus 10 keer per seconde). In de functie checkSliderAlpha moet staan wat we daarnet deden nl. alphaPercentage moet uitgerekend worden, de alfawaarde van het object moet in gesteld worden (nu zal dat slider._y moeten zijn ipv this._y en de tekst in txtAlphaPercentage moet aangepast worden.

onPress en onRelease worden dan

Om een uit te testen wat er in die ID zit zetten we er even een trace() tussen.

pag

85

Action script Basis

pag

86

Action script Basis Test even uit en verwijder de trace() opdracht. De code aanpassen voor de grootte is maar een peulschil.

Als je dit uittest zal je bij het vergroten en verkleinen opmerken dat het in schokjes gebeurt. Zet daarom het interval daar op 50 milliseconde.

21. Oefening Dynamische sliders We hebben de oefening met de slider alle objecten op het scherm getekend. Willen we dit dynamisch en achteraf gemakkelijk aanpasbaar, moeten we het anders aanpakken. Open Les06_StartSliderDynamisch.fla. In de library vind je balk met een hoogte van 100px, een breedte van 2 px, de xwaarde op -1 en de y-waarde op 0. Via linkage werd een identifier op gegeven nl balk. De slider heeft een breedte van 30, een hoogte van 10, x staat op -15 en y op -5. De identifier naam is slider. De bol tenslotte is 250 x 250 px, de x- en y waarde staan op -125 en de identifiernaam is bol. Op de stage staat nog niets en we hebben de enige layer hernoemd naar Actions. We geven de balk een start rij en een start kolom mee. De slider zal gebruik maken van de zelfde waardes. De y waarde van de eerste slider is die van de balk + de lengte van de balk.

pag

87

Action script Basis

De rechthoek waarover gesleept mag worden wordt dan van (balkAlpha.kolom,balkAlpha.rij) tot (balkAlpha.kolom,balkAlpha.rij +balkAlpha._height)

Test alvast even uit en sla op als Les06_SliderDynamisch01.fla

pag

88

Action script Basis We zetten snel even een bol op de stage.

En we passen de onPress en de onRelaese aan.

We hebben ook nog twee dynamische tekstboxen nodig. We maken de eerste aan meteen onder de slider. Op die manier staan de opmaak van de balk, de slider en de tekst bijeen.

pag

89

Action script Basis Nu moeten we nog de functie checkSliderAlpha maken.

Test uit! Als je pech hebt zal je merken dat je op een zeker moment niet meer aan de slider kunt. Dat komt omdat in dat geval de tekst boven de slider staat. Ik heb het opgelost door het tekstvak wat naar boven te schuiven. Je zou ook kunnen de depth van de slider groter maken dan die van het tekstvak.

Stel ook vast dat de opmaak van de tekstbox verdwijnt eens we gesleept hebben. We passen dus de functie checkSliderAplha wat aan:

Sla op als Les06_SliderDynamisch02.fla Werk verder af voor de sliderGrootte en sla op als Les06_SliderDynamischOplossing.fla

pag

90

Action script Basis

22. hitTest In veel gevallen zal je willen weten of het object dat je sleep een ander raakt. Maak een nieuw flashdocument en maak er 3 lagen op aan: bol, driehoek en Actions. Maak twee MC bol en driekhoek.

Op de Actions layer zetten we code om de driehoek te laten slepen. Bij het loslatenvan de knop tracen we of de driehoek de bol geraakt heeft.

Test even uit. We willen nu hebben dat de driehoek terug naar zijn oorspronkelijke plaats schiet als er geen hit is en naar het midden van de bol als er wel een hit is.

pag

91

Action script Basis Daarvoor houden we de startcoördinaten van de driehoek bij. Om te weten wat de coördinaten zijn van de driehoek ‘in’ de bol, sleep je hem er in en noteer het resultaat.

Test en sla op als Les06_hitTest01

23. Bewerkingen op string en herbruikbaarheid van code (AS bestand) Eigenschap van String Een String kent maar één eigenschap nl zijn lengte naamVanDeString.length

pag

92

Action script Basis Methodes van String : We beperken ons tot een aantal belangrijke. Stel we hebben een string tekst = “Anorexiax” charAt(x) geeft het teken terug op plaats x (vanaf 0) tekst.charAt(5) => “x” indexOf(“x”) geeft de positie van de eerste “x” in de string. Is het teken niet gevonden dan is de waarde -1 tekst.indexOf(“x”) => 5 lastIndexOf(“x”) geeft de positie van de laatste “x” in de string. tekst. lastIndexOf(“x”) =8 substr(start, AantalTekens) tekst.substr(1,2) => “no” substring(start,einde) tekst.substring(1,2) =>”n” toLower(String) zet alle tekens van de string om naar kleine letters tekst.toLower() => “anorexiax” toUpper(String) zet alle letters van de string om naar hoofdletters tekst.toUpper() => “ANOREXIAX”

We maken een programaatje dat een email adres controleert. De “@” Test1 Een eerste regel waaraan het moet voldoen is dat er één “@” in staat. Dat is het geval is de indexOf(“@”) == lastIndexOf(“@”).

Neem deze code over en test even uit. Zet daarna elders nog een “@” en test nog eens uit. Als die twee aan elkaar gelijk zijn dan is er maar 1. Is er geen enkel dan zijn die twee waarden echter ook aan elkaar gelijk.

pag

93

Action script Basis Vermits we straks die positie van de “@” nog nodig hebben slaan we die op in een variabele posi tieAt.. Als die -1 is of verschillend van de lastIndexOf(“@”) dan voldoet het emailadres niet.

We testen even uit met verschillende en geen enkele @. Bevat de email geldige tekens Test 2 Een tweede test is er een op het al dan niet voorkomen van sommige karakters. Wat wel mag zijn alle letters a-z, A-Z, cijfers van 0-9, “-“, “_”,”.” en natuurlijk “@”. We stoppen deze tekens in een string die we toegelatenTekens noemen.Hoofdletters moeten we niet opslaan omdat we toLower() zullen gebruiken. We lopen heel de string email af en checken of het teken in de lijst voorkomt. Indien dat niet het geval is gaan we uit de lus en geven een foutmelding. We testen eerst even uit hoe we de karakters van de string één voor één kunnen zien.

test even uit en pas vervolgens de tekst aan zodat de controle plaats vindt.

pag

94

Action script Basis

Behalve een string met toegelaten tekens maken we ook een Boolean variabele aan die we initieel op true zetten. Van zodra er een slecht teken is, zetten we deze variabele op true en springen we uit de for-lus. Van zodra we nu een hoofdletter zetten hebben we nu een foutief email adres. We zetten het teken dus om naar kleine letter met toLowerCase().

Geen punt net voor of net na het @ teken Vermits we positieAt al hebben is het maar een kleine moeite om na te gaan of het teken ervoor en het teken erna een “.” is. Bovendien mag het “.” Ook niet op de eerste plaats staan (positie=0).

pag

95

Action script Basis De extentie na moet 2-4 tekens zijn. Deze test controleert de extentie. Daarvoor halen we eerst de positie op van het laatste punt en stoppen alles wat er achter komt in een nieuwe string. De lengte van die string moet minstens 2 en maximaal 4 zijn.

We testen even uit met een tracé of het wel klopt. We zorgen nu voor een foutmelding indien de extensie te klein of te groot is.

Test uit en sla op als ctrlEmail.fla We zorgen er nu voor dat de code herbruikbaar wordt door het in een functie te stoppen.

De functie heeft een parameter van het type String en is zelf van het type Boolean.

pag

96

Action script Basis We maken bovenaan een Boolean variabele en zetten die op true. We gaan ervan uit dat het emailadres goed is voor we het testen. Daarna kopiëren we de code die we hadden eronder.

Vervolgens zetten we telkens we een trace(“Test x failed”) hebben de waarde van foutloos op false.

Helemaal onderaan de functie zenden we de waarde van foutloos naar de functie.

Om de functie te testen doen we bovenaan een trace() van het resultaat.

Test uit met elke fout die je kan bedenken en sla op als ctrlEmailFunctie.fla

pag

97

Action script Basis Nu hebben we een script dat een email adres checkt. We zouden die later in andere projecten nog kunnen gebruiken. Daarom behouden we enkel de functie (gooien de eerste regels code er uit en slaan op als een AS bestand. ctrlEmail.as

In verkenner zal je nu een ander icoontje zien.

Start nu een nieuw flashdocument. Op de stage tekenen we een dynamic text, een inputtext (met rand) en een movieclip die een ok-knop moet voorstellen. Geeft de instance namen zoals hieronder.

pag

98

Action script Basis Om de de functie isEmail te kunnen gebruiken moeten we een zinnetje hebben die deze code toevoegt.

Als je nu CTRL+ENTER duwt om het uit te testen dan zal je een fout krijgen omdat de twee bestanden niet in de zelfde map staan. Sla het huidig bestand op als tstCtrlEmail.fla. Als je nu geen fout krijgt is alles ok. Opmerking : Op het einde van de zin mag je geen “;” zetten! We schrijven nu code voor de knop:

Als het e-mail adres ok is komt er true in het tekstvak, zoniet komt er false. Bij het testen blijkt dat nu het adres xxx.x@x nog mogelijk is. We passen daarom de code wat aan.

24. loadMovie Met loadmovie(“Bestandsnaam.swf”,level) kan je een bestaande swf (gecompileerde movieclip in een andere MC laden. Met attachMovie laad je een MC vanuit je library in een MC. Met loadMovie laad je een externe MC in een MC op je stage. Je kan daarvoor een lege MC op je stage zetten of hem dynamisch aanmaken met createEmtyMovieClip. Voordeel van een loadMovie is dat je • enkel de MC ophaalt die nodig is (niet alle knoppen worden aangeklikt • een kleine basis animatie behoudt die snel geladen is.
pag 99

Action script Basis

We starten een nieuw flashdocument en tekenen er een letter A op in een static textbox. We plaatsen de letter helemaal linksboven. We bewaren het bestand als A.fla en compileren door CTRL+ENTER te drukken.

We doen hetzelfde voor een letter B en een letter C, bewareb respectievelijk onder de naam B.fla en C.fla en we compileren ze (CTRL+ENTER) We hebben nu 3 bestanden A.swf, B.swf en C.swf We maken een hoofdMC met knoppen zoals we dat eerder al deden met dynamische knoppenmenu in Les05. We herhalen even. Start een nieuw flashdocument.

We maken een nieuwe MC met daarin twee lagen. Op de onderste (achtergrond) tekenen we een rechthoek en op de andere (Tekst) zetten we een dynamische textbox die we een instancename txtLabel geven.

pag 100

Action script Basis We kunnen deze knop niet dynamisch op de stage zetten als we er geen naam aan geven bij het exporteren naar actionscript. Selecteer daarom de knop in de library, klik er rechts op, selecteer in het snelmenu Linkage en kies export for actionscript. Laat als naam knop staan en klik OK.

Via actionscript zetten we de knoppenop de stage.

Test even uit.

pag 101

Action script Basis Volgende stap is de labels op de knoppen zetten.

We geven nu elke knop een ID mee zodat we weten op welke knop geklikt is.

We maken bovenaan een lege movieclip bovenaan zodat we plaats hebben om die swf’s in te laden.

We zorgen er nu voor dat we op de knoppen kunnen klikken en dat de inhoud wordt geladen in inhoud.

Test uit en sla op als Les08_oef01.fla

pag 102

Action script Basis

25. onEnterFrame preloader We willen een MC http://schoolweb.argo.be/kta/melle/cursussen/FlashActionScript/loper.swf dynamisch laden. Surf er even naartoe om te checken of de link klopt. Zoek een ander grootbestand als je er niet aan kan. Vermits dit een wat grote MC is zal dat even duren. We zouden graag het verloop van dat laden visueel willen weergeven. We starten een nieuw flash document en we maken erin een nieuwe MC die we mcPreloader noemen. We vinken Export for ActionScript aan en geven de Identifier naam “preloader” in.

We maken 3 lagen : Achtergrond, Kader en Barr. We tekenen een rechthoek van 200x40 pixels met een rand van 5 pixels. Selecteer de rand knip hem en plak hem op de juiste laag.

pag 103

Action script Basis

Op de laag Barr tekenen we een rechthoekje in een iets donkerder grijs. We zetten de positie (0, -20) zodat het hetzelfde beginpunt heeft als de kader. De hoogte ma ook 40 zijn.

Uiteindelijk zetten we de Width op 1 pixel. We verbergen even de andere lagen.

Klikken rechts op het streepje en kiezen in het snelmenu Convert to symbol.

pag 104

Action script Basis Geef de MC de naam bar, vink aan dat je export for actionscript wil en laat daar als Identefier “bar” staan. Belangrijk is dat je het Registration punt links zet. Doe je dat niet dan zal bij het wijzigen van de breedte van de bar, de wijziging niet van links naar rechts maar zowel naar links als naar rechts uitbreidt waardoor de animatie buiten het kadertje zal vallen.

Bij het MovieClip Object vind je twee methodes .getBytesLoades() en .getBytesTotal() We gebruiken deze methodes om de staat van vordering weer te geven.

We laten de ProgressBar even voor wat het is en we openen het actions panel.

Als we dit uittesten wordt de MC meteen ingeladen. Om geregeld de vordering van het laden te zien..gebruiken we onEnterFrame.

pag 105

Action script Basis Het totaal in te laden bytes is

Als de swf te snel geladen wordt moet je in Internet Explorer even je cache wissen. Feit is nu dat de onEnterFrame nooit wordt beëindigd. Dus het eerste wat we doen is die onEnterframe Stop zetten van zodra alle bytes zijn geladen. Je zou kunnen zeggen : if (this.inhoud.getBytesLoaded() == this.inhoud.getBytesTotal()) maar in het begin zin beiden 0 dus we checken eerst of één van de twee 0 is.

Als het laden te snel gebeurt moet je in internet explorer even de tijdelijke internetbestanden verwijderen. Start IE, Extra/Internetopties…tijdelijke Internet bestanden/Bestanden verwijderen.

pag 106

Action script Basis We laten nu de balk groter worden. Sleep vanuit de library een instance van de preloader op de stage en geef hem de instancename preloader.

Een andere preloader heb ik gemaakt in onEnterFramePreloaderBier.fla waarbij ik gebruik heb gemaakt van een mask. Om de evolutie van die preloader te doen gebruik in gotoAndPlay(percent).

pag 107

Action script Basis

26. setInterval preloader setInterval (zie les06) heeft minstens 2 parameters: De naam van de functie die wordt aangeroepen en het interval (snelheid waarmee het uitgevoerd moet worden). setInterval(functieNaam, interval) Je kan echter nog één of meerdere parameters meegeven die je opneemt in de functie die je aanroept. setInterval(functieNaam, interval, parameter) Als parameter geven we de in te laden movieclip mee. De rest blijft net het zelfde als de onEnterFrame behalve dat je naar de parameter refereert in plaats van de movieclip.

Voordeel tov een onEnterFrame is dat je met die ene functie al je movieclips kan laden.

pag 108

Action script Basis

27. movieClipLoader Een andere manier om een controle te hebben over een in te laden MC is het moviecliploader object. Dit object werkt enkel in samenwerking met een listener object die voortdurend luistert of er vorderingen zijn in het laden van de MC. Het listener object heeft een aantal methodes.

onLoadInit is misschien wat raar gekozen als naam. Op dat moment kan je de geladen MC besturen. Methode onLoadStart onLoadProgress onLoadComplete onLoadInit Actie Zet de preloader op de stage Toon de vooruitgang met de preloader Verwijder de preloader De movieclip is volledig geladen en we kunnen er nu aan.

Openhet bestand startMCLoader.fla. Daarin zit de preloader die we in de vorige oefeningen gebruikten en in het actions panel zie je dat we dezelfde MC laden als vorige keren.

Het laden van de MC gebeurt in 4 stappen : - We maken een MovieClipLoader - We maken een Listener Object - We koppelen het Listener Object aan de MovieClipLOader - We zeggen aan de MovieCliploader wat waar moet komen.

pag 109

Action script Basis

Nu schrijven we de methodes voor het luister Object. Voorlopig doen we het even met een trace zodat je ziet wat er precies gebeurt.

Als resultaat zou je moeten krijgen wat je hier onder ziet. De onLoadInit is dus het laatste wat er wordt uitgevoerd.

pag 110

Action script Basis

onLoadStart : Op dat moment zetten we de preloader op het scherm. We kunnen this.attachMovie niet gebruiken omdat we het hier over het luisterobject hebben. Ook _parent werkt hier niet ( _parent.attachMovie) omdat je niet kan zeggen wat de _parent van het listener object is. Als je dat via een trace(_parent) zou opvragen krijg je undefined terug. De enigste oplossing is dat je via _root werkt.

pag 111

Action script Basis onLoadProgress Hier zorgen we ervoor dat onze preloader de vooruitgang toont. In de functie die we uitvoeren moeten we de Movieclip, het aantal geladen bytes en het totaal aantal bytes als parameter meegeven.

De volgorde van de parameters zijn belangrijk. De naam mag je zelf kiezen.

Let wel weer dat je niet this of _parent gebruikt.

pag 112

Action script Basis Als de MovieClip volledig geladen is ruimen we de preloader op. onLoadComplete

onLoadInit Als we aan de Movievlip kunnen ruimen we de MovieClipLoader en de Listener op.

Meestal laat men op de in te laden MC het eerste frame leeg zodat je initieel niets ziet. Je zou hier de MC ook kunnen starten door _root.inhoud.gotoAndPlay(2) te zetten.

28. loadVars (gegevens van de server halen via url) Als je naar een url van een site kijkt zie je geregeld iets in het genre van :

Na de eigenlijke url die eindigt op een? geeft men parameternamen en waarden. Gescheiden door een & Deze waarden komen steeds in paren voor .. van daar dat men spreekt van valuepairs. Deze gegevens worden doorgegeven naar de server via de url. Sommige tekens (zoals é en spatie) zijn niet toegelaten in een url en worden daarom gecodeerd. Een spatie wordt bv vervangen door %20. Het LoadVars object beheert die codering/decodering.

pag 113

Action script Basis

Opdracht : Maak een tekstdocument aan (waar we zullen in stoppen wat eigenlijk na het vraagteken van een url komt) noem het adres.txt en zet er in “Naam=JeEigenNaam&Voornaam=JeEigenVoornaam” Maak een nieuw Flashdocument aan en noem het Adres.fla en sla op in dezelfde map. Om de value-pairs in te lezen heb je in flash een loadVars object nodig.

pag 114

Action script Basis Indien je data van een website haalt zou je het doen als hieronder.

Wij halen het uit het tekstbestandje adres.txt.

Hoe weten we nu of het inlezen gelukt is? Er is een methode onLoad die dat controleert.

Gegevens uit het LoadVars object halen is eenvoudig.

pag 115

Action script Basis Willen we nu dat die naam op het scherm komt ipv in een trace vensterke dan maken we on-the-fly een dynamisch tekstveld aan, doen de opmaak ervan en geven het weer.

29. Oefening op loadVars We maken een sitetje met 3 pagina’s. We maken een tekstbestandje films.txt met volgende inhoud. Titel1=Harry Potter and the Goblet Of Fire&Cover1=GobletOfFire.jpg&Duur1=157 minuten&Titel2=King Kong&Cover2=KingKong.jpg&Duur2=188 minuten&Titel3=Chronicles of Narnia&Cover3=Narnia.jpg&Duur3=135 minuten&Aantal=3

Copieer de bestanden uit de StartBestanden.zip naar het mapje waar je deze oefening in zal bewaren.

pag 116

Action script Basis We starten een nieuw flashbestand en slaan het meteen op als films.fla. De eerste stap is het aanmaken van een nieuw LoadVars variabelen en het inlezen van de tekst.

Even checken of het gelukt is:

We schrijven een functie die het eerste gegeven toont.

Onze eerste film staat er op. We maken onze functie wat flexibeler zodat we straks op een eenvoudige manier kunnen navigeren. We hebben de titels respectievelijk Titel1, Titel2 en Titel3 genoemd. Net als de arrays die we toen nu toe gebruikten kunnen we nu ook vrij flexibel die parameters opvragen. ingelezenData[“Titel”] + nummer We passen onze onload even aan:

pag 117

Action script Basis

Alsook de functie om de gegevens te tonen:

pag 118

Action script Basis We maken een knop om naar het volgende record te gaan en eentje om naar vorige te gaan. volgende en vorige.

En een functie die de knoppen toont afhankelijk van het getoonde record.

Test even uit met een ander nummer :

pag 119

Action script Basis En we declareren een globale variabele waar we het huidig record in bijhouden:

Nu zorgen we ervoor dat bij klikken we naar het volgende/ vorige record gaan.

pag 120

Action script Basis

30. Tekstopmaak (htmlText en stylesheet) Tekst in een dynamische tekstbox zetten kan je op verschillende manieren. We maken een nieuw tekst document dat we zo meteen met LoadVars zullen inlezen.
Tulipa Liliaceae, kruidachtig gewas, bolgewas De tulp is een bloem met een rijke geschiedenis. Het wordt gezien als een typisch Nederlandse bloem, ook wel als de nationale bloem. De oorsprong ligt echter in het Verre Oosten, waarschijnlijk de omgeving van Iran of Turkije.

Bewaar als tulp.txt We starten een nieuw flashdocument en bewaren als tulp.fla in de zelfde map als het tekstbestand. We maken er een nieuwe LoadVars variabele aan en lezen de tekst in. We controleren snel even of het inlezen gelukt is.

We maken nu een een dynamische tekstbox en stellen de waarden zo in dat heel de tekst kan getoond worden.

pag 121

Action script Basis De tekst komt er al in maar alles staat op 1 lijn. We passen wat aan :

Nu komt de tekst er helemaal in. Met het TextFormat object hadden we eerder al de tekst opgemaakt maar daarbij is de ompak hetzelfde voor alles in de tekst. Om dat anders te doen moeten we eerst laten weten dat het tekstveld HTML begrijpt.

Als we dit testen is er nog steeds niet spectaculairs te zien. We editeren even het tekstbestand en zetten de titel tussen <b> en </b>.

<H1> en zo lukken niet en ook een <HR> werkt niet. Een <BR> om een nieuwe lijn te beginnen lukt wel. Laten we “De tulp is een bloem” even in een ander kleurtje zetten. We passen de tekst wat aan :

en bewaren. Druk nu CTRL-ENTER om het resultaat te bekijken.

pag 122

Action script Basis Stylesheet: Je kan ook gebruik maken van een stylesheet. We maken een nieuw tekstdocument MijnStijl.css Om de titel een wat beter uitzicht te geven wijzigen we de <b> tag. We maken van de titel een stuk samen horende tekst met de tag <span>…..</span> In die span kan je via het keyword STYLE een opmaak meegeven. Je kan echter ook een stylesheet aanmaken. Om tekst op te maken moet je het aan een Class toekennen. Bv

In de MijnStijl.css die je opent met kladblok type je dan: .hoofdTitel { font-family:Verdana; font-size:16; color:#0000FF; }

Om die stylesheet toe te passen op ons tekstveld passen we ons flashbestand wat aan.

pag 123

Action script Basis 31. Oefening op loadVars (dynamische website) We hebben al eerder een dynamisch menu gemaakt. Toen stopten we de labels van de knoppen en de clip die moet geladen worden in een Array. We maken deze oefening opnieuw maar dit keer steken we de labels in een tekstbestand. Laak een nieuw tekstdocument aan met volgende tekst. Knop0=Wie zijn we&knop1=Wat doen we&knop2=Laat een bericht achter&aantal=3

Sla dit bestand op als “knoppen.txt”. We starten een nieuw flashdocument en slaan het meteen op in dezelfde map. Noem het “Les10_Oef1.fla”. We maken er er een nieuw symbool aan (movieclip) die we knop noemen en exporteren het naar ActionScript met dezelfde naam. Op deze MC hernoemen we de eerste layer naar Achtergrond en voegen we een nieuwe layer Opschrift toe. Op achtergrond teken we een rechthoek van 100px breed en 25 px hoog. Op de Opschriftlayer zetten we een dynamische textbox die we een instancename txtOpschrift noemen.

pag 124

Action script Basis We lezen het tekstbestand om straks de labels op de knoppen te zetten en testen even uit of het gelukt is.

Indien dat het geval is (vandaar het eerst opslaan van beide bestanden in de zelfde map) Maken we een functie die de knoppen dynamisch op de stage zet. Daarvoor halen we eerst het aantal knoppen op (we geven even weer in een trace venster)

Als resultaat krijgen we 3 terug. Met dit aantal zetten we de knoppen op de stage.

Voorlopig hebben we dit als resultaat:

pag 125

Action script Basis

We zetten tekst op de knoppen:

We maken de knoppen aanklikbaar door een onRelease te schrijven :

Als je dit uitvoert zal je bij elke muisklik op een knop 3 terug krijgen. Om te weten op welke knop we hebben geklikt moeten we elke knop een ID geven.

We maken nu 3 tekstbestandjes inhoud1.txt, inhoud2.txt en inhoud3.txt. Met respectievelijk volgende teksten tekst=Deze tekst behoort bij de knop <b>Wie zijn we</> <span> Wie we zijn is wat moeilijk om uit te leggen maar we hopen wat stijl te kunnen toepassen </span> en straks leggen we een link. Bewaar deze tekst als inhoud1.txt. De andere teksten verzin je zelf maar.

pag 126

Action script Basis Als er op een knop geklikt wordt maken we een nieuw LoadVars object aan, we lezen er de tekst van in en stoppen deze in een nieuw aangemaakte dynamische tekstbox. We lezen eerst de tekst en kijken of het gelukt is.

We maken nu een functie die de tekst in een tekstvak steekt.

pag 127

Action script Basis Voorlopig komt de tekst met opmaak codes er in. We zetten alvast de multiline en de wordWrap aan.

We passen de tekst in inhoud1.txt wat aan: We zorgen ervoor dat de span die er nu in staat een class krijgt en we zetten er ook een link in.
tekst=Deze tekst behoort bij de knop.<p class="WieZijnWe">test</p> <p class="WieZijnWe">Wie we zijn is wat moeilijk om uit te leggen maar we hopen wat stijl te kunnen toepassen</p> en straks leggen we <a href="http://www.google.be">een link</a>.

We hebben een stukje tekst tussen <span> en </span> gezet. Dit is nu een stukje tekst dat we een opmaak kunnen geven via een stylesheet. Daarvoor moeten we dit stukje tekst een naam geven. Dat gebeurt met het keyword class.
we <span class="WieZijnWe"> </span>

We maken dus een nieuw tekst bestand aan en tikken er in: .WieZijnWe { color: #FF0000; } Let op het punt voor WieZijnWe. En bewaar het als MijnStijl.txt Om de StyleSheet toe te passen maken we een TextField.StylSheet object. We lezen het bestand, controleren of het wel gevonden werd en passen de stijl toe.

pag 128

Action script Basis

De tekst van de class “WieZijnWe” wordt gekleurd getoond en aan de het “een link” verschijnt een handje als je er over gaat. We passen de StyleSheet wat aan zodat de link geanimeerd getoond wordt.

.WieZijnWe { color: #FF0000} a:link { font-size: 11pt; color: #0000FF; text-decoration: none;} a:visited { font-size: 11pt;color:#0000FF: black; text-decoration: none;} a:hover { font-size: 11pt; color:#00FF00; text-decoration: underline;} a:active { font-size: 11pt; color: #FF0000; text-decoration: underline;}

Het resultaat merk je meteen als je CTRL +ENTER doet. Sla op als Les10_oef2.fla

pag 129

Action script Basis

32. Dynamische UIScrollBarr We gaan verder met de bestanden van vorig deel. Pak als je deze niet hebt gedaan de startbestanden en de oplossing uit in eenzelfde map.

Open Les10_oef02.fla en pas de hoogte van het dynamisch tekstveld aan zodat de tekst er niet meer volledig in kan. Open het Components panel

En sleep een exemplaar van de UIScrollBar op de stage. Selecteer die en druk delete om hem terug van de stage te verwijderen. Op die manier hebben we de scrollbar in de library staan.

pag 130

Action script Basis We zetten zo : bar op de stage door een attachMovie. We geven meteen ook de locatie van het object mee.

Je ziet de scrollbar al naast het tekstveld komen. We stellende hoogte ervan in:

en we koppelen uiteindelijk de scrollbar aan het tekstveld:

Sla dit bestand op als Les10_Oef03.

pag 131

Action script Basis

33. sendAndLoad (gegevens terug sturen naar de server) We maken een nieuw flashbestand met twee labels (static text), twee invoervelden (Input Text) en een knop(MC). We geven de inputvelden en de knop een instance name, zorgen ervoor dat beide invoervelden een rand hebben en dat txtBericht op multiline staat.

Omwille van de beperkingen van de data straks stellen we om te beginnen het maximaal aantal karakters van de txtNaam op 25 en dat van txtBericht op 255. We zorgen er ook voor dat de velden leeggemaakt worden. We voegen dus bovenaan een layer toe die we Actions zullen noemen. En op het eerste frame ervan schrijven we onze code.

We geven de velden ook een tabindex mee en zorgen ervoor dat txtNaam de focus krijgt. Bij het uit testen met CTRL+ENTER zal je weinig merken van die setFocus(). Je ziet het wel als je dubbelklikt op de swf.

pag 132

Action script Basis Nu maken we code voor de onRelease van de knop. We kijken of beide velden zijn ingevuld. Indien dat het geval is verzenden we de data. We testen eerst even uit met:

We maken een LoadVars object om de gegevens te verzenden en stoppen de waarden van de tekstvelden erin.

Verzenden doen we via de sendAndLoad() methode. Deze methode vraagt 3 parameters

De url is normaal gezien de url die terugstuurt naar de server, targetObject is wat je als parameter terug krijgt van de server. Wat dat precies inhoudt moet duidelijk

pag 133

Action script Basis worden afgesproken met degene die server-side programmatie doet. method is de methode waarop gepost wordt. Dat kan “GET” of “POST” zijn.

We faken even wat we terug krijgen van de server door een tekstje server.txt aan te maken met als inhoud “resultaat=OK”. Indien dit tekstje niet bestaat is het alsof we geen connectie met de server hebben kunnen maken. Bestaat het wel, dan lezen we wat de server normaal terugstuurt via de url maar wat nu in server.txt zit. We maken een nieuw tekstveld bij waar we zullen instoppen of de data correct is verzonden. Geef het de instance name dit veld txtError.

Sla op als Les10_Oef5.fla

pag 134

Action script Basis 34. Dynamisch Masken We starten een nieuw flashbestand, wijzigen de naam van layer1 in achtergrond, tekenen er een willekeurige figuur op (pen tool bv), klikken rechts op deze figuur en converteren naar MC. We noemen deze MC achtergrond en exporteren voor actionscript. Daarboven maken we een laag aan mask en tekenen er een rechthoek (500 x 75px) op waar we straks willen doorkijken. We converteren eveneens naar MC en exporteren voor actionscript.

Als we recht klikken op de layer mask en uit het snelmenu Mask selecteren krijg je een resultaat als hier onder.

pag 135

Action script Basis Nu zouden we dat dynamisch willen maken en een schuifbalk willen voorzien om de onderste laag te kunnen verschuiven. We selecteren daarom beide symbolen en gooien drukken op delete om ze van de stage te verwijderen. We slepen de laag mask naar het vuilbakje zodat we nog enkel één laag over hebben. We wijzigen de naam van de layer achtergrond in actions. Daar zetten we volgende code in:

Druk ctrl +ENTER om het resultaat te bekijken. Beide MC staan er op. Nu zorgen we voor de mask.

Druk nog een CTRL+ENTER om het resultaat te bekijken. We maken nu een slider om de achtergrond te kunnen verschuiven Kies Insert/New Symbol MC en export for actionscript en teken er een balk op zonder rand van 10 px breed en 75 px hoog (even hoog als het maskvenster)

We zetten even de mask af om te zien of we de objecten goed geplaatst hebben. Omwille van de flexibiliteit proberen we zoveel mogelijk de gebruik te maken van waarden die elders ook gebruikt worden zodat als we de mask verplaatsen, onze slider ook nog werkt.

pag 136

Action script Basis

Als we op de slider klikken starten we een setInterval die zal kijken in hoe de positie van de slider is. Als we hem loslaten (onRelease) zorgen we ervoor dat ook het slepen en het uitvoeren van de setInterval stopt.

pag 137

Action script Basis Als we nu testen zien we dat de achtergrond een stuk boven het venster uitkomt. We zorgen ervoor dat het gelijk komt. Om dat te doen verzetten we de diepte even van de achtergrond van 10 naar 100.

We doen hetzelfde om te bepalen tot waar het vlak moet schuiven

pag 138

Action script Basis We onthouden deze waarden in een variabele en zetten de diepte van achtergrond terug op 10. Om het verschuiven wat te vereenvoudigen doen we een trace van de positie van de slider. Die moet een waarde tussen nul en 100 terug geven.

Bovenaan declareren we een variabele die de hoogte van de achtergrond bijhoudt.

We passen wat aan zodat we de achtergrond verschuiven.

Alles schijnt te werken dus zetten we die mask weer aan.

Test uit en sla op als DynamischeMask.fla 35. XML lezen XML bestanden zijn gestructureerde markup bestanden net zoals HTML. Maar daar waarbij de elementen (TAGS) bij HTML vast liggen maak je die bij XML zelf. Daarbij moet aan een aantal voorwaarden voldaan zijn. <AlbumLijst> </AlbumLijst> • • • • • Namen mogen geen spaties of rare tekens bevatten Case-Sensitive (grote en kleine letters zijn anders) Elke TAG moet afgesloten worden Alle tags (NODES) worden omvat door één centrale NODE de ROOT-NODE Om aan te duiden dat het XML is, is de eerste zin: <? Xml version = ‘1.0’?>

pag 139

Action script Basis

De structuur van het document wordt vastgelegd in een DTD (document type defenition) tegenwoordig beter gekend als een XML-schema.

Maak een nieuw tekst document en copieer er volgende tekst in :
<?xml version="1.0"?> <albums> <album cover="truby_trio.jpg" liedjes="12">Truby Trio</album> <album cover="david_guetta.jpg" liedjes="10">David Guetta</album> <album cover="dj_tiesto.jpg" liedjes="15">DJ Tiësto</album> </albums>

Sla het document op als FilmData.xml

pag 140

Action script Basis

Het lezen van het bestand is net zoals LoadVars. Start een nieuw flashdocument en neem volgende code over:

Doen we een trace van de filmData dan krijgen we de inhoud van het bestand te zien

pag 141

Action script Basis

Als je verder het xml document wil lezen kom je in de problemen met de spaties in de tekst. Daarom moeten we flash duidelijk maken dat de spaties moeten genegeerd worden. Dat moet gebeuren VOOR het xml bestand wordt ingelezen.

Willen we weten hoeveel childNodes er zijn dan doen we :

Vragen we firstChild.childnodes op dan krijgen we een Array terug (gegevens gescheiden door een komma).

Zo kunnen we het lijstje met albums aflopen :

pag 142

Action script Basis Zoals eerder gezegd is, zijn wat tussen de haken staan attributen. Hier in ons geval cover en liedjes. Die waarde er uit halen is eenvoudig:

Willen we de waarde er uit halen dan moeten we de firstChild van huidige node hebben en daar de nodeValue van.

Om te weten of een node nog vertakt is kan je nodeType gebruiken. 1 wil zeggen dat het een XML element is 3 duidt aan dat het om een textnode gaat.

36. Dynamisch menu met XML De Film oefening die we eerder maakten met LOadVars. Doen we snel even over met XML. We beginnen met het aanmaken van de menustructuur. We maken een tekstdocument met volgende tekst:
<Films> <Film cover="GobletOfFire.jpg" duur="157">Harry Potter and the Goblet Of Fire</Film> <Film cover="KingKong.jpg" duur="188">King Kong</Film> <Film cover="Narnia.jpg" duur="135">Chronicles of Narnia</Film> </Films>

En slaan het bestand op als Film.xml

pag 143

Action script Basis

Open het bestand Films.fla van Les09 en sla het op als FilmsXML.fla in de zelfde map als het xml bestand.

De ingelezenData.onLoad passen we aan.

We zetten nr op nul ipv op 1

pag 144

Action script Basis We maken commentaar van alles behalve de eerste textbox (zetten we straks wel weer goed (door /* ….. */ te zetten)

Druk CTRL+ENTER om te checken of het werkt. Het inladen van de foto wordt dan :

De duur is ook snel aangepast :

Snel nog even de navigatie aanpassen : Volgende knop

Hetzelfde voor de vorige knop :

Test uit en bewaar 

pag 145

Action script Basis 37. XML lezen en in een Object steken Als je een XML bestand gebruikt blijft die volledig in het geheugen zitten zolang je hem gebruikt. Dat kan een groot bestand zijn en misschien heb je het niet volledig nodig. In dat geval is het aan te raden het XML bestand te verwerken en in een eigen object te steken.

We doen vorige oefening ‘nog’ eens over  maar dit keer verwerken we de gegevens. Pak de startbestanden uit in een nieuwe map ( de 3 jpg’s en het XML bestand) en start een nieuw Flashbestand. We maken een XML variabele aan en lezen de xml.

Sla het op als FilmObjectXML.fla voor je het uittest. Als we zo werken staat die filmData (de xml) in de _root en blijft dus de hele duur van de applicatie in het geheugen. Daarom stoppen we deze code in een functie laadFilmData().

pag 146

Action script Basis

We maken een functie die de data zal verwerken. Als parameter geven we het xml bestand mee. Eens het xmlbestand is ingelezen is filmData geen XML object maar een XMLNode object.

pag 147

Action script Basis We stoppen dit object in een Array. Omdat we aan deze Array overal moeten aankunnen declareren we er een filmLijst in de hoofdtijdlijn.

We vullen de Array op met objecten Film. We noemen ons object Film en starten de naam met een hoofdletter om aan te duiden dat dit een Object is en geen instantie. We maken een constructie die de nodes één voor één afloopt.

Telkens we in de lus komen maken we nu een object Film aan en vullen we de gegevens ervan aan met de waarden in het xml bestand.

pag 148

Action script Basis Eens de XML verwerkt is tonen we de eerste film. Daarvoor maken we een functie die de tekst in dynamische tekstvelden zen en de figuur in een MC.

We roepen de functie aan :

pag 149

Action script Basis Maak twee movievlips aan vorige en volgende met de zelfde naam als export for actionscript. We zetten ze dynamisch op de stage door een attachMovie().

Test uit, en bewaar.

pag 150

Action script Basis Er is nog een andere manier om de Nodes uit te lezen, nl blijven lezen zolang de volgende node niet null is. Sla huidig flashdocument op als FilmObjectXMLNextSibling.fla. We wijzigen de code voor het verwerken van de XML.

De filmNode wordt telkens vervangen door nextSibling (de volgende verwant) <Film cover="GobletOfFire.jpg" duur="157">Harry Potter and the Goblet Of Fire</Film> <Film cover="KingKong.jpg" duur="188">King Kong</Film> <Film cover="Narnia.jpg" duur="135">Chronicles of Narnia</Film> We hoeven ook geen rekening meer te houden met de Array want elke fimNode is een alleenstaande XMLNode. Test uit en sla op.

pag 151

Action script Basis

38. Oefening Filmsite met XML (albumslider) Open de startbestanden die bij deze les horen. Daarin vind je een mapje met foto’s, een xml bestandje en een swf. Pak deze bestanden uit en dubbelklik op de albumviewer.swf om te zien wat we willen bereiken. Start een nieuw flashdocument en sla het op in de map waar het xml bestand staat. Noem het AlbumSlider01.fla. Het eerste wat we doen is het xml bestand inlezen.

Druk je nu CTRL+ENTER om het resultaat te bekijken (we verwachten een true of false in het outputvenster) dan zie je helemaal niets. We hebben wel een functie maar die wordt nergens aangeroepen. Dus we voegen er een zin bij :

Als je nu test krijg je true in het outputvenster. We zagen vroeger al dat als je de XML leest je er moet voor zorgen dat de WhiteSpace (witruimte) moet genegeerd worden. Als je gebruik maakt van strongtyped variabel declaratie dan heb je het voordeel dat je code assistent hebt.

pag 152

Action script Basis

pag 153

Action script Basis We passen de onLoad aan. Indien het inlezen gelukt is voeren we een functie uit die de XML zal verwerken. We geven de XML door als parameter. De gelezen XML is geen XML bestand meer maar een XMLNode. We doen in die functie voorlopig een trace van die Node (nl heel onze data)

Druk CTRL+ENTER om uit te testen. Je zou iets moeten krijgen zoals dit:

De eerste node is <albums> en dat is meteen de rootnode.

pag 154

Action script Basis We stoppen de eerste node (firstChild) in een variabele die albumsNode noemt (overeenkomstig met de tag <albums>) en we stoppen deze zijn eerste child in een variabele albumNode (overeenkomstig met de tag <album>. We doen even een trace van het eerste kind om te checken of dat wel allemaal ok is.

Druk CTRL+ENTER om uit te testen. Nu is het de bedoeling om die gegevens in een Object te stoppen en telkens een album is ingelezen de album aan een Array toe te voegen. We maken dus bovenaan een var Array aan die de albumgegevens zal bijhouden.

Voor we verder gaan met het verwerken van de gegevens slaan we even op als AlbumSlider02.fla We haan nu alle albumNodes lezen in een lus die wordt afgelopen zolang de ingelezen album niet null is. Vergeet die nextSibling niet in je lus…zoniet heb je een oneindige lus en blijft het spel hangen

pag 155

Action script Basis

We maken nu een nieuwe functie die alle nodes van de albumNode zal verwerken. We noemen deze functie parseAlbumNode en geven als parameter de huidige node mee.

We kunnen nu ook zeggen dat de functie parseAlbum een Object is en de waarde terug geven via een return op het einde van de functie De doorgegeven albumNode kan een <image> node of een <artist> node zijn die staan nu wel allemaal in de zelfde volgorde in het XML bestand maar dat hoeft niet persé. We lezen dus de eerste Node en daarna in een lus de volgende. Er zouden nog andere nodes in de albumNode kunnen zitten dus controleren we of het een artist of een image node is.

pag 156

Action script Basis

Sla even op VOOR je dit uitvoert als AlbumSlider03.fla. Als je dit uitvoert zou je zoiets moeten krijgen: Telkens we een album verwerken, maken we een object album aan waar we de waarde album.large, album.small en album.artiest in stoppen.

Je kan ook de functie van een bepaald type maken. Als je dat doet kan de functie een return value terug geven. Dat doe je met return waarde Je zou zelfs meerdere zaken tegelijk kunnen terugsturen door een Array van waardes terug te zenden. return [waarde1,waarde2,…] Als je strong typed wil werken zet je een dubbelpunt achter de functie en selecteer je het type dat je wil teruggeven function parseAlbumNode(pAlbumNode:XMLNode):Object

pag 157

Action script Basis Onze functie passen we dus aan:

We passen nu ook de functie aan die de <album> nodes afloopt: We maken er een object in aan en stoppen er de waarde van het opgehaalde album Object in. Dan voegen we die toe aan de lijst met albums.

pag 158

Action script Basis Nu is alle data verwerkt en kunnen we de thumnails op de stage zetten. Deze thumnails moeten allemaal even breed zijn zoniet komen we straks in de problemen. Die van ons zijn in ieder geval 143 pixels, dus als we er eentje zetten om de 145 pixels, staan ze mooi naast mekaar. We doen dat vanaf het moment dat alles geparsed is dus na de while van de parseAlbumData() Voorlopig tracen we even de albumLijst[i].small om te kijken of die er wel inzit 

Bewaar als AlbumSlider05.fla en test uit.

pag 159

Action script Basis We maken dus een Array van movieclips en stoppen er de figuur in.

Druk CTRL+ENTER om de animatie uit te testen. We krijgen iets zoals dit:

Nadat de images op de stage staan starten we een setInterval die de MC’s zal opschuiven afhankelijk van de muispositie. Is die rechts van het midden dan schuiven we op naar links en omgekeerd.

pag 160

Action script Basis

Test even uit om te zien of de muispositie wordt teruggegeven. We schrijven een functie die MC’s verplaatst: Bij nader inzien is het eender of we naar rechts of naar links verplaatsen. We kunnen gewoon een parameter meegeven die een positief of negatief is.

Willen we nu even iets met de snelheid doen dan verlagen we eerst de intervalsnelheid.

pag 161

Action script Basis We houden het eenvoudig. Indien wel schuiven één vierde op als de afstand van de muis tot het midden.

Je ziet dat het nu niet uitmaakt of _xmouse > midden. We vereenvoudigen dus naar:

Test even uit en sla op als AlbumSlider06.fla We zouden nu willen dat als de eerste MC links verdwenen is, achteraan wordt toegevoegd.

pag 162

Action script Basis Wanneer moet dat gebeuren? Wel als de ._x positie van MC 1 kleiner dan de breedte van de thumb en de afstand tussen twee MC’s Waar moet die dan komen? Dat hangt er vanaf hoeveel MC’s er zijn (albumLijst.length) en hun breedte ( _root["thumb"+i ]._width ) en de onderlinge afstand (die is bij ons 2px) We passen onze verplaatsMovieclips() aan

Aan de andere kant moeten we het ook checken :

Wanneer? Als de x > Breedte van de stage + afstand tussen de MC’s Waar moet die naartoe? Naar : – (breedte + afstand) van de MC

pag 163

Action script Basis

Sla op als AlbumSlider09.fla en test uit. Wat ons nog rest is het aanklikbaar maken van de MC. Daarvoor moeten we terug naar de functie toonThumnails(). We geven elke MC een ID mee. Als we een trace van deze ID doen, merken we wel dat de knop die ID heeft maar de onRelease() wordt niet uitgevoerd. Dat komt omdat de loadMovie niet uitgevoerd is.

pag 164

Action script Basis Daarom stoppen we de jpg ‘in’ een MC ‘in’ de MC.

Test uit en bewaar als AlbumSlider10.fla Je ziet nu dat bij de trace telkens je nu op een MC klikt, je ook het nummer krijgt. Wat ons nog rest is de juiste grote figuur in een MC laden.

Sla op asl AlbumSlider11.fla
pag 165