Jump to content
Search Community

Creating html5 banners in Adobe Edge, Google GWD or by hand?

Chris test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I personally know very little about AdWords. The Google Hangout that had tthe most to do with that not design aspect of banners was the one on QA. It was the best attendded and had the most questions because it was about the AdOps side of the equation.

 

It looks like AdWords are bargain basement ads from a cost perspective. The advertiser only pays per click.

 

https://support.google.com/adwords/answer/1704410?hl=en

 

 

 

  • With cost-per-click (CPC) bidding, you’re charged only when someone clicks your ad, not when your ad appears. There are a variety of bidding options you can choose from.
  • You decide how much or little you want to spend monthly, and you’ll never be charged more than that amount.
  • There’s no minimum spending commitment.
Link to comment
Share on other sites

maybe use this super basic fade function for AdWords. Most banners just have changing copy.

<style>

#myAd {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 320px;
	height: 50px;
	border:1px solid #666666; 
	background-color: #FFF;
	z-index: 100;
	background-image: url('background.gif');
}

p {
	display:block;
	width:100%;
	height:100%;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	color:#ffffff;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 600;
	line-height: 14px;
	text-align:center;
	margin-top:5px;
	margin-left:25px;
}
  .fadein {position:relative; width:320px; height:50px;}
  .fadein p { position:absolute; left:0; top:0; display:block;}
  img { border:0; display:block; }  
  cursor:pointer; }
  #clickBtn {
  background-color: rgba(255,255,255,0);
  cursor: pointer;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.js"></script>


<script>
$(document).ready(function(){
  $('.fadein p:gt(0)').hide();
   var count = 0;
    var interval=setInterval(function(){$('.fadein p:first-child').fadeOut().next('p').fadeIn().end().appendTo('.fadein');  count++; if(count==11) clearInterval(interval);}, 4000);
});
</script>

</head>
<body onload="init()">
 <div id="myAd">

<div id="clickBtn" style="width:320px; height:50px;" onclick="javascript:window.open(window.clickTag)">

  <div class="fadein">
      <p>Your Copy...<br />anything goes</p>
      <p>Fuel your copy<br/>and cross fade it</p>
            <p>Plus Earn copy<br/>rewards!</p>
            <p>See what's new<br />when you fade</p>

  </div>
  
    </div>
       </div>
    

Link to comment
Share on other sites

If you do choose host runtime on Adobe CDN, you will have to change http to https. DCM will acccept external links as long as they are SSL complinat, either //adobe.com/******* or https://adobe.com******

 

The problem is AdWords.

 

So your  files that do host runtime on Adobe CDN will be accepted some places, but not AdWords. As designers we are not media buyers and may not even realize where our ads are going to go. I usesd to work for a Publisher and knew exactly where my ads were going, with few exceptions, like providing different spec files for a different publisher.

 

This AdWords strictness sucks, because  hosting runtime on Adobe CDN, is best practices from a cached by browser perspective. As is any CDN caching.

 

Why complicate? Zipped Edge Runtime is only 33 kb. You still have zipped 122 kb or more precisely 118 kb (because plus including zipped 4 kb one HTML and and Edge Action JS file) for images. I never host runtime on CDN. I host runtime only on my website on my server or on websites and their servers which I am devoloping because is necesary to duplicate runtime.

Link to comment
Share on other sites

ps. Dizajner....

 

the major things why i was working with greensock was that animations become more smoother...and quicker...don't you have problems with that?

 

I dont have any problems, animations are sharp and fast. Edge runtime run perfect to me.

I like to experiment with GSAP because they have interesting automatic processes.

Link to comment
Share on other sites

oke thanks, i'm gonna try Adobe Edge step 2.0 ;-)

 

Maybe you have your export settings?

 

or just for publish for Web/Optimized Html

 

v Host runtime files on Adobe CDN??

v Publish content as static HTML

 

Nothing special,

 

Publish Settings - Web - 1. Clear all relative adresses in Asset organization because some ad servers have problem with subfolders - 2. Uncheck Host runtime files on Adobe CDN because is small 33 kb - Publish

Link to comment
Share on other sites

thanks a lot...but are you using your animations on Adwords?

 

Edge Animate banners will work in AdWords. If the entire banner can be clickable then this simple meta tag added to the <head> of the HTML is all you need:

 

<meta name="ad.size" content="width=160,height=600">

 

The biggest catch I've seen with AdWords is the limited support for SVG in regards to embedded <styles> or tags like <fecolormatrix> etc. Basically AdWords wants your SVG to be about as basic as it can get. In other words, as I like to call it, as "flat" as you can make it.

 

