In my previous Flash preloader tutorial I showed you how to develop preloaders for you applications and I explained its code to you. In this tutorial I will focus on the design part of the preloaders. I will show you how to make a good looking circular preloader so that you may understand how to put the code of the previous tutorial in the skin of a good looking preloader.
Lets start by creating a new Flash ActionScript 3.0 application. Create a new movieclip by pressing ctrl+F8. We will make the animation of the preloader in this movieclip.
The idea I have in mind to create an arc and turn it into a circle as the loading progresses. To do that, I use the oval primitive tool. You can select it from the toolbar.
Draw an oval and set its inner radius from the properties menu to some value other than 0 so that a hole is created in the center of the oval.
Now to give the animation effect, I make 36 frames on the timeline and on each frame I increment the "End angle" by 10. So from frame 0 to frame 36, the arc turns into circle.
The animation looks pretty good now but I want to make it better. So I copy the circle to the layer below it, resize it and change its color. The new configuration looks a bit like this.
The animation looks quite good now. Now you just need to follow the steps of the Flash preloader tutorial to add the actionscript code to this and the preloader is ready. If you are looking for something more basic, you can read my tutorial on how to create a flash website.
