Jump to content
Search Community

GSAP x Animate CC template - CPU question

defransekamer test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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)

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...