0 Replies Latest reply on Jul 8, 2009 2:33 AM by Abductee

    flashing transition

    Abductee

      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:

       

      <?xml version="1.0" encoding="utf-8"?>
      <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">
         
          <mx:Style source="assets/CourseReservation.css" />
         
          <mx:states>
              <mx:State name="loginState">
                  <mx:AddChild>
                      <mx:HBox id="loginScreen"
                          width="100%" height="100%"
                          styleName="loginScreen">
                          <mx:Panel title="Login">
                              <mx:Form>
                                  <mx:FormItem label="Username:">
                                      <mx:TextInput id="txtUsername" enter="handleSubmit()" />
                                  </mx:FormItem>
                                  <mx:FormItem label="Password:">
                                      <mx:TextInput id="txtPassword" enter="handleSubmit()" />
                                  </mx:FormItem>
                                  <mx:FormItem>
                                      <mx:Button id="btnLogin" label="Submit"
                                          click="handleSubmit()" />
                                  </mx:FormItem>
                              </mx:Form>
                          </mx:Panel>
                      </mx:HBox>
                  </mx:AddChild>
              </mx:State>
              <mx:State name="reservationState">
                  <mx:AddChild>
                      <components:MainScreen id="mainScreen" />
                  </mx:AddChild>
              </mx:State>
          </mx:states>
         
          <mx:transitions>
              <mx:Transition fromState="loginState" toState="reservationState">
                  <mx:Sequence>
                      <mx:Iris target="{loginScreen}" showTarget="false" duration="1000" />
                      <mx:RemoveChildAction target="{loginScreen}" />
                      <mx:AddChildAction target="{mainScreen}" />
                      <mx:Fade target="{mainScreen}" alphaFrom="0" alphaTo="1" duration="2500" />
                  </mx:Sequence>
              </mx:Transition>
              <mx:Transition fromState="*" toState="loginState">
                  <mx:Fade target="{loginScreen}" alphaFrom="0" alphaTo="1" duration="500" />
              </mx:Transition>
          </mx:transitions>
         
          <mx:Script>
              <![CDATA[
                  import mx.managers.BrowserManager;
                  private function handleSubmit():void {
                      if (txtUsername.text == txtPassword.text) {
                          txtUsername.text = "";
                          this.currentState = 'reservationState';
                      }
                      txtPassword.text = "";
                  }
              ]]>
          </mx:Script>
         
      </mx:Application>