Flash Reference Guide

Creating three-dimensional Web sites is not new. In fact, almost a decade ago, Netscape founder Marc Andreessen declared that 1997 would be the year the Web became 3-D. Obviously, things didn’t quite work out according to Marc's plans. The initial technologies used to create 3D sites required large plug-ins and downloads and computers just weren’t very fast back then. This made even the most ambitious 3-D projects look, well, lame.

But, 3-D is back. And, you know what, I think they have it right this time. There is a little plug-in, called Flash, capable of delivering 3-D models, that over a quarter billion Internet users have already installed on their computers.

Creating 3-D in Flash, however, is not as easy as it is using a 3-D design studio, such as 3D Studio Max. Flash doesn’t have tools that allow you to easily create 3-D vector-based models. With Flash, you have to do it the hard way—you must use ActionScript.

To demonstrate this, let's go ahead and build a 3-D wire cube, as shown below. When you have the cube built, you’ll be able to spin it with your cursor.

Figure 1

Building A Solid Foundation

Let's begin by creating the buttons and movies you’ll need in your Flash Library. Open Flash and begin by creating a new movie (press CTRL+N). This movie will need four layers. You’ll need to name the layers Scripts, Cube, 3-D, and Movement as shown below.

Figure 2

The Scripts layer will hold all of the information critical to calculating your 3-D cube. The Cube layer will contain a movie that you’ll need to create the sides of the 3-D cube. The 3-D layer will contain a single movie needed to draw the perpendicular lines of the final 3-D cube; and the Movement layer will allow the mouse to control the view of the cube.

Make each layer three frames long. To do this, click, hold, and drag your cursor from frame 1 of the Scripts to frame 3 of the Movement layer. This will highlight the first three frames in the four layers. Press F5 to insert the needed frames.

Go to frame 1 of the Scripts layer. Press F6 to convert the frame to a Key Frame. Do this with the next two frames as well. Later, ActionScript will be added to these three frames.

Now, let's add the objects to the Stage that will generate a 3-D cube. Select the Cube layer. Choose the Line Tool. On the Stage, draw a line that’s 100 pixels long at a 45-degree angle. Press F8 to convert the line to a Movie. Name the new movie "Outline," as shown in Figure C.

Figure 3

The line on the stage is now an instance of the Outline movie. Press CTRL+I to open the Instance panel. Name this instance of the Outline movie "Wirecube," as shown below. Later, in your ActionScript, you will reference this movie.

Figure 4

Select the 3-D layer. With the Pencil Tool, draw a single dot on the Stage. Press F8 and convert the dot to a Movie. Name the new movie "Outline." Press Ctrl+I to open the Instance Panel and name the new instance of the Outline movie "Vertices." This movie is pivotal in creating the 3-D effect.

Finally, select the Movement layer. The final 3-D cube will be spun using your mouse. To do this, you need to begin by adding a little script. You’re going to tell Flash to drag the cube.

On the stage, draw a rectangle that’s 40 pixels wide and 20 pixels high. Press F8 and convert the graphic to a button. Call the button "movementbutton."

In the Library, open the new "movementbutton" in Edit mode. The button has four frames: up, over, down, and hit. The frames reflect the state of a mouse clicking on the button. Right now, you only have "up" and "hit" to select. Select the "hit" frame and convert the frame to a Key Frame by selecting F6. Now select the" up" frame and delete the rectangle on the stage. What you have left is a transparent button, as shown below. This new button is now tremendously useful. ActionScripts can be applied to it and a user can interact with it without ever knowing it is on the stage!

Figure 5

On the stage, select the instance of "movementbutton" and open the Actions panel (CTRL+ALT+A). The following script must entered:

on (press) {
	_root.pr=true;
}
on (release) {
	_root.pr=false;
} 

The code controls a variable, called "pr," that’s used in the script you’ll be adding to frame 1. Essentially, the action of the mouse being either pressed or released controls how the 3-D cube is drawn.

With the script in place, convert the button to a movie. Select the "mousebutton" instance on the stage, press F8, and name the movie "Movement." Open the Instance panel and name the instance of the movie "cursor."

Save you current movie as 3-D Cube.fla.

Adding the Script

Now comes 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 Scripts layer.

Select frame 1 and open the Actions panel. You’ll need to be working in Expert mode. With the Actions panel open, press CTRL+E to convert the mode to Expert. Define all of your variables before writing any script.

It’s good practice to keep all of your variables at the top of your script. This makes it easier for troubleshooting later on.

   cube = 8;
   cubeoutline = 12;
   fov = 180;
   rotate_x = 0;
   rotate_y = 0;

Sin " Cos are the mathematical kingpins behind this 3-D model. Yes, it’s 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 array defines the structure of the wires surrounding the final cube.

   wirecube._visible = false;
   c = new Array(cubeoutline);
   for (n=1; n<=cubeoutline; n++) {
     wire-cube.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 defines the vertices.

   vertices._visible = false;
   v = new Array(cube);
   sv = new Array(cube);
   for (n=1; n<=cube; n++) {
     verti-ces.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 and redraw 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 redrawn with the 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 redrawn as determined by the user’s interactions with it. Now, press F12 and watch it all come together. Your cube will spin in a 3-D world as you drag your cursor over it.

What Next?

A true 3-D world is not easily created in Flash, but 3-D models can be built with the use of some ActionScript—and the rewards 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 created follows the fundamentals you have now mastered. The 3-D revolution is about to begin.