Flash - 3D Test

[Tetra]

I've been looking at some ActionScript programming recently, having wanting to make a simple 3D app viewable on the web.

Initially it confused the hell out of me, but eventually I got to understand how it works, and itas actually really cool

What makes it cool is its ability to draw things in a really nice way and it takes care of a lot of things. These include app timing, antialiazing, ability to draw complex polygons, and then being able to color them in in various ways and draw outlines and alpha blend everything, even blen them in different ways. Its all object orientated too.

But I must say it quite a strange the way everything is connected / related, and how you create Object() and its variables. Once you get round that the potential for this language hits you, especially when u get your first app working

Heres a simple spinning cube. Just press and hold the left mouse button to rotate. I've included the source code for those who are interested, ans if you have any questions about it or wanted to try stuff out but some things confuse you ask here i'm sure I'll be able to help. I'm no expert, but i've tackled the hardest part of learning the relationships of variables and layers. The swf file you should be able to double click and if you got flash 8 installed it will run. The swf file is only 1.6kb

[Jim]

It works!  Nice test.

I've attached an html file which if you drop it in the '3D Test' folder will allow you to run this from your browser.  Else I have no idea how to run a .swf file.

Jim

[p01]

Jim: normally you can drop an SWF in your browser. At least it works in Opera.

[Jim]

You're right, that works!  Thanks.  Only 3 security alerts on Vista too For some reason using 'open with' and picking IE7 doesn't work though, which is the only thing I've tried before.

Jim

[benny!]

@Tetra:
Awesome. Works smooth here. Keep us updated with your actionscript snippets. Always
wanted to learn some more stuff about FLASH/AS but never had the time.
BTW ... is there a good free ActionScript IDE or do you use the standard editor of FLASH.

Isnt FLASH very expensive or are there any cheaper licenses to buy ?

I heard of some opensource versions of FLASH / AS because the .swf format is open and
doesnt need to be licensed ? Any information about that ?


@Jim:
Thanks for adding html file. I had the problem like you, too.


@p01:
Didn't know about the drag-ability, too. Thanks for pointing it out.

[Shockwave]

I like this Very cute cube!!

[Tetra]

Thanks for the html file Jim, I hadent considered properly running it on other machines

Also thanks p01 for pointing out how to run it by the drag and drop method.

Yes Benny, unfortunately Flash licence is very expensive, three figures expensive

I have a web developer friend who recently got a copy and i've been helping him out with the ActionScript side, although I must admit the 3D stuff is more for me than him hehe  ( I wouldnt like to miss an opertunity to explore a new/different language )
I would never have looked into it otherwise, as my pockets are 3 figures short of a licence
So I figured that I mite as well share what i've learnt.

I've not really looked into the licencing but a quick search has brough up:-
http://www.adobe.com/licensing/developer/fileformat/license/

and as far as open source stuff :-
http://osflash.org/open_source_flash_projects
Not sure of the content here but it mite have some interesting stuff.

I beleive microsoft has/will have their own competition to flash, that will integrate with VS, but again i've not really looked too deep into any of this.

It mite be quite interesting developing some simple vector based app, I would like to know how speeds sompare to flash, it does amaze me how fast they manage to draw several layers of alphas and blending, along with smoth antialiazed edges and solid fill of complex polygons.

[benny!]

...
I beleive microsoft has/will have their own competition to flash, that will integrate with VS,
but again i've not really looked too deep into any of this.
...

Yup. Microsoft indeed competes with Flash now. It is called Silverlight. Have a look here e.g.:

http://www.microsoft.com/silverlight/default_ns.aspx

[Rbz]

Very nice indeed, works fine here!

[Jim]

There's also a royalty free w3c library called SVG which is competing http://www.w3.org/Graphics/SVG/

Jim

[benny!]

There's also a royalty free w3c library called SVG which is competing http://www.w3.org/Graphics/SVG/

Right. From what I have seen/heard about SVG it is really a pity that it is not implemented as a
standard in todays webbrowsers. Should be more supported IMHO.

[p01]

Right. From what I have seen/heard about SVG it is really a pity that it is not implemented as a
standard in todays webbrowsers. Should be more supported IMHO.

FYI SVG is natively supported by Opera, Firefox and Safari 3. Opera offering the most complete implementation ( being part of the core, it also works on Wii. I used SVG for the help pages in the beta version of the browser ).

The only browser not supporting the W3C standard SVG is IE. No surprise here.


My only grief about SVG is that it's a heavy beast to implement for browser vendors, and a bit slow.

[benny!]

...
The only browser not supporting the W3C standard SVG is IE. No surprise here.

