ActionScript 3.0/Aan de slag

Aan de slag met AS 3.0!

In dit hoofdstuk zullen we behandelen hoe je de eerste stappen in Actionscript 3.0 kunt zetten. Het lijkt misschien eerst een beetje intimiderend maar met volharding lukt het vast!

Actionscript 3.0 opstarten

Om Actionscript 3.0 op te starten start je een Flash-bestand en kies je de optie 'Actionscript 3.0' wanneer je een bestandstype moet selecteren. Je komt nu op een 'normaal' leeg Flash-scherm terecht, omdat we bezig gaan met Actionscript gaan we nu naar het venster om Actionscript te bewerken. Ga naar venster en selecteer Handelingen (Sneltoets: F9)

Het Actionscript 3.0 venster

Wanneer je het venster van Actionscript geopend hebt krijg je een venster met op een rij de volgende knoppen (zonder nummers):

1: Nieuw item toevoegen aan script.
Als je hier op klikt, komt er een lijst met alle functies van Actionscript 3.0. Als je een functie selecteert, wordt die toegevoegd aan het script op de plek waar de cursor stond. Dit is dezelfde lijst als links staat.

2: Zoeken.
Als je deze selecteert, komt het ‘Zoeken en vervangen’ van Word.
Sneltoets: Ctrl + F.
3: Doelpad toevoegen.
Bij het selecteren van deze knop, voeg je een doelpad toe. Selecteer in het kader een instantie (De instantie moet een naam hebben). Een doelpad verwijst naar de frames in de tijdlijn, waar een bepaalde instantie in staat. In plaats van klikken kan je ook typen: this.instantienaam
4: Syntaxis controleren.
Actionscript controleert of je fouten hebt gemaakt in het script. Dit zijn fouten zoals: het vergeten van het sluiten van haakjes. De foutmelding staat beneden bij de tijdlijn.
Actionscript vindt niet alle fouten, er kunnen nog steeds fouten optreden wanneer je het bestand test.
5: Automatisch opmaken.
Het script wordt opgemaakt. Dat betekent dat er ingesprongen wordt vóór het script dat tussen vierkante haken en accolades staat.
6: Codehint weergeven.
7: Opties foutopsporing.
Met onderbrekingspunt in-/uitschakelen kan je bij een bepaalde scriptregel een punt in de kantlijn zetten. Dat doe je wanneer je denkt dat in die regel een fout zit.
8: Tussen haakjes minimaliseren.
Selecteer een tekst. In de tekst wordt het script geminimaliseerd wat tussen accolades staat. Links naast de regelnummers komen plusjes en minnetjes, die je kan klikken om het te openen of te minimaliseren. Dit is vooral handig als je een groot script hebt.
9: Selecteer een tekst. De tekst wordt geminimaliseerd.
Links naast de regelnummers komen plusjes en minnetjes, die je kan klikken om het te openen of te minimaliseren. Dit is vooral handig als je een groot script hebt.
10: Scriptassistentie.
Er komt een balk bovenaan.
Als je op Handelingen klikt, wordt het script dat er bij hoort toegevoegd.
11: Help.
Dit opent de helptekst. Hetzelfde als F1.
Onderaan:
12: Lagen.
Als je meerdere lagen hebt, kan je hier selecteren bij welke laag het script hoort. Lagen die niet vergrendeld zijn horen bij alle lagen.
13: Script vergrendelen.
Dit vergrendelt het script aan alleen die laag.

Je zult vast gemerkt hebben dat we de balk aan de linkerkant nog niet behandeld hebben. In het bovenste deel van de balk vind je de Actionscript bibliotheek. Hier kun je alle functies van de geselecteerde taal vinden, de taal kun je selecteren in het balkje waar in deze foto Actionscript 3.0 staat.
Wanneer je een beetje in de bibliotheek doorklikt zul je zien dat er in elke categorie allemaal subcategorieen te vinden zijn. Wanneer je ergens in deze bibliotheek de gewenste functie gevonden hebt, kun je hierop dubbelklikken om het in het tekstveld te zetten.

Uitleg: werken met de programmeeromgeving AS 3.0

