Move over HTML5… Flash is here to stay!

There has been a lot of controversy pertaining to the pros and cons of HTML5 compared to Adobe Flash. Even though the topic has been thoroughly discussed and analysed, I wish to add my voice to the dialogue.

At this point in time, my opinion is that HTML5 will not replace Flash. Even though some major players like Google and Facebook have jumped on the HTML5 wagon and have deprecated Flash APIs, I still think Flash is here to stay.
Without trying to “beat a dead horse” I’ll compare both to prove my point.

Video

HTML5 has a element and you can create play, stop buttons using the controls attribute. Javascript is used for implementing interactivity. There are several HTML5 video players available on-line.

At this time, HTML5 does not have a standard video format because just as you have a wide variety of browsers different organizations have employed formats that suite their needs. With Flash however there’s backward compatibility, only new features may not be available on outdated Flash player plugins.

HTML5 + Javascript has quite a few event handlers at the network level such as loadstart, progress, abort, error, stalled etc.The W3C HTML5 Video Editor’s Draft has a comprehensive listing.
Flash with Actionscript 3.0 gives you the ability to create interactive video using cue points and various Event objects. Actionscript 3.0 includes classes such as VideoEvent, VideoError, VideoState which give you granular control over the embeded video. The VideoEvent class has over 20 properties such as AUTO_REWOUND, BUFFERING_STATE_ENTERED, CLOSE, COMPLETE, FAST_FORWARD, REWIND, playheadTime, SCRUB_START etc. Furthermore Flash also gives the option of various transition styles and wipes that you cannot achieve with HTML5 video.
HTML5 relies on Javascript for this and since Javascript lacks true Object Oriented Programming features, there are very tight constraints for developers trying to compete with Flash Video. Also using the HTML5 video element requires writing code in a generic IDE that may not be designed for this purpose. With Flash and Actionscript the developer has the advantage of a mature development environment with a a rich GUI and tonnes of Open Source Libraries and Plug-ins.

Canvas

The HTML5 canvas element allows developers to create bitmap graphics using scripts. It is similar to the drawing API in Flash using the Graphics class. Both have the basic drawing methods for lines, curves (quadratic and Bezier) and fill styles for adding color and gradients. HTML5 canvas has the major disadvantage of not having a scene graph. Therefore after drawing a shape, canvas does not remember and if you want to make changes you have to draw the whole shape again.There are a few Javascript scene graph libraries such as CAKE that could solve this problem. In Flash however you can draw shapes embeded in objects like MovieClips, this allows you to refer to the whole shape as a display object and alter it any way you choose. You can apply all the filters and animation methods of MovieClips which open up a vast array of possibilities.

Audio

The HTML5 audio tag makes it easy to embed sound files directly into an HTML page. However at this time only file formats (.mp3, .ogg) are supported by most modern browsers. Event handlers include onlpaying, onended, onerroronreadystatechange and so on. You can find a more comprehensive  list of event handlers on-line. As expected Flash has similar event handlers plus a lot more. There’s the Sound class that creates the Sound object and SoundChannel that allows you play or stop different sounds simultaneously and allows you to control the right or left audio channel. You also have a SoundMixer class that gives global control over all the sounds in the swf file. So once again Flash turns out to be way ahead of HTML5, not only in terms of browser support, since very few browsers currently support the audio tag, but also in terms of functionality and features.

Animation

Even though HTML5 does not have a specific animation feature (CSS3 has a transform property), the canavas tag can serve as a platform or stage for animating images and bitmap graphics. There are also HTML5 editing tools like Adobe Edge that provide a good animation user interface for HTML5, Javascript and CSS. This amazing animation experiment was created using HTML5. You can also see more samples of HTML5 animation on this blog. Some of these samples show how powerful the canvas tag with javascript can be. And it’s quite clear that HTML5 is a serious contender with Flash in most areas. However, since Flash is a very mature animation tool, its long life span is a huge advantage. Over the years the software has gone through several iterations and improvements. It has also created a vibrant eco-system of developers, plug ins, library extensions and ardent fans. Considering the fact that Adobe Edge is from the creators of Flash it should be expected that both tools are meant to have a sort of symbiotic existence.

Conclusion

The media tags mentioned above are only a fraction of what Flash has to offer. Using PHP for backend database access gives Flash a huge advantage. You also have various filters that can be applied to Bitmap graphics.

Certainly HTML5  is a probable substitute for Flash, Adobe recently announced that it will no longer support Flash for mobile platforms, instead they will promote HTML5, Flex and Adobe Air. Certainly Flash no longer has the monopoly of web based animation and multimedia, however at this time it still offers a better set of tools than HTML5. Only time will tell which one will win. It’s quite interesting to watch how things work out.