neilb1969

Switching from Animate CC to hand coding - Advice required

Recommended Posts

Hi Greensock Community.

I am a designer with years of experience creating banners using Adobe Animate but I am now keen to switch to hand coding the banners using Greensock but I have questions about the suitability of doing so.

 

Our projects are very specific about which fonts can be used (branding comes from a print studio with a large font library). They all need to maintain branding and type styles. One advantage with Animate CC is that I am able to use whichever font the brand requires without having to find a web font which may or may not match the required font as Animate converts the type into SVG files in code (or at least I believe that is what it does).

 

So, question 1 is:

Do hand coded banners have to rely on web fonts or can they use TrueType or PostScript fonts too? Or can i create a type font to be used in hand coded banners.

 

In addition, my hand coding skills are a little rusty due to a huge reliance on Animate over the past couple of years. Laying out and creating the <div> files for all assets in a project would take me ages to type manually.

So, question 2 is:

Is there an application that can help with the layout and creation of the basic HTML code to set up the banner?

 

I know that hand coding is lighter, can create some fabulous effects, and is simpler to understand than the code output by Animate but unless I can answer the two questions above then I am struggling to see the true benefits of hand coding.

 

I look forward to an avalanche of great advice to move me forward!

 

Cheers all!

 

Neil

 

Share this post


Link to post
Share on other sites


Hi, Neil. We use both approaches where I work. Often, a hybrid of both in one banner. Some kinds of complex animation, like cartoony things or animated masks, really need a timeline to build efficiently.

We recently did a series that used Animate for a logo animation in a canvas tag, but the rest of the banner was html with GSAP. 

One shortcut in hand-coded banners is to keep all your image files the full dimension of the banner. So if you're building a 300x250, you end up with a stack of divs holding 600x500 transparent pngs, scaled to 300x250 for crispness on high density displays. 

Without Animate, type is usually done as images. The advantages of web fonts don't apply so much to ad banners. We don't care much about SEO, copy and paste functionality, accessibility or responsiveness in an ad banner with fixed dimensions. A web font isn't worth the file size and trouble, unless you need dynamic type, in which case you need to look into font subsetting and hope you can use web fonts.

 

I don't think you need an app for your banners, just a text editor, some patience, and some examples to look at. Try Google's 728x90 here: https://support.google.com/dcm/answer/3145300?hl=en - good luck!
 

 

  • Like 2

Share this post


Link to post
Share on other sites

GSAP has integrated well with Animate / Flash for a very long time. You can continue to use Animate if you prefer the GUI interface while also leveraging the power of GSAP. https://greensock.com/GSAP-Animate-CC-2017 The syntax is largely the same in JavaScript or Animate.

 

Hand-coded banners do not have to rely on web fonts and you are also able to link to free Google web fonts. The downside of using Google fonts is that there might be a slight delay in displaying the proper font in your ad. For example, the end-user might see the text render initially with Arial, Helvetica, etc. and then quickly switch to the correct font. An important thing to keep in mind is the licensing terms of fonts especially if it's tied to a specific client. You are technically distributing the font files (even if it's a PNG file) when you use them in an ad. So check with your legal folks to see if you can use those fonts on the web.

 

Like Geedix said, you are also able to export text from Photoshop as a transparent PNG file. A typical workflow is where you export the PNG at double the resolution of your ad. For example, export the PNG at 600x500 px for a 300x250 px ad, etc. This trick will only work if you have the font file on your computer. If you don't have the font then Photoshop will have to create pixels from nothing, which will make the text fuzzier instead of crisper.

 

Once you have the PNG, you "force" the image to display at correct size by manually entering the desired width and height properties in CSS and also using the "background-size: contain" property.

 

Doing these steps allows you to support high density or Retina displays like on the Mac. Typically, I only "retina-size" PNG files for text so that it appears crisp. You can certainly "Retina size" photos or other images too, but I find that the increase in sharpness is hardly noticeable.

 

Another important workflow issue when you move to hand-coding is that you have to compress all of your images especially PNG files manually to meet IAB specifications for banners. Luckily, you can use a service like TinyPng.com to do this. There is also a TinyPng plugin for Photoshop.

  • Like 1

Share this post


Link to post
Share on other sites

Yeah, I'd guess that the hardest part of building stuff like that is just gonna be the asset setup. Once you get to the actual animation with GSAP, I think you'll have a lot of fun. 

 

As for the fonts, one other thing you could consider is just outlining the fonts (like in Illustrator) and then exporting it as an SVG. That way, you get resolution-independence and probably a smaller file size. 

 

I've heard from several professional banner-ad creators who say that once they started hand-coding their banners with GSAP, they would NEVER want to go back to the old way. I do think there's a place for GUI-based effects for sure, but the vast majority of cases are perfectly suited to hand-coding and you'll probably find that you get better control and can create some nifty effects that'd take forever if you tried doing it in a GUI (staggered effects, explosions, interactive user-driven animations, etc.) 

 

Good luck and let us know if you run into any troubles!

Share this post


Link to post
Share on other sites

Thanks for all the responses to my post. You have all answered my key questions and I am looking forward to branching away from Animate and getting into the hand coding of banners using Greensock. Onwards and upwards!

Cheers. Neil.

  • Like 1

Share this post


Link to post
Share on other sites

