Fabio Biondi Blog » Blog Archive » Optimizing MXML code in Flash Catalyst “Panini”

Optimizing MXML code in Flash Catalyst “Panini” - Part 6:
Interactions and Transitions

9 February 2011 No Comment

In this chapter we will use Flash Catalyst interactions and transitions.

You need to read previous chapters in order to understand this article.

To complete our prototype we have yet to integrate the following features:

in the ArticleDetails state enable the BACK button to return to the list of the blog;
apply smooth transitions during state changes to make the application more pleasing;
convert the static textfield in the ActionBar of the BlogList state in a Catalyst TextInput component (this procedure has been described in chapter007, available in the next days );

BACK TO THE STATE “BLOGLIST”

Open the DetailsView component (edit component) and select the BackButton button.

Add an interaction to the button using the following options:

To support the typical button states (up, over, down, disabled), before assigning the interaction “OnClick” we should convert the button layout elements in a Catalyst Button component. However, in this project we won’t do it.

THE GENERATED MXML CODE

Il file DetailView.mxml contiene ora il seguente codice MXML:

[...]
<fx:Script>
	<![CDATA[
	protected function backButton_clickHandler():void
	{
	mx.core.FlexGlobals.topLevelApplication.currentState='BlogList';
	}
	]]>
 
</fx:Script>
[...]
 
<lib:Bullet_3_Backward d:userLabel="BackButton" 
					   x="11" y="11" 
					   blendMode="normal"
					   click="backButton_clickHandler()" 
					   flm:knockout="false"/>

TRANSITIONS

In Flash Catalyst, you can also apply transition effects when changing state in order to make a pleasant navigation.
We’ll use the Timelines panel to add default transitions available in Flash Catalyst (simple effects FadeIn / FadeOut between states).

Use the Breadcrumbs bar to go in the root of the application to see the three main states.

Open the Timelines panel if it’s was hidden.

The Timelines panel lists all possible state transitions.
However in our application we only handle some of them.

SplashScreen > BlogList
BlogList > ArticleDetails
ArticleDetails > BlogList

In the Timelines panel, locate the transition SplashScreen > BlogList and click the Smooth Transition button (below) to apply the default transition.

To see a preview of the transition, click on the PLAY button.

Repeat the previous step applying the smooth transition to the following levels:

BlogList > ArticleDetails
ArticleDetails > BlogList

Using the Properties panel, which displays the selected Transition settings, you can change parameters such as duration and easing.

You can also change the duration and position of the transitions directly from the Timelines panel

or by using the pop-up panel next to the button Smooth Transition.

Compile the application (Ctrl + ENTER) to test the transitions.

THE GENERATED MXML CODE

Thanks to the fragmentation of the project in custom components, the MXML code generated for the transitions will be very clean.

In the main file of the project, main.mxml, it will be added a few lines of code to define the transitions of the three main states:

[…]
	<s:states>
		<s:State name="SplashScreen"/>
		<s:State name="BlogList"/>
		<s:State name="ArticleDetails"/>
	</s:states>
 
	<components:SplashScreenView id="splashscreenview1" includeIn="SplashScreen" x="-1" y="1"/>
	<components:BlogView id="blogview1" includeIn="BlogList" x="0" y="0"/>
	<components:DetailsView id="detailsview1" includeIn="ArticleDetails" x="0" y="0"/>
 
	<s:transitions>
		<s:Transition fromState="SplashScreen" interruptionBehavior="stop" toState="BlogList">
			<s:Parallel>
				<s:Fade duration="500" target="{splashscreenview1}"/>
				<s:Fade duration="500" target="{blogview1}"/>
			</s:Parallel>
		</s:Transition>
		<s:Transition fromState="BlogList" interruptionBehavior="stop" toState="ArticleDetails">
			<s:Parallel>
				<s:Fade duration="500" target="{blogview1}"/>
				<s:Fade duration="500" target="{detailsview1}"/>
			</s:Parallel>
		</s:Transition>
		<s:Transition fromState="ArticleDetails" interruptionBehavior="stop" toState="BlogList">
			<s:Parallel>
				<s:Fade duration="500" target="{blogview1}"/>
				<s:Fade duration="500" target="{detailsview1}"/>
			</s:Parallel>
		</s:Transition>
	</s:transitions>
</s:Application>