Solved

flex - applying transition to states

Posted on 2009-05-12
8
673 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
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 …
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

707 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now