Tekenen met actionscript (drawing api)

_{door vinTage op 28-08-2006}

API tekenen.
(klein beetje AS kennis maakt het wel een stuk makkelijker om dit te gebruiken)

Vandaag wil ik jullie laten zien hoe je met enkel en alleen actionscript ook figuren kan tekenen.
Natuurlijk kan je de action script combineren met movieclips zoals je hieronder kunt zien.


In het voorbeeldje hierboven zijn alleen de tekst en de kleine bolletjes geen action script, de zwarte lijnen en de kleur ertussen word allemaal via action script gemaakt.

Okay een beetje uitleg.

In deze tutorial word er gebruikt gemaakt van de volgende stukjes action code:

* createEmptyMovieClip();
* moveTo();
* lineTo();
* lineStyle();
* curveTo();
* beginFill();
* clear();

Geen zin om te lezen/begrijpen ga direct naar de interesante dingen.

Verderop in deze tutorial post ik nog wel wat completere codes zodat eea duidelijker word, maar eerst de uitleg ervan zodat je zelf alles naar wens kan aanpassen.

Uitleg van de codes.
(Op volgorde zoals je ze hoort te gebruiken. Plaats de door mij gebruikte code's in de eerste keyframe van de scene)



«top»
_root.createEmptyMovieClip();
Met createEmptyMovieClip word er een nieuwe mc gemaakt die onze lijn voorstelt.
De mc zal als eerste aangemaakt moeten worden, zodat daarin ook echt een lijn kan worden getekent.


_root is onze "hoofd" movie, en tussen de haakjes bepalen we de naam voor onze nieuwe mc (lijn in dit geval), het getal erachter bepaalt het level.(1 is de bovenste laag).
Maar alvorens we daar echt een lijn mee kunnen tekenen hebben we nog minstens de lineStyle bij nodig.




«top»
lineStyle();
Met dit gegeven word de dikte, kleur en alpha bepaalt voor onze lijn.



Het eerste getal bepaald de dikte van de lijn (pixels), het 2e getal is de kleur ( hexadecimaal), en het derde bepaalt de alpha (100 is opaque, 0 is transparant).
De dikte moet wel gegeven worden, zonder dat getal word er niks getekend.
De kleur is default zwart, en zou je 0 kunnen laten.
En de alpha is default 100, dus die zou je ook 0 kunnen laten.
De lijnStyle moet gezet worden vooraleer er echt getekent gaat worden.
Nu moeten we het beginpunt aangeven van waar de lijn gaat beginnen, lees verder bij moveTo



«top»
moveTo(x, y);
Tussen de haakje worden de x en y coordinaten gegeven, van waaruit onze lijn moet beginnen met tekenen.



Deze code heb je nodig, ander begint flash vanuit 0 te tekenen (linker bovenhoek)
We hebben nu nog een eindpunt nodig voor onze lijn, die word bepaalt met lineTo.



«top»
lineTo(x, y);
Hier moeten de x en y coordinaten in komen van het punt waar de lijn moet eindigen.




Met dit stukje code in het AS panel geplakt van je eerste keyframe, heb je een rode diagonale lijn.
En dan gaan we nu een bocht erin maken.



«top»
curveTo ();
Dit is geen gemakkelijke, hiermee maak je een mooie bocht in je lijn, controlX, controlY, en anchorX en anchorY.



De laatste 2 getallen zijn het eindpunt van onze bocht. (die gebruiken we ipv lineTo)
Het 1e en 2e getal bepalen de breedte en hoogte maat waar onze bocht naar toe moet krullen.
Mischien een figuurtje tekenen nu ? En zelfs opvullen met een kleur ?



«top»
beginFill() ;
Met beginFill kan je de ruimte die er onstaat tussen meerdere lijnen opvullen met een kleur.



Zoals je hierboven ziet heb ik natuurlijk eerst een lijn erbij moeten tekenen, anders valt er niets op te vullen.
De tweede lijn gebruikt als startpunt, het eindpunt van de vorige lijn, zo kan je dus een reeks lijnen aan elkaar knopen .
Plaats je beginFill vlak onder je lineStyle anders zal deze niet werken.
beginFill is opgebouwd uit (hexadecimale kleur, alpha);
endFill( ); lijkt me duidelijk.



«top»
clear();
Dit doet eigenlijk niets meer dan dat je al verwacht, het wist gewoon de lijn(en) die je hebt getekend, en zet onze pen weer op de standaart positie.

Als je mn uitleg een beetje begrijpt kun je (met enige kennis van action script), zelf wel variaties bedenken op die codes, of ze toepassen op bewegende movie clip's (zoals helemaal bovenaan).




«top»
Fun part
Om dit schoolbord na te maken heb je alleen buttons nodig met de instancenamen geel, rood, blauw, wit, zwart en een knop met de naam wis.
Maak de achtergrondkleur van je swf groen.


Copieër onderstaande AS en plak die in een keyFrame, en test je movie (ctrl+enter)



Tot zover deze tutorial, mocht een of ander niet duidelijk zijn, dan kan je hier de door mij gebruikte *.FLA's downloaden.

«top»