ellipse basic form tween

[RMH MEDIA]

Hi there.

I want to have an animation, that looks like a part of a circle is drawn. So, it starts with nothing, then a small tiny bit of a circle, and that then turns more and more into a circle. Like a dial, or as if the hands of a clock would draw a line.

I use for that a basic ellipse form, and specify there the values accordingly (start angle, end angle, radius).

Then I copy that keyframe, move it 50 frames or so back, and change the value for the end angle.

I want this now animated. All that is different between the two keyframes is the value of the end angle of the ellipse form. But I can't get that animated. Adobe Animate turns the ellipse basic forms into shapes or clips, and then tries to weirdly move between them, instead of just altering the value of the ellipses.

Is it possible to achieve what I want to achieve, and if so  how?

Thanks for any help.

[kglad · Accepted solution]

draw a circle and animate a mask that reveals the circle.

[RMH MEDIA]

Ok, I'll try that.

But... there is really no way to create an animation between two ellipse primitives? This seems weird. Why should you be able to create them in an animation tool but having then no way to animate them...

[kglad]

you can but it's a pain to control the tween.

[ClayUUID]

This is exactly what shape hints are for.

Adobe Flash Professional * Shape tweening

[RMH MEDIA]

I fear a shape hint won't do it in such case. I mean, the thing basically like one piece of a pie chart with a hole in the center. If you try to shape tween directly between two of those steps, AA will move them into each other, while all I want is a value changed.

It seems to be the best course of action to follow the one tutorial, where you work with masks to get to that result.

Thanks for all the replies and input.

[kglad]

doing with shape hints is possible, but it's more work than it should be.  using a mask is quick and easy.

