Flash Circular Progress Bar (With 2 Animations)

Posted on February 10, 2015 in Flash Category with Intermediate Difficulty

I was searching few days ago on Google for a flash circular progress bar, even animated gif, and the number of results was not as I expected. Some of them are looking good, but what if you want a custom circular loader on your website with a different background or color and a cool animation.

I also wrote a tutorial long time ago about how to create a circular preloader in Flash, which is pretty similar to this one.

For that, I will teach you how to create a flash circular progress bar with different animations. I will use a little Photoshop because Flash doesn't have Angle Gradient and is very hard to achieve the same effect, so I will just import the image in Flash.

Flash/Photoshop Version Used: CS6

Video Tutorial (Full HD)

Create the Faded Circular Loader in Photoshop

We will create the first type of the circular loader. His animation and rotation will be infinite. The other one, the flash circular progress bar will start and will end. Now open Photoshop and create a new document with 800x600 document size, and resolution to 72.

Holding SHIFT, to keep the same width and height, draw a circle with the Ellipse Tool (U). In the Layers Panel, find the ellipse layer, right click it and select Blending Options.

Ellipse Layer Blending Options

Now select Gradient Overlay, and inside the tab search for gradient Style (default is set to Linear) and set it to Angle. Now your circle is ready. We must save the file as .psd and import it in Flash.

Angle Gradient Overlay Photoshop

Short Note: If you want to make the gradient transparent, which is better to do that, you should adjust the opacity to your gradient points by clicking on the gradient color (near the Reverse checkbox).

Set Gradient Color And Opacity For Gradient Points

Flash Document Settings

Is time to open Flash and create a new document. After creating the document, in Properties Panel click on the wrench icon Flash Wrench Icon With Document Settings and set the size to 800x600, frame rate to 30 FPS and background color to a dark grey (the next one under black).

Flash Document Settings

Import PSD File to Flash Stage

Now go to File - Import - Import to Stage (or press CTRL + R) and import the .psd file with your ellipse. The object must be imported as bitmap, make sure to disable the white background and set the compression rate to 100%.

Import Photoshop File To Flash Stage

Create a Mask for your Circular Loader

In order to show just a portion of our entire circle, we will need another circle to mask the full one. In Timeline Panel, move Layer 1 above the Ellipse Layer (just drag and drop to move) so we can mask the ellipse.

Now block the Ellipse Layer, select Layer 1 and draw an Oval Primitive object. Set the size with almost the same one as the Ellipse Shape. In my case Ellipse has 320x320 and the new circle has 310x310. Make sure to center both objects right in the middle of the stage. If you can't find the Align Panel, go to Window - Align (or press CTRL+K)

Draw Oval Primitive, Set Size, Align Center and Move Layer

If everything is aligned in the center, click on the white circle and from the Properties Panel, in Oval Options set the inner radius to 80. Right click on Layer 1 and select Mask. You should see only the black circular loading bar with the same shape as the white circle. You should see this:

Circular Loading Bar In Flash

Animating the Circular Bar

To create the spinning animation for our circular bar, we must make the imported ellipse a Movie Clip. In this way you can apply animations, effects, colors etc. I will show you later how to change the color too, even if this is a imported bitmap image.

Hide Layer 1 and unlock Ellipse 1. If layers are locked you can't move or select elements inside that layer which is locked.

Lock And Hide Layers In Flash

Now right click on the black loader and select Convert to Symbol (or press F8). Make sure to select Type: Movie Clip and click OK.

To make the animation we must add a new keyframe to Ellipse Layer. So, in the Timeline Panel, select frame 30, right click on it and choose Insert Keyframe (or press F6). On the same frame, but on Layer 1, right click and select Insert Frame (or press F5). You should have something like this:

Insert Keyframe in Timeline

On Ellipse Layer, right click somewhere in the middle (like in the picture above) and select Create Classic Tween. The whole layer must be now purple, which means the animation will be automatic from frame 1 to frame 30. Now click on frame 1 from Ellipse Layer and, from the Properties Panel at Tweening Options, select Rotate CW.

If you go in menu to Control - Test Movie - Test (or press CTRL + ENTER) you will see the results in action, but before that we need to flip the gradient circle horizontally, because now the circle is spinning backwards.

