Scripting 3D in Flash: Basic Shading

by senocular   | filed under 3D in Flash

Shading is another technique that can add a lot of depth to an shape in a 3D space. Basically, you're just colorizing your shapes based on some factor like rotation or, surprise surprise, depth. Perhaps you want to give the impression of fog or night. Shading faces white or black as those faces recede into the distance can give these effects. What about shading based on a light source. Also doable... but more complex. You start getting into higher math at this point - something I've been trying to avoid so it won't be covered (...yet?). Fog, however, is fairly easy and can be beneficial if you want to prevent having to worry about objects being drawn far off in the distance.

Simple Fog

Given any shape in your 3D scene, you have a specific coordinate telling you where that object is in relation to the view in terms of z. Using this distance, you can apply a fog of some sort by tinting a shape or face directly proportionate to that z value helping you achieve a greater sense of depth. We'll bring back our two rows of figures and add fog to them.

[ fog applied to figures in the distance ]

Steps to Create Animation (partial)

1. Basically, the only difference here is the inclusion of the fog (that and the ground imagery was changed with a gradient that suggested a foggy background). This is a color addition using the Color object in Flash that is simply a tint applied to each figure, assuming its visible, based on z. A tint can easily be applied using setTransform and adjusting the rb, gb and bb values - each which relate to the addition of either the color red, green or blue. Adding them all at once will add white. The range of these values will span from 0 (normal color) to 255 (all white) so it is up to us to get a tint value for that range based on z. This example uses the following.

  var tint = Math.min(z/5, 255);
this.col.setTransform({rb:tint, gb:tint, bb: tint});

Here, col, a color object for the figure is set to have a tint 1/5 the value of z (out of 255). This means that the figure will be fully white when its z is 255 x 5 or 1275. Of course the Color object, col, would need to be defined...

2. So be sure to define a Color object variable (col), which is simply a new Color object, when each clip is attached.

  for (i=0; i < 8; i++){
 // other actions...
 attachedObj.col = new Color(attachedObj);
}

3. As an added bonus, this example adds a new twist in navigation. The mouse is used for turning, the UP and DOWN arrows for moving forward and back and LEFT and RIGHT are used for side-stepping. Side-stepping is nothing more than taking movement forward and backward and adding a 90 degree (or Math.PI/2 radian) spin on the angle used for that. Here is the full walk around (theScene's onEnterFrame) function used for that.

  walkAround = function(){
 cameraView.rotation += this._xmouse/5000;

 var fmovement = 0;
 if (Key.isDown(Key.UP)) fmovement += 10;
 if (Key.isDown(Key.DOWN)) fmovement -= 10;
 var smovement = 0;
 if (Key.isDown(Key.LEFT)) smovement += 10;
 if (Key.isDown(Key.RIGHT)) smovement -= 10;

 cameraView.x += Math.sin(cameraView.rotation)*fmovement;
 cameraView.z += Math.cos(cameraView.rotation)*fmovement;

 cameraView.x += Math.sin(cameraView.rotation-Math.PI/2)*smovement;
 cameraView.z += Math.cos(cameraView.rotation-Math.PI/2)*smovement;

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

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.