PDA

View Full Version : Flex 2 (AS3) -- Setting Transitions Programatically?


tpaulman
09-15-2006, 06:18 PM
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

<?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>

tpaulman
09-15-2006, 08:35 PM
UPDATE ::

While cleaning up the code before posting, I inadvertantly omitted the following line after instantiating the title window ::

title.name = "to_state"+i.toString();

If you tried to run the code at all, it would have thrown an error without that line. I added it in to the code sample above.

Sorry for the confusion on that point.

But the programatic transition error remains.

flexy
09-16-2006, 03:58 PM
http://www.flexdeveloper.eu/forums/YaBB.pl?num=1158365095/0#4

feelwinds
04-18-2009, 05:45 PM
Just come across the same problem and jump here by google, post my solution for others' reference though it's long way from the original post...

Just add a line of code at the end of addTransitions()

this.transitions.push(transition);