Scripting 3D in Flash: Simple Camera Panning

by senocular   | filed under 3D in Flash

This example will bring back our figures and have them occupy an environment as we pan the camera through it. The panning motion alone doesn't do much in terms of depth, so the 3D-ness of this example may be limited. Nonetheless, its a step in the right direction to getting really involved with 3D motion as it introduces trig and shows how it can be used with positions in 3D space.

[ panning the camera around viewing figures (LEFT and RIGHT keys) ]

Steps to Create Animation

1. The first step, same as before, is just setting up the needed movieclips and background. Here the figure clip from previous examples is used and a linker ID is given to it so it can be attached dynamically. Then ground is drawn marking not only the "floor" of the 3D space, but also the horizon line.
    
2. Next your basic definitions of theScene movieclip, objectsInScene array and the camera. Here, however, the camera isn't being moved in space, but rather rotated. So instead of x, y and z properties, its given a rotation property.

                                this.createEmptyMovieClip("theScene", 1);
theScene._x = 150;
theScene._y = 150;

objectsInScene = new Array();

cameraView = new Object();
cameraView.rotation = 0;
focalLength = 300;
  

3. A display function is now created for all the figures in the scene. This will be similar to the display functions before except that instead of offsetting position, the angle is being offset. Then, each figure can be rotated around the camera position in 2D in x and y using trig and be correctly positioned to make it seem as if the camera panned the view. An extra step is added here to hide all movieclips behind the camera. This prevents nasty results coming from clips with z values below 0.

                                displayFigure = function(){
 var angle = this.angle + cameraView.rotation;
 var x = Math.cos(angle)*this.radius;
 var z = Math.sin(angle)*this.radius;
 var y = this.y;
 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));
 }else{
  this._visible = false;
 }
};
  

3. Then attach each figure. This example will attach each figure in a spiral around the camera giving each figure attached a greater angle around the camera and a greater radius distance from the camera. These values of angle and radius are used to determine the position of the figure after the camera has been rotated.

                                angleStep = 2*Math.PI/10;
for (i = 0; i < 10; i++){
 attachedObj = theScene.attachMovie("friend", "friend"+i, i);
 attachedObj.angle = angleStep * i;
 attachedObj.radius = 100 + i*100;
 attachedObj.x = Math.cos(attachedObj.angle) * attachedObj.radius;
 attachedObj.z = Math.sin(attachedObj.angle) * attachedObj.radius;
 attachedObj.y = 0;
 attachedObj.display = displayFigure;
 objectsInScene.push(attachedObj);
}
  

4. All that remains here is setting up the onEnterFrame function. For this example, its just changing camera angle with arrow keys and looping through the objectsInScene array calling those display functions.

                                panCamera = function(){
 if (Key.isDown(Key.LEFT)) cameraView.rotation -= .1;
 if (Key.isDown(Key.RIGHT)) cameraView.rotation += .1;

 for (var i=0; i < objectsInScene.length; i++){
  objectsInScene[i].display();
 }
};
theScene.onEnterFrame = panCamera;
  

Rotation Outside of the Camera

It's time to drop the camera concept for a second and re-evaluate the idea of panning or spinning in this manner. The whole concept of panning is rotating shapes in the 3D space around the camera.This puts those shapes in front of the camera which are viewable, as well as rotates shapes behind the camera which are not. Anything below a relative 0 z is technically behind the view and hidden. However, we can take advantage of the cushion we have with the focal length and rotate images around the 0,0 location of the camera without hiding any of the shapes. This will give the impression of shapes rotating around a center point but, since we can see the shapes on the inside of that center point, that center point wont be seen as the camera center but, rather, a point in front of the camera. Exploiting that cushion allows us to easily rotate shapes in a fully viewable circle right in full view on the screen.

Merry-go-round of Spinning Images

Here is a good example of that rotation with this set of rotating images that can be used (and has been used in many instances) for an interactive 3d-esque interface.

[ spinning of image panes ]

Steps to Create Animation

