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

Creating 3-Dimensional web sites is not new. Mark Andrasseen, Netscape Navigator’s pioneer, declared that 1997 would be the year that the Web would become 3-D. Well, things did not happen quite to Mark’s plans. The initial technologies to achieve a 3-D web required large plugins and large downloads. On top of this, computers were not very fast. This made even the most ambitions 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 plugin, called Flash, that over ¼ billion Internet users have installed on their computers that is capable of delivering 3-D models.

3-D in Flash is not as easy as a 3-D design studio, such as 3D Studio Max. Flash does not 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 in Figure A. When you have the cube built, you will be able to spin it with your cursor. As always, the source code for this article is available on the Element K Journals’ web site (www.elementkjournals.com).


The 3-D cube is created mathematically

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


The layers will allow you to manage the parts needed to create the 3-D cube

The Scripts layer will hold all of the information critical to calculate your 3-D cube. The Cube layer will contain a movie that you will 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 3 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. This inserts 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. 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 100 pixel’s 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.


The Outline movie will be used to construct the 3-D cube.
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 in Figure D. Later, in your ActionScript, you will reference this movie.


The instance of the Outline Movie is called Wirecube

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 are going to tell Flash to drag the cube. On the Stage draw a rectangle 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 “movementbuton” in Edit mode. The button has 4 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” select. Select the “hit” frame and convert the frame in to a Keyframe 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 in figure E. 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!


The Movementbutton is now an invisible rectangle

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”, used in the script you will add 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 “mousbutton” instance on the stage and 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.

----------------------------------------------------------------------------------------------
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
----------------------------------------------------------------------------------------------
<<NEXT PAGE

Click here to print this page