Jump to content
GreenSock

Chris

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

Recommended Posts

Hi RayH

 

The good news is you can use the tool you are most familiar with to create animated banners, which is Flash CC Canvas export, soon to be renamed Animate CC n the next release. I also have used Edge and going back to Flash has greatly improved workflow.

 

Attached is my banner example zip file with commented HTML doc, that shows what you add to your HTML file after publishing. I also have an FLA I was unable to attach, because that type of file is not permitted as an attachment in this forum. PM your email address and I'll send it you.

 

This MAX presentation is highly recommended.

 

https://images-tv.adobe.com/avp/vr/155ad5fb-a467-45ba-a599-6f0e3b4806ad/3e5d068a-7998-41d1-8607-d4f04a5579df/1aa439ad-0773-4ee7-b88b-28393984b4a0_20151007114929.854x480at800_h264.mp4

 

The white paper

 

http://createjs.com/html5ads/

 

 

banner_example.zip

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Thanks for the info. I saw this presentation at MAX. I appreciate the chance to watch again. We'll explore the examples and try out CreateJS.

Best,

Ray

Link to comment
Share on other sites

I am also authoring at twice the size for retina display, and am very pleased with the Flash CC Canvas export file sizes. The compact shapes publish settings option that is checked by default seems responsible for the light weight of multiple imported vector graphics copied and pasted from Illustrator.

 

I love using guide layers again, as I have to version for as many as 11 different logos.

 

The masking we loved from Flash is also intact in canvas export, as are motion guides. For banners uncheck create sprite sheet as Doubleclick does not permit JSON files.

Link to comment
Share on other sites

I am also authoring at twice the size for retina display, and am very pleased with the Flash CC Canvas export file sizes. The compact shapes publish settings option that is checked by default seems responsible for the light weight of multiple imported vector graphics copied and pasted from Illustrator.

 

I love using guide layers again, as I have to version for as many as 11 different logos.

 

The masking we loved from Flash is also intact in canvas export, as are motion guides. For banners uncheck create sprite sheet as Doubleclick does not permit JSON files.

 

The only main downside I've noticed with Flash CC Canvas is that masks appear very jagged in Chrome (at least on a Mac, particularly on non-retina displays); but authoring at double the size helps with that too.

 

I agree that it's really nice to have the Flash IDE as an option again!  For some things I prefer animating DOM elements with GSAP, but for other things, working in Flash Canvas is more efficient for me personally... especially if I'm working on something that uses custom fonts.

Link to comment
Share on other sites

  • 9 months later...

Some years ago I've been using Adobe Edge, but when it got released, the authoring program itself ran so damn slow on my computer, I just couldn't use it at all anymore (refresh rates of 1 fps).

Most of the time, I did everything by hand, using CSS3 animations or wherever allowed GSAP or portions of it.

There were some "old-fashioned" customers who insisted on the old 40kb size (incuding _everything_) and still there were ways to do it.

I rendered texts to SVG outlines to avoid loading font files or having jagged bitmap-texts.

 

But at the moment I find that Adobe Animate (formerly Flash) has reached a point where it is again the tool of my choice for html5 banners and maybe even more!

I know the createjs API very well now and can handle it like Flash before. It is even a bit more fun. The Javascript acutaly let's you do even more than Actionscript (even though I think AS3 is the most beautiful language there is ... maybe right after Haxe).
For example I wanted to let the whole banner Shake.
GSAP already included (via DoubleClick CDN), I could do this on a frame:
 

TweenMax.from('canvas',1,{y:-5,ease:Elastic.easeOut});

This would let the Canvas-Element make a spring-like motion. So you have control over the container itself and so much more.

You can create template HTML files where everything is setup for banner creation, like clickTag management, AdHelper (which helps stopping banners after 30secs or enables retina-friendly display) or the google exit Api.

Here you can download an AD template for Adobe Animate which already includes GSAP:
https://blogs.adobe.com/creativecloud/creating-html5-ads-with-animate-cc-google-html5-ad-templates/

I just had much fun creating the first banner campaign with Adobe Animate again :) I've been using Flash for 16 years now and am glad that this wonderful authoring tool is still alive and kicking and generating better and better output.

 

I'm wondering if they'll also include pixi.js as an option for rendering content? Of course it's (still) much too big for banner ads, but otherwise great for games or bigger rich applications.

 

 

Still one thing to consider is:

the createjs/Adobe Animate option has one drawback: The constant updating of the stage on every tick. This forces createjs to re-draw every element on the stage on each frame. The engine still doesn't know which elements are moving and which are not, so there is still much room for optimization.

If you work with DOM elements instead of canvas, the browser can control which areas need to be updated or not and may not use as much CPU resources.

Link to comment
Share on other sites

Flanimate is the best commercial tool currently on the market, BUT:

- It cannot edit pixels, You have to call Photoshop for help

- It's code editor is weak, simple and unreplaceable.

- You have to spam your code with "this." to reach elements

- Based on a > 15 years old movieClip structure which makes the sub-sub-sub elements hard to reach

- Timeline based which is hardly used with GSAP animations. ( everything is on frame1 )

- Must watch out for sub pixel positioned pixel elements, otherwise You will get blurry.

- If you using a scaled asset without actually rendering it 1:1 in Photoshop, You will get blurry or cracked appearance.

- The canvas .mp4 soft masking is gives different results on different browsers and GPUs.

- You cannot test the exported html separately from the authoring tool or a web server.

 

Generally it is an animation tool, not a banner ad making one. Canvas is great, but gives access to only a little subset of the possibilities of HTML5. I feel they patched Flash ASAP to have a HTML5 exporting app and killed Edge fast to eliminate it's competitor. Edge was an interresting experiment but it went in the wrong direction like GWD. As I see the ( because i am checking every encountered banner ad with right click ) big percentage of the smooth, sharp, clear ads are still made with EDGE or hand coding. 

If I were Adobe, I would start to work on a HTML/DOM/SVG/CANVAS/WEBGL authoring tool immediately.
 

Link to comment
Share on other sites

If I were Adobe, I would start to work on a HTML/DOM/SVG/CANVAS/WEBGL authoring tool immediately.

 

 

 

Wasn't that supposed to be Edge Animate ?

 

lol

 

#handcoder4life

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