We gaan nu actionscript in actie zien. Als voorbeeld gaan we een knop maken; wanneer je op deze knop klikt wordt deze verplaatst. We beginnen met het openen van een stage. Teken hierop een simpele cirkel (tip:houd SHIFT ingedrukt om een mooie cirkel te maken!). Om hier acties aan toe te voegen, moeten we deze tekening eerst omzetten naar een symbool:

Eerst moet je de cirkel selecteren: selecteer het pijltje (sneltoets: V) en klik op de cirkel.
Klik in Wijzigen (in de taakbalk bovenaan) op Omzetten in symbool (sneltoets: F8)
Typ bij naam knop_btn en stel het type in op Knop.
Klik op ok.

Nu is er van de tekening een symbool gemaakt. Om het wat gemakkelijker gaan we eerst het symbool centreren:

Ga naar 'Venster' en klik daar op 'Uitlijnen' (sneltoets: ctrl + K).
Vink 'Uitlijnen op scène' aan.
Om het symbool horizontaal uit te lijnen: klik op de tweede knop onder het kopje 'Uitlijnen'
Om het symbool verticaal uit te lijnen: klik op de tweede knop onder het kopje 'Distribueren'

Om het overzicht te bewaren, is het handig om elke nieuwe laag die je aanmaakt een naam te geven. Op deze manier kun je in één oogopslag zien wat er op elke laag staat. Dubbelklik op 'Laag 1' bij de tijdlijn. Nu kun je de naam veranderen. Typ hier bijvoorbeeld "Knop" in.

Nu zijn we klaar om acties aan de knop toe te voegen. Om de knop herkenbaar te maken voor ActionScript moeten we het symbool eerst nog een instantienaam te geven. Dit doe je door op de cirkel te klikken. Nu zie je de eigenschappen van het symbool. Er is een vakje waar nu staat: <Instantie Naam>. Vervang dit voor 'knop1'.

Het is het handigst om de acties op een aparte laag te zetten, zodat je er snel weer bij kunt als je het aan wilt passen. We moeten nu dus eerst een nieuwe laag maken. Dit doe je door rechts te klikken op 'Knop' (de laag die we net van naam veranderd hebben). Kies nu voor 'Laag invoegen'. Voor de duidelijkheid geven we deze laag de naam 'Actions'.

Selecteer de 'Actions'-laag en klik op 'Vensters' en dan 'Actions' (sneltoets: F9) om ActionScript te openen. Nu kunnen we ActionScript toevoegen. De eerste regel is:

knop1.addEventListener(MouseEvent.CLICK, Bewegen);

Het eerste gedeelte ('knop1') geeft aan voor welke instantie het vervolg van de code bedoeld is. Hierna moeten we een EventListener toevoegen (Engels voor 'toevoegen' is 'add'). Een EventListener geeft een lijst van acties aan die moet uitgevoerd worden als er een bepaald event gebeurt. Alles wat er moet gebeuren, komt hier tussen haakjes achteraan. Om aan te geven om welk soort event het gaat, wordt de code 'MouseEvent' (let op hoofdletters) toegevoegd. Na dit stukje volgt om wát voor soort MouseEvent het gaat. In dit geval moet er wat gebeuren als we op de knop klikken, dus moet hier 'CLICK' komen te staan. Nu moet de EventListener weten wat er precies moet worden uitgevoerd als er op de knop geklikt wordt. Er moet dus een functie bij komen. Deze functienaam mag je zelf bedenken, maar het wordt aangeraden om een makkelijke naam te gebruiken zoals bijvoorbeeld 'Bewegen'. Sluit de regel af met een ';' (puntkomma).

Nu moeten we aangeven wat er moet gebeuren als de functie 'Bewegen' wordt opgeroepen. Om dit uit te leggen aan ActionScript maak je gebruik van de volgende code:

function Bewegen(e:MouseEvent):void{

Aan het begin wordt de functie opgeroepen. Er wordt nog een keer herhaald dat het om een MouseEvent gaat en 'void' geeft aan wat er als volgende moet gebeuren (dit komt tussen { en } te staan). Het vervolg van de code wordt:

knop1.x=knop1.x+100;

Alles voor de '=' geeft aan wat het nu is en alles na de '=' geeft aan wat het moet worden. Bij 'knop1.x' wordt de x-coördinaat van knop1 opgehaald. Na het '='-teken komt nu wat de nieuwe x-coördinaat moet worden. In dit geval wordt de nieuwe horizontale positie 100 pixels naar rechts. Het '+'-teken geeft aan dat de knop naar rechts wordt verplaatst. Als de knop naar links zou gaan, moet de '+' vervangen worden door een '-'.
Op dezelfde manier kun je de y-coördinaat laten veranderen. Dan komt het volgende er nog achteraan:

knop1.y=knop1.y+200;
}

