Solved

flex - applying transition to states

Posted on 2009-05-12
8
681 Views
Last Modified: 2013-11-11
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
Comment
Question by:joy_de_vivre
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 19

Expert Comment

by:Gary Benade
ID: 24382580
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
 

Author Comment

by:joy_de_vivre
ID: 24382939
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
 

Author Comment

by:joy_de_vivre
ID: 24383153
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
Technology Partners: 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!

 
LVL 19

Accepted Solution

by:
Gary Benade earned 500 total points
ID: 24383329
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
 
LVL 19

Expert Comment

by:Gary Benade
ID: 24383338
swf of the final effect attached
0
 
LVL 19

Expert Comment

by:Gary Benade
ID: 24384971
I give up, download it all here :)
http://www.softwareguys.co.za/joy.zip
0
 
LVL 19

Expert Comment

by:Gary Benade
ID: 24419371
so what do you think? I think it looks awesome for that amount of code
0
 

Author Comment

by:joy_de_vivre
ID: 24486263
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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question