3 Replies Latest reply: Aug 2, 2011 8:53 PM by zhanglog RSS

    How can I animate an object to the center of a container?


      I've been having some trouble with this recently. If I have an object in a container centered using object.horizontalCenter = 0, how can I move it (animated) away, then back to the center? I understand it is possible using s:move and specifying xBy to move the object away, then -xBy to bring the object back. Here is an example:


      <s:Move id="moveLeft" xBy="-100" />
      <s:Move id="moveRight" xBy="100" />
      //moves object to the left
      //moves object back to its original position


      Although this works, it gets difficult when you are dealing with multiple objects (think a stack of objects), and causes a lot of trouble when moving through multiple items in the stack at a time.


      The solution I came up with is logically simple:

      object A is currently centered, object B and object C are out of frame

      1. Set object B x to 100 pixels right of the center
      2. Use s:Move to animate object A x to 100 pixels left of the center
      3. Use s:Move to animate object B x to the center


      The issue with the above solution is that the pixel values of xTo in the s:Move effect are relative to the left of the parent container. Is it possible to have the pixel values of xTo in the s:Move effect to be relative to the center of the parent container?


      tl;dr How can I use <s:Move ... xTo="0" /> to center an object in a container?