1. Create your screen elements. This example uses an imported PNG image with an alpha channel to give it its blue translucent interior. This was made in fireworks and exported directly into Flash. Then from that I created a movieclip with a button within it. The button acts as the button to the interface and the movieclip is what will be used to dynamically attach that button. A graphic was also created to reuse the image inside the button once for its normal state, and then again in its over state with an applied color effect making it lighter.
    

2. Next define theScene movieclip, objectsInScene array, focalLength and spin. No camera this time. Technically this is doing the same thing as the previous example only there is no real concept of the camera. Because we wouldn't consider there to be a camera, there's no point in naming one out in the code. Here, we'll just use focalLength and a spin variable to represent what would otherwise be the camera rotation. The _y of theScene movieclip is raised a little so that we can give the view a bit of an angle and still get the scene more or less centered on the screen.

                                this.createEmptyMovieClip("theScene", 1);
theScene._x = 150;
theScene._y = 100;

objectsInScene = new Array();

focalLength = 500;
spin = 0;
  

3. Now we can define the function that will run each of the panes as the move around in a circle. This is very similar to the previous examples with one exception. To get the effect of the rotation of the flat planes as they spin, each of the pane movieclips need to be squished when the turn a corner in the act of spinning. This squishing is just a change in the movieclip's _xscale property, setting the _xscale of the movieclip to 0 when it reaches the far left or right in its spin. Luckily, this scaling relates directly to the movement of each pane as it moves left or right, or even, for that matter, back and forth along the z axis. Because of that, the scaling can be set to one of the factors controlling that movement... factors like those determined by trig, more specifically, sine of the angle of rotation. So in displaying the pane, you calculate everything as usual and then tack on at the end, an additional _xscale based on the sine of the angle of rotation for that pane. Since sine oscillates between -1 and 1 you have your _xscale values of 1 times its normal scale (normal) to 0* its normal scale (completely flat) and -1 times its normal scale (normal scale but reversed as though looking from behind).

                                displayPane = function(){
 var angle = this.angle + spin;
 var x = Math.cos(angle)*this.radius;
 var z = Math.sin(angle)*this.radius;
 var y = this.y;

 var scaleRatio = focalLength/(focalLength + z);
 this._x = x * scaleRatio;
 this._y = y * scaleRatio;
 this._xscale = this._yscale = 100 * scaleRatio;

 this._xscale *= Math.sin(angle);
 this.swapDepths(Math.round(-z));
};
  

You can see here that no check was made for z values below 0. We don't want to hide those panes which have gone below 0, but instead, keep them visible so that they can be seen through the entire rotation cycle. You just need to be sure that z values don't exceed the focalLength.

4. In attaching the panes, each will be equally distributed around the circle and placed appropriately with Math.sin and Math.cos all using the same radius for placement. The scaling process isn't necessary at this point as it will take effect as soon as the display function kicks in. Using a y of 40 will give the panes that slightly offset look - the reason for setting theScene's _y to 100 instead of 150.

                                angleStep = 2*Math.PI/8;
for (i=0; i < 8; i++){
 attachedObj = theScene.attachMovie("pane", "pane"+i, i);
 attachedObj.angle = angleStep * i;
 attachedObj.radius = 100;
 attachedObj.x = Math.cos(attachedObj.angle) * attachedObj.radius;
 attachedObj.z = Math.sin(attachedObj.angle) * attachedObj.radius;
 attachedObj.y = 40;
 attachedObj.display = displayPane;
 objectsInScene.push(attachedObj);
}
  

5. The easiest part is the enterFrame function controlling it. All this needs to do is alter the spin rotation value based on the position of the _xmouse and then run through each pane in the objectsInScene array calling their display function.

                                panCamera = function(){
 spin -= this._xmouse/1000;
 for (var i=0; i < objectsInScene.length; i++){
  objectsInScene[i].display();
 }
};
theScene.onEnterFrame = panCamera;
  

Note, however, that it is feasible to just rotate around a point that does logically exist in front of the camera instead of the default camera position of 0,0 specifically (something like (x:0, z:50). There's no harm in doing so. You will be a little further away, but the positioning of such a rotation would be more suitable in terms of relation to the camera view. Using the "exploit" just makes it easier.

You may feel that you have learned everything there is to know about 3D in Flash, but there is still a bit more left.

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.