Sunday, March 28, 2010

flashing transition

Hi all,

I'm having a problem with a transition.

In my application, I have 2 states, one containing a HBox with a Panel inside, and one with only a custom component in it.

As you can see in the code below, I defined a transition between loginState and reservationState, which uses an Iris effect

to hide the loginScreen, followed by a Fade effect which fades in the reservationScreen.

This all works as expected, but right before the Iris effect starts, the loginScreen disappears for a brief moment.

I hope someone cna point out what it is I'm doing wrong.

Best regards,

Jurgen

ReservationSystem.mxml:

%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:Application
?xmlns:mx=''http://www.adobe.com/2006/mxml''
?xmlns:components=''components.*''
?creationComplete=''BrowserManager.getInstance().setTitle('Course Reservation')''
?width=''100%'' height=''100%''
?layout=''vertical'' currentState=''loginState''%26gt;
?
?%26lt;mx:Style source=''assets/CourseReservation.css'' /%26gt;
?
?%26lt;mx:states%26gt;
?%26lt;mx:State name=''loginState''%26gt;
?%26lt;mx:AddChild%26gt;
?%26lt;mx:HBox id=''loginScreen''
?width=''100%'' height=''100%''
?styleName=''loginScreen''%26gt;
?%26lt;mx:Panel title=''Login''%26gt;
?%26lt;mx:Form%26gt;
?%26lt;mx:FormItem label=''Username:''%26gt;
?%26lt;mx:TextInput id=''txtUsername'' enter=''handleSubmit()'' /%26gt;
?%26lt;/mx:FormItem%26gt;
?%26lt;mx:FormItem label=''Password:''%26gt;
?%26lt;mx:TextInput id=''txtPassword'' enter=''handleSubmit()'' /%26gt;
?%26lt;/mx:FormItem%26gt;
?%26lt;mx:FormItem%26gt;
?%26lt;mx:Button id=''btnLogin'' label=''Submit''
?click=''handleSubmit()'' /%26gt;
?%26lt;/mx:FormItem%26gt;
?%26lt;/mx:Form%26gt;
?%26lt;/mx:Panel%26gt;
?%26lt;/mx:HBox%26gt;
?%26lt;/mx:AddChild%26gt;
?%26lt;/mx:State%26gt;
?%26lt;mx:State name=''reservationState''%26gt;
?%26lt;mx:AddChild%26gt;
?%26lt;components:MainScreen id=''mainScreen'' /%26gt;
?%26lt;/mx:AddChild%26gt;
?%26lt;/mx:State%26gt;
?%26lt;/mx:states%26gt;
?
?%26lt;mx:transitions%26gt;
?%26lt;mx:Transition fromState=''loginState'' toState=''reservationState''%26gt;
?%26lt;mx:Sequence%26gt;
?%26lt;mx:Iris target=''{loginScreen}'' showTarget=''false'' duration=''1000'' /%26gt;
?%26lt;mx:RemoveChildAction target=''{loginScreen}'' /%26gt;
?%26lt;mx:AddChildAction target=''{mainScreen}'' /%26gt;
?%26lt;mx:Fade target=''{mainScreen}'' alphaFrom=''0'' alphaTo=''1'' duration=''2500'' /%26gt;
?%26lt;/mx:Sequence%26gt;
?%26lt;/mx:Transition%26gt;
?%26lt;mx:Transition fromState=''*'' toState=''loginState''%26gt;
?%26lt;mx:Fade target=''{loginScreen}'' alphaFrom=''0'' alphaTo=''1'' duration=''500'' /%26gt;
?%26lt;/mx:Transition%26gt;
?%26lt;/mx:transitions%26gt;
?
?%26lt;mx:Script%26gt;
?%26lt;![CDATA[
?import mx.managers.BrowserManager;
?private function handleSubmit():void {
?if (txtUsername.text == txtPassword.text) {
?txtUsername.text = '''';
?this.currentState = 'reservationState';
?}
?txtPassword.text = '''';
?}
?]]%26gt;
?%26lt;/mx:Script%26gt;
?
%26lt;/mx:Application%26gt;

No comments:

Post a Comment