Scripting 3D in Flash: Integration of Pre-Rendered 3D Elements

by senocular   | filed under 3D in Flash

Having balls and flat figures can be fine to a degree, but often, your scene may require more than that flat look. Using pre-rendered elements, either hand-drawn, or more commonly pre-rendered in an external 3D application then imported into Flash can be used to enhance your 3D scene by adding a more realistic 3D impression.

Such elements would require a fully rendered frame-by-frame rendition with 360 degrees of rotation. That way, no matter what angle you are looking at the object, you will be able to see its correct side. Here is an example created in Swift3D.

[ a satellite dish rendered with 360 degrees of rotation ]

You can imagine yourself running around this satellite to view it at all angles as seen above. Using those angles of view, we can stick that element into a 3D scene to give a better sense of realism though only requiring Flash to calculate position and scaling for one single movieclip.

The Satellite Dish

This will use the same methods of navigation as the example on Moving the Camera With Panning. Instead of figures, however, this example will use two pre-rendered satellite dishes. When moving around these dishes you will see them as they should appear in being perspectively correct (at least within the extents of their frames of animation).

[ perspectives for pre-rendered satellite dishes ]

Steps to Create Animation (partial)

1. The elements in this example consist of the background, which hasn't really changed; a small, red circle movieClip; and the movieclip consisting of the frames that make up the rotating pre-rendered element. Each one of these frames are placed in a single movieclip used to represent the satellite dish. Telling this movieclip to play different frames will allow it to appear to change perspective based on your rotation around it.

[ frames of dish movieclip. onion skin shows rotation ]

2. Here, again, the Example 8: Moving the Camera With Panning method of navigation will be the same with the added side-stepping of Example 9. We only need to address the issue of the pre-rendered dish in its display function. It's there that we will tell the dish movieclip to go to and stop and the correct frame representing its correct perspective given the current camera angle. That frame is based around the following function. What this function does is takes an angle of rotation, r, and finds out which frame out of the total number of frames reflects the passed angle based on a full rotation of 360 degrees or 2 Pi radians. In other words, if the rotation is 0, this function uses the first frame of the span of frames. At 180 degrees, or a half circle, the number in the middle of frames and at around 360, the last frame in frames.

frameFromAngle = function(r, frames){
 r %= 2*Math.PI;
 if (r < 0) r += 2*Math.PI;
 return Math.floor(1 + frames * r/(2*Math.PI));
}; 

The first two statements

r %= 2*Math.PI;
if (r < 0) r += 2*Math.PI;

make sure the rotation passed is within a range of 0 to 2 Pi (we're dealing with radians here). r %= 2*Math.PI; uses mod (%) to bring the rotation down if its past 360 and if (r < 0) r += 2*Math.PI; keeps it from being negative. Following that, the return value is the frame calculated by deriving a ratio from r with 2 Pi radians, or a full circle, and multiplying that by frames.

return Math.floor(1 + frames * r/(2*Math.PI));

An added 1 is included because frames in movieclips start at 1 and not 0 which would be a possible result from this equation.

3. Now we can get into the display functions to make this work. The little red markers around the satellites are nothing new. Actually, the satellites themselves aren't very different either aside from the portion of code changing their frame. And that frame change is pretty much just calling the frameFromAngle function. However, I have thrown in another small piece of code to, in a way, enhance that effect.
   
   Given the current state of frameFromAngle, no matter where the camera is turned, as long as the camera remains in the same location, the angle of the satellite would remain the same. Other screen elements, though, when they are put into perspective and the camera turns within the environment, move in relation with each other and give a shifting appearance as they move to the edge of the view which frameFromAngle does not reflect. That can be added however, just by adding a little extra angle of rotation based on the rotation of the dish in respect to the rotation of the camera view. If looking straight ahead, you'd have a correct full-on frameFromAngle perspective. However, as that angle changes and the dish moves to the edge of view, that angle should change. To compensate, we can just alter the angle used in frameFromAngle with the calculation used in determining x since our x calculation is in fact our distance from the center of the view. Be careful, however, since the x actually changes based on distance back in z. When a dish is far back in the scene with a large z, the range it has in x is large - you panning the camera means a big jump in x value. Alternatively, with a close dish, when you pan the camera the x only alters slightly. So to offset that we can divide by the calculated radius to make this compensation greater when the radius is smaller - or when the object is closer in view and less so, being more subtle, when the object is further away.
   
   So with that, we can include in the check for visibility (when z > 0) the addition of the frame change

if (z > 0){
 if (!this._visible) this._visible = true;
 var scaleRatio = focalLength/(focalLength + z);
 this._x = x * scaleRatio;
 this._y = y * scaleRatio;
 this._xscale = this._yscale = 100 * scaleRatio;
 this.swapDepths(Math.round(-z));

 var perspectiveShift = x/radius;
 var frame = frameFromAngle(angle+perspectiveShift, this._totalframes);
 if (this._currentframe != frame) this.gotoAndStop(frame);
}else{
 this._visible = false;
} 

4. The rest is just as done before; attaching the clips, assigning the display function and running an onEnterFrame to control camera movement and display all the objects in the objectsInScene array.

You may feel that you have learned everything there is to know about 3D in Flash, but there is still a bit more left. You do have cool examples though, so continue on.

That wraps up this tutorial. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums. Your support is what keeps writing like this online! 😇

This tutorial was written by senocular, also known as Trevor McCauley. He has been one of this community's most generous teachers since the early Flash days, and he is still around: find him on senocular.com and on the forums.