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
>
