Animate CC vs hand coding

[Matt Severin]

Regarding banner dev I'm in a bubble.

 

I work from home, my remote coworkers and I are all either Flash expats who now hand code banners or are front end devs that have learned banners.

 

But... I'm also noticing an uptick among some former Flash colleagues touting Animate CC. I feel like they're anomalies, but I could be wrong.

 

I've barely explored Animate. I don't desire to.

 

But I also don't want to ignore a tool if it has a sizable presence in the industry. I'd hate to not get a job because a studio uses Animate and I don't. I pride myself on knowing many disciplines and solutions.

 

My question is... How many of you out there are seeing Animate used as the primary platform for banner development? In studios/departments, among colleagues etc.

 

Is it common, is it rare? Is it 50/50
 

Note: I realize this forum skews towards hand coding, but we all see what our friends are doing, i want to know what your friends are doing.

[somnamblst]

I use Animate CC. For me it is the luxury of time. Do you have it?

[Matt Severin]

I use Animate CC. For me it is the luxury of time. Do you have it?

Yeah, totally, I have the Adobe suite. Oddly my same reason for not using Animate is time.

 

I have a very specific workflow that is very fast, and I don't have a strong urge to explore others (major exploration over the past 2 years have brought me to my current workflow).

 

At the same time I don't want to ignore the mentions I'm seeing.

 

The real, real reason I'm skeptical, at least for personal use is... When I first got into banners/Flash I found resizes to be tedious when using timeline animation. I took to GSAP because I was able to recycle coded animation into resizes way faster than readjusting timeline animation. Resizes went from hours to an hour or less in many cases.

 

