tekenen met action script

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:

• _root.createEmptyMovieClip( );
• moveTo( );
• lineTo( );
• lineStyle( );
• curveTo( );
• beginFill( );
• endFill( );
• clear( );

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)

_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.
voorbeeld code:

_root.createEmptyMovieClip("lijn", 1);

lineStyle( );
Met dit gegeven word de dikte, kleur en alpha bepaalt voor onze lijn.
voorbeeld code:

_root.createEmptyMovieClip("lijn", 1);
lijn.lineStyle(1, 0xFF0000, 100);

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

_root.createEmptyMovieClip("lijn", 1);
lijn.lineStyle(1, 0xff0000, 100);
lijn.moveTo(150, 150);

lineTo(x, y);
Hier moeten de x en y coordinaten in komen van het punt waar de lijn moet eindigen.
voorbeeld code:

_root.createEmptyMovieClip("lijn", 1);
lijn.lineStyle(1, 0xff0000, 100);
lijn.moveTo(150, 150);
lijn.lineTo(200, 200);

curveTo ( );
Dit is geen gemakkelijke, hiermee maak je een mooie bocht in je lijn, controlX, controlY, en anchorX en anchorY.
voorbeeld code:

_root.createEmptyMovieClip("lijn", 1);
lijn.lineStyle(1, 0xff0000, 100);
lijn.moveTo(150, 150);
lijn.curveTo(225, 75, 300, 150);

beginFill( ) ;
Met beginFill kan je de ruimte die er onstaat tussen meerdere lijnen opvullen met een kleur.
voorbeeld code:

_root.createEmptyMovieClip("lijn", 1);
lijn.lineStyle(1, 0xff0000, 100);
lijn.beginFill(0xABCDEF, 50);
lijn.moveTo(150, 150);
lijn.lineTo(300, 150);
lijn.lineTo(225, 225);
lijn.lineTo(150, 150);
lijn.endFill();

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.

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).

Fun part
okee, en dan nu het regelrechte copy paste werk, wat ook gelijk resultaat opleverd.

Een schoolbord (100% action script)

_root.createEmptyMovieClip("lijn", 1);
_root.onMouseDown = function() {
        lijn.moveTo(_xmouse, _ymouse);
        lijn.lineStyle(3, 0xFFFFFF, 100);
        this.onMouseMove = function() {
                lijn.lineTo(_xmouse, _ymouse);
                updateAfterEvent();
        };
};
_root.onMouseUp = function() {
        this.onMouseMove = null;
};

on (release) {
        _root.lijn.clear();
}

Voor een movie te maken zoals ik helemaal bovenin heb gemaakt, ben ik ook wat aan het spelen geweest met random bewegingen.
Ik heb voor die movie een rondje getekent en er een mc van gemaakt, die 3 keer op mn scene gezet en ze een instance naam gegeven.
De instance namen waren beweegding, beweegding1 en beweegding2.
Ik heb ze laten bewegen met actionscript zodat ze ECHT nooit hetzelfde doen en totaal random bewegen. (random tutorial volgt nog).
Maar tot die tijd kun je ook wel iets maken met motion tween.
Met de volgende code bepaal ik de punten om die lijnen te verbinden en te gaan tekenen.

this.onEnterFrame = function() {
        //de posities bepalen van mn bewegende mc's
        bx = beweegding._x;
        by = beweegding._y;
        bx2 = beweegding2._x;
        by2 = beweegding2._y;
        by3 = beweegding3._y;
        bx3 = beweegding3._x;
        _root.createEmptyMovieClip("lijn", 1);
        lijn.clear();
        lijn.lineStyle(1, 0x000000, 100);
        lijn.beginFill(0xABCDEF, 50);
        lijn.moveTo(bx, by);
        lijn.lineTo(bx2, by2);
        lijn.lineTo(bx3, by3);
        lijn.lineTo(bx, by);
        lijn.endFill();
};

Tot zover deze tut, evt vragen kun je stellen in het forum.
Happy flashing.

Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek dan mijn website voor een eventuele geupdate tutorial. mvg vinTage