3
May
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:

  1. You can’t use databinding.
  2. You can’t easily create combinations of effects that apply to mulitple targets.
  3. Unless your effects fit naturally into the sequence/parallel framework, it can be hard to choreograph your effects.
  4. 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. :-)

8 Responses to “This is one way you can use data binding with effects.”

  1. ilya

    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

  2. Sho

    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?

  3. Greg

    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

  4. Sho

    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.

  5. Greg

    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.

  6. Sho

    Doh! It was there all along. You just need to right click to view source.

  7. Greg

    Doh, didn’t even think of right-clicking. Thanks again!!

  8. Greg

    And now, I notice that there is text in the panels that tell me to right-click to view the source. Ha!

Leave a Reply