Category Archives: Flash Builder

Transitions from Flash Catalyst to Flash Builder

Posted on by
Often, as a developer, there is a strong tendency to hand craft a work of art in terms of transitions in Flash Builder and that’s cool. But if you’re under tight timescales and a designer has already put his own (hopefully better looking) work of art together you need to take that and transfer it to Flash Builder. Of course this is exactly what Catalyst is designed for and is probably the first real attempt by Adobe to smooth out the process between designer and developer. It could be better (e.g. the fact that round-trip development is not possible in reverse) but it’s a start. Anyway, the point of this blog is to suggest (dare I say it), that given the opportunity, as a developer you sneak in the designers toolbox and use it yourself.

So here I’m going to explain how to use Catalyst to create a simple animation (in this case a rotating door effect), export the code and re-factor it for your own needs (as a developer). Essentially using Catalyst as a springboard into creating a nice set of transitions and then fine-tuning them to your requirements.

flash catalyst fxp here

flash builder fxp here

completed example here

In Catalyst

1. Open catalyst, create a new project (or download and open the one above)

2. Create an additional state to the project and name them ‘front’ and ‘back’ accordingly.

3. Whilst the front state is active, add a label with Front on it. Similarly, while the back state is active add a label with back on it.

4. With the front -> back transition selected, add a 3d rotation to the front label with a y angle from 0 to 90 and duration of 500msecs. Then slide the fadeOut for the front label to just beyond the 3d rotation. Then add a 3d rotation for the back label with a y angle from -90 to 0. Move the fadeIn for the back label so that it’s level with the fadeOut of the front label. The final set of transitions should look like this.



5. Press play and you should see the front rotate and back appear behind it.

6. Now do the same for the back -> front transition. This time making sure you add a 3d rotate to the back label with a y angle of 0 to 90 and a 3d rotation to the front label with a y angle of -90 to 0. Move the fadeOut of the back label and fadeIn of the front label to 500msecs in.

7. play again and you should see back rotate round to front.

8. Save your project (mine was called flippy.fxp).

In Flash Builder

1. Open flash builder and import the fxp project you just created from Catalyst.

Notice the transition MXML created by Catalyst

<br />
	&lt;s:transitions&gt;</p>
<p>		&lt;s:Transition fromState=&quot;front&quot; toState=&quot;back&quot; autoReverse=&quot;true&quot;&gt;<br />
			&lt;s:Parallel&gt;<br />
				&lt;s:Parallel target=&quot;{richtext1}&quot;&gt;<br />
					&lt;s:Fade duration=&quot;0&quot; startDelay=&quot;500&quot;/&gt;<br />
					&lt;s:Rotate3D angleXFrom=&quot;0&quot; angleXTo=&quot;0&quot; angleZFrom=&quot;0&quot; autoCenterTransform=&quot;true&quot; angleYTo=&quot;90&quot; angleYFrom=&quot;0&quot; angleZTo=&quot;0&quot; d:noAutoDelete=&quot;true&quot;/&gt;<br />
				&lt;/s:Parallel&gt;<br />
				&lt;s:Parallel target=&quot;{richtext0}&quot;&gt;<br />
					&lt;s:Fade duration=&quot;0&quot; startDelay=&quot;500&quot;/&gt;<br />
					&lt;s:Rotate3D angleXFrom=&quot;0&quot; angleXTo=&quot;0&quot; angleZFrom=&quot;0&quot; autoCenterTransform=&quot;true&quot; angleYTo=&quot;0&quot; angleYFrom=&quot;-90&quot; angleZTo=&quot;0&quot; d:noAutoDelete=&quot;true&quot; startDelay=&quot;500&quot;/&gt;<br />
				&lt;/s:Parallel&gt;<br />
			&lt;/s:Parallel&gt;<br />
		&lt;/s:Transition&gt;</p>
