Jump to content
Search Community

GSAP Templates For Animate CC 2017

Carl 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

It has come to our attention that changes in Animate CC 2017 caused problems with the source files that were provided in Cory Hudson's blog post: https://greensock.com/animatecc-quickstart

 

Cory has provided updated templates that should work with Animate CC 2017: GSAP_Animate_2017.zip

 

It should be noted that Animate CC allows you to use external JS libraries without editing any templates.

New for Animate CC 2017https://greensock.com/GSAP-Animate-CC-2017 (video and flas).

 

However, if you still want to use templates these are notes that Cory provided with the updated files:

 

1) I made the banner templates compatible with DoubleClick since that is the vendor most users have been requesting. This support includes an additional meta tag, as well as DoubleClick hosted GSAP & CreateJs. This can obviously be changed if desired (to support another vendor), but this set-up is pre-configured for banner builders who are running their ads with Google. I believe this effectively shows how the libraries can easily be swapped out, as needed. The Basic template remains unchanged, and references GSAP & CreateJs CDN hosted libraries.
 
2) Native Animate preloader support.
 
3) Custom template now includes a minified version of AdHelper embedded into the HTML, removing the dependency on an external file, making it easier to manage and include within the custom template.
 
4) FLA content is now authored at 100%, rather than double-scale with an appropriate retina approach implemented within the FLA. Specifically, all complex vectors have now been contained with MovieClips which have been cached as bitmaps (for optimal performance), and then scaled down to 50% or lower on the Stage.
 
5) Publish Settings have been configured with preferred default settings for banner building (publish assets to flat directory structure, preloader, multiple sprite sheets enabled).
 
6) Loading of all libraries have been moved to before the closing <body> tag in order to ensure script loading doesn't block or delay rendering of the DOM.
 
7) FLA JS file now included using $TITLE variable in order to bypass Animate automatically appending cache-busting query string variable to file name when testing using CTRL+ENTER.
 
8) $ANIMATE_CC_SCRIPTS variable has been commented out because it's features are not needed for most ad scenarios. Also, enabling this token would conflict with the approach that I describe above, in update #7.
 
9) $RESP_HIDPI variable has been commented out because we are using AdHelper for hi-DPI support and we also do not need to use responsive scaling for ads created with Animate.
 
10) Implemented support for CreateJs RAF_SYNCHED mode, which allows the ticker to leverage requestAnimationFrame while still syncing to the FPS of the FLA.
 
11) Fixed a bug with the clickthrough handling function which previously blocked some clicks on mobile devices.
 
12)  Includes references and support for new and required 2017 variables:
    anim_container
    dom_overlay_container
    fnStartAnimation
 
13) Added some basic starter code for scope and overriding the clickTag variable within the AdStarter FLA.
  • Like 5
Link to comment
Share on other sites

Why make things easy, when you can make them complicated :)

 

1. Open Animate CC 2017

---------------------------------------------------------------------------------------------------------------------------------------------

2. Create new document

---------------------------------------------------------------------------------------------------------------------------------------------

3. Export default template ( FILE > PUBLISH SETTINGS > ADVANCED > EXPORT )

---------------------------------------------------------------------------------------------------------------------------------------------

4. Change few things in exported template (html file):

 

In <head> section add five lines:

 

<meta name="ad.size" content="width=$WT,height=$HT">
<script>var clickTag = "http://www.example.com"; </script>
 
and clear one line:
 
$CREATEJS_LIBRARY_SCRIPTS
 
---------------------------------------------------------------------------------------------------------------------------------------------
5. Import changed template ( FILE > PUBLISH SETTINGS > ADVANCED > IMPORT NEW )
---------------------------------------------------------------------------------------------------------------------------------------------
6. Addionaly change few things in publish settings:
 
I personally like to merge HTML and JavaScript in one single file
( FILE > PUBLISH SETTINGS > ADVANCED > INCLUDE JAVASCRIPT IN HTML )
 
I personally like to have exported images in same folder with html file, without subfolder images
( FILE > PUBLISH SETTINGS > BASIC > EXPORT IMAGE ASSETS > UNCHECK FOLDER ICON (Toggle of...) )
 
I personally like to be responsive especially for mobile devices
( FILE > PUBLISH SETTINGS > BASIC > MAKE RESPONSIVE > BOTH )
 
---------------------------------------------------------------------------------------------------------------------------------------------
7. Create invisible button on top of document with full size of document and give it instance name, example: exit
---------------------------------------------------------------------------------------------------------------------------------------------
8. Open Actions window ( WINDOW > ACTIONS ) and write code:
 
this.exit.on("click", function () {
window.open(window.clickTag, '_blank')
});
 
---------------------------------------------------------------------------------------------------------------------------------------------
9. Save template for further use ( FILE > SAVE AS TEMPLATE ) or just save file somewhere on your disc
---------------------------------------------------------------------------------------------------------------------------------------------
 
 
You dont need AdHelper - I realy dont know purpose, maybe to be smart guy
because why make things easy, when you can make them complicated :)
  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...

We are working on a short video to help people see how to get GSAP into Animate CC 2017.

Since the out-dated Cory Hudson articles are pointing here I thought I would share with anyone who happens to stop by:

 

 

The intended audience is people who have a little bit of GSAP and Animate CC experience under their belts but want to combine the two and don't know where to begin.

  • Like 3
Link to comment
Share on other sites

  • 3 months later...
On 24/2/2017 at 11:34 AM, Web Dizajner said:
7. Create invisible button on top of document with full size of document and give it instance name, example: exit
---------------------------------------------------------------------------------------------------------------------------------------------
8. Open Actions window ( WINDOW > ACTIONS ) and write code:
 
this.exit.on("click", function () {
window.open(window.clickTag, '_blank')
});

 

Why don't you just add all this in the template? At the same time you can add some borders, to do so go after the div "dom_overlay_container" and add:

 

<div id="b1"></div><div id="b2"></div><div id="b3"></div><div id="b4"></div>
<a href="javascript:window.open(window.clickTag,'_blank');void(0);" ><div id="bgexit"></div></a>

 

And in the header add some styles:

<style>
  #animation_container{ position: relative; }
  #b1{ position: absolute; width: 100%; height: 1px; top:0px; left:0px; background-color: #000;}
  #b2{ position: absolute; width: 100%; height: 1px; bottom:0px; left:0px; background-color: #000;}
  #b3{ position: absolute; width: 1px; height: 100%; top:0px; left:0px; background-color: #000;}
  #b4{ position: absolute; width: 1px; height: 100%; top:0px; right:0px; background-color: #000;}
  #bgexit{ position: absolute; background-color: rgba(255,255,255,0); cursor: pointer; height: 100%; left: 0px; top: 0px; width: 100%; }
</style>

 

Link to comment
Share on other sites

  • 2 weeks later...

@sbest58

 

I have uploaded new files (saved in 2017.5) that should show how to get GSAP and EaselPlugin into Animate CC.

 

 https://greensock.com/GSAP-Animate-CC-2017

 

From what I can tell it works the same way as 2017 as shown in video above.

 

FWIW we no longer support or update the Ad-Starter files Cory Hudson created for us in the 2016 posts.

 

If you have problems with the source files in the 2017 article, please let me know.

 

 

 

 

 

 

 

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