chrislund

Been messing around with it. Is there any (easy) way for Retina export or has that not been addressed?

That is a good point. Pixi.js looks pretty awesome and we’ve evaluated it for websites and rich media. We hadn’t looked at it for standard banners before because of file size limits, but the direction things are going, possibly it could be loaded off a cdn and not matter. In your experience, how is it with browser compatibility? I looked at a few of the examples in IE9 and they were not working. Possibly they were not set up correctly to deal with it, but it would suck if only some features were supported. We can probably get by without IE8 at this point, but we will still have clients asking for at least 9 and above. That said, the swiffy solution still seems quite nice for standard banners you need to quickly bang out on the timeline. We are still trying to figure out if there are any downsides with the swiffy approach.

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 has been happening. Fortunately we have been expecting it for a while, so it isn’t a surprise. Collectively we also have the HTML skills needed, from doing websites. Anyone who hasn’t picked up those skills in the past few years is going to have a tough transition. Throughout this process, we’ve executed banners in almost every way imaginable: - Google Web Designer Found this to be INCREDIBLY limiting for any kind of timeline animation. Your only hope is to load in GSAP and code your animations. It was quite buggy as well. Apparently, it has some useful time-saving templates for certain kinds of ads, but as it relates to doing standard banners, their timeline was pretty useless. It is also very unlikely that their templates will work for us. Clients always want something custom. - Adobe Edge Animate A better timeline then GWD, for sure. Almost After Effects-y in terms of how the timeline works, though obviously much more limited. A decent visual tool, but definitely doesn’t give you access to all of the HTML properties, so feels pretty limited overall. - Hand made Banners with GSAP Definitely the best way to do it, we’ve found. You have the most control and flexibility. For rich media units, this is definitely the best option. If you run into an issue you can implement work arounds that might not be possible in a timeline tool like GWD or Edge. But, no matter how we go about it, the same problems continually come up: - Fonts It’s too big of a file size to embed your fonts. There are legal issues, as well. So, if it’s a custom font, we end up saving out SVGs from Illustrator. Not the worst thing, but feels sort of redundant to relay out PSDs in Illustrator to save out. And, of course, if any of the copy changes (it always does), it’s more time consuming to update versus just typing out the new copy. - Masking It’s crazy how much this comes up, but doing any kind of masking other than a square is a problem. And it’s consistently surprising how much we took this for granted in Flash and now doing something as simple as a diagonal mask is a huge issue. - Filters Again, something we took for granted, but adding directional blurs or glows or drop shadows are all seeming so simple, but problematic now. - Blending Modes Overlays, screens, multiplies. Doing things like smoke or fog are also almost impossible now in the way we might have done it with flash. - Browser Compatibility If you manage to figure a way to do some of the above (for example, use CSS masking) you’re then hit with issues of not working across browsers and devices. Anybody doing html banners right now is probably very familiar with the above issues. It’s really painful to try to explain to clients why you can’t do things in 2015 that you were doing in 2005. The limitations are annoying, but so too is the lack of any clear timeline tool to allow visual designers and animators a WYSIWYG interface. When it comes to standard banners, one thing that seems to be overlooked to an extent is Swiffy. https://developers.google.com/swiffy/?hl=en We can make banners the way we’ve been doing (and maybe not appreciating) for years in Flash, via a timeline or use GSAP. And then simply publish it out and convert the SWF. We did a few tests… These all spit out just one HTML file, are all under 100k, zipped and use (relatively) advanced effects, such as filters, blend modes, custom masking, particles, blurs, glows, etc. AND seem to work the same in every browser we’ve tested (save ie8). Here’s a few examples that we’ve converted: http://www.silktricky.com/clients/html_banners/html_gray_matters_300x250.html http://www.silktricky.com/clients/html_banners/html_selfie_300x250.html http://www.silktricky.com/clients/html_banners/madden_300x250.html Something about this feels a bit like “cheating” but we’re wondering why this isn’t more of an accepted practice. Swiffy output does load in some code via a CDN (about 100k) but that seems like it’s going to be the new accepted norm with the new specs. So, then what is the problem and why aren’t more people doing this? Seems a lot easier to give clients what they’re used to than try to tell them why we can’t achieve simple things. In our experience, the time it takes to make a standard banner in the Flash timeline is around 10% to 60% (depending on complexity) of the time it takes to do the same thing in HTML using various methods. Additionally: Why wouldn’t Adobe adapt Flash to output something similar to what swiffy does? You then have a single html file, just like you would have one .swf file. They would undoubtedly have the best banner creation application from day one since it would allow all the effects that Flash .swf output does. What about Flash + CreateJS? It is nice in theory, but the output is not retina friendly. If you look at this banner on retina http://greensock.com/forums/topic/12289-flash-professional-html5-canvas-export-with-gsap/ everything is blurry. Swiffy output is retina friendly as it seems to keep vectors intact. It is also more limiting working in the Flash timeline when in HTML mode. Thanks for reading. Would love any thoughts on this. Thanks.