Yup. That is really annoying since IE is still used by the majority of users AFAIK.

My only grief about SVG is that it's a heavy beast to implement for browser vendors, and a bit slow.

Havent done any tests for myself. Only heard that SVG is also implemented on some mobile
devices on which it really makes sense to me (various different screen sizes...)

[Shockwave]

Maybe interesting statistics, approximately 40% of our visitors to this site now use Firefox (IE is still the main client though).

[taj]

Does action script have 3d built in (matrices, vectors, 3d objects?) or do you have to write code and map it to a 2d language?

Chris

[Tetra]

lots of interesting info there

chris, there is no built in 3d support. You have to do all the maths, flash can just draw the polygons in various ways.

Here's the action script code I did to make that cube. The included fla file you can only open with the macromedia flash.

Code: [Select]

this.createEmptyMovieClip( "Canvas",1 );

Canvas._x = 320;
Canvas._y = 240;

createVertex = function( x,y,z ){
var newVertex = new Object();
newVertex.x = x;
newVertex.y = y;
newVertex.z = z;
return newVertex;
};

createPolygon = function( array:Array, color:Color, alpha:Number ){
var newPolygon = new Object();
newPolygon.Verticies = array;
newPolygon.color = color;
newPolygon.alpha = alpha;
return newPolygon;
};

createMatrix = function( m00,m01,m02, m10,m11,m12, m20,m21,m22 ){
var newMatrix = new Object();
newMatrix.row1 = createVertex( m00,m01,m02 );
newMatrix.row2 = createVertex( m10,m11,m12 );
newMatrix.row3 = createVertex( m20,m21,m22 );
return newMatrix;
};

updateMatrix = function(){

var SinX = Math.sin( this.rotation.x );
var SinY = Math.sin( this.rotation.y );
var SinZ = Math.sin( this.rotation.z );

var CosX = Math.cos( this.rotation.x );
var CosY = Math.cos( this.rotation.y );
var CosZ = Math.cos( this.rotation.z );

this.rMatrix.row1.x = CosY *  CosZ;
this.rMatrix.row1.y = CosY * -SinZ;
this.rMatrix.row1.z = SinY;

this.rMatrix.row2.x = -SinX * -SinY *  CosZ + CosX * SinZ;
this.rMatrix.row2.y = -SinX * -SinY * -SinZ + CosX * CosZ;
this.rMatrix.row2.z = -SinX *  CosY;

this.rMatrix.row3.x = CosX * -SinY *  CosZ + SinX * SinZ;
this.rMatrix.row3.y = CosX * -SinY * -SinZ + SinX * CosZ;
this.rMatrix.row3.z = CosX *  CosY;

};

rotateVerticies = function(){
var scale = 0.0;
for ( i=0; i<this.Verticies.length; i++ )
{
this.rVerticies[i].x = this.rMatrix.row1.x * this.Verticies[i].x + this.rMatrix.row1.y * this.Verticies[i].y + this.rMatrix.row1.z * this.Verticies[i].z;
this.rVerticies[i].y = this.rMatrix.row2.x * this.Verticies[i].x + this.rMatrix.row2.y * this.Verticies[i].y + this.rMatrix.row2.z * this.Verticies[i].z;
this.rVerticies[i].z = this.rMatrix.row3.x * this.Verticies[i].x + this.rMatrix.row3.y * this.Verticies[i].y + this.rMatrix.row3.z * this.Verticies[i].z;

if ( !this.gimbled ){
this.Verticies[i].x = this.rVerticies[i].x;
this.Verticies[i].y = this.rVerticies[i].y;
this.Verticies[i].z = this.rVerticies[i].z;
}
scale = 400.0 / ( 400.0 + this.rVerticies[i].z );
this.rVerticies[i].x *= scale;
this.rVerticies[i].y *= scale;
this.rVerticies[i].z *= -scale;

}
}

rotateTo = function( x,y,z ){
this.rotation.x = x/180.0*Math.PI;
this.rotation.y = y/180.0*Math.PI;
this.rotation.z = z/180.0*Math.PI;
this.updateVerticies = true;
}

rotateBy = function( x,y,z ){

if ( this.gimbled ){
this.rotation.x += x/180.0*Math.PI;
this.rotation.y += y/180.0*Math.PI;
this.rotation.z += z/180.0*Math.PI;
}else{
this.rotation.x = x/180.0*Math.PI;
this.rotation.y = y/180.0*Math.PI;
this.rotation.z = z/180.0*Math.PI;
}
this.updateVerticies = true;
}

cull = function( v0,v1,v2 ){

if (((v0.y - v1.y)*(v2.x - v1.x)) - ((v0.x - v1.x)*(v2.y - v1.y)) <= 0 ){
return true;
}else{
return false;
}
}

