When building Adobe Edge Animate HTML5 Banners several things need to be accomplished. I personally do not have any experience in it since I never created a banner in my life. This is not my field. I mainly do educational software, but there seems to be a large community of banner ads designers. So I thought I would give them a place here. Fortunalely, there is the Adobe Edge forum where this tutorial was posted by user lcg_2012 who graciously gave us the permission to publish it here.
So, buckle your seat bealt and enjoy the ride! Below are the steps needed to publish a clickTag banner.
Include the following line above the <!--Adobe Edge Runtime--> in the MAIN authoring HTML file, not the .an, the .html. :
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<!--Adobe Edge Runtime-->
Do not use gradients built in Edge. They will not play in some older browsers. Use a small .jpg built elsewhere. For instance if you want a banner with a gradient from top to bottom for a 300x250 banner, make a gradient that is 1 pixel wide and 250 pixels tall. Then in Edge, change the size to be the full size of the banner.
Example 1—vertical gradient
Example 2—horizontal gradient
Make sure to include the following below the runtime line in the MAIN authoring HTML file.
<!--Adobe Edge Runtime End-->
<script type="text/javascript">
var clickTag = "https://www.google.com";
</script>
In Adobe Edge Animate, place a transparent spacer.gif in the topmost layer and make it the size of the banner ad. Click between the {} to the left of the object:
Then insert the following code:
window.open(clickTag, "_blank");
On the first frame of the animation click the {} to the left of Actions in the timeline beneath the down arrow. This will put that symbol {•} on frame 0 of the animation:
Add this counter code:
sym.setVariable("counter",1);
Move the playhead JUST past 0:00 (as close to 0:00 as you can get without being on it) and got Timeline > Insert Label in the Edge menu and label the frame “LoopStart”. This will be the spot the banner jumps to when looped.
If the banner loops, and it should at least once, that means it has an “out” animation. Meaning some transition from the last frame of content transitioning to the beginning. This is often a simple fade. So we need to tell the animation to check the counter when it hits the start of that “out” animation and see if it has already looped. Position the playhead on that beginning of the “out” animation and click {} to the right of Actions like you did in #4.
Then in the coding window add:
if (sym.getVariable("counter") == 2) {
sym.stop();
}else {
sym.play();
sym.setVariable("counter", sym.getVariable("counter") + 1);
}
Of course you may want your banner to loop more times. In this case, change the number “2” in the if statement […”counter”) == 2] to whatever the number of times you would like your banner loop.
Move the playhead to the end of the “out” animation and once again click the {} to the right of Actions in the timeline. Then insert this code (it tells the playhead to jump to the frame labeled “LoopStart”) when it hits that final frame:
this.play("LoopStart");
Once the banner is done, make sure you are on the Stage layer and move the playhead to the visible end frame (the last frame of content before the “out” animation).
Click the camera icon next to Poster in the left toolbar to take a snapshot of the frame. If you don’t see “Poster”, you are not on the Stage layer.
This will make a poster.png in images folder. If one already exists, it maybe from the previous banner you used to create this one. Delete all poster.png from the images folder (from outside Edge) and do another snapshot. (see more info on poster image below.)
In the property panel on the left, click the word Edit… next to Down-level Stage
Place the poster.png file there and click on it. In the left column choose “self” and then paste the following code in the Link URL field.
“javascript:window.open(window.clickTag)”
Make sure ALL links are encrypted including (s) as in https, and not http only. DoubleClick WILL NOT accept simple, unencrypted http links.
MAKE SURE TO CHECK THE PUBLISHED FILE BEFORE DELIVERY because Edge Animate writes http even if you change it to https in the authoring file, to ensure the link is https.
<script type="text/javascript" charset="utf-8"
src="https://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>
The poster image is automatically made and added in your image fodler when you publish your composition package (oam). Whether or not you create it manually as explained in Step #3 or at publishing, this poster image will be whatever your composition's Stage is showing at the moment of creation. So it is imperative you make sure what your stage is showing is what you want your poster image to show.
For example, I often have an intro screen that is moved out. I place this image at the top of all the layers and turn if off to continue my work on the rest of the composition.
Even though The image will show at runtime even if it's visibility is off in development, if will not show on the poster image when it is created unless the visibility is on.