Skip to main content
B
Barry Weber
Participant
January 2, 2018
Answered

Horizontal Crawler moves vertically and jerks

  • January 2, 2018
  • 3 replies
  • 2051 views

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.

    This topic has been closed for replies.
    Correct answer Colin Holgate

    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.

    3 replies

    albertd9194959
    albertd9194959
    Inspiring
    January 4, 2018

    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
    albertd9194959
    Inspiring
    January 4, 2018

    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
    Colin HolgateCorrect answer
    Inspiring
    January 4, 2018

    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.

    UDESCO
    Adobe Employee
    UDESCO
    Adobe Employee
    January 2, 2018

    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.

    B
    Barry WeberAuthor
    Participant
    January 3, 2018

    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
    albertd9194959
    Inspiring
    January 3, 2018

    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,

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    January 2, 2018

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices