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;}
-->
____________________________________________________________________________________
Food fight? Enjoy some healthy debate
in the Yahoo! Answers Food & Drink Q&A.
http://answers.yahoo.com/dir/?link=list&sid=396545367
