How to create a Preloader with Circular Animation
In this tutorial we will learn how to create a flash preloader with a great circular animations using the glow filter with different colors. Advanced User Level
Step 1
Create a New File with Action Script 2.0 and go to Modify – Document (CTRL + J) and do the settings below:
With the Oval Primitive Tool (O) draw a circle with 100 Width and 100 Height with the color #222222 and the line color #333333 with Inner Radius 90. Align it to center using Align Panel (CTRL + K).
Select your circle, right click and choose “Convert to Symbol” or simply press F8 (select Movie Clip and click OK).
One more time select your circle, right click and choose “Convert to Symbol” .
Double click you circle movie clip and inside, create a new layer named “circular_animation” and rename the old layer “circle” and block it!
Step 2
Now we must add the circular animation effect.
With the Oval Primitive Tool (O) draw a circle with 20 Width and 20 Height with the color #99FF00 and Convert it to Movie Clip by pressing F8.
From the Filter Panel, add Blur Effect with 12 X and 12 Y in High Quality.
With the Free Transform Tool (Q) select the little circle from the center of your green circle and move it in the center of the big grey circle! Press F8 and convert the green circle again into a movie clip.
Double click the green object and Insert a New Keyframe to Frame 60 – click on Frame 60 and press F6 or right click and select Insert Keyframe.
Right Click on the Frame 1 and select Create Motion Tween.
Step 3
Go to Main Scene and double click the big circle and insert a new layer and rename it to “text”.
With the Text Tool (T) add a text “Loading” in the center of the big circle, select it and convert it to a movie clip, twice and see the image below:
In the end go to main scene and insert a Keyframe on Frame 2 and for both frames, 1 and 2, press F9 for each one and add the stop(); action script code. In the frame 2 delete all objects and insert a text “Content Loaded” and import a big image to load some megabytes.
Now select the big circle from the frame 1 and press F9 to open the Action Script Panel and write the following code:
onClipEvent(load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}
To add more circular effects with different colors duplicate symbols and simply change their base colors and for a great result try to modify their position or rotation.
Final Results
Download Files
Rate this Post   (6 votes, average: 3.83 out of 5)
|
|
You have reached the end of the post. You can try the similar posts below.
|
|
|
|
Comments (20 Comments)
20 Responses to “How to create a Preloader with Circular Animation”Add your Comment
You make GREAT tutorials.
Awesome job
You make everything look easy.
keep up good work man
God Bless you
Thank you Tirath.
this doesnt work!!! I have tried it MANY times in the past week and not once has it worked and I have redone it word for word using pictures ….EVERYTHING it dont work…..Whenever i convert the small circle to a movie clip the centre point jumps to somewer random on the page…… using the blur effect at high and 12×12 then it goes transparent… and when it rotates it spins off in a weird direction
This is because you don’t follow all the steps correctly. If you want you can fill the contact form and link to your file to verify and to tell you where do you have mistakes.
Why do you convert the circle into a movie clip twice??
Press F8 and convert it once, and press F8 again to convert it twice. Very simple.
best animation
Hi there, I have gotten to the last part of th tutorial but when I view it. Only the loading text starts flashing but not at the same rhythm shown in the sample. Mine goes faster; more like blinking.
Please help me fix it.
Hello Maureen. Your loading text is blinking more faster because:
1) Frame rate is set higher than in the tutorial
2) You added a small number of frames in your animation and this means your animation goes faster
Hope this helps.
Hi there, Thank you I just tried it again and it did not work. I must be forgetting something.
But I see you got to symbol 8 when I counted how many in the tutorial and I only got 6.
So maybe that’s the problem?
I really want to complete this tutorial ahhh!
Yes, your project is incomplete and you have errors. Try to reread the tutorial and if you still have problems send your flash file to the e-mail from the contact page. Thank you.
Thank you for the support, but this seem impossible to me. This is the 20th time I have tried and it tuns out different everytime I think I might just be a noob.
I have also tried t download the fla.file below to compare what I was doing wrong and that zip file is corrupted as well.
Hello Suvarna. Same as Maureen, your loading text is blinking more faster because:
1) Frame rate is set higher than in the tutorial
2) You added a small number of frames in your animation and this means your animation goes faster
Hope this helps.
when i test the movie it is directly showing 2 nd frame not showing the loader.why?
This is because you have the preloader code in the first frame. When all the bytes are loaded it will go to the frame 2.
at the end, when we’re supposed to insert a keyframe on frame 2, which layer do we insert it in? i don’t seem to be able to get it. especially when i delete everything on frame 2 to add the text content uploaded.
and is this tutorial for flash CS4? will it make any difference?
thank you!
This tutorial was created with Flash CS3. And yes is a big difference between them. Flash CS4 is different from CS3 and I don’t know if I will help you, but I will try!
the same question with ed : wyh do you convert a symbol twice? i don’t get it. Thanks