Creative

How to Convert Digital Ads From Flash to HTML5

By Shawn Krohn, Senior Interactive Designer

February 05, 2016

We knew this day would come in 2010 when Steve Jobs published an open letter that explained why Apple would not allow Flash on the iPhone, iPod or iPad.

As advertisers, we collectively kicked the can down the road. The bulk of the digital market still used desktop browsers to consume advertising media, so the life of Flash was still viable. It was a short road.

In 2015, the proverbial road turned into a cliff. The digital market focused increased scrutiny over the future of Adobe Flash, particularly in the advertising community. Most notably, Chrome and Firefox blocked Flash components in an effort to improve consumer experience.

Soon after, Facebook’s new chief security officer wrote a post calling on Adobe to face the music and announce an “end-of-life date for Flash.”

The final nail in the coffin: the Chrome team publicly announced that the upcoming release of its browser would pause nonessential Flash components by default and Mozilla started to block all legacy versions of Flash within the Firefox browser due to security vulnerabilities.

 

Why all the fuss?

With more than 40% users using Chrome and Firefox, the bulk of our digital consumer market is now gone, Added to that, personal smart device use has exploded as our primary media consumption tool.

 

What is the alternative?

HTML5 is the latest official browser-compliant version of the programming language HTML. To make the switch, Stephan & Brady focused on an HTML5 component called Canvas.

Essentially, Canvas is a container that uses Javascript for controlling the content needed to create animations. Digital banners are now compiled into separate web files, including HTML, CSS, JS and various image file formats (JPEG, PNG, GIF). The result is banner advertising that works across all digital media in a consistent and testable way.

 

How do I make the switch?

The tools they are a-changin’. Here’s the good: There are a lot of options. Here’s the bad: There are a lot of options. Figuring out which ones work for you isn’t easy. Below is a list of tools we’ve tried:

 

Swiffy 

PROS:

Google’s Swiffy is an application for directly converting a .SWF file into HTML5. You simply upload a file and it’s instantly converted for you. Bam!

CONS:

Swiffy outputs bloated Javascript files that are sometimes too large to use. Swiffy also eliminates the ability to customize the JS code that is sometimes required to make the ad properly trackable within the vendor’s ad server.

 

Google Web Designer 

PROS:

Google Web Designer is easy to learn and makes completely compliant ads for Google Adwords right out of the box. It does output files that can be adapted for vendors with proprietary code tracking needs as well.

CONS:

Google Web Designer can’t open existing Flash files and start with them. You will be building old Flash banners from scratch. Additionally, you don’t get the level of animation sophistication that Flash allowed, and these limitations are noticeable.

 

Adobe Flash Professional CC

PROS:

The 2015 release of Adobe Flash CC allows the conversion of old legacy Flash files into HTML5 Canvas files directly inside the application and uses the same basic interface as old Flash. It allows for a familiar workflow.

CONS:

A few things are missing. Most significantly, image or animation effects that can’t be directly coded using Javascript. Examples include drop shadows and certain types of transparency. Also typography will need to be converted to web-based fonts if you want to maintain live type. If art files need to match an offline typeface, the text will need to be converted to outlines before the HTML5 code is output. That means if you have to add a comma later, you can’t do it in code. You’ll need to go back to the original Flash file and start over.

 

Manually programmed HTML5 banners

PROS:

This is the most code-friendly and guaranteed compliant way to build animated banners.

CONS:

It doubles production time. You won’t be able to start with old Flash files. Instead, you’ll need to rebuild them from scratch. You’ll also need a programmer to do the bulk of the work, which can incur additional costs and lost time. Lastly, you’re limited by the ability of the programmer to animate in code, and you’ll pay more for senior level experience.

 

Adapt quickly or else…

Specifications from ad vendors are ever-changing and new tools are constantly coming out. As of writing this post, Adobe announced that it is replacing its flagship application Adobe Flash CC with a new product, Adobe Animate CC, in its 2016 Creative Cloud release. Flash is officially dead, folks.

Just last month, most publishers and programmatic ad exchanges started moving to SSL-only environments. This change means that the ad server, the ad and all of the resources that it loads need to be SSL-friendly. If you’re using non-SSL URLs, the publisher or programmatic exchange will reject your ad.

 

Observations from the other side

In a lot of ways, this is how we’ve been doing things all along. Applications we use change. Browser support for different languages and capabilities of mobile devices change. And they change fast.

Our most important takeaways from transitioning to HTML5 are:

  1. Communicate. Maintain clear and consistent communication with your digital media vendors. Knowing their systems, ad requirements and technical code needs are crucial to pulling this off successfully. Without it, you will experience some growing pains.
  2. Use a testing environment. Without being able to test the ads in the wild you won’t be able to guarantee that they work.
  3. Talk to experts. Sometimes the best solution is to work with a specialist who already does this and add them to your Army of Awesome.
  4. Embrace change. We’ve always looked at this process as an opportunity to make our agency better and to add services that would benefit our clients. Keeping an eye on the prize helped mitigate the stress and frustration sometimes involved with solving complex problems.

Comment

MORE IDEAS:

farmer opening barn door

We Know Ag

We Know Ag

This confident campaign reached a new segment of their audience with relatable images and bold copy.

This confident campaign reached a new segment of their audience with relatable images and bold copy.

View Project