»»» Flash 3-D – Taking Macromedia’s Flash to the third dimension! ( SOURCE CODE )

Adding the Script -- Now the hard bit.
The vast majority of the script needed to create the 3-D cube will be placed in frame 1 and 2 of the script layer. It is a good practice to create a layer called “Scripts”. Any frame in any layer can have scripts applied to it. When you do this, however, it can be easy to loose tracks of any specific script. Keeping them all in a single layer keeps everything neat (not to mention cutting down time hunting for bugs in the code).

Select frame 1 and open the Actions panel. You will need to be working in Expert mode. With the Actions panel open press CTRL+E to convert the mode to Expert. First define all of your variables before writing any script. It is good practice to keep all of your variables at the top of your script. This makes it easier for trouble shooting later on.
cube = 8;
cubeoutline = 12;
fov = 180;
rotate_x = 0;
rotate_y = 0;

Sin & Cos are the mathematical king pins to creating this 3-D model. Yes, its back to Math 101. But the value is that an intricate 3-D model can be drawn with very little scripting. The following script is the array that generates Sin and Cos.
cos = new Array(360);
sin = new Array(360);
for (i=-180; i<=180; i++) {
cos[i+180] = Math.cos(i*Math.PI/180);
sin[i+180] = Math.sin(i*Math.PI/180);
}

The following arrary defines the structure of the wires surrounding the final cube.
wirecube._visible = false;
c = new Array(cubeoutline);
for (n=1; n<=cubeoutline; n++) {
wirecube.duplicateMovieClip("c" add n, n);
c[n] = eval("c" add n);
}
c[1].per1 = 1;
c[1].per2 = 2;
c[2].per1 = 2;
c[2].per2 = 3;
c[3].per1 = 3;
c[3].per2 = 4;
c[4].per1 = 4;
c[4].per2 = 1;
c[5].per1 = 5;
c[5].per2 = 6;
c[6].per1 = 6;
c[6].per2 = 7;
c[7].per1 = 7;
c[7].per2 = 8;
c[8].per1 = 8;
c[8].per2 = 5;
c[9].per1 = 1;
c[9].per2 = 5;
c[10].per1 = 2;
c[10].per2 = 6;
c[11].per1 = 3;
c[11].per2 = 7;
c[12].per1 = 4;
c[12].per2 = 8;

After the lines of the cube have been calculated a similar array must be used to calculate the perpendicular lines.
perp._visible = false;
per = new Array(cube);
for (n=1; n<=cube; n++) {
perp.duplicateMovieClip("per " add n, n+cubeoutline*2+cube);
per [n] = eval("per " add n);
}

The final array of defines the vertices.
vertices._visible = false;
v = new Array(cube);
sv = new Array(cube);
for (n=1; n<=cube; n++) {
vertices.duplicateMovieClip("v" add n, n+cubeoutline);
v[n] = eval("v" add n);
}

v[1].perx = -50;
v[1].pery = -50;
v[1].perz = 50;
v[2].perx = 50;
v[2].pery = -50;
v[2].perz = 50;
v[3].perx = 50;
v[3].pery = 50;
v[3].perz = 50;
v[4].perx = -50;
v[4].pery = 50;
v[4].perz = 50;
v[5].perx = -50;
v[5].pery = -50;
v[5].perz = -50;
v[6].perx = 50;
v[6].pery = -50;
v[6].perz = -50;
v[7].perx = 50;
v[7].pery = 50;
v[7].perz = -50;
v[8].perx = -50;
v[8].pery = 50;
v[8].perz = -50;

To allow you to drag a cursor over the cube you must add the “Drag” method. This is the final element of code you need for frame 1.
cursor.startDrag(true);

