Reversable Rollover Effects
Flex developers and authors might be familiar with a UIComponent’s rollOverEffect and rollOutEffect effects. These provide a means of causing an Effect to be played when the mouse cursor enters and/or leaves the region of the UIComponent. GlowEffect and ZoomEffect in particular make good rollover effects, straight out of the box. This feature is very easy to use, but there are some problems in getting the Effects to behave correctly, and so I did a bit of digging. The problems lie in the area of handling interrupted Effects. If the mouse moves into the affected region, then out again before the rollover Effect finishes playing, the desired behavior is to rewind the Effect back to the beginning. This exact behavior is devilishly tricky to achieve using rollOverEffect/rollOutEffect. Half of the problem is picking up where the interrupted Effect left off. Some types of Effect allow you to omit the starting state, and by default, pick up wherever the component is currently. But others, including GlowEffect, don’t. The other half of the problem is duration. If the interrupted Effect plays for 0.24 seconds before being interrupted, then the follow-on Effect should play for the same duration. But without a lot of fiddling, the follow-on Effect plays for its full duration. These little hitches are ultimately solvable, but not without exiting the realm of “easy to use” and entering the hardcore Flex zone. And so I looked for alternatives.
Effects may be reversed. By calling Effect.reverse() (or EffectInstance.reverse()), an Effect can be made to reverse direction on the spot and play all the way back to the beginning. You can reverse an Effect playing in reverse to make it go forward again. You can even start an Effect from the end and play it in reverse. This is exactly what I was looking for. Unfortunately, there is no way to specify in MXML that you wish the rollOutEffect of a UIComponent to be the reverse of its rollOverEffect. And there were some knots to untangle in getting this approach to work nicely. The results, for general consumption, are at the URL below. Source code is included.
April 18th, 2008 at 2:39 pm
I’d consider making a subclass of effect that contained the desired effect within it. Then this new wrapper effect could be used to assign the forward and back effects for the desired component. That way you can use the standard MXML effect assignment language but internally call reverse on the wrapped effect. The effect wrapper than just passes through things like the target that are normally directly assigned.
May 1st, 2008 at 12:41 pm
So that the MXML would look something like this? (Braces omitted to play nice with Wordpress editor)
mx:Image … rollOverEffect=”{glow.forward}” rollOutEffect=”{glow.reverse}”/
mylib:ReverseableEffect id=”glow”
mylib:forward
mx:Glow duration=”500″ …
/mylib:forward
/mylib:ReverseableEffect
An intriguing idea. Seems doable. I would pursue it, except that our colleague Tim Walling has since started developing a simple MXML API to Allurent’s goal-based animation effects. The goal-based approach is far more general and flexible than using the duration-based Flex built-in effects. I hope that with help from our friends at Adobe, we’ll be able to share it with the world someday.