Create AS3 Draggable Progress Bar


If you don’t know how to create your own Draggable Progress Bar in Flash, then this is the right place. First of all, the usability of this progress bar can be multiple, even if we speak about loading, scrollbars, seeking, volume or chart bars. Another advantage when you use your own progress bar, instead of the component already developed in Flash, is that your file size will be very small.

Setting the files

In Flash, create a new ActionScript 3.0 file, with 590x300px dimmensions and save the file as progressBar. Our Progress Bar will contain 2 MovieClips – bar skin (the one that you see behind) and track skin (the one that is draggable); Create them as in the attached image, then make them as a new MovieClip, called percentBar.

While dragging, you want to display somewhere the progress and then to use that value to scroll or doing something. To do this we need to create an info box, where the percent will be. Basically what you need to do, is to create on Stage a new MovieClip with instance name boxInfo, and inside of this to add a dynamic TextField, called txt.

Create a new ActionScript 3.0 class file, called, and declare all MovieClips from progress bar as public variables:

As you observe there is a percent variable also, that will store a value when the MovieClip trackSkin is dragged. In the init function we:

  • set the progress bar as buttonMode;
  • make the trackSkin’s width to be 0;
  • add listeners when Mouse is DOWN or UP;

When Mouse is DOWN we add an EnterFrame listener, so we’ll know what size will have the MovieClip trackSkin after dragging, according to Mouse position on X; and when Mouse is UP we remove the EventListener.

Let’s see how the stateBar function looks:

First line increase or decrease the trackSkin’s width according to mouseX, but no higher then his max width; second line is the difference between the new scale after dragging and the max scale multiplied with 100, in order to get a value from 0 to 100; third line is a dispatcher to the Main class, to know that the percent is changed.

Main Class

Create a new ActionScript 3.0 class file, called, and declare all MovieClips as public variables:

Then we align the boxInfo with the progressBar on X position, and add a listener to read the new percent when progressBar is dragged:

Finally the getValue function will be:

Save this, recompile and see if everything is ok. If the progressBar is ready, it’s easy to create scrollbar, a seeking bar, a volume or a chart bar also. Let me know what do you think…

1 Comment

1 Comment

  1. ricks

    October 23, 2011 at 6:57 am

    Looking for a long time for this type of article. I already created a progress bar but not working properly. But after this, its working fine.
    Thanks to you.

Leave a Reply

Your email address will not be published. Required fields are marked *

To Top

Get More Stuff Like This

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part