Macromedia Flash is gelukkig al een tijdje het niveau van de stuiterende intro’s ontgroeid. Zeker de laatste paar versies zijn uitstekende gereedschappen geworden om dynamische websites mee te maken.

Maar met deze veranderingen zijn de projecten een stuk complexer geworden. Je raakt al snel het overzicht en de structuur kwijt, zeker als je met Actionscript werkt. Zo heeft iedereen die ooit iets met Flash heeft gemaakt zich weleens afgevraagd waar dat ene kleine stukje Actionscript nou weer is gebleven. Of hoe die routine in elkaar zat die je twee maanden geleden had gemaakt.

Gelukkig is het met het gebruik van wat simpele Actionscript-technieken goed mogelijk om overzicht te houden. Met als resultaat tijdwinst en minder frustratie. De nadruk ligt in dit artikel op Flash 6, daar wordt namelijk op dit moment nog het meeste voor ontwikkeld. Met Actionscript 2 zijn er in Flash 7 wel veel dingen veranderd, maar het idee blijft hetzelfde.

Verdeel en heers

MovieClips zijn een centraal onderdeel in Flash. Een van de dingen die het gebruik van MovieClips zo handig maakt is dat het op zichzelf staande ‘blokken’ zijn. Met Actionscript kun je dit ook doen in de vorm van functies en prototypes. Bijvoorbeeld:

mijnFunctie = function(a,b) {
	//
	// inhoud van de functie
	//
	var c;
	c = a + b;
	// c is het resultaat
	//
	return c
}

Alhoewel iedereen die met Flash werkt het principe van functies wel kent, valt het me op dat veel ontwerpers er weinig of onhandig gebruik van maken. Dat is erg zonde. Ze maken het leven heel wat makkelijker. Nou ja, bij het scripten dan.

Door je code logisch op te delen is het mogelijk om veel stukken steeds opnieuw te gebruiken. Probeer die opdeling zo vroeg mogelijk te vinden, meestal kan dit al met het (functioneel) ontwerp. Kijk voor je begint eens goed naar het ontwerp. Zijn er onderdelen die steeds terug komen? Zijn er patronen te vinden van dingen die steeds na elkaar gebeuren? Wat gebeurt er één keer (initalisatie) en wat komt vaker voor (verversen inhoud)? Die onderdelen zijn kandidaat voor een eigen object of een set functies.

Door van deze elementen aparte blokken te maken bespaar je jezelf veel werk. Je hoeft niet iedere keer opnieuw de scripts te kopiëren en te plakken of – nog lastiger – te maken. Ook belangrijk: alle aanpassingen hoeven maar op één plek te gebeuren. Dus als in het hele ontwerp de achtergrond van de tekst verandert, dan hoef je alleen maar de functie maakTekstAchtergond() aan te passen.

Het is echt belangrijk om zo vroeg mogelijk de opdeling te maken. Als je al een deel van de code hebt geschreven is de verleiding groot om in dat pad door te gaan en dan eindig je nóg met allemaal stukken code die vrijwel identiek zijn. Het overkwam mij laatst, en dat kostte me uiteindelijk veel te veel tijd bij het vinden van de onvermijdelijke fouten. Naar mate je het opdelen vaker doet, begin je de patronen overigens sneller te zien.

Bij het schrijven van functies is het handig om het volgende in gedachten te houden:

• Maak ze zo compact en algemeen mogelijk
  Door de functies klein te houden zijn ze op meer plaatsen te gebruiken. En om verschillende functies te combineren kun je een overkoepelende functie maken.
• Zorg voor goede documentatie
  Neem bij het ontwikkelen de tijd om commentaar toe te voegen. En zo uitgebreid mogelijk. Dan weet je later nog wat alles doet. Zelf voeg ik tijdens het ontwikkelen opmerkingen toe en werk ik later als ik nog goed weet hoe alles werkt (bijvoorbeeld eens per dag) de code nog eens door, maak het commentaar netter en duidelijker waar nodig. Erg fijn als je twee maanden later weer wat moet aanpassen.

Prototypes

Een stap verder gaat het gebruiken van prototypes. Dit zijn functies die de in Actionscript bestaande object-types uitbreiden. Je voegt niet een functie aan een specifiek object toe, maar laat de functie aan ieder bestaand object toevoegen. En dat met 1 stukje code. Dit voegt de functie ‘verplaats’ toe aan iedere movieClip:

MovieClip.prototype.verplaats = function(x,y) {
	this._x += x;
	this._y += y;
}

Dit gaat net zoals bij een gewone functie, maar deze wordt aan het prototype van MovieClip toegevoegd. Een willekeurige MovieClip kan nu verplaatst worden met:

mijnClip.verplaats(10, 5);