(imo) using actionscript to animate shape/curve tweening is easier than shape tweening (see http://www.kglad.com>snippets>shape tweening or curves or function graphs) with an swf capable browser.

[_keyframer]

I recently animated the exact rotating dial you described. It was a lot trickier than i thought it should be. I'll try and find itto make it available to you. I used masking but had to divide the circle in half and animate each half separately.

I use other animation programs where interpolation between vector points works 100x better. I don't know why the shape tween engine is so unreliable in Animate but it's been this way forever. I honestly feel like hints should always be applied automatically and invisibly - behind the scenes for you.

I'll lookfor that sample file in a little while.

[JoãoCésar]

I agree.

I wish Animate team could implement a new shape tween engine that works the way we expect it to work.

[ClayUUID]

_keyframer  wrote

I honestly feel like hints should always be applied automatically and invisibly - behind the scenes for you.

Errr... that's exactly what it does do. If it didn't do that, shape tweens wouldn't work at all.

[_keyframer]

I truly understand that - what I meant was we still have a feature that has to be used to give the tween engine even more of a hint. That should be the default level of hinting. I have taken a simple stroke with 2 end points only and move 1 single end point across 2 keyframes and after applying a shape tween, the 2 end points flip completely. So the level of default "hinting" isn't enough - that was my point.

[ClayUUID]

_keyframer  wrote

I truly understand that - what I meant was we still have a feature that has to be used to give the tween engine even more of a hint. That should be the default level of hinting.

"Shape hints" are by definition the human telling the computer specific vertices to link together in a shape tween. So saying that should be the default means you're saying that shape tweens shouldn't work until you've manually added some hints.

[_keyframer]

Nope. Sorry, I was saying the opposite. I'll try and say it again but differently.

Problem: Applying a Shape tween to even a simple vector image often results in very unexpected and unintuitive animation.

Solution: Manually apply Shape Hints to get the animation to work as intended.

What I suggested: Have the shape tweening engine INCLUDE shape hints behind the scenes to promote the intended interpolation succeed.

Animate, as we all know is a vector-based animation tool. Yet one of its most unreliable animation techniques involves the straight tweening of actual vectors. I'm talking simple tweening involving a stroke with 2 vector points and only 1 of those points being tweened across only 2 keyframes. Picture a vertical stroke and trying to animate the top vector point waving from left to right. What usually happens after applying a shape tween: The bottom vector point that doesn't move at all between the 2 keyframes gets flipped vertically by the tween. Unexpected behavior to say the least.

The fix: Shape Hints

My suggestion: Why not have the engine known as shape hints be a part of the Shape tweening engine? Have each vector point get a shape hint assigned to it automatically? Or whatever it takes to make the shape tweening engine smarter.

I use other vector animation programs that are, so far, flawless when it comes to interpolating complicated vector shapes across several keyframes in ways that make the Shape tween in Animate seem really really flawed.

I am NOT saying we make Shape Tweens not work at all until hints are applied. That is essentially the workflow we have now. Even with Shape Hints I have seen unexpected results trying to shape tween simple flat vector shapes.

Apologies to the OP as I think I took this thread off-topic.

[ClayUUID]

_keyframer  wrote

The fix: Shape Hints

My suggestion: Why not have the engine known as shape hints be a part of the Shape tweening engine? Have each vector point get a shape hint assigned to it automatically? Or whatever it takes to make the shape tweening engine smarter.

I repeat, shape hints are when the human tells the computer which vertices are linked in a shape tween.

Therefore, saying why not have shape hints applied by default is a nonsense statement. It's like saying, "Sometimes self-driving car AI doesn't do the right thing and you need an operator override... so why not just have operator override built in to the AI?"

The shape tween engine already internally tries to figure out the optimal way to tween two shapes between each other. That's how it's able to do anything without designer intervention. Sometimes the algorithm makes good choices, sometimes it makes bad choices. The entire reason the shape hint feature exists is to allow the designer to override the tween engine's decisions.

[_keyframer]

Clay, Not sure why you think i'm not understanding you. I can understand what you're saying. For some reason you aren't getting what I'm saying. let's agree to disagree but when the Shape Tween engine you seem to be defending does not do its job on the most simplest of levels, then I have to question why and ask for it to be improved.

"Sometimes the algorithm makes good choices, sometimes it makes bad choices."

More often than not it makes bad choices and all i suggested is a way for it to make better choices. You seem to be arguing to have it remain a bad choice maker. I have always understood Shape Hints are there to help us humans manually tell the shape tween engine what to do. Please don't continue to waste your time with large fonts and colors to get me to understand something i have understood and have used for many years. You're preaching to the choir.
We're on the same team.

[ClayUUID]

I think you're not understanding because what you're suggesting is literally impossible.

There are two claims in play here:

1. Shape hints are added by humans to override the decisions of the tween engine.

2. Shape hints could be added automatically and invisibly behind the scenes by the tween engine.

These two claims are fundamentally incompatible, because the tween engine cannot automatically incorporate human decisions to override itself.

So which claim are you refuting? #1 or #2?

[_keyframer]

Nevermind Clay. I'm not refuting anything. You seem to want me to be "wrong" no matter what my point was. Everyone else understood it but you seem to want to pick a fight.

The juice ain't worth the squeeze.

[Colin Holgate]

_keyframer means that if you draw something with the Pen tool, then move the nodes around without introducing any new nodes or handles, the tween ought to move each node from where it was on the first keyframe to where it is on the second keyframe. Currently it only does that some of the time, most times the nodes are tweened to the one that is closest in the second keyframe.

A shape hint feature of "put a hint on every node" would be one way to solve the problem. You could remove any that didn't help.

[_keyframer]

Thanks Colin. You said it better than I did LOL

Integrating Shape Hints with the Shape Tween engine is probably easier said than done. I'm just a caveman animator but I simply find it difficult to produce very smooth organic motion using vectors in Animate and I have been using this program for a very long time.

[_keyframer]

Here's an example file you can use to learn from. Let me know if it helps....

CircleDial.fla - Google Drive

[_keyframer]

Yesterday I was trying to animate a stylized simple 1 color flame effect in Animate and after 25min I was still struggling with only the 2nd keyframe. Even using Shape Hints the simple 4-point shape was imploding in on itself. Sometimes at first the interpolation acts as expected but then if you add easing, it breaks the motion completely. Not all the time, but it's so unexpected and frequent enough that I try and actually avoid using shape tweens which is a bummer for me as my animation style lends itself well to the organic nature of tweening actual vector curves.

I ended up using a different program and had the entire animation done in about 15 minutes. This is what it looks like and how I wish Animate CC would someday work when it comes to tweening actual vector points. Keep in mind there were no shape hints used (doesn't exist in this particular program) and no vector points were harmed in the making of this animation

ShapeTweenMoho.mp4 - Google Drive

[Nick Gioia]

_keyframer this an excellent example.