2 Replies Latest reply on Jun 30, 2007 11:15 PM by bartonsmith

    Tweening dynamic vector shapes

      So I am wanting to blend/morph/tween a sequence that gives a rectangle the appearance that it is "snapping" in place by bowing and pinching the shape. Hopefully this image helps explain it.


      Just imagine that the blend is happening in the one spot; that the 4 shapes are sitting on top of each other.
      Ignore the colour.

      The only way I know how to do this is with frame by frame animation and exporting/importing each image step from illustrator. But I've done that before and it is too tedious.
      I thought maybe there was someway to edit the points of a vector shape at different keyframes?

        • 1. Re: Tweening dynamic vector shapes
          Doc Raman Level 1
          vertexList is the property you that you can control for a vector member.

          A quick demo at:

          and here is a quick behavior that will tweak a rectangle


          property pSprite
          property pMem
          property pW, pH, pD, pTheta

          property pCounter

          on beginSprite me
          pSprite = sprite(me.spriteNum)
          pMem = pSprite.member
          pW = 200.
          pH = 100.
          pD = 20.
          pCounter = 0
          on exitFrame me
          pTheta = pCounter * pi() / 180.
          pCounter = pCounter + 5
          if pCounter > 180 then
          pCounter = -180
          end if

          on setToShape me
          p1 = point(-pW, -pH)/2
          h11 = pD * point(cos(pTheta), -sin(pTheta))
          h12 = pD * point(-cos(pTheta), sin(pTheta))

          p2 = point(pW, -pH)/2
          h21 = pD * point(cos(pTheta), sin(pTheta))
          h22 = pD * point(-cos(pTheta), -sin(pTheta))

          p3 = point(pW, pH)/2
          h31 = pD * point(-cos(pTheta), sin(pTheta))
          h32 = pD * point(cos(pTheta), -sin(pTheta))

          p4 = point(-pW, pH)/2
          h41 = pD * point(-cos(pTheta), -sin(pTheta))
          h42 = pD * point(cos(pTheta), sin(pTheta))

          aL1 = [#vertex:p1, #handle1:h11, #handle2:h12]
          aL2 = [#vertex:p2, #handle1:h21, #handle2:h22]
          aL3 = [#vertex:p3, #handle1:h31, #handle2:h32]
          aL4 = [#vertex:p4, #handle1:h41, #handle2:h42]

          myVertexList = [ aL1, aL2, aL3, aL4]
          pMem.vertexList = myVertexList
          • 2. Re: Tweening dynamic vector shapes
            bartonsmith Level 1
            thanks... wow i really have ALOT to learn :D