HvA Instituut voor Interactieve Media ActionScript 3.0

Transcriptie

1 PPRO 1: OEFENINGEN LES 1 Hierbij de werkgroepoefeningen behorend bij het practicum week 1. Lees de stukken uitleg aandachtig door, zonder deze informatie zullen de principes in de oefeningen moeilijk te begrijpen zijn. In deze oefeningenreeks wordt met de afkorting AS de programmeertaal ActionScript 3.0 bedoeld. De werkgroepopdrachten van deze week laten je rustig kennismaken met de programmeertaal ActionScript 3.0 en de principes van het Object Oriented Programming. Er is geen voorkennis vereist alvorens je aan deze opdrachtenreeks begint. INLEIDING Object Oriented Programming (OOP) is een manier van organiseren van code door het in te delen in objecten; op zichzelf staande elementen die informatie en functionaliteit bevatten. Door een object georiënteerde aanpak te hanteren kunnen stukjes informatie (bijvoorbeeld informatie over een CD: albumnaam, tracknamen en artiest naam) gegroepeerd worden met de benodigde functionaliteit om iets met deze gegevens te kunnen doen (bijvoorbeeld track toevoegen of geef een overzicht van alle tracks ), en weergegeven worden op een schematische manier zie figuur 1. Het kunnen bundelen van deze gegevens en functies biedt vele voordelen waaronder de mogelijkheid om een abstract iets als een computerprogramma in te delen naar gelijkenis met de echte wereld. Figuur 1: UML class diagram Object Oriented Programming is dus niet zozeer een programmeertaal op zichzelf, het is meer een manier van toepassen van een programmeertaal. In AS is het heel goed mogelijk om lineair (niet object georiënteerd) te programmeren, de ervaring leert echter dat het toepassen van Object Oriented technieken bijdraagt aan de onderhoudbaarheid en begrijpbaarheid van een programma. J.P. Sturkenboom <[email protected]> 1

2 HALLO WERELD Als vanouds is het eerste programma dat in een programmeeromgeving geschreven wordt een zogenaamd Hallo wereld programma. In de meeste gevallen het meest eenvoudige programma mogelijk, in AS zijn er echter wat randvoorwaarden die geschapen moeten worden. Laten we eerst eens proberen het script uit te voeren, daarna gaan we kijken waar alle code precies voor bedoeld is. 1. Start Adobe Flash CS3 op 2. Selecteer Create New: Flash File (ActionScript 3.0) uit de middelste kolom in het snelstarten scherm. (of kies File New en selecteer Flash File (ActionScript 3.0)) Je hebt zojuist een nieuw flash bestand aangemaakt dat klaar is om aangestuurd te worden met ActionScript 3.0. Als alles goed is gegaan zie je de flash interface met een leeg bestand zie figuur 2. Figuur 2: De flash interface met een nieuw, leeg bestand 3. Kies File Save en sla het bestand op met de naam hallowereld.fla in een handige map J.P. Sturkenboom 2

3 Het is aan te raden een nieuwe map te maken voor dit vak. Als je daarin voor elke opdrachtenreeks weer een nieuwe map aanmaakt blijf je overzichtelijk werken en kan je alles gemakkelijk terugvinden (bijv. Mijn Documenten / ActionScript / OefWeek1 / hallowereld.swf) Nu het bestand is opgeslagen kunnen we functionaliteit gaan toevoegen. Omdat we op OOP wijze programmeren doen we dit niet in het flash bestand zelf maar in een extern AS bestand. We moeten wel vertellen dat ons zojuist gemaakte flash bestand het AS bestand moet gaan gebruiken als zogenaamde Document class. 4. Selecteer onderin het tabblad Properties en vul bij het tekstvak Document class de tekst ZegHallo in (let op hoofdletters) zie figuur 3. Sla vervolgens het bestand opnieuw op door voor File Save te kiezen (of typ CTRL + S om de sneltoets te gebruiken). Merk op dat het sterretje achter de bestandsnaam bovenin het scherm verdwijnt zodra je opgeslagen hebt, aan dit sterretje kan je in een oogopslag zien of een document aangepast is! Figuur 3: De document class 5. Selecteer File New en kies ActionScript File om een nieuw AS bestand aan te maken. 6. Sla dit bestand direct op onder de naam ZegHallo.as in dezelfde map als het bestand hallowereld.fla J.P. Sturkenboom <[email protected]> 3