For example, an SVG exported from Photoshop or even Flash will likely have <style> tags in it. So my work-around is to make the SVG graphic in whatever tool I feel is the most appropriate based on what I'm doing...if I'm converting Flash banners I will export some of the assets from Flash as SVGs. Then open that SVG in Illustrator to clean it up and essentially "flatten" it by removing those unwanted <styles>. 

 

The most important settings for exporting SVGs from Illustrator that I found (after much trial and error believe me) look like this:

 

  • SVG Profile: SVG 1.1
  • Type: Convert to outline
  • CSS Properties: “Presentation Attributes"

This seems to make AdWords happy whether hand-coding w/ GSAP or using a GUI like Edge Animate. Personally, I go between the two. I really enjoy hand-coding with GSAP but feel the need to use the GUI at times as well. It really depends on the design. 

 

I've been animating/coding for over 15 years on various platforms...yes, I do agree that hand-coding is the way to go. It's faster, cleaner, and leaner. But sometimes you just need that visual timeline when animating. I don't think we should EVER drop the visual aspect of using a timeline. It's like the old-school idea of animation on multiple pieces of paper and flipping back and forth while drawing to get the animation just right. 

  • Like 2
Link to comment
Share on other sites

Monnone I had created HTML5 ads for DCM, I did not know they were also going to end up booked for AdWords. I did the DCM method of defining a 0% opacity rectangle and used just the DCM Edge clickTag, and var="clickTag method. As far as I know I did not get flagged for not using the <meta name="ad.size" content="width=160,height=600">.

Link to comment
Share on other sites

Hi There

 

I have been reading this thread and it seems like you guys know what you're doing.

 

Ive recently been told my flash banners need to be converted to HTML5. I have done this using flash CC HTML5 canvas. I don't know what I have done wrong but I can't seem to get a clicktag to work through the Javascript. The media company have told me the clicktag needs to be in the HTML I think my clicktag is going in the JS file as I am adding the clicktag to the actions within my flash file. Is this the right way to go about it or is there a better way to do it. I'll admit I don't code I know very little about it and I don't know flash extensively. These banners just appeared at work and I was fine updating them in flash as SWF files but converting and sorting out the coding has really stumped me.

 

Any help would be appreciated

 

Thank you

 

Darren 

Link to comment
Share on other sites

  • Like 1
Link to comment
Share on other sites

Hi

 

Thank you for your help. It works now.

 

One problem I am having now is using sprite sheets to bring my file size down. Apparently its too big (500kb) I know sprite sheets are supposed to bring down file size etc. My problem is when I publish from Flash CC using a sprite sheet the banner HTML file only displays a blank white box now.

 

Here is my HTML code

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wickes HTML5 Test</title>
 
<script src="Wickes HTML5 Test.js"></script>
 
<script>
var canvas, stage, exportRoot;
 
function init() {
canvas = document.getElementById("canvas");
images = images||{};
ss = ss||{};
 
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadFile({src:"images/Wickes HTML5 Test_atlas_.json", type:"spritesheet", id:"Wickes HTML5 Test_atlas_"}, true);
loader.loadManifest(lib.properties.manifest);
}
 
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
 
