Jump to content
Search Community

Trouble with Cory Hudson's sample files

pfash test
Moderator Tag

Go to solution Solved by ohem,

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 All,

I think I finally figured out what has been causing my ongoing problems using Cory's "GSAP_Basic.fla" demo.

 

Here's what I've been experiencing:

 

1.) I unzip his GSAP Animation starter files (https://greensock.com/wp-content/uploads/2016/04/GSAP-AnimateCC-Starter-Files.zip)
 

2.) inside the GSAP_Basic folder is an html wrapper file that has this JS code in it:

 

<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---

canvas = document.getElementById("canvas");
exportRoot = new lib.GSAP_Basic();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);

stage.update();

createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}

</script>

 

3.) If I use a browser to view that wrapper I see a functioning GSAP animation. All OK

 

4.) However, if I open the FLA in that Basic folder and do Control > Test (and don't deselect the 'overwrite html file on publish' box under the advanced tab of the publish settings) then that wrapper html file is replaced with an html file that has this JS code in it:

 

<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---
canvas = document.getElementById("canvas");
exportRoot = new lib.GSAP_Basic();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
fnStartAnimation = function() {
  createjs.Ticker.setFPS(lib.properties.fps);
  createjs.Ticker.addEventListener("tick", stage);
}

}
</script>

 

...And the browser preview now only shows a white box with no animating content. This happened repeatedly.

 

It's as if the custom template in that FLA is not right and it's generating an html wrapper that has the wrong JS code in it (compare code in green above). I'm a beginner so maybe I'm misunderstanding this. Any insights?

Thanks much.

 

 

 

Link to comment
Share on other sites

  • Solution

Those templates are outdated; Adobe has made some changes to publishing since then.  If you're using Animate CC 2017, older templates won't work.

 

The best thing to do going forward is to reset to the default template, export it, and add back in any custom code such as linking to TweenMax, clicktags, the adsize meta tag, etc.  Then re-import it and you're good to go.

  • Like 3
Link to comment
Share on other sites

You are free to use my templates for Animate CC 2017 http://www.marjantrajkovski.com/html5-banners-templates/html5-banners-templates.zip

 

 

If you are using GSAP:

 

1. Open GSAP template

 

2. Change the size of banner in properties

 

3. Create movie clip with instance name e.g txt1 which is ID for GSAP

 

4. Open action panel and create GSAP animation e.g.:


tl = new TimelineMax();
tl.from(this.txt1, 1, {x:-100, ease:Back.easeOut});

 

5. Save with your custom name e.g. mybanner and publish

  • Like 2
Link to comment
Share on other sites

HI pfash, 

 

Sorry for the hassle. Yeah, Adobe changed things in Animate 2017. Cory provided new files and some notes. 

The good news is that you don't need to edit templates in order to use GSAP with Animate CC.

 

More here: https://greensock.com/forums/topic/16040-gsap-templates-for-animate-cc-2017/

 

Also, I updated the blog posts with a warning about them being written for Animate CC 2016 and that the templates won't work in 2017.

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...