Jump to content
Search Community

Animate CC vs hand coding

Matt Severin test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 do that all the time? So Yes.

  • Like 1
Link to comment
Share on other sites

Same here.

 

This really is a circular discussion. It boils down to personal preference and level of experience. Nothing more. Trying to say one is better than the other is the same as arguing whether blue is better than red. 

 

The answer will always be "there is a case for each option".

  • Like 3
Link to comment
Share on other sites

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.

 

About to years ago when I just made the switch from  Flash to  html/css/js I would have been in agreement with this. But now two years later, I find hand coding speeds up the process incredibly. There is a bit of learning curve, but once everything is setup the process couldn't be more easier. Task runners alone provide so much benefits. On top of that you can automate so much, preview link generation, automatic platform change (DC, DCM, Sizmek) and the list goes on.

 

Just last week I've build a full campaign of 54 creatives in under 2 working days, using Bannertime, and saved so much time.

Link to comment
Share on other sites

Yes, there’s definitely best use cases for both. To be clear, we’re talking about creating banners via modifying the DOM with HTML CSS JS or GSAP versus pixel manipulation using Canvas, with Adobe Animate CC being the GUI to work with Canvas API. We’re also talking about banners and not websites or apps. There’s a huge difference between the two, lots of restrictions to deal with in banners, and many other things to take into consideration, especially animation. I know a lot of folks are coming from a website development background and think in those kind of terms but don’t really have much experience with animation or working with banner restrictions and its limitations.

 
I also think it’s more than just personal taste or experience level but a matter of what is the better option for your individual project. Let’s also take efficiency into consideration, because, well, hey, banners are always needed yesterday :) I know there are coding purists who frown at the thought of using a design tool like Animate CC or think "Hey’s that’s Flash and Flash sucks”, and wouldn’t even consider using it. But before you move it off the table, let’s take a look at some pros and cons of each method >
 
Have interactivity? Responsive? Dynamic? 
- DOM✔️: Modifying the DOM is probably your best bet. Your browser’s graphics API makes this a lot simpler than what Canvas or Animate CC’s current offerings have. Need it to work on a device with device orientation where the layout changes? DOM is definitely the better option. In Animate CC, having to reposition everything in JavaScript is going to be major pain in the butt, whereas CSS can do the majority of the heavy lifting for you.
 
Working on a larger banner such as a full screen banner? 
- DOM✔️: Canvas can be kind of slow redrawing large areas.
 
Have a complex animation with a lot of moving parts that’s not interactive? 
- CANVAS✔️: Canvas is really really fast in comparison to the DOM.
 
Have static text? Hate dealing with fonts and how it looks between browsers? Don’t like dealing with font rights / licenses? 
- CANVAS✔️and ANIMATE CC✔️: You’re not dealing with delivering font files to users, so you don’t need web fonts like the DOM. Your fonts looks the same across all browsers. And hey, lets be honest. Clicking on a text field to change it’s text, having a color picker, font picker, letter-spacing, and alignment tools, all in a nifty little GUI panel close by is certainly convenient. Yes, I know you can work around having to use fonts in the DOM by using PNG’s or using SVG, but again, let’s be honest — that’s not efficient at all.
 
Have dynamic text? Doing a programmatic banner?
- DOM✔️: Animate CC can’t embed fonts just yet (because of font rights I’m guessing?), only uses TypeKit fonts (I could be wrong though). I haven’t even tried it in Animate CC because the DOM makes more sense in those cases.
 
Have a more complex mask than a simple rectangular shape? 
- ANIMATE CC✔️:  The only widely-supported DOM method in current browsers for more complex masking with the DOM that you can use in banners is using SVG. You’re likely doing something in Illustrator to create the SVG, then grabbing the code, cleaning it up, possibly optimizing it, and coding it to work with masking your DOM elements. That process is slow in comparison to Animate CC. In Animate CC, you just draw a mask using the built in tools, or copy and paste from Illustrator, right click, and select Mask to mask a layer. Done. 
 
