MCT3 – Rich Internet Applications Kdg

Actionscript 3
Flash authoring en actionscript classes
Globaal gesproken zijn er 4 verschillende manieren om een op flash technologie gebaseerde
toepassing te bouwen:

1. Volledig in Actionscript. Dit is een perfecte keuze voor 2D spelletjes, grafische interactieve
toepassing etc… waarbij de applicatie van A tot Z dynamisch is en in code dient te worden
opgebouwd.
2. Flash Pro authoring. Voor Flash animaties, presentaties en web sites is Flex of AIR of
zuivere AS vaak minder ideaal. Hiervoor is de Flash Pro Authoring omgeving beter geschikt.
Het verschil tussen een web site en een web applicatie is echter subtiel. Wanneer de site
wordt gevormd door een aantal informatieve pagina’s, waarbij de nadruk ligt op pagina layout,
animatie, video integratie etc….dan is Flash authoring vaak een betere keuze. Is de site
echter complex op vlak van back-end integratie, UI controls,… en kan men dus eerder
spreken van een applicatie, dan is Flex/AIR meestal een betere keuze.
3. Flex
Bedoeld voor data gedreven web applicaties met veel interactiviteit en complexe UI controls
zoals grids, trees, menu’s.
4. AIR
Een AIR applicatie werkt intern met dezelfde technologie als een AS/Flash/Flex applicatie,
doch wordt geïnstalleerd op het systeem van de gebruiker. De applicatie draait binnen de
Adobe Integrated Runtime, wat neerkomt op een flash player op de desktop.
Omdat de applicatie door de eindgebruiker wordt geïnstalleerd, hoeft ze niet binnen de
security sandbox van de flash player te blijven (zie later). Ze kan dus schrijven en lezen van
de harde schijf van de gebruiker, drag en drop ondersteunen met native OS objecten etc…
Bovendien kan een AIR applicatie ook volledige HTML content draaien en is communicatie
tussen Actionscript en Javascript mogelijk.

Welke methode je ook kiest, Actionscript is in alle gevallen onontbeerlijk om de nodige interactiviteit te
realiseren.
Het is hierbij in vele gevallen van belang de onderhoudbaarheid van de code te garanderen. Code
wordt dus best netjes geprogrammeerd en georganiseerd met behulp van packages, interfaces en
classes. Hierbij gelden volgende opmerkingen:

o In een Flex en AIR applicatie Actionscript code worden geïntegreerd met behulp van MXML
script tags en externe Actionscript classes. Voor een applicatie van aanzienlijke omvang zijn
frameworks zoals Cairngorm beschikbaar.
o Volledige AS Applicaties zijn van nature OO en dus onderhoudbaar op te zetten met behulp
van packages, classes,….
o Voor Flash Pro toepassingen bestaat echter het gevaar dat de AS code wordt verspreid over
een grote hoeveelheid losse frame scripts. Dit maakt het onderhoud ervan vaak tot een
nachtmerrie, waarbij code verstopt zit op een bepaalde frame van een movieclip in een
andere movieclip enz… Sinds de laatste versies van Flash Pro is het echter relatief eenvoudig
geworden om ook voor timeline gebaseerde toepassingen op een correctie manier om te gaan
met Actionscript code. We bespreken dit in volgende secties.

Hierbij dient wel opgemerkt dat het opzetten van goed georganiseerde code ook een kost
heeft (tijd is geld…). Voor kleine web-producties, die snel moeten online gebracht worden en
een korte levensduur hebben (bv. een site die niet lang moet meegaan), is het vaak
aangewezen om niet te ver te gaan in het gebruik van OO technieken, en zijn snel
aangebrachte frame scripts vaak wel een goed keuze.

Frame scripts
Met uitzondering van bovenvermelde kleinere producties, dient de hoeveelheid code in frame scripts
normaal zoveel mogelijk beperkt te worden. Hoe je dit kan doen zien we verder, doch het is in ieder
MCT3 – Rich Internet Applications Kdg

geval aangewezen om sowieso alle frame scripts bovenaan in een aparte layer (met de naam
‘scripts’) te zetten. Lock deze layer zodat er niet per ongeluk grafische inhoud in terecht komt.

Document class
Elk flash authoring document (.fla) bevat een root timeline (de timeline die je ziet wanneer je het
document opent). Hieraan kan men een actionscript class koppelen, die dit document zelf voorstelt.
1
Deze class dient te erven van MovieClip :

package {
import flash.display.MovieClip;

public class VlinderDemo extends MovieClip {

…
}
}

Je kan aangeven om welke class het gaat in de publish settings van je movie.

De class zelf kan je rechtstreeks aanmaken in Flash Pro (New…), doch indien je de editor van FB
prefereert, is het ook mogelijk om hiervoor een Actionscript project aan te maken in Flash Builder.
Plaats in dat geval de .fla bij voorkeur in de src directory van dit FB project. Je compileert en runt je
project bij deze manier van werken steeds vanuit de Flash Pro omgeving, en gebruikt Flash Builder
enkel als AS editor.

