Mijn oog viel een paar maanden geleden op de vernieuwde Actionscript taal die sinds het uitkomen van Flash 9 drastisch is veranderd. Actionscript is de scripttaal die binnen Flash wordt gebruikt om interactie mogelijk te maken. Als je aan Actionscript denkt denk je waarschijnlijk niet direct aan een programmeertaal. In dit korte blog artikel zal ik een korte inleiding geven op Actionscript 3.0 en een simpel praktijk voorbeeld (met uitleg) geven om aan te geven dat Actionscript inmiddels een volwassen programmeertaal is geworden.

Eerst moet ik even iets duidelijk maken over Flash. Wat een veel voorkomend misverstand is, is dat Flash alleen voor designers is en niet voor techneuten. Niet helemaal waar…

Grofweg gezegd, kan je Flash onderverdelen in twee smaken:

• Adobe Flash: Flash voor ‘designers’. De applicatie heeft veel weg van Adobe Illustrator en Macromedia Freehand. Designers kunnen illustraties importeren of maken binnen Flash en deze animeren dmv. een “timeline” en “tweening” (een object van X naar Y transformeren binnen een bepaald tijdsbestek). Binnen Adobe Flash zit een eenvoudige IDE om kleine Actionscripts te tikken.
• Adobe Flex Builder: Flash voor ontwikkelaars. Een op Eclipse gebaseerde IDE waar alleen de mogelijkheid bestaat om programmeercode te kloppen. Er is geen timeline of stage. Er bestaat de mogelijkheid om je Flash project te debuggen.

Mijn voorkeur gaat uiteraard uit naar Adobe Flex Builder. Er is geen timeline aanwezig, alle animaties kun jezelf programmeren en je doet alles door middel van programmeren in plaats van met een WYSIWYG editor.

Veel meer controle over je zaken dus.

Karakteristieken

Actionscript heeft veel weg van een combinatie van Javascript, Java en PHP. Het ondersteund volledig OO en heeft een package management systeem. Grootste verschil met Javascript en PHP: Actionscript is een strong typed language. Vooral bij grotere applicaties ga je dit merken in de performance van de virtual machine van Flash.

Een groot voordeel van Flash is dat het zeer eenvoudig is om koppelingen te maken met externe bronnen. Een AJAX (RIA) achtige applicatie is dus snel te maken.

Voordeel boven een AJAX applicatie is de vormgeving, die op elke browser of systeem hetzelfde is. Daarnaast worden grafische elementen mooi gerenderd; fonts, bitmaps en vectors worden altijd soepel op het scherm getoond. Dit maakt dat Flash animaties er vaak gelikter uitzien dan Javascript animaties.

Last but not least: de browsercompatibiliteit (dag IE bugs) en het feit dat (volgens Adobe) op ruim 95% van alle PC’s de Flash plugin is geïnstalleerd.

Bekend nadeel van Flash is de vindbaarheid van zoekmachines en het ontbreken van enige semantiek. Daarnaast kan Flash op vooral wat oudere systemen erg traag zijn en hebben Flash files de neiging snel uit te dijen (vooral bij gebruik van bitmap plaatjes en/of geluidsbestanden).

IDE & SDK

Adobe heeft besloten de Flash compiler SDK gratis ter beschikking te stellen. Voor de Adobe Flex Builder IDE moet echter betaald worden. Er zijn ook alternatieven maar die zijn voor Actionscript 2.0 nog druk in ontwikkeling.

Persoonlijk geef ik de voorkeur aan Adobe Flex Builder omdat het een zeer complete ontwikkelomgeving is. Deze is momenteel verkrijgbaar als Public Beta en is hier te downloaden. Het is gebaseerd op Eclipse (vertrouwd) en het heeft een fijne debugger aan boord (méér dan handig).

Praktijk voorbeeld: Hello World

Oké, nu genoeg inleiding. Aan de slag met Actionscript. Geheel in stijl van Kernighan: een “Hello World” applicatie.

In de onderstaande code zul je de tekst “hello world” van links boven, naar rechts onder zien bewegen terwijl deze 360 graden om zijn as draait.

De code; HelloWorld.as:

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;    
 
    [SWF(width="250", height="250", frameRate="30", backgroundColor="#EEEEEE")]
    public class HelloWorld extends Sprite {
        private var text:TextField = new TextField();
 
        [Embed(systemFont="NeuzeitGrot", fontFamily="NeuzeitGrot", fontName="Neuzeit", mimeType="application/x-font")]
        private var standardFont:Class;
 
        private var direction:int = 0;
 
        public function HelloWorld() {
            text.embedFonts = true;
            text.htmlText = "<font color="#ff0000" face="Neuzeit" size="15">hello</font> <font color="#0000ff" face="Neuzeit" size="15">world</font>";
            addChild(text);
 
            text.x = 5;
            text.y = 5;
 
            addEventListener(Event.ENTER_FRAME, doMove);
        }
 
        private function doMove(e:Event):void {
            if (direction == 0) {
                text.x += 2;
                text.y += 2;
 
                if (text.x &gt; text.stage.stageWidth || text.y &gt; text.stage.stageHeight) direction = 1;
            } else {
                text.x -= 2;
                text.y -= 2;
 
                if (text.x &lt; 0 || text.y &lt; 0) direction = 0;
            }
 
            text.rotation++;
            if (text.rotation &gt; 359) text.rotation = 0;
        }
    }
}

De hoofdklasse van een Actionscript project dient altijd een klasse te zijn van het type DisplayObject. Het entrypoint van de applicatie is altijd de constructor van je hoofdklasse.

