If you think about it, it is obvious why; the documentation and functionality regarding masks in general is quite explicit. You can only have one mask applied and active on a specific target any any one time. If you were to apply another mask the new mask is applied and the old one is deactivated. So with that in mind I started to play around with the masks and various resize and move effects to try and achieve what I wanted to do.

So while sitting on the train heading home one evening I came up with the following effects below. Obviously these are a variation on a theme, but they were what I was after. If you think they would be useful in a Flex project you are doing feel free to download them from my dev site

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.

After asking a few of my Adobe friends, Mike Potter came to the rescue and pointed me to this page (Note you need to have an Adobe ID and a valid Flex 3 serial number to order them). For the record this link is also on Flex.org but it’s a bit tricky to spot (about two thirds of the way down the page on the left).

If you wish to attend (which means you’ll need to be in or able to get to the UK), then head over to Academy Class’s site and register as places are limited. The blurb on the BYOL site reads as follows:

BRING YOUR OWN LAPTOP:
Adobe Flex Jumpstart

A FREE 1 day “hands on” training session for beginners, brought to you by Adobe and Academy Class.

This day long, hands on training will help you to get familiar with the basics of Adobe Flex 3.
Location
Central London

Cost
Free!

Class Size
20 Maximum
Agenda
Click here to view the agenda

Dates & Times

• 9:30am - 4:30pm, Thursday October 30th
• 9:30am - 4:30pm, Thursday November 13th
• 9:30am - 4:30pm, Monday December 8th

Course Prerequisites
General web development skills, MUST “bring your own laptop” pre-installed with Flex Builder 3. Download the trial for free from here.

So what are you waiting for? Head over to the Academy Class site and sign up.

That said this year at Flash on the Beach I did a session entitled “Things To Make And Do”. It was a talk about the Flex framework from the perspective of component development and how an understanding of how the component framework in Flex works will provide you with a good grasp of how the overall Flex framework flows.

So without further ado, here are the links to download my session notes and the example code used in the presentation. I’ve added some detail to the slide notes, (you’ll need to download the version with the notes - not the one below). That said I may record the session again via Screenflow so it is useful for everyone. I’ve also shared it via Adobe Share and embedded the slide deck below

Download Files

• Slide Deck (No notes)
• Slide Deck (Notes included)
• Session Example Skinning Files

No sooner had we arrived back in the UK then I was off to speak at Flash on the Beach - this conference just gets bigger and better each year. Details of my session and the slides, example files etc will be covered in a separate post so I’ll leave it there for the time being. The weather was great and it was enjoyable to meet up with so many old friends and make some new ones too.

After FotB I headed back and did the usual “empty your entire suitcase in the washer” trick and set about trying to reduce nearly a months worth of emails (it’s a lot :p). I had time to enjoy a restful weekend with my ‘new’ wife before heading off to The Future of Web Apps at the Excel Centre in London to do some product demonstration for Adobe on their stand. Unfortunately the hotel that had been booked was less that acceptable, their service was awful and they weren’t particulalry helpful even though the problems were their fault. It got resolved in the end but I certainly won’t be spending and time or money in any of their establishments ever again. There was one silver lining to take away the hotel issues, while I was at FoWA I received an email inviting me to become an Adobe Community Expert. So I can now proudly display the ACE badge on my blog - Sweet.