en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en en en sv fr de de en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en hbs_lat en en en en en en en en en en en en en en ceb en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en zh en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en eu en en en en en en en en en en en en en en en en en en en en en en la kn en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en pl en en en en en en en en en en en ca en en en en en en en en en en en en en en en en en en en en en en ja en en it en en en en en el kn en fa kk kn en en fr en en en en ta ru en en es es kn en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ru en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en pt en en en en en en en en en en en en en en en en en en pt en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv fr de de en en en en en en en en en en en en en en en en en en en en en en en en es en fr en en en en en fr en nl en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Creating html5 banners in Adobe Edge, Google GWD or by hand? - Page 4 - Banner Animation - GreenSock
Get updates on the products you use
Learn about exclusive offers and more!
Sign in to follow this   Followers 8
By Chris, July 29, 2015 in Banner Animation. Views: 71,634
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.
okay thanks...i will watch them...
i also see, that google works on new pages...(amp html or something..) where no javascript is accepted...only iframe...
With Edge we can make an iframe...
Is iframe something for Adwords?
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.
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.
maybe use this super basic fade function for AdWords. Most banners just have changing copy.
#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%; }        $(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); });              Your Copy... anything goes   Fuel your copy and cross fade it   Plus Earn copy rewards!   See what's new when you fade
thanks, but i am not very familiar with this code..
i know how to make an easy animation in Edge, in GWD, and by code in codepen. ( html, css, java) but i don't know where to put this code
Web Dizajner    65 Likes (Contributor)
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 necessary to duplicate runtime.
Web Dizajner    65 Likes (Contributor)
Posted October 7, 2015
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.
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted October 7, 2015
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
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
Share on other sites
cartimundi    9 Likes (Newbie)
Posted October 8, 2015
thanks a lot...but are you using your animations on Adwords?
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted October 9, 2015
DoubleClick yes, AdWords not for now.
Share on other sites
Monnone    4 Likes (Newbie)
Posted October 14, 2015
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   of the HTML is all you need:
The biggest catch I've seen with AdWords is the limited support for SVG in regards to embedded   or tags like   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   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  .
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.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted October 14, 2015
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  .
Share on other sites
squashthatfly    0 Likes (Newbie)
Posted October 14, 2015
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
Share on other sites
Schoopie Doo    1 Likes (Newbie)
Posted October 15, 2015
You add the click-tag to your html file in a text editor. Once you publish your banner from Flash you should get a .html file, .js file and then all of your assets. Open up your html file in a text editor and put the click-tag in there.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted October 15, 2015
I watched the Lynda.com tute on Flash CC Canvas and extrapolated the following.
canvas.onclick = function(event) {
I replaced the hard coded URL with clickTag.
This is the tute. I did DL the example files.
also stop(); is now this.stop();
Share on other sites
Jonathan    5,380 Likes (Superhero)
Posted October 15, 2015
Hey Guys here are some helpful links for Flash CC that use the CreateJS toolkit, which is now integrated in Flash CC:
Introduction to the Flash CC HTML5 Canvas Document
Creating and publishing an HTML5 Canvas document
Using the Flash Professional Toolkit for CreateJS
Getting Started with CreateJS
Share on other sites
squashthatfly    0 Likes (Newbie)
Posted October 16, 2015
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
var canvas, stage, exportRoot;
var loader = new createjs.LoadQueue(false);
loader.loadFile({src:"images/Wickes HTML5 Test_atlas_.json", type:"spritesheet", id:"Wickes HTML5 Test_atlas_"}, true);
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
var queue = evt.target;
ss["Wickes HTML5 Test_atlas_"] = queue.getResult("Wickes HTML5 Test_atlas_");
exportRoot = new lib.WickesHTML5Test();
stage = new createjs.Stage(canvas);
My Sprite sheet is called: Wickes HTML5 Test_atlas_.png
Any help would be appreciated
Share on other sites
Schoopie Doo    1 Likes (Newbie)
Posted October 16, 2015
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).
Share on other sites
Jonathan    5,380 Likes (Superhero)
Posted October 16, 2015
regarding the file filesize you can always use this online image optimizer called 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.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted October 16, 2015
I just noticed spaces in your .js file name and some of your other assets. Wickes HTML5 Test.js
Not sure if that is the issue, but it is generally not done, that I know of.
You can use underscores instead.
Share on other sites
Sebben    0 Likes (Newbie)
Posted October 22, 2015
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.
- Supertiny embedded animation framework (1.2kb)
- Automated image cropping and compression
- Always correct metadata & clicktag per network
- Easy conversion to other networks
- 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:
Share on other sites
Dipscom    3,362 Likes (Superhero)
Posted October 22, 2015
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.
Share on other sites
Sebben    0 Likes (Newbie)
Posted October 22, 2015
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.
Share on other sites
Justine23    0 Likes (Newbie)
Posted November 23, 2015
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!
Share on other sites
RayH    0 Likes (Newbie)
Posted January 21, 2016
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?
Share on other sites
adrimage    1 Likes (Newbie)
Posted January 21, 2016
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 different 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.
Share on other sites
Page 4 of 5
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 8
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Creating html5 banners in Adobe Edge, Google GWD or by hand?
“GSAP is awesome - I just dropped all my [custom] code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“I will never say it enough but @greensock you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.