HvA Instituut voor Interactieve Media

HvA – Instituut voor Interactieve Media

Programmeren

PPRO: WERKGROEPOEFENINGEN WEEK 2 Hierbij de werkgroepoefeningen behorend bij het practicum week 2. 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 behandelen het tekenen van een figuur door middel van de AS ‘graphics library’ (oftewel de package met alle tekenmethoden die je kunt gebruiken. We gaan bij deze opdrachten van uit dat je de hoorcolleges van week 1 en week 2 gevolgd hebt, dat je het opgegeven huiswerk gelezen en behandeld hebt. PS: Er staat een nieuwe Snippets‐panel, speciaal aangepast voor IAM, op het intranet op de vakpagina.

INLEIDING Als je al eens tekeningen op de computer gemaakt hebt ben je waarschijnlijk gewend dit met behulp van de muis of een pen‐tablet te doen. Er zijn een aantal door Adobe ontwikkelde programma’s die dit mogelijk maken waarvan Flash CS3 een voorbeeld is. De middelen die flash ter beschikking stelt om tekenen mogelijk te maken staan in figuur 1. Zoals jullie weten is het bij dit vak niet toegestaan om te tekenen op de gebruikelijke methode. Om te leren omgaan met de door Adobe aangeleverde ‘graphics library’ – en om je klaar te stomen voor het maken van de eerste deeltoets – volgen een serie oefeningen die de meest gebruikte functies van de ‘graphics library’ zullen uitleggen. Nota bene: Alle methoden in het tools‐panel zijn ook beschikbaar door middel van code, je kunt dus alle tekentools uit flash ook met AS aanroepen. De meest gebruikte voorbeelden hiervan zijn:

graphics.lineTo graphics.drawCircle graphics.drawEllipse graphics.drawRect graphics.roundRect

Ga bij jezelf na waar deze methoden (functies in een class) voor gebruikt worden!

Figuur 1: De flash tool‐panel

J.P. Sturkenboom <[email protected]>

1


Programmeren

X‐AS EN Y‐AS In 1637 ontwikkelde de Franse wiskundige en filosoof René Descartes een methode om de positie of object op een vlak aan te duiden door gebruik te maken van twee snijdende assen als meetlijn. In zijn Discours de la méthode legt hij uit hoe dit zogenaamde cartesisch coördinatenstelsel gebruikt moet worden. Twee of meer snijdende lijnen vormen een vlak waarop de positie van een object in cijfers aangegeven kan worden. Sindsdien is de mensheid niet afgeweken van het door Descartes ontwikkelde idee, in bijna alle meetkundige systemen, denk bijvoorbeeld aan landkaarten of het GPS systeem (Figuur 2), worden de assenstelsels van Descartes nog steeds toegepast.

Figuur 2: Een stafkaart van Zuid‐Limburg

Als je in de wiskunde grafieken wilt tekenen maak je gebruik van dit coördinatenstelsel, namelijk in een zogenaamd assenstelsel. Traditioneel noemen we de horizontale as de X‐as en de verticale as de Y‐as. Als je wiskunde in je pakket had kan je je wellicht nog herinneren hoe je functies uit moest tekenen in zo’n assenstelsel, In figuur 3 zie je een afbeelding van een assenstelsel met daarop een betrekkelijk ingewikkelde wiskundige functie.

Figuur 3: Een assenstelsel


2


Programmeren

Ook in de Flash omgeving werken we met coördinaten op een X en een Y as, als je in het overzicht van het .fla bestand in de Flash CS3 IDE uit het menu View‐>Rulers aanvinkt verschijnt er een horizontale en een verticale schaalverdeling waarop je de pixels van jouw flash‐filmpje kunt zien (zie figuur 4). Merk op dat in de Flash omgeving de linkerbovenhoek geld als het nulpunt! Onthoud goed: X is de horizontale as, Y is de verticale as!

Figuur 4: De Flash interface met ingeschakelde rulers

Gedachtenexperiment: Stel dat je in Flash een nieuw .fla bestand hebt gemaakt van 800 pixels breed en 600 pixels hoog. We willen vervolgens een object, laten we zeggen een bal, precies in het midden van het scherm neerzetten. Op welk coördinaat moet dat object dan neergezet worden?


3


Programmeren

TEKENEN MET CODE Om te beginnen hebben we een basisopzet flash en main class voor onze Flash animatie nodig, voer om dit te bereiken de volgende opdrachten uit (als je niet meer weet hoe alles moet, kijk dan nog eens in de werkgroepopdrachten voor week 1): 1.

Start Adobe Flash CS3 op. Maak een nieuw Flash bestand (met ActionScript 3.0 ondersteuning). Vul bij document class Main in. Sla het bestand op in een nieuwe map met de naam werkgroepOpdrachtWeek2.fla Maak een nieuw Actionscript bestand aan. Kopiëer het basisrecept voor een ActionScript Class Sla het bestand op in dezelfde map als werkgroepOpdrachtWeek2.fla en noem het Main.as

2. 3. 4. 5. 6. 7.

Als het goed is ziet je AS bestand er nu ongeveer als volgt uit:

package { //Importeer benodigde classes import flash.display.Sprite;

public class Main extends Sprite { //Maak constructor functie public function Main(){

} } }

