progress bar for loading external image

[Aliya99]

i am loading external images onto my website using this code:

imgbtn1.onRelease = function() {
infoField._visible = true;
startLoading("images/image1.gif");
};
imgbtn2.onRelease = function() {
infoField._visible = true;
startLoading("picture2.jpg");
};
imgbtn3.onRelease = function() {
infoField._visible = true;
startLoading("picture3.jpg");
};
function startLoading(whichImage) {
loadMovie(whichImage, "imageLoader");
_root.onEnterFrame = function() {
infoLoaded = imageLoader.getBytesLoaded();
infoTotal = imageLoader.getBytesTotal();
percentage = Math.floor(infoLoaded/infoTotal*100);
infoField.text = percentage+"%";
if (percentage>=100) {
delete this.onEnterFrame;
infoField._visible = false;
}
};
}

i would like to have a progress bar instead of the percentages show when the image is loading.

can someone please tweak the code for me and give me a basic tutorial on how i can do this? i'd really appreciate it.

thanks.