asked on

flex - applying transition to states

Hello.
I have some simple application which should change few states. I set up everything and maybe it could be done in a better way, but what I would like to do here is to apply Move transition between states.

Generally my idea is when user press next button (>) currentState slides to left and nextState comes to its place. When user press previous button (<), currentState slides to right and prevState come to its place.

I was experimenting with this but couldn't do it in any way =( It just confused me more and more =/

Also, I have noticed that I should put some kind of mask in a position of "box" so that sliding states are not shown over the buttons left and right... I have no idea how to apply such a thing =)

Thank you for all your help!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:comps="components.*"
	layout="horizontal"
	width="100%" height="100%"
	creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			[Bindable]
			public var next:int;
			
			[Bindable]
			public var prev:int;
			
			[Bindable]
			public var nextState:String;
			
			[Bindable]
			public var prevState:String;
			
			[Bindable]
			public var maxPages:int = 3;
			
			private function init():void{
				currentState = "state1";
				nextState = 'state2';
				prevState = 'state3';
				next = 2;
				prev = maxPages;
				
				trace("currentState="+currentState);
				trace("nextState=" + nextState);
				trace("prevState=" + prevState);
				trace("next=" + next);
				trace("prev=" + prev);
			}
			
			private function changeState(win:String):void{
			
				if (win == 'next'){
					currentState = 'state'+next;
					
					next++;
					prev++;
					if (next > maxPages){
						next = 1;
					}
					if (prev > maxPages){
						prev = 1;
					}
					
					nextState = 'state'+next;
					prevState = 'state'+prev;
				}
				
				if (win == 'previous'){
					currentState = 'state'+prev;
					
					prev--;
					next--;
					if (prev < 1){
						prev = 3;
					}
					if (next < 1){
						next = 3;
					}
					
					nextState = 'state'+next;
					prevState = 'state'+prev;
				}
				
				trace("currentState=" + currentState);
				trace("nextState=" + nextState);
				trace("prevState=" + prevState);
				trace("next=" + next);
				trace("prev=" + prev);
			}
		]]>
	</mx:Script>
	
	<mx:states>
		<mx:State name="state1" id="state1">
			<mx:AddChild relativeTo="{box}" position="firstChild">
				<comps:AboutUs
					width="700" height="300"/>
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="state2" id="state2">
			<mx:AddChild relativeTo="{box}" position="firstChild">
				<comps:Contacts
					width="700" height="300"/>
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="state3" id="state3">
			<mx:AddChild relativeTo="{box}" position="firstChild">
				<comps:Portfolio
					width="700" height="300"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	
	
	<mx:Button id="prevButton" label="&lt;"
		width="15" height="300"
		paddingLeft="0" paddingRight="0"
		click="changeState('previous')"/>
	
	<mx:Box id="box" width="700" height="300"
		verticalAlign="top" horizontalAlign="center"/>
	
	<mx:Button id="nextButton" label="&gt;"
		width="15" height="300"
		paddingLeft="0" paddingRight="0"
		click="changeState('next')"/>
	
</mx:Application>

Open in new window

Gary Benade

something to play with so long :)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="components.*"
        layout="horizontal"
        width="100%" height="100%"
        creationComplete="init()">
        
        <mx:Script>
                <![CDATA[
                		import  mx.effects.*;
                		import mx.effects.easing.*;
                
                        [Bindable]
                        public var next:int;
                        
                        [Bindable]
                        public var prev:int;
                        
                        [Bindable]
                        public var nextState:String;
                        
                        [Bindable]
                        public var prevState:String;
                        
                        [Bindable]
                        public var maxPages:int = 3;
                                                
                        private function init():void{
                                currentState = "state1";
                                nextState = 'state2';
                                prevState = 'state3';
                                next = 2;
                                prev = maxPages;
                                
                                trace("currentState="+currentState);
                                trace("nextState=" + nextState);
                                trace("prevState=" + prevState);
                                trace("next=" + next);
                                trace("prev=" + prev);
                        }
                        
                        private function changeState(win:String):void{
                        
                                if (win == 'next'){
                                        currentState = 'state'+next;
                                        
                                        next++;
                                        prev++;
                                        if (next > maxPages){
                                                next = 1;
                                        }
                                        if (prev > maxPages){
                                                prev = 1;
                                        }
                                        
                                        nextState = 'state'+next;
                                        prevState = 'state'+prev;
                                }
                                
                                if (win == 'previous'){
                                        currentState = 'state'+prev;
                                        
                                        prev--;
                                        next--;
                                        if (prev < 1){
                                                prev = 3;
                                        }
                                        if (next < 1){
                                                next = 3;
                                        }
                                        
                                        nextState = 'state'+next;
                                        prevState = 'state'+prev;
                                }
                                
                                trace("currentState=" + currentState);
                                trace("nextState=" + nextState);
                                trace("prevState=" + prevState);
                                trace("next=" + next);
                                trace("prev=" + prev);
                        }
                ]]>
        </mx:Script>
        
        <mx:states>
                <mx:State name="state1" id="state1">
                        <mx:AddChild relativeTo="{box}" position="firstChild">
                                <comps:AboutUs id="aboutus"
                                        width="700" height="300"/>
                        </mx:AddChild>
                </mx:State>
                
                <mx:State name="state2" id="state2">
                        <mx:AddChild relativeTo="{box}" position="firstChild">
                                <comps:Contacts id="contacts"
                                        width="700" height="300"/>
                        </mx:AddChild>
                </mx:State>
                
                <mx:State name="state3" id="state3">
                        <mx:AddChild relativeTo="{box}" position="firstChild">
                                <comps:Portfolio id="thebox"
                                        width="700" height="300"/>
                        </mx:AddChild>
                </mx:State>
        </mx:states>
        
        
        <mx:Button id="prevButton" label="&lt;"
                width="15" height="300"
                paddingLeft="0" paddingRight="0"
                click="changeState('previous')"/>
        
        <mx:Canvas id="box" width="700" height="300" clipContent="true" horizontalScrollPolicy="off" verticalScrollPolicy="off" />
        
        <mx:Button id="nextButton" label="&gt;"
                width="15" height="300"
                paddingLeft="0" paddingRight="0"
                click="changeState('next')"/>
	<mx:transitions>		
		<mx:Transition fromState="*" toState="state1">
			<mx:Sequence>				
				<mx:AddChildAction/>
				<mx:AnimateProperty target="{aboutus}" property="x" fromValue="700" toValue="0" duration="500" easingFunction="Linear.easeInOut"/>
				<mx:RemoveChildAction/>
			</mx:Sequence>					
		</mx:Transition>
		<mx:Transition fromState="*" toState="state2">
			<mx:Sequence>				
				<mx:AddChildAction/>
				<mx:AnimateProperty target="{contacts}" property="x" fromValue="700" toValue="0" duration="500" easingFunction="Linear.easeInOut"/>					
				<mx:RemoveChildAction/>
			</mx:Sequence>					
		</mx:Transition>
		<mx:Transition fromState="*" toState="state3">
			<mx:Sequence>				
				<mx:AddChildAction/>
				<mx:AnimateProperty target="{thebox}" property="x" fromValue="700" toValue="0" duration="500" easingFunction="Linear.easeInOut"/>					
				<mx:RemoveChildAction/>
			</mx:Sequence>					
		</mx:Transition>
	</mx:transitions>                
</mx:Application>

Open in new window

joy_de_vivre

ASKER

Ok, this was very helpful to start with what I need...
I will try to play with your example, but for now I see few 'problems' here...

I imagine my effect would work like this:
when user press one of the buttons (for example, right button) my currentState (composition) slides from current position to the left, off of the screen, and nextState is following it until it comes to its position. When user clicks left button, currentState slides to the right off of the screen and prevState is following it until it comes to the original position.
Imagine that all states (compositions) are positioned next to each other, and buttons left and right are just moving those around...
You can imagine it as a sliding photos on iPhone for example =)

I guess I could make an visual example in flash if that would be easier to understand =)

I also notice that sliding components are still showing over the buttons and left and right of my application.. Is there a way to tell to flex to apply affects only in the "box" area?

I'm going to play with your example... Thanks a lot ;-)

joy_de_vivre

ASKER

Hmmm... Maybe the solution could avoid using states totally...
Maybe I could mask my "box" area and just scroll compositions left and right??
Going back to experimenting =)

ASKER CERTIFIED SOLUTION

Gary Benade

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary Benade

swf of the final effect attached

Gary Benade

I give up, download it all here :)
http://www.softwareguys.co.za/joy.zip

Gary Benade

so what do you think? I think it looks awesome for that amount of code

joy_de_vivre

ASKER

Sorry for silence, I was away...
So... Thanks for your help, I was looking at TweenMax but I think that I found some simpler solution right here: http://strawberrypixel.com/blog/flex-components/#hsmoothbox

For some reason I couldn't unpack your zip (operation not permitted on my mac??) but thank you for all your help.. I will award you with an A =)

Thanks!