Skip to main content
andrewi73782690
andrewi73782690
New Participant
July 4, 2018
Answered

Final animation longer than in timeline/file?

  • July 4, 2018
  • 1 reply
  • 1951 views

Hi there.

I'm having a very strange experience with HTML5 animations created in Animate CC. My final animation is running for longer than the time/duration suggested by the timeline in the working file!

So, for example: I have a 30 second (max) Google display ad. I'm looping my animation 3 times, with Javscript stopping the final loop before it reaches the full 10 seconds (for that loop).

So the total time should be:

Loop 1 - 10 secs

Loop 2 – 10 secs

Loop 3 – 9 secs

Tota  l– 29 seconds

But Google Display Network is rejecting these ads because they are too long. This is not the first time it has happened!

So this caused me to time the ads playing in Chrome, using a stop watch (not super-accurate, admittedly, but close enough). They were definitely coming in over 30 seconds long, and I could see that the first two loops were both running for longer than 10 seconds... how can this be??

The files are set up at 30 fps, the timeline is pretty clear and there is nothing too complex in the design of the files (as far as I can see). They are all under the 150kb limit for GDNs (not that this should matter).

Some ads seem to be getting through, others not.

I'm very confused. Can anyone help?!

Thanks

Andy

This topic has been closed for replies.
Correct answer chenjil43641795

Not Google limits 20 frames per second.

The frame frequency you set in the software is invalid,

You set it to 30 frames per second, but the actual playback is 20 frames per second.

So it's the software problem.

30X3=900,900/20=45S

So the animation actually plays for 45 seconds.

This leads to more than the length of the.

Links, you mainly look at this section. You can then copy the code to the first frame.

30 is the frame frequency you want to set

Timing Modes

Most modern browsers support a new animation related API called requestAnimationFrame. It provides the benefit of syncing programmatic changes with screen redraws which can result in smoother looking content. It will also throttle the framerate of background content (such as an unfocused tab) to reduce CPU and battery use.

The Ticker.timingMode allows you to choose what API to use to drive the heartbeat. By default, it uses Ticker.TIMEOUT and the setTimeout API. This is supported in all browsers, and provides a predictable, elastic framerate but without the benefits of requestAnimationFrame. It also allows you to reduce CPU/GPU load by reducing framerate.

There are two modes for using requestAnimationFrame, which will automatically fall back to using setTimeout if the browser does not support the API. Ticker.RAF simply passes through the RAF heartbeat, ignoring the specified framerate completely. Because RAF frequency is indeterminate, your content should be time based when using this mode.

The Ticker.RAF_SYNCHED mode attempts to match up the requestAnimationFrame heartbeat to your specified framerate. This mode provides many of the benefits of the TIMEOUT and RAF modes, but will generally have the highest variance in frame times. It typically works best when the framerate is set to a divisor of 60 (ex. 10, 12, 15, 20, 30).

?

1

2

createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

createjs.Ticker.framerate = 30;

1 reply

chenjil43641795
chenjil43641795
Brainiac
July 4, 2018

I remember the default is 20fps.

The settings within this software are invalid.

It plays 20 frames per second even if it is set to 30 frames per second.

Really want Adobe to fix these.

Take a look at this.

createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

createjs.Ticker.framerate = 30;

https://www.createjs.com/tutorials/Animation%20and%20Ticker/

    andrewi73782690
    andrewi73782690Author
    New Participant
    July 4, 2018

    Thanks – just changing the frame rate in Animate to 20fps instantly fixed this (I scaled the frames proportionally).

    With this piece of knowledge I did some further searching... now it's not clear as to whether 20 fps or 24fps is the correct (maximum) frame rate. I've tried both, and both are an improvement on 30ps.

    I have to admit that the content of the above link was a little too advanced for me, so maybe the answer is within there, but I couldn't understand it? Does Google/Chrome only offer 20/24fps playback? Or does Animate falsely run a finished animation at 20/24fps even when created with a 30fps timeline?

    Cheers

    Andy

    chenjil43641795
    chenjil43641795Correct answer
    Brainiac
    July 4, 2018

    Not Google limits 20 frames per second.

    The frame frequency you set in the software is invalid,

    You set it to 30 frames per second, but the actual playback is 20 frames per second.

    So it's the software problem.

    30X3=900,900/20=45S

    So the animation actually plays for 45 seconds.

    This leads to more than the length of the.

    Links, you mainly look at this section. You can then copy the code to the first frame.

    30 is the frame frequency you want to set

    Timing Modes

    Most modern browsers support a new animation related API called requestAnimationFrame. It provides the benefit of syncing programmatic changes with screen redraws which can result in smoother looking content. It will also throttle the framerate of background content (such as an unfocused tab) to reduce CPU and battery use.

    The Ticker.timingMode allows you to choose what API to use to drive the heartbeat. By default, it uses Ticker.TIMEOUT and the setTimeout API. This is supported in all browsers, and provides a predictable, elastic framerate but without the benefits of requestAnimationFrame. It also allows you to reduce CPU/GPU load by reducing framerate.

    There are two modes for using requestAnimationFrame, which will automatically fall back to using setTimeout if the browser does not support the API. Ticker.RAF simply passes through the RAF heartbeat, ignoring the specified framerate completely. Because RAF frequency is indeterminate, your content should be time based when using this mode.

    The Ticker.RAF_SYNCHED mode attempts to match up the requestAnimationFrame heartbeat to your specified framerate. This mode provides many of the benefits of the TIMEOUT and RAF modes, but will generally have the highest variance in frame times. It typically works best when the framerate is set to a divisor of 60 (ex. 10, 12, 15, 20, 30).

    ?

    1

    2

    createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

    createjs.Ticker.framerate = 30;

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