3 Replies Latest reply on Jun 19, 2010 7:57 PM by David_F57

    Strange Animation behavior

    jerry98225 Level 1

      Hello guys.

         I am trying to fade in the 3 textArea and 3 labels from state "default" to "addRecommend", and fade out these text area and labels from state seeOther to addREcommend. The defautl->addRecommend works fine. However, addRecommend->seeOther

      will show "a textArea" (which is not include in seeOther state) and kill my "add it to database button" (which is in seeOther state).

       

      If I delete detailText and detail from my fade transition, everything will work, but I need to have my detailText and detail fade out too. If I don't explain my question well, please copy my code and paste in your flex. I have spent 5 hours to debug it but no luck. I really really appreciate if anyone could help me.

       

       

       

       

      <fx:Script>

      <![CDATA[

       

      protected function add_clickHandler(event:MouseEvent):void

      {

       

      currentState="addRecommend";

       

      //addRecommendMove.play();

      }

      protected function seeOther_clickHandler(event:MouseEvent):void

      {

      currentState="seeOther";

       

      }

       

       

      ]]>

      </fx:Script>

       

       

      <s:states>

      <s:State name="default"/>

      <s:State name="addRecommend"/>

      <s:State name="seeOther"/>

      </s:states>

       

       

       

      <s:transitions>

              <s:Transition toState="addRecommend">

                     <s:Sequence>

                          <s:Parallel>

                                    <s:Move target="{add}"/>

                                    <s:Resize target="{add}"/>

                                    <s:Move target="{seeOthers}"/>

       

                          </s:Parallel>

                          <s:Parallel>

                                    <s:AddAction targets="{[ yourName,userName,recommendCityLabel, recommendCity, detailText, detail ]}" />

      <!--if remove detailText and detail, the fade transition will be fine...but I need them to fade our and fade in....-->

       

                                    <s:Fade targets="{[yourName,userName, recommendCityLabel, recommendCity, detailText, detail ]}"/>

      <!--if remove detailText and detail, the fade transition will be fine...but I need them to fade our and fade in....-->

                          </s:Parallel>

                     </s:Sequence>

                </s:Transition>

       

       

       

           <s:Transition toState="seeOther">

                     <s:Sequence>

                               <s:Parallel>

       

                                    <s:Fade targets="{[yourName,userName, recommendCityLabel, recommendCity, detailText, detail ]}"/>

      <!--if remove detailText and detail,  the fade transition will be fine...but I need them to fade our and fade in....-->

                               </s:Parallel>

                               <s:Parallel>

                                    <s:Move target="{add}"/>

                                    <s:Move target="{seeOthers}"/>

       

                               </s:Parallel>

       

       

       

       

                     </s:Sequence>

           </s:Transition>

      </s:transitions>

       

       

       

       

      <s:Label color="#000000"

      x="10"

      y="60"

      id="yourName"

      fontSize="13"

      fontFamily="arial"

      text="Your Name" includeIn="addRecommend" />

       

      <s:TextInput  x="10" y="75" width="50%" paddingLeft="10" id="userName" includeIn="addRecommend"/>

       

      <s:Label color="#000000"

      y="110"

      x="10"

      fontSize="13"

      fontFamily="arial"

      id="recommendCityLabel"

      text="Recommended City" includeIn="addRecommend"/>

       

      <s:TextInput  x="10" y="125" id="recommendCity" width="85%" includeIn="addRecommend"/>

       

       

      <s:Label color="#000000" x="10" y="155"

      fontSize="13"

      id="detailText"               <!--If I add this label to my fade transition, the strange behavior will occur-->

      text="Want to add details?"

      fontFamily="arial"

      includeIn="addRecommend"/>

       

       

       

      <s:TextArea y="180"

      x="10"

      paddingLeft="10"

      id="detail"                 <!--If I add this textArea to my fade transition, the strange behavior will occur too-->

      width="90%" height="160" includeIn="addRecommend"/>

       

       

      <s:Button id="add"

      x="10"

      y="60"

      y.addRecommend="350"

      width="210"

      width.addRecommend="150"

      height="35"

      fontWeight="bold"

      fontSize="12"

      fontFamily="arial"

      toolTip="Recommand your favorite places"

      label="Add Your Recommendation"

      label.addRecommend="Add it to database"

      click="add_clickHandler(event)"

      />

       

      <s:Button id="seeOthers"

      y="105"

      x="10"

      y.addRecommend="400"

      width="220"

      height="35"

      fontWeight="bold"

      fontSize="12"

      fontFamily="arial"

      toolTip="see other people's recommandation"

      label="See Other Recommendations"

       

       

      click="seeOther_clickHandler(event)"/>

        • 1. Re: Strange Animation behavior
          jerry98225 Level 1

          I think the main problem is <s:Addaction targets="{......}">. If I remove this line, the animation seems working fine, but the fade will happen before all my buttons move to the property position.  I want to fade them after the buttons are in the property position. Anyway to solve this??

          • 2. Re: Strange Animation behavior
            David_F57 Level 5

            hi,

             

            Sorry I just noticed this post if its associated with the other post I answered change the transition block in the code to(i can have a closer look at the code in this post tomorrow as its getting late right now and the mind is in fuzzy mode).

             

            <s:transitions>

            <s:Transition toState="state2">

            <s:Sequence duration="500">

            <s:Move targets="{[btn1,btn2]}" />

            <s:AddAction target="{tagGroup}"/>

            <s:Fade target="{tagGroup}"/>

            </s:Sequence>

             

            </s:Transition>

             

            <s:Transition toState="state3" >

            <s:Sequence>

            <s:Fade target="{tagGroup}"/>

            <s:AddAction targets="{[btn1,btn2]}" />

            <s:Move targets="{[btn1,btn2]}" />

            </s:Sequence>

            </s:Transition>

            </s:transitions>

             

             

            David.

            1 person found this helpful
            • 3. Re: Strange Animation behavior
              David_F57 Level 5

              hi,

               

              I had a look at these, I think that the layout itself was a little wonky, I have attached the code in a link as this forum tends to eat code which doesn't help when you are trying to look at the code posted.

               

              You have the basics working but to avoid confusion in both the states and code I suggest you try to group your display objects relevant to transition effects this is easier to control and maintain.
              On A side note are you using designview in the ide to see how the states will look, this tool will help a lot while you are learning, ignore anyone that tells you not to use designview, its a layout tool and works well for these types of tasks.
              David.