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
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.
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.
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).
Is time to open Flash and create a new document. After creating the document, in Properties Panel click on the wrench icon and set the size to 800x600, frame rate to 30 FPS and background color to a dark grey (the next one under black).
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%.
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)
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:
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.
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:
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.
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.
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:
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.
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.
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).
Go back to the main scene using the back button located under the document title tab.
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:
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:
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.