Flex Transitions and Effects – Part 1

One of the more interesting aspects of Flex development is the ease and flexibility in which you can add that extra level of polish that good interactive solutions are known for. I’m not referring to good creative, but to transitions and effects; in other words how the user gets from one screen or area to another within your application without it being a first in first out style interaction

This is one aspect of Flex development that places it above other rapid development solutions

For the uninitiated Effects like most things in Flex are usually declared in MXML (but as with everything else in the Flex framework they can be instantiated in ActionScript as well – see the more advanced examples below). The basic structure of an effect is as follows:

1

<mx:EffectName id="effectID" target="effectTarget" />

As you can see it is pretty much the same structure as any other MXML tag. The nice thing about effects is that you can string them together to form more complex visual displays. So for example if we wanted to have a panel grow in size and move once it was at the right size we can easily do this using a <mx:Sequence/> tag to wrap a <mx:Resize/> and a <mx:Move/> effect together we can simply do this as shown below. As you can see as it is wrapped within a Sequence block so that the Resize effect executes first; then once it has finished the Move effect is executed

1
2
3
4

<mx:Sequence id="resizeThenMove" target="{myPanel}">
	<mx:Resize widthTo="400" heightTo="400" />
	<mx:Move xTo="200" yTo="200" />
</mx:Sequence>

One thing to keep in mind is that if you set a duration within the <mx:Sequence/> tag the amount isn’t divided between the elements in encapsulates. So if you set the duration to 1000 (1 second) the <mx:Resize/> and <mx:Move/> effects in the previous example would run for 1 second not 500 milliseconds each.

If you want to combine your effects then you can simply replace the Sequence tag with a Parallel tag. This will execute any effects that it encapsulates simultaneously. Again, if you set the duration in the <mx:Parallel/> tag the combined effects will take the total time to complete.

1
2
3
4

<mx:Parallel id="resizeAndMove" target="{myPanel}">
	<mx:Resize widthTo="400" heightTo="400" />
	<mx:Move xTo="200" yTo="200" />
</mx:Parallel>

Now once you are happy with the basic effects and combining them you can start to create some interesting visual displays. The main thing to note is that if you just wanted to target a specific effect at a component of your choice you don’t have to create a new effect to do this. You can just provide your effects individual IDs and then apply any of them to any target you feel like. So if you update the effects inside the <mx:Parallel/> block with individual IDs you can then invoke any of the effects directly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<mx:Script>
	<![CDATA[
		private function targetEffectOnComponent(e:MouseEvent):void
		{
			moveEffect.target = e.currentTarget;
			moveEffect.play();
		}
	]]>
</mx:Script>
 
<mx:Parallel id="resizeAndMove" target="{myPanel}">
	<mx:Resize id="resizeEffect" widthTo="400" heightTo="400" />
	<mx:Move id="moveEffect" yTo="200" />
</mx:Parallel>
 
<mx:Panel id="myPanel" layout="vertical" horizontalAlign="center">
	<mx:Button id="myButton" label="Move ME" click="targetEffectOnComponent(event)" />
	<mx:Button id="myButton2" label="Resize my container" click="resizeAndMove.play()" />
</mx:Panel>

If you try out the example above you’ll see that if you click the second button, called “Resize my container” it not only resizes, but moves the Panel. However if you click the button called “Move ME” it accesses only the <mx:Move/> effect of the <mx:Parallel/> effect block.

That’s it for this part. Next time we’ll look at instantiating effects in ActionScript.