Create Preloader with Circular Animations in Flash

Posted on September 29, 2009 by Dan Doicaru in Flash Category

In this tutorial we will learn how to create a flash preloader with some great circular animations with different colors using the glow filter. We will be using Flash CS3.

Update (February 10th 2015): You can also check a newer tutorial about circular animation in Flash here. There are explained 2 animations, one progressive and one with infinite loop (plus one bonus in the video. Check it out.

Difficulty: Hard

Create a Preloader with Circular Animations in Flash

Creating the Base Circle

Create a New File with Action Script 2.0 and go to Modify - Document (CTRL + J) and do the settings below:

step1

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!

step1b

Adding Circular Animations

Now we must add the circular animation effect. With the Oval Primitive Tool (O) draw a circle with width and height 2, the color #99FF00 and convert it to a Movie Clip by pressing F8.

From the Filter Panel, add Blur Effect with 12 X and 12 Y in High Quality.

step2

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.

step2b

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.

step2c

Making the Circular Preloader Work

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:

step3

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.

step3b

Now select the big circle from the root 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 & Share
1 Star2 Stars3 Stars4 Stars5 Stars (16 votes, average: 4.13 out of 5)
Related Articles
Comments
  1. Gravatar Icon Shabnum Amin Khan:

    Can you teach us this tutorial in action script 3.0?

    • Sorry, but we don’t do tutorials in Action Script 3. Just a quick tip, this tutorial is based on animation , so the big difference is only the code.

  2. Gravatar Icon Fidelito Akiatan:

    what layer should i put these code?

    onClipEvent(load) {
    total = _root.getBytesTotal();
    }
    onClipEvent (enterFrame) {
    loaded = _root.getBytesLoaded();
    percent = int(loaded/total*100);
    gotoAndStop(percent);
    if (loaded == total) {
    _root.gotoAndPlay(2);
    }
    }

  3. Gravatar Icon Anil:

    Thank you I was looking foe such PRELOADER… excellent work..!

  4. Gravatar Icon Kaushal:

    Just you are the best brother…. Just have no words…. Working great… No errors …. Just Fantastic …. Nice Work…!!!! Good Luck Bro..

  5. Gravatar Icon Ed:

    Have a small problem

    screen does not clear
    the bar goes down instead of up and I get a message;
    type erro: error #1009Cannot access a property or method of a null object reference.
    at Opener_FLA:: Maintimeline/progresHandler()

    Thanks
    Ed

  6. Gravatar Icon Ed:

    Fab….Just likes site no bull just plain old here it is
    love the site and think you guys are the best !!!!!!!!!!!!!!!!!!!!!
    Thank you Sicerely

  7. Gravatar Icon Shinichi:

    good day sir!
    im trying to use this preloader but when im already on the last part. after selecting the big circle and trying to put the scripts on it, it says, “current actions cannot be applied to it.’ what should i do sir? please help. thanks!

    • Hello Sinichi,

      This error appears because you selected the Action Script 3, or you selected a shape and you cannot apply any script to it. Make sure that your circle is a Movie Clip in order to apply that script after.

  8. Hello
    Every One

    I am Facing A Problem With This Tutorial So Please Some One Can Provide Me A Video Of This Tutorial Step By Step…..

    Please Requesting You All

  9. Gravatar Icon papi:

    the same question with ed : wyh do you convert a symbol twice? i don’t get it. Thanks

  10. Gravatar Icon P:

    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!

  11. Gravatar Icon snehal:

    when i test the movie it is directly showing 2 nd frame not showing the loader.why?

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

  13. Gravatar Icon Maureen:

    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.

  14. Gravatar Icon Maureen:

    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.

  15. Gravatar Icon Maureen:

    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.

  16. Gravatar Icon vinay:

    best animation

  17. Gravatar Icon ed:

    Why do you convert the circle into a movie clip twice??

  18. Gravatar Icon KaMo2x:

    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.

  19. Gravatar Icon Tirath:

    You make GREAT tutorials.
    Awesome job
    You make everything look easy.
    keep up good work man
    God Bless you

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


9 + = 16

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.