Opgelet: Sinds CS5 is er een nieuwe optie beschikbaar in Flash Builder: ‘New Flash Professional
Project’. Hiermee kan je een Flash Professional project aanmaken, bewerken en publiceren vanuit
Flash Builder. Meer info vind je op http://flashauthoring.blogspot.com/2010/05/create-flash-
professional-project-in.html

Wanneer je de class in een package wil plaatsen moet je ze in bovenstaande dialogbox wel vooraf
laten gaan door de package naam: somePackage.VlinderDemo.

De relatie tussen deze document class en de root timeline is als volgt:

o Objecten op de stage die je in het properties panel een instance name geeft (MovieClips,
TextFields, Buttons,…), komen overeen met variabelen (properties) van deze class. Wanneer

1
In principe kan men ook erven van Sprite op voorwaarde dat de timeline geen frame scripts bevat en
geen componenten (bv. andere movieclips) die niet op alle frames gelijk zijn
MCT3 – Rich Internet Applications Kdg

je in bovenstaande dialog box het vinkje ‘automatically declare stage instances’ afzet (dit is
aangewezen), dan moet je wel zelf expliciet deze variabelen definiëren in je class. Spijtig
genoeg is het noodzakelijk om deze variabelen als public te declareren.

Flash kent vervolgens automatisch de instance op de stage toe aan deze class variable, via
getChildByName(“instancename”). Opgelet: dit gebeurt wel slechts op het moment dat de
playhead over het frame komt waarop deze instance voor het eerst op de stage verschijnt.
Indien dit dus niet in het eerste frame is, kan je deze variabele voordien nog niet gebruiken
(bv. in de constructor om er een event listener aan te koppelen) Er zijn twee manieren om
hiermee om te gaan:

• Zet de instance toch al in het eerste frame op de timeline, doch zet hem op invisible.
Roep een method van de document class aan van op het frame waarin de instance
zichtbaar moet worden. In deze method kan je dan de nodige code uitvoeren
(zichtbaar zetten, starten van entry animatie,…)

• Laat de instance op het betreffende frame staan, en roep van op dit frame een class
method aan waarop de instance zichtbaar wordt. Voer daar de nodige code uit
(koppelen van de event listener,…)

o Variabelen die worden gedefinieerd in timeline scripts zijn automatisch variabelen van deze
class. Deze worden wel slechts geinitialiseerd vanaf het punt nadat de playhead over het
betreffende frame is gelopen.

o Frame scripts op de timeline kan je ruwweg beschouwen als equivalent aan methoden van de
document class.

o Je kan de variabelen en methoden die je in de document class zelf implementeert, gewoon

gebruiken en aanroepen vanuit frame scripts. Zo kan bijvoorbeeld een script in de timeline dat
samenvalt met het einde van een bepaalde animatie, een aanroep doen naar een method van
de class waarin je dan een bepaalde actie wil ondernemen (bv. een andere pagina tonen).

o Om de playhead te bewegen vanuit de methoden in de document class kan je de specifieke

MovieClip methoden gebruiken die hiervoor bedoeld zijn: start, stop, gotoAndPlay,
gotoAndStop, nextFrame,…. Het is hierbij aangewezen om te werken met frame labels. Maak
een extra layer aan in je .fla (net boven de scripts layer), benoem deze ‘labels’ en maak dan
de nodige keyframes aan die je een label geeft in het properties panel. Je kan er dan naartoe
springen met bv. gotoAndPlay(“naamvanhetlabel”)

o MovieClip erft van Sprite-DisplayObjectContainer-InteractiveObject-DisplayObject. Je kan dus

van alle methoden die in deze classes voorhanden zijn gebruik maken. Zo voegt bijvoorbeeld
volgende code een textfield toe aan de stage:

var txtField:TextField = new TextField();

txtField.text = "Hallo";
txtField.x = 30;
txtField.y = 300;
txtField.width = 500;
addChild(txtField);

MovieClip class
Een .fla document is meestal opgebouwd uit een grote hoeveelheid geneste MovieClips. Aan elk van
deze MovieClips kan je op zich een Actionscript class koppelen. Hiervoor gelden precies dezelfde
opmerkingen als voor de document class.
Om de class te koppelen aan de MovieClip, moet je rechts klikken in de library en dan ‘Properties-
Linkage’ kiezen:
MCT3 – Rich Internet Applications Kdg

Je geeft hiermee aan dat het symbool Page1 in de library, overeenkomt met de AS class Page1.
Elke instantie van deze class die je nu op de stage sleept, komt dan overeen met een object van deze
class. Door deze instantie een instance name te geven in het properties panel, wordt deze instantie
ook een variabele (property) van de omliggende class (bv. de document class als de movieclip op de
main timeline wordt gezet, zie hoger).

Hetzelfde geld voor Button symbols, alleen moet je hier erven van de class SimpleButton ipv
MovieClip.

Bijvoorbeeld een document met 1 MovieClip en 1 Button:

package {
import flash.display.MovieClip;
import flash.display.SimpleButton;

public class VlinderDemo extends MovieClip

{
public var page1:MovieClip;
public var button:SimpleButton;

public function VlinderDemo() {

page1.gotoAndPlay(“someFrameLabel”);
button.addEventListener(MouseEvent.CLICK, onNextPage);
…
}
…
}
}