Adobe Animate Version 24.0.12
Can I get some updated help on exporting HTML5 canvas banners from Animate? I keep getting blank page when publishing.
Here is an HTML template that Gemini AI helped me write that doesn't work. I do have the
createjs.min.js file and image folder all in the recommended folder structure. Curious if anyone is using Animate for display banners successfully. Our team has not used Adobe Animate since 2020-2021. Any advice is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>$TITLE</title>
<style>
#$CANVAS_ID { cursor: pointer; }
</style>
<script src="createjs.min.js"></script>
$ANIMATE_CC_SCRIPTS
<script>
function addClickTag() {
// Check if Animate composition and canvas are ready
var compId = "$COMP_ID"; // Get Composition ID token
var canvasId = "$CANVAS_ID"; // Get Canvas ID token
if (AdobeAn && AdobeAn.compositions && AdobeAn.compositions[compId] && document.getElementById(canvasId)) {
var canvas = document.getElementById(canvasId);
function getClickTag() {
var clickTag = "https://www.google.com"; // Fallback URL
var queryString = window.location.search.substring(1);
var params = queryString.split("&");
for (var i = 0; i < params.length; i++) {
var pair = params[i].split("=");
if (pair[0] == "clickTag") {
clickTag = decodeURIComponent(pair[1]);
break;
}
}
return clickTag;
}
// Attach listener directly to the canvas
canvas.addEventListener("click", function() {
var clickUrl = getClickTag();
window.open(clickUrl, "_blank");
});
console.log("ClickTag listener added to canvas.");
} else {
// If not ready, wait 50ms and try again
console.log("Animate composition not ready, retrying clickTag setup...");
setTimeout(addClickTag, 50);
}
}
// Wait for the main page elements to load before trying to add the clickTag
window.addEventListener('load', function() {
// Small delay to ensure Animate's init runs first
setTimeout(addClickTag, 100);
});
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="$ANIM_CONTAINER_ID" style="background-color:$BG; width:$WTpx; height:$HTpx">
<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>
<div id="$DOM_OVERLAY_CONTAINER_ID" style="pointer-events:none; overflow:hidden; width:$WTpx; height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
</div>
</div>
</body>
</html>
1
Reply
AdChoices