Copy link to clipboard
Copied
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
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
Most modern browsers support a new animation
...Copy link to clipboard
Copied
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/
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
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;
|
Copy link to clipboard
Copied
Great, that's really helpful.
Pasting the code into the Actions panels on the first frame does indeed work.
Also setting the fps properties to 20fps, and designing in this space from the beginning, would also work.
The only thing which doesn't match up i the calculation you suggest for the duration – my ads were coming in at approx 33 seconds long, when they should have been around 29 seconds. I think this is closer to the ratio of 24fps : 30fps, which would increase the duration by a multiplication of 1.25.
There do seem to be a few posts around suggestions that 24fps is the default for html 5 ads in Animate.
Thanks again
Copy link to clipboard
Copied
You're welcome
Find more inspiration, events, and resources on the new Adobe Community
Explore Now