drawTrianglesWire = function( outlineSize:Number ){
this.clear();

if ( this.updateVerticies == true ){
this.updateMatrix();
this.rotateVerticies();
this.updateVerticies = false;
}

for ( i=0; i<this.Polygons.length; i++ )
{
this.lineStyle( outlineSize, this.Polygons[i].color, 50 );
this.moveTo( this.rVerticies[this.Polygons[i].Verticies[0]].x,
this.rVerticies[this.Polygons[i].Verticies[0]].y );

for ( j=1; j<this.Polygons[i].Verticies.length; j++ ){
this.lineTo( this.rVerticies[this.Polygons[i].Verticies[j]].x,
this.rVerticies[this.Polygons[i].Verticies[j]].y );
}

this.lineTo( this.rVerticies[this.Polygons[i].Verticies[0]].x,
this.rVerticies[this.Polygons[i].Verticies[0]].y );
}
}

drawTriangles = function( outline:Boolean, outlineSize:Number ){
this.clear();

if ( this.updateVerticies == true ){
this.updateMatrix();
this.rotateVerticies();
this.updateVerticies = false;
}

if ( outline == true ){
this.lineStyle( outlineSize, 0x000000, 100 );
}

for ( i=0; i<this.Polygons.length; i++ )
{
if ( cull(this.rVerticies[this.Polygons[i].Verticies[0]],
  this.rVerticies[this.Polygons[i].Verticies[1]],
  this.rVerticies[this.Polygons[i].Verticies[2]]) )
{
this.moveTo( this.rVerticies[this.Polygons[i].Verticies[0]].x,
this.rVerticies[this.Polygons[i].Verticies[0]].y );

this.beginFill( this.Polygons[i].color, this.Polygons[i].alpha );

for ( j=1; j<this.Polygons[i].Verticies.length; j++ ){
this.lineTo( this.rVerticies[this.Polygons[i].Verticies[j]].x,
this.rVerticies[this.Polygons[i].Verticies[j]].y );
}
this.endFill();
}
}
};

createMesh = function( instanceName:String, layer:Number, Verticies:Array, Polygons:Array ){

var newMesh = Canvas.createEmptyMovieClip( instanceName, layer );

newMesh.Verticies  = Verticies;
newMesh.rVerticies = new Array();
for ( i=0; i<Verticies.length; i++ ){
newMesh.rVerticies[i] = createVertex( 0,0,0 )
};
newMesh.Polygons          = Polygons;
newMesh.rMatrix           = createMatrix( 0,0,0, 0,0,0, 0,0,0 );
newMesh.rotation          = createVertex( 0,0,0 );
newMesh.rotateTo          = rotateTo;
newMesh.rotateBy          = rotateBy;
newMesh.updateMatrix      = updateMatrix;
newMesh.drawTriangles     = drawTriangles;
newMesh.drawTrianglesWire = drawTrianglesWire;
newMesh.rotateVerticies   = rotateVerticies;
newMesh.updateVerticies   = true;
newMesh.gimbled   = true;
return newMesh;
};

//## Objects ##################################################

var Cube = createMesh( "cube", 3,
[ createVertex(-100,-100,-100),
  createVertex( 100,-100,-100),
  createVertex( 100,-100, 100),
  createVertex(-100,-100, 100),
  createVertex(-100, 100,-100),
  createVertex( 100, 100,-100),
  createVertex( 100, 100, 100),
  createVertex(-100, 100, 100)],

[ createPolygon([ 0,1,2,3 ],0xFF0000,100),
  createPolygon([ 1,5,6,2 ],0x00FF00,100),
  createPolygon([ 5,4,7,6 ],0x0000FF,100),
  createPolygon([ 3,7,4,0 ],0xFF00FF,100),
  createPolygon([ 3,2,6,7 ],0xFFFF00,100),
  createPolygon([ 1,0,4,5 ],0x00FFFF,100)]);

// If true then the base Verticies stay the same
// if false then the base Verticies get updated by the rotated verticies
Cube.gimbled = false;

//## Animation / Draw / Input #####################################

var allowRotate:Boolean = false;

Canvas.onMouseDown = function () {
allowRotate = true;
}
Canvas.onMouseUp = function () {
allowRotate = false;
}

drawCanvas = function(){
if (allowRotate){
Cube.rotateBy( this._ymouse/50, -this._xmouse/50, 0 );
}
Cube.drawTriangles( true, 6 );
//Cube.drawTrianglesWire( 4 );
}

Canvas.onEnterFrame = drawCanvas;