8 Replies Latest reply on Oct 20, 2009 6:42 AM by vertmonkee

    Stopping animation in a popup when it closes

    vertmonkee

      I have created a component which is added as a pop up to create a modal window when the user is waiting for data from the server. This is all working fine, the problem I am having is when the pop up is removed.

       

      To rotate the loading image I increment an int by 5 then rotate the image and then call the function again so it continually spins.

       

      Using a trace statement I have seen that the animation continues to get called even when the pop up has been removed.

       

      How do I stop this happening when the pop up is removed?

       

      This is my code from the pop up window component.

       

      <?xml version="1.0" encoding="utf-8"?>
      <!--Used to display a modal window with a loading image-->
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="166" height="200" creationComplete="rotateLoadingImage()">
          <mx:Script>
              <![CDATA[
                  import mx.controls.Alert;
             
                  [Bindable]
                  public var angle:int = 0;

       

                  private function rotateLoadingImage():void {
                      rotate.end();
                      angle += 5;
                      rotate.play();
                      trace("Rotate image function");
                  }
                 
              ]]>
          </mx:Script>
          <mx:Rotate id="rotate" angleFrom="{angle - 5}" angleTo="{angle}" duration="20" effectEnd="rotateLoadingImage();" easingFunction="null" target="{loadingImage}"/>
          <mx:Image source="@Embed('loading.png')" width="166" height="166" id="loadingImage"/>
          <mx:Label text="LOADING..." width="166" height="25" textAlign="center" fontSize="20"/>
      </mx:VBox>

       

      This is the code in my Main file

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="components.*">
          <!-- main.mxml -->
          <mx:Script>
              <![CDATA[
                  import components.ProgressWin;
                  import mx.controls.Alert;
                  import mx.rpc.events.ResultEvent;
                  import mx.managers.PopUpManager;
                 
                  //private var waitWin:ProgressWin;
                  private var waitWin:ProgressWin;
                 
                  private function init():void {
                      srv.send()
                      waitWin = new ProgressWin();
                      PopUpManager.addPopUp(waitWin, this, true);
                      PopUpManager.centerPopUp(waitWin)
                  }
                 
                  private function onResult(event:ResultEvent):void {
                      PopUpManager.removePopUp(waitWin);
                      out.text = "event.result = " + event.result;               
                  }
                 
                  private function testAlert():void {
                      Alert.show("This is the test alert function");
                  }
              ]]>
          </mx:Script>

       

          <mx:HTTPService id="srv" url="http://www.myserver.com/test.php" result="onResult(event)" />
          <mx:TextArea id="out" width="400" height="300"/>
          <mx:Button id="myButton" click="testAlert()" label="Test alert"/>
          <mx:Button id="openWindow" click="init()" label="Open window" x="88" y="-1"/>

       

      </mx:WindowedApplication>

        • 1. Re: Stopping animation in a popup when it closes
          Subeesh Arakkan Level 4

          In the result handler, stop the effect before closing the popup

           

           

          private function onResult(event:ResultEvent):void {

                        waitWin.rotate.stop();

                          PopUpManager.removePopUp(waitWin);

                          out.text = "event.result = " + event.result;

                      }

          • 2. Re: Stopping animation in a popup when it closes
            vertmonkee Level 1

            Thanks for the idea but adding that does not stop it.

             

            Any other ideas are gratefully recieved.

             

            Thank you.

            • 3. Re: Stopping animation in a popup when it closes
              Subeesh Arakkan Level 4

              I think event listener is not removed after stopping the effect. Remove the event listener before stopping the effect.

               

              public function stopEffect():void
                           {
                               rotate.removeEventListener(EffectEvent.EFFECT_END,rotateLoadingImage);
                               rotate.stop();
                           }
                          
                           private function rotateLoadingImage(event:EffectEvent):void
                           {
                               rotate.end();
                               angle += 5;
                               rotate.play();
                               trace("Rotate image function");
                           }

              ]]>
                  </mx:Script>
                  <mx:Rotate id="rotate" angleFrom="{angle - 5}" angleTo="{angle}" duration="20" effectEnd="rotateLoadingImage(event);" easingFunction="null" target="{loadingImage}"/>

               

               

              Modify the rotateLoadingImage to accept effect event as argument.

               

              In the result handler modify the code like this

              private function onResult(event:ResultEvent):void {

                             waitWin.stopEffect();
                              PopUpManager.removePopUp(waitWin);
                              out.text = "event.result = " + event.result;               
                          }

              • 4. Re: Stopping animation in a popup when it closes
                vertmonkee Level 1

                Thanks for taking the time to help out but I'm still getting the same result

                • 5. Re: Stopping animation in a popup when it closes
                  Subeesh Arakkan Level 4

                  this worked for me

                   

                  popup code

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <!--Used to display a modal window with a loading image-->
                  <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="166" height="200"
                      creationComplete="onCreationComplete()">
                      <mx:Script>
                          <![CDATA[
                              import mx.events.EffectEvent;
                              import mx.managers.PopUpManager;
                              import mx.controls.Alert;
                        
                              [Bindable]
                              public var angle:int = 0;

                   

                              private function onCreationComplete():void
                              {
                                  rotate.addEventListener(EffectEvent.EFFECT_END,rotateLoadingImage);
                                  rotateLoadingImage(null);
                              }

                   

                              private function rotateLoadingImage(event:EffectEvent):void {
                                  rotate.end();
                                  angle += 5;
                                  rotate.play();
                                  trace("Rotate image function");
                              }
                             
                              public function stopEffect():void
                              {
                                  rotate.removeEventListener(EffectEvent.EFFECT_END,rotateLoadingImage);
                                  rotate.stop();
                              }
                            
                          ]]>
                      </mx:Script>
                      <mx:Rotate id="rotate" angleFrom="{angle - 5}" angleTo="{angle}" duration="20" easingFunction="null" target="{loadingImage}"/>
                      <mx:Image source="@Embed('loading.png')" width="166" height="166" id="loadingImage"/>
                      <mx:Label text="LOADING..." width="166" height="25" textAlign="center" fontSize="20"/>
                  </mx:VBox>

                   

                  in the result handler stop the effect before removing the popup

                   

                   

                  private function onResult(event:ResultEvent):void {

                                  waitWin.stopEffect();
                                  PopUpManager.removePopUp(waitWin);
                                  out.text = "event.result = " + event.result;               
                              }

                  • 6. Re: Stopping animation in a popup when it closes
                    vertmonkee Level 1

                    If I put a trace statment in the onResult function below like below

                     

                                private function onResult(event:ResultEvent):void {
                                    waitWin.stopEffect();
                                    trace("Image has stopped rotating");
                                    PopUpManager.removePopUp(waitWin);
                                    out.text = "event.result = " + event.result;              
                                }

                     

                    I get the following output

                     

                    Rotate image function
                    Rotate image function
                    Rotate image function
                    Image has stopped rotating
                    Rotate image function
                    Rotate image function
                    Rotate image function

                     

                     

                    Rotate image function keeps printing out until I close the whole application.

                     

                    Does this not happen for you?

                    • 7. Re: Stopping animation in a popup when it closes
                      Subeesh Arakkan Level 4

                      No, I am attaching my test application

                      • 8. Re: Stopping animation in a popup when it closes
                        vertmonkee Level 1

                        Excellent that is working for me.

                         

                        I'll see if I can adapt this code into what I have.

                         

                        Thanks for your help I really appreciate it.