Skip to main content
J
johanj63878112
New Participant
May 21, 2018
Answered

Line is accidentally rotating

  • May 21, 2018
  • 3 replies
  • 1302 views

Hi. I have made a cube using the line tool so it looks "3d". I want to animate the cube to make it  look like its turning. I have separated each line into separate layers. I have made new keyframes and moved the lines (changing the position of anchor points) and added a shape tween. Some of the lines now move the way I want them to, but some are rotating before settling down in their new position. Why?

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Hi.

    If you are using shape tweens, consider using shape hints.

    And can you show us your animation? It can be the FLA itself, a screenshot, GIF, video...

    Because there are lot of ways of doing this kind of animation.

    3 replies

    J
    johanj63878112Author
    New Participant
    May 22, 2018

    So... nevermind the wonkiness of the "cube", its a work in progress ,

    but as you can see in the first gif, there´s the rotating error,

    but in the second gif, where I added a shape hint, the line moves the way I want it.

    So in this case, the answer was shape hints!

    Thank you!

      Colin Holgate
      Colin Holgate
      Inspiring
      May 22, 2018

      Shape hints work better with thick lines that are fills. In my test I was using lines, and hints wouldn't even attach.

      _keyframer
      _keyframer
      Brainiac
      May 22, 2018

      That seems counter-intuitive because shapes have more vector data. I have no issues with shape hints on lines - I suspect you don't have the snap feature on. You need that 100%.

      Animator and content creator for Animate CC
      _keyframer
      _keyframer
      Brainiac
      May 22, 2018

      Unfortunately Shape tweens can often be very unpredictable. I often experience a simple stroke consisting of 2 vector points flipping ends during a simple shape tween motion. Shape hints usually work but not all the time.

      Here's another trick I've used when animating lines that comprise a cube or square:

      After drawing your square, distribute to layers each line so that one stroke is on it's OWN layer. Then create keyframes down your timeline acrtoss all layers and shape tween. This basically is trying to simplify tweening for Animate as much as possible and you will have better results.

      Unfortunately creating what would seem like a straightforward vector animation can involve many clever workarounds to achieve the desired result.

      Here's a quick and dirty tutorial: 2D Vector Brush Animation – Keyframer

      Animator and content creator for Animate CC
      Colin Holgate
      Colin Holgate
      Inspiring
      May 22, 2018

      He did mention in his first post that he had one line per layer already.

      I just figured out one interesting thing about shape tweening lines. The problem case seems to be when one end changes from being to the left of the other end, to being to the right of the other end (or from above to below). That can be worked around by adding more keyframes and manually adjusting the line endings.

      Here's a test, which I didn't spend a lot of time fixing the line endings. But it sort of works:

      http://colin.scienceninja.com/linetween.html

      and the FLA:

      http://colin.scienceninja.com/linetween_HTML5.fla

      JoãoCésar17023019
      JoãoCésar17023019Correct answer
      Inspiring
      May 21, 2018

      Hi.

      If you are using shape tweens, consider using shape hints.

      And can you show us your animation? It can be the FLA itself, a screenshot, GIF, video...

      Because there are lot of ways of doing this kind of animation.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices