Ultrashock Tutorials

Ultrashock Tutorials > Flash5 > 3 Dimensions of Flash5

By: David Colquhoun, DavidColquhoun.com

Source File
PDF file

3 Dimensions of Flash5

Introduction

Lets face it, Flash just isn't built to do 3D animation. It's a 2D vector animation program. There are no built-in 3D tools, no z-depth. So how do you do anything 3 dimensional in Flash? It's simple - you fake it.

There are two general approaches; using a sequence of still images, and dynamically moving movie clips to create shapes that appear to have depth. I'm going to talk briefly about a few different ways to create 3D sequences and, in much more detail, will explain how to move movie clips using some simple high school maths.

A sequence of still pictures

Trace bitmap

Draw your images use a 3D modeling/animation package like 3D Studio or Lightwave, then render a sequence of still bitmap images. Use the trace bitmap feature in Flash to turn each bitmap into line work. For the best results render the bitmaps large so Flash has more information to work with. Also turn the anti-aliasing off so Flash will draw a single line for separate shapes, rather than drawing lots of grey stripes. After you've traced them, shrink them down to their original size. If your 3D software has a cell shader, using that will help stylise the animation.

Vector rendering

Use a 3D package to draw/animate what you want and use vector rendering software to directly create a sequence of still vector images. Two pieces of software perfect for this are:

Swift 3D

by Electric Rain
http://www.swift3d.com
mac and pc
us$139
gradient shading
allows you to draw/animate simple 3D models
imports EPS, AI, 3DS

Vecta 3D

by Ideaworks
http://www.vecta3d.com
mac + pc
us$59
flat cartoon shading, gradient shading on extruded shapes

Because they are both quite inexpensive, I'd say buy both and see which has the best look/feel for your project.

Adobe Dimensions

If your images are quite simple - for example, a spinning logo or an extruded piece of text; you can use Adobe Dimensions to extrude/revolve a piece of linework and then export a sequence of Illustrator files. It also draws primitive objects like sphere, cube, cylinder or cone. The best thing about Dimensions is that you may already have it, as it's been around for a long time, and most print companies have brought it at some time or another. So check your software cupboard.

