Dynamic Flickering Effect

var addthis_pub = 'PixelHive';

Category: Adobe Flash Tutorials
Added: 05/20/2007
Views: 88,183

Dynamic Flickering Effect

Tutorial Goal

To code dynamic flickering that can be applied to any MovieClip object in Adobe Flash. The flicker intensity, time between flickering and duration can be easily adjusted by changing variables. It is a great effect to draw attention to particular elements of your interface. As a example, I will apply the effect to the Neon Sign created in the last tutorial.

Resources

If you don't have an idea yet for a Movieclip to apply the effect to, we will apply the effect to a neon sign creating the illusion that the sign is struggling to stay on. Here are links to the two graphics:
Neon Sign On
Brick Wall

If you do have your own idea, skip to step 3.

Step 1 : Document Setup

Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 390 x 250 (Size of my example graphics)
Frame Rate: 30 fps
Background: White

Step 2 : Import Images and Prepare for Effect

Import the supplied sign_off.jpg onto the Stage.
File > Import > Import to Stage...

With the image selected use the Align Pane to position it on Stage. Make sure the "To Stage" button is down, then click the two align options below:
Window > Align

In the Timeline Pane, rename 'layer 1' to 'Brick Wall'.

Create 1 new layer by clicking Insert Layer, .
Rename the new layer 'Neon Sign', see below:

Import the supplied sign_on.jpg onto the Stage.
File > Import > Import to Stage...

With the On Neon Sign selected, convert it into a MovieClip symbol.
Modify > Convert to Symbol
Name: Neon_Sign

Double click the Neon Sign MovieClip

In the Timeline Pane, rename 'layer 1' to 'Neon Sign'.

Create 1 new layer by clicking Insert Layer, .
Rename the new layer 'Actionscript', see below:

Step 3 : Flickering the Neon Sign using Actionscript

It's already time to code the Flicker effect. The basic idea is to alternate the MovieClip between two different alpha settings. The rest is making the effect dynamic by randomizing the times in which the MovieClip will flicker.

Select Frame 1, labeled "Actionscript", on the Timeline inside the Movieclip you want to flicker and open the ActionScript Window.
Window > Actions

Copy & Paste the following code: ( All explained in my comments )

// -------------------------------
// Flickering MovieClip Effect
// www.pixelhivedesign.com
// -------------------------------
// All time in milliseconds. (1000 = 1 second)
maxTB = 4000; // Maximum time between flickering
minTB = 1000; // Minimum time between flickering
flickerDuration = 2000; // How long flicker will last
 
// Get a random start time.
flickerTime = getNewTime(); 
 
// Every frame execute the following code.
this.onEnterFrame = function(){
  // Get current time in milliseconds.
  curTime = getTimer();
  
  // Check if current time is past the time to flicker.
  if(curTime >= flickerTime){
    // Flickering.
    // Check if flicker has lasted the duration specified.
    if(curTime <= flickerTime+flickerDuration){
      // Continue flickering.
      // Alternate between alpha values.
      // This creates the flicker appearance.
      if( cnt >= 2){
        // Reduce alpha.
        // Lower this for more dramatic effect.
        this._alpha = 90;
        cnt = 0;
      } else {
        // Increase alpha.
        this._alpha = 100;
        cnt++;
      }
    } else {
      // Flicker lasted for duration.
      // Stop flickering and get next time to flicker.
      this._alpha = 100;
      flickerTime = getNewTime();
    }
  }
}
// Create a random time between maxTB and minTB specified.
function getNewTime(){
  return getTimer() + (Math.random() * (maxTB-minTB))+minTB;
}