Dealing with Retina display or scaling imagery? 
- BOTH✔️, but leaning more towards ANIMATE CC✔️: There are two issues here. Considering that with banners you need to package everything up and file size gets counted for all assets as a whole, then I believe Canvas / Animate CC is the better option here mainly because of bitmap rendering between the different browsers. Yes, with HTML you have srcset, CSS media queries, etc. That’s great for websites but in banners that all goes out the window since it all needs to get packaged up and the file size gets counted as one. And because of THAT, brings us the next consideration: which one does a better job at scaling bitmap imagery for use with Retina display (or if you need to scale a bitmap in general). Ever scale a bitmap or slide a bitmap in the DOM and get that choppy look in some browsers? Your image ever look weird after scaling in the DOM? That’s because of subpixel rendering / antialiasing. Canvas and Animate CC does an excellent job at this whereas the DOM and some browsers (not all) can do a real crappy job at this. And let's not forget that it looks the same across the board in Canvas. 
 
Also, there are built-in vector drawing tools that Animate CC has that can scale similarly to SVG — great for when targeting Retina display in banners. Animate CC can take care of Retina automatically.
 
Have a really complex animation that’s more than slide this way, scale up or down? I’m talking more complex mograph or even character animation that a seasoned animator would create.
- ANIMATE CC✔️:  Animate CC wins this one with its timeline and built in tools for animation like onion-skinning, motion guides, etc. There’s a good reason why applications such as After Effects exists and why people aren’t animating TV commercials with C++. Yes, you can do motion guides with hand-coding. But creating a path with a GUI, right clicking, and selecting motion guide is multitudes faster and more efficient, especially if it takes many attempts or when you’re experimenting with animations twenty or 30 times over the course of an hour. Imagine how long 20 - 30 motion guides would take to hand-code? Ever try and do character animation in GSAP? :)
 
QA?
- CANVAS✔️and ANIMATE CC✔️: If your banner concept is a linear animation, QA is virtually non-existent in Animate CC. It’s going to look identical across the board. That’s certainly not the case when dealing with the DOM — browsers render things much differently and you can spend quite a bit of time and resources dealing with QA. Again, that's just for linear animations :) 
 
Other banner-specific features that Animate CC has:
- There’s AdHelper with its Sleep and Wake, Retina support, Performance monitoring, etc. All stuff that comes with it. You’re likely not building that into your DOM-based banners. All certainly helpful, especially considering what banner best practices should be and the new LEAN specs coming out soon.
 
So again, it depends on your banner project and what you think is best. You can certainly do most everything with the DOM but you may just want to consider taking a peek at what Animate CC can do. I, personally, use both methods, but enjoy using Animate CC simply because I come from a Flash background (who also coded) — plus looking at Sublime editor all day gets old really fast. I work for myself for ad agencies, and knowing that ad agencies always have a fast and furious timeline, efficiency is definitely of high importance and something else to keep in mind. What are you most efficient at?
  • Like 6
Link to comment
Share on other sites

 

Have dynamic text? Doing a programmatic banner?

- DOM✔️: Animate CC can’t embed fonts just yet (because of font rights I’m guessing?), only uses TypeKit fonts (I could be wrong though). I haven’t even tried it in Animate CC because the DOM makes more sense in those cases.

 

Animate CC 2017 use Google Fonts.

  • Like 1
Link to comment
Share on other sites

 

 

 Animate CC can’t embed fonts

 

Actually Animate CC by several updates ago, converts all text using any font you have access to, to shapes described by createjs, a dynamic text field would still get published as a js file, would it not? Have you done any geo location dynamic banners?

Link to comment
Share on other sites

 

Actually Animate CC by several updates ago, converts all text using any font you have access to, to shapes described by createjs, so your text becomes something like this

 

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#FFF100").s().p("Aljg9IA/gKIBECNIABAAIgYiUIAzgIIAlDmIg+AKIhJiYIgBAAIAaCgIgxAHgAihhcICHgVIAHAsIhQAMIAHAvIBLgMIAHArIhLALIAJA1IBRgNIAHAtIiIAVgAgMh0IA1gIIAuCgIABAAIgCinIAygIIA1CfIABAAIgHinIA0gJIgDDuIg8AJIgyifIgBAAIAECnIg9AJgAEqAVIAzgIIAHAyIgyAHgAEYhUIgNhMIA1gIIAMBMIAJBaIgpAFg");
this.shape_1.setTransform(415.1,172);
 
