Phasing Out Flash: What It Takes to Convert to HTML5/CSS3

August 17th, 2015

The Creation of Flash

The early 2000s gave birth to Flash, a quick and efficient application that produced smooth graphics, and by 2005, it was the most commonly used application to create everything from intro screens for interactive websites to online games. Flash soon went on to become the leading multimedia platform to play and stream videos online. So when YouTube got its big break, Flash went mainstream.

flash to html5/css3

Everyone wanted Flash animations implemented on their sites leaving developers no choice but to build websites using the software. However, Flash lead to a very large performance drain as a result of its many features and plugins. If your computer was built prior to 2005, you more than likely had an outdated GPU, or graphics card, that could not support Flash and came across some issues when attempting to run the application. As designs became increasingly complex, the problems only worsened, and Flash performance quickly deteriorated.

The Solution

The web was in dire need of a new way to generate animations. In response to this need came the two new languages – HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). HTML was created for structure while CSS was created to style content. The pair would result in better site animations and replace the crumbling Flash software using an HTML element called “Canvas” in which 2D elements and animations could be rendered based on CSS3 parameters.

Unlike Flash, HTML5 does not require the installation of plugins or media players, lessening the data strain on your computer. This also means that HTML5 can run on all computers and mobile devices, including Apple products which have never supported Flash.

However, work on both HTML5 and CSS3 had only begun in the mid 2000s. By then, the need had already outpaced the solution. In the meantime, many people turned to JavaScript to design animations similar to those done in Flash. But, performance was severely lacking which lead to low-frame animations that didn’t do the trick.

Debut & Browser Complications

The World Wide Web Consortium (W3C) proceeded to work on HTML5 and CSS3. CSS3 was released in modules between 2011 and 2012 while HTML5 was officially publicized in October of 2014. Problem solved, right? Not exactly. The world’s most popular web browsers at the time – Internet Explorer, Chrome, and Firefox – did not wholly support HTML5 and CSS3 features. Developers had to hack their way through browser shortcomings by using HTML with a combination of CSS3 and JavaScript plugins to achieve the full effect.

Full Conversion

Fast forward to 2015, and 95% of HTML5 and CSS3 functionality is supported by all of the main browsers. Flash is being phased out. Browsers like Chrome and Firefox disable Flash on web pages. Most mobile devices and even Android no longer support the software. Everyone wants their site to run HTML5 and CSS3, but how can developers make this happen?

First, a person should consider if their site really needs certain animations. If they do not improve your website in some way, drive traffic, or increase interactivity, then it might be time to replace them with graphics and calls to action that fulfill these requirements. Your goal should always be to drive users to perform actions that benefit your business. Sometimes, animations are just the cherry on top. The main course needs to be the most appealing.

What You Need to Supply

To update your website from Flash, you will need to provide the original source files (.FLA extension) of the Flash animation and any additional resources like images, videos, and sound files. A good developer may be able to recreate the animation completely from scratch, but depending on the project, this can take anywhere from minutes to days. Failure to provide the additional files could also cause difficulty and delays in recreating the original.

This is where cost comes into play. Is the animation worth the cost? Would you be better served by creating a new website or using fewer animations and opt for graphics with a more modern feel? All of these factors should come into play when deciding what your next step should be.

Take the First Step

If you need assistance with updating your Flash website to HTML5 compatibility, one of our consultants would be happy to guide you through the process.

Leave a Reply