Neon Glow Preloader in Flash CS3
March 26, 2009 by: EDS![]()
In this tutorial we will learn how to make an awesome preloader with neon glow effect in Flash CS3.
What we do
Step 1 – Setting Up
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);
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}
Step 5 – Final Results and Download
Download .FLA + .SWF
You have reached the end of the post. You can try the similar posts below.
|
|
|
|
Comments (5 Comments)
5 Responses to “Neon Glow Preloader in Flash CS3”Add your Comment


































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.
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.