this.timeline.addTween(cjs.Tween.get(this.shape_1).wait(206));

 

Yeah but you can't use the font dynamically, which was my point.  (Unless you built some sort of font mapping system)

Link to comment
Share on other sites

Yeah I realized that after I commented. Have you done any dynamic ads that use geo location? Pre HTML5,  Doubleclick was doing the dynamic geo location versioning as a value added perk. That was discontinued when the HTML5 switch happened.

 

I have a copy of what was called the Golden Feed spreadsheet. It served different logos and clicked through to different URLs based on a user's location.

Link to comment
Share on other sites

@Davi - nice list of pros/cons for hand-coded vs. Animate CC. I'm going to share that with our team here.

 

Couldn't agree more on masking and complex animations (think "organic" movement that requires lots of subtle tweaking) - it's just so much faster when you can visually adjust it in realtime. For example, I made this in Animate; I don't think I could even mimic that animation using GSAP Custom Ease, which wasn't available at the time.

 

Some of the issues I had with Animate were things like:

  • some ad servers don't accept sprite sheets being referenced with JSON objects, which Animate generates (I think they changed this in 2017?)
  • remembering to check/uncheck the "overwrite html on publish" button at various points during the workflow
  • the very crappy built-in code editor

I tried to follow Cory Hudson's tutorial for setting up templates, but it just got messy, and I abandoned it partway through. I might have to take a crack at that again.

Link to comment
Share on other sites

I don't use sprite sheets that Animate CC exports, but do create my own with Texture Packer if the need arises (like using a short video clip in a standard banner). I just use images and keep 'Export Images' checked, and when I'm all done, uncheck it and replace all of the images with the optimized versions that I manually optimize using other apps like ImageAlpha and ImageOptim, PS, etc. If I go over the http request limit, I'll start spritesheeting things.

I don't even use their exported HTML files, made my own template with other misc things and utils added.

Heh, yeah the code editor can use some work, especially selecting like Sublime.

  • Like 1
Link to comment
Share on other sites

 

 

I tried to follow Cory Hudson's tutorial for setting up templates, but it just got messy, and I abandoned it partway through. I might have to take a crack at that again.

 

I have a set of publish templates for every size. I gave up on Cory Hudson's ad helper stuff. My templates just add the click tag stuff for DCM, and resize to 1X since bitmaps created at 2X are how I deal with high DPI displays*

  • Like 1
Link to comment
Share on other sites

 

 

  • some ad servers don't accept sprite sheets being referenced with JSON objects, which Animate generates (I think they changed this in 2017?)

 

Unfortunately sprite sheets are the default publish option. when I accidentally generate them, I have never been impressed with the resulting file size, even though it does reduce server requests. But because I design in Animate, including creating storyboards from my Animate file, it is rare for me to have more than two bitmaps (sometimes none), and i just Tiny PNG them. So my server requests are like 5 including createjs.

 

As to number of ads created in two days, I suspect I may have a record.  Using Animate I knocked out 308 banners. That was four versions, x 8 sizes,  x 11 different logos. 

  • Like 1
Link to comment
Share on other sites

Unfortunately sprite sheets are the default publish option. when I accidentally generate them, I have never been impressed with the resulting file size, even though it does reduce server requests. But because I design in Animate, including creating storyboards from my Animate file, it is rare for me to have more than two bitmaps (sometimes none), and i just Tiny PNG them. So my server requests are like 5 including createjs.

 

As to number of ads created in two days, I suspect I may have a record.  Using Animate I knocked out 308 banners. That was four versions, x 8 sizes,  x 11 different logos. 

Beast Mode!

Link to comment
Share on other sites

For me, for now, there are only two things which I dont like in work with Animate CC.

 

1. CANVAS (Animate CC) vs DOM (Edge Animate).

 

For now, Canvas tecnology is not full ready for overall audience. Canvas animations are slow on 2/3 overall computers.

Computers of designer and developers are more stronger than computers of ordinary users of web.

We must wait few years for stronger overall computers.

 

2. Easing functions which exist in CreateJS are still not addopted in GUI of Animate CC for classic tweens.

 

We need something like this

w1hh1ajjpj4x.jpg

Link to comment
Share on other sites

@Web Dizajner

