Creating a Flash Banner with Action Script 3

[anyaw49914225]

Hi there,

I have created an animated flash banner, and typically they need to stop after 3 loops. I have tried everything. Please advise if anyone knows how to make my animation stop after 3 loops. What should the action script be on the first frame and the last frame.

Thank you,

Anya

[just.emma]

None of the major ad serving companies even accept Flash banners anymore, so you should really consider switching to HTML5.

The code would actually be the same in both AS3 and JavaScript (for HTML5 Canvas mode in Animate CC).  Just add this to the end frame of your banner:

if (!this.looped) this.looped = 1;

if (this.looped++ == 3) this.stop();

[anyaw49914225]

Thank you so much for your help that worked. I switched to HTML5 Canvas mode in Flash.

They ask for a click tag to be added with a stroke around the ad, they provided the following code.

on (release) {getURL(_level0.clickTag, "_blank");}

I created a new layer and added this on the first frame, then my ad doesn't work. Any ideas?

[Colin Holgate]

That is ActionScript 2 code. The CreateJS version might be like:

this.tagBtn.addEventListener("click",goTag);

function goTag(){

window.open("http://www.adobe.com", "_blank");

}

That's where the button you have made with the stroke around the ad is named 'tagBtn', and the URL to go to is hard coded. I don't know what it would take to extract 'clickTag' from the old AS2 parameters. If the URL can be hard coded it won't matter.

Here's an article on handling clickTag in HTML:

HTML5 clickTag Tutorial - Learn how to build clickTag enabled HTML5 banners!

[anyaw49914225]

Thanks Colin, when I added this code it worked when I tested the ad in a browser, however the advertiser will most likely link the ad to the website? Will they accept the ad

with the code you provided

function goTag(){

window.open("http://www.adobe.com", "_blank");

}

instead of per their specs?

on (release) {getURL(_level0.clickTag, "_blank");}

Also instead of adobe.com I should put our website, correct...

[anyaw49914225]

Thanks Colin, when I added this code it worked when I tested the ad in a browser, however the advertiser will most likely link the ad to the website? Will they accept the ad

with the code you provided

function goTag(){

window.open("http://www.adobe.com", "_blank");

}

instead of per their specs?

on (release) {getURL(_level0.clickTag, "_blank");}

Also instead of adobe.com I should put our website, correct...

[just.emma]

You need to find out who is serving the ads. 

Different companies have different requirements for clickTags, and often additional specific requirements for HTML5 banners.  If it's DCM (DoubleClick Campaign manager), this will work: Re: Creating a Flash Banner with Action Script 3

If not, the set up can really vary.

[just.emma]

I think that tutorial for Edge Animate will just make things more confusing for them.  It's not always the same for every ad serving company, but generally what you need is...

<script>var clickTag = "http://www.google.com";</script> in the head of the HTML.

and onclick="javascript:window.open(window.clickTag)" before the closing canvas tag.  That looks like this:

For DCM, you also need the ad size meta tag in the head, which looks like this:

<meta name="ad.size" content="width=300,height=250"> and some other ad serving companies have additional or different requirements.  So it's important to know how your ads will be served before setting up templates and handing off files for trafficking.

Edit: Also Anya, many ad servers host a copy of the CreateJS library on their CDN.  If it's an option, you would always want to swap out those links if possible.  For DCM and Adwords, the Google-hosted libraries are here: DoubleClick hosted JavaScript libraries - DoubleClick Creative Solutions Help but other ad servers often have their own links.

[anyaw49914225]

These were the specs that were given to me for DN.

Under their general guidelines

All ad units must launch a new browser window when clicked on

Ads are served via iframes.

Audio must be user initiated with a clearly recognizable on/off button

All expanding ad units must be user initiated

All floating ad units must have a clearly recognizable close button

DFP is used to serve all FN Digital Site Ad Units

Dreammail is used to serve all Newsletter placements

All rich media ads must have an alternate GIF versions of creative

No PSA ads are allowed

For Doubleclick, please submit DFA Internal Redirect for all site placements, and DFA Standard tags for all HTML newsletter placements.

For all other ad tag units, please supply JavaScript tags for all site placements, and Standard tags or Gif/Jpg with click thru for all HTML newsletter placements.

All Brand Logos should click through to landing page.

Unit should have 1 pixel black border.

Entire expanded ad should be clickable.

Desktop: Accepts JPG, GIF, SWF or Third Party Tags (Rich Media)

Tablet: Accepts JPG, GIF or Third Party Tags (HTML5)

Flash ad unit or click tag: on (release) {getURL(_level0.clickTag, "_blank");}

These were the specs i was given.

[just.emma]

Okay.  So it looks like they do serve their ads through DoubleClick, which is great!

DFP support for Flash (swf) banners is deprecated, so I don't know why they're still giving you those specs.  See here for reference: DFP support for Flash is deprecated - DoubleClick for Publishers Help

