Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
defransekamer

GSAP x Animate CC template - CPU question

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×