Re: [flexcoders]How do States and Transitions relate?

[scalenine]

Transitions essentially tell a State the sequence of how and when
things change from state to state and what effects should be applied
using Parallel or Sequence. You can kind of look at a Transition like
a time line. For example (in non-technical terms), move and fade this
button, then, when that's done, fade in a Label, then Zoom this Panel,
etc.

An Action is a property that changes from state to state. The
AddChildAction you are referring to is, I think, the only child in the
State that is being added so it doesn't have an id.

You can also put Parallels or Sequences inside of each other to
achieve the effect you're looking for.

Consider the following (font not emebedded, so Fade might look abrupt)
Click "Transitionify" on both states to see reverse:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">

<mx:Script>
        <![CDATA[
                import mx.effects.easing.*;
        ]]>
</mx:Script>

<mx:states>
        <mx:State name="menuTop">
            <mx:SetProperty target="{linkBar}" name="visible"
value="true"/>  
            <mx:SetProperty target="{menu}" name="y" value="10"/> 
            <mx:SetEventHandler target="{button1}" name="click"
handler="currentState='';"/>
        </mx:State>
    </mx:states>
    
    <mx:transitions>
        <mx:Transition id="menuTopTransition" fromState="*"
toState="menuTop">
            <mx:Sequence targets="{[menu, linkBar]}">
                <mx:Move target="{menu}" easingFunction="Bounce.easeOut"/>
                <mx:Parallel>
                        <mx:SetPropertyAction target="{linkBar}" 
name="visible"/>
                        <mx:Fade target="{linkBar}" alphaFrom="0" alphaTo="1"/>
                </mx:Parallel>
            </mx:Sequence>
        </mx:Transition>
        
        <mx:Transition id="menuTopTransitionReverse"
fromState="menuTop" toState="">
            <mx:Sequence targets="{[menu, linkBar]}">
                <mx:Fade target="{linkBar}" alphaFrom="1" alphaTo="0"/>
                <mx:SetPropertyAction target="{linkBar}" name="visible"/>
                <mx:Move target="{menu}" easingFunction="Bounce.easeOut"/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>
    
     <mx:LinkBar x="10" y="44" id="linkBar" visible="false"
borderStyle="none">
        <mx:dataProvider>
                <mx:Array>
                        <mx:Object label="Link 1"/>
                        <mx:Object label="Link 2"/>
                        <mx:Object label="Link 3"/>
                        <mx:Object label="Link 4"/>
                        <mx:Object label="Link 5"/>
                </mx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
    
    <mx:ApplicationControlBar x="10" y="40" width="835" id="menu">
        <mx:Button label="Transitionify"
click="currentState='menuTop';" id="button1"/>
        <mx:Button label="Button 1"/>
        <mx:Button label="Button 2"/>
        <mx:Button label="Button 3"/>
    </mx:ApplicationControlBar>

</mx:Application>

Juan
scalenine.com


--- In flexcoders@yahoogroups.com, "jandersen1978"
<[EMAIL PROTECTED]> wrote:
>
> I'm no expert in states and transitions but as I understand it you 
> define states if you want to add or remove children from a 
> component, change properties etc.  The transitions define any 
> animations that take place going from one state to another.
> 
> Just taking a quick look at your MXML below I'm not sure you want 
> the AddChild, RemoveChild and SetProperty tags in your sequence 
> tag.  I believe only effect tags should go there...  Might want to 
> have another look at the documentation
> 
> http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/ww
> help.htm?context=LiveDocs_Book_Parts&file=tutorial_states_022_6.html
> 
> --- In flexcoders@yahoogroups.com, "dorkie dork from dorktown" 
> <dorkiedorkfromdorktown@> wrote:
> >
> > Hi All,
> > 
> > I'm trying to understand how transitions relate to states and I 
> don't really
> > get it. I've been through the docs but it still is not clear to 
> me. For
> > example, what does the "Action" mean? Are transitions supposed to 
> be some
> > sort of ordering mechanism? I have taken some code from the 
> documentation
> > and modified it here:
> > 
> >     <mx:states>
> >         <mx:State name="menuTop">
> >             <mx:SetProperty target="{linkBarNav}" name="visible"
> > value="false"/>
> >             <mx:SetProperty target="{menu}" name="y" value="43"/>
> >             <mx:SetProperty target="{linkBarNav}" name="y" value="-
> 1"/>
> >         </mx:State>
> >     </mx:states>
> > 
> >     <mx:transitions>
> >         <!-- Define the transition from the base state to the 
> menuTop
> > state.-->
> >         <!-- I want to move menu and link bar up and then reveal 
> linkbar.
> > menu is visible all the time.-->
> >         <mx:Transition id="menuTopTransition" fromState="*"
> > toState="menuTop">
> >             <mx:Sequence targets="{[menu, linkBarNav]}">
> >                 <mx:RemoveChildAction/>
> >                 <mx:SetPropertyAction target="{menu}" 
> name="visible"/>
> >                 <mx:Move duration="300" targets="{[menu, 
> linkBarNav]}"/>
> >                 <mx:WipeRight duration="200" 
> target="{linkBarNav}"/>
> >                 <mx:AddChildAction/>
> >             </mx:Sequence>
> >         </mx:Transition>
> >     </mx:transitions>
> >
>