Setting Transitions Programmatically

[tpaulman]

Hello All,

I've spent the past couple of days trying to set up a sample with Title Windows, pop-up manager, view states and transitions in Flex 2 -- but I'm really having troubles with the Programatic Transitions.

I am popping up 5 title windows -- four little ones on the left, one big one on the right.

When the user shift-clicks on any of the title windows on the left, that window becomes the big window on the right and the windows on the left reposition themselves accordingly.

I've got the code working for popping up the windows, creating the view states and switching between the states.  The trouble I am having is with setting the transitions programatically.  If I use the MXML to set the transitions, it works fine.  I just can't seem to get the Actionscript equivalent working properly.  

Anyone have any ideas about how I can get this off the ground?  

Thanks in advance!
-Tim

[Code in following Message]

[tpaulman]

Code:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
creationComplete="onInit()">

      <mx:Script>
         <![CDATA[
                  import mx.collections.ArrayCollection;

                  import mx.containers.TitleWindow;
                  
                  import mx.effects.Move;

                  import mx.managers.PopUpManager;

                  import mx.states.SetProperty;
                  import mx.states.State;
                  import mx.states.Transition;
                  
                  public var _NUMWINS:Number = 5;
                  public var windowArray:ArrayCollection = new ArrayCollection();                  
                  
                  /*            
                  onInit -- I am creating five instances of a pop-up title
                  window using the popup manager.  The structure is a column
                  of 4 small windows on the left and one large window on the
                  right.
        
                  When all of the windows have been created, I am calling
                        addStates to add view states.
                  */
                  
                  public function onInit():void
                  {
                        var title:TitleWindow;
                        for(var i:Number=1; i<=_NUMWINS; i++)
                        {
                              title = new TitleWindow();
                              title.name = "to_state"+i.toString();
                              title.id = "to_state"+i.toString();
                              title.title = "Title " + i.toString();
                              title.showCloseButton = true;
                              title.addEventListener(MouseEvent.CLICK, setState);

                              if(i != _NUMWINS)
                              {
                                    title.x = 50;
                                    title.y = 50 + ((i-1)*110);
                                    title.height = 100;
                                    title.width = 200;
                              }else{
                                    title.x = 260;
                                    title.y = 50;
                                    title.height = 430;
                                    title.width = 500;
                              }

                              windowArray.addItem(title);
                              PopUpManager.addPopUp(title, mainCanvas);
                        }
                        addStates();
                  }

                  /*            
                  addStates -- this function creates FIVE different view states
                  based on which title window will be the "BIG" window on the
                  right hand side.

                  state1 - window1 (id="to_state1") is the big window
                  state2 - window2 (id="to_state2") is the big window
                  ...
                  state_[_NUMWINS] - window[_NUMWINS] (id="to_state[_NUMWINS]) is the big window

                  When all of the states have been added, I call the addTransitions
                  method.
                  */

                  public function addStates():void
                  {
                        var state:State;
                        var setXProperty:SetProperty;
                        var setYProperty:SetProperty;
                        var setZProperty:SetProperty;
                        var setHeightProperty:SetProperty;
                        var setWidthProperty:SetProperty;
                        var positionIndex:Number;

                        // create the five states
                        for(var i:Number=1; i<=_NUMWINS; i++)
                        {                        
                              state = new State();
                              state.name ="state"+i.toString();
                              positionIndex = 0;
                              
                              // position every window within that state
                              for(var j:Number=1; j<=_NUMWINS; j++)
                              {
                                    setXProperty = new SetProperty();
                                    setXProperty.target = windowArray.getItemAt(j-1);
                                    setXProperty.name = "x";

                                    setYProperty = new SetProperty();
                                    setYProperty.target = windowArray.getItemAt(j-1);
                                    setYProperty.name = "y";

                                    setHeightProperty = new SetProperty();
                                    setHeightProperty.target = windowArray.getItemAt(j-1);
                                    setHeightProperty.name = "height";

                                    setWidthProperty = new SetProperty();
                                    setWidthProperty.target = windowArray.getItemAt(j-1);
                                    setWidthProperty.name = "width";
            
                                    // if i=j, then this is the BIG window position
                                    if(i == j)
                                    {
                                          setXProperty.value = 260;
                                          setYProperty.value = 50;
                                          setHeightProperty.value = 430;
                                          setWidthProperty.value = 500;

                                    }else{
                                          setXProperty.value = 50;
                                          setYProperty.value = 50 + ((positionIndex)*110);
                                          setHeightProperty.value = 100;
                                          setWidthProperty.value = 200;
                                          positionIndex++;
                                    }

                                    // push all of the overrides into the state array
                                    state.overrides.push(setXProperty);
                                    state.overrides.push(setYProperty);
                                    state.overrides.push(setHeightProperty);
                                    state.overrides.push(setWidthProperty);
                              }
                              // push the state onto the states array
                              states.push(state);
                        }
                        
                        // Add the Transitions
                        addTransitions();
                  }
                  
                  /*      
                  addTransitions is supposed to add the transition via code
                  THIS FUNCTION DOES NOT WORK AT ALL
                  WHAT AM I DOING WRONG??  ANY IDEAS??
                  */
                  public function addTransitions():void
                  {
                        var transition:Transition = new Transition();
                        var move:Move = new Move();
                        move.duration=400;
                        move.targets = [windowArray.getItemAt(0),windowArray.getItemAt(1)];
                        transition.fromState = "*";
                        transition.toState = "*";
                        transition.effect = move;
                  }

                  /*
                  Called when any of the title windows get the CLICK event
                  Sets the state if it is a SHIFT+CLICK                  
                  */
public function setState(event:MouseEvent):void
                  {
                        if(event.shiftKey)
                       {
                              var tmpStr:String = event.currentTarget.name;
                              currentState=tmpStr.slice(3, tmpStr.length);
                        }
                  }
            ]]>
      </mx:Script>
      <mx:Canvas id="mainCanvas" width="100%" height="100%" />

<!--
      ***
      This is the MXML that I am trying to replicate in code via
      the addTransitions function.  If using the MXML variant, it works
      perfectly (despite the fact that Flex throws warnings about my binding.
      When using the addTransitions function, it doesn't work at all.
      ***
    <mx:transitions>
        <mx:Transition id="myTransition" fromState="*" toState="*">
            <mx:Move id="myMove" duration="400" targets="{[windowArray.getItemAt(0),windowArray.getItemAt(1)]}"/>
        </mx:Transition>
    </mx:transitions>
 -->
</mx:Application>

** MOD: IF YOU'VE GOT LOADS OF SPACES AT THE ENDS OF YOUR LINES, PLEASE CAN YOU REMOVE THEM BEFORE POSTING. I HAD TO REMOVE 30+ WHITESPACE CHARACTERS FROM SOME OF YOUR LINES... COMPLETELY UNNECESSARY! **

[flexy]

Ok, just having a play with this code now.

[flexy]

Ok, it seems to be incredibly difficult to apply transitions to states using AS in the same way you can with MXML. The reason I can see you're trying to use AS is because you have 'n' number of windows, and therefore, need to assign these dynamically to the effect target property. The solution below achieves this, but with a combination of MXML and AS. I've retyped windowArray from an ArrayCollection to an Array, and made it bindable. By doing this, it is possible then to bind this directly to the targets property, and bingo, all of the windows animate.

I appreciate this doesn't address the problem of creating states and their associated transitions in AS; there's very little documentation about this online, so consider yourself a trail-blazer! The code below does the same thing though...

[flexy]

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
      creationComplete="onInit()">
      
      <mx:Script>
            <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.containers.TitleWindow;
                  import mx.managers.PopUpManager;
                  import mx.states.SetProperty;
                  import mx.states.State;
                  import mx.states.Transition;
                  import mx.effects.Move;
                  import mx.effects.Parallel;                                    
                  
                  public var _NUMWINS:Number = 5;
                  [Bindable] private var windowArray:Array = new Array();
                  
                  /*
                  onInit -- I am creating five instances of a pop-up title
                  window using the popup manager.  The structure is a column
                  of 4 small windows on the left and one large window on the
                  right.

                  When all of the windows have been created, I am calling
                        addStates to add view states.
                  */
    
                  public function onInit():void
                  {
                        var title:TitleWindow;
                        for(var i:Number=1; i<=_NUMWINS; i++)
                        {
                              title = new TitleWindow();
                              title.name = "to_state"+i.toString();
                              title.id = "to_state"+i.toString();
                              title.title = "Title " + i.toString();
                              title.showCloseButton = true;
                              title.addEventListener(MouseEvent.CLICK, setState);
                              
                              if(i != _NUMWINS)
                              {
                                    title.x = 50;
                                    title.y = 50 + ((i-1)*110);
                                    title.height = 100;
                                    title.width = 200;
                              }else{
                                    title.x = 260;
                                    title.y = 50;
                                    title.height = 430;
                                    title.width = 500;
                              }
                              
                              windowArray.push(title);
                              PopUpManager.addPopUp(title, mainCanvas);
                        }
                        addStates();
                  }
                  
                  /*
                  addStates -- this function creates FIVE different view states
                  based on which title window will be the "BIG" window on the
                  right hand side.

                  state1 - window1 (id="to_state1") is the big window
                  state2 - window2 (id="to_state2") is the big window
                  state_[_NUMWINS] - window[_NUMWINS] (id="to_state[_NUMWINS]) is the big window

                  When all of the states have been added, I call the addTransitions
                  method.
                  */
 
                  public function addStates():void
                  {                  
                        var state:State;
                        var setXProperty:SetProperty;
                        var setYProperty:SetProperty;
                        var setZProperty:SetProperty;
                        var setHeightProperty:SetProperty;
                        var setWidthProperty:SetProperty;
                        var positionIndex:Number;

                        // create the five states
                        for(var i:Number=1; i<=_NUMWINS; i++)
                        {                        
                              state = new State();
                              state.name ="state"+i.toString();
                              positionIndex = 0;

                             // position every window within that state
                              for(var j:Number=1; j<=_NUMWINS; j++)
                              {
                                    setXProperty = new SetProperty();
                                    setXProperty.target = windowArray[j-1];
                                    setXProperty.name = "x";

                                    setYProperty = new SetProperty();
                                    setYProperty.target = windowArray[j-1];
                                    setYProperty.name = "y";

                                    setHeightProperty = new SetProperty();
                                    setHeightProperty.target = windowArray[j-1];
                                    setHeightProperty.name = "height";

                                    setWidthProperty = new SetProperty();
                                    setWidthProperty.target = windowArray[j-1];
                                    setWidthProperty.name = "width";
            
                                    // if i=j, then this is the BIG window position
                                    if(i == j)
                                    {
                                          setXProperty.value = 260;
                                          setYProperty.value = 50;
                                          setHeightProperty.value = 430;
                                          setWidthProperty.value = 500;

                                    }else{
                                          setXProperty.value = 50;
                                          setYProperty.value = 50 + ((positionIndex)*110);
                                          setHeightProperty.value = 100;
                                          setWidthProperty.value = 200;
                                          positionIndex++;
                                    }

                                    // push all of the overrides into the state array
                                    state.overrides.push(setXProperty);
                                    state.overrides.push(setYProperty);
                                    state.overrides.push(setHeightProperty);
                                    state.overrides.push(setWidthProperty);

                              }
                              // push the state onto the states array
                              states.push(state);
                        }
                        //addTransitions();
                  }

                  /*      
                  addTransitions is supposed to add the transition via code                  
                  THIS FUNCTION DOES NOT WORK AT ALL                  
                  WHAT AM I DOING WRONG??  ANY IDEAS??                              
                  */
                  public function addTransitions():void
                  {
                        // null                    
                  }

                  /*
                  Called when any of the title windows get the CLICK event
                  Sets the state if it is a SHIFT+CLICK                  
                  */                  
                  public function setState(event:MouseEvent):void
                  {
                   if(event.shiftKey)
                        {
                              var tmpStr:String = event.currentTarget.name;
                              currentState=tmpStr.slice(3, tmpStr.length);
                        }
                  }
]]>
      </mx:Script>
      
      <mx:Canvas id="mainCanvas" width="100%" height="100%" />

<!--
      ***
      This is the MXML that I am trying to replicate in code via
      the addTransitions function.  If using the MXML variant, it works
      perfectly (despite the fact that Flex throws warnings about my binding.
      When using the addTransitions function, it doesn't work at all.
      *** -->
      
    <mx:transitions>
        <mx:Transition id="myTransition" fromState="*" toState="*">
            <mx:Move id="myMove" duration="400" targets="{windowArray}"/>
        </mx:Transition>
    </mx:transitions>
</mx:Application>

[tpaulman]

Hi Flexy -- thanks for the reply.  Glad to hear that I'm not the only one who is having difficulties with the AS transitions.  I don't feel so bad now!  And thanks for the reminder about the [Bindable] declaration.  Still haven't fully broken my Flex 1.5 bad habits yet!

 

[flexy]

Glad to help  

AS transitions seems to baffling a lot of people right now; we came up against this one a few weeks ago. Does anyone know how to directly translate an MXML transition to pure AS3?

[tpaulman]

I just got the following response from Adobe Support on the issue ::


"I think the problem is that when you create the transition you don’t add it to the <mx:transitions> array of the application. Try this:"

Code:

public function addTransitions():void
{
      var transition:Transition = new Transition();                                  
      var move:Move = new Move();
                                                            
      move.duration=400;
      move.targets = windowArray;
                      
      transition.fromState = "*";
      transition.toState = "*";
      transition.effect = move;            

      // I was mising THIS line
      transitions.push(transition);
}

That certainly seems to do the trick -- mystery solved!  Hope this helps out anyone else who is having troubles with the issue!

Cheers,
-Tim

[flexy]

Nice one! That's going to be a load of use to a lot of people.