The Space For App Developers

Beyond Plain Old HTML Objects

Slide effect with ViewStack and state transitions

with 5 comments

In this post I want to explain how the slide effect can be applied to application views. My goal is to do it in a declarative way as much as possible and to use default Flex components. I will demonstrate two possible solutions, one using the ViewStack component and other using Flex states and transitions.

You may wonder why I put that much effort into the slide effect. Ok, I know this isn’t anything revolutionary and this type of user experience is quite common, but I think recently it has become even more popular. This is due to the fact that it is almost a standard type of view transition effect on mobile devices. Now why not try to bring some of the coolness of mobile interactions also to the desktop world?

Using the ViewStack component

In my previous post about the as3viewnavigator library I briefly mentioned a ViewStack component and its inability to display two views at the same time. The consequence of this is also an inability to have a slide effect similar to the one in ViewNavigator. It’s not that the slide effect is not possible at all but you can’t have two views slide together. The only available option in the default ViewStack implementation is to have one view slide out and when its hide effect finishes, to have second view slide in. This is demonstrated in the example below.


This movie requires Flash Player 10


The implementation of this example is really very simple and you can see it below:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   width="300" height="300" 
			   viewSourceURL="srcview/index.html"
			   backgroundColor="#F0F0F0">
 
	<fx:Declarations>
		<s:Move id="view1ShowEffect" xFrom="{-stack.width}" xTo="0" />
		<s:Move id="view1HideEffect" xFrom="0" xTo="{-stack.width}" />
		<s:Move id="view2ShowEffect" xFrom="{stack.width}" xTo="0" />
		<s:Move id="view2HideEffect" xFrom="0" xTo="{stack.width}" />
	</fx:Declarations>
 
	<mx:ViewStack id="stack" left="10" top="10" right="10" bottom="10">
 
		<s:NavigatorContent id="view1" hideEffect="{view1HideEffect}" 
							showEffect="{view1ShowEffect}">
			<s:Button label="Show View 2" click="stack.selectedChild = view2" 
					  verticalCenter="0" horizontalCenter="0" />
		</s:NavigatorContent>
 
		<s:NavigatorContent id="view2" hideEffect="{view2HideEffect}" 
							showEffect="{view2ShowEffect}">
			<s:Button label="Show View 1" click="stack.selectedChild = view1" 
					  verticalCenter="0" horizontalCenter="0" />
		</s:NavigatorContent>
 
	</mx:ViewStack>
 
</s:Application>

Using Flex states and transitions

Now with the states and transitions example I wanted to raise the bar a little bit. Still the goal was to slide the views but the first thing I wanted was to slide them at the same time, and second I wanted my target states to have only one view at a time. You may say this is not possible. Well not exactly. What if I introduced an additional state that was only used during the transition and it included both views for that short period of time? Check out the example below:


This movie requires Flash Player 10


In the following code snippet you can see that I declared two additional states: slideToView1State and slideToView2State. These states will actually serve when slide effects are applied. Also when you want to switch, for example to state view2State you would set the application’s currentState property to slideToView2State. When the transition from view1State to slideToView2State is finished the effectEnd event will be handled and it automatically changes the state to view2State.

Another interesting thing to note here is that the slide states are grouped in a slideStates state group and the two views don’t have to explicitly be included in slideToView1State and slideToView2State states.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   width="300" height="300" 
			   viewSourceURL="http://riaspace.com/examples/ViewSlideTransitions/srcview/index.html"
			   backgroundColor="#F0F0F0">
 
	<s:states>
		<s:State name="view1State" />
		<s:State name="slideToView2State" stateGroups="slideStates" />
		<s:State name="view2State" />
		<s:State name="slideToView1State" stateGroups="slideStates" />
	</s:states>
 
	<s:transitions>
		<s:Transition fromState="view1State" toState="slideToView2State">
			<s:Parallel effectEnd="currentState = 'view2State'">
				<s:children>
					<s:Move id="hideView1Effect" 
							target="{view1}" xTo="{-view1.width}" />
					<s:Move id="viewShow2Effect" 
							target="{view2}" xFrom="{view2.width}" xTo="0" />
				</s:children>
			</s:Parallel>
		</s:Transition>
		<s:Transition fromState="view2State" toState="slideToView1State">
			<s:Parallel effectEnd="currentState = 'view1State'">
				<s:children>
					<s:Move id="showView1Effect" 
							target="{view1}" xFrom="{-view1.width}" xTo="0" />
					<s:Move id="hideView2Effect" 
							target="{view2}" xTo="{view2.width}" />
				</s:children>
			</s:Parallel>
		</s:Transition>
	</s:transitions>
 
	<s:Group id="view1" includeIn="view1State, slideStates" 
			 width="100%" height="100%">
		<s:Button id="btnView1" label="Slide To View 2"
				  click="currentState = 'slideToView2State'"
				  horizontalCenter="0" verticalCenter="0" />
	</s:Group>
 
	<s:Group id="view2" includeIn="view2State, slideStates" 
			 width="100%" height="100%">
		<s:Button id="btnView2" label="Show View 1"
				  click="currentState = 'slideToView1State'"
				  horizontalCenter="0" verticalCenter="0" />
	</s:Group>
 
</s:Application>

Written by Piotr Walczyszyn

March 4th, 2011 at 1:34 pm

Posted in Examples

Tagged with