I ported that workflow into my hand coded HTML banners. I can do resizes super fast because I barely have to change anything other than my dimensions (of course there are other tweaks but 4 out of 5 times I don't have to do much).

 

Also, I use grunt and npm so I don't have to go outside my dev environment to compress images, make spritesheets, etc.

 

So, I'm not interested in Animate from a timeline animation pov because I've completely forgone timeline.

 

Conversely integrating GSAP into Animate, to me, is pointless because I'm already coding and don't see the advantage of adding another application into the workflow.

 

I also assume I can make a smaller banner in k size, by hand coding vs coding in Animate. Is this perception wrong?

 

I do understand that Animate provides a stage to work on, but I often don't need a stage. I don't have to position my assets in CSS because I make all my assets the same dimension as the banner (except special cases, like if I need to spin a wheel, etc). And I can do automatic spritesheet generation with spritesmith.

 

Please note, I'm not complaining about CC or others' workflow, I just wonder what the advantage is, and how common it is to use in the industry. I'd learn it so that it didn't preclude me from a large chunk of work.

[Oliver16Years]

My opinion is:

Animate CC is the best official tool if You don't have a better custom tool.
It's bottlenecks are the the tedious asset import from Photoshop and the <canvas> as the main stage, which is excluding almost all the other HTML5 possibilities. <canvas> is a good surface to draw on but it is only one little part of the HTML. Timline is luckily not needed if You code in GSAP. The only function which is useable is the EASELJS+HTML export.

Adobe dropped it's alpha DOM authoring tool, to breathe life into Flash again, but I feel it was a mistake.

[Matt Severin]

Adobe dropped it's alpha DOM authoring tool, to breathe life into Flash again, but I feel it was a mistake.

 

You're referring to Edge I imagine?

[Oliver16Years]

You're referring to Edge I imagine?

Edge's huge fault was the JQuery integration and the extremely processor intensive GUI. Otherwise the ads exported with it are running at 60fps and their assets aren't blurry/cracky. One of my favorite game to look at an ad guess the authouring technique and finally examine source code. Hand coded and Edged banners are the best looking. Animate ads, on the other hand, can be quite complex.

[davi]

I was hand-coding, but started using Animate CC as soon as it came out (renamed). Completely silly to hand-code to me, especially dealing with fonts, masks, and QA. You don't really have to QA much with Animate CC. I can do some pretty complex animations in Animate CC too, which would be nearly impossible to do hand-coding.

[ohem]

I usually use Animate CC because it's a faster workflow for me; especially, like Davi said, when it comes to fonts, masks, and QA; and also when it comes to positioning things.  The ability to import custom HTML templates has also expedited my workflow.

 

In some situations, if I need to use SVG or 3D transforms, or if I can use Google Fonts, or if it's such a simple banner that it doesn't make sense to load the whole CreateJS library, I do hand code with HTML/CSS/GSAP.  I probably use Animate 85% of the time though.

[davi]

One thing to note is, you can mix the two together as well. I just created a YouTube masthead where the main animation was Animate CC and the rest of it was hand-coded CSS/GSAP which incorporated a scroller which used GSAP and iScroll, a whole side of it not even being part of Canvas, also having non-Animate CC on top of the Animate CC stuff. You just treat the canvas (for Animate CC) like any other element.

This method would especially be useful where you want to use actual HTML elements but also have a complex animation and want to use Animate CC for that.

GSAP in Animate CC is most excellent too, it should just be built in (wishful thinking!)

[somnamblst]

"When I first got into banners/Flash I found resizes to be tedious when using timeline animation."

 

I find resizing easy, because I enter the movieclip to change a text object from 300px to 160px. Movieclips are containers you just move. When I got creative from an agency, I had to convert to Rich Media, I was always annoyed if it wasn't using nested movieclips.

 

Between vector lockups simply being pasted and text no matter what the font being converted to shapes, I have almost no server requests and have had zip files under 20K.

 

I don't have tedious imports from PhotoShop because bitmaps are the exception not the norm. And it is rarely more than one. So I might have a small, medium and large over 8 sizes.

 

I was fast on Flash, so going back to Animate from Edge, I got the speed back.  It's the copying and pasting of frames and layers, and complex animations I like.

 

​Then there is the publish templates. That is huge. I never touch the HTML file. And when I do it is easy to use CSS to add things like the youtube API player.

 

Plus Animate Commons came out with extensions. Someone with no timeline experience can do parallax, flexible and adaptive layout. 

 

http://animatecommons.com/

[Matt Severin]

Regarding Animate CC converting text to shape. Can Animate embed a desktop font and use its characters (as shapes, or whatever) to display dynamic text? The way Flash could?

[Vitalii Bahmet]

Hi Matthew,

 

As I remember you can use fonts in fla source files but there's no way to export editable text in Canvas (though I can be wrong).

 

I was working years in Flash and then in Animate CC.

The most huge bugs which drove me crazy all the time were:

• shifted pivot point after object scaling and easing
  
• wrong colors in Animate CC after copy-pasting from Illustrator on MacOs (every each color)
  
• not smooth pan and zoom
  

But now I'm extremely happy for complete moving my workflow into GreenSock + IDE.

IMHO it's absolutely Ok having some specific comfortable setup without Animate CC.

 

Cheers

Vitaliy

[davi]

@Matthew Severin:

See comments at bottom. Not sure if the Animate CC 2017 makes this easier or not. Looks like you can specify the webfont in the Publish panel too. Looks like you need to specify a path to the font (won't convert desktop fonts to outlines like how Flash did)

https://blogs.adobe.com/creativecloud/leverage-typekit-web-and-desktop-fonts-within-animate-cc/

I personally have not used it yet though

[rodlab2x]

@Davi:

 

Hi, I wonder how did you mix the Animate cc file with the YouTube masthead template? I'm guessing you used the rich media gallery template online for youtube masthead and mixed it with the canvas output from animate?

 

I'm trying but get console errors.

 

Thanks for any help.

 

Rodrigo

[davi]

@Rodrigo:

I didn't use a template for it, just built it from scratch. Yeah, it was just the canvas tag being used like any other div. What kind of errors, have a sample or CodePen?

[cwiens]

I am leary of any tools that add their own code. My banners are clean and free of any proprietary code which makes trouble shooting easy and keeps file sizes at a minimum. I have spelled this out a few times on the forum, not sure if other are using the same approach.

 

I have created a template in photoshop that has all my banners sizes in one doc. Everything is using the CC feature Generate/Image assets. I have one layer group for each size that holds all the banner contents and is exported automatically for the static backup banner. All the assets for the HTML banners have layer names such as: 2017_Q1_ CS_NewYear _DR_HTML5_12-25-2016_to_1-15-2017_P34416_160x600/txt01.svg, we use folders to track everything and then I use generic naming for the layer assets with txt01.svg, product01.png or .jpg. I put my html template in the same folder, all the common code and assets are on a CDN. Any changes I make in photo shop to the assets are automatically updated and all that I have to do is refresh the browser to see the changes. I do not know how it could be any easier. Dragging things around on timelines is laborious in my opinion. This is a pretty rapid work flow for me. 

[somnamblst]

I have all vector banners that have been as low as 12-15K zip files and no need to labor in PhotoShop, creating so many assets for so many sizes... All my text is editable text that is converted to vector shapes on publish.

[retropunk]

Animate CC and GSAP certainly make it easy to build banners regardless of timeline or coded animation. I use it a lot.

I also use GSAP for DOM.

I look at the creative and make a determination based on the storyboard frames which tool would serve the animation best.

I do prefer hand coding but there are short cuts and conveniences that Animate CC provides that are usually worth the compromise.

 

As long as the end result is within spec, performant and makes the client happy...

[Gatekeeper74]

As a former craftsman and someone who learned HTML from scratch with windows plaintext editor almost 20 years ago i absolutely prefer hand coding.

I've been testing many tools since these days and really none could satisfy my personal needs/preferences in "what clean efficient code should look like".

 

Furthermore i had so much pain debugging tool generated code cause it already took me hours to even understand the code before i was able to fix a bug (I bet we all agree: many tools have a questionable approach ) - so i really got tired fixing a whole lot of auto generated crap before dealing with the actual task.

 

I'm not saying no tool CAN generate efficient and clean code - it's just that i feel hand coding is the only real way to

- exactly get the result you want

- get it the way you want

- deeply understand the "what" and "why" of every code line 

 

This way i am sure i always have 100% control of whats happening.

The only tool i use is Dreamweaver, cause its in my CC package anyways and i like the code highlighting and the site/file management - ummmm, so it's more like shy assistant to me.

 

But well, thats just me, i guess it's a thing of personal coding history and preferences.

 

Hope you get enough inspiration from all the posts to find your personal best way

 

Cheers!

[joe_midi]

Everything is using the CC feature Generate/Image assets.

 

 

Generate Image Assets is such an amazing feature!

 

All my PSDs are set up using this for each layer I need.

 

I also create Folders for each frame which I can then use: PixelPerfect to overlay and make sure everything is in the right place.

[Web Dizajner]

Hand coding is not smart option for fast mass production of banner ads. Is it possible for one developer to prepare assets, hand code and prepare for specific ad server full set with 10 sizes for one 8-hour work day? With Edge Animate and Animate is possible.

[Oliver16Years]

Hand coding is not smart option for fast mass production of banner ads. Is it possible for one developer to prepare assets, hand code and prepare for specific ad server full set with 10 sizes for one 8-hour work day? With Edge Animate and Animate is possible.

I agree, not time for handcoding in this SOS craziness . Except if You Metahandcoding. I mean if You handcoding an app which is making DOM HTML for You.

[Vitalii Bahmet]

Hi Marjan and Oliver,

 

Sorry I wouldn't say hand coding in NOT smart. IMHO hand coding is a the only way to get clean and fast result.

 

It's absolutely possible to create more than 10 sizes for less than 8 hours with hand coding.

 

It's a matter of workflow setup (large screens + graphic editor + IDE + browser) + designing and coding experience + having enough sleep + etc.

 

Cheers

Vitaliy

[Oliver16Years]

Hi Marjan and Oliver,

 

Sorry I wouldn't say hand coding in NOT smart. IMHO hand coding is a the only way to get clean and fast result.

 

It's absolutely possible to create more than 10 sizes for less than 8 hours with hand coding.

 

It's a matter of workflow setup (large screens + graphic editor + IDE + browser) + designing and coding experience + having enough sleep + etc.

 

Cheers

Vitaliy

Yes, the "not smart" is not the right expression. I would say: It is not as fast as other workflows when You are not an expert. 

[Jason Baciulis]

You have to keep in mind that learning HTML, CSS, JS is an investment. By hand coding you deepen your knowledge and your thought process as a programmer. Eventually you can easily transition into front-end development/web animations. Who knows when you'll get bored with banners?

 

If you're designer and you're also animating and have no desire whatsoever to code then Animate CC might be fine. If that's not the case I would seriously consider jumping into hand coding. Even if that's not the fastest workflow (although that's arguable).