Sprite is in dit bovenstaande voorbeeld een overerving van DisplayObject. Er zijn een aantal verschillende DisplayObject types met elk hun eigenschappen. Elk type gebruikt weer meer of minder resources en heeft weer een aantal grafische eigenschappen. Zo kun je bijvoorbeeld met Bitmap alleen bitmaps weergeven en met Shape alleen vectoren.

Compiler tags

Tussen de blokhaken [ ] staan altijd zgn. compiler tags. Deze geven instructies mee aan de compiler. In dit geval [SWF(width="500", height="500", frameRate="30", backgroundColor="#EEEEEE")] dat de Flash movie 500 bij 500 pixels aan ruimte beslaat, met een framerate van 30 beelden per seconde opereert en een licht grijze (#EEEEEE) achtergrond kleur heeft.

Met deze compiler tags kun je ook afbeeldingen (SVG, PNG, JPG etc.) of fonts “embedden” [Embed]. Deze “assets” worden dan opgenomen in de gecompileerde SWF file. Afhankelijk van de situatie is het soms slim om bepaalde zaken te embedden, of juist dynamisch in te laden. Het ligt er maar net aan hoe vaak je een asset hergebruikt.

Zoals je ziet wordt het systeemfont “NeuzeitGrot” ge-embed en wordt daarbij een klasse standardFont aangemaakt. Een [Embed] tag dient altijd gekoppeld te zijn aan een klasse.

[Embed(systemFont="NeuzeitGrot", fontFamily="NeuzeitGrot", fontName="Neuzeit", mimeType="application/x-font")]
private var standardFont:Class;

DisplayObjects

Een DisplayObject is een grafisch element (dus daadwerkelijk zichtbaar) en is tevens een container waarin weer andere DisplayObjects geplaatst kunnen worden. De klasse HelloWorld is in dit geval de stage (of canvas), het hoofd DisplayObject, oftwel: het scherm. Door middel van de methode addChild voegde we een TextField toe aan ons scherm.

addChild(text);

Zolang DisplayObjects in een container blijven, zijn aanpassingen op zo’n object, direct zichtbaar. In het bovenstaande voorbeeld plaatste ik text op positie 5,5. In Flash zijn de x en y coördinaten relatief ten opzichte van het bovenliggende (parent) DisplayObject. In het bovenstaande voorbeeld werd text dus op 5, 5 geplaatst op het scherm (klasse HelloWorld).

Fonts

In het bovenstaande voorbeeld gebruikte ik het font “Neuzeit”. Omdat Neuzeit niet op elk systeem aanwezig is, heb ik het font ge-embed.

    text.embedFonts = true;
    text.htmlText = "<font color="#ff0000" face="Neuzeit" size="15">hello</font> <font color="#0000ff" face="Neuzeit" size="15">world</font>";

Door property embedFonts op true te zetten weet Flash dat er embedded fonts gebruikt moeten worden. In de property htmlText kun je eenvoudige HTML teksten zetten. De te gebruiken HTML tags zijn redelijk beperkt maar stellen je wel in staat om linkjes en/of simpele opmaak te gebruiken in schermteksten. Verwacht dus geen embedded XHTML compliant browser.

Event listeners

Binnen Actionscript wordt veel gewerkt met “Event listeners”. Functies in Actionscript zijn objecten (net als in bijvoorbeeld Python of Javascript). In het bovenstaande voorbeeld wordt een event listener toegevoegd of klasse HelloWorld.

addEventListener(Event.ENTER_FRAME, doMove);

Bovenstaande regel zorgt ervoor dat elke 30 frames per seconde (zie compilertag [SWF]), de functie doMove wordt aangeroepen.

private function doMove(e:Event):void {
    if (direction == 0) {
        text.x += 2;
        text.y += 2;
 
        if (text.x > text.stage.stageWidth || text.y > text.stage.stageHeight) direction = 1;
    } else {
        text.x -= 2;
        text.y -= 2;
 
        if (text.x < 0 || text.y < 0) direction = 0;
    }
 
    text.rotation++;
    if (text.rotation > 359) text.rotation = 0;
}

De tekst wordt, afhankelijk van direction:int bewogen en wordt elk frame 1 graad gedraaid.
Elk DisplayObject dat zichtbaar is (doordat al zijn parents weer op de stage staan), krijgt de property stage mee. Via de stage property, kunnen via de properties stageWidth en stageHeight de dimensies van het scherm worden opgevraagd (ook wel canvas genoemd).

Compile en run

Hoe de HelloWorld applicatie te bekijken? Ga in Adobe Flex Builder naar menu “Run” en klik op “Run HelloWorld”. De applicatie zal starten in je standaard browser. Veel moeilijker kan het niet worden.

Wil je liever zelf compileren? Gebruik dan de mxmlc compiler die in de SDK zit:

    mxmlc [options] target_file

Meer Actionscript?

Er valt natuurlijk nog veel meer over Actionscript te vertellen. Animaties kunnen namelijk om met tweens worden gemaakt, je kunt JSON of XML berichten parsen etc. etc. etc… Ik ben er in ieder geval zeer enthousiast over!

Ik ben van mening dat Flash in de toekomst een grotere rol gaat spelen dan dat het nu doet. Dit vooral dankzij de SDK die door Adobe beschikbaar is gesteld waardoor Flash nu voor een grotere groep ontwikkelaars bereikbaar wordt.

Zou je meer over Actionscript willen weten / leren? dan kan ik je het boek Essential Actionscript 3.0 door Colin Moock aanraden.
——————————————————————
Meer weten over Finalist IT Group?