Horizontal Crawler moves vertically and jerks

[Barry Weber]

https://www.dropbox.com/s/x0pgjlti4pxym7v/CANVAS.zip?dl=0

I cannot express how ridiculous the end of Adobe Edge Animate is.

I have several animations that I created in Edge that cannot be duplicated in

This pathetic Adobe Animate CC program.

I have often made crawlers that sweep from side to side like a panoramic

Or a set of images. Animate CC cannot export this in canvas to move smoothly

Or to move even in the correct direction.

This is supposed to sweep horizontally, yet whenever I export this to any of the

Jerky inferior formats that Animate CC offers, it tries to move vertically.

See the flawlessly smooth movement that Edge Animate provided here:

http://thebootshack.com

I have uploaded the source files and exports to a dropbox.

If anyone who is expert in this Animate CC would be willing to download and

Examine the files to offer any suggestions how to make this program

Function like Edge Animate did I would appreciate any input you can provide.

Note, it previews very very jerky in Animate CC

But fails to move properly in OAM or HTM5 Canvas.

[JoãoCésar]

You are using two different symbols in your animation.

In the first frame, you are using a Movie Clip called "Symbol 1" in the Library. In frame 2, you are using a Graphic called "Tween 1" in the Library. Both have different registration points.

One thing you can do is to set both keyframes to use either "Symbol 1" or "Tween 1". In this way, the registration and transformation points will be in the same place and the tweening will behave like you expect it to.

[UDESCO]

Hi Barry,

There were a couple of issues in your file:

1. The two ends of your classic tween had two different symbols. This was causing the entire x-axis movement to ignore.

You should remove the tween, remove the symbol at the end frame then place the same symbol used in first frame on the last frame as well and position it as desired. Now apply classic tween again.

2. The jerkiness can be overcome by increasing the FPS to 60 after enabling the below checkbox in Properties panel. This will maintain the original animation timing even with the increased fps.

                                  

Let me know if you still face issues.

[Barry Weber]

Dropbox - CANVAS60FPS.zip

Thank you so much for your help, it is improving,

however the quality of the animation is extremely poor and still appears to pause and jerk a bit.

Is there a quality setting that I am missing in the publish settings?

See the link in the initial post the website that the Adobe Edge Animate file plays so well in compared to this.

[albertd9194959]

Animate Canvas converts animated content into Javascript Tweens.

In chrome, inspect the page, and then go to performance and enable CPU throttling, you will see the current animation becomes really bad!

So, if you want the animation to be perfect, you will need to use javascript and a ticker timer (with an "accumulator" if your worried about performance hits) to ensure consistent playback.

Also, use Classic Tweens where possible, the animation to tween conversion is lighter.

(For your example, classic tween uses the start and the end location to move the object. Motion tween is similar but breaks the motion up into smaller 5 frame chunks with positions)

Regards,

[Colin Holgate]

Albert talked about a different problem, which is how to keep things going in real time. Your issue is that you have used Motion Tweens. Those convert to the worst possible performing tween. Change to using Classic Tweens, and also only use presets, with a strength of -100 to +100. Don't do a custom Ease tween, it will then go back to performing very poorly.

[albertd9194959]

Colin, unfortunately not, its a known problem with standard javascript libraries (as Animate exports) and choppy animations in HTML5.

Animate uses the createJS libraries for its animations (When using canvas).

As said above, Clasic tween is less intensive, as it uses a start and then end point to move the object, with the "new" motion tween, it breaks the movement up into a series of multiple tween functions, this will have a greater impact on perfomance.

You have three options, Animate Optimisation or CSS scrolling or  External libraries  that are optemised for animation:

Animate Optemisation: ( Using animate as is, but optimising your banner with code to work )

White Paper: HTML5 Banner Ads With CreateJS

CSS Option: ( Animations and transitions are applied directly to a style sheet, instead of manually applying values on each frame like you would in JavaScript, CSS defines rules that the browser will implement to render the animation.)

Infinite All-CSS Scrolling Slideshow | CSS-Tricks

HTML Marquee Image

CSS Scrolling Image

External Library Option: ( These have fallbacks and specific optemisations to enable smooth javascript animations:)

GSAP, the standard for JavaScript HTML5 animation | GreenSock

https://webdesign.tutsplus.com/tutorials/silky-smooth-web-animation-with-velocityjs--cms-24266

Here are some examples using said opetmised animations:

Animated Background Headers | Codrops

Regards:

[albertd9194959]

Here is something similar, vtgaming 1 created some nice examples of frame rates, and multiple tween types.

How to get smooth animation ? ("translate" animation instead of "top-left" value animation)

There is still "jiggy" motion on both examples when performance drops (As its using tweenJS as its frame rate dependent), just less noticeable on 30fps.

just.emma noted that if you use code its better, remember, all animations automatically get converted to code on HTML5 export.

EDIT:
The simplest way is to change it to a time based animation:

EaselJS Tutorial: Animation and Ticker

from your example using motion tween: ( the tween has multiple position entries with pause states, this is why it is more intensive)

this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:2316.5},0).wait(1).to({x:2311.9},0)..........the list goes on for a very long time.

now using classic tween:

this.timeline.addTween(cjs.Tween.get(this.instance).to({x:-1417},506).wait(1));

In the website example you included, the banner is controlled with CSS hence the smooth motion.

Regards.

[Colin Holgate · Accepted solution]

I'm not questioning your solutions to the problem, I'm just saying that using Classic Tweens with no custom easing, will give smooth 60 fps animation without needing any code solutions.