00:00
00:00

AS:3Dimensions-Basic

6,570 Views | 27 Replies
New Topic Respond to this Topic

AS:3Dimensions-Basic 2005-08-11 05:16:38


AS Mains Power Supply

-_--_--_--_--_--_--_--_--_--_--_--_--_--_-
-_--_--_--_--_--_--_--_-
-¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯-
-¯--¯--¯--¯--¯--¯--¯--¯-

AS:3Dimensions - Basic

-----------

The idea of using 3D in flash is that you simulate a third axis:
I am going to discuss just the basics for 3D in flash in this thread:

(the example im going to discuss)

In the example you can see a random arrangement of balls linked to the centre which spins around the X and Y axis with the mouse;

-----------

Creating the 3rd axis:
the 3rd axis is called the z-axis: since flash does not support 3d, you have to simulate it by using projection which can be done by simply scalling the objects using perspective

with perspective, the further something is away from the camera (for this basic 3d thread, ill just say the screen), the smaller the object gets, but also, the closer it seems to appear to the origin (1 point perspective with the vanishing point on the origin) as you can see on this here:

click me or perish ^^

//

to find out where the object (coordinate) appears on the screen you can use this formula

scalar = 500/(n+z); 500 being a constant which you can change (changes the overall look of the projection)

n is an important number which keeps the projection looking real, ever tried dividing 500 by 0? the n value is to keep the division by a number more than 0

then:

screenX = coordX*scalar;
screenY = coordY*scalar;

screenX and Y is where you would place the object in flashes coordinate system (you could then add a value to each to make it be centred in the middle of the screen instead of the top-left)

//

for example, in my example: the coordinate of each ball is random value for each axis from -100 to 100:
to keep the division by above 0, i would set n to a number more than 100 (i used 200) it doesnt really matter what number you use aslong as it keeps the z values more than 0, the higher the value of n, the smaller the resultant coordinate is:

for each 3d coordinate i would then do this: (supposing each 3d coordinate is stored in an object with variables x,y and z)

var scalar:Number = 500/(200+coord.z);
var screenX:Number = 275+coord.x*scalar;
var screenY:Number = 275+coord.y*scalar;

(im using the values 275 because the stage in my example is 550*550)

for each ball i then set its _x and _y to screenX and screenY

ball._x = screenX;
ball._y = screenY;

//

so what about scaling the balls and the transparency effect for further away balls?

you can mess around getting a good effect just by using the coord.z or the scalar number for example in my example:

ball._xscale = ball._yscale = ball._alpha = scalar*30;

//

the last thing for the rendering is this: the z-sorting of the objects
this is very simple and very important: you need to order the balls in flashes depths so that the balls in front are at the front and balls at the back are at the back behind the others:

you can do this using flashes swapDepths() function

for example in my example:

ball.swapDepths(-coord.z*100);

(the reason it is -coord.z is because the closer balls have a smaller z-value whereas the further away balls have a larger z-value so you need to swap it around so that the closer balls appear ontop)

-_--_--_--_--_--_--_--_--_--_--_--_--_--_-
-_--_--_--_--_--_--_--_-
-¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯-
-¯--¯--¯--¯--¯--¯--¯--¯-

the last thing is 3d rotation:

3d rotation uses matrices, but dont worry if you dont know what these are, you dont actually have to use matrice math for the rotations:

any rotation can be described by a matrix and this is where they come in, like i said they are not actually neccesary to use explicitly

a rotation about the x-axis is: (A being the angle)
x2 = x
y2 = y*cosA - z*sinA
z2 = y*sinA + z*cosA

a rotaion about the y-axis is:
x2 = x*cosA + z*sinA;
y2 = y;
z2 = -x*sinA + z*cosA;

a rotation about the z-axis is:
x2 = x*cosA - y*sinA;
y2 = x*sinA + y*cosA;
z2 = z;

note that rotations are done around the origin:

-_--_--_--_--_--_--_--_--_--_--_--_--_--_-
-_--_--_--_--_--_--_--_-
-¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯-
-¯--¯--¯--¯--¯--¯--¯--¯-

putting it all together you now have the basis to create my sample: and for anyone wanting it:
here is the source code:

-_--_--_--_--_--_--_--_--_--_--_--_--_--_-
-_--_--_--_--_--_--_--_-
-¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯--¯-
-¯--¯--¯--¯--¯--¯--¯--¯-

