Create a Flickering Neon Light Effect using Flash and Fireworks CS4

There is an all too familiar compulsion among digital designers to identify with their tool of choice. This is unfortunate because, when it comes to Flash, one tool that is invariably overlooked is Fireworks CS4.

In this tutorial, you'll discover how Fireworks CS4 can be used to speed up your workflow in Flash and, at the same time, help a neon sign located on the wall of a run down theatre in Los Angeles flicker forlornly on a rather busy street.

Step 1: Open Fireworks CS4

Open the MusicHall.jpg file in Fireworks CS4. The plan is to draw out each letter in the words “Music” and “Hall” using the vectors produced by Fireworks.

Step 2: Zoom in on the Letters

Select the Zoom Tool and zoom in on the words in the sign. Alternatively, you could select 150% from the magnification pop up window in the bottom right corner of the Canvas.

Step 3: Select a Stroke Color

Click the Stroke color chip in the Tools panel to open the Color Picker. Select FF3300 (an orange), then press Enter/Return to accept your choice. Set the Fill color to None. This will set the color of the letters as we draw them. Though the tubing appears to be a grey color, I suspect the actual light was, at one time, red.

Step 4: Select the Vector Path Tool

Click and hold on the Pen Tool. Select the Vector Path Tool from the pop down list. Selecting this tool allows you treat the pen as a brush.Though this tool is more suited to those of you using Pens and Tablets, this project lets those of us who draw with mice have some fun as well.

Step 5: Path Settings

In the Property Inspector set the Brush Width to 4 pixels and select the Soft Rounded brush from the Basic category in the Brush Type pop down menu. Set the Precision value to 2. Precision is how tightly the vectors are drawn. The higher the number (the Maximum Value being 10) the more vector nodes there will be in the line

Step 6: Start Tracing

Select the lettering layer and, using the tool, trace the letter “M”. When you finish there will be a new sublayer named Path. Double click the “Path” layer name and change it to “M”.

Step 7: Tweak the Path

If the path looks like it could use a “Tweak”, switch over to the subselection tool, the Hollow arrow in the Tools panel, and click on the shape. You'll see the vectors. Click on an anchor point to reveal the handles and make your “tweaks”. To remove a point select it with the subselection tool and press the Delete key. To change a corner point to a rounded point, switch over to the Pen tool and click on the point to add the missing handle.

Tip:

If you wind up with points that have no handles, select the Pen Tool and click/drag the point. Fireworks has a nasty habit of always wanting to close the path for you. Simply double-click the end point of the path to remove the line. To delete a point on the path, select it with the Subselect tool and press the delete key.

Step 8: Finish up the Words

Repeat steps 4 to 7 for the remaining letters in the sign.

Step 9: Save the File

When you've finished, select File > Save As. The Save dialog box will open. Name the file - I used “MusicHall” - and select FireworksPNG(*.png) from the pop down. This will give you a multilayer document with transparency for each layer. Click the Save button and quit Fireworks.

From Fireworks CS4 to Flash CS4

As I pointed out at the start of this tutorial, Fireworks CS4 tends to be regarded by designers as Photoshop’s “family member we prefer not to discuss”. As you are about to discover, maybe a bit more chatter about Fireworks CS4 may be called for. Let’s get started.

Step 10: New Document

Launch Flash CS4 and create a new, Flash ActionScript 3.0 document.

Step 11: Import the Fireworks CS4 Document

Select File > Import > Import to Library and navigate to the folder where you saved the .png image. Select the image and click the Import to Library Button. This will open the Import Fireworks Document dialog box. Why the Library? It's widely considered to be a best practice to import everything to the Library. In fact, anything imported to the Stage gets stuck in the Library anyway, so save yourself a step.

Step 12: The Import Dialog Box

When the Import Fireworks Document dialog box opens click OK. If you've never seen this dialog box before, let’s go through it.

