Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rate Thread Display Modes
Old 09-15-2006, 06:18 PM   #1
tpaulman
Registered User
 
Join Date: Mar 2006
Posts: 32
Default Flex 2 (AS3) -- Setting Transitions Programatically?

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

Last edited by tpaulman; 09-15-2006 at 08:33 PM.
tpaulman is offline   Reply With Quote
Old 09-15-2006, 08:35 PM   #2
tpaulman
Registered User
 
Join Date: Mar 2006
Posts: 32
Default

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.
tpaulman is offline   Reply With Quote
Old 09-16-2006, 03:58 PM   #3
flexy
Everything about me's...
 
Join Date: Aug 2006
Location: UK
Posts: 198
Default

http://www.flexdeveloper.eu/forums/Y...1158365095/0#4
flexy is offline   Reply With Quote
Old 04-18-2009, 05:45 PM   #4
feelwinds
Registered User
 
Join Date: Dec 2008
Posts: 1
Wink Re: Flex 2 -- Setting Transitions Programatically?

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);
feelwinds is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
What is Flex? Selfminded Flex 2, 3 & 4 11 04-15-2008 06:14 AM
NEW ActionScript 3 XIFF Version - for Flex Builder 2 projects with XMPP nickvelloff ActionScript 3.0 0 09-02-2006 03:12 AM
Installation woes? | Flex 2 can't find player erikober Flex 2, 3 & 4 1 07-25-2006 04:03 PM
Question about Flex 2 vistasoul Flex 2, 3 & 4 1 02-28-2006 04:07 AM
New Flex (and ActionScript 3) boards Jesse General Chat 3 12-01-2005 06:13 AM


All times are GMT. The time now is 12:36 PM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.