Lets put a little pizazz in the Flex download ProgressBar. Really, going from, say, 0 -> 100 is great and all but maybe you need more. Like how about changing colors as it gets closer to completion?
| view source |
Now that’s more like it.
The meat and potatoes of this is in the following two methods:
private function onSlider():void {
progressBar.setProgress( slider.value, 100 );
// this will fade from 0 = green, to 100 = red
_barColor = rgbToHex( 0xFF * ( slider.value / 100 ), // this is the red part
0x00FF * ( ( 100 - slider.value ) / 100 ), // green
0 ); // no blue for you!
}
private function rgbToHex( R:uint, G:uint, B:uint ):uint {
return( R << 16 | G << 8 | B );
}
nice – but doesn’t it make more sense to go from red to green?
@shaun, that depends. Maybe your measuring the progress of something bad, like how close Sara Palin is to being president. :-)
But, yeah, in general red->green makes more since. Just swap the first to parameters to the rgbToHex method.
Great Efforts,
I really appreciate your good work.
But I want some thing different, Can you help me to implement the progress bar having starting color as green. As it complete the 80% process then color change from green to red. In this case I do not want to show both colors 80% green color and 20% red.
Please do some needfuls for me.
Thanks in Adv.
In Flex 4 can you please provide an example to dynamically change the color of Progress bar.
Not in compatibility mode.
Can you please help
@Timmy, I’ll put it on the list but it’s a long list. :-)
It should be very easy to do in Flex 4. Just create a custom skin and change the color. If you need to see how to change the color dynamically then follow the process I used here.