function handleComplete(evt) {
var queue = evt.target;
ss["Wickes HTML5 Test_atlas_"] = queue.getResult("Wickes HTML5 Test_atlas_");
exportRoot = new lib.WickesHTML5Test();
 
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
 
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
 
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="320" height="50" style="background-color:#FFFFFF"></canvas>
</body>
</html>
 
My Sprite sheet is called: Wickes HTML5 Test_atlas_.png
 
Any help would be appreciated
 
Thank you
Link to comment
Share on other sites

I think the issue you're having is that you need a web-server to view your banner now that it's using a sprite-sheet and json.

 

Try it in Firefox it might work (Not exactly sure why but I've found it does as opposed to Chrome).

 

if neither works then you're going to have to set up a local web-server (I think, not 100% though).

  • Like 1
Link to comment
Share on other sites

regarding the file filesize you can always use this online image optimizer called tinypng.com

http://tinypng.com/

it will help reduce the file size of your sprite image

 

Also to add to Schoopie Doo suggestion if you are having trouble setting up a web server you can always use Adobe's code editor called Brackets. It allows you to view your HTML page in using a fake internal webserver that requires no setup. In Brackets it is called Live Preview. Brackets is Free.

 

http://brackets.io/

 

:)

  • Like 3
Link to comment
Share on other sites

Hi there!

 

I'm a freelancer from NL and I've been working with Bannerwise for a while (the website is in Dutch but they recently added English to the tool, if you click 'Probeer nu gratis', you can switch to English from there. That's free trial). 

 

This is the best sollution I've found so far and they've been making a lot of improvements. 

 

The good:

- Supertiny embedded animation framework (1.2kb)

- Automated image cropping and compression 

- Always correct metadata & clicktag per network

- Easy conversion to other networks

 

The bad:

- Creative limitations* (no normal timeline and you can only animate IN, Highlight or OUT for example)

- It's not free

 

*They are quick to respond to feedback, I talked to them about more creative freedom and they said they're currently testing their 'move' tool which should give a bit more creative freedom and they said there is a normal timeline coming soon. They would like to integrate Greensock for this purpose. I was looking around on the forums here because they mentioned greensock  ;)

 

For now, it's still easy to make good banners, it just requires a different approach then you may be used to.

 

 

Without Bannerwise, I would have probably given up on making banners because it became too much of a hassle with other software. It might make someone's life here easier too.

 

Some examples of banners I made:

Domino's pizza

Lotto

Audi

Link to comment
Share on other sites

It seems there are a few of those online tools poping up nowadays. Competition is always a good thing, it forces the bad out and encourages innovation.

 

At the end of the day, they are just tools, different people work better with different tools.

 

I did notice one thing on your examples and wondered if it is a glitch or is expected behaviour. None of the banners I looked at animated until I had the mouse over it. They seemed to start at the endcard and would abruptly stop any animation if I hover out and hover back in. Is that how publishers expect banners to behave?

 

I know there is a big ho-ha here in the UK, I imagine all over the web these days, about ad blocking and people trying to advocate for a middle ground as the sites need the advertisement but also, the user deserves a level of privacy and not to be bombarded with ads as some places do.

  • Like 2
Link to comment
Share on other sites

Yeah I agree, there may be some room for improvement on their preview pages. It shows a still of the last bit of the banner and it will start playing when you mouse-over. 

 

Usually, I just download them and display them to clients on my own staging area. 

Link to comment
Share on other sites

  • 1 month later...

Hi there, weighing in on the hand code vs. IDE tool for ad building with full disclosure that I work for Adcade.


 


If you have the time and resources to learn hand coding and using multiple tools for QA, creative optimization etc, that may be the route for you. I sincerely applaud Scott’s effort to study Lynda developer courses, learn new tools for editing and more for QA… 


 


However, if you don’t have the patience for all that and need to turn around HTML5 ads fast, Epoch (goo.gl/DpaG3z) is your option for building cross-screen HTML5  animation ads. Learn one tool vs. 5-10, plus you can export to any of our integrated servers (Sizmek, Atlas, DoubleClick etc.) so you skip a step of having to work in their APIs in the backend.


 


In response to Schoopie Doo’s original post… Epoch also comes with Lightspeed (http://goo.gl/67xZGK), a script for Photoshop that assigns animations on the Epoch timeline within Photoshop. You can essentially build your whole ad in Photoshop and export with layer comps automatically populating the timeline. 


 


We’d love your feedback on our tool. Give it a try for free or signup for a live demo. Reach out any time at jj@adcade.com if you have more questions. Thanks!  8-)


Link to comment
Share on other sites

  • 1 month later...

Good Day,

We used Flash forever, Now working with EDGE ANIMATE to create banners. Ad performance is off and we want to test other methods. Can anyone hand-code 180-200 banner ads a week with 4 designers? That's what I'm faced with coming from a fast paced timeline animation workflow. Google Web Designer is not an option for us. Let me know if anyone is hand-coding at that scale. If so, any tips and tricks to share?

Link to comment
Share on other sites

Good day to all,

 

I have read the whole thread and this is really interesting. In my opinion everything that is code related is better done by hand, you have all the control over what is in there and what it is is not. You also have a really powerful bonus and it is to reutilize and edit faster for future jobs.

 

You can also save a lot of snippets for the basic banner skeleton for a differnt partners once you have done it and you know its working. So the next one will be faster to create.

 

So in example for Doubleclick i think a good workflow should be just to design and write the html/css code for the banner. Then add the API and the Enabler to test that all the basic events works and finally have fun creating the javascript file to animate it with gsap.

 

I dont know if Adwords works the same way as Doubleclick.

 

Thats just my 2cents.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...