Excellent. That's exactly what I was looking for. And a further tip that I just realized...
Seems to be a decent idea to nest a mx:Parallel in an mx:Sequence, i.e. use the mx:Sequence to order things "addchild, transition, removechild", etc. Otherwise, if you just put it in a mx:Parallel, it happens, well, in parallel! ;) Troy. --- In flexcoders@yahoogroups.com, Sean Sell <[EMAIL PROTECTED]> wrote: > > Anything not scripted in the transition happens immediately in the transition. So you have to put in a transitions for the implied RemoveChildAction > > <mx:transitions> > <mx:Transition fromState="loaded" toState="selected"> > <mx:Parallel> > <mx:Resize target="{associatesGrid}" heightFrom="{associatesGrid.height}" heightTo="{.30 * associatesGrid.height}" duration="1000"/> > <mx:AddChildAction target="{associateVBox}"/> > <mx:Dissolve target="{associateVBox}" alphaFrom="0" alphaTo="1" duration="1500"/> > </mx:Parallel> > </mx:Transition> > <mx:Transition fromState="selected" toState="loaded"> > <mx:Parallel> > <mx:Resize target="{associatesGrid}" duration="1000"/> > <mx:RemoveChildAction target="{associateVBox}"/> > <mx:Dissolve target="{associateVBox}" alphaFrom="1" alphaTo="0" duration="500"/> > </mx:Parallel> > </mx:Transition> > </mx:transitions> > > > <mx:states> > <mx:State name="loaded"> > <mx:AddChild position="lastChild"> > <mx:Label id="label2" text="Select an associate from the table below to see more information" fontWeight="bold"/> > </mx:AddChild> > <mx:AddChild position="lastChild"> > <homeComps:associatesDataGrid id="associatesGrid" height="100%"/> > </mx:AddChild> > <mx:RemoveChild target="{label1}"/> > </mx:State> > <mx:State name="selected" basedOn="loaded"> > <mx:RemoveChild target="{label2}"/> > <mx:SetProperty target="{associatesGrid}" name="height" value="30%"/> > <mx:AddChild position="lastChild"> > <mx:VBox id="associateVBox" width="100%" height="100%" borderColor="#808080" borderStyle="inset"> > <mx:Form> > <mx:FormItem label="Name"> > <mx:Label text="{model.home.selectedAssociate.associateName}"/> > </mx:FormItem> > <mx:FormItem label="Type"> > <mx:Label text="{model.home.selectedAssociate.associateType}"/> > </mx:FormItem> > <mx:FormItem label="Agreement ID"> > <mx:Label text="{model.home.selectedAssociate.associateID}"/> > </mx:FormItem> > <mx:FormItem label="Project Title"> > <mx:Label text="{model.home.selectedAssociate.associateProjectTitle}" /> > </mx:FormItem> > <mx:FormItem label="Citizenship"> > <mx:Label text="{model.home.selectedAssociate.associateCitizenship}"/> > </mx:FormItem> > </mx:Form> > <mx:Button label="Close" click="closeDisplay(event)"/> > </mx:VBox> > </mx:AddChild> > </mx:State> > </mx:states> > <mx:Label id="label1" text="Please wait while the associate records are retrieved" width="100%" textAlign="center" fontWeight="bold"/> > > > ----- Original Message ---- > From: Troy Gilbert <[EMAIL PROTECTED]> > To: flexcoders@yahoogroups.com > Sent: Thursday, March 15, 2007 1:50:15 PM > Subject: [flexcoders] States and transitions > > > > > > > > > > > > > > I'm dabbling with states and transitions for the first time, so pardon the inexperienced question... > > My UI is logically divided into "pages" like a traditional wizard interface. Visually, I'd like my pages to slide in and out of view as I transition to them. Specifically, you can think of it like all of the pages are in a horizontal scroll box, so when I go from page 1 to page 3 I want to scroll page 1 to the left, page 2 to the left and scroll page 3 into view from the right. And then if I want to go from page 3 back to page 1, I want to do the reverse: scroll page 3 out of view to the right, scroll page 2 from left to right into and outof the view, and finally scroll page 1 from the left into the view. This would all be continously of course. > > > The big thing that's tripping me up is the order in which state changes occur. The impression I'm getting is that the actions for a state (like AddChild, RemoveChild, SetPropertyValue) are executed *then* the transition is applied. The problem is that I can't figure out how to apply transition effects to my "outgoing" objects. > > > For example, consider two pages, #1 and #2. My base state has both pages hidden. I then have two states each with one of the pages visible. If I have a transition from state 1 to state 2, page #1 is hidden, then the transition plays. But I want the transition to include page 1 (sliding it out of view). > > > My question: is it possible to execute a transition on the current state *before* the new state becomes active, then play a transition on the new state... and better yet, is it possible to apply the settings for the new state, perform the transitions, then remove the previous states changes? > > > Part of me thinks I really need some generalized "scroller" control to contain my pages, but my gut tells me that states/transitions/ effects should give me all the tools I need to accomplish this. And since I only have 5-6 states total, I'm cool with having to hardcode a certain number of transitions (left to right, right to left, etc.). > > > Thanks, > > Troy. > > > > > > > > > > > > > > <!-- > > #ygrp-mlmsg {font-size:13px;font-family:arial, helvetica, clean, sans-serif;} > #ygrp-mlmsg table {font-size:inherit;font:100%;} > #ygrp-mlmsg select, input, textarea {font:99% arial, helvetica, clean, sans-serif;} > #ygrp-mlmsg pre, code {font:115% monospace;} > #ygrp-mlmsg * {line-height:1.22em;} > #ygrp-text{ > font-family:Georgia; > } > #ygrp-text p{ > margin:0 0 1em 0;} > #ygrp-tpmsgs{ > font-family:Arial; > clear:both;} > #ygrp-vitnav{ > padding-top:10px;font-family:Verdana;font-size:77%;margin:0;} > #ygrp-vitnav a{ > padding:0 1px;} > #ygrp-actbar{ > clear:both;margin:25px 0;white-space:nowrap;color:#666;text-align:right;} > #ygrp-actbar .left{ > float:left;white-space:nowrap;} > .bld{font-weight:bold;} > #ygrp-grft{ > font-family:Verdana;font-size:77%;padding:15px 0;} > #ygrp-ft{ > font-family:verdana;font-size:77%;border-top:1px solid #666; > padding:5px 0; > } > #ygrp-mlmsg #logo{ > padding-bottom:10px;} > > #ygrp-vital{ > background-color:#e0ecee;margin-bottom:20px;padding:2px 0 8px 8px;} > #ygrp-vital #vithd{ > font-size:77%;font-family:Verdana;font-weight:bold;color:#333;text-transform:uppercase;} > #ygrp-vital ul{ > padding:0;margin:2px 0;} > #ygrp-vital ul li{ > list-style-type:none;clear:both;border:1px solid #e0ecee; > } > #ygrp-vital ul li .ct{ > font-weight:bold;color:#ff7900;float:right;width:2em;text-align:right;padding-right:.5em;} > #ygrp-vital ul li .cat{ > font-weight:bold;} > #ygrp-vital a { > text-decoration:none;} > > #ygrp-vital a:hover{ > text-decoration:underline;} > > #ygrp-sponsor #hd{ > color:#999;font-size:77%;} > #ygrp-sponsor #ov{ > padding:6px 13px;background-color:#e0ecee;margin-bottom:20px;} > #ygrp-sponsor #ov ul{ > padding:0 0 0 8px;margin:0;} > #ygrp-sponsor #ov li{ > list-style-type:square;padding:6px 0;font-size:77%;} > #ygrp-sponsor #ov li a{ > text-decoration:none;font-size:130%;} > #ygrp-sponsor #nc { > background-color:#eee;margin-bottom:20px;padding:0 8px;} > #ygrp-sponsor .ad{ > padding:8px 0;} > #ygrp-sponsor .ad #hd1{ > font-family:Arial;font-weight:bold;color:#628c2a;font-size:100%;line-height:122%;} > #ygrp-sponsor .ad a{ > text-decoration:none;} > #ygrp-sponsor .ad a:hover{ > text-decoration:underline;} > #ygrp-sponsor .ad p{ > margin:0;} > o {font-size:0;} > .MsoNormal { > margin:0 0 0 0;} > #ygrp-text tt{ > font-size:120%;} > blockquote{margin:0 0 0 4px;} > .replbq {margin:4;} > --> > > > > > > > > > > ____________________________________________________________________________________ > Food fight? Enjoy some healthy debate > in the Yahoo! Answers Food & Drink Q&A. > http://answers.yahoo.com/dir/?link=list&sid=396545367 >