4 Je hebt zojuist het lege ActionScript bestand gemaakt waarmee we het eerder opgeslagen hallowereld.fla gaan aansturen, laten we wat functionaliteit gaan toevoegen. 7. Neem de onderstaande tekst over in het ZegHallo.as bestand. Sla het bestand op. public class ZegHallo extends Sprite { public function ZegHallo(){ trace("hello World!"); 8. Selecteer Control Test Movie (of druk op CTRL + Enter) om je filmpje af te spelen. Als alles goed gaat zie je het volgende zie figuur 4. Merk op dat de tekst Hello World! in het Output tab van je Flash CS3 terecht komt! (De Output tab staat onderin je Flash IDE, dus niet in het filmpje zelf) J.P. Sturkenboom <[email protected]> 4

5 Figuur 4: Het afspelen van een Flash filmpje HELLO WORLD ONDER DE LOEP Tja.. zul je denken, het Output tab is erg leuk, maar hoe krijg ik de Hello World! op mijn stage (want zo heet de zichtbare rechthoek van een flash filmpje), daar komen we zometeen op. Laten we allereerst eens gaan kijken wat we net precies aan code hebben uitgevoerd. We werken van buiten naar binnen door de haakjes heen. Alle objecten die je in AS programmeert moeten in een zogenaamde package gestopt worden. Deze package biedt programmeurs bijvoorbeeld de mogelijkheid objecten in te delen in een overzichtelijke mappenstructuur. Als je bijvoorbeeld package iam.probeersels gebruikt, zegt dit dat er in de map waar het hallowereld.fla bestand staat een submap iam is met daarin weer een map probeersels, dat is de map waar dit AS bestand J.P. Sturkenboom 5

6 staat. Als je deze notatie toepast moet het AS bestand ook wel echt in de betreffende map staan, anders krijg je een foutmelding. Als je een packagenaam weglaat en zoals in ons voorbeeld enkel het woord package neerzet wordt de standaard package gebruikt, in deze package staan automatisch alle objecten die geen packagenaam meegekregen hebben. Om in ActionScript iets te kunnen doen dien je gebruik te maken van een van de volgende drie basisobjecten: shape, sprite of movieclip. Wat het verschil hiertussen precies is vindt je terug in het hoorcollege van week 1. We maken in dit voorbeeld van het basisobject Sprite. We moeten aan flash vertellen waar de beschrijving van het object sprite zich bevindt. Dit is in de map flash.display.sprite. Merk op dat dit de zelfde notatievorm is als die eerder genoemd werd bij de uitleg over packages. In feite zijn er een heleboel objecten die de ontwikkelaars van AS bij Adobe al voor je klaar hebben gezet. Al deze door Adobe ontwikkelde objecten staan in speciale door flash opgemerkte mappen die beginnen met flash, adobe of fl. Je kunt deze mappen fysiek terugvinden op je harde schijf door met een windows verkenner (windows toets + e) te navigeren naar de map: C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\ActionScript 3.0 Om dit soort componenten makkelijker terug te vinden bieden de ontwikkelaars van een taal een overzicht aan, dit overzicht noemen we een language reference. De language reference van AS 3.0 wordt aangeboden door Adobe op: public class ZegHallo extends Sprite { Nu er vastgelegd is van welke objecten gebruik gemaakt gaat worden kunnen we een nieuw object definiëren (maken). De diktgedrukte regel noemen we een class definitie, deze bestaat uit de volgende onderdelen: Het woord public (dit is engels voor publiek), dit vertelt AS dat iedereen deze class mag aanroepen, hij is als het ware publiekelijk toegankelijk. De woorden die je hier neer kunt zetten zijn: public, internal, protected en private. De mogelijkheid om de toegankelijkheid van een object te bepalen heet encapsulation en is een van de randvoorwaarden van OOP, hierover later meer. Het woord class, in AS worden objecten gemaakt op basis van sjablonen, deze sjablonen noemen we classes. We vertellen hier aan AS dat er een nieuw sjabloon wordt gemaakt. De naam van de class, ZegHallo. Het is gebruikelijk om voor de naam van een class altijd een hoofdletter te gebruiken. J.P. Sturkenboom <[email protected]> 6

7 De woorden extends Sprite. Dit geeft aan AS aan dat het object dat we maken een uitbreiding is op het basisobject Sprite. In ActionScript is de document class (dus het document dat je aan een.fla bestand koppelt) altijd een uitbreiding op een van de classes: Shape, Sprite of MovieClip. public class ZegHallo extends Sprite { public function ZegHallo(){ trace("hello World!"); Tot slot voegen we een zogenaamde constructor toe, dit is een speciale functie die automagisch aangeroepen wordt zodra het programma uitgevoerd wordt. De constructor draagt altijd dezelfde naam als de class, in ons script is dit dus ZegHallo. Het enige dat deze functie uitvoert is de zin Hello World! weergeven in het zogenaamde output scherm, hiervoor wordt de standaardfunctie trace gebruikt. Trace wordt gebruik om informatie naar het output scherm te sturen, dit is heel handig om je filmpje mee te debuggen hierover later meer. Het gebruik van functies is wellicht een nieuw concept; een functie is een bepaald stukje code dat herhaald uitgevoerd kan worden. Gelukkig hoef je niet alle functies zelf te verzinnen, het Adobe Flash CS3 team heeft al een heleboel denk en programmeerwerk voor je gedaan, daar mag je allemaal gebruik van maken als je ActionScript gebruikt om jouw filmpjes mee te maken. HALLO WERELD REVISED AND IMPROVED Het is natuurlijk heel erg tof dat we in het vorig script een tekst in het output scherm van Flash kunnen neerzetten, maar er gebeurt nog helemaal niets in het echte scherm van het flash filmpje. Laten we nu eens een echt Hello World! script maken. 1. Als het scherm met het flash filmpje nog steeds open staat dan sluit je dit. J.P. Sturkenboom <[email protected]> 7

8 import flash.text.textfield; public class ZegHallo extends Sprite { public function ZegHallo(){ var mytext:textfield = new TextField(); mytext.text = "Hello World!"; addchild(mytext); 2. Neem de volgende aanpassingen (dikgedrukt) over in ZegHallo.as bestand. Sla het bestand op. De functionaliteit die in het script hierboven toegevoegd wordt is als volgt. Er wordt naast de class Sprite nog een extra class geïmporteerd, de class TextField. Dit is een standaard tekstveld waarmee een stuk tekst in een flash filmpje kan worden neergezet, we maken hier gebruik van een door het team van Adobe voorgedefiniëerde class. Deze class zit in het package flash.text (deze staat dus zoals eerder gezegd in de directory In de constructor van ZegHallo gebeurt nu het volgende, er wordt een nieuw object aangemaakt van het type TextField, dit mogen we gebruiken omdat we deze eerder geïmporteerd hebben, vervolgens wordt aan het tekstveld de tekst Hello World! meegegeven. In principe mag je tussen de aanhalingstekens iedere willekeurige tekst invoeren. Tenslotte wordt het tekstveld via de functie addchild() toegevoegd aan het flashfilmpje. J.P. Sturkenboom <[email protected]> 8

9 3. Selecteer Control Test Movie (of druk op CTRL + Enter) om je filmpje af te spelen. Als alles goed gaat zie je het volgende zie figuur 5. Merk op dat de tekst Hello World! nu in het flash uitvoerscherm komt te staan. Figuur 5: Hello World revised and improved Gefeliciteerd, je programmeert ActionScript! J.P. Sturkenboom <[email protected]> 9