Welkom!

Deel je kennis met anderen in deze Flashgemeenschap!
Gebruikersnaam:
Wachtwoord:
Wachtwoord opslaan?
Wachtwoord vergeten?

TUTORIALS / Flash 3D

3D Engine m.b.v. Actionscript
197 downloads, 19374 keer gelezen
(February 7, 2006)
Waardering: 0 keer gestemd 
 0 van de 5
 
inleiding stap .1. .2. .3. .4. .5. .6.  voorbeeld download

Stap 3

Tekenen

Nu is het moment aangebroken om de functie te maken waar onze kubus mee zal worden getekend. Het is zeker niet moeilijk, maar vergt wel veel schrijfwerk.
Wat we doen is het volgende: Een kubus bestaat uit acht punten en 6 vlakken. Onze persPoints Array bestaat dus ook uit 8 elementen. We geven elk punt op onze kubus een nummer dat overeenkomt met het nummer van de Array waar de coordinaten voor dat punt zijn opgeslagen (het lijkt misschien moeilijk, maar dat is het zeker niet).
bvb :

     kubus met punten aangeduidt            kubus met vlakken aangeduidt

Dus wat wij nu gaan doen in onze draw functie is elk vlak gewoon uittekenen aan de hand van deze punten. We zullen dan later wel moeten letten op de manier waarop we onze punten in onze array steken.
Maar dat zal straks wel duidelijk worden (Zet deze functie onderaan in je Shape class).

function draw(persPoints):Void {

    this.clip.clear();
    this.clip.lineStyle(this.lineThickness, this.lineColor, this.lineAlpha);

    // vlak 1


    this.clip.moveTo(persPoints[0].x, persPoints[0].y);
    this.clip.lineTo(persPoints[1].x, persPoints[1].y);
    this.clip.lineTo(persPoints[3].x, persPoints[3].y);
    this.clip.lineTo(persPoints[2].x, persPoints[2].y);
    this.clip.lineTo(persPoints[0].x, persPoints[0].y);


    // vlak 2


    this.clip.moveTo(persPoints[4].x, persPoints[4].y);
    this.clip.lineTo(persPoints[5].x, persPoints[5].y);
    this.clip.lineTo(persPoints[7].x, persPoints[7].y);
    this.clip.lineTo(persPoints[6].x, persPoints[6].y);
    this.clip.lineTo(persPoints[4].x, persPoints[4].y);

    // vlak 3

    this.clip.moveTo(persPoints[0].x, persPoints[0].y);
    this.clip.lineTo(persPoints[4].x, persPoints[4].y);
    this.clip.lineTo(persPoints[6].x, persPoints[6].y);
    this.clip.lineTo(persPoints[2].x, persPoints[2].y);
    this.clip.lineTo(persPoints[0].x, persPoints[0].y);

    // vlak 4

    this.clip.moveTo(persPoints[0].x, persPoints[0].y);
    this.clip.lineTo(persPoints[1].x, persPoints[1].y);
    this.clip.lineTo(persPoints[5].x, persPoints[5].y);
    this.clip.lineTo(persPoints[4].x, persPoints[4].y);
    this.clip.lineTo(persPoints[0].x, persPoints[0].y);

    // vlak 5

    this.clip.moveTo(persPoints[5].x, persPoints[5].y);
    this.clip.lineTo(persPoints[1].x, persPoints[1].y);
    this.clip.lineTo(persPoints[3].x, persPoints[3].y);
    this.clip.lineTo(persPoints[7].x, persPoints[7].y);
    this.clip.lineTo(persPoints[5].x, persPoints[5].y);

    // vlak 6

    this.clip.moveTo(persPoints[6].x, persPoints[6].y);
    this.clip.lineTo(persPoints[7].x, persPoints[7].y);
    this.clip.lineTo(persPoints[3].x, persPoints[3].y);
    this.clip.lineTo(persPoints[2].x, persPoints[2].y);
    this.clip.lineTo(persPoints[6].x, persPoints[6].y);
}

Voor de mensen die de moveTo en lineTo functie van flash niet kennen : Met de lineTo kan je in flash tekenen met actionscript.

Met de moveTo geef je het eerste coordinaat aan. Het begincoordinaat. Wanneer je geen begincoordinaat ingeeft , is dit automatisch (0,0).
Het volgende coordinaat is dan dat dat door de lineTo wordt gegeven.Deze tekent dan van het eerste coordinaat een lijn tot het coordinaat dat hij zelf heeft gegeven.
De volgende lineTo tekent dan vanaf het vorige coordinaat (het coordinaat van de eerste lineTo) en geeft zelf weer het tweede punt.
enzo gaat het verder tot het vierkant getekend is.Zoals u ziet eindigen we telkens weer in het coordinaat van de moveTo, dit dient om het vierkant ook daadwerkelijk af te sluiten.
Vooraleer u kan beginnen te tekenen moet u altijd de linestyle declareren. Daarin staat de lijndikte, lijnalpha, en de lijnkleur in.

Een voorbeeld om alles wat duidelijker te maken :
movieclip.moveTo(0,0); // eigenlijk overbodig want dit doet hij automatisch
movieclip.lineTo(50,0);// trekt nu een horizontale lijn van het coordinaat (0,0) tot (50,0)

movieclip.lineTo(50,50); // trekt een verticale lijn van het coord. (50, 0) tot (50,50);

movieclip.lineTo(0,50); // trekt een weer een horizontale lijn nu van (50,50) tot (0,50);
movieclip.lineTo(0,0); // om dan uiteindelijk weer in het beginpunt te eindigen.

En het vierkant is volmaakt !

Nu terug over naar onze draw func : de eerste lijn :     this.clip.clear();
De clear() function is een zeer handige functie die alle lijnen in de movieclip aanwezig delete.Dan komt er de lineStyle waar de dikte, kleur en alpha van ons lijnstuk
wordt doorgegeven.Hierna wordt vervolgens vlak 1,2,3,4,5,6 gemaakt op dezelfde manier als het voorbeeld hierboven.

>>> Ga naar stap 4
Geef hier je waardering: Matig 1 2 3 4 5 Geweldig!
  Waardering:
Error?? Floris V. (21 December 2007, 14:20)

RE: Error?? Baptist vandersmissen (21 December 2007, 14:56)

Ik heb inderdaad ook gemerkt dat als je op "ga naar stap 1" drukt, dan een foutmelding komt. Foute link blijkbaar, dat heb ik dan goed op tijd opgemerkt.. :\

Maar je kan altijd gewoon naar de eerste stap door vanboven in het menu op 1 te drukken.

Greetz


thom, link thom de hoog (09 May 2007, 09:57)

hoi,

bij mij doe de link het niet

zou iemand de tutorial willen sturen aan mij over email

thom_dehoog@hotmail.com

(html bestand alstublieft


voorbeeldje? Ate Visser (17 March 2007, 22:12)

Hoi Baptist,

Super scriptje! Ik heb 't gebruikt (en een beetje aangepast voor schaduw) en er een kaleidocycle ingezet... met nog wat ouwe flash-voorbeelden is 't best leuk geworden, vind ik... :D zie hier: http://www.prosac.nl/upload/kc4.html

Cheers,

a-t-1


download Niek van Oost (21 December 2006, 07:33)
Downloaden doet het niet! Link is niet goed!
1-5 | 6-7