How to make your own Draggable Progress Bar in Flash

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.


Preview the final result


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.


DraggableProgressBar.as

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

public var trackSkin:MovieClip;
public var barSkin:MovieClip;
public var percent:int = 0;

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;
private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			trackSkin.width = 0;
			buttonMode = true;
			mouseChildren = false;

			addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);
		}

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.

private function onMouseDown(e:MouseEvent):void
{
	addEventListener(Event.ENTER_FRAME, stateBar);
}

private function onMouseUp(e:MouseEvent):void
{
	removeEventListener(Event.ENTER_FRAME, stateBar);
}

Let’s see how the stateBar function looks:

	trackSkin.width = Math.min(mouseX, barSkin.width);
	percent = (trackSkin.width / barSkin.width) * 100;
	dispatchEvent(new Event(Event.COMPLETE));

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 Main.as, and declare all MovieClips as public variables:

public var boxInfo:MovieClip;
public var progressBar:DraggableProgressBar;

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

boxInfo.x = progressBar.x;
boxInfo.txt.text = progressBar.percent;
progressBar.addEventListener(Event.COMPLETE, getValue);

Finally the getValue function will be:


	boxInfo.txt.text = progressBar.percent;
	boxInfo.x = Math.max(mouseX, Math.min(progressBar.x, progressBar.width));

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


Twitter Digg Delicious Stumbleupon Technorati Facebook

No comments yet... Be the first to leave a reply!