createEmptyMovieClip("balls", 0);
balls._x = balls._y = 275;
balls.attachMovie("cball", "centreball", 1);
balls.centreball.coord = {x:0, y:0, z:0};
var i:Number;
for (i = 0; i < 20; i++)
{
var m:MovieClip = balls.attachMovie("ball", "ball" + i, balls.getNextHighestDepth());
m.coord = {x:random(181) - 90, y:random(181) - 90, z:random(181) - 90};
}
delete m;
var dy:Number = 0, dx:Number = 0;
var pi:Number = Math.PI/180;
function render():Void
{
balls.clear();
balls.lineStyle(1, 0x0000000, 50);
var it:String;
for (it in balls)
{
var coord:Object = balls[it].coord;
//rotate
var sin:Number = Math.sin(dy * pi);
var cos:Number = Math.cos(dy * pi);
//
var tmp:Number = (sin * coord.y) + (cos * coord.z);
coord.y = (cos * coord.y) - (sin * coord.z);
coord.z = tmp;
//
sin = Math.sin(dx * pi);
cos = Math.cos(dx * pi);
//
tmp = (sin * coord.x) + (cos * coord.z);
coord.x = (cos * coord.x) - (sin * coord.z);
coord.z = tmp;
//
delete tmp;
delete sin;
delete cos;
//
//render
var pers:Number = 500 / (coord.z + 200);
var cx:Number = coord.x * pers;
var cy:Number = coord.y * pers;
balls[it]._x = cx;
balls[it]._y = cy;
balls[it]._xscale = balls[it]._yscale = balls[it]._alpha = pers * 30;
if (it != "centreball")
{
balls.lineStyle(1, 0x0000000, pers * 20);
balls.moveTo(cx, cy);
balls.lineTo(0, 0);
}
balls[it].swapDepths(-coord.z * 100);
balls[it].coord = coord;
}
}
render();
//
var mx:Number = _xmouse, my:Number = _ymouse;
this.onMouseMove = function()
{
dx = _xmouse - mx;
dy = _ymouse - my;
mx = _xmouse;
my = _ymouse;
render();
};

If anyone has more questions please ask


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature

Response to AS:3Dimensions-Basic 2005-08-11 05:27:49


Great tutorial!

Response to AS:3Dimensions-Basic 2005-08-11 05:32:23


My friend made a tut exactly like this....

Response to AS:3Dimensions-Basic 2005-08-11 06:01:19


At 8/11/05 05:32 AM, maxponte wrote: My friend made a tut exactly like this....

you implying i didnt make it? :/


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature

Response to AS:3Dimensions-Basic 2005-08-11 08:20:30


Wow, for a 14 year old guy you are pretty sexy at AS! (no gay come-on intended)

A decent tutorial, could have been a little clearer but I think I understood the fundamentals.

Response to AS:3Dimensions-Basic 2005-08-11 08:21:48


im gunna start on the intermediate one now (to deal with fills and basic lighting)

then ill do a expert one for dealing with cameras etc


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature

Response to AS:3Dimensions-Basic 2005-08-11 09:12:03


At 8/11/05 08:21 AM, dELta_Luca wrote: im gunna start on the intermediate one now (to deal with fills and basic lighting)

then ill do a expert one for dealing with cameras etc

Awesome tutorial

Just like your algorithm one I mayb need to read this one about 4 or 5 times to get it but when I do I will continue to the intermiediate
heh


- Matt, Rustyarcade.com

Response to AS:3Dimensions-Basic 2005-08-11 09:42:24


At 8/11/05 08:21 AM, dELta_Luca wrote: im gunna start on the intermediate one now (to deal with fills and basic lighting)

then ill do a expert one for dealing with cameras etc

Cool, nice tutorial.

Just one thing, with the next tutorial you should use bold, underlining and italics to headline different sections, quote, or whatever.. just to make it a little clearer.


Sup, bitches :)

BBS Signature

Response to AS:3Dimensions-Basic 2005-08-11 09:44:20


well the next one is just about done (i just need to make the sample movie) and its probably not going to be too easy to understand compared to this one (alot more complicated) but meh, i dont think ill bother with the advanced one (too much work and far too advanced)


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature

Response to AS:3Dimensions-Basic 2005-08-11 10:13:42


my method is faster :P but not by alot

nice tutorial :)

Response to AS:3Dimensions-Basic 2005-09-15 22:13:47


wow... blown away, somwere in there my mind fizzled out

