1 Reply Latest reply on Mar 5, 2010 12:25 AM by crofteur

    Weird Resize Effect Problem

    Rony.Nair

      Hi All,

      I am new to flex and running into a weird resize effect problem.

       

      Here is a simple resize code ( I modified the code I got from here)

       

       

      I have a HDivideBox with 2 HBoxes in it. And when I click a button I want to programatically resize it. Everything works fine until I add a simple resize effect and then the resize does this weird animation Any idea what is going on and how I can fix this.

       

      Here is my MXML file

       

       

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

      <!-- http://blog.flexexamples.com/2008/10/01/applying-an-effect-when-an-hbox-container-is-resiz ed-in-flex/ -->

      <mx:Application name="HBox_resizeEffect_test"

              xmlns:mx="http://www.adobe.com/2006/mxml"

              layout="vertical"

              verticalAlign="middle"

              backgroundColor="white">

          <mx:states>

              <mx:State name="Collapse">

                  <mx:SetProperty target="{hBox1}" name="width" value="95%"/>

                  <mx:SetProperty target="{hBox2}" name="width" value="5%"/>

              </mx:State>

          </mx:states>


      <mx:Resize id="resize" />

       

          <mx:HDividedBox id="hDividedBox"

                  width="100%"

                  height="100%">

              <mx:HBox id="hBox1"

                      backgroundColor="haloGreen"

                      resizeEffect="resize"

                      width="70%"

                      height="100%"

                      >

                  <mx:Button label="Button" click="onClick()"/>

              </mx:HBox>

              <mx:HBox id="hBox2"

                      backgroundColor="haloBlue"

                      resizeEffect="resize"

                      width="30%"

                      height="100%"

                      />

          </mx:HDividedBox>

      <mx:Script>

      <![CDATA[

      function onClick():void{

      if(null == currentState || "" == currentState)

      currentState = "Collapse"

      else

      currentState  = null;

      }

      ]]>

      </mx:Script>

      </mx:Application>

       

      Thanks All

      Rony