Flash Tutorial for Flashing Lights


When an incandescent light flashes on and off, the filament dims and brightens. Though fast, the transition takes time; the illumination does not simply cease and resume at full strength instantaneously. When creating the illusion of a flashing light in Adobe Flash, an animator must take this into account if he wants a convincing effect. Fortunately, thanks to Flash's "Shape Tween" mechanism, animators can create a realistic flashing light effect with minimal effort.

Things You'll Need

  • Adobe Flash Professional

Flashing Lights in Flash

  • Open a new document with a stage size of 550 by 400 pixels and a stage color set to black. Rename "Layer 1" to "Light."

  • Draw a circle anywhere on the stage with the "Oval tool" In the properties panel, set its height and width to 150 pixels and its x and y positions to 200 and 50, respectively. Turn off the circle's stroke color and set its fill color to the default, black and white radial gradient.

  • With the circle selected, open the color panel; click on the gradient's left-most color tab and set its color to R: 234, G: 234, B: 208. Click on the gradient's right-most color stop and set its "alpha" value to 0 percent.

  • Add a keyframe at frame 25 in the time line and another at frame 50. Click in frame 25, and set the circle shape's x position to 275, its y position to 125 and its height and width values both to 0. In the time line, click in any frame between frames 1 and 25 and add a "Shape tween." Click on any frame between frames 25 and 50 and add another "Shape tween" there.

  • Lock the "Light" layer, and add a new layer named "Reflection" beneath it. Click in frame 1 in the timeline of this new layer. Select the "Polystar tool" from the tool bar, click "options" under "Tool Settings" in the properties panel, and in the dialog box that appears set "Number of Sides" to 3.

  • Drag a triangle anywhere on the stage and rotate it using the "Free Transform tool" so that its base runs parallel and is nearest to the base of the stage. Set the shape's width to 200, height to 350, x position to 175 and y position to 150.

  • Fill the triangle with the default, black and white colored, radial gradient. Set the "alpha" value of its right-most color tab to 0 percent. Select the "Gradient Transform tool" and use this to adjust the size, proportion and position of the triangle's gradient so that it fits entirely within the shape and appears to be a foreshortened reflection of the white gradient circle on the layer above it.

  • Insert a keyframe at frames 25 and 50 in the time line of the "Reflection" layer. Select frame 25 then select the triangle shape, and in the color panel select the left-most gradient color stop. Set its color to black (R: 0, G: 0, B: 0). In the time line, click any frame between frames 1 and 25 and insert a "Shape tween"; do the same between frames 25 and 50. Select "Control > Test Movie" to view the animation.

Related Searches


  • "Learning Flash CS4 Professional, 1st Edition"; Rich Shupe; 2009
  • "Flash CS4: The Missing Manual, 1st Edition"; Chris Grover; 2008
  • "Adobe Flash CS4 Professional Bible"; Robert Reinhardt; Snow Dowd; 2009
  • Photo Credit light bulb image by sheldon gardner from Fotolia.com
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!