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, 20099 keer gelezen
(February 7, 2006)
Waardering: 0 keer gestemd 
 0 van de 5
 
inleiding stap .1. .2. .3. .4. .5. .6.  voorbeeld download

Stap 4

Tekenen, die kubus !

Eventjes alles terug op een rijtje zetten. Zo ziet je Shape.as class er nu uit :

class Shape {
    // VAR
    var pointsArray:Array; // array waar alle punten in opgeslagen zitten
    var clip:MovieClip; //movieclip waar de kubus in zal getekend worden
    var scaleValue:Number; // afstand van het "oog"(=scherm) tot de kubus.
    var lineThickness:Number; // dikte van de lijnen bij het tekenen
    var lineColor:Number; // kleur van de lijnen
    var lineAlpha:Number; // alpha van die lijnen

    var perspectief:Number; // perspectief dat zal worden gebruikt om de kubus in 3d weer te geven
    var DEGtoRAD:Number = Math.PI/180; // getal om graden naar radialen om te zetten.

    // De CONSTRUCTOR van onze class
    function Shape(points:Array, mc:MovieClip, schaal:Number, lineThickness:Number, lineColor:Number, lineAlpha:Number) {
        this.pointsArray = points;
        this.clip = mc;
        this.scaleValue = schaal;
        this.lineThickness = lineThickness;
        this.lineColor = lineColor;
        this.lineAlpha = lineAlpha;
    }

    function set2DTo3D():Void {
        var persPoints:Array = new Array();
        for (var i:Number = 0; i < this.pointsArray.length; i++) {
            persPoints[i] = new Object();
            this.perspectief = this.scaleValue / ( this.scaleValue - this.pointsArray[i].z);
            persPoints[i].x = this.pointsArray[i].x * this.perspectief;
            persPoints[i].y = this.pointsArray[i].y * this.perspectief;
        }
        this.draw(persPoints);
    }

    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);
    }
}

.FLA FILE

Ga nu terug naar je flash bestand (je .fla file). Verander de naam van de eerste en enige layer naar "Actions". Open het actionpanel van de eerste frame van die layer.

Wat hebben we nodig?

Nu hebben we in onze Shape class al de functies die nodig zijn om een (weliswaar nog niet-draaiende) 3D kubus te tekenen.
Wat we eerst en vooral nodig hebben is de Array met al onze punten. Vergeet niet dat de volgorde waarin we de elementen in de array steken heel belangrijk is.
Anders krijgen we hele andere vormen dan een kubus. Als je niet goed meer weet welk punt nu index 0 krijgt in de array moet je nog eens naar de 2 tekeningen gaan kijken
bij stap 3 .
Daarna maken we ook een nieuwe movieclip aan waar de kubus in kan getekend worden.
Dus dit is wat er moet getypt worden in de keyframe van de layer "Actions"

// maak een nieuwe array
var punten:Array = new Array();
// Het eerste punt van onze kubus komt terecht in het eerste element van onze array (met index 0 dus), het tweede in het tweede elem...
punten[0] = {x:-50, y:-50, z:50};//het eerste punt (-50,-50) met z = 50
punten[1] = {x:50, y:-50, z:50};// het tweede punt ligt 100 pixels verder als het eerste punten
punten[2] = {x:-50, y:50, z:50};// het derde punten ligt 100 pixels lager als het eerste
punten[3] = {x:50, y:50, z:50};// ...

// deze punten hebben juist dezelfde x en y coordinaten , maar hebben natuurlijk een andere diepte.
punten[4] = {x:-50, y:-50, z:-50};
punten[5] = {x:50, y:-50, z:-50};
punten[6] = {x:-50, y:50, z:-50};
punten[7] = {x:50, y:50, z:-50};

var kubusMC:MovieClip = this.createEmptyMovieClip("kubusMC", 0);
kubusMC._x = Stage.width/2;//plaats de mc in het midden
kubusMC._y = Stage.height/2;

var kubus:Shape = new Shape(punten, kubusMC, 300, 1, 0x222222, 85);
kubus.set2DTo3D();

Test je flash nu maar eens en als alles goed verlopen is moet je nu een 3D kubus te zien krijgen.

Uitleg van het actionscript

Eerst en vooral wordt een nieuwe array gemaakt. Hierin wordt via een object de 3 coordinaten geplaatst.Zoals u ziet zijn de eerste 4 en volgende 4 x en y coordinaten
aan elkaar gelijk, maar verschilt enkel de diepte.Dus zonder het diepte coordinaat zouden ze op elkaar liggen en zou er een gewoon vierkant te zien zijn.
Hierna wordt er via de createEmptyMovieClip een nieuwe lege movieclip gemaakt met de instancename gelijk aan "kubusMC" en de diepte = 0.
Daaronder wordt de x en y van de mc gelijk gezet aan helft van de breedte van de Stage en de helft van de hoogte van de Stage.
De mc wordt dus gewoon in het midden van je flash movie gezet.

Dan komt het allerbelangrijkste. We maken een nieuwe shape aan met de naam kubus en geven alle parameters die nodig zijn door.
punten = Array, kubusMC = movieclip, 300 = schaal, 1=lijndikte, lijnkleur=0x222222, lijnalpha=85
Dan geven we de opdracht om de 2d punten om te zetten naar 3d punten (d.m.v. set2DTo3D functie) en deze punten worden dan ook getekend (door de draw functie).

>>> Ga naar stap 5
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