Hier geldt dat een '+' betekent dat de knop omlaag gaat. Als hij naar beneden moet, moet de '+' vervangen worden door een '-'. Nu gaat de knop dus eerst 100 pixels naar rechts en daarna 100 pixels omlaag. Om de 'void' af te sluiten, wordt een '}' gebruikt. Om de knop nu te testen, ga je naar 'Besturing', dan 'Scène testen' (sneltoets: ctrl + enter).

Om bij het klikken op een knop, deze knop 100 pixels omhoog en 100 pixels omlaag te laten bewegen, is dus in totaal de volgende code nodig:

knop1.addEventListener(MouseEvent.CLICK,Rechts);
function Rechts(e:MouseEvent):void{
	knop1.x=knop1.x+100;
	knop1.y=knop1.y+100;
}

Operatoren

De < gaat controleren of een waarde kleiner is dan een waarde bijvoorbeeld '1<2'.
De > gaat controleren of een waarde groter is dan een waarde bijvoorbeeld '5>2'.
De >= gaat controleren of een waarde groter dan of gelijk aan een waarde bijvoorbeeld '3>=2'.
De <= gaat controleren of een waarde kleiner dan of gelijk aan een waarde bijvoorbeeld '3<=9'.
De == gaat controleren of een waarde gelijk is aan een waarde bijvoorbeeld '5==5'.
De != gaat controleren of een waarde niet gelijk is aan een waarde bijvoorbeeld '6!=7'.

GotoAndPlay/Stop/Play Functies

gotoAndPlay

In Flash kun je knoppen maken, aan knoppen kun je acties toevoegen. De GotoAndPlay,Stop en de Play functie leggen we uit aan de hand van een bewegingstween. Deze bewegingstween begint op frame 1 en eindigt op frame 40. Als frame 40 is afgelezen stopt de bewegingstween, met de functie GotoAndPlay kun je de afspeelkop terug zetten (of verder) naar een zelf gekozen frame. Op deze manier kunnen we de bewegingstween terug opnieuw laten spelen, door de afspeelkop terug te zetten naar frame 1.

Het voorbeeld bestaat uit 3 lagen:

De eerste laag bevat de bewegingstween die we opnieuw willen laten spelen

Laag twee bevat de knop die we moeten indrukken om verder te spelen vanaf het door ons gekozen frame.

De derde laag is de Actie laag. In deze laag schrijven we de code voor actionscript.

Open actionscript 3.0 door op F9 te drukken, of klik op Venster en dan op handelingen.

Voordat we de echte code schrijven, is het belangrijk dat we de instantie die de opdracht moet gaan uitvoeren een naam heeft. In dit geval moet de knop zorgen dat er een actie komt. We noemen deze knop daarom "start_btn" . L

Terug naar actionscript:

Zet scriptassistentie uit, en klik op de eerste frame van de actie laag. Dit moet in deze laag, omdat je geen actionscript code kan toevoegen aan de laag van bijvoorbeeld de bewegingstween.

Als we de flash video openen willen we dat er niets gebeurd tenzij we op de knop drukken. Normaal gesproken zal de Bewegingstween meteen gaan spelen, maar om dit te voorkomen gebruik we de stop functie.

De code begint dus als volgt:

stop();

Vervolgens moeten aangeven dat het om de huidige tijdlijn gaat (niet te verwarren met laag!). Dit doen we met de code "this".

Nu moeten we de instantie aanroepen die de code moet gaan activeren. Dit is onze knop met de instantie naam "start_btn". Tussen this en de instantie naam moeten we een "." zetten. De code ziet er nu zo uit:

stop();
this.start_btn

