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 de en en fr en en ca en en en en en en en en en en en en en en sv fr de de 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 fr en sv fr en es fr es en en fr en fr en en hbs_lat en en en fr en fr en en en fr 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 en en en en en en en en en fr en en en en sv 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 en en 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 en en de 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 en en sv 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 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 az en en en en en en sv 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 en 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 sv en en en en en en en en en es 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 en en en en en sv en en en en en en en en en en en en en en en en en en sv en en en en sv en en en en en en en en en en en en en en en de en en en en sv en en en en en en en en en en en en en en en en de en en en en sv en en en en en en en en en en en en sv en en en en sv 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 sv en en en en en en de en en en en sv 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 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 hbs_lat en en en fr en fr en en en fr en en en en en en en en en en en en en en en en en en nl en hu en en en pl en en en de en es 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
The are still no specifications in place for file sizes, GWD is still in beta and poorly documented, Adobe Edge Animate seemed to be not fully supported by Double-click until recently and hand-coding everything just seems to be to cumbersome when talking about a new standard.
The only solid rock in this wild storm is GSAP and I feel pretty save standing on it - but which software is good to support it?
Does it make sense to "hand-code" with GSAP in GWD? Is Edge as great to build banners with GSAP just like we did in Flash? Or is there a good hand-coding software that supports GSAP in a better way?
Top Posters In This Topic
Hey guys, lengthy post here, but wanted to weigh in:   Our company does lots of banners. We’ve enjoyed them throughout the years. Like everyone, we’ve been scrambling as the full-on switch to HTML h
I'm interested in seeing other people's responses to this, too.
I have a Flash background; I've been animating banners for 8 years, and I always used timeline animation; only adding in small bits of AS to add rollover states to buttons and things like that.  I never thought I would want to code banners by hand.
I'm far from an expert on HTML5 banners, but since the announcement that Chrome will start auto pausing Flash content, I've been preparing for the shift to HTML5 and testing out different tools.
Adobe Edge works pretty well as animation tool, however it relies on JQuery and makes the file size too big for most standard banner ads.
Google Web Designer is good for lower file size, but is CSS animation only, and pretty limited in capabilities so far (though I'm interested to see how it continues to improve).  I think GWD is fine for simple things especially if your ads are trafficked through DoubleClick; and for Rich Media banners it seems like a great tool with all the built in components it includes.
At my current job, we use a different ad serving company though, so there's not much benefit to using GWD, and I'm actually finding that I prefer to just work outside of a timeline software so far.
I think Edge & GWD can both be good for positioning things, but in terms of actually building banners in them, they add so much extra markup that I kind of prefer just using a text editor and keeping things clean.
Also, GSAP is really powerful and you can animate more properties that are not currently possible in Edge or GWD yet.
So I think you probably have more control building from scratch.
I've been using Flash for about 15 years and started coding ALL the animations in Flash with GSAP about 7 years ago. And I love it!
It's actually possible to use GSAP in Adobe Edge without a problem as illustrated in this (older) video:
I'm just not sure if the final file size is small enough for a banner project which might only allow for a 100k banner. Edge is adding their own js files which seem pretty large - but I'm still trying to figure that out.
I definitely want to stay on the path of being able to hand-code all the animation. But I also like having the graphic interface to simply create keyframes, throw some assets on the stage and arrange everything properly (creating the final end position if you want). And then use GSAP to animate it into place.
My preference is to hand code..
Here are some notes from the latest google html5 banner talk i went to last week in NYC
Shared assets are allowed per creative campaign. Replace one file and it will update everywhere.
Google is pushing IAB to allow a 150k initial load with up to 2 megs for the total k weight.
This would be for all banners as there won’t be rich media/standard categories anymore.
There may be an announcement Mid august for this.
The sizes shown in the DoubleClick Studio Preview are incorrect sizes to go by.
Browsers use a gzipped version of javascript files. For example, Tweenmax JS is 105k on the computer, but 33k into browser.
For the most accurate file size, count the zip file of the contents.
Clients will soon be able to upload custom fonts securely, provided that
a non-disclosure agreement is signed.
Google is working on integrating GreensockJS into future versions of Google Web Designer.
Greensock will be hosted on Google soon.
Share on other sites
Chris    16 Likes (Newbie)
Posted July 30, 2015
yes, interesting. I went to the same Google html5 seminar here in LA. But it was mostly about introducing the GWD. I also asked about hosting the Greensock library and they didn't have an answer yet - so good to know they will do that! I hope they will also host the Adobe Edge animate library js but maybe with 150k+2MB we don't have to worry about each single K anymore as we did so far with 40K banners.
GWD also allows to import Adobe Edge animate projects which is a bonus if you want to create your project in Edge - and then use GWD to add DC code and upload to the DC studio. But I haven't tried it out yet.
Share on other sites
Carl    9,066 Likes (Superhero)
Posted July 30, 2015
Thanks so much for the notes from the DC HTML5 events.
That is certainly good news. We've heard various rumors and multiple confirmations about how supportive DC is of GSAP in general.
The challenge has been locating a resource on their site explaining their policies regarding where GSAP is or should be hosted, whether it counts as file size, etc.
The way things are moving, we're optimistic that it will all be sorted out soon.
This is the first I've heard about GSAP support in GWD. That would be fantastic.
Share on other sites
Chris    16 Likes (Newbie)
Posted July 30, 2015
Google DoubleClick is now officially recommending using Greensock for CSS3 animations:
Share on other sites
Carl    9,066 Likes (Superhero)
Posted July 30, 2015
That link is very helpful.
Share on other sites
jany8011    0 Likes (Newbie)
Posted July 31, 2015
Adobe Edge works pretty well as animation tool, however it relies on JQuery and makes the file size too big for most standard banner ads.
Is there an easy way to make the file size smaller?
Share on other sites
Carl    9,066 Likes (Superhero)
Posted July 31, 2015
FWIW it appears Edge has made some progress in file size and dependency on third party libs
Reduced supporting runtime size by 55%
Removed dependencies on 3rd party libraries
Save your images, media and scripts to custom folders
Fewer project output files to manage
Share on other sites
joe_midi    238 Likes (Specialist)
Posted August 2, 2015
As I write this, I have 25 banners to build 5x Creatives, 5x Sizes and I'm going to hand-code all of this, I only need to work towards one platform, so I can set up the functionality for that and I'm good to go. I'll be saving snippets on the way with Sublime so I can make things faster later down the line.
You could use GWD with other platforms such as Sizmek if you really wanted to, just select Generic when you start building, and then implement the Eyeblaster.js (can't remember the actual name, sorry) stuff in CODE view.
I've tested out GSAP in platforms like Celtra and BannerFlow which have the ability to extend their platforms by giving users BLOB data iframe, they seem to work pretty well.
Share on other sites
Chris    16 Likes (Newbie)
Posted August 2, 2015
Hi joe_midi, yes, hand-coding seems to be the best way to move foreword from here on.
But I've also spend some time with Adobe Edge, which allows you to create the banner on the stage (drag&drop, import assets, moving elements around the stage, typing text, adjusting all the layouts) and also has the option to code all the animation with GSAP. Pretty much the same thing as with Flash.
But I don't really want to use any timeline animation features of Edge. Even though they're quiet impressive; very close to how things are done in After Effects. Instead I would mostly use the timeline to design and organize the banner (intro frame, video frame & end frame). But then the java script code in Edge seems to be slightly different, since I always need to refer to the Edge stage first to find other objects. I can't just copy and paste some js code on different frames and expect it to work.
While this features in Edge are all neat and everything, I'm still discussing if I really need a graphic IDE with a stage instead of just using a code editor and browser. Am I limiting myself, since I have to deal with filters of an interface (instead of seeing the clean code directly) or am I pushing the boundaries since I can work with grouped symbols and don't have to babysit every single piece of code?
GWD seems to be more like Adobe Edge Lite.
I wonder if there are any people out there who want to code all the animations with GSAP but prefer the stage interface of Edge (or GWD)... Especially since all of us used Flash to create banners. So we are all used to that setup (stage interface + code).
Share on other sites
joe_midi    238 Likes (Specialist)
Posted August 2, 2015
Hi joe_midi, yes, hand-coding seems to be the best way to move foreword from here on.
But I've also spend some time with Adobe Edge, which allows you to create the banner on the stage (drag&drop, import assets, moving elements around the stage, typing text, adjusting all the layouts) and also has the option to code all the animation with GSAP. Pretty much the same thing as with Flash.
But I don't really want to use any timeline animation features of Edge. Even though they're quiet impressive; very close to how things are done in After Effects. Instead I would mostly use the timeline to design and organize the banner (intro frame, video frame & end frame). But then the java script code in Edge seems to be slightly different, since I always need to refer to the Edge stage first to find other objects. I can't just copy and paste some js code on different frames and expect it to work.
While this features in Edge are all neat and everything, I'm still discussing if I really need a graphic IDE with a stage instead of just using a code editor and browser. Am I limiting myself, since I have to deal with filters of an interface (instead of seeing the clean code directly) or am I pushing the boundaries since I can work with grouped symbols and don't have to babysit every single piece of code?
GWD seems to be more like Adobe Edge Lite.
I wonder if there are any people out there who want to code all the animations with GSAP but prefer the stage interface of Edge (or GWD)... Especially since all of us used Flash to create banners. So we are all used to that setup (stage interface + code).
Pretty much the same reasoning I've used in deciding to pursue a hand-coded approach.
But I have to say on the Stage front of things, BannerFlow has a pretty sweet stage, they're young, (something like 7 months old) but getting there, and at better pace than GWD or Adobe Edge, because as the name suggests its made for banners, plus they plug into every ad serving platform on the planet so it makes it much easier to work out all the clickTag business, it just depends on how the business case works for you.
I will also say that Adobe's handling of this transition has been poor, as they haven't really addressed the fact that some people do not have the mind-set for coding, they release this article a few weeks ago http://blogs.adobe.com/flashpro/converting-your-flash-ads-to-html5-canvas/ and a lot of the designers on my team were very apprehensive about taking these steps as they are just simply not code-minded.
Share on other sites
somnamblst    183 Likes (Specialist)
Posted August 3, 2015
My former company had created an elaborate template for the ad serving software Doubleclick for Publishers that delivered a frequency capped pushdown. The authoring tool was Edge Animate. Coming form Flash I was frustrated by Edge. I just wanted to be able to load sub SWFs.
Until I realized I could not only iFrame anything, unlike with Flash, cross domain was not an issue either.
For hand coding gurus I like what Ad Form is doing.
Share on other sites
Schoopie Doo    1 Likes (Newbie)
Posted August 11, 2015
Sorry if this seems a stupid question and maybe it's already been answered above but I didn't pick up a clear enough answer so going to ask away!
I'm just wondering why many of you are suggesting hand-coding animation as opposed to using the timeline animation in Adobe Edge.
What exactly are the benefits of it and is hand-coding definitely the way to go forward? (as of right now.)
Also, maybe I've picked this up wrong but from reading some of the above posts it would seem you can use a mixture of coding and the timeline in Edge to animate.  Say organizing the placement of start frame, end frame, where an object appears just before it comes on screen with the timeline and then the in between motion can be done with code. Is this correct?
Thanks for any answers in advance!
Share on other sites
joe_midi    238 Likes (Specialist)
Posted August 11, 2015
There's absolutely nothing wrong with building a banner in Edge Animate using the timeline, if I were given a creative that used Edge Animate and was told to adapt or make amends I would use it,  there's no reason to re-write the book.
My _personal_ preference is to hand-craft the code as I have full control over what it's doing, I know what libraries are being included in the files I create and deliver.
I just did a quick test on creating a banner by hand, and then in Edge Animate, and when I publish the code in Edge Animate it's doing things I'm not sure if I want it to do that, such as including jQuery, which would be overkill for a banner because you don't need all that functionality.
If I wanted to debug an error, and go through the HTML file I can't because it's obscured it all in its publishing process, I'm not sure if theres a way to turn this off.
I'm not sure if there is a way to mix coding and timeline with Edge, you can certainly code, but I'm not really sure how you would sync the GSAP code with the timeline. Probably best to watch the video further up in this thread.
If you wanted to use a Layout tool, you could try and use GWD, it puts far less bloat in and you can move things around on a stage.
But for me, I'll still write these things by hand because I know exactly where everything is, and what the result will be.
Share on other sites
Chris    16 Likes (Newbie)
Posted August 11, 2015
Actually it's pretty easy now (even easier than shown in the above video) to just include GSAP in Adobe Edge. The library now (CC 2014+) has a "scripts" panel which allows to load external or local scripts. Then you can code all the animation yourself.
jQuery is not automatically added or needed anymore. Instead Adobe integrated the most important parts into their own library which is about 100K uncompressed. Of course it will be much smaller compressed. So right there would be the question if your project allows for that file size or if you can load it externally from a CDN.
I still haven't decided if I prefer handcoding, Edge or GWD. I'm trying out all three and see what kind of issues I'm running into. I'm currently handcoding with "Brackets" which I like a lot (even though the amount of code necessary seems a little insane).
I think at the end we need to know all three apps anyway (incl. a handcoder app) since some projects require a certain app or have limited file sizes. You also might get an ongoing job from someone else and you should be able to handle it no matter how it's created.
None of these tools are easy to understand or to learn, since there are 1000 tiny little things that are different from Flash. But I think the process of learning them all is necessary to understand HTML, JS and CSS.
Share on other sites
Dipscom    2,815 Likes (Superhero)
Posted August 17, 2015
Hello, chipping in my two cents:
My preference is to hand code it all. Been building ads for the past 7 years myself. Started like many here, flash timeline. But one day was introduced to Greensock via a flash framework (don't even remember which one it was, tbh) and slowly was converted into a developer (I started out as an animator).
Like it was said before, there's is nothing wrong with using tools like Adobe Edge or GWD but they do take away some of the control and make the code a mess with their many classes and bloated extras.
The reason I hand code is because it gives me access to all the techniques of OOP, Task Runners and the natural design of HTML pages - Structure(HTML), Style(CSS), Logic(JavaScript).
We all have to work in a bunch of ads in one go at a time. More often than not, there are changes on the way and amends. The way I set my files up, I have one HTML index, one base CSS file, one base Javascript setup file and one base Javascript animation file. Then, I have the different folders that contain the individual CSS and Javascript. It makes it easier to amend that one animation file and have it propagate into all the units.
Of course, sometimes, some ads require a very specific experience but that's a different story.
Share on other sites
87AM    2 Likes (Newbie)
Posted August 18, 2015
I've been using GSAP with Edge for the better part of 6 months now, and feel like I have a pretty good handle of how the two can work together. It's been a bit challenging since there isn't much documentation on using the two together, but I've been able to frankenstein code together enough to make it all work, including the SplitText function.
I enjoy using the interface of Edge, and hand code all of my animations either in the Composition Ready panel, or by trigger.
I've had to use GWD on a few projects, but only use when I have to, depending on how I'm serving the ad. I found it to be much more limiting than Edge.
By the way, if you replace the src callout in the index file for the edge.5.0.1.min.js with https://animate.adobe.com/runtime/5.0.1/edge.5.0.1.min.js then that should take care of any large file size limitations you're experiencing with Edge files.
Share on other sites
flysi3000    49 Likes (Newbie)
Posted August 18, 2015
I like hand-coding as well, because it's forcing me to get better with front-end in general. I had dabbled with things like SASS and Grunt in the past, but this is making me work towards making them a part of my workflow.
I was at one of the NYC Google Workshops last week, and another thing they stressed was using sprite sheets for your images to reduce the number of network calls. I haven't tried this technique myself just yet, but it sounds like yet another complication to what's becoming a fairly involved workflow. Anyone have pointers for doing this?
Also, I had some banners get kicked back my way from DCM because I had nested folders for assets (/css, /images, /js) - they wanted a flat folder structure. Plus they had that limit of 10 files (which sprite sheets would have helped with); at the Google workshop, they said they were increasing their limit to 25+. I guess the point is, stuff is changing rapidly - it's just more stuff to be aware of.
Share on other sites
cwiens    23 Likes (Newbie)
Posted August 18, 2015
get CSS positioning in Photoshop really easily. Just right click on the layer (has to be rasterized for bitmaps) and copy CSS. That way you can continue to visually layout ads in PS. Also you can use PS generate image assets in the same psd to auto export in png or jpg and the compression you need. This all came together for me this week. I created this simple ad quickly using the above. I had the HTML,CSS and JS shell already built. cwiens.com/curt/html5728x90/728x90.html
Share on other sites
alwayzambitious    54 Likes (Contributor)
Posted August 18, 2015
Let me tell you for sprite sheets, do not do them manually, check spritepad.com- Google the name. you drag the images exported from PS and named properly into the website, then re arrange and generates the css for you. That will take the tedious ness out of making spritesheets. and yes for double click standard banners there are no folders that are to be used.... but if it's a double click richmedia banner then you can use folders if you want.
Share on other sites
cwiens    23 Likes (Newbie)
Posted August 18, 2015
You can generate sprite sheets from Flash too it actually has some good controls. I like being able to compress assets individually so its not my preference.
Share on other sites
Chris    16 Likes (Newbie)
Posted August 18, 2015
I like sprite sheets for mouse-over images or to simply line up same sized items (like navigation etc) with just one PS document.
But I hate sprite sheets just to keep my file count to <10 items. It makes the workflow very tedious. For example: If I want to increase the size of just one item on my sprite sheet, I need to move everything around and redo my all the positions in CSS. This just takes the fun out of simple creating animations.
If DoubleClick increases the limit to 20+ that would be great news. Even 15 items are enough to get a basic banner done without sprite sheets. For now I would recommend sorting your images into groups, then each group would be a sprite sheet file. So you end up with maybe four sprite sheet images (logos.png, backgrounds.jpg, tune-ins.png, extras.png). The rest would be four or five individual images.
I tried "tools" to create sprite sheets but they all have similar issues. You have to rely in a third party websites or apps, and this make it harder to share your projects with others if they don't use these tools. And the file size of the images those tools create, are way bigger than the same file created with Photoshop.
I'm using the new PS CC 2015 "export" feature which work very well and the sizes are small. This replaced the old "Save for Web" which didn't allow for exporting png8 with transparency.
I also think the PS "Generate image assets" feature is interesting since it automatically creates the images for you based on layer names. Then I can import those images into a SpriteSheet.psd as "linked smart objects". This way the spritesheet automatically updates when I update my main design file.
But as you can see - spite sheets just make everything more complicated. So I try to use them as little as I possible.
Share on other sites
Page 1 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 0
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Last Reply 5 yr
Top Posters In This Topic
Web Dizajner 12 posts
Hey guys, lengthy post here, but wanted to weigh in:   Our company does lots of banners. We’ve enjoyed them throughout the years. Like everyone, we’ve been scrambling as the full-on switch to HTML h
My preference is to hand code..   Here are some notes from the latest google html5 banner talk i went to last week in NYC     Shared Library/ Shared assets in Google Web Designer Shared assets a
I was in the same situation, unsure whether to utilize tools like Edge / GWD and risk being stuck in their eco-system, or take the plunge and just hand code everything to have full control. Long story
Creating html5 banners in Adobe Edge, Google GWD or by hand?
“Honestly think without TweenMax, I'd of changed careers by now; it's that good.”
“I think I love GreenSock as much as bacon.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“...obviously GSAP is incredible”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
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.