For DFP and DCM (they're both different branches of DoubleClick) you can use this HTML5 template I made: Dropbox - DCM with border.html

Just go to Publish Settings > Advanced > Import New and import the template.  The ad size meta tag, border, click tag, and Google-hosted CreateJS CDN are already set up.  This template is for Animate CC 2017, so if you're using an older version let me know and I can help you with a template that will work for your version of Fl/animate.

When you're done, you can test your published ads here to make sure everything is set up properly: HTML5 Validator

[anyaw49914225]

I am sorry, I am new to this. I appreciate your help.

Also, when I test the movie in a browser without the click tag it works. However, when I export the movie as a swf file, it doesn't stop after 3x it just keeps going?

[just.emma]

You can't use AS2 in a HTML5 Canvas or AS3 document.  It will not work.

[anyaw49914225]

Thanks Emma,

How should I export the file, as .swf file?

[just.emma]

No, you should not be creating banners as swfs.  Almost nobody will even run Flash (swf) ads anymore; HTML5 is now the industry standard.

A HTML5 banner consists of a zip with a HTML file, JavaScript, and any images.  Each ad goes in it's own zipped folder.

You really really need to get in touch with the vendor/ad server and make sure you have current specs because what they're giving you is from years ago and is no longer standard.

[anyaw49914225]

I am using Flash CC to create my ad. It has the HTML5 Canvas feature. But how do I export the ad from Flash so that its html5 file?

I am sorry for these questions, but I am not familiar with code. The template you have created, do I paste that into actions on the new layer with my frame?

[just.emma]

Which version of Flash CC are you using, specifically?

Can you upgrade?

[anyaw49914225]

Flash CC 2014. When I publish, I get an html file, js and images folder.

When I test the file in html it works. This is the html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>300x50_1</title>

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>

<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>

<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>

<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>

<script src="300x50_1.js"></script>

<script>

var canvas, stage, exportRoot;

function init() {

    canvas = document.getElementById("canvas");

    images = images||{};

    var loader = new createjs.LoadQueue(false);

    loader.addEventListener("fileload", handleFileLoad);

    loader.addEventListener("complete", handleComplete);

    loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt) {

    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

}

function handleComplete() {

    exportRoot = new lib._300x50_1();

    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">

    <canvas id="canvas" width="300" height="50" style="background-color:#FFFFFF"></canvas>

</body>

</html>

[just.emma]

It would be ideal if you could upgrade to a newer version (there have been a lot of improvements to Animate CC in the last year or so).  Templates won't work in Flash CC 2014 so you will have to edit your HTML file manually.  You're going to want your HTML file to look like this:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="ad.size" content="width=300,height=250">

<script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min...."></script>

<script src="300x50_1.js"></script>

<script>

var clickTag = "http://www.google.com";

var canvas, stage, exportRoot;

function init() {

    canvas = document.getElementById("canvas");

    images = images||{};

    var loader = new createjs.LoadQueue(false);

    loader.addEventListener("fileload", handleFileLoad);

    loader.addEventListener("complete", handleComplete);

    loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt) {

    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

}

function handleComplete() {

    exportRoot = new lib._300x50_1();

    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">

    <canvas id="canvas" width="300" height="50" style="background-color:#FFFFFF" onclick="javascript:window.open(window.clickTag)"></canvas>

</body>

</html>

[just.emma]

After you edit your HTML file, you're going to want to go to Publish Settings in Flash, and uncheck "overwrite on publish" so that you don't lose the customizations to the HTML file when you make changes to the animation.

[anyaw49914225]

when I copied and pasted your html into my file, it doesn't work?

[just.emma]

Sorry, you're using such an old version of Flash that the newest version of the CreateJS library won't work.  You will have to publish the libraries locally.

In Publish settings, uncheck "hosted libraries" and you can host them locally.  Re-publish your file, and then edit your HTML file so it looks like this:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="ad.size" content="width=300,height=50">

<style>

html, body{

  margin: 0;

  padding: 0;

}

#canvas{

  position: absolute;

  top: 0px;

  left: 0px;

  -moz-user-select: none;

    -webkit-user-select: none;

    -ms-user-select: none;

    user-select: none;

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  cursor: pointer;

}

</style>

<script src="libs/easeljs-0.7.1.min.js"></script>

<script src="libs/tweenjs-0.5.1.min.js"></script>

<script src="libs/movieclip-0.7.1.min.js"></script>

<script src="libs/preloadjs-0.4.1.min.js"></script>

<script src="300x50_1.js"></script>

<script>

var clickTag = "http://www.google.com";

var canvas, stage, exportRoot;

function init() {

    canvas = document.getElementById("canvas");

    images = images||{};

    var loader = new createjs.LoadQueue(false);

    loader.addEventListener("fileload", handleFileLoad);

    loader.addEventListener("complete", handleComplete);

    loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt) {

    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

}

function handleComplete() {

    exportRoot = new lib._300x50_1();

    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">

    <canvas id="canvas" width="300" height="50" style="background-color:#FFFFFF" onclick="javascript:window.open(window.clickTag)"></canvas>

</body>

</html>

[just.emma]

By the way, the issue with hosting the libraries locally is that it's going to make the file size way higher.  I strongly recommend upgrading to a newer version of Animate CC if at all possible, so you can use the Google-hosted version as well as all kinds of other improvements.

Otherwise, you might just have to do a static JPG or GIF banner depending on the file size limits that you're working with.

[anyaw49914225]

Have another computer will use, the latest version of Flash, open my file and then publish my html file. Will that work better. Will this resolve the problem?

[anyaw49914225]

I will post the new html code when I have downloaded the lastest version of Flash 2017. I hope by opening my old file in the latest version of flash will generate the new code that will work?

[just.emma · Accepted solution]

If you have access to Animate CC 2017, you should just import my template which I posted earlier: Re: Creating a Flash Banner with Action Script 3

In Animate CC 2017, just go to Publish Settings > Advanced > Import New and import the template.  You will not need to edit the HTML file; once you import the template, you can just republish your banner and it will have everything you need.