Current state of ad design
- Started
- Last post
- 10 Responses
- 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?
- 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
Interesting, willing to share some creations you made?
And how do you implement a clicktag?
- 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
- 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
- fues0
I have tested it thoroughly and all runs perfectly on an adserver! Good job Adobe, Flash is back!
I call it Flanimate!
- 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.
- 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?