Hint: Voeg om te testen of alles goed is ingesteld een trace(‘met een willekeurige tekst’) toe aan de constructor functie. Als je je filmpje test en je ge‐trace‐de tekst verschijnt in het output vakje weet je namelijk zeker dat je class gekoppeld zit aan je .fla bestand! J.P. Sturkenboom <[email protected]>

4


Programmeren

Goed, de basis is er, laten we nu eindelijk eens wat gaan doen (^.^)=b 8.

Voer de hieronder gegeven aanpassingen door en sla het bestand op (CTRL + S).


public class Main extends Sprite { //Maak constructor functie public function Main(){ graphics.lineStyle(2, 0xff0000, 1); graphics.lineTo(200,200); } }

9.

Selecteer Control Æ Test Movie (of druk op CTRL + Enter) om je filmpje af te spelen. Als het goed is werkt je filmpje zonder foutmeldingen.

w00t, je hebt zojuist je eerste lijn getekend met behulp van ActionScript. Hiertoe heb je twee methoden uit het graphics onderdeel van je Sprite gebruikt, respectievelijk lineStyle en lineTo. Deze functies werken als volgt (geknipt uit de AS3 Language Reference klik linksonder in beeld op Graphics voor het complete overzicht): lineStyle() method public function lineStyle(thickness:Number = NaN, color:uint = 0, alpha:Number = 1.0):void Specifies a line style that Flash uses for subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) for the object. The line style remains in effect until you call the lineGradientStyle() method or the lineStyle() method with different parameters. You can call lineStyle() in the middle of drawing a path to specify different styles for different line segments within the path. Note: Calls to the clear() method set the line style back to undefined. Parameters: thickness:Number (default = NaN) — An integer that indicates the thickness of the line in points; valid values are 0 to 255. If a number is not specified, or if the parameter is undefined, a line is not drawn. If a value of less than 0 is passed, the default is 0. The value 0 indicates hairline thickness; the maximum thickness is 255. If a value greater than 255 is passed, the default is 255. color:uint (default = 0) — A hexadecimal color value of the line; for example, red is 0xFF0000, blue is 0x0000FF, and so on. If a value is not indicated, the default is 0x000000 (black). Optional. alpha:Number (default = 1.0) — A number that indicates the alpha value of the color of the line; valid values are 0 to 1. If a value is not indicated, the default is 1 (solid). If the value is less than 0, the default is 0. If the value is greater than 1, the default is 1.


5


Programmeren

De functie lineTo() is iets eenvoudiger:

lineTo() method public function lineTo(x:Number, y:Number):void Draws a line using the current line style from the current drawing position to (x, y); the current drawing position is then set to (x, y). If the display object in which you are drawing contains content that was created with the Flash drawing tools, calls to the lineTo() method are drawn underneath the content. If you call lineTo() before any calls to the moveTo() method, the default position for the current drawing is (0, 0). If any of the parameters are missing, this method fails and the current drawing position is not changed. Parameters: x:Number — A number that indicates the horizontal position relative to the registration point of the parent display object (in pixels). y:Number — A number that indicates the vertical position relative to the registration point of the parent display object (in pixels). 10. Voer de hieronder gegeven aanpassingen door en sla het bestand opnieuw op (CTRL + S).


