I couldn’t sleep last night so I thought I’d play with the new effects in Flex 4. With the ultimate intention of actually sleeping at some point I decided to try the AnimateColor effect first – my thinking was I could soothe myself to sleep with subtle colour changes over time.
I was surprised how quickly and easily I could achieve a colour changer and after playing with it for a while, it did indeed have the desired affect. So first thing this morning I thought I’d post up the tiny amount of code required to animate colors in Flex 4.
The animation has a duration of five seconds from the beginning of the transition to the end, and it will automatically set the rectangles colour based on the colour you pick from the “From Color” colour picker (As you can see when coding I fall in to the US spelling of colour – even on labels :p, but when blogging I revert back to my normal UK spelling)
OK, just noticed the View Source isn’t pathing correctly. So I’m just fixing it now
It’s crazy easy isn’t it? Now use that effect within your Spark skins between states!
:-)
Precisely, transitioning between states just got some much more fun :p
“Now use that effect within your Spark skins between states!”
All looks great until that transition is interrupted, and you need to go to another state or back to the previous one (i.e people rolling on and off, or clicking stuff), then the effect will just jump to the start and look real ugly. :(
@Tink, for sure, but then this example doesn’t have any logic to cater for that. I’m sure it can esily be managed within the transition with a bit of logic :p
Is the ColorPicker supposed to allow me to select swatches or just the input should work on it ? Selecting swatches doesn’t work in my current config: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.0.14) Gecko/2009082706 Firefox/3.0.14. Cute though, it reminds me of Color.interpolateColor in Flash CS3 :)
Very useful post! Thank you.