The 3D Spotlight Effect

We present an effect of an object, in our example text, illuminated by a moving spotlight, with a shadow cast on a wall behind the text. The effect is three-dimensional, but we are not using any of the native 3D methods in Flash. Rather, the effect is achieved with some clever layering and masking. Click on the image below to open the applet in the new window:

Download

Download the well-commented source file corresponding to the applet above, spotlight.fla.

Comments

The spotlight effect is achieved through the use of five display objects (Sprites and MovieClips). There are two spotlight Sprites: one for the light reflected off the text, and one for the light which shines on the back wall. We have three copies of the text MovieClip in use: one copy for the text as it appears when not illuminated by the spotlight, a blurred copy for the shadow of the text on the wall, plus one more copy that serves as a mask for the front spotlight.

Let us try to explain the technique in greater detail although everything becomes crystal clear if you download the 'fla' file from the link above and look at the simple Timeline code.

In the Flash authoring environment, we created a static text field with a white font, and converted this to a MovieClip called mcText stored in the Library. We linked 'mcText' to AS3 via Properties Library menu item. We are thus able to create copies of mcText in our code. (For linking to AS3, see our post How to Link Library Items to AS3 in Flash CS4 and Flash CS3 for Runtime Use.) We create three instances of mcText at runtime. All the remaining objects mentioned below are created programmatically.

We created a Sprite which looks like a complete circular spotlight, by using a gradient fill (For more information on gradient fills and how to control them properly, see our How-To article: Programmatic Gradient Fills and Effects in AS3 and Flash.) To create the illusion of text illuminated by this spotlight, the trick is to mask this spotlight with a copy of mcText, so that the spotlight will be "cut out" in the shape of the text. (For more information on using masks, see our tutorials How to Create a Simple Mask in ActionScript 3 and How to Create a Gradient Mask in ActionScript 3.)

We also may want the portions of the text not illuminated by the spotlight to be faintly visible, so we create another copy of mcText. We change it from white to the desired color by altering its colorTransform property. Even if we donít want the non-illuminated text to be visible, we should still use black text here, to obscure anything that might be behind the text (such as the spotlight reflected off the wall).

We also wish to create a shadow of the text on the wall behind the text, so a blurred copy of the text is created, and made black by altering its colorTransform property. This copy is also scaled up so that the shadow is larger than the front text, as a shadow might appear in real life.

The light which misses the text should hit the wall behind the text, so we must create another (scaled up and dimmed) copy of the spotlight for the rear wall. Of course, this spotlight should not cover the shadow, so it is important to place this spotlight layer behind the shadow.

Thus to summarize, a spotlight masked by a text shape serves as the illuminated text, behind that is the non-illuminated text, behind that is the shadow, and behind the shadow is another copy of the spotlight.

Our example makes use of ENTER_FRAME animation to move the spotlight back and forth according to a sinusoidal function. Note that we had to scale up the motion of the rear spotlight so that its position on the larger shadow would match the position of the spotlight on the smaller front text.

Our technique creates text that appears white if we draw our spotlight with a white-to-black gradient. If we want the text to appear colored, we should change the color of the spotlight. If we use a different color for the rear spotlight, then the wall and the text will appear to have different colors. In the source code, you will find some easily changeable color values (some suggested alternate colors are included in the comments).

Our masking trick requires the text (or any other MovieClip we wish to illuminate) to have an arbitrary but uniform color. If we want to illuminate a multicolored object, we will need to use alternate methods. How to accomplish that is the subject of another tutorial coming very soon. Stay tuned!

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.