lundi 21 décembre 2015

Adobe Canvas HTML5 AS3 Click Tag

Have been using flash for some time but now there is a requirement to produce HTML 5 banners.

I have used Canvas to create my banner which is working as expected, however, I'm confused (as it seems most people are), as to how to add an AS3 clicktag that will work with Adwords and DoubleClick. Alternatively, can the clicktag be added to the HTML outputted file only?

Instructions that I've found online seem to be incredibly confusing as to where code is added, whether code is added on timeline or object, whether instance names are given, or whether code is added externally only.

My current Canvas project has no actionscript in it at all. The HTML outputted code I have modified based on findings now looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="ad.size" content="width=300,height=250">

<title>300x250-test3</title>

<script type="text/javascript">
    var clickTag = "http://www.google.com";
</script>

<script src="easeljs-0.8.1.min.js"></script>
<script src="tweenjs-0.6.1.min.js"></script>
<script src="movieclip-0.8.1.min.js"></script>
<script src="300x250-test3.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    exportRoot = new lib._300x250test3();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4; margin:0; padding:0;">
<a href="javascript:window.open(window.clickTag)">
<canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>
    </a>
</body>
</html>

This appears to work and function as expected, that is, assuming that the Google URL added is for testing purposes only and the distributors will alter this to point to the correct URL.

The banners will ultimately be on either Adwords or Doubleclick.

Aucun commentaire:

Enregistrer un commentaire