Easing functions:
- I use a tool called Ease Caddy made by Justin Putney over at Ajar Productions. Worth every cent. It allows you to save Custom Eases and apply them with the click of a button, even on multiple tweens simultaneously. What I've done is recreate all of GSAPs eases and my own and have a library of them. I've also recreated some of the eases from a tool I use for After Effects called Flow, which also has user libraries for custom eases. Super handy tool and saves a ton of time. You can even export the eases to share with others.

http://ajarproductions.com/pages/products/easecaddy/

You can find it in Adobe Create Cloud and install from there too

easecaddy_ui.png

  • Like 1
Link to comment
Share on other sites

@Web Dizajner

 

- I use a tool called Ease Caddy made by Justin Putney over at Ajar Productions.

 

Yes I know, I am using that plugin, I have my custom XML file with almost all eases for that plugin, I am using free version then I am importing my XML. http://www.marjantrajkovski.com/html5-banners-templates/myEases.xml

 

2 Problems

 

1. Eases are not optimised, they are not functions, in final code you dont have e.g.

 

this.timeline.addTween(cjs.Tween.get(this.instance_1).to({x:160,y:85},19,cjs.Ease.cubicInOut.wait(1));

 

but

 

this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:-30.8},0).wait(1).to({x:-28.6},0).wait(1).to({x:-25.2},0).wait(1).to({x:-20.3},0).wait(1).to({x:-13.2},0).wait(1).to({x:-3.4,y:170.1},0).wait(1).to({x:10.2},0).wait(1).to({x:28.9,y:170.2},0).wait(1).to({x:53.5},0).wait(1).to({x:81,y:170.3},0).wait(1).to({x:105.1,y:170.4},0).wait(1).to({x:123.2},0).wait(1).to({x:136},0).wait(1).to({x:145,y:170.5},0).wait(1).to({x:151.3},0).wait(1).to({x:155.5},0).wait(1).to({x:158.1},0).wait(1).to({x:159.6},0).wait(1).to({x:160},0).wait(1));

 

2.

Most important for me, values can not be in minus and plus and then you can not create type of eases like Back and Elastic.
Link to comment
Share on other sites

  • 2 months later...
  • 2 weeks later...

Animate CC + GSAP + DepthJS = 3D in AnimateCC!!! (Well, 2.5D)

Hey Folks,
Found this handy lil' library from MBMedia.cc called DepthJS which is a 2.5D Engine for CreateJS.
http://mbmedia.cc/depthjs/getting-started.php
http://mbmedia.cc/depthjs/docs/index.html

Works and plays wonderfully with GSAP and Animate CC. You can now do 2.5D animations in Animate CC :)

Here's a proof of concept animation I made (GSAP, totally stole your logo to use as an example) >
http://www.davi-t.com/misc/greensock/animatecc_3d_test/depthjs_test_01.html

Super easy to use too, just follow this >

- Include GSAP and the DepthJS libraries (I did it via the Global > + Include script method in Animate 2017).
- Create Stage3D instance
- Add Stage3D to CreateJS stage (Animate CC's default stage is called "stage").
- Make some graphics in Animate CC (vectors, bitmaps, and what not, etc etc).
- You need to add a LinkageID for those graphics. However, it's not like the old Flash days in the Properties Inspector, but just as easy. Just go to the Library panel, and under the column for Linkage, double-click the blank area to the right and then type in a linkage ID.
- For graphics in the library, use the Container3D class. Create a new instance of that.
- Add the graphics that you assigned a linkage ID to, to the Container3D class.
- Add the Container3D instance to the Stage3D instance.
- Do GSAP like you normally do but follow the DepthJS docs for properties to animate.

Here's some code for the example above >

var stage3D = new depthjs.Stage3D();
stage.addChild(stage3D);

var cont3D = new depthjs.Container3D();
var logo_mc = new lib.logo_mc();
cont3D.x = 100;
cont3D.y = 100;
cont3D.addChild(logo_mc);

stage3D.addChild(cont3D);

TweenMax.from(this.txt, 1, {y: 300, ease:Elastic.easeInOut, delay:1.7});
TweenMax.to(cont3D, 1, {rotY: 200, ease:Power4.easeInOut, delay:1});


 

  • Like 2
  • Thanks 1
Link to comment
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.
×
×
  • Create New...