Current state of ad design

  • Started
  • Last post
  • 10 Responses
  • fues

    I was wondering what tools you guys are using these days for HTML ads.

    I personally still prefer hand coding but I see some folks are using Adobe Animate (formerly Flash) again.

  • Maaku0

    Yup, Flash and Adobe Animate now exports to HTML5.
    I know people that charge as if they were doing it from scratch (to charge more I guess) but they would do it in flash and export it to HTML5.

    • Client doesn't have to know, if it makes your process faster then go for it :)Maaku
  • fyoucher11

    'Was' using GSAP but just did my first campaign using Animate CC. Seems silly to do with anything else now. Hand-coding sucks compared to using a GUI. Masks and mask effects are easy p-z and work everywhere (hand-coding you have to use SVG for it to work everywhere, which is major pain in the ass). You don't have to deal with fonts. Seems to perform A LOT better. Finally have a timeline. It works and looks the same across the boards (with the exception of Chrome and a vector mask bug. It's a bug with Chrome and Canvas, not Animate CC. There's a code workaround though.)

    Oh, and I can create an ad in half the time or less over hand-coding.

    Think hand-coding is still preferred for rich media or any creative where you absolutely need the extra file size. Animate CC's JavaScript file (which contains all of the text, vectors, and animation) is running around 100k. DoubleClick / Google have a CDN for Create JS though, so the 50k library doesn't count towards file size.

  • fues0

    Good to hear!

    When you say you don't have to worry about fonts, is it because you just break them apart into graphics?

    And what is the Chrome bug you are referring to?

    Hand coding takes indeed a lot of time, I think my average work pace has halved since I handcode ads.

  • fyoucher10

    No, you don't have to break them apart anymore (that was before Animate CC in Flash CC). You just create text like how you would have in Flash. There's no custom anti-aliasing though. It's basically 'Antialiase for Animation' but it renders much better than Flash did with that setting. Right now I'm individually tweaking and kerning each letter, offsetting the positioning by 1/2 a pixel here and there to make the text super crisp.

    Chrome bug happens with vector masks on either other vectors but especially noticeable on a vector mask on a bitmap. It aliases the edges, so you get that stepped look around curves. It's a Chrome bug with Canvas, not a bug with Animate CC. The workaround is pretty simple and requires code though. It's kind of like setting a shape as a mask via code like how you did in Flash without setting the actual layer properties as a 'mask' layer, except you're using compositeOperation and then need to cache it. If the mask is animated, then you need to continually do it each tick. Once you get it once, it's easy to apply again. Hopefully Chrome with fix this soon.

    The other caveats is how you trigger canvas elements outside of Animate CC or Canvas. But again, once you figure it out, then you can use regular old JS in your HTML file or external JS file to do whatever you want. So you get the best of both worlds -- being able to code JS inside of the actual application and being able to do it in an external code editor (like Sublime).

    • Actually, I think the last update to Animate CC made it so you don't have to break apart text.fyoucher1
    • There are some minor bug nuances with the app too, but nothing that would stop me from using it.fyoucher1
    • You also need to be aware of the HTML file it exports and how you have to uncheck overwrite HTML and images.fyoucher1
    • I made a template HTML file with all of the various ad settings I use on regular HTML banners (click tag, misc CSS, etc).fyoucher1
    • Now I don't even allow Animate CC to export the HTML, just the JS lib file.fyoucher1
  • monospaced0

    Current state of animated flash banner ads. seems way too complicated for what should be creative design.

    • Yup, challenging thoughfues
    • Sounds like a pain in the ass to have to manually code to make pixels look good. Can't even imagine if that was the shit I had to do.monospaced
  • fues0

    Interesting, willing to share some creations you made?
    And how do you implement a clicktag?

  • Beeswax0

    Is there a way to make it responsive?
    Like don't display some elements in the animation under certain screen size? Or the whole things gets resized?

  • fyoucher11

    Yeh, just use regular old JS to swap out image-based stuff based on pixel density. What I'm doing if using images at double scale if I'm worrying about Retina, but if it aliases too much on normal display from scaling it down, creating a separate clip at normal density, then hiding the hi-res version...and vice versa for hd/retina. Depending on the type of image, that may not even be necessary. But, if you're talking about Retina and vectors, you just render the canvas at twice the size or whatever. I have code which checks for Retina, then renders the canvas at double scale and looks super crisp on those displays.

    As far as layout, that'd you'd do in JS, not CSS, so that may be a pain in the butt.

  • fues0

    Has anyone checked browser compatibility of Animate CC yet? I get nothing in IE9 although it supports canvas.

    What browsers should it support in your opinion?

  • fues0

    I have tested it thoroughly and all runs perfectly on an adserver! Good job Adobe, Flash is back!

    I call it Flanimate!