Adobe Installer Progress Bar

I am not really sure why I like it but the visual design of the Adobe installer for the Flash Player just looks amazing. Personally, the colours are just right, great attention has been given to borders, and the form is striking. Most of all, the progress bar is something to die for. It is sleek, visually strong and gets the job done with a minimum of animation. This is the screen I am talking about:

Right, I have been challenged. I want to be able to have a progress bar like this one in my portfolio. So, how did I go about doing it? Just read on to find out.

Getting the colour scheme

I pulled out my faithful graphics editor Paint Shop Pro X and go to work on the snapshot made of the above installer screen with SnagIt. Firstly, I isolated the primary colours used

The next area I concentrated on was the gradients used for both the progress bar as well as the button. For the progress bar I isolated three distinct gradients; firstly, the inner border the fades from top to bottom. Secondly, the top gradient of the main body of the progress bar, and finally the bottom gradient. The latter two will be combined into one gradient within Expression Blend as described below. The button has colours and gradients as follows:

From this “analysis” I ended up with the following colour chart for the complete dialog.

The Colour Chart

 

(Re)Styling the Progress Bar

The simplest thing to do with the Progress Bar is to edit a copy of the current style in Blend. Once in the editor the new style must be given an outside border as well as an inner gradient for the unfilled are of the progress bar. The progress bar itself has its own gradient applied. These gradient are either given as the style properties or they are statically referenced from the Colurs.xaml resource.

(Re)Styling the Button

The button has a number of states associated with its operation. MouseOver, Selected, Disabled and Focussed have been adjusted such that they behave in the same way as the Adobe button does, however there may be some slight differences in operation. The major change is the focus blue border that appears around the button. This was achieved using a negative margin for two XAML border elements that encapsulated the buttonand had their border sizes set to one and single colour to each hence giving the feeling that the is a gradient in use. Note that he content holder has a drop shadow applied to the contents thus hinting floating text effect.

Conclusion

As this project is a learning one I do not expect to exactly mimic the Adobe controls – it is left as an exercise to the reader to make the final adjustments here 🙂 . The only thing that is left is to place the original with my mockup side to side

 

 

By the way, all of this was achieved without a single line of program code! As usual the code for the colours can be found here, the styles here, and the main window code here.

That’s all Folks…

Advertisements

~ by Intelligence4 on October 20, 2011.

 
%d bloggers like this: