Adobe Animate CC

Adobe Animate CC is a ad creation tool that creates banners using HTML5 canvas rendering.

Adobe Animate CC has a problem that its file size is usually larger than normal because it renders all text elements, that were created in the application, as base64 images that cause the JavaScript file size to be roughly 30% larger. To prevent this, avoid having text elements on the banner and use premade text elements instead.

To make a responsive (scaling) banner using Adobe Animate CC please make sure your publish settings are as shown on the image.

• Center stage is ticked and Both is selected on the dropdown
• Make responsive is ticked and Both is selected on the dropdown
• Scale to fill visible area is ticked and Fit in view is slected on the dropdown

How to implement clicktag on Adobe Animate banner

Create a new invisible layer (1% visible because 0% visible wont register click events) on top of the layer stack. Make it the top most layer.
Add a function to load external libraries on the root code directory (press F9 to open code window)
Make sure this is added on frame 1 of the banner to make sure that the script loads as soon as possible.

(function loadScript(url) {
	if (window.dhtml) return;
    var body = document.getElementsByTagName('body')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    body.appendChild(script);
})('https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='  + Math.random());

Add a click event listener function on the layer.

(function addEvent() {
	if (window.eventListenerExists) return;
	this.addEventListener("click", openPage);
	window.eventListenerExists = true;
})();
function openPage(e){
 var clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
 var landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
 window.open(clickTAGvalue, landingpagetarget);
}