We hebben nog niet aangegeven of we op de knop moet klikken, of er over heen gaan, of inklikken en pas activeren als we de muis loslaten. We kiezen voor de laatste optie. De code die we moeteng aan gebruiken is de "onRelease" (hoofdletter gevoelig!). Deze code zegt dat de actie uitgevoerd moet worden als de muisknop eerst ingedrukt is op de knop, en vervolgens de muisknop losgelaten is.

Er is nu bekend om welke tijdlijn het gaat, welke knop de code moet aansporen en wat er moet gebeuren om de knop te activeren. We hebben nog niet aangegeven wat er moet gebeuren als de knop is geactiveerd. We willen de afspeelkop terugzetten, zodat de bewegingstween opnieuw speelt. De code bestaat dus in principe uit twee delen:

1) De afspeelkop moet terug gezet worden naar frame 1 (Hier begint immers onze bewegingstween)
2) De bewegingstween moet verder spelen vanaf de de frame waar we de afspeelkop heen hebbeng gezet.

Actionscript heeft voor deze twee handelingen één functie. Namelijk "gotoAndPlay" (let weer op de hoofdletters). De code zegt letterlijk "Ga naar en speel", en dit is precies wat er moet gebeuren. Er is echter nog aangegeven naar welke frame we heen willen. Om onze bewegingstween opnieuw te laten spelen moet de afspeelkop terug naar frame 1, de code wordt dan: GotoAndPlay(1);

Omdat we te maken hebben met een functie, is het noodzakelijk om dit te vermelden. Hoe het precies zit met dit soort notaties van functies, ga ik nu niet op in.

Het definitieve script ziet er als volgt uit:

stop(); 
this.start_btn.onRelease=function () {
gotoAndPlay(1);
}

99 flesjes met bier

Aan de hand van het liedje "99 flesjes met bier" zullen hier enkele veelgebruikte tekens worden behandeld.
N.B. Let op de spatie in " flesjes met bier" en " en zo ga je door", vertaald van het origineel 99 bottles of beer.

Simpele versie

var flesjes:Number = 99
while (tekst>2){

var tekst:String = flesjes + " flesjes met bier" + "je drinkt er een op" + "  en zo ga je door" ;
flesjes--
var tekst2:String = tekst + flesjes + " flesjes met bier op de plank" ;
trace (tekst2) ;
}
tekst = flesjes + " flesjes met bier" + "je drinkt er een op" + " en zo ga je door" ;
flesjes--
tekst2 = tekst + flesjes + " flesje met bier op de plank" ;
trace (flesjes2) ;

tekst = tekst + " flesje met bier" + " je drinkt hem op" + " en zo ga je door" ;
flesjes--
tekst2 = tekst + flesjes + " flesjes met bier op de plank" ;
trace (tekst2) ;

tekst2 = tekst + " flesjes met bier" + " ga naar de winkel en koop er meer" + " 99 flesjes met bier op de plank" ;
trace (tekst2) ;
}

De + zorgt ervoor dat je verschillende variabelen en/of tekst aan elkaar kunt koppelen.
De code flesjes-- doet hetzelfde als 'flesjes-1', eveneens zal flesjes++ hetzelfe als 'flesjes+1'.
Tussen accolades { } moet je de code die een loop uitvoert plaatsen.
tussen gewone haakjes () moet de voorwaarde van de loop worden gezet.

Samenvatting / Spiekbriefje

We hebben in dit onderdeel "aan de slag" bekeken hoe je aan actionscript moet beginnen. Je kunt actionscipt starten door Adobe Flash op te starten. Hierin kies je voor een nieuw ontwerp en vervolgens kies je actionscript 3.0

Er is in het bovenstaande tekstgedeelte een simpel voorbeeld genoemd waarmee je kunt kennis maken met de taal van actionscript. Ook gebruik je in actionscript verschillende operatoren. Ook deze zijn hierboven genoemd.

Je kunt in actionscript ook knoppen aanmaken. Deze kun je met verschillende codes laten werken. Een vroobeeld hiervan is de play-knop. Je moet aan de hand van de knop een code typen die de knop laat werken. Een simpele code is hierboven weergegeven.

In het laatste stukje van deze pagina is een stukje tekst gegeven met veel verschillende simpele functies. Hierin kun je sommige functies herkennen. Zo kun je het stukje tekst goed begrijpen.