Some of the drawbacks with using a sequence of still pictures are: the increased file size, a limited point of view, and decreased frame-rate (because Flash doesn't like moving lots of curves), but the advantage is that you do get much more detailed pictures.

Moving movie clips using mathematics

By arranging movie clips containing points, lines or triangles on the screen, you can suggest depth and space. For example; railway tracks and trees getting smaller in the distance.

There are many tricks to doing this. The main one that I use is to make objects in the background smaller than objects in the foreground. To do this we need to know how far back each part of the picture is. So we store the location of each point in 3 dimensional space. Then we map each 3D point (x,y,z) onto a 2D surface (x,y), shrinking the 3D x and y values as the z value gets greater. Show where the points are by placing a movie clip on each point, stretching a line between two points or warping a triangle to fit between 3 points. The final part is to rotate the points around the x and y axis, as seeing the object from all directions makes it easier to see its shape.

There are two example FLA files to help you understand this section. Better3DFlash5-simple.fla and Better3DFlash5-complex.fla. Start with the simple file and when you have the hang of that, check out the extra features built into the complex file. All of the action script is inside the '3D object' movie clip. The first 4 frames inside this movie clip load the 3D model data from an XML string. The 'init' frame puts these settings into arrays, and duplicates the correct number of points and lines. The looping frame moves the points and lines around. There are also object actions attached to the instance of the '3D object' movie clip that tell when the mouse is being dragged or not.

Example : Cube Spinning in 3 Dimensions

Step 1 : Storage

Each point in 3D space is defined by x, y, z co-ordinates, in the same way that the position of a movie clip in Flash is defined by x, y co-ordinates. A shape like a cube is therefore defined by a set of points something like this:

X Y Z

50 50 -50

-50 50 -50

-50 -50 -50

50 -50 -50

50 50 50

-50 50 50

-50 -50 50

50 -50 50

This represents a cube 100 pixel wide, and centered on 0,0,0. To store this in Flash you will need an array of points, each point having a x, y and z property. In action script the cube would look like:

// create pointset array
pointset = new array();
// point 1
tmpPoint = new array();
tmpPoint["x"] = 50
tmpPoint["y"] = 50
tmpPoint["z"] = -50
pointset.push(tmpPoint);
// point 2
tmpPoint = new array();
tmpPoint["x"] = -50
tmpPoint["y"] = 50
tmpPoint["z"] = -50
pointset.push(tmpPoint);
// point 3
tmpPoint = new array();
tmpPoint["x"] = -50
tmpPoint["y"] = -50
tmpPoint["z"] = -50
pointset.push(tmpPoint);
// point 4
tmpPoint = new array();
tmpPoint["x"] = 50
tmpPoint["y"] = -50
tmpPoint["z"] = -50
pointset.push(tmpPoint);
// point 5
tmpPoint = new array();
tmpPoint["x"] = 50
tmpPoint["y"] = 50
tmpPoint["z"] = 50
pointset.push(tmpPoint);
// point 6
tmpPoint = new array();
tmpPoint["x"] = -50
tmpPoint["y"] = 50
tmpPoint["z"] = 50
pointset.push(tmpPoint);
// point 7
tmpPoint = new array();
tmpPoint["x"] = -50
tmpPoint["y"] = -50
tmpPoint["z"] = 50
pointset.push(tmpPoint);
// point 8
tmpPoint = new array();
tmpPoint["x"] = 50
tmpPoint["y"] = -50
tmpPoint["z"] = 50
pointset.push(tmpPoint);

In the example files this array is created inside the 'init' frame. It's parsed from part of a XML file that looks like:

The type variable at the end indicates which frame in the 3D point movie clip is displayed. At the moment 1 is an invisible point and 2 is a grey sphere. You can make as many custom types as you like by adding frames to the '3D point' movie clip and putting your own artwork in.

Writing the co-ordinates for a simple shape like a cube isn't too mind-bending, but you just try drawing a person like this! :) Thankfully you don't have to, because you can draw your model using something like 3D Studio or Lightwave, export it as a VRML format file, open the file in a text editor and look for something like:

Coordinate { point [ 10.0 10.0 10.0, 2 20 2, 30 0 0 ] }

Which is a list of x,y,z co-ordinates for the VRML model which you just need to copy into Flash.

Step 2 : Display

To display your 3D object on a flat computer screen you need to map each 3 dimensional point (x,y,z) onto a 2 dimensional surface (x,y). The most common way is to use a single point perspective, where objects in the background are smaller, and closer together than objects in the foreground. As z gets greater (positive) then x and y gets smaller, and as z gets smaller (negative) x and y get greater.

Railway tracks and trees getting smaller in the distance.

Monitor plane and xyz co-ordinates mapping

The set of 2D points is built within the looping frame action every time the frame refreshes. The flat points stored within the array for each point, they are called 'flatx' and 'flaty'

scalar = perspective / (tz + perspective);
pt.flatx = scalar * tx;
pt.flaty = scalar * ty;

Points

If you create several movie clips, and set their x and y properties to match the 'flatx' and 'flaty' positions of each point, then the movie clips will follow the points of your shape and you'll get something looking like: Cube with points only

Each of those movie clips could contain an animation, a button, or even another set of spinning points.

In the example files the point movie clips are called 'p0', 'p1', 'p2' and so on. In the 'init' frame action these points are duplicated off a movie clip called 'point' which is then hidden. This way the flash file can duplicate as many movie clips as it needs, rather than you copying and renaming movie clips manually.

Several properties of these movie clips are set from within the looping frame. This makes it easy to add more features such as alpha or scale, or setting the type of point.

Lines

Displaying lines in 3D is a matter of stretching a line between two 2D co-ordinates which we've already calculated. Each line is described by its start and end point. In the XML file the set of lines looks like:

This is parsed out of the XML file in the same way the point information was. The action Script that positions the lines is in the looping frame action script.

Triangles

Ok, now it gets too scary for me. I'm not going into detail, but if you take a right angle triangle, 100x100 pixels, you can use combinations of scale and rotate to stretch it into a triangle of any shape. If you write some action script to figure how much to scale and rotate the triangles by, you could draw solid shapes built out of triangles.

Example : Triangle scaling/rotating

And here's someone (Kaluzhny Pavel) who has made triangles work.
http://kaluzhny.nm.ru/3D.html

Step 3 : Move them

The nice thing about building 3D objects this way is you can rotate/scale/squash them anyway you want. Add or subtract to the x, y, z values to move the points/shapes. Multiply all the points by 2 and the shape scales twice as large.

Rotation however gets a bit confusing. Here's the actionscript:

spinxradians = spinx/180.0 * math.PI;
spinyradians = spiny/180.0 * math.PI;
sinX = math.sin(spinxradians);
sinY = math.sin(spinyradians);
cosX = math.cos(spinxradians);
cosY = math.cos(spinyradians);
//
// loop through all the points
for (i=0; i<pointset.length; i++) {
pt = pointset[i];
// rotate this point around the origin
tmp_zpos = pt.z * cosY - pt.x * sinY;
tx = pt.z * sinY + pt.x * cosY;
tz = pt.y * sinX + tmp_zpos * cosX;
ty = pt.y * cosX - tmp_zpos * sinX;
.
.
.
.

The first part calculates the sine and cosine of 'spinx' and 'spiny', using Flash5's handy math object.

'spinx' is the angle you want to rotate the points by around the x axis and 'spiny' is the angle you want to rotate the points by around the y axis. Looping through all the points, we create temporary x,y,z coordinates ('tx', 'ty', 'tz') for each point. They are temporary because errors in rounding get compounded over time and cause spinning objects to look like they are collapsing, as the x,y,z values are continuously rounded closer to zero. To solve this we always spin the points from their original locations. 'spinx' and 'spiny' are how much the object is currently rotated by. They are measured in degrees and can be any number, negative or positive. 'spinxchange' and 'spinychange' are how much to change 'spinx' and 'spiny' by, each frame. To control the speed of the rotation, change 'spinxchange' and 'spinychange'.

Don't worry too much about the math in the last 4 lines, lets just say its a simplified matrix transformation and leave it at that.

Conclusion

I hope that this helps you to understand 3D in Flash, and that the source files save you a bit of time developing the worlds next 3D spinny menu system.

Extension exercises

animated/tweened points
worlds within worlds
3d shape modeler
Faster depth sort
curved lines

Download source FLA:

Better3DFlash5-simple.zip

Better3DFlash5-complex.zip

Example files:

Better3DFlash5 simple
Better3DFlash5 complex
Cube Spinning in 3 Dimensions
Cube with points + co-ordinates labeled
Cube with points only
Cube with lines only
Triangle scaling/rotating