8 Replies Latest reply on Jun 20, 2010 8:00 PM by jerry98225

    Flex glitch???

    jerry98225 Level 1

      Hello guys, I am trying to do a simple animation here. When I click btn1, the state will change, the button will move and the labels will fade in (btn will have to move first, then labels fade in). When I click btn2 the state will change, the buttons move and the labels will fade out. My problem is when the btn2 is clicked, somehow the application kills btn1 for no reason and the animation is totally off the track....I paste my sample code here and really need someone's help. I have tried to solve this for more than 10 hours......Thanks for any replies....

       

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

       

      <fx:Script>

      <![CDATA[

      protected function btn1_clickHandler(event:MouseEvent):void

      {

      currentState="state2";

      }

       

      protected function btn2_clickHandler(event:MouseEvent):void

      {

      currentState="state3";

      }

       

       

      ]]>

      </fx:Script>

       

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

       

       

      <s:states>

      <s:State name="state1"/>

      <s:State name="state2"/>

      <s:State name="state3"/>

      </s:states>

       

       

       

      <s:transitions>

       

       

      <s:Transition toState="state2" >

      <s:Parallel>

       

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

      <s:AddAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" />

      <s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}"/>

       

      </s:Parallel>

       

      </s:Transition>

       

      <s:Transition toState="state3" >

      <s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}"/>

       

      </s:Transition>

       

       

      </s:transitions>

       

      //the labels and buttons I want to fade

       

       

       

      <s:Label y="10" text="label1" id="label1" includeIn="state2" />

      <s:TextInput y="30" id="textInput1" includeIn="state2" />

      <s:Label y="50" text="label1" id="label2" includeIn="state2" />

      <s:TextInput y="70" id="textInput2" includeIn="state2" />

      <s:Label y="90" text="label1" id="label3" includeIn="state2" />

      <s:TextInput y="120" id="textInput3" includeIn="state2" />

       

       

       

       

       

      <s:Button y="180" y.state2="350" label="btn1" id="btn1" click="btn1_clickHandler(event)"/>

      <s:Button y="250" y.state2="550" label="btn2" id="btn2" click="btn2_clickHandler(event)"/>

       

       

       

      </s:Application>

        • 1. Re: Flex glitch???
          David_F57 Level 5

          hi,

           

          I changed it around a bit, it can be optimised alittle better but didn't have much time, you didn't need 3 states so i removed state 1 and made state 3 the default. Hopefully this will help you a little.

           

          David.

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

             xmlns:s="library://ns.adobe.com/flex/spark"

             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" currentState="state3">

           

          <fx:Script>

          <![CDATA[

          protected function btn1_clickHandler(event:MouseEvent):void

          {

          currentState="state2";

          }

           

          protected function btn2_clickHandler(event:MouseEvent):void

          {

          currentState="state3";

          }

          ]]>

          </fx:Script>

           

          <s:transitions>

          <s:Transition toState="state2" >

          <s:Parallel>

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

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

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

          </s:Parallel>

           

          </s:Transition>

           

          <s:Transition toState="state3" >

          <s:Parallel>

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

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

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

          </s:Parallel>

          </s:Transition>

          </s:transitions>

           

          <s:states>

          <s:State name="state2"/>

          <s:State name="state3"/>

          </s:states>

           

          <s:VGroup id="tagGroup" x="10" y="30" includeIn="state2">

          <s:Label text="label1" id="label1"/>

          <s:TextInput id="textInput1"/>

          <s:Label text="label1" id="label2"/>

          <s:TextInput id="textInput2"/>

          <s:Label text="label1" id="label3"/>

          <s:TextInput id="textInput3"/>

          </s:VGroup>

          <s:Button label="btn1" id="btn1" click="btn1_clickHandler(event)" x.state3="-1" y.state3="20" x.state2="-1" y.state2="170"/>

          <s:Button label="btn2" id="btn2" click="btn2_clickHandler(event)" x.state3="-1" y.state3="49" x.state2="-1" y.state2="202"/>

          </s:Application>

          • 2. Re: Flex glitch???
            jerry98225 Level 1

            Very very nice David! Thanks a millions.

             

            Do you know what happened in my original codes? I still can't explain the weird behavior. I believe I make everything correctly except the extra state that I don't need.

            • 3. Re: Flex glitch???
              David_F57 Level 5

              hi,

               

              , I looked at the code and thought that could be done a little differently and changed it without testing for the error. Its strange though as your code looks functional, unless the first state caused some sort of issue. Its 3:30 am here so I won't bother to look now but will sometime after sleep time .

               

               

              David

              1 person found this helpful
              • 4. Re: Flex glitch???
                jerry98225 Level 1

                Thanks David. I am so glad you helped me about this. I was very frustrated before. Anyway, please get back to me about my original issue if you don't mind.   I just don't know what's going on in my old codes and want to learn more........

                • 5. Re: Flex glitch???
                  David_F57 Level 5

                  hi,

                   

                  Definitely your redundant state was part of the issue, in debug mode I noticed that the draw regions were in the wrong place after moving from the default state in your original code, plus pixel alignment was not to good between the states.

                   

                  As you get used to this stuff you will find it becomes second nature(transitions are not my strongest area so forgive me if my code isn't the best).

                   

                  Anyway for states a few recommendations

                   

                  1. Get your component/group positioning correct in designview, switching back and forwards a few times between state views is a lot more efficient and less frustrating than doing it in codeview(and you can't get typing errors in designview )

                   

                  2. In flashplayer you can switch on a menu option (draw regions), this is invaluable as it shows redboxes for any object that is drawn to the screen this way you see alignment and placement issues between states in runtime

                   

                  David.

                  1 person found this helpful
                  • 6. Re: Flex glitch???
                    jerry98225 Level 1

                    Thanks David. I learn a lot from you.

                    • 7. Re: Flex glitch???
                      David_F57 Level 5

                      hi,

                       

                      Did you look at the example I did for your other post ?....

                       

                      A bit more learning for you

                       

                       

                      David.

                      • 8. Re: Flex glitch???
                        jerry98225 Level 1

                        Yes. I see it now. Another correct answer and helpful answer for you. Thanks for the help!