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

    Tweening dynamic vector shapes

    bartonsmith Level 1
      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.

      http://members.optusnet.com.au/expansiondesign/Picture%201.png

      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?

      Thanks
        • 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:
          http://www.directoratnight.com/2006/08/22/vertexlists-go-morphing/

          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
          end
          on exitFrame me
          pTheta = pCounter * pi() / 180.
          me.setToShape()
          pCounter = pCounter + 5
          if pCounter > 180 then
          pCounter = -180
          end if
          end

          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
          end
          • 2. Re: Tweening dynamic vector shapes
            bartonsmith Level 1
            thanks... wow i really have ALOT to learn :D