IMPORTANT: This article was written for Animate CC 2016 and there have been changes in Animate CC 2017 that make much of this obsolete. Although the concepts of templates and profiles still exist, the information in this article may no longer be completely accurate or necessary. To see how easy it is to add GSAP to your Animate CC 2017 projects please read: Quick Start: GSAP and Adobe Animate CC 2017.

Cory Hudson of BannerWave continues his series on using GSAP with Adobe Animate CC. In this installment he will discuss how to create your own custom GSAP-enabled templates for your Animate CC HTML5 projects.

Part 1: Quick Start: GSAP and Adobe Animate CC
Part 2: Creating GSAP Templates for Adobe Animate CC

Author: Cory Hudson, VP Creative Technology & Innovation, BannerWave
Chair, IAB HTML5 Working Group

Now that we understand how to start using GSAP with Adobe Animate CC and have reviewed the power tips from Quick Start: GSAP and Adobe Animate CC , I want to discuss the details of the publishing process so that you understand more of what happens behind the scenes when generating HTML <canvas> output from Animate. After reading this article you will be well on your way to getting the most out of Animate and maximizing your workflow.

Publishing HTML5 Content with Animate

Unlike Flash content that was neatly wrapped up in a single .swf file, Adobe Animate CC needs to publish an HTML file that typically:

  • Loads external JavaScript libraries (CreateJS).
  • Creates the <canvas> where artwork will be rendered.
  • Contains JavaScript that initializes your project.
  • Loads custom JavaScript unique to your project (symbol definitions, animation code).

The problem is that each project has its own unique needs and more often than not you will need to edit the HTML5 output to allow for:

  • Loading other JavaScript libraries like GSAP.
  • Adding custom css properties like borders to your canvas.
  • Adding custom interaction code like clickthrough handling for ads.
  • Creating custom preloaders
  • Specifying image fallbacks / replacements.

It’s pretty easy to edit the HTML file that Animate generates but you have to be very careful not to overwrite those changes the next time you publish. Animate has an Overwrite HTML file on publish setting that helps a little in this regard but depending on what types of changes you make to the FLA or exported html you may have to toggle that setting quite a few times throughout production. Forget to deselect Overwrite HTML file on publish once and you can lose significant parts of your work.

Custom templates to the rescue

Now the good news is that you no longer have to worry about this because Animate now provides you with the ability to create reusable templates that can inject custom code modifications into the auto-generated HTML wrapper, eliminating the need to edit it by hand and risk losing changes on subsequent publishes.

It is now suggested that you exclusively leverage custom templates in order to include additional JavaScript libraries like GSAP, as well as other commonly required modifications such as implementing click tracking, meta tags, CSS, backup image logic, linking to other external JavaScript helper files, calls to hosted web font services, etc. Basically any code that is reusable and that will frequently be needed across multiple ad executions will most likely benefit from being included within a custom template. Making these types of customizations to the HTML wrapper would have previously required repetitive manual edits for each individual banner project.

Now you can simply insert your reusable code directly into a custom template a single time, and then easily access that particular configuration through Animate’s Publish Settings for every similar future project. This is an extremely valuable capability that allows for greater overall efficiency and consistency in your ad production workflow.

Create your own GSAP custom template

In order to create and use your custom template you should follow these steps:

  1. Create and save a new Adobe Animate HTML5 Canvas document.
  2. Under File > Publish Settings > Advanced you will notice that Use Default is unavailable, ensuring that we are starting the process with a standard, unmodified template.

    publish-settings

  3. Choose Export to export the default template and save it to a location of your choice and name it GSAP.html. This will be the file that you will work off of and apply your custom modifications too.
  4. Now locate the exported GSAP.html template (wherever you saved it in the previous step) and open it with your text editor of choice. If you take a close look at this default template you should see various tokens present within the file. These tokens are represented by the '$' sign in various locations within the template. You are now allowed to duplicate and reuse the default tokens elsewhere within the template as needed and Animate will automatically replace all of the appropriate values during publishing. Only the following tokens can be removed or replaced with hard-coded values: $BG (in the form of RGBA), $WT, $HT and $TITLE. Removing any of the others will cause your project to break upon publishing.

    tokens

  5. Copy the url for the latest version of TweenMax.min.js
    //copy this
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
  6. For the purposes of this basic example we will simply add in our linkage to the GSAP library within the document’s <head>, as follows:

    tweenmax

  7. Save the template.
  8. Return to the Publish Settings > Advanced tab and import the customized template into your project using the Import New button.
  9. Click OK.
  10. Control > Test and view the published HTML source.
  11. You should now be able to see the GSAP linkage modification included in the HTML wrapper.

