Moving from Flash to HTML5

In November 2011, Adobe announced that it would discontinue development of its Flash Player for mobile devices after the release of Flash Player 11.1 for Android devices and the BlackBerry Playbook, opting instead to concentrate on tools for building HTML5 applications for mobile devices. Even though Adobe reiterated its support of Flash Player for personal computer browsers, many think it’s just a matter of time before Adobe also terminates support for the PC version. This is bad news for companies that are heavily invested in Flash applications, as well as developers that have invested time in acquiring the programming skills required to build Flash applications.

Let’s look at some of the differences between Flash and HTML5 and provide some tips and tools to help ease the transition between these two platforms.

Flash Platform Basics

Flash is often used as an umbrella term to refer to a proprietary Adobe platform that actually consists of the following components:

• Flash: A tool used primarily to design and create animations
• Flex: The development environment used to build applications, including a software development kit (SDK)
• MXML: Markup language used in Flash projects
• ActionScript: A scripting language

To run a Flash application in a Web browser, the Flash Player plug-in must be downloaded. As an alternative, a Flash application can be compiled to run in the Adobe AIR desktop runtime environment. Again, Adobe AIR must be installed on the user’s computer for an AIR application to run.

Flash uses the following main file formats:

• .fla: Flash project file
• .flv: Flash video file
• .swf: Compiled Flash/Flex application file that may contain .flv files

HTML5 Platform Basics

HTML5 is an open standard platform that consists of the following:

• HTML5: Markup language used to create Web pages
• Cascading Style Sheets 3 (CSS3): Style sheet language used to specify the formatting for objects on an HTML5 Web page
• Application Programming Interfaces (API): APIs to support features such as drag-and-drop and cross-document messaging
• JavaScript: Scripting language used with HTML5 to enable animation

One of the advantages of HTML5 is that it runs on Web browsers natively and doesn’t require a plug-in. However, to run properly, a browser must support HTML5 and CSS3 features for an HTML5 Web page. The major browsers have different levels of support for HTML5 and CSS3, and implementation is not complete. JavaScript is almost universally supported by browsers; however, users have the option to “turn off” JavaScript, in which case client-side scripts created with JavaScript do not run.

HTML5 file formats include the following:

• .htm/.html: HTML5 Web page file
• .css: CSS3 style sheet file

As of 2011, the current HTML5 specification does not specify supported video file formats, leaving it up to individual browsers to choose which formats to support. Current supported formats include the following:

• .mp4: MPEG 4 video file with H.264 video codec and AAC audio codec
• .webm: WebM video file with VP8 video codec and Vorbis audio codec
• .ogg: Ogg video file with Theora video codec and Vorbis audio codec

Converting Flash Projects to HTML5

Manually converting a complex Flash project to HTML5 is a labor-intensive and time-consuming process, due to platform differences. The developer must convert animations created with Flash and ActionScript into HTML5 and JavaScript. Fortunately, there are a few tools that help automate the conversion from Flash to HTML5.

Adobe has released Wallaby, an experimental tool that can be downloaded for free from the Adobe Labs website. Wallaby takes a Flash project file (.fla) as input and exports HTML5 and supporting CSS and JavaScript files. However, the Wallaby release notes contain a fairly long list of features that are not converted – the most important of which are ActionScript, movies and sound. Wallaby is a limited tool primarily designed to convert animated graphical content into HTML5, so that it may be integrated into Web pages using a Web page design tool.

Google Labs has released Swiffy, a free Web-based tool that converts a compiled Flash application file (.swf) to HTML5. The output can then be embedded into a Web page but is not easy for a developer to edit. Like Wallaby, Swiffy does not convert all Flash features. Swiffy supports ActionScript conversion, but only version 2.0 (ActionScript is currently at version 3.0). The Swiffy output only runs on browsers that support Scalable Vector Graphics (SVG).

Edge, a New Development Tool for HTML5

As HTML5 becomes the platform of choice, new tools are emerging to provide design and development environments that integrate HTML5, CSS3 and JavaScript.

In August 2011, Adobe released a preview version of the Edge development tool. Edge enables a designer to create HTML5 animations and add animations to existing HTML5 projects. Flash designers will recognize some familiar elements in the Edge user interface, including the stage, properties window and animation time line. Edge, however, generates CSS and JavaScript files, and its animation content is stored in a JavaScript Object Notation (JSON) data structure.

At the time of this writing, Edge anticipated its fourth preview release. New features are being added to each release.

Converting YouTube to HTML5

One sign of the move to HTML5 is that YouTube now offers the option to use an HTML5 video player to view videos.

Prior to offering the HTML5 option, all YouTube videos were delivered via a Flash video player. Users could upload video files in almost any format, and YouTube would then convert each video to the required Flash (.flv) format.

YouTube is now also encoding videos with the H.264 video codec and the WebM format for HTML5 delivery. To view videos in the HTML5 format, you must have a browser that supports the HTML5 video tag and a video format used by YouTube.

The Legacy of Flash

As previously noted, Adobe is continuing development on the PC version of Flash Player – for now. Even if Adobe stops supporting Flash Player in the future, legacy Flash applications will continue to be supported on the Web – likely for years. So, Flash isn’t completely going away anytime soon. Tools are available to convert Flash applications to HTML5 applications, but currently, these tools do not support the conversion of all Flash features. As the HTML5 standard becomes dominant, it is likely that Flash file conversion tools will become more sophisticated, and new tools will be created to develop content with the HTML5 platform.