Choppy animations

[alastair-o]

Hi, I've started my first project in Adobe Animate CC 2019. The frame rate is 24fps. 

It has a simple introduction - a cloud drifts from outside the stage to the centre of the screen (from left to right). I created a blue background on a separate layer for the sky. I converted the cloud to a symbol and created a classic tween to move it.

The animation plays fine when I run it inside the cloud layer. The problem is, when I return to the full timeline and play it the cloud moves in a jerky manner across the screen. If I remove the sky background the animation plays smoothly. I'm not sure why such a simple setup would upset the animation.

The problem occurs regardless of whether the sky background is a shape or has been converted to a symbol.

Can anyone help?

[n. tilcheff]

Hi mate,

The preview in the program has never been great to begin with. Use Ctrl+Enter to publish a SWF and preview. This usually should maintain playback speed.

Last two versions of Animate - 18 and 19 - have worse general performance compared to previous ones.

Animate does not use GPU acceleration and as far as I know can't utilise well multi-core CPUs either.

If you have applied blur to the cloud and it has a large surface area this could be one thing that slows it down.

A way to reduce the load may be to duplicate your vector cloud and convert the duplicate to bitmap. Then guide and hide your verctor cloud for the final render.

Hope this helps!

[alastair-o]

Thanks for the info. I screened the animation as a SWF but the problem still showed up there.

The cloud is actually quite small and has no other effects applied to it.

I deleted the background sky layer and instead set the stage colour to sky blue, which seemed to make the animation run a bit smoother, although surely I shouldn't have to do this just to get a decent looking video?

[n. tilcheff]

What you describe is definitely not normal behaviour, mate.

Maybe your system does not meet the minimum requirements or there have been reports of terrible performance on 4k displays.

Difficult to tell, but there should be some reason for this.

Try with a rectangle instead of the cloud -  just to see if performance improves. Maybe the cloud has too many points and is extremely heavy to render...

Good luck

[alastair-o]

Ok, so I searched online for similar animations, and mine doesn't seem as odd now.

I think it might be a matter of perspective - because the object is gliding quite slowly into place it just looked a bit jittery at first to me (as I said it's my first Animate project). My iMac is only a few years old anyway.

By the way, is it possible to have objects repeatedly overlap each other without creating a new layer each time they are rearranged? It's hard to explain but I'm trying to have the cloud and sun compete for attention by sending one in front of the other, then bringing the one in the background to the foreground again, then repeat the process a few times. I'm having to create a new layer each time one overlaps the other but was just wondering if there's a much easier way of doing this while sticking to just two layers.

Thanks again

[Marieke2d]

This is a common problem with objects sliding SLOWLY across the canvas. I tried a bunch of things and NOTHING helps. Better choose another animation program if you use it for animation only.

[PVerhoeven]

By the way, is it possible to have objects repeatedly overlap each other without creating a new layer each time they are rearranged? It's hard to explain but I'm trying to have the cloud and sun compete for attention by sending one in front of the other, then bringing the one in the background to the foreground again, then repeat the process a few times. I'm having to create a new layer each time one overlaps the other but was just wondering if there's a much easier way of doing this while sticking to just two layers.

I haven't checked much of the latest features for the past couple of versions, but I don't think it's possible. Some software such as Toonboom uses a 3d stage which allows sorting symbols by individual z-index, regardless of layer order. But most applications, including Animate, use a 2d stage and layer = depth paradigm.

As for performance, are you using alpha transparency? That's usually a bottleneck, especially if it covers much stuff below it. You can try turning the cloud into a bitmap and see if that helps (just don't zoom it...).

[kdmemory]

Hi Alastair

I'm assuming we are talking AS3 here. And not HTML5/Canvas?

When you just started in Animate, as you say, it might be a little intimidating what I'm going to suggest now. Instead of creating for each change of overlapping (sun/cloud) a new layer, consider to use code to manage what you want.

If your cloud animation, moving from left to the center, is a more or less a linear movement on the x and/or y axes, you can use the Tween Class to code your animation. Animations via code often seem smoother than tweens via timeline. As an introduction to the Tween Class this tutorial of RebuplicOfCode might be handy.

Coding your animations is particularly helpful when you want to change the stacking order of display objects in runtime. Sun and moon are movieclips, they both occupy an index position within the display list, either of the root (main timeline) or a parent mc container. This index position value can be manipulated in runtime with Actionsscript.

Look i.e. into swapChildren() method how you can swap the stacking order of sun and cloud. Additionally you could time an interval by using the Timer Class for creating an interval sequence.

A few more key techniques are

• numChildren movieclip property
• setChildIndex() method
• getChildIndex() method

Well, take this as a suggestion

Klaus

[Nick Gioia]

2 things come to mind. Either your computer can't handle it or it might be your publish settings.