In April 2010, Steve Jobs made a bold prediction: “Flash was created during the PC era – for PCs and mice… But the mobile era is about low power devices, touch interfaces, and open web standards – all areas where Flash falls short… New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too).”
Fast forward to the end of 2016, when Google officially phased out support for Flash in their Chrome browser, favoring HTML5. The past few years have seen quite a shakeup in the world of animated ad production. Now that most have had time to settle in, let’s take a look at two of the most prominent programs to help the production of these ads.
Google Web Designer – Official Site
“Google Web Designer is an advanced web application that lets you design and build HTML5 advertisements and other web content using an integrated visual and code interface. Using Google Web Designer’s Design view you can create content using drawing tools, text, and 3D objects, and you can animate objects and events on a timeline.”
Pros
- Free program
- Ad validator built in
- Code view in program
- Writes HTML
- Outputs HTML file, so batch edits can be made on multiple files
– This is especially helpful if you have ad campaigns that need to have updated imagery or text over time (such as a price change or different programming in a screen) - Built in support for Google Fonts
- Supports clickTag
- Inherently built to work with DoubleClick Studio
- Timeline has seconds marked along top as well as frames
Cons
- Generally buggy
- Bloated file load (outputs way more files for a single ad)
- Still in beta years after release
- Infrequent updates
- Font handling is inconsistent
– When editing font sizes, sometimes additional inline styles are added automatically and conflict with defined style
– Using different font weights tends to result in issues/bugs
– No easy integration for non-Google hosted fonts
– Adjusting line height tends to break design and has to be done through styles (no set controls) - Structure of Divs/Grouping is somewhat confusing
- CSS bloat
- Unintuitive UI
Adobe Animate – Official Site
“Design interactive animations with cutting-edge drawing tools and publish them to multiple platforms — including Flash/Adobe AIR, HTML5 Canvas, WebGL, or even custom platforms — and reach viewers on broadcast TV or virtually any desktop or mobile device.”
Pros
- Similar interface to other Adobe programs
- Works seamlessly with other Adobe programs
- Built in support for Google Fonts, Typekit and option to use system fonts embedded
- Supports clickTag
- Easy to adjust timeline/move frames
- Allows masking
- Polite loading/preloader built into publishing
- Common library/symbols easily used across multiple ads
- Can easily embed animations within animations
- More easing options, easy to apply
Cons
- Bit pricier (but is included in CC subscriptions)
- Takes a bit more work to make compatible for DoubleClick Studio
- Timeline doesn’t show seconds along the timeline (it is available on the bottom edge of the timeline)
- Potentially need to use ActionScript from time to time
- Manually add clickTag for DoubleClick ads
And the winner is…
Adobe Animate! While both have their pros and cons, as professionals who work in other Adobe programs frequently, the ease of creating ads in Animate can’t be ignored. The program itself is smoother and makes the entire workflow faster. While there is a learning curve for those who may not be familiar with the previous Flash software, it’s manageable. And really, it hardly compares with the learning curve for beginners using Google Web Designer. For creating animated HTML5 ads, Animate CC is the best bet for production.