1 Reply Latest reply on May 17, 2011 4:47 PM by Jason Szeto

    animate top property

    Seglespaan Level 1

      Hi,

       

      is there any way to animate the top property of a ui component.

       

      Say i have a canvas thats 500 x 500

       

      I then have another canvas thats 100 px wide and give it a top, bottom and left of 0. thus it's fixed on the left hand side of the first canvas and will always stretch from top to bottom even when the first canvas is resized.

       

      However my question is, is there anyway to animate the top property to say 50, so that it will always remain 50 from the top, will always stretch to bottom and will remain fixed to left sid of first canvas.

       

      So I want to be able to slide the top up and down if you like but still keep the top constraint.

       

      From what I've read it looks like top is actually a style and not a property which is why when using tweenlite I get an error. Just wondering if anyone  knows a way of getting this effect.

       

      Cheers

       

      Tim

        • 1. Re: animate top property
          Jason Szeto Level 3

          If you are using Spark, then the Resize effect will handle the top style.I think the mx Resize effect will also handle the top style if you've got it inside of a Transition.

           

          Here is a Spark example:

           

          <?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 button1_clickHandler(event:MouseEvent):void
                      {
                          // TODO Auto-generated method stub
                          if (currentState == "normal")
                              currentState = "open";
                          else
                              currentState = "normal";
                      }
                  ]]>
              </fx:Script>
             
              <s:states>
                  <s:State name="normal"/>
                  <s:State name="open"/>
              </s:states>
             
              <s:transitions>
                  <s:Transition fromState="*" toState="*">
                      <s:Resize target="{main}"/>
                  </s:Transition>
              </s:transitions>
             
              <s:Button label="Toggle" x="150" y="10" click="button1_clickHandler(event)"/>
             
              <s:Group id="main" left="0" bottom="0" width="100" top="0" top.open="50">
                  <s:Rect left="0" top="0" bottom="0" right="0">
                      <s:fill>
                          <s:SolidColor color="0x00ff00"/>
                      </s:fill>
                  </s:Rect>
              </s:Group>
          </s:Application>

           

          Jason Szeto

          Flex SDK Engineer