« Examples have been fixed | Main | Are RIAs an extension of the Web, the Desktop, or both? »
May 03, 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
Comments
Hi Sho,
Nice contribution. These things indeed make it easier to do effects. Funily I always found that making procedural animations in Flash somewhat easier then in Flex, IF using the excellent animation package by Alex Uhlmann...
cheers,
ilya
Posted by: ilya at May 8, 2005 02:29 AM
Thanks, Ilya!
BTW, according to a posting from Alex on flexcoders, you should be able to use his animation package within an MXML Script tag, if you ever find yourself in the situation where you need both.
Have you tried this? Is there something in Flex that makes it harder to use procedural animations than in Flash?
Posted by: Sho at May 9, 2005 10:27 AM
The link "found here" is to a swf file and I'm not finding any source code to these wrappers. It looks really nice though.
Thanks,
Greg
Posted by: Greg at November 3, 2005 09:30 AM
You're right. I'll try to fix that. In the meantime, if you're using the Flex Builder 2 alpha, you'll notice that some of this functionality is built right into the framework.
Posted by: Sho at November 3, 2005 09:38 AM
Oh how I wish I was, after MAX I can't wait to start working with Flex Builder 2 and AS 3, but we have 4 Flex projects that need to get done before we are anticipating version 2 coming out...so I'll have to wait. Thanks Sho.
Posted by: Greg at November 3, 2005 09:43 AM
Doh! It was there all along. You just need to right click to view source.
Posted by: Sho at November 3, 2005 09:49 AM
Doh, didn't even think of right-clicking. Thanks again!!
Posted by: Greg at November 3, 2005 09:57 AM
And now, I notice that there is text in the panels that tell me to right-click to view the source. Ha!
Posted by: Greg at November 3, 2005 09:59 AM