You can also inline the SVG code. Create all your text in Illustrator (or the new Animate) :) in a separate file then you can copy and paste into the HTML. In Illustrator, when you copy/paste text to your text editor like Sublime, it'll paste SVG code, not an image or vectors. The advantage to doing this is you're not dealing with a bunch of extra individual SVG image files, plus you can access the SVG code if you want to do things (like SVG mask effects, blend effects, and even using GSAP to animate portions, just add id's or classes, sorta like an instance name).

I'm personally not a fan of using PNG's for text content. 2X is still a tad soft on some newer ultra hi-res devices and doesn't render pixel-perfectly on all non-Retina displays and aliases a bit, plus dealing with spritesheets and their positions (when you need to update text) or having a slew of individual PNG files just doesn't seem efficient. 

I think with hand-coding, after a while you begin to create your own "template" of things you use often. I'm talking even simple things like a text div, a button, and image scale effect and so on. Then these become items that you can copy, paste, and then modify – rather than retyping over again. Or even create a snippet in whatever app you use. The same goes for your generic code for structure, css, 
clickthroughs, GSAP, etc.

The area where hand-coding can be more efficient is when you get into more text-based banners or ads that are more templated (especially for programmatic) – and you do have the webfont or the image is the same size throughout. It's definitely much easier to just edit text and save a file. Or simply replace a rectangular background image by simply overwriting it (rather than opening a FLA, updating the library's bitmap, re-exporting, and saving again). Try doing that with 100+ variants in Animate and see if your hand doesn't freeze up from hitting command + enter a million times.

That's not to say that hand-coding is better either, so don't throw away your knowledge or stop using Animate either. The two points you mention are some of the main advantages to Animate, so is less QA. When you get into more complex things, such as character animation or complex masking, it's not efficient to try and do that stuff with hand-coding (there's a reason why apps like After Effects exist). The main disadvantage with Animate is when you get into rich media, responsive ads, or large units (large canvas's will run slow as sh*!, or may not even run at all) – definitely something to factor in when you have a mixed campaign with various ad slots, both standard or rich media.

Good to know both, and use whatever is best for that specific project –– but in both cases, use GSAP 😘

  • Like 3

Share this post


Link to post
Share on other sites
25 minutes ago, davi said:

You can also inline the SVG code. Create all your text in Illustrator (or the new Animate) :) in a separate file then you can copy and paste into the HTML. In Illustrator, when you copy/paste text to your text editor like Sublime, it'll paste SVG code, not an image or vectors. The advantage to doing this is you're not dealing with a bunch of extra individual SVG image files, plus you can access the SVG code if you want to do things (like SVG mask effects, blend effects, and even using GSAP to animate portions, just add id's or classes, sorta like an instance name).

I'm personally not a fan of using PNG's for text content. 2X is still a tad soft on some newer ultra hi-res devices and doesn't render pixel-perfectly on all non-Retina displays and aliases a bit, plus dealing with spritesheets and their positions (when you need to update text) or having a slew of individual PNG files just doesn't seem efficient. 

 

Yeah, Retina-sized PNG's are a workaround at best for today and won't be as viable once 4K and over monitors become the norm. Hopefully, one day Adobe will get its act together to address the bloated size of exported PNG and SVG files and we can stop relying on third-party tools. Not holding my breath on that one though since they haven't figured out how to standardize the UI, tools and menu structure across their apps.

  • Like 2

Share this post


Link to post
Share on other sites

hi all,

 

I learned a lot from all the replies, thanks for that.

 

I do have a question for people that are familiar from the creative / design side, are people still provide creative files via PSD format? What about Adobe XD?  It seems XD able to use multiple different canvas size is an ideal way to include all the diff design banner template sizes in one format.

 

 

Share this post


Link to post
Share on other sites

Still PSD with everyone I work with, but definitely not ideal. If Photoshop improved its SVG export capabilities (or exporting altogether), then it'd be a step up. So, you can turn text and everything into SVG directly in Photoshop, and can export an SVG – you just can't copy a vector and paste the SVG code into a text editor like Illustrator can. I'm still using other apps to optimize assets, an extra step that PS should be able to do on its own.

You can do the different canvas sizes with artboards in Photoshop, but exporting assets from each artboard is absolutely ridiculous when you want to try and crop something.

Adobe XD looks interesting though. Looks like it would be a better option for designers that need to create PDFs of boards for client review.

  • Like 1

Share this post


Link to post
Share on other sites
9 hours ago, davi said:

Still PSD with everyone I work with, but definitely not ideal. If Photoshop improved its SVG export capabilities (or exporting altogether), then it'd be a step up. So, you can turn text and everything into SVG directly in Photoshop, and can export an SVG – you just can't copy a vector and paste the SVG code into a text editor like Illustrator can. I'm still using other apps to optimize assets, an extra step that PS should be able to do on its own.

You can do the different canvas sizes with artboards in Photoshop, but exporting assets from each artboard is absolutely ridiculous when you want to try and crop something.

Adobe XD looks interesting though. Looks like it would be a better option for designers that need to create PDFs of boards for client review.

 

Illustrator and Photoshop have the same problems exporting images including SVG's. Illustrator exports a whole bunch of unnecessary SVG code. Last time I checked, Adobe XD and InDesign were very weak at exporting images; they just don't have the same options (or they're hidden) as Photoshop.

 

It might be worthwhile looking at Affinity Photo / Designer, which are competitors to Photoshop / Designer. They open AI and PSD files, but I'm not sure about their exporting options.

Share this post


Link to post
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.