If you click the Import as single flattened bitmap Check Box, you flatten the image and lose the layers containing the letters you carefully drew in Fireworks. Obviously ... not a good decision.
The next decision is which page to import. Fireworks allows you to create multipage documents and this pop down is where you would choose the page to import. In this case there is only the one page.
The Objects area lets you decide how the objects in the image - in this case the letters - will be brought into Flash. The letters are vectors and, regardless of your choice, they will arrive in Flash as fully editable vectors.
The final choice is how text in the image will be handled. I tend towards eep all text editable so, if there are any typos, I can fix them in Flash.

Step 13: Your Fireworks Object

Open the Flash Library and open Fireworks Objects > MusicHall.png > Page 1. Double-click the Page 1 movieclip to open it in the Symbol Editor.

When you look at the movieclip you'll discover why Fireworks CS4 can make your life easier. Each of the letters is on it own layer in the movieclip. The MusicHall.png Graphic Symbol in the Library is strictly a placeholder and we won’t be using it. If you click on each letter with Flash’s Subselection tool you'll see that each one is a vector-based Drawing Object meaning you can do further “tweaks” if necessary. What you don’t want to do is to delete the Bitmap 3 image in the Fireworks Objects folder. It's the one containing the background image.

Preparing the Lettering for the Neon Effect

The letters are important and they'll need to have a number of filters applied to them in order to create the effect. Also, the flickering will be controlled by ActionScript 3.0. This tells you that the letters, in their current form, won’t work. They must be contained in a movieclip because filters can only be applied to text or movieclips. Here’s how:

Step 14: Cut the Lettering Layers

Select the lettering layers, not the folder, in the Lettering folder on the timeline and cut them.

Step 15: Paste

Paste the letters on the clipboard into a new movieclip named Letters.

Step 16: New Layer

Return to the Page 1 movieclip, delete the Lettering layer, add a new layer and drag the Lettering movieclip to the new layer.

Click once on the movieclip on the stage and drag it into position. Use the arrow keys for finer control. (Image 13)

Step 17: Save

Save the file to the folder where you saved the imported image.

Adding the Neon Effect to the Movieclip

One thing I try to beat into the heads of my students is that "the art of Flash is the art of subtlety". Pay attention to how things work in the real world and you will see this in action. Creating a neon effect involves a lot more than simply slapping a glow on the letters. There is a bit more than that when it comes to creating a realistic effect. Let’s get started.

Step 18: Bevel Filter

Use the values shown in the Figure to add a Bevel Filter to the movieclip. This creates the base for the effect by giving the letters a 3D look and adding a bit of a highlight along the edges.

Step 19: Gradient Glow Filter

Use the values shown in the Figure to add a Gradient Glow filter to the movieclip.. By setting the Glow X and Glow Y values to 0, the neon tube becomes more defined.

Step 20: Glow Filter

Now use the values shown in the Figure to add a Glow Filter to the movieclip.. The previous two steps created the tubing, this step adds the light. Make sure the color of the glow - FFCC00 - match the color of the letters added in Fireworks.

Step 21: Drop Shadow Filter

One more filter; use the values shown in the Figure to add a Drop Shadow filter to the movieclip.. The color for the drop Shadow is not black but #CCCCCC. This gives the illusion of a bit of illumination - which explains the 2-pixel Blur values - behind the light.

Step 22: Instance Name

With the movieclip selected on the stage, give it the Instance name of "sign" in the Property Inspector. This now sets up the movieclip for the ActionScript that will control the flickering of the neon tubes.

Adding ActionScript to Create a Random Flickering Effect.

Creating the typical flicker of a neon sign is not something that can be done on the timeline. In this case, the glow will flicker in a manner that simulates a neon sign that is on its last legs. To add the flicker effect, follow these steps.

Step 23: New Layer

Add a new layer named actions to the movieclip’s timeline. Lock the the layer.

Step 24: Actions

Select the first frame in the actions layer and select Window > Actions or press the F9 (PC) or Option-F9 (Mac) keys to open the Script pane.

Step 25: ActionScript

Enter the following code:


import flash.filters.*;

addEventListener(Event.ENTER_FRAME, flickerIt);

function flickerIt(evt:Event):void{
  var filters:Array = sign.filters;
  var glow:GlowFilter = filters[2];
  glow.strength = Math.random()*.5 + .35;
  sign.filters = filters ;
  };

If you're new to ActionScript let’s step through this code block.

We know the Glow filter is the one used to to provide the flicker. To do this you must first load in the filters class. That * is called a wild card and tells Flash to load in the entire filters class. If you only wanted to use one filter you would use the filter’s name instead. In this case we have four filters in the movieclip so a wildcard is the best way to go.

The next line is how the flicker is happens. Let's clearly understand something: ActionScript is pretty stupid. It won’t do anything unless it hears something. In this case we're telling ActionScript to listen for an ENTER_FRAME event and when it hears that event to execute something called flickerIt. You can deduce from this the Flash movie is a frame loop and, when the playback head enters the frame after doing what needs to be done, it does it all over again.

The function is where the magic happens and the flickering is created.

The first line grabs the names of all of the filters that have been applied to the sign movieclip and puts them into a list. When ActionScript creates a list - called an Array - it doesn’t use the names of the filters. Instead it puts them in numeric order, the term is indexed order, following the order in which they were added. If you could see the list, the four filters would look like this : 0,1,2,3 not Bevel,GradientGlow,Glow,DropShadow.

The next line gives the GlowFilter the variable name of "glow" by telling ActionScript to go into the list and use the index item labelled 2 in that list.

Now that ActionScript knows what filter to use, we create the flicker by “playing” with the strength property of the GlowFilter.

The value for the strength property - Math.random()*.5 + .35- may strike you as being a bit mysterious. It really isn’t. The random() method of the Math class picks a number between 0 and 1. When that number is picked, it is divided in half and then increased by .35. This means every time the playhead enters the first frame the orange color will be a different strength. Let’s assume the number randomly picked is .95. The calculation would be:

.95 x .5 = .475
.475 + .35 = .825

The resulting glow would have a strength value of 83% if we were to enter the value directly into the filter. Every time the playhead enters the frame the brightness of the light will increase or decrease depending on that random number.

Step 26: Return to the Main Timeline

Close the Script pane and click the Scene 1 button to return to the main timeline.

Step 27: Place on Stage

Drag the Page 1 movielcip to the stage and select Modify > Document. When the Document Properties dialog box opens, click the Contents radio button. Now save and test the movie.

Bonus Round: Seal the Deal with Audio

Let’s make this whole thing a bit more realistic and add the hum of a neon sign in the background.

Step 28: Buzz.mp3

Copy the Buzz.mp3 file from the download to the same folder as the .fla.

Step 29: Actions

Open the page 1 movieclip, select the first frame in the actions layer and open the script pane.

Step 30: ActionScript

Click once after the first line of code, press the Return/Enter key and add the following code block:

1	var audio:Sound = new Sound();
2	var req:URLRequest = new URLRequest("Buzz.mp3");
3	audio.load(req);
4	audio.play();

Again, if you are new to ActionScript let’s step through this code block together.

It is a given within the Flash community that adding audio to the timeline is an “Evil Practice”. This means we need to call the audio file into the movie using ActionScript. The first line of code starts this process by creating a Sound Object named audio. This object will be used later to actually play the sound file.

Again, we know Flash is stupid so we need to tell it which audio file will be used. This is accomplished through the URLRequest object named req. The parameter is the name of the file we will be using. Make sure the quotes are there and that the name matches the file name precisely. If you are going somwhere else on your site to grab the audio file you would enter an absolute address for the file.

Now that Flash knows which file to play, it will just stand there looking at you with a stupid grin on its face unless you tell it to feed that audio file into the Flash player by using the load() method of the Sound class. Finally, you have to tell Flash to actually play the sound.

You may now Save and test the movie!

Conclusion:

In this tutorial you have explored the workflow between Fireworks CS4 and Flash CS4. You have discovered how to use a few of the drawing tools in Fireworks as well as how layering is accomplished in Fireworks. You have also imported a Fireworks .png document into Flash and learned that Fireworks .png documents add a movieclip into the Flash Library. You opened the Fireworks movieclip and, with a few filters and a dash of ActionScript, created a flashing neon sign with an accompanying neon buzz sound.

Thanks for reading along, feel free to leave comments and questions below :)