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

Hey folks,

 

Times are changing and everyone is running in circles about the switch from Flash to html5. While i'm very excited about ditching Flash for html5/js I'm actually a little shocked how unprepared the industry is for this transition.

 

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?

Link to comment
Share on other sites

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.

 

If you know some HTML/CSS and a bit of JavaScript (I'm still a JS beginner) I'm finding that GSAP in fairly intuitive.  (And if you know any ActionScript, especially AS2 the basics of JS are easy to pick up.)

 

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.  

 

It's also inspired me to brush up on HTML/CSS and actually learn JavaScript!  Some people are really worried about the shift to HTML5 but for me it's exciting to have a new challenge.

  • Like 3
Link to comment
Share on other sites

Thanks for for talking about your experience with flash/html5/js/.  I will definitely check out those other tools as well.

 

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.

 

GWD is similar to Edge but way more limited. I think the app is actually coded in html5 which is impressive but it's still a very young product. It automatically adds all the Double-click specific code which is nice - but on the other hand it doesn't give you the hand-coding/actions interface that Edge has. Instead you click between design and code view. And then you have to deal with all the id/classes that GWD created for you which can be confusing.

 

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.

  • Like 1
Link to comment
Share on other sites

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 are allowed per creative campaign. Replace one file and it will update everywhere.

 

Files sizes

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.

 

Google Font Locker 

Clients will soon be able to upload custom fonts securely, provided that 

a non-disclosure agreement is signed.

 

Greensock

Google is working on integrating GreensockJS into future versions of Google Web Designer.

Greensock will be hosted on Google soon.

 

 

  • Like 5
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hey Dwayne,

 

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

sym.$("Box").html("<iframe width='1320' height='380' src='http://***********/iframe.html' scrolling='no' border='0' border='no' frameBorder='0' ALLOWTRANSPARENCY='true'></iframe>");
 
For hand coding gurus I like what Ad Form is doing.
 
Link to comment
Share on other sites

  • 2 weeks later...

Hi guys,

 

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 definetly 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!

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

 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 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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.

  • Like 1
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...