Response to AS:3Dimensions-Basic 2005-09-15 23:52:52


im 14 too, but you just made me feel way stupid because im not quite that smart with AS yet ):

meanie


snyggys

Response to AS:3Dimensions-Basic 2006-02-11 01:26:19


but what are you soposed to DO ???????????


///////////////////////////////////

///////////////////////////////////

\\\\\\\\\\\[magic]\\\\\\\\\\\

BBS Signature

Response to AS:3Dimensions-Basic 2006-02-11 04:27:08


At 2/11/06 01:26 AM, Droneavp23 wrote: but what are you soposed to DO ???????????

Dance with lamas.

Response to AS:3Dimensions-Basic 2006-02-11 04:30:59


At 2/11/06 01:26 AM, Droneavp23 wrote: but what are you soposed to DO ???????????

This is where the magic happens:
screenX = coordX*scalar;
screenY = coordY*scalar;

This is more of a theory thread than a "do this and that and you'll get this" thread.


BBS Signature

Response to AS:3Dimensions-Basic 2006-02-11 07:38:28


YOU KNOW TOO MUCH!


BBS Signature

Response to AS:3Dimensions-Basic 2006-06-17 11:22:34


I get the error message:
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 14: '{' expected
function render():Void

Where does the { actually go?


...

Response to AS:3Dimensions-Basic 2006-06-17 11:26:17


At 6/17/06 11:22 AM, Ng_begginer wrote: Where does the { actually go?

right after Void


BBS Signature

Response to AS:3Dimensions-Basic 2006-06-18 05:02:51


At 6/17/06 11:26 AM, authorblues wrote: right after Void

Doesnt work =[


...

Response to AS:3Dimensions-Basic 2006-10-21 03:23:46


it doesn't work

Response to AS:3Dimensions-Basic 2006-10-21 03:44:23


At 10/21/06 03:23 AM, DarkNephilim wrote: it doesn't work

yes, im well aware that your 13 year old mind cannot comprehend that fact that going up to a girl and saying will you fuck a lama will not work.

please elaborate on WHAT exactly does not work


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature

Response to AS:3Dimensions-Basic 2006-10-21 03:47:32


Hey delta, how come you're so good at maths? You're a year younger than me, so technically i should be better than you. Do you get home schooled or something? Or have you just taight yourself some of the more advanced maths?

I bet you don't know calculus :P

Do you?

Response to AS:3Dimensions-Basic 2006-10-21 04:04:38


At 10/21/06 03:47 AM, Mogly wrote: Hey delta, how come you're so good at maths? You're a year younger than me, so technically i should be better than you. Do you get home schooled or something? Or have you just taight yourself some of the more advanced maths?

I bet you don't know calculus :P

Do you?

well all my knowledge on vectors, matrices, and just 3d applications have all came from self learning and internet.

im also doing my a levels 2 years early, so yes i do know calculus, for example

int ( e^x.cosx ) dx.

let u = cosx, du/dx = -sinx
let dv/dx =e^x, v = e^x.

int( e^x.cosx ) dx = e^x.cosx + int ( e^x.sinx ) dx.

let v = sinx, du/dx = cosx
let dv/dx = e^x. v = e^x

int( e^x.sinx ) dx = e^x.sinx - int( e^x.cosx ) dx.

let i = int (e^x.cosx ) dx
then 2i = e^x.cosx + e^x.sinx so
int(e^x.cosx ) dx = 0.5(cosx + sinx)e^x + k


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature

Response to AS:3Dimensions-Basic 2007-07-20 19:01:09


i love how big my ass is, perfect for delta lucas cock to fit down bitchy boy!


If a man that always tells the truth comes up to you and says that another man always tells lies, and the man who always lies come up to you and says "I'm lying", then is he?

BBS Signature

Response to AS:3Dimensions-Basic 2007-08-27 15:25:38


At 2/11/06 01:26 AM, OXXOI77777 wrote: but what are you soposed to DO ???????????

i'm with ya man - don't understand a word of it

Response to AS:3Dimensions-Basic 2008-01-11 11:27:52


the full script doesn't seem to work. Is it just because something in that doesn't work in flash 8?


f

BBS Signature

Response to AS:3Dimensions-Basic 2008-01-11 11:49:19


Did you link 'ball'?


BBS Signature

Response to AS:3Dimensions-Basic 2008-05-16 16:22:52


This post is retarded. There is no tutorial in here...