Subscribe to RSS
get email updates
home | about | pixDif AIR app | video tutorials
polyGeek.com

place your ad here

Web Premium



Get Qwest High Speed Internet



Changing the Flex ProgressBar from red -> green

October 15th, 2008 . by polygeek

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 );
}

If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.

Post to Twitter Post to Delicious Post to Facebook Post to Reddit Post to StumbleUpon


similar posts

4 Responses to “Changing the Flex ProgressBar from red -> green”


comment number 1 by: shaun

nice – but doesn’t it make more sense to go from red to green?

comment number 2 by: polygeek

@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.


[...] changing color Posted in Flex, Flex Examples by Priyanka Rane on October 6, 2009 The http://polygeek.com/813_flex_changing-the-flex-progressbar-from-red-green example shows the Progress Bar changing color as it gets closer to completion. This is really great [...]

comment number 4 by: Kalpesh

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.

   Welcome back (Change)

Leave a Reply

comment feed RSS   subscribe to this comment thread

Recent Posts

   



polyGeek.com

© Copyright 2008 polyGeek.com / Dan Florio, All Rights Reserved Except Where Explicitly Stated
Web Developement Blogs - Blog Catalog Blog Directory
M2 Websites
Local Directory for Los Angeles, CA

Better Tag Cloud