1 Reply Latest reply on Oct 18, 2009 7:42 PM by eartha55

    can't get transitions to execute

    eartha55

      Hi folks,

       

      I'm building my first Flex app, which is a typical simple quiz. Intro state, string of questions, then a result.

       

      I'm stuck right now in that my transitions are not running. I suspect it has something to do with the fact that I extended the Application class and typed my main application mxml file to that class so that I could keep Actionscript separate from MXML in two separate files. The app will switch states successfully but it won't run the transition effects on a state change, and so my endEffect event is not firing...

       

      It may be that I have something else wrong altogether.

       

      Here is the application MXML file:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <classes:QuizApplication
          xmlns:local="*"
          xmlns:mx="http://www.adobe.com/2006/mxml"
          xmlns:classes="classes.*"
          layout="absolute"
          currentState="landingState"
          >
          
          <mx:HTTPService id="questions" url="./data/questions.xml" />
          
          
          <classes:states>
              <mx:State name="landingState"/>
              <mx:State name="landingStateOut" basedOn="landingState"/>
              <mx:State name="question">
                  <mx:RemoveChild target="{text1}"/>
                  <mx:RemoveChild target="{startButton}"/>
                  <mx:AddChild relativeTo="{vbox1}" position="lastChild">
                      <local:FormHolderVBox id="formHolder" applicationVO="{applicationVO}" width="348" height="248" />
                  </mx:AddChild>
              </mx:State>
              <mx:State name="resultState"/>
              <mx:State name="betweenQuestions1" basedOn="question">
                  <mx:RemoveChild target="{formHolder}"/>
                  <mx:RemoveChild target="{vbox1}"/>
              </mx:State>
          </classes:states>
          
          <classes:transitions>
              <mx:Transition id="advanceTransition0" fromState="landingState" toState="landingStateOut">
                  <mx:Fade
                      duration="2000"
                      id="fadeToBetween"
                      alphaFrom="1"
                      alphaTo="0"
                      effectEnd="continueAdvance();"
                  />    
              </mx:Transition>        
              <mx:Transition id="advanceTransition1" fromState="question" toState="betweenQuestions" effect="{fadeToBetween}" />        
              <mx:Transition id="advanceTransition2" fromState="question" toState="betweenQuestions">
                  <mx:Fade
                      id="fadeToQuestion"
                      alphaFrom="0"
                      alphaTo="1"
                  />    
              </mx:Transition>        

       

          </classes:transitions>

       


          <mx:Canvas x="45" y="41" width="392" height="361" id="canvas">
              <mx:VBox x="21" y="47" height="291" width="348" id="vbox1">
                  <mx:Text text="Take this quick quiz to find out what type of shopper you are!" width="347" height="40" fontSize="12" id="text1"/>
                  <mx:Button label="Start the Quiz" id="startButton"/>
              </mx:VBox>
          </mx:Canvas>
          <mx:Text text="What kind of shopper are you?"  fontSize="21" fontWeight="bold" fontFamily="Arial" x="45" y="41"/>
          
      </classes:QuizApplication>

       

       

       

       

      And here is the associated Actionscript:

       

       

      package classes
      {
         
      import classes.events.AdvanceEvent;
          
         
      import flash.events.MouseEvent;
          
         
      import mx.collections.ArrayCollection;
         
      import mx.containers.Canvas;
         
      import mx.controls.Button;
         
      import mx.core.Application;
         
      import mx.events.FlexEvent;
         
      import mx.events.EffectEvent;
         
      import mx.rpc.events.ResultEvent;
         
      import mx.rpc.http.mxml.HTTPService;

          public class
      QuizApplication extends Application
         
      {
              [
      Bindable]
              public var
      startButton:Button;
              
              public var
      canvas:Canvas;
              
              public var
      questions:HTTPService;
              
             
      //[Bindable] ?
             
      public var questionVOs:ArrayCollection;
              [
      Bindable]
              public var
      applicationVO:ApplicationVO;
              
             
      //CONSTRUCTOR
             
      public function QuizApplication()
              {
                 
      super();
                 
      this.addEventListener(FlexEvent.APPLICATION_COMPLETE, init);
                 
      // go ahead and create singleton of DataClass to store globals
                 
      applicationVO = new ApplicationVO();
              }
          
             
      //METHODS
              
             
      private function init(e:FlexEvent):void
             
      {
                 
      startButton.addEventListener(MouseEvent.MOUSE_UP, handleStartQuiz);
                 
      questions.addEventListener(ResultEvent.RESULT, handleQuestionData);
                 
      questions.send();
                  
                 
      // set up listeners for app business
                 
      canvas.addEventListener(AdvanceEvent.FORWARD, advanceToQuestion);
                 
      //canvas.addEventListener(AdvanceEvent.BACKWARD, advanceToQuestion);
              //    canvas.addEventListener(AdvanceEvent.CONTINUE, continueAdvance);
                  
                  // set to start with question 1
                 
      applicationVO.currentQuestion = 0;
                  
              }        
              
              
              
             
      // EVENT HANDLERS
              
             
      private function handleStartQuiz(e:MouseEvent): void
             
      {
             
      //currentState = "question"; // states hard-coded in mxml
             
      trace("should set state to landingStateOut");
             
      trace("currentState now is "+currentState);
             
      currentState = "landingStateOut";
             
      trace("currentState now is "+currentState);        
              }
              
              private function
      handleQuestionData(e:ResultEvent): void
             
      {
                 
      applicationVO.questionVOs = new ArrayCollection();
                  
                 
      // loop through XML's ArrayCollections and create an ArrayCollection of QuestionVO's, one for each question in XML
                  
      for each (var question:Object in e.result.questions.question)
                  {
                      var
      newVO:QuestionVO = new QuestionVO();
                     
      newVO.questionID = question.id;
                 
      //    trace("question.id is "+question.id);
                     
      newVO.questionText = question.text;
                 
      //    trace("question.text is "+question.text);
                     
      newVO.answers = new ArrayCollection();
                      for
      each (var answer:Object in question.answers.answer)
                      {
                         
      newVO.answers.addItem(answer);
                     
      //    trace("answer is "+answer);
                     
      }
                     
      applicationVO.questionVOs.addItem(newVO);
                  }

             
      }
              
              private function
      advanceToQuestion(e:AdvanceEvent):void
             
      {
                 
      trace("should transition to next question now");
                 
      e.stopImmediatePropagation();    
                  if (
      e.type == "forward")
                  {
                     
      //somehow call the transition AdvanceTransition
                     
      applicationVO.currentQuestion++;
                     
      currentState = "betweenQuestions1";
                  }
                  else
                  {
                     
      applicationVO.currentQuestion--;
                     
      currentState = "betweenQuestions1";
                  }
              }
              
              public function
      continueAdvance():void
             
      {
                 
      trace("should transition now from betweenQuestions2 to question state");
                 
      //currentState = "question";
             
      }
              
              
          }
      }

       

       

       

      Can anyone point out what I've got wrong that could cause the Transitions not to work? I thought they were simply supposed to execute on a state change from A to B, for which you've indicated set up a Transition from state A to B.

       

      Many thanks!