This time i wanted to make a nice progress bar for the preloader i've made. First of all, the usual check of Google. Plenty of hits, mostly for AS2 - a few for AS3 but nothing that takes my fancy. I did see a nice turning "barbershop pole" stripe bar, which i started out aiming for but before i'd written much code i figured a nice thing to do would be to simulate the nice glossy progress bars seen in windows vista. If it hasn't got anything else right, it has nice progress bars. Even though they still run on "microsoft time" and hardly give you a good indication of how long something is going to take, they do stand out and look the business.

    They have nice shadows and highlights, with a good gloss colour. It took me a little while to figure out how to "draw" them in AS3, but i think my final version looks pretty good (click on the picture to see it in action!)

It's drawn using a rounded rect, and a line rect, and a few gradient filled rectangles on top of eachother (with alphas). It's quiet small and fast and easy to re-use or change the colour of the bar. I'll be using this in my next blog which will be a simple preloader (with a fancy looking vista style progress loader bar). Hopefully it makes a change from the thin faded lines and the standard boring rectangles that mochiads use and looks nice while people are waiting for something to load! You could also use this to make glossy buttons by adding text - which would look nice for a change instead of the standard looking ones, and you don't have to pre draw them either. Remember that this is a bit slower when updating than if it was pre rendered in something like photoshop, but it's unlikely to slow anything down.

    One thing i fell over while making this class was a slow down the further it got. It had something todo with me forgetting to add a "graphics.clear" to the start of the Redraw() function. I guess it was piling up graphics, but i didn't realise that causes a slowdown - i thought you could just overwrite the previous graphics with the new ones and all would be fine, so i thought i was saying time by not calling clear and just drawing on top. I guess when i have sometime i'll look into that - unless someone already knows the answer (it's probably something really obvious - don't forget i'm still learning AS3 too!).

Get the ProgressBar.as or the FlashDevelop project. To use the progress bar, import the class

import com.adventuresinactionscript.ui.ProgressBar;

then create a progress bar with the following

            var progressBar:ProgressBar = new ProgressBar(x,y,width,height);
            addChild(progressBar);

and update it with

            progressBar.Update(progress);

Remember that you need to call Update() atleast once to draw the bar.