Welkom!

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

TUTORIALS / Flash 3D

3D Engine II
366 downloads, 31931 keer gelezen
(March 18, 2006)
Waardering: 1 keer gestemd 
 5 van de 5
 
inleiding     stap .1. .2. .3. .4. .5. .6.      voorbeeld download

Stap 6

Afwerking

Ga nu naar je flash bestand (.fla file). Nu moeten we niet alleen de punten van onze kubus doorgeven , maar ook de eigenschappen van alle vlakken.
Voeg dit actionscript dan toe aan je eerste layer.


var kubusMC = _root.createEmptyMovieClip("kubusMC", 0);
kubusMC._x = Stage.width/2;
kubusMC._y = Stage.height/2;
//
var pointsArray:Array = new Array(8);
//
pointsArray[0] = {x:-50, y:-50, z:-50};
pointsArray[1] = {x:50, y:-50, z:-50};
pointsArray[2] = {x:-50, y:50, z:-50};
pointsArray[3] = {x:50, y:50, z:-50};
//
pointsArray[4] = {x:-50, y:-50, z:50};
pointsArray[5] = {x:50, y:-50, z:50};
pointsArray[6] = {x:-50, y:50, z:50};
pointsArray[7] = {x:50, y:50, z:50};
//
var kubus:Shape = new Shape(kubusMC, 300, pointsArray);
//
kubus.setNewSurface(new Array(0,1,3,2), 1, 0x000000, 5, 0xCCCCCC, 100);
kubus.setNewSurface(new Array(4,5,7,6), 1, 0x000000, 5, 0x999999, 100);
kubus.setNewSurface(new Array(0,4,6,2), 1, 0x000000, 5, 0x666666, 100);
kubus.setNewSurface(new Array(1,5,7,3), 1, 0x000000, 5, 0x333333, 100);
kubus.setNewSurface(new Array(0,1,5,4), 1, 0x000000, 5, 0x222222, 100);
kubus.setNewSurface(new Array(2,3,7,6), 1, 0x000000, 5, 0x111111, 100);
//
this.onEnterFrame = function() {
     kubus.rotateX(myNSx.value);
     kubus.rotateY(myNSy.value);
     kubus.rotateZ(myNSz.value);
     kubus.set2Dto3D();
}

Actionscript

Eerst wordt er een movie clip gecreëerd die het geheel zal bevatten. Deze movieclip wordt ook in het midden
geplaatst. Vervolgens wordt er een nieuwe Array gemaakt en worden daar alle nodige punten ingezet. 8 in het totaal. (kubus heeft 8 punten).
Daarna zie wordt weer een nieuwe instantie van onze Shape class gemaakt met de naam "kubus". Daaronder zie je zesmaal
kubus.setNewSurface(...) Hier wordt zes keer (een kubus heeft 6 vlakken) een nieuw vlak gemaakt en wordt telkens de indexen van de passende
punten doorgespeeld en ook de lijndikte, ...

vb. Bij de eerste setNewSurface is er de array(0,1,3,2). Dit wilt eigenlijk zeggen dat het vlak de eerste 4 punten van de pointsArray bevat.
En ook staan deze punten in de juiste volgorde. Dit is nodig wanneer het vierkant wordt getekent.


Tenslotte wordt weer elke keer opnieuw de punten geroteerd rond een bepaalde waarde en dan worden de punten opgezet van 2D naar 3D.

Zoals je ziet staat er achter kubus.rotateX(myNSx.value) en geen getal. Dit is gewoon zoals vorige keer de instancename van de
numericStepper die we nu nog moeten toevoegen.

Finishing touch

Voeg nu 3 NumericStepper components toe en geef de eerste de instancename : myNSx. De tweede : myNSy en de derde : myNSz


Voila normaal gezien heb je nu een kubus die ronddraait. Maar laten we nu eens een andere vorm uit proberen. Het enigste verschil is de pointsArray en de setNewSurface(). Wil je zelf een iets complexer vormpje maken teken het dan eerst op papier en zet er alle waardes van de x en y voor elk punt bij.

>>> Klik hier voor een voorbeeld.


>> Druk hier voor je eigen ster te maken.

>> Druk hier voor je eigen piramide te maken.

>> Druk hier voor je eigen zeshoek te maken.

Nog één klein ding dat vaak terugkomt is dat de kubus of om het even welke vorm zicht richt naar de bewegingen van de muis.

>>> Klik hier voor deze kleine aanpassing

Dank u voor het volgen van mijn tutorial
Geef hier je waardering: Matig 1 2 3 4 5 Geweldig!
  Waardering:
meerdere objecten eric lugtigheid (31 August 2010, 13:28)
Hallo, kun je ook gebruiken voor meerdere objecten? Met hartelijke groet, Eric Lugtigheid Studio Lugtigheid
RE: meerdere objecten Baptist vandersmissen (03 September 2010, 11:19)
Volgens mij is dat geen enkel probleem. Gewoon meerdere objecten aanmaken van de klasse shape en deze objecten de juist gegevens meegeven zoals weergegeven in de laatste stap. (Het is wel al heel lang geleden dat ik dit nog geschreven/bekeken heb. Dus ik kan er naast zitten. Groetjes, Baptist
3D engine (drawing API) Floris V. (06 March 2008, 15:50)

Hoi,

Er zijn er meer voor Flash MX die op deze manier werken. Ik heb me er een beetje in gespecialiseerd. Helaas werken de beste (met textures, etc.) niet in Flash MX.

Sandy 3d, Away 3d, Papervision 3d, allemaal voor Flash CS3.

Deze werkt gewoon met Drawing API en is zo vaak op Google te vinden (of varianten ervan). Maar wel leuk dat je je eigen versie hebt gemaakt...

Waar je vooral eens op moet zoeken op google is mx3d of 3d Flash Studio of 9elements 3d als je een Flash MX versie hebt of anders met CS3 zou ik vooral eens Sandy 3d, Papervision 3d etc proberen dat is echt cool!

Maar goed ik weet hier meer van ik heb urenlang op internet gesurfd en gekeken naar voorbeelden, etc. voor 3d in Flash MX en andere versies, dus als je iets wil weten mail me dan. En mijn conclusie is trouwens: 3d kan wel in Flash, maar je kunt er beter andere programma's voor gebruiken (zoals Adobe Director).

Groet,

Floris


hoe maak je ... Jaimy voorhaam (20 July 2007, 15:10)

haaj

wie weet hoe je een spel maakt zoals habbo hotel ?

maail me trug !!


shape.as Ate Visser (18 March 2007, 02:34)

En de Shape.as (waar de schaduw in staat) staat hier, als Shape.txt:

http://www.prosac.nl/upload/Shape.txt

Ate


1-5 | 6-9