How do I make a Progress bar (levelup bar) in flash cs6 - actionscript-3

Question

I`m trying to build a simple game where you will view a map with 5 clickable objects.
When you click these objects you can navigate trough some pages and upon clicking the last button it returns to the map itself. Now everything is working as it should. Upon clicking this specific last button It has the following code.
jamenext2.addEventListener(MouseEvent.MOUSE_DOWN, gotomap2);
function gotomap2(event:MouseEvent):void {
gotoAndPlay("map2");
}
What I would like to have now is to have a bar on the Map itself, and when you have reached the button that has the above code attached, the bar increments by 20%, and so the same for the 4 other clickable buttons on the map. Upon 100% completion I would like it to play the next animation further on in the timeline.
I have tried the following, but I am not that good in writing code, and I`m not very sure where to place it exactly.
var total1 = 100;
_root.loaded1 = 0;
while(true) {
this.scaleX = _root.loaded1/total1;
}
_root.loaded1 = _root.loaded1 + 20;
gotoAndPlay("map2");
I have no idea on how to do this.

Answer 1

What your going to want to do is create a square or bitmap class for the progress bar. From there, create a square with a MouseEvent.MOUSE_DOWN for the buttons.
There is different ways of doing this. Judging from your sample code your using the timeline for scenes so you might want to put a button in there to scale in each scene.
You could size it at twenty percent and make it fully transparent and become viable on the first click. Then increment by twenty percent until a hundred percent visible. You could then also have another button that would roll back a page.
Mostly pseudo code but something like this:
(Example Reference link: http://www.actionscript.org/resources/articles/792/1/Drawing-Shapes-with-AS3/Page1.html )
import flash.display.Shape;
private var square:Shape;
main_method
{
square = new Shape();
//draw shape
square.graphics.beginFill(0x1111FF, 1);
square.graphics.drawRect(30, 30, 200, 200);
square.graphics.endFill();
square.alpha = .5;
addChild(square);
}
//somewhere in a MouseEvent.MOUSE_DOWN class
{
gotoAndPlay("map1");
}
}
It's also possible rather than creating a square in code to create a symbol instance name on the stage and and in the properties tab give it a name and reference it in code.