So, select frame 30 from Ellipsis layer and double click the faded circle. Now select the bitmap image and go to Modify - Transform - Flip Horizontal.

Final Results

If you think the spinning speed is too fast you can add more frames, so the animation will take longer. I decided that is better to add more frame (instead of 30 will be to frame 45) so the animation will smoother. You can also change the color by adding some color filters. Check the results.

Flash Circular Progress Bar gif Animation

Download Files for Circular Loader

Create the Flash Circular Progress Bar with Mask

For the second animation, this time it will be progressive. That means we will have a circular mask which will be filled with a colored circle until the mask will be fully filled. You can create a new blank document and draw an oval primitive shape (in Layer 1) with Inner Radius 80, aligned in the center of the stage.

In another layer (Layer 2), copy the oval primitive shape, paste it in the same place and set a different color. Set the inner radius to 0, start angle to 90 and end angle to 270. Until now you should have this:

Flash Circular Progress Bar And Mask

To animate the flash circular progress bar we will rotate the black half circle to the right. The mask will help us to reveal the green circle. After the circle is rotated to the other half, we will need to copy it so the mask can stay permanent and make the green circle visible. Next, we will rotate the black half circle again 180 degrees to complete the animation. If you have trouble understanding this make sure to follow the video tutorial.

Right click on the half black circle and convert it to symbol movie clip (press F8). Great, now double click it to go inside the movie clip. Again here, convert the shape into a symbol movie clip, so we can rotate it.

To rotate this object we will need to set the guiding point to the middle right (by default is set on middle) so the rotation of the flash circular progress bar should move in the right direction. Click on the on the half circle and find the Free Transform Tool (press Q). You should now see a point in the middle, drag him to the middle right.

Flash Free Transform Tool Centering Movement Point To Right

Insert a new keyframe to frame 25 and frame 50 and right click in the middle of them and select Create Classic Tween. Click on frame 1 and select Tweening Rotation to CW, with value 0, click on the half circle and with the Free Trasnform Tool (Q) rotate it 180 degrees by holding SHIFT . Do the same settings for frame 25 too and on frame 50 rotate the circle one more time to 180 degrees to return back his position. Check the animated gif below and watch carefully.

Adding the Second Mask to Flash Circular Progress Bar to Fill Entire Shape

Now we are inside the half circle symbol where we must insert a new layer which will contain the other half (the right one) from frame 25. This will be static without any animations. Check the sample animated gif below. Click to open in a new window (it has 1 MB so needs some time to load).

View Animated Gif

Go back to the main scene using the back button located under the document title tab.

Return to Scene Buttons in Flash

Now is time to mask Layer 2 from main scene, which contains the black half circle. Make sure to expand frames until frame 50, same like the animation in the black circle so they can sync together. Also in the main scene, first 25 frames should contain only a half green circle and from 25 to 50 should be visible the whole circle, like in the picture below:

First Circular Progress Bar Half Second Full

Final Results

Our flash circular progress bar is ready. Give it a try and hit CTRL+ENTER to test the animation. In the end you should have something like this:

Flash Circular Progress Bar Final


You can create a total different flash circular progress bar, with different colors and animations. If is hard for you to understand my explanation above, try the video tutorial. There is explained better and visually step by step, plus there are few other animation examples. If you have any questions let me know. You can find source files below.

Download Files

Related Articles
  1. Anya says:

    Thank you very much, I tried to find an explanation of how to smoothly animate a circle line (my second day playing around with Animate CC) and got here, and very happy.

  2. Kim Veranga says:

    Will Photoshop 2 work on the “Photoshop” part? Thank you for the response in advance.

  3. Ronald says:

    How do you export this as an animated GIF? I find that all the masking and movie clips don’t export well as animated GIF. The masking effect disappears.

    • Hello Ronald,

      The masking effect should work. I already exported myself one example at the end of tutorial. All that I know is that Flash will not export gradient faded colors added to your shape. Just test different masking effects and render the gif again to see if it works.

  4. Alvn says:

    It is really a great tutorial, with every step clear and understandable. Keep up the great work!

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

four − 3 =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.