Now select Frame 2 from the Scripts layer. The function of the code in Frame 2 is to calculate the spin, redraw and presentation of the 3-D cube. This is calculated through a “for” action, as shown in the following script:
for (n=1; n<=cube; n++) {
Next, the Vertices of the cube are first re-drawn with following code:

with (v[n]) {
k = _root.fov/(_root.fov-perz);
_x = 200+perx*k;
_y = 200-pery*k;
_xscale = 100*k;
_yscale = 100*k;
_alpha = 50*k;
}

Following the vertices the perpendicular lines are then calculated.
per[n]._x = v[n]._x;
per[n]._y = v[n]._y;
per[n]._yscale = (100+v[n].pery)*fov/(fov-v[n].perz);
per[n]._alpha = v[n]._alpha;
}

for (n=1; n<=cubeoutline; n++) {
Finally the rotation of the X- and Y-axis are defined.
tz = v[n].perz;
ty = v[n].pery;
rotate_x2 = int(rotate_x)+180;
v[n].perz = tz*cos[rotate_x2]-ty*sin[rotate_x2];
v[n].pery = ty*cos[rotate_x2]+tz*sin[rotate_x2];

// Rotate Axis Y
tx = v[n].perx;
tz = v[n].perz;
rotate_y2 = int(rotate_y)+180;
v[n].perx = tx*cos[rotate_y2]-tz*sin[rotate_y2];
v[n].perz = tz*cos[rotate_y2]+tx*sin[rotate_y2];
// The following code draws the outline of the cube
c[n]._x = v[c[n].per1]._x;
c[n]._y = v[c[n].per1]._y;
c[n]._xscale = v[c[n].per2]._x-v[c[n].per1]._x;
c[n]._yscale = v[c[n].per2]._y-v[c[n].per1]._y;
c[n]._alpha = (v[c[n].per1]._alpha+v[c[n].per2]._alpha)/2;
s[n]._x = c[n]._x;
s[n]._xscale = c[n]._xscale;
s[n]._alpha = c[n]._alpha;
s[n]._y = 200+100*(fov/(fov-v[c[n].per1].perz));
s[n]._yscale = 100*(fov/(fov-v[c[n].per2].perz)-fov/(fov-v[c[n].per1].perz));
}
if (pr) {

The following code will allow Flash to remember where the Cube has been and allow for the new lines of the cube to be created:
rotate_x = (legacyy-_ymouse)/2;
rotate_y = (legacyx-_xmouse)/2;
} else {
rotate_x *= 0.9;
rotate_y *= 0.9;
}
legacyx = _xmouse;
legacyy = _ymouse;

When this is all done the final step is to add code to frame 3 that will ensure that the movie keeps playing. Select Frame 3 of the scripts layer and add the following code to the Actions Panel:
gotoAndPlay (2);

Frame 1 draws the cube and Frame 2 controls how the cube is re-drawn as determined by the users interactions with it. Now, press F12 and watch it all come together. Your cube will now spin in a 3-D world as you drag your cursor over it.

What to do next?
The world of true 3-D is not easily created in Flash. But 3-D models can be built with the use of some ActionScript. The rewards for this work are great. The 3-D cube created in this article is only 4Kb in size. This makes the model highly portable for anyone connecting to the Web. Every 3-D model that is creates follows the fundamentals you have now mastered. The 3-D revolution is about to begin.

----------------------------------------------------------------------------------------------
Matthew David is a long standing evangelist for Macromedia’s product line. He has contributed to some of the best selling Macromedia books, such as The Dreamweaver Bible (IDG/Hungry Minds), Flash 5 Magic (New Riders) and Inside Flash MX (New Riders). He has also written Flash MX Magic (New Riders) and Building Great Games with Flash MX (Wiley).
He is a regular contributor to Macromedia’s Designer/Developer site, InformIT.com, Element K Journals’ Macromedia Solutions and MX Insite Magazines.
http://www.matthewdavid.ws

Matthew works as a freelance consultant. He can be contacted at 262-488-0026
----------------------------------------------------------------------------------------------
<<PREVIOUS PAGE || Click here to print this page