«
»
 
3
May
2005

This is one way you can use data binding with effects.

flex

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. :-)

comment feed | digg this | del.icio.us

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

  1. ilya (May 8th, 2005 at 2:29 am)

    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 (May 9th, 2005 at 10:27 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?

  3. Greg (November 3rd, 2005 at 9:30 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

  4. Sho (November 3rd, 2005 at 9:38 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.

  5. Greg (November 3rd, 2005 at 9:43 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.

  6. Sho (November 3rd, 2005 at 9:49 am)

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

  7. Greg (November 3rd, 2005 at 9:57 am)

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

  8. Greg (November 3rd, 2005 at 9:59 am)

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

  9. bus scam thailand (April 22nd, 2019 at 12:00 am)

    paper scam in thailand thailand tinder scam thai treks scam thailand tinder scam
    bus scam thailand https://siam-shipping.com/

Leave a Reply