• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 691
  • Last Modified:

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

0
joy_de_vivre
Asked:
joy_de_vivre
  • 5
  • 3
1 Solution
 
Gary BenadeCommented:
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

0
 
joy_de_vivreAuthor Commented:
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 ;-)
0
 
joy_de_vivreAuthor Commented:
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 =)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Gary BenadeCommented:
yeah, I agree, transitions are a pain to get right, it would be far simpler to script this behavior is as3 using TweenMax instead.

No need to mask the box if it's a canvas

I wrote a full example but this site says .as files are evil. argh!

You'll need to download tweenmax for this to work and stick it in the default gs folder of you src folder


<?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 gs.TweenMax;
                	                
                        private var current:int;
                       
                                                
                        private function init():void
                        {
                                current = 0;;
                        }
                        
                        private function changeState( forward:Boolean):void
                        {
                        	var thisidx:int = current;
                        	if( forward)
                        		current++;
                        	else
                        		current--;
                        	if( current > box.numChildren-1)
                        		current = 0;
                        	if( current < 0)
                        		current = box.numChildren-1;
                        	if( forward)
                        	{
                        		box.getChildAt(current).x = -700;
                        		TweenMax.to( box.getChildAt(thisidx), 1, {x:700});
                        		TweenMax.to( box.getChildAt(current), 1, {x:0});
                        	}
                        	else
                        	{
                        		box.getChildAt(current).x = 700;
                        		TweenMax.to( box.getChildAt(thisidx), 1, {x:-700});
                        		TweenMax.to( box.getChildAt(current), 1, {x:0});
                        	}
                        }
                ]]>
        </mx:Script>
                
        <mx:Button id="prevButton" label="&lt;"
                width="15" height="300"
                paddingLeft="0" paddingRight="0"
                click="changeState( false)"/>
        
        <mx:Canvas id="box" width="700" height="300" clipContent="true" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        	<comps:AboutUs id="aboutus" width="700" height="300" x="0"/>
        	<comps:Contacts id="contacts" width="700" height="300" x="700"/>
	        <comps:Portfolio id="portfolio" width="700" height="300" x="700"/>
        </mx:Canvas>
        
        <mx:Button id="nextButton" label="&gt;"
                width="15" height="300"
                paddingLeft="0" paddingRight="0"
                click="changeState( true)"/>
</mx:Application>

Open in new window

0
 
Gary BenadeCommented:
swf of the final effect attached
0
 
Gary BenadeCommented:
I give up, download it all here :)
http://www.softwareguys.co.za/joy.zip
0
 
Gary BenadeCommented:
so what do you think? I think it looks awesome for that amount of code
0
 
joy_de_vivreAuthor Commented:
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!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now