Dynamic Flickering Effect

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 05/20/2007
Views: 147,028

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 : Flash Game Development Financial Flash Game

Flash Game Development
Financial Educational Flash Game

Web Development : Logo & Website Design UM Undercutters Mascot Logo

Logo & Website Design
Connecting College Book Buyers & Sellers

Print & Graphic Design : 36 Flagstaff Lake Wall Panel

36" x 24" Wall Panel
Wall panel of historic sites on Flagstaff Lake

Testimonials

"I have worked with Max Langdon for almost five years. Max is not only a talented web designer and programmer, but he has an added quality that I find quite rare. He is able to really listen to and understand the client's vision. He asks excellent questions that help you zero in on exactly what you are trying to accomplish. This helps you clarify your goal and allows Max to think through the scope and sequence of the process before beginning to program. This saves him time and saves you money.

Working with Maxwell Langdon and his company, Pixel Hive has been a pleasure. I have always found him to be responsive and helpful. There is no "attitude" when you ask for an explanation or guidance.

I would be happy to speak with anyone who is thinking of working with Max. "

- John Burstein, Slim Goodbody Corporation, Lincolnville Center, ME
View More Testimonials

More Tutorials!