public class Main extends Sprite { //Maak constructor functie public function Main(){ graphics.lineStyle(2, 0xff0000, 1); graphics.lineTo(0, 200); graphics.lineTo(200, 200); graphics.lineTo(200, 0); graphics.lineTo(0, 0); } } }

11. Beredeneer wat er gaat gebeuren, test vervolgens je filmpje. Gebeurt er wat je verwacht had? Oefening: Probeer zelf met AS een lijntekening te maken en pats ermee bij je buurman/ buurvrouw ;) J.P. Sturkenboom <[email protected]>

6


Programmeren

LIEVE HEER Omdat we ondertussen wel eens mogen beginnen met het aanleggen van een eigen library aan classes, maar voornamelijk omdat we lui zijn en graag zaken hergebruiken (waarom zou je iets 2 keer typen), gaan we nu een object in een externe class neerzetten. De titel van deze oefening doet wellicht duiden op een religieuze inhoud maar naast het verkondigen van OOP regels zal hier verder geen sprake van zijn, de titel slaat meer op het object dat we gaan tekenen, een lieveheersbeestje. Om een object in een externe class te kunnen maken dienen we daar eerst een basis voor op te zetten, laten we eens kijken: 1. Maak een nieuw Flash bestand (met ActionScript 3.0 ondersteuning), koppel hieraan een Main document class en sla het bestand op in een nieuwe map met de naam lieveheer.fla 2. Maak ook een nieuw AS bestand aan, kopiëer het basisrecept voor een AS Class en sla het bestand op in dezelfde map als lieveheer lieveheer.fla en noem het Main.as 3. Maak nog een nieuw AS bestand aan, kopiëer opnieuw het basisrecept voor een AS Class en sla het bestand op in dezelfde map als lieveheer lieveheer.fla en noem het Lieveheersbeestje.as. Voeg in de constructor functie een trace("met een tekst!") toe om te controleren of het bestand uitgevoerd wordt. 4. Hernoem in het AS bestand Lieveheersbeestje.as de classnaam en de constructornaam naar Lieveheersbeestje 5. Neem de hieronder aangegeven aanpassingen over in het bestand Main.as en sla het bestand op.

package { import flash.display.Sprite; import Lieveheersbeestje;

public class Main extends Sprite { public var myBug:Lieveheersbeestje;

public function Main(){ myBug = new Lieveheersbeestje(); myBug.x = 300; myBug.y = 300; addChild(myBug); } } }


7


Programmeren

6. Selecteer Control Æ Test Movie (of druk op CTRL + Enter) om je filmpje af te spelen. Als het goed is werkt je filmpje zonder foutmeldingen. Bekijk het output panel, wat valt je op? Als alles goed is gegaan zag je in het output panel de trace("met een tekst!") die je in de class Lieveheersbeestje hebt ingevoerd, hoe kan dat? Laten we eens regel voor regel door het Main.as script gaan:


