Line is accidentally rotating

[johanj63878112]

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?

[JoãoCésar · Accepted solution]

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.

[_keyframer]

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

[Colin Holgate]

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

[johanj63878112]

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]

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

[_keyframer]

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%.

[Colin Holgate]

It could be that snapping was turned off when I did my test. I turned it on before doing the manual fixing of the lines, but didn't go back and test hints again.