Congratulations! You can now write GSAP code in a frame script and you won’t have to worry about editing the HTML page. Download the starter files (add link) from part 1 to see some basic examples of GSAP animation working with Animate.

Create Your Own Custom Profiles

Now after you’ve created multiple custom templates you may find it useful to assign each individual template to a unique publish profile in order to better organize and easily access your collection of custom templates.

A single FLA can have multiple profiles with each profile using a custom template.

For the ideal banner workflow you could set up unique publish profiles for specific ad vendors (DoubleClick, Sizmek, etc.), sizes, formats etc. and then quickly select from these profiles when you begin each new project from the same starter FLA. With each new project, you would open your starter FLA then quickly and easily select from the dropdown list of your custom profiles.

To create a custom profile that uses the GSAP template you just made follow these steps:

  1. Go to File > Publish Settings.
  2. Click the gear icon next to the Profile box in the upper left of Publish Settings.
  3. Select Create profile from the dropdown menu.
  4. Type in a Profile name ex: “Custom GSAP” and click OK.
  5. Make sure the Advanced tab is visible.
  6. Click Import New, to select the custom template that you want to associate with this profile. For the purpose of this tutorial select the GSAP.html template you created previously.
  7. Click OK to leave the Publish Settings dialog.

You now have a custom profile associated with this FLA. Repeat the steps above to create custom profiles for each template you want to access from the FLA.

In order to test your custom template and profile, simply publish your FLA to see the HTML wrapper that is generated from your custom configuration. To review or edit the pre-compiled source of the custom template on it’s own, you would go to Publish Settings > Advanced > Export in order to save a local copy.

Make an FLA Template

What, another template? Yes, but trust me this is the final and best step. Once you have your master starter FLA configured with multiple profiles you could just open it every time you start a new banner project. However, that means you need to remember where it is and be very careful to "Save as" a new version each time you start a new project to avoid overwriting it. By converting your FLA into an FLA Template you can now access it directly from the Adobe Animate CC Splash Screen > Templates or File > New > Template and never have to worry about saving over it. To convert your FLA to a template simply:

  1. Go to File > Save as Template.
  2. Fill in the appropriate information
    fla-template
  3. Click Save.

Once you have saved the FLA Template, it becomes available via the Adobe Animate Splash Panel, as well as by selecting File > New > Templates. The main advantage with this approach is that you do not need to maintain and manually leverage a centralized ad starter FLA to access your custom profiles. FLA Templates are integrated directly within Adobe Animate and do not require you to open the original FLA that they were created from. Besides integrated access, FLA Templates also provide the benefit of formalized organization and categorization of your custom profiles making them much easier to search and utilize.

GSAP banner templates ready to go

To get started with an incredibly powerful template that is perfect for banner ads, be sure to download the GSAP-AnimateCC-Starter-Files zip and be sure to read Quick Start: GSAP and Adobe Animate CC. The starter files have a profile and template that load in TweenMax and AdHelper which is loaded with features specific to banners.

Customizations beyond the template

One last thing to keep in mind is that if you require any modifications to portions of the HTML wrapper that are hidden behind the default tokens, such as customizations to the handleFileLoad() and handleComplete() CreateJS functions, then you will need to make your revisions within the outputted HTML wrapper rather than in your custom template. If you make manual edits to the wrapper then you will also need to uncheck the previously described Overwrite HTML file on publish setting in order to ensure that your modifications do not get overwritten on your next republish. Once you’ve deselected this setting you are then free to update your HTML wrapper file with any additional custom code that is unique to the banner project.

Where To Go From Here?

As you move forward using GSAP and Animate together to create your HTML5 banner ads, please be aware that as great as the combination can be, there are some limitations as to what can be supported when compared to Flash/AS3. For example, from the Animate side there is currently no 3D support as well as limited support for Filters and Color Effects. To learn more about these limitations and best practices for handling them, please refer to the CreateJs White Paper.

That being said, the Adobe Animate team is continuously addressing existing limitations by releasing new and useful solutions that successfully remove barriers and allow you to achieve your creative vision. New features such as custom templates and profiles, static text support, auto-conversion of static text to outlines when publishing and the revamped auto-sprite sheet generator have all been recently introduced and make Animate the IDE of choice for creating banner ads. For a comprehensive overview of all these new features, AdHelper and more, please refer to the Adobe Animate White Paper.

Please feel free to reach out to me with any questions or feedback and I’ll be more than happy to help as you begin creating HTML5 banners with GSAP and Adobe Animate. These two old friends are finally reunited and the future is looking bright!

Cory Hudson
Email: cory@bannerwave.com
Twitter: @coryhudson4
LinkedIn: https://www.linkedin.com/in/cory-hudson-3535675
Web: http://www.bannerwave.com