Rendering 3D objects in Flash

Step 3

Writing actionscript code

Create a new movie
Create a new movieclip with the "insert/New Symbol..." cmd and draw a line.
Using the Transform panel, make the line 100 pixels wide and 100 px high.
At the X,Y locations type 0. Now the upper left end of the line is aligned with the movieclip's point of origin.
Now we will use a slightly altered version of William Tagliaferro's 3d Math library
Copy the following code and paste it into a text file named "3dmath.as"
The file should be placed in the same directory with the .fla file

// // ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' // ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' // '' Name :3D_Math_Functions // ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' // '' Purpose : Support routines for 3D object manipulations // '' : // '' Includes : // '' Requirements : // '' Programmer : William Tagliaferro, ENS Inc. // '' Version : 1.0 // '' Date Modified : 04 December 2001 // '' Modified By : William Tagliaferro // '' Future Develop't : // '' // ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' // ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' // ''''''''''''Global Variables''''''''''''''''''''''''''''''''''''''''' // eval the placeholder clip moclip = eval (_root[getProperty (_parent._parent, _name)]); deg2rad = Math.PI/180.0; //Convert degrees to radians att = new Array(0, 0, 0); //Initialize the object attitude vector org = new Array(1, 1, 0); //Define the origin of the mouse eye = 400; //Location of the viewer's eye from the screen moclip.plain = 0; //Defines the plane of rotation // plain = 0 xy // plain = 1 yz // plain = 2 xz lnum = 0; //MC level counter cno = 0; //MC level counter moclip.mline._visible = 0; //Hide the offstage line //''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' //''''''''''''FUNCTIONS'''''''''''''''''''''''''''''''''''''''''''''''' //''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' // ObjPoint(x,y,z,xc,yc,MC,opt) // // opt = 0 - left hand cartesian system centered at object center of mass // x = object frame x position // y = object frame y position // z = object frame z position // opt = 1 - polar system centered at object center of mass // x = radius // y = object frame y position // z = angle measured clockwise // xc = display frame position of object // yc = display frame position of object // MC = movie clip to represent this point or "none" // opt = coordinate system to use (see above) // //function ObjPoint (x, y, z, cx, cy, MC, opt) { function ObjPoint (x, y, z, cx, cy, MC, opt) { cno++; if(opt == 1) {//x and z in polar form (r,theta) r = x; theta = z*deg2rad; x = r*Math.sin(theta); z = r*Math.cos(theta); } this.p = new Array(x,y,z) // position vector this.pp = new Array(x,y,z) // perspective position this.xloc = cx; // screen x-position this.yloc = cy; // screen y-position this.name = MC+cno; // path to movie clip for this point this.scale = 1.0; if(MC != "none" && displaypoints==true) moclip.attachMovie(MC, MC+cno, 30+cno); return; } function ObjMoveX(dist) { this.xloc += dist; } function ObjMoveY(dist) { this.yloc += dist; } function render () { obj = moclip[this.name]; obj._x = this.pp[0] + this.xloc; obj._y = this.pp[1] + this.yloc; obj._xscale = this.scale*100; obj._yscale = this.scale*100; obj._alpha = this.scale*100; return; } function xrot (t) { // rotates ccw about x axis (right) looking toward the origin ang = t*deg2rad; x = this.p[0]; y = this.p[1]*Math.cos(ang) + this.p[2]*Math.sin(ang); z = -this.p[1]*Math.sin(ang) + this.p[2]*Math.cos(ang); this.p[0] = x; this.p[1] = y; this.p[2] = z; } function yrot (t) { // rotates ccw about y axis (down) looking toward the origin ang = t*deg2rad; x = this.p[0]*Math.cos(ang) - this.p[2]*Math.sin(ang); y = this.p[1]; z = this.p[0]*Math.sin(ang) + this.p[2]*Math.cos(ang); this.p[0] = x; this.p[1] = y; this.p[2] = z; } function zrot (t) { // rotates ccw about z axis (out) looking toward the origin ang = t*deg2rad; x = this.p[0]*Math.cos(ang) + this.p[1]*Math.sin(ang); y = -this.p[0]*Math.sin(ang) + this.p[1]*Math.cos(ang); z = this.p[2]; this.p[0] = x; this.p[1] = y; this.p[2] = z; } // // // Att = Attitude // [0] - roll (CCW about X) // [1] - heading (CCW about y) // [2] - pitch (CCW about Z) // // function rotate (att) { sinr = Math.sin(att[0]*deg2rad); cosr = Math.cos(att[0]*deg2rad); sinp = Math.sin(att[1]*deg2rad); cosp = Math.cos(att[1]*deg2rad); siny = Math.sin(att[2]*deg2rad); cosy = Math.cos(att[2]*deg2rad); // r for NED r00 = cosy*cosp; r10 = cosy*sinp*sinr-siny*cosr; r20 = cosy*sinp*cosr+siny*sinr; r01 = siny*cosp; r11 = siny*sinp*sinr+cosy*cosr; r21 = siny*sinp*cosr-cosy*sinr; r02 = -sinp; r12 = cosp*sinr; r22 = cosp*cosr; x = this.p[0]*r00 + this.p[1]*r01 + this.p[2]*r02; y = this.p[0]*r10 + this.p[1]*r11 + this.p[2]*r12; z = this.p[0]*r20 + this.p[1]*r21 + this.p[2]*r22; this.p[0] = x; this.p[1] = y; this.p[2] = z; } function perspective (eye) { f = (this.p[2] + eye)/eye; this.pp[0] = this.p[0]*f; this.pp[1] = this.p[1]*f; this.scale = f; } function drawline (p1, p2, clr) { lnum++; duplicateMovieClip ("moclip.mline", "line" + lnum, lnum); obj = this["line"+lnum]; obj._x = p1.pp[0] + p1.xloc; obj._y = p1.pp[1] + p1.yloc; xscale = p2.pp[0] - p1.pp[0]; yscale = p2.pp[1] - p1.pp[1]; setProperty (obj, _xscale, xscale); setProperty (obj, _yscale, yscale); if (clr) { myColor = new Color(obj); if (clr == 1) myColor.setRGB(0x990000); if (clr == 2) myColor.setRGB(0x009900); if (clr == 3) myColor.setRGB(0x000099); if (clr == 4) myColor.setRGB(0x999900); if (clr == 5) myColor.setRGB(0x009999); } } ObjPoint.prototype = ObjPoint.prototype.constructor; ObjPoint.prototype.ObjMoveX = ObjMoveX; ObjPoint.prototype.ObjMoveY = ObjMoveY; ObjPoint.prototype.rotate = rotate; ObjPoint.prototype.perspective = perspective; ObjPoint.prototype.render = render; function getMouse() { //trace (plain); if(plain == 0) { att[0] = -(org[1]-_ymouse)/org[1] * 0.03; //roll att[1] = (org[0]-_xmouse)/org[0] * 0.03; //heading att[2] = 0.0; //pitch } else if(plain == 1) { att[0] = 0.0; //roll att[1] = (org[0]-_xmouse)/org[0] * 0.03; //heading att[2] = (org[1]-_ymouse)/org[1] * 0.03; //pitch } else if(plain == 2) { att[0] = -(org[1]-_ymouse)/org[1] * 0.03; //roll att[1] = 0.0; //heading att[2] = (org[0]-_xmouse)/org[0] * 0.03; //pitch } }
I won't get into in-depth details of how vector rotations and transformations are done, later on you can find some very inderesting links of articles fully covering this topic. You can skip these explanations if you want and move to the next step.
The general idea is that new coordinates of the old vertex can derive from the old ones with the multiplication of the [x,y,z] matrix with a transformation matrix.

