transitions

States and Transitions

November 27th, 2008 | Author: David

Flex allows for the creation of various states where component properties, such as x and y position and height and width, can be be stored in one state and altered in another state and each state could then be called easily and the properties of the components in those respective states will be instantly recalled.

Here’s a little example of states and transition effects between those states. The transitions are not necessary, but they do seem to facilitate easier understanding of what is occurring when states are changed.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="640" height="480" verticalScrollPolicy="off" horizontalScrollPolicy="off" viewSourceURL="srcview/index.html">
 
	<mx:Style source="general.css"/>
 
	<mx:states>
		<mx:State name="Panel 3">
			<mx:SetProperty target="{panel1}" name="x" value="380"/>
			<mx:SetProperty target="{panel2}" name="y" value="246"/>
			<mx:SetProperty target="{panel3}" name="x" value="10"/>
			<mx:SetProperty target="{panel3}" name="y" value="10"/>
			<mx:SetProperty target="{panel1}" name="height" value="224"/>
			<mx:SetProperty target="{panel1}" name="width" value="250"/>
			<mx:SetProperty target="{panel3}" name="width" value="362"/>
			<mx:SetProperty target="{panel3}" name="height" value="460"/>
		</mx:State>
		<mx:State name="Panel 2">
			<mx:SetProperty target="{panel2}" name="x" value="10"/>
			<mx:SetProperty target="{panel1}" name="x" value="380"/>
			<mx:SetProperty target="{panel1}" name="width" value="250"/>
			<mx:SetProperty target="{panel1}" name="height" value="224"/>
			<mx:SetProperty target="{panel2}" name="width" value="362"/>
			<mx:SetProperty target="{panel2}" name="height" value="460"/>
		</mx:State>
	</mx:states>
 
  	<mx:transitions>
    	<mx:Transition fromState="*" toState="*">
            <mx:Sequence id="t1" targets="{[panel1,panel2,panel3]}">            
                <mx:Parallel>
                    <mx:Move duration="400"/>
                    <mx:Resize duration="400"/>
                </mx:Parallel>
            </mx:Sequence>
    	</mx:Transition>
  	</mx:transitions>
 
	<mx:Panel x="10" y="10" width="362" height="460" layout="absolute"
		title="Panel 1" id="panel1" click="currentState=''">
		<mx:TextArea x="0" y="0" width="100%" height="100%">
			<mx:text>This is an example of states and transitions in Flex 3. Click on either of the other two panels and it will be moved and resized to this panel's default position, having the effect of bringing that panel to a focal position.</mx:text>
		</mx:TextArea>
	</mx:Panel>
	<mx:Panel x="380" y="10" width="250" height="224" layout="absolute"
		title="Panel 2" id="panel2" click="currentState='Panel 2'">
		<mx:TextArea x="0" y="0" width="100%" height="100%"
			text="States and transitions such as are exemplified here are actually quite easy with Flex and especially easier when done via Flex Builder"/>
	</mx:Panel>
	<mx:Panel x="380" y="246" width="250" height="224" layout="absolute"
		title="Panel 3" id="panel3" click="currentState='Panel 3'">
		<mx:TextArea x="0" y="0" width="100%" height="100%">
			<mx:text>Transitions can be a sequence of any number of effects used to transition between states. They aren't necessary, but they supply visual appeal and aid in understanding what is occurring when states are changed.</mx:text>
		</mx:TextArea>
	</mx:Panel>
 
</mx:Application>

Example: dm_states.swf
Flex Project: dm_states.zip

Posted in Examples | Tags: effects, level:intermediate, states, transitions | No Comments »

Flex Development

Posts Tagged ‘transitions’

States and Transitions