We’re back with our series highlighting some of the best Animate CC features for creating HTML5 ads. In case you missed it, check out our first post on HTML5 Canvas templates.
Some ad-serving vendors require that all of your local JavaScript be included within the HTML file rather than a separate JavaScript file. This format requirement may exist because of platform compatibility issues or restrictions on the number of files and server requests required to support your ad experience. Regardless of the reasons, this spec can vary widely from vendor to vendor so you are encouraged to check your vendor’s documentation before finalizing and packaging your assets. If your vendor requires you to combine your local JavaScript and HTML, you are in luck because in order to facilitate an easy and integrated way of consolidating these two files, Animate CC now introduces the capability to automatically embed the code from the FLA’s JavaScript file within the HTML file during publishing. To enable this feature:
- In the File > Publish Settings menu, switch to the Advanced tab and select the Include JavaScript In HTML
- Select OK after being alerted to the fact that when opting to include JavaScript in the HTML file, Animate will overwrite the HTML every time the file is republished. This selection disables the Overwrite HTML file on publishcheck box, and during any publishing event, the HTML will be overwritten.
- Republish your project to update your files.
- In order to revert to the default behavior of outputting the JavaScript to a separate file, simply select Stop including JavaScript in HTML, and then select Publish in order stop combining the JavaScript and HTML files.
- Please be aware that when the Overwrite HTML file on publish is not selected, the Include JavaScript In HTML option is automatically disabled. If you do not want to overwrite your HTML, then you will be unable to use this feature because the options Overwrite HTML file on publish and Include JavaScript in HTML cannot coexist.
![blog2html5ads-1]()
Lastly, you should know that if you plan to merge your JavaScript with your HTML, then you need to ensure that you are not using a custom template that is also referencing the FLA’s external JavaScript file. For example, you would not be able to successfully merge your JavaScript and HTML if you were using the following approach within your custom template, which leverages a placeholder token to pull in the FLA’s JavaScript file name:
<script src=”$TITLE.js”></script>
This is an approach that some ad creators are using in order to avoid having Animate CC automatically append a cache-busting variable to the file name when testing the FLA. When this approach is not taken, Animate CC automatically generates the script tag that references your FLA’s JavaScript file and appends a random cache-busting query string variable to the file name in order to ensure that the browser is not caching an outdated version of the file when you view and test your work. The problem with this practice is that some ad-serving platforms will reject your ad because their automated systems do not recognize the file name with the appended cache-busting variable as being the same file as the actual file that is located within your assets.
Because of this fact, some ad creators began implementing the above solution so that they wouldn’t have to manually remove the cache-busting query string variable before packaging and submitting their finalized assets to the ad-serving vendor. This can be an elegant solution for most use cases, however it is worth calling out that it would prevent you from being able to merge your JavaScript with your HTML, causing your code to break because the custom template would still be expecting the external JavaScript file which would then no longer exist after enabling this feature. So, if you want to use this feature, please make sure you are using a template that does not explicitly pull in the external JavaScript file as described above, but rather use the following placeholder token which will allow you to switch back and forth between the two approaches if needed:
$ANIMATE_CC_SCRIPTS
Keep in mind that using this token will still allow for the cache-busting variable to be appended each time you CTRL+ENTER to test your FLA, however if you simply Publish your FLA before finalizing your HTML, then you can prevent Animate CC from appending the cache-busting variable. So in summary, if you press CTRL+ENTER to test your FLA then the random cache-busting variable is still generated. However, if you publish your FLA instead, by selecting File > Publish then there will be no cache-busting variable appended to the JavaScript file name. Because of this, it can be useful to Publish the FLA as final step before unchecking Overwrite HTML file on publish and making any custom edits to the HTML.