Where Xan stands for the rotation angle about X axis, Yan stands for rotation angle about Yaxis, Zan for the rotation angle about Z axis Just a brief description of 3dmath.as functions:

ObjPoint(x,y,z,xc,yc,MC,opt)
Is the function used to initialize each vertice.
When opt = 0 the data is translated according to left hand cartesian system, if it is 1, it is translated according to cylindrical coordinates. Our previous code uses the cartesian system.
MC is the movie clip used to represent the vertex. Type "none" if you do not want your wireframe to display the vertices, but only the connecting lines.
x,y,z are the cartesian coordinates when using cartesian system. When using cylindrical coordinates, place in x the value of radius, that means the distance from the point of origin, y equals cartesian y (the projection of the point in Y axis) and z is the angle measured clockwise.
To get the whole picture, the axes and angle z are positioned as in the pic below:


xc, yc define the "center point" of the object. Our word macro sets this to 0,0. You can place other values to this, if you want to make an object not only rotate, but orbit around an other point. Just make sure that all the points belonging to the same object have the same xc and yc values.

ObjMoveX(dist) and ObjMoveY(dist)
Are used to translate object rendering with a different xc, yc, that means to move the object.
These functions move the object within the movieclip; the visual result is the same by moving the moveclip itself.


• render ()