Het is dus een algemene functie geworden van het object MovieClip. En dit is in ieder project opnieuw te gebruiken. Gewoon de code toevoegen in de hoofdtijdlijn en het is overal beschikbaar.

Zo gebruik ik in vrijwel ieder project een aantal methodes om iedere willekeurige parameter van een MovieClip te tweenen. Ideaal voor alle fades en dergelijke. En het kost me in een nieuw project maar een regel of drie.

Dit alles klinkt misschien allemaal erg ingewikkeld en er is hier niet echt de ruimte om alles uit te werken. Gelukkig zijn er al veel prototypes te vinden zodat je niet het wiel opnieuw uit hoeft te vinden en van de voorbeelden leer je heel snel. Een hele uitgebreide collectie is op proto.layer51.com te vinden. Bij Macromedia vind je een collectie aan handige uitbreidingen voor de standaard tekenfuncties in MX.

#include

Flash heeft met #include de mogelijkheid om losse actionscript document met de .as extensie in te voegen. Dit betekent dat bij het maken van de SWF de #include wordt vervangen door de inhoud van dit document. Bijvoorbeeld:

#include "mijnRoutines.as"

Het pad is relatief aan de FLA dus je kunt alles verzamelen in zijn eigen folder:

#include "actionscript/mijnRoutines.as"

(Met Flash MX 2004 is het voor Actionscript 2 ook mogelijk de documenten van verschillende projecten te verzamelen op één plaats zodat je minder problemen hebt om bij te houden wat de nieuwste versie is.)

Het gebruiken van losse documenten voor Actionscript heeft een aantal grote voordelen. Ten eerste maakt dit het Flashbestand weer wat overzichtelijker. Er is geen limiet aan het aantal includes, dus iedere functie of onderdeel kan zijn eigen bestand krijgen. Ook hoeven het niet per se functies te zijn, maar het is ook een hele handige plek om algemene variabelen te verzamelen als kleurcodes, url’s, maten, etcetera.

Losse documenten maken het ook makkelijker om prototypes van het ene project voor het andere te gebruiken of voor verschillende FLA’s binnen een project. En aangezien Actionscript documenten gewoon tekstformaat zijn is het nu ook mogelijk om een losse editor te gebruiken voor je Actionscript documenten. Bijvoorbeeld Dreamweaver of een speciale Actionscript editor als SciTE|Flash. Deze zijn vaak handiger dan de ingebouwde editor en hebben de mogelijkheid om met meerdere bestanden tegelijkertijd te werken.

Voor Windows zijn er verschillende Actionscript editors waaronder de gratis SE|PY en SciTE|Flash, en de commerciele PrimalScript.

Helaas zijn er voor de Mac wat minder, maar BBEdit is erg uitgebreid en populair. Mijn favoriete Mac-editor is SubEthaEdit. Gratis, simpel en met een hoop handige functies. Verder is het de bedoeling dat er binnenkort ook een versie van Se|Py voor de Mac beschikbaar is.

Tijdlijnen

Ook binnen de tijdlijnen is het overzichtelijk om een vaste structuur aan te houden. Verzamel alle code op een tijdlijn van het document of clip. Zo kun je het altijd makkelijk terugvinden. Beter nog, maak één tijdlijn voor alle toestanden (states) van het document zoals laden, hoofdpagina, formulier, etc. Hierin worden alleen de functies aangeroepen. Deze staan weer in een aparte tijdlijn. Dit lijkt misschien wat omslachtig, maar zo raak je het aanroepen van de functies niet kwijt tussen de functies zelf. Je kunt dan snel alles terugvinden en aanpassen. Bijvoorbeeld:

Code op de tijdlijn states:

initaliseer();
laadXML();

code op de tijdlijn functies:

intialiseer = function() {
    //
    //    initalisatie routine
    //
}

//
//    de laadXML routine staat in een los document
//

#include "actionscript/laadXML.as

Het is vaak ook handig om alle functies, prototypes en includes te verzamelen in twee frames. Op het eerste frame van de tijdlijn staat alleen wat nodig is voor de lader van de SWF. En op het eerste frame na de lader staat de rest. Zo begint de lader zo snel mogelijk.

Tot slot

Hopelijk heeft dit artikel wat aanknopingspunten gegeven om het werken met Actionscript wat meer structuur te geven. In het begin lijkt het allemaal wat lastig en meer werk, maar al snel merk je dat het je veel tijd oplevert. En na een paar projecten heb je een mooie collectie aan prototypes om steeds opnieuw te gebruiken.

Meer informatie is te vinden in het ‘Best practices’ document (PDF - 713 kB) van Macromedia zelf.

© NAAR VOREN » 25 februari 2004 » Nr.76 » http://www.naarvoren.nl/artikel/actionscript.html

zoek: