Scripting 3D in Flash: Camera Pitch in Viewing Balloon Arches

by senocular   | filed under 3D in Flash

For reasons of simplicity, we'll ditch the movement for this example (though it's not at all hard to re-implement) and get back to basic panning. Here, however, as you can see, there's an extra added axis of rotation in this panning view. Not only can you look left and right, but also up!

[ looking up at balloon arches]

Steps to Create Animation

1. Create your screen elements. Here there are a total of 3 circular clips: one red ball, one yellow ball and a smaller black ball. Then there's the ground. The ground this time will be a movieclip in our scene however. If you'll notice in the movie that when you look up, the ground actually falls beneath the view as if to follow the movement of the view. Prior to this example, there was no movement at all for the ground. That will have to be addressed here so the ground will need to be its own movieclip.
    
2. Now we can set up theScene movieclip and the other variables. Camera will now have an extra property for the new rotation which we'll call upAngle. This will represent the angle at which we would be looking up.

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

objectsInScene = new Array();

cameraView = new Object();
cameraView.x = 0;
cameraView.y = -200;
cameraView.z = 0;
cameraView.rotation = 0;
cameraView.upAngle = 0;
focalLength = 300;
  

Something else a little different here is that the camera now has a y of -200. This is to more accurately reflect the fact that the camera is not on the same level as the horizon and that you actually have an elevated view as if you were standing and not just a head on the ground.

3. Next is the display function. This will be the same function used for all the clips in the arches since they behave the same. Their only difference is size and color which is dependant on which library item is attached in creating them. It is here where we make use of that second camera rotation, the upAngle. For this, we will need to use the new trig methods explained earlier. With these new methods, however, there will be absolutely no need to re-establish a new radius since rotation will be based off of current x and y (or x and z) positions. This saves us the hassle of messing with Math.atan2 and the Pythagorean theorem. And that's a good thing. There is one small trick to using these methods though. In rotating around an axis, you will need to save the calculated x,y or z values in a temporary variable since the next function will also want to use the original values. If you redefine one of the originals to the new value, it would mess up the result. That's no big deal though, and easily avoided. Here's how it looks.

                                displayArch = function(){
 var x = this.x - cameraView.x;
 var y = this.y - cameraView.y;
 var z = this.z - cameraView.z;
 var tx, ty, tz; // temporary x, y and z variables

 // rotation around y axis
 var angle = cameraView.rotation;
 tx = Math.cos(angle)*x - Math.sin(angle)*z;
 tz = Math.sin(angle)*x + Math.cos(angle)*z;
 x = tx;
 z = tz;

 // rotation around x axis
 angle = cameraView.upAngle;
 ty = Math.cos(angle)*y - Math.sin(angle)*z;
 tz = Math.sin(angle)*y + Math.cos(angle)*z;
 y = ty;
 z = tz;

 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;
 }
};
  

4. With that complete, attach the clips as needed (see source for script used in the example).
    
5. Which brings us down yet again to the onEnterFrame function. There are a couple of changes going on in here. One is a minor change to the camera behavior. Changing the camera rotation now is no longer and additive process since rotation is now based on a change in rotation and not the rotation based on 0. The camera angle now represents how much to rotate and not an absolute rotation value. So, because of that, for movement based on the mouse, which this example uses, "+=" is abandoned in favor of just "=" - and this for each angle of viewing, left & right and up & down. Up and down here, though, will have to be limited so that we don't end up doing back flips when viewing the scene. Simple if checks are then added to restrict the upAngle view to be between straight ahead and straight up.
    
   The other change is the addition of the handling of the ground movieclip. Because we have this looking up factor involved in this 3D representation, the ground can't sit statically in the same position as it had before. It will need to move in respect to the view when a vertical angle is changed going down when you look up and coming back up when you look down. So what does this ground clip really represent? It represents an ever expansive ground or plane that exists at a y value of 0. The horizontal line created by this plane in the middle of the screen is the horizon line, or the height of a point at a y of 0 with an infinite value of z. In other words, if you were 50 bazillion miles back in z, your visual vertical position would be about on that line. With that understanding, we can treat the ground as a point extremely far in the distance and just move it up and down as if it were any other point in the scene. The ground, however, would not move left and right and since it is only one clip, we won't go through the effort of making a new display function and adding it into the objectsInScene array (though that is an option) - we can instead just handle it directly in the onEnterFrame function after displaying the objectsInScene. So assume a large distance (or z) and calculate a y value for the ground movieclip to correctly position it. Remember, the ground clip would for this on the main timeline and not in theScene so you will need to base the _y off of theScene's current _y. If you were to attach the ground clip into theScene, this wouldn't be a problem. This example does not do that, however.
    
   When complete, assign to the onEnterFrame event and the example is complete.

                                lookAround = function(){
 cameraView.rotation += this._xmouse/3000;
 cameraView.upAngle += this._ymouse/3000;

 if (cameraView.upAngle > 0) cameraView.upAngle = 0;
 if (cameraView.upAngle < -Math.PI/2) cameraView.upAngle = -Math.PI/2;

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

 var angle = cameraView.upAngle;
 var distance = 9999999;
 var y = Math.cos(angle)*cameraView.y - Math.sin(angle)*distance;
 var z = Math.sin(angle)*cameraView.y + Math.cos(angle)*distance;
 var scaleRatio = focalLength/(focalLength + z);
 ground._y = theScene._y + (y * scaleRatio);
};
theScene.onEnterFrame = lookAround;
  

Full Rotation

In that example there were 2 axes of rotation. All that remains in this total three-dimensional conquest is that final third axis - rotation around the z axis, or camera roll. This would be comparable to you tilting your head left or right down towards either your shoulder while still looking straight ahead thereby pretty much spinning the world in front of you. In terms of the first person perspectives of virtually all our previous examples, walking around and interacting with the environment, this act has little practicality. In fact, it generally also has little practicality in other 3D as well. The reason for this is that with just two axes of rotation, you have the ability to see or rotate in any direction in 3D giving you practically a full range of three dimensional rotation.

Just think back to the previous example. If there was no restriction on looking down, there would be no direction that you couldn't look in - and all this without the need of further rotation around the third remaining axis. In fact, much of the 3D you see online, when you see it, especially in Flash, doesn't take advantage of that third rotational axis, not only because, well, it's not needed. But also, if you consider that a mouse only really has two inputs in terms of direction (left and right or up and down), there isn't much room for controlling that third axis anyway. Given that any rotation can be met with just two, why bother with more? Well, I can think of some reasons, but I won't bother you with those now.

3D Shape Rotation Around a Center (All Axes)

This is getting into the more popular and impressive display of 3D in Flash - what you really think of when you hear the term "3D." If you are one of those Flash developers who has a very 2D-based mind set, coming across a fully rotational 3D object in a Flash player is often, at least initially, very impressive. There's reason for that impression too; because it's not at all intuitive or really all that easy. Usually only those who know what they're doing in terms of 3D and the more complex math involved end up, well, doing it. So far, however, in following this tutorial, pretty much all that is needed to put this into effect has been discussed. The ground work has been done through the previous examples and only a small change in implementation is needed to achieve this new 3D effect.

Basically, the biggest difference here between the previous example which gave the ability of looking up is that, here, the camera object isn't used. Rotation here is applied directly to the shape and not the camera much in the same respect as the Merry Go Round example only with more rotation. This single shape is either perceived or alluded to through the rotation of solid shapes in a uniform manner, as the next example demonstrates, or something rendered with a 3D look using Flash's drawing methods based on theoretical points which are all rotating around a common center that which will be addressed later....in the next section.

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.