The Effect

In our recent tutorial 3D Moving Spotlight and Shadow Effect in AS3 and Flash, we showed how to create a 3D moving spotlight and shadow effect. Our technique of 2D masking and filtering allowed for illuminatig monochrome objects. Here we show how, via additional masking and blend mode tricks, the method can be extended to multicolored objects. 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_multicolor.fla.

Comments

Our technique may be clear if you download the 'fla' file from the link above and look at the Timeline code. However, since there are a number of display objects in use, some explanation may be helpful.

In short, the lighting effect is achieved by placing a "lightAndDark" Sprite in front of the text, making it white where we want the text to be fully illuminated, and black where wewant the text to be in the dark (with shades of gray for less lighting). The lightAndDark Sprite affects the brightness of the text behind it by setting the BlendMode of the lightAndDark Sprite to MULTIPLY.

The lightAndDark Sprite, pictured below, is composed of a black rectangle which covers the text, plus a circular spotlight which has a radial gradient with white at the center and black at the edges. (If we want the text to still be somewhat visible even when not illuminated by the spotlight, we use dark gray instead of black.) To animate the lighting, we move the circular spotlight while keeping the black rectangle fixed.


The lightAndDark Sprite

We place the text and the lightAndDark Sprite together in one Sprite called textAndLightHolder for the purposes of masking. We only want the lightAndDark Sprite to be in effect where the text is, so we make use of another copy of the text as a mask, which cuts out the textAndLightHolder Sprite in the shape of the text.

You may wonder why we need to mask both the lightAndDark Sprite and the text, rather than just the lightAndDark Sprite. The text is already in the correct shape, so it seems unnecessary to mask it with another copy of the text. However, we have found that only masking the lightAndDark Sprite causes some edges of the text to be visible behind the cut out lightAndDark. Masking both the text and the lightAndDark together ensures that they will be exactly the same shape.

Finally, we create a shadow by using a blurred copy of the text, and behind this we place another copy of the spotlight, representing the light reflecting off the wall behind the text.

To summarize, here is the layering hierarchy, from back to front:

  1. Back spotlight
  2. Blurred copy of text for shadow
  3. The "textAndLightHolder" Sprite, which contains
      a. The main text
      b. The lightAndDark Sprite, which has BlendMode set to MULTIPLY, and is composed of
         i. A black rectangle which covers the text, which will not move
         ii. The moveable front spotlight, which has a radial gradient with
             white at the center and dark gray (or black if desired) at the edges
  4. Another copy of the text to mask the lightAndDarkHolder, so that the lightAndDark will be cut out in the shape of the text.

Back to Advanced 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.