This function gives the vertex movieclip its final screen coordinates. If you get large objects, you may reduce the factor in "this.scale*100" in obj._xscale and obj._yscale definitions.
xrot (t) yrot (t) zrot (t)
functions perform rotations about x,y,z axes respectively by given the angle t in degrees.


rotate (att) is used in rotating each point, according to the results of getmouse() function


perspective (eye)
is used for perspective correction for each point. The eye value is set at the start of 3dmath.as to 400, you can try different values if you want.


drawline (p1, p2, clr)
connects 2 points p1 and p2 with a line of color clr


getMouse()
Defines the rotation angle, depending on the plane of rotation and the mouse position. You can bias the speed of rotation by setting the * 0.03 factor to another value.


Create a new movie clip with the "Insert/New Symbol..." command and name it 3dclip

Now we will use the library in our movieclip
Drag the line movieclip into the stage, and give it a duration of 5 frames. Name the istance of this movieclip "mline"
Create a seperate layer and name it "actions"

Create a keyframe on frame 1 of the actions layer, and type the following code:
#include "3DMath.as"
displaypoints=false;
The displaypoints attribute defines the appearance of the object; if it is set to true then you will see only its vertices. If it is set to false you will see the object as a wireframe.

Set a keyframe on frame 2 of the actions layer and paste the text you have in MS Word.
Set a keyframe on frame 2 of the actions layer and paste the following actions:
if (Key.isDown(Key.LEFT)) { for(i=0; i<numofpoints; i++) p[i].ObjMoveX(-10); } if (Key.isDown(Key.RIGHT)) { for(i=0; i<numofpoints; i++) p[i].ObjMoveX(10); } if (Key.isDown(Key.UP)) { for(i=0; i<numofpoints; i++) p[i].ObjMoveY(-10); } if (Key.isDown(Key.DOWN)) { for(i=0; i<numofpoints; i++) p[i].ObjMoveY(10); } //Get Object Attitude from Mouse getMouse(); //Connect the dots (optional) lnum = 0; for(i=0; i<pts[0].length; i++) drawline(p[pts[0][i]],p[pts[1][i]],pts[2][i]); //Must have for each point for(i=0; i<numofpoints; i++) { p[i].rotate(att,org); //Corrects for perspective (all or none) p[i].perspective(eye); //Render Image (optional) if (displaypoints==true){ p[i].render();} }
These functions move the object with the arrow keys, rotate object points on the screen, and connect them with lines, if displaypoints is set to false.
Set a keyframe on frame 4 of the actions layer and type the following code:
gotoAndPlay (3);
This ensures repeated execution of the rendering functions which reside in the actions of frame 3.
You must make now a movieclip which will be used to represent each vertex on the screen, in case displaypoints parameter is set to true
Create a new movieclip, and assign it a name. Draw a circle which is aligned to the center of the stage and paint it with any solid color or gradient you want. Right click your movieclip on the library and choose "Linkage..." .
Select "Export this symbol" and type in the "Identifier" input box the name "sphere"

Return to the scene edit mode and drag your movieclip onto the stage
Test your movie

Pat yourself on the back; you have done a good job!

If something doesn't work or you're just too lazy, you can download the files used in this tutorial here

Interesting Links

Comments, Suggestions?
Email me drsoulis@yahoo.com