Creating HTML5 Ads with Animate CC: HTML5 Canvas Templates and Automatic Merging of JSON/JS Sprite Sheet Code
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
|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
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 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.
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.
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!