GSAP x Animate CC template - CPU question

[defransekamer 0 Likes (Newbie)]

Hi Greensock,

What parts of Cory's script exactly lowers the CPU of the banner?
I've spent a day trying to figure this out and reading his whitepaper..
Since the template is a little outdated I'm trying to implement that into a fresh new Animate CC document (my_banner.zip).

Live preview of the template: http://www.defransekamer.com/wp-content/uploads/2016/banners/abn/nieuwbouw/test/GSAP_AdStarter_Demo/GSAP_AdStarter_Demo.html

Can somebody help me out? 

Thank you

Michael

GSAP-AnimateCC-Starter-Files.zip

GSAP_AdStarter_Demo.html

my_banner.zip

[davi 100 Likes (Specialist)]

I wouldn't say there's anything in particular that lowers CPU specifically. However, there is stuff that checks IF it's not playing back fast enough or slowing down and then has a fallback which you set. You can even lower the frame rate which will help CPU if it is playing back slower. That's all that code watchFPS, fail count, and on "slow". In that example, the fallback is that it shows the backup image if it's runs slow a specific number of times. There's also time sync which makes all movie clips sync their timelines (but this can sometimes force clips to keep up with one another and can look choppy (which gives the appearance of it using too much CPU)

[defransekamer 0 Likes (Newbie)]

Hi Davi,

Thanks for helping. I tried that part in my HTML file but the banners are still asking much CPU:
http://www.defransekamer.com/portfolio/x5/

<script>
function init() {
var failCount = 1;

	ad.on("slow", function(evt) {
		if (failCount === 0) {
			evt.preventDefault(); 
			failCount++; 
			this.watchFPS(15, 1); 
		} else if (failCount === 1){
			createjs.AdHelper.showAltImage(canvas, "images/backup_300x250.jpg", "javascript:doClickthrough(this)", "BannerWave", "_blank");
		}
	});
    
    // to test watchFPS, lower the FPS after creating the AdHelper, using the changeFPSTimer below
	// to test timeSynch, remove watchFPS from AdHelper, and then change the FPS using the changeFPSTimer below
	//var changeFPSTimer = window.setTimeout(changeFPS, 5000, 5);

	// to test directly calling Adhelper methods, use the testMethodTimer below
	//var testMethodTimer = window.setTimeout(testAdHelper, 5000, "showAlt", 2000);
    
    // changes the FPS for testing purposes
	function changeFPS(framerate){
		createjs.Ticker.setFPS(framerate);
	}
</script>

This is where I used the template and the banners preview with normal CPU:
http://www.defransekamer.com/portfolio/x3/

Its like I'm missing something..

banner.zip

[davi 100 Likes (Specialist)]

Firstly, you don't need the banner playing back at 60FPS, 30FPS will be just fine. I'm also not able to tell the difference between the two too much. I 'think' when I first played one back it kind of had a little jank / stutter but that may have been because of the preview page you're using which is loading while the banner is loading and playing back. I haven't checked out your files but the first thing I'd say and what usually causes this is time syncing. Try commenting out the line of code ".timeSync()" -- (around line 130). This doesn't look necessary in this concept.