Neon Glow Preloader in Flash CS3

Posted on March 26, 2009 in Flash Category

In this tutorial we will learn how to make an awesome preloader with neon glow effect in Flash CS3.

What we will do

Step 1 - Setting Up

Go to File - New (CTRL + N) and select Action Script 2.0 and click OK.

Some other things you might need:

- Align Window (CTRL + K)
- Use SHIFT + Arrows to move the object with 10 pixels on your stage.
- F9 - Action Script Panel


Step 2 - Let's get started

- Select Rectangle Tool and draw an object with 300 Width and 24 Height and align it to center.
- Be sure that your object is well fixed, this mean the object Y/X Axis should end with .0 (e.g: X = 124.0)


- Now double click on you object and press F8 - Convert to Symbol. Select Movie Clip and click OK.


Very Good! Now you have a Movie Clip named Symbol 1.

After this, double click your movie clip and click once on object (to select only the object background) select a white color for it and CUT it (CTRL + X).

On the layers panel create one more (Insert - Timeline - Layer) and rename it to "rectangle bg" and the first one "rectangle border".

In the "rectangle bg" layer PASTE in Place (CTR + SHIFT + V) the cutted background. You should have something like this:


Step 3 - Adding Animations and Effects

- Block and hide the "rectangle bg +border" layers (hide is near the left of the lock)


- Insert a new layer and draw a white rectangle with the 320 Width and 44 Height and white color.
(you can insert without a border, it's more easier and provides more quality)
- To set the same position, set the X/Y Axis to -10.
- Good now convert your object (F8) into a MovieClip

- Select your object and go to Filters - Blur with 80 X/Y at High Quality.


How to add the neon effect ?

- Convert your Blurred object again into a MovieClip and double click it.

- Insert first a Frame (F5) and then a new KeyFrame (F6) in the Timeline and set Alpha for the second frame to 70% like in image below:


- Now go back to  Symbol 1 and let make this loading.
- In the Timeline go to 100 and press F6 to all layers.


- Unlock the "rectangle bg" layer and select 1 Position on Layers then click the object and set his Width to 1.

- Right Click on the "rect bg" layer and  select Create Shape Tween and Press CTRL + ENTER to test the animation.


Step 4 - Coding and Finishing

Go to root of  timeline and insert a blank keyframe and Drag and Drop a big  image into the blank frame.
On the 2 Frames put stop(); in the Actions Panel (F9)
The same thnig you will do with your object. Click it and press F9 and put this code:

onClipEvent(load) {
	total = _root.getBytesTotal();

onClipEvent(enterFrame) {
	loaded = _root.getBytesLoaded();
	percent = int(loaded/total*100);

	if (loaded == total) {



Step 5 - Final Results and Download


Related Articles
  1. Daniel Nolan says:

    Clip events are permitted only for movie clip instances

    Clip events are permitted only for movie clip instances

    these are the errors I am getting but dont know why, I also didnt really understand the last stage, its a cool effect man but can you try to explain more for us thick people haha

    • As error is saying: “Clip events are permitted only for movie clip instances”. You have to create a movie clip in order to insert Action Script code. Press F8 and create a movie clip and read all the steps carefully.

  2. Chris Go says:

    How do you set the length and Width of shapes like when you add the Rectangle tool?? it makes this tut. pretty hard when you dont explain that and i havent seen it explained on any of the other tutorials either I mean there is no box just to type in width and height for shapes

    • You can set Width and Height of your Rectangle using Properties Panel (CTRL + F3) or go to Window – Properties – Properties(CTRL+F3). Your panel should appear on the bottom of your page.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

2 × = fourteen

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.