Dynamic Flickering Effect

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 05/20/2007
Views: 146,658

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

Align Pane

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

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

Layer Setup

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

The Neon Sign MovieClip

Double click the Neon Sign MovieClip

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

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

Layer Setup

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 )

  1. // -------------------------------
  2. // Flickering MovieClip Effect
  3. // www.pixelhivedesign.com
  4. // -------------------------------
  5. // All time in milliseconds. (1000 = 1 second)
  6. maxTB = 4000; // Maximum time between flickering
  7. minTB = 1000; // Minimum time between flickering
  8. flickerDuration = 2000; // How long flicker will last
  9. // Get a random start time.
  10. flickerTime = getNewTime();
  11. // Every frame execute the following code.
  12. this.onEnterFrame = function(){
  13. // Get current time in milliseconds.
  14. curTime = getTimer();
  15. // Check if current time is past the time to flicker.
  16. if(curTime >= flickerTime){
  17. // Flickering.
  18. // Check if flicker has lasted the duration specified.
  19. if(curTime <= flickerTime+flickerDuration){
  20. // Continue flickering.
  21. // Alternate between alpha values.
  22. // This creates the flicker appearance.
  23. if( cnt >= 2){
  24. // Reduce alpha.
  25. // Lower this for more dramatic effect.
  26. this._alpha = 90;
  27. cnt = 0;
  28. } else {
  29. // Increase alpha.
  30. this._alpha = 100;
  31. cnt++;
  32. }
  33. } else {
  34. // Flicker lasted for duration.
  35. // Stop flickering and get next time to flicker.
  36. this._alpha = 100;
  37. flickerTime = getNewTime();
  38. }
  39. }
  40. }
  41. // Create a random time between maxTB and minTB specified.
  42. function getNewTime(){
  43. return getTimer() + (Math.random() * (maxTB-minTB))+minTB;
  44. }

Dynamic Flickering Effect : Conclusion

Change the "Neon_Sign" MovieClip to anything and it will flicker to your settings. It's a great effect to draw attention to interface elements.

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Dynamic Flickering Effect" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Interactive Media : Touch Screen Kiosk La Salle University Hall of Fame Kiosk

Touch Screen Kiosk
32" Touch Screen Kiosk featuring the hall of fame inductees of La Salle University.

Web Development : Logo & Website Design UM Undercutters Mascot Logo

Logo & Website Design
Connecting College Book Buyers & Sellers

Web Development : Informational Website Constructicons

Informational Website
Construction Company based in Florida

Testimonials

"Our organization relies on Pixel Hive Design’s broad-based expertise in web, graphic, and database design. Simple web sites, interactive atlases, custom Google Maps applications, brochures, interpretive panels…Pixel Hive Design has helped us to deliver wide-ranging, high quality products that always exceed clients’ expectations. Max is extremely talented and a great partner."

- Stephen Engle, Director, Center for Community GIS
View More Testimonials

More Tutorials!