<p>		&lt;s:Transition fromState=&quot;back&quot; toState=&quot;front&quot; autoReverse=&quot;true&quot;&gt;<br />
			&lt;s:Parallel&gt;<br />
				&lt;s:Parallel target=&quot;{richtext1}&quot;&gt;<br />
					&lt;s:Fade duration=&quot;0&quot; startDelay=&quot;500&quot;/&gt;<br />
					&lt;s:Rotate3D angleXFrom=&quot;0&quot; angleXTo=&quot;0&quot; angleZFrom=&quot;0&quot; autoCenterTransform=&quot;true&quot; angleYTo=&quot;0&quot; angleYFrom=&quot;-90&quot; angleZTo=&quot;0&quot; d:noAutoDelete=&quot;true&quot; startDelay=&quot;500&quot;/&gt;<br />
				&lt;/s:Parallel&gt;<br />
				&lt;s:Parallel target=&quot;{richtext0}&quot;&gt;<br />
					&lt;s:Fade duration=&quot;0&quot; startDelay=&quot;500&quot;/&gt;<br />
					&lt;s:Rotate3D angleXFrom=&quot;0&quot; angleXTo=&quot;0&quot; angleZFrom=&quot;0&quot; autoCenterTransform=&quot;true&quot; angleYTo=&quot;90&quot; angleYFrom=&quot;0&quot; angleZTo=&quot;0&quot; d:noAutoDelete=&quot;true&quot;/&gt;<br />
				&lt;/s:Parallel&gt;<br />
			&lt;/s:Parallel&gt;<br />
		&lt;/s:Transition&gt;</p>
<p>	&lt;/s:transitions&gt;</p>
<p>

2. Above this are the 2 richtext elements you added in Catalyst (i.e. front and back) – comment these out and add a group for each of them. In the code below I’ve given the groups the same id as that of the original richtext labels so I know the pre-generated transitions will work.

<br />
	&lt;!--&lt;s:RichText color=&quot;#2B4381&quot; fontFamily=&quot;Arial&quot; fontSize=&quot;115&quot; id=&quot;richtext1&quot; includeIn=&quot;front&quot; tabStops=&quot;S0 S50 S100 S150 S200&quot; text=&quot;front&quot; x=&quot;251&quot; y=&quot;226&quot;/&gt;--&gt;</p>
<p>	&lt;s:Group width=&quot;300&quot; height=&quot;350&quot; id=&quot;richtext1&quot; includeIn=&quot;front&quot;  horizontalCenter=&quot;0&quot; verticalCenter=&quot;0&quot;&gt;<br />
		&lt;s:Panel x=&quot;0&quot; y=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot; title=&quot;The Front&quot;&gt;<br />
			&lt;s:Label x=&quot;56&quot; y=&quot;52&quot; text=&quot;So using the text labels created in Catalyst&quot; fontSize=&quot;19&quot; width=&quot;184&quot; textAlign=&quot;center&quot;/&gt;<br />
		&lt;/s:Panel&gt;<br />
	&lt;/s:Group&gt;</p>
<p>	&lt;!--&lt;s:RichText color=&quot;#2B4381&quot; fontFamily=&quot;Arial&quot; fontSize=&quot;115&quot; id=&quot;richtext0&quot; includeIn=&quot;back&quot; tabStops=&quot;S0 S50 S100 S150 S200&quot; text=&quot;Back&quot; x=&quot;251&quot; y=&quot;226&quot;/&gt;--&gt;</p>
<p>	&lt;s:Group width=&quot;300&quot; height=&quot;350&quot; id=&quot;richtext0&quot; includeIn=&quot;back&quot;  horizontalCenter=&quot;0&quot; verticalCenter=&quot;0&quot;&gt;<br />
		&lt;s:Panel x=&quot;0&quot; y=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot; title=&quot;The Back&quot;&gt;<br />
			&lt;s:Label x=&quot;56&quot; y=&quot;52&quot; text=&quot;We converted them to groups and hey presto!&quot; fontSize=&quot;19&quot; width=&quot;184&quot; textAlign=&quot;center&quot;/&gt;<br />
		&lt;/s:Panel&gt;<br />
	&lt;/s:Group&gt;<br />

3. Add a button and in the click handler alternate the state between front and back so you can flip the groups between front and back. See the finished result here.

Conclusion

Ok, this is a simple demo, but by using Catalyst to generate a smooth sequence of transitions (using the visual aids in the time-line), you can take that code and modify it to your requirements in Flash Builder. By replacing the original labels with groups, the children of the groups (in this case a TitleWindow and a label) also inherit the animation effects of the parent group. Of course there’s no reason all of this couldn’t have been done in Flash Builder, but remembering all the animation mark-up, testing your work and not having a visual timeline to help

create multiple transitions make it all a bit harder.