Animate CC vs. GWD

Gone are the days of Flash ads, it's all about HTML5 now. In 2015, when Google announced Flash would no longer be supported in Chrome, a line was drawn. Ad designers were going to have to change to meet this new standard and keep their clients happy. To provide some comfort, Google released a beta program called Google Web Designer. The initial releases were rough and left many wondering if hand-coding HTML5 ads was going to be the best solution. Fortunately, that didn't last. 

In February 2016, Adobe released Animate CC, the new face of Flash Professional. Again, a rough program in its early days, but Animate has rounded out quite well. For the past two years, my company has used Google Web Designer pretty exclusively for the creation of HTML5 ads. Only recently did we decide to see how Animate could compare and if it was the better solution.

At the end of the day, both programs can build HTML5 ads. They achieve so a bit differently, but through my experience, I have to say that I've thoroughly enjoyed building them in Animate much more than in Google Web Designer. 

so how do these compare?

First impressions

Upon launch, both programs present a window for opening recent files, beginning new ones, using templates or getting help. Google Web Designer (here forward referred to as GWD) offers templates made to work with DoubleClick, ideal if your client uses DoubleClick for their ads. Animate has significantly more templates to offer, including sample files for animation. Nothing specific to publishers, but there are a variety of commonly used sizes.

Ad building experience

For those who are familiar with the Adobe CC system, Animate seems like the logical choice. The familiarity to other programs in the family are clear, and if you ever used Flash Professional, you'll really feel at home.

The timeline in GWD is broken into frames and has the seconds tracked along the top. This is helpful for keeping ads under the standard 15 second limit, as well as managing the content you need to include.

The timeline in GWD is broken into frames and has the seconds tracked along the top. This is helpful for keeping ads under the standard 15 second limit, as well as managing the content you need to include.

The Animate timeline looks incredibly similar to the timeline from Flash and is defined by the frame count. The seconds timer is located in the lower right panel next to the FPS counter. 

The Animate timeline looks incredibly similar to the timeline from Flash and is defined by the frame count. The seconds timer is located in the lower right panel next to the FPS counter. 

The actual ad building experience is pretty similar, but the workflow in Animate is smoother in my opinion. Because GWD is still beta (and will probably always be) there are some glitches that can just get frustrating when you're working on a large ad order. Animate creates libraries of assets, so creating various sizes for the same campaign is quicker. Through Animate, you can open a file to edit directly with Photoshop and save the changes, the file will automatically update in Animate. This is a similar experience to working with files all across Adobe's software.

Animate also has a preloader/polite load option in the publish settings, so that's a step you don't have to do manually like in GWD. GWD does have the option to add a clickTag, and to add a clickTag in Animate I've found this answer to be helpful from the support forums. Ads will automatically direct to adobe.com if you don't change this. 

There are minor differences, specifically in the layers for each program. In GWD, you cannot use the same layer name for more than one layer. Layers also cannot include spaces. That is because they are used as IDs in the base code. In Animate, you can name layers whatever you please, which can help keep your files clean if you're a tad bit obsessive about that (like I am). 

Fonts are easier to manage in Animate as well. You can use webfonts in both programs, however you can also use local fonts and create them as static text (as opposed to dynamic text) in Animate and it essentially embeds the fonts into the ad (much like Flash) to load without needing to call the font file. This is great if your client doesn't have the font they use for their brand hosted as a webfont or in Typekit/Google Fonts. 

preview and publishing

The preview structure for Animate is smoother than GWD, but GWD does let you open the ad in your choice of browser to see a live example of it. As for publishing, GWD gives you the option to publish locally, to a Google Drive or DoubleClick Studio directly. For those who are using the Google system for almost everything, this is an efficient option. It also was recently updated to include a validator in the program. This is awesome, because it saves time from running ads individually through the DBM/DCM validators.  

There are many options in GWD's publishing environment that help oversee the entire product. The total size is helpful as file size is a huge variable in ad publishing. Likewise, you can opt to minify your documents to save size and add a border in the output screen. 

There are many options in GWD's publishing environment that help oversee the entire product. The total size is helpful as file size is a huge variable in ad publishing. Likewise, you can opt to minify your documents to save size and add a border in the output screen. 

Animate's publishing settings are a bit more complex, but that can offer a greater amount of control. The ability to ad a pre-loader directly to an ad is a huge perk in my opinion, as it saves a step for my packaging process. It also has the option to include all of your image files into a spritesheet, which is preferable to some. 

You can create and save your own profiles for ad publishing. This is helpful if there are certain standards the publisher you're working with has and can save you time from having to selected lots of options over and over.

You can create and save your own profiles for ad publishing. This is helpful if there are certain standards the publisher you're working with has and can save you time from having to selected lots of options over and over.

File output

This is one area where GWD has a larger source than Animate. GWD generates a lot of files for each ad, shown in this screen grab. Mind you, this is for the approximately 2-second ad used for this demo. The zip file highlighted is what comes from publishing the ad. The folder (example_ad_build_gwd) is the result of that zip and contains the index.html file and necessary image files. The file "example_ad_build_gwd.html" is what you open in GWD to edit the ad. This file can be opened directly in a text editor for quick changes to copy, image links, etc. The index.html from the zip file is where you would add the polite load files. The published file size for this short ad is 18kb.

Animate produces significantly less files per ad. The .fla file is the ad file. That's it. When you open it in Animate, your library of assets is already there. The downside to the use of .fla as opposed to GWD's .html file is that you can't directly open the Animate root file into a text editor for quick changes. This may or may not be important to some people. An example of when it is convenient is if you've created 60 ads for a campaign and find a typo... You could open the files and batch replace the misspelled word. The output from publishing are the remaining files, excluding the .fla file. The index.html and index.js create the ad, but are not as easily editable as the index.html from GWD. The compressed zip file for the Animate ad is 13kb. Both the GWD and Animate ads are the same, but the file for Animate is still smaller. The Animate file actually already includes a pre-loader, whereas the GWD file in this instance did not.

animate-file-output.png

Price breakdown

GWD is a free program, available for all to download and use. As I've mentioned previously, it's a beta program and no one really knows if that will ever change. Speculation is that Google released GWD to fill the need that was created by dropping Flash support. Now that this has essentially been flushed out, other software has grown to better suit HTML5 ad production needs. 

Animate CC is a part of Adobe's Creative Cloud structure. It's available in the CC bundle for $49.99 a month, which includes all of their programs. For $19.99 a month, you can get access to animate solely. They also offer student/education discounts.

For now, both can meet the needs of professionals, but for many who are already so invested in the Adobe environment and likely already have CC subscriptions, Animate offers an ease of access that GWD can't yet match. 

Conclusion

Personally, I prefer working in Animate. I used Flash more when I was younger, but built HTML5 ads for the past couple years in GWD. Since switching to Animate, I've increased my speed in building ads and decreased my frustrations. There's an easy step-by-step tutorial for building HTML5 ads in Animate on Adobe's blog. At work, we already have a CC subscription, so there was no added cost in making the change. I've enjoyed how seamlessly Animate works with the other Adobe programs. I don't miss the lack of control GWD offered or the glitches that would make my afternoons at work hell. Don't get me wrong, GWD is still a good tool, and as a free option it does a damn good job of achieving what it says it does. In the long run, I believe Animate will win out.