« Examples have been fixed | Main | Are RIAs an extension of the Web, the Desktop, or both? »
May 3, 2005
This is one way you can use data binding with effects.
As I was putting the effects for this application together, I found it easier to build a small wrapper class around the effects infrastructure to address the following issues:
- You can't use databinding.
- You can't easily create combinations of effects that apply to mulitple targets.
- Unless your effects fit naturally into the sequence/parallel framework, it can be hard to choreograph your effects.
- It's hard to tell when a complex set of effects ends, because the effectEnd event is sent from the target, not from the effect.
These are all things we are looking into changing for 2.0, but you can address these issues now, with 1.5, using the following wrapper classes.
Timeline - allows you to choreograph transitions that refer to multiple targets and start at arbitrary times.
Transition - a wrapper for effects that is a true faceless component. This allows it to participate in data binding. In addition, it has a start delay that makes it easier to sequence your effects.
Use Timelines and transitions as follows:
<local:Timeline id="timeline1">
<local:transitions>
<mx:Array>
<local:MoveTransition
target="{panel1}"
start="0"
duration="500"
xTo="200"
yTo="300" />
<local:ResizeTransition
target="{panel2}"
start="200"
duration="500"
widthTo="{panel1.width}"
heightTo="{panel1.height}" />
</mx:Array>
</local:transitions>
</local:Timeline>
<mx:Button label="click me" click="timeline1.playTimeline();" />
An example can be found here, along with source code.
I've included wrappers for MoveEffect and ResizeEffect. The rest are left as exercises for the reader. :-)
Posted by sho at May 3, 2005 10:31 AM