public class Main extends Sprite { ...

Allereerst importeren we de 2e class die we hadden gemaakt, het Lieveheersbeestje, deze is nu klaar om aangeroepen te worden in onze Main class.


public class Main extends Sprite { public var myBug:Lieveheersbeestje; ...

Om het lieveheersbeestje te kunnen gaan gebruiken moeten we een zogenaamde variabele gebruiken, een variabele in een programmeertaal zoals ActionScript is een plaats in het geheugen van een computer waar een bepaald soort gegeven kan worden opgeborgen. Na verloop van tijd kun je als je wilt op dezelfde plaats een ander gegeven opbergen. Zoals vorige week in de oefeningen gesteld kan je een variabele zien als de naam voor een object. Zoals je een kind een naam geeft om hem op bepaalde leeftijd binnen te kunnen roepen voor het eten zo geven we ook objecten een naam om ze aan te kunnen spreken. Omdat een variabele in AS altijd een specifiek type object aanduid moet je expliciet maken welk type dat is, dat doe je door middel van een dubbele punt. De vetgedrukte zin hierboven kan je lezen als: Maak een nieuwe publiek toegankelijke variabele aan met de naam myBug van het type Lieveheersbeestje. Het type object, in dit geval een Lieveheersbeestje bepaalt welke methoden (functies in een class) en eigenschappen (variabelen in een class) kunnen worden aangesproken. Het is dus erg belangrijk om het juiste type te kiezen. Nu we hebben gesteld dat myBug een Lieveheersbeestje is kunnen we ons gaan bezighouden de weergave van het insect. Let op, het feit dat we een variabele hebben gereserveerd wil nog niet zeggen dat het object ook echt geinstanciëerd (aangemaakt) wordt. J.P. Sturkenboom <[email protected]>

8


Programmeren




We beginnen met het daadwerkelijk programmeren in de constructor functie, dit is een functie die exact dezelfde naam draagt als de class waar hij in staat. Deze functie is speciaal omdat ze automagisch uitgevoerd wordt zodra er een object vanuit deze class geinstancieerd word, omdat deze functie het object als het ware construeert is voor de naam constructor gekozen. In de constructor functie van de bovenstaande Main class zie je het volgende gebeuren. De eerste regel verteld dat de eerder gereserveerde variabele myBug nu ook daadwerkelijk gebruikt gaat worden, middels de = operator wordt er een waarde aan meegegeven. De waarde die in de variabele gestopt wordt is een nieuwe instance van het type object Lieveheersbeestje. Door op deze manier het woordje ‘new’ te gebruiken wordt automagisch de constructor van de class Lieveheersbeestje aangeroepen. Dit is dus de reden dat we daarnet tijdens het testen de trace("met een tekst!") zagen verschijnen in ons output panel. Vervolgens worden er twee eigenschappen van myBug (wat nu een echt aangemaakt object is) aangepast, de X en de Y waarde. Descartes had nooit gedacht dat jij zijn cartesisch coördinatenstelsel nog eens zou toepassen in een programmeeropdracht! Wat we hiermee doen is de myBug op coördinaat (300, 300) van de stage neerzetten. Alles wat we straks in de class myBug gaan toevoegen wordt dus door onze Main class alvast 300 pixels van de bovenrand en 300 pixels van de linkerrand van het filmpje af geplaatst. Zoals in het college behandeld moeten we het object ook nog toevoegen aan de stage, dat doen we door middel van de functie addChild(). (Deze functie voegt het object toe aan de zogenaamde ‘display tree’, ongeveer te vergelijken met het Document Object Model in XHTML, het object wordt dus een kind van de laatste ouder in de ‘display tree’.) Wat er daarna zichtbaar gebeurd is dat het object wordt toegevoegd aan de stage. De voorbereiding zit er op, laten we een lieveheersbeestje gaan tekenen met behulp van de graphics library. J.P. Sturkenboom <[email protected]>

9


Programmeren

Als het goed is ziet je bestand Lieveheersbeestje.as er als volgt uit:

package { import flash.display.Sprite;

public class Lieveheersbeestje extends Sprite { public function Lieveheersbeestje(){ trace("met een tekst!"); } } }

Om een overzicht te krijgen van wat we allemaal precies moeten gaan doen in AS is het handig om op ruitjespapier een tekening te maken van het figuur dat we willen gaan maken. Een kijken:

Figuur 5: een tekening van een lieveheersbeestje

Dat is nog eens een lieveheersbeestje! Naast een basistekening en een opsomming van de benodigde onderdelen is ook in de tekening aangegeven waar het nulpunt van onze tekening zich gaat bevinden, dit is belangrijk omdat dat het punt is waar ons lieveheersbeestje omheen gaat draaien als we straks animaties gaan maken. Als we dit niet vanaf het eerste moment in het oog houden krijgen we straks hele vreemde resultaten. Ga na wat er gebeurd als het nulpunt ergens anders ligt. Dit is de reden dat we in onze Main class alvast een positionering (x: 300 en y:300) voor ons lieveheersbeestje hebben gemaakt. Als we weldra beginnen met tekenen moeten we ook aan de negatieve kant van het nulpunt zaken tekenen, om die te kunnen bekijken moeten we daar rekening mee houden.


10


7.

Programmeren

Neem de hieronder aangegeven aanpassingen over in het bestand Lieveheersbeestje.as en sla het bestand op.

package { import flash.display.Sprite;

public class Lieveheersbeestje extends Sprite { public function Lieveheersbeestje(){ // Hoofd, teken een cirkel graphics.beginFill(0x000000);

// kleur zwart

graphics.drawCircle(0, 0, 20); graphics.endFill(); } } }

8. Selecteer Control Æ Test Movie (of druk op CTRL + Enter) om je filmpje af te spelen. Als het goed is werkt je filmpje zonder foutmeldingen. Als alles goed is gegaan zie je een zwarte cirkel in beeld verschijnen, om dit te bereiken hebben we drie functies gebruikt, laten we eens kijken wat de AS 3 Language Reference over deze drie functies zegt: beginFill () method public function beginFill(color:uint, alpha:Number = 1.0):void Specifies a simple one‐color fill that subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) use when drawing. The fill remains in effect until you call the beginFill(), beginBitmapFill(), or beginGradientFill() method. Calling the clear() method clears the fill. Note: The fill is not rendered until the endFill() method is called. Parameters: color:uint — The color of the fill (0xRRGGBB). alpha:Number (default = 1.0) — The alpha value of the fill (0.0 to 1.0).

endFill() method public function endFill():void Applies a fill to the lines and curves that were added since the last call to the beginFill(), beginGradientFill(), or beginBitmapFill() method. Flash uses the fill that was specified in the previous call to the beginFill(), beginGradientFill(), or beginBitmapFill() method. If the current drawing position does not equal the previous position specified in a moveTo() method and a fill is defined, the path is closed with a line and then filled. J.P. Sturkenboom <[email protected]>

11


Programmeren

drawCircle() method public function drawCircle(x:Number, y:Number, radius:Number):void Draws a circle. You must set the line style, fill, or both before you call the drawCircle() method, by calling the linestyle(), lineGradientStyle(), beginFill(), beginGradientFill(), or beginBitmapFill() method. Parameters: x:Number — The x location of the center of the circle relative to the registration point of the parent display object (in pixels). y:Number — The y location of the center of the circle relative to the registration point of the parent display object (in pixels). Om het nog even kort te herhalen, je begint met de functie graphics.beginFill(), daarmee stel je de kleur in, een hexadecimale kleurcode (die je kent uit CSS) wordt in AS in plaats van door een hekje #000000 (zwart) voorafgegaan door een nul en een x ‘0x’, daarmee zeg je als het ware, hierachter komt een hexadecimale kleurcode. Als de kleur is ingesteld kunnen we gaan tekenen. We roepen hier de functie graphics.drawCircle() aan, deze tekent een cirkel op de met x en y meegegeven positie met de radius (straal) die je ook opgeeft. Vervolgens sluiten we met de functie graphics.endFill() het hele zaakje af. In de functiebeschrijving bij de functie graphics.beginFill() staat een extra notitie, namelijk dat de Fill (de gevulde tekening) niet gerendered (getekend) wordt totdat de graphics.endFill() methode wordt aangeroepen, deze is dus verplicht en mag onder geen beding vergeten worden. Deze zwarte cirkel die we net getekend hebben stelt het hoofd van ons lieveheersbeestje voor! Laten we de rest gaan tekenen. 9.

Pas jouw bestand zo aan dat het overeenkomt met de broncodeweergave op de volgende pagina. Merk op dat we bij het tekenen enkel de hiervoor toegelichte functies, met één uitbreiding gebruiken. De uitbreiding is de functie graphics.moveTo() welke hieronder staat toegelicht. Test na het invoeren je filmpje door Control Æ Test Movie aan te klikken (of druk op CTRL + Enter) en aanschouw het lieveheersbeestje. moveTo() method public function moveTo(x:Number, y:Number):void Moves the current drawing position to (x, y). If any of the parameters are missing, this method fails and the current drawing position is not changed. Parameters: x:Number — A number that indicates the horizontal position relative to the registration point of the parent display object (in pixels). y:Number — A number that indicates the vertical position relative to the registration point of the parent display object (in pixels).

Wat nog ontbreekt zijn de ogen (witte cirkels) en de voelsprieten (streepjes en zwarte cirkels). Als je je geroepen voelt om het lieveheersbeestje af te maken, en daardoor te oefenen met de graphics library, mag je deze zaken toevoegen aan het script! J.P. Sturkenboom <[email protected]>

12


Programmeren

package { import flash.display.Sprite; public class Lieveheersbeestje extends Sprite { public function Lieveheersbeestje(){ // Hoofd, teken een cirkel graphics.beginFill(0x000000);

// kleur zwart

graphics.drawCircle(0, 0, 20); graphics.endFill();

// Lijf, teken een cirkel graphics.lineStyle(1, 0x000000, 1); graphics.beginFill(0xdd0000);

// kleur donkerrood

graphics.drawCircle(-35, 0, 40); graphics.endFill();

// Lijf – lijntje schildverdeling graphics.moveTo(-75, 0); graphics.lineTo(5,0); graphics.moveTo(0, 0);

// Stippen – stijl instellen graphics.lineStyle(1, 0x000000, 0); graphics.beginFill(0x000000);

// Stippen – 3 stippen bovenkant graphics.drawCircle(-55, -14, 5); graphics.drawCircle(-35, -27, 5); graphics.drawCircle(-15, -14, 5);

// Stippen – 3 stippen onderkant graphics.drawCircle(-55, 14, 5); graphics.drawCircle(-35, 27, 5); graphics.drawCircle(-15, 14, 5); graphics.endFill(); } } }


13


Programmeren

VERANDEREN VAN EIGENSCHAPPEN Nu we een lieveheersbeestje hebben willen we daar natuurlijk dingen mee doen, animeren gaat nog iets te ver, daar komen we vanzelf op gedurende het verloop van dit blok, voorlopig volstaan we met het aanpassen van eigenschappen van ons lieveheersbeestje aangaande plaatsing op de stage. Om aanpassingen te maken werken we verder in het eerder gemaakte bestand Main.as. 1.

Als je in de tussentijd niets veranderd hebt ziet je Main.as bestand er nog steeds als volgt uit




2.

Stel eens een andere waarde in voor myBug.x of myBug.y, veranderd er iets? 3. Er zijn nog meer eigenschappen die we zo kunnen aanpassen, deze eigenschappen zijn allemaal standaard‐eigenschappen van de Sprite die we via extend uitbreiden, hier volgt een opsomming: myBug.alpha ‐ Pas de transparantie van het object aan myBug.height ‐ Pas de hoogte van een object aan myBug.width ‐ Pas de breedte van een object aan myBug.rotation ‐ Pas de rotatie van een object aan myBug.scaleX ‐ Pas de schaal op de X‐as van een object aan myBug.scaleY ‐ Pas de schaal op de Y‐as van een object aan myBug.x ‐ Pas de X‐posistie aan myBug.y ‐ Pas de Y‐positie aan 4. Probeer wat combinaties uit, ook leuk om aan te roepen is myBug.startDrag() dat is geen eigenschap maar een methode van Sprite.


14


Programmeren

GEBRUIKTE BRONNEN Laan, Gertjan. Aan de slag met C++. Academic Service. ISBN: 90 395 1084 9 Peters, Keith. Foundation Actionscript 3.0 Animation: Making Things Move! Friends of Ed. ISBN: 1590597915 Moock, C. Essential Actionscript 3.0. O'Reilly. ISBN: 0596526946 AS3 programming manual: http://livedocs.adobe.com/flash/9.0/main/flash_as3_programming.pdf

DISCLAIMER Het kan zijn dat er nog fouten in dit schrijven staan. Bij constatering van fouten en/ of onvolkomendheden graag een reactie per email naar [email protected].


15

HvA Instituut voor Interactieve Media

Recommend Documents