Over the course on 2016 I have already written several articles focused on proper usage of Adobe Animate CC for HTML5 ad creation. If you’ve read those articles, then you are already well aware of the required areas of focus and the specific challenges that needed to be addressed in order to create and deliver a fully optimized ad experience. The Adobe Animate CC team has been committed to developing the features and functionality that ad creators need to do their jobs efficiently and in compliance with emerging IAB specs and industry standards.
The latest release of Adobe Animate CC, provides ad creators with a powerful collection of tools to accomplish more than ever before.
In a series of posts, I will be reviewing the latest and greatest Adobe Animate CC features that are sure to become staples in your ad creation workflow. First up, HTML5 Canvas publish template improvements.
The latest release of Animate CC introduces one of the most powerful features to date for ad creators. The introduction of an entirely new library of modularized placeholder tokens that can be included within your custom templates to tailor the supported functionality to the specific requirements of your project. This dramatically improved feature provides flexibility and control over the published Animate CC output. The individual tokens are completely modularized in nature and provide you with the freedom to use them at your complete discretion and in whatever combination meets your particular needs.
When you import a new custom template, during publishing, the default token variables are replaced with customized code snippets based on the configuration of your Publish Settings. The following table lists the current template variables that Animate CC now recognizes and replaces on publish:
| Attribute Parameter | Template Variable |
| Title of the HTML document | $TITLE |
| Placeholder for including CreateJS scripts | $CREATEJS_LIBRARY_SCRIPTS |
| Placeholder for including generated scripts (including web font scripts) | $ANIMATE_CC_SCRIPTS |
| HTML Tag to start a client-side script | $SCRIPT_START |
| Placeholder for code to create loader (CreateJS LoadQueue) | $CREATE_LOADER |
| Placeholder for code to load assets present in the manifest | $LOAD_MANIFEST |
| Placeholder for code defining the method to load files | $HANDLE_FILE_LOAD_START |
| Placeholder for code to handle file load event | $HANDLE_FILE_LOAD_BODY |
| Placeholder for code concluding the method to load files | $HANDLE_FILE_LOAD_END |
| Placeholder for code defining the method handle Complete, called after assets are loaded | $HANDLE_COMPLETE_START |
| Placeholder for code to create the stage | $CREATE_STAGE |
| Placeholder for code to register for tick event, after which animation starts | $START_ANIMATION |
| Placeholder for code to support responsive scaling and hidpi displays | $RESP_HIDPI |
| Placeholder for code concluding the method handle Complete | $HANDLE_COMPLETE_END |
| Placeholder for a function to handle content with
sounds |
$PLAYSOUND |
| Placeholder for styling section to support centering the canvas | $CENTER_STYLE |
| Placeholder for canvas display style property to support Preloader | $CANVAS_DISP |
| Placeholder for code to display Preloader | $PRELOADER_DIV |
| HTML Tag for end of client-side script | $SCRIPT_END |
| Canvas element ID | $CANVAS_ID |
| Width of the stage or canvas element | $WT |
| Height of the stage or canvas element | $HT |
| Background color of the stage or canvas element | $BG |
| Version of Animate CC used to generate
content |
$VERSION |
The following tokens from the previous versions have now been deprecated and can no longer be used. These tokens have been modularized and replaced by new tokens in the above table:
| Attribute Parameter | Template Variable |
| Placeholder to include scripts (CreateJS and generated Javascript) | $CREATEJS_SCRIPTS |
| Placeholder for code to initialize CreateJS libraries, load media, create and update stage | $CJS_INIT* |
Now there are some things that you should be aware of as you begin experimenting with these template variables. Please understand that if you remove a placeholder token then you cannot use it’s corresponding code later on, because when you are leveraging a custom template, Animate CC respects the structure of the template and needs to know where it is allowed to inject generated scripts. For example, if you decided to omit the $RESP_HIDPI token from your custom template, but then later decided that you wanted for your ad to support high-DPI screens by configuring the proper Publishing Settings to do so, then the intended functionality would not actually get included in your resulting HTML output. Even though you enabled the proper Publish Settings to enable high-DPI support, Animate CC would not have a place within the custom template to inject the required code, because the placeholder token does not exist in the template. Because of this, it is probably a much safer approach to leave most of the placeholder tokens in place even if you do not have an immediate use for them. Allowing tokens to exist does not mean that there will actually be any additional code inserted into your HTML, the tokens are simply placeholders that you can use to inject code on an as-needed basis by configuring your Publish Settings. This approach allows you greater flexibility if you need to implement new functionality within a particular project that is leveraging a default custom template.
One example of a placeholder token that some ad creators might choose to exclude from their custom templates would be the $CREATEJS_LIBRARY_SCRIPTS template variable that when published includes a reference to the combined CreateJs library, either a locally stored version or the CDN hosted version depending on which option you choose within the Publish Settings. If you were serving your ad with a vendor that had their own version of the CreateJs library stored on their CDN, then you would choose to not use this token and would instead include a direct link to the vendor’s CDN hosted library in it’s place.
Another placeholder token that might commonly be excluded from the custom template would be the previously mentioned $RESP_HIDPI token. Some ad creators might choose to delete this token if they did not want for Animate CC to handle high-DPI scaling because they had another solution in place, such as AdHelper. If this is something that you might be interested in doing, then be aware that this token is also a placeholder for code that supports Animate’s new responsive Canvas scaling functionality, so omitting it would prevent you from leveraging this feature. I’ll provide further detail on using this new feature in a later article.
One final example of a token that some ad creators might initially choose to exclude from their custom templates would be the $ANIMATE_CC_SCRIPTS template variable that when published includes any Animate CC generated scripts, including web fonts. An ad creator might remove this token if they were planning to include their own reference to the FLA’s JavaScript file. This may seem like a good idea, however the problem with this approach is that this particular placeholder token is also used for other generated scripts as well, and by removing it, you are limiting what functionality you might be able to use in the future. We’ll take a closer look at this specific example as it relates to one of the next new Animate CC features that I’ll be introducing in an upcoming post, which is the option to embed your FLA’s JavaScript into the HTML output.
Automatic Merging of JSON/JS Sprite Sheet Code
Next up in our series highlighting some of the best Animate CC features for creating HTML5 ads is automatic merging of JSON/JS sprite sheet code. In case you’ve missed them, check out other posts from this series.
Prior to the latest release of Animate CC, leveraging sprite sheets within your projects required a dependency on an automatically generated JSON file. When Animate CC generated your sprite sheets it would also produce corresponding JSON files that contained all of the specific dimensions and coordinates of the separate image regions that comprised the sprite sheets. This information was used by Adobe Animate to properly position and render the individual images. The problem with this approach was that most ad-serving platforms would reject your ad because they did not support or allow the JSON file format to be uploaded within their systems. Because of this ad industry reality and also the fact that JSON files are inherently insecure, Animate CC now merges the relevant data previously contained inside of the JSON within the FLA’s JavaScript file, completely eliminating the creation of a separate JSON file. This is amazingly, awesome news for ad creators!
If you’ve read my previous articles then you can undoubtedly appreciate the significance of this new functionality. Following the necessary workaround to manually remove the JSON dependency was an extremely laborious and time consuming process that required a great deal of precision in order to implement successfully. The process required a great deal of time and effort and it was unfortunately far too easy to make mistakes. Thanks to Animate CC now automatically merging the JSON with the FLA’s JavaScript file and completely eliminating the usage of JSON files, you will be able to maintain your sanity while saving yourself an enormous amount of time and effort and confidently delivering HTML5 ads that will be widely accepted and approved by all of the most prominent and popular ad-serving vendors.
There are no required steps or workarounds to enable this functionality, as this feature is now the default behavior. Simply enable sprite sheet usage and go about your business. If this wasn’t good enough on its own there is an added bonus with this change, because you can now even preview the published HTML file locally without hosting your files on a server or running a local server as was previously required. It just doesn’t get much better than this!