The problem is a timing issue. view states define what and how to change states transitions define which order visual changes occur during a state change You must still take into account the timing of when things are rendered to the screen On Your problem the button was getting rendered on the screen and then the effect being applied. To get those fade in's and fade out's to appear normal you have to trap for them a bit using the creationCompleteEffect, showEffect and hideEffect. Try this: I took the fadeIn out of the transition and set the effects on button2 and also the visible to false, when the button is rendered to the screen it's hidden and then I set the visible = true which applies the fadeIn. The creationCompleteEffect applies the fadeIn the first time the component is rendered, after that, it uses the showEffect --brian.. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Sequence> <mx:Resize duration="500" target="{panel1}"/> </mx:Sequence> </mx:Transition> </mx:transitions> <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/> <mx:states> <mx:State name="bigger"> <mx:SetStyle target="{panel1}" name="bottom" value="10"/> <mx:SetEventHandler target="{button1}" name="click" handler="currentState='';"/> <mx:AddChild relativeTo="{controlbar1}" position="before"> <mx:Button x="10" y="10" id="button2" showEffect="{fadeIn}" creationCompleteEffect="{fadeIn}" visible="false" /> </mx:AddChild> <mx:SetProperty target="{button2}" name="visible" value="true"/> </mx:State> </mx:states> <mx:Panel layout="absolute" top="10" left="10" bottom="300" right="10" title="Panel 1" id="panel1"> <mx:ControlBar id="controlbar1"> <mx:Button label="Click Me" click="currentState='bigger';" id="button1"/> </mx:ControlBar> </mx:Panel> </mx:Application>
________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Neil Middleton Sent: Monday, February 26, 2007 7:49 AM To: flexcoders@yahoogroups.com Subject: [flexcoders] Transitions Explanation Can anyone explain transistions to me as I'm currently having trouble "getting" it. I have the code below which is working almost exactly as I expect - except for an issue with the appearing button control in the panel. I would expect this button to Fade in as the Resize finishes, but there is obviously something I'm not quite understanding. Cheers in advance: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Sequence> <mx:Resize duration="500" target="{panel1}"/> <mx:Fade duration="500" target="{button2}"/> </mx:Sequence> </mx:Transition> </mx:transitions> <mx:states> <mx:State name="bigger"> <mx:SetStyle target="{panel1}" name="bottom" value="10"/> <mx:SetEventHandler target="{button1}" name="click" handler="currentState='';"/> <mx:AddChild relativeTo="{controlbar1}" position="before"> <mx:Button x="10" y="10" id="button2"/> </mx:AddChild> </mx:State> </mx:states> <mx:Panel layout="absolute" top="10" left="10" bottom="300" right="10" title="Panel 1" id="panel1"> <mx:ControlBar id="controlbar1"> <mx:Button label="Click Me" click="currentState='bigger';" id="button1"/> </mx:ControlBar> </mx:Panel> </mx:Application> -- Neil Middleton Visit feed-squirrel.com *** The information in this e-mail is confidential and intended solely for the individual or entity to whom it is addressed. If you have received this e-mail in error please notify the sender by return e-mail delete this e-mail and refrain from any disclosure or action based on the information. ***
