Highlighted

Choppy animations

New Here ,
Jun 09, 2019

Copy link to clipboard

Copied

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?

Views

765

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Choppy animations

New Here ,
Jun 09, 2019

Copy link to clipboard

Copied

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?

Views

766

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 09, 2019 0
Guide ,
Jun 09, 2019

Copy link to clipboard

Copied

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!

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2019 1
New Here ,
Jun 10, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2019 0
Guide ,
Jun 10, 2019

Copy link to clipboard

Copied

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

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2019 0
New Here ,
Jun 10, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2019 0
Explorer ,
Jun 18, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2019 0
Community Beginner ,
Jun 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 21, 2019 0
Advocate ,
Jun 22, 2019

Copy link to clipboard

Copied

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

Well, take this as a suggestion

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 22, 2019 1
Adobe Community Professional ,
Jun 24, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2019 1