Sorry didn't finish my explanation: in the transition from selected to loaded the RemoveChildAction for the associateVBox is for the inferred RemoveChild that must be done to restore the loaded state.
----- Forwarded Message ---- From: Sean Sell <[EMAIL PROTECTED]> To: [email protected] Sent: Thursday, March 15, 2007 2:18:21 PM Subject: Re: [flexcoders] States and transitions 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: [email protected] 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;} --> No need to miss a message. Get email on-the-go with Yahoo! Mail for Mobile. Get started. ____________________________________________________________________________________ Expecting? Get great news right away with email Auto-Check. Try the Yahoo! Mail Beta. http://advision.webevents.yahoo.com/mailbeta/newmail_tools.html
