HTML5; a great alternative to Flash for creating Interactive Content

Unless you haven’t subscribed to the “No Apple” mantra of today’s modern society, you have probably at one time or another held an Apple product in your hands. Be it an iPhone, iPod, iPad, or Macbook, you’ve marveled for a moment or two at how smooth it operates before returning it to its owner and returning to your choice of technology.

And if you’ve held one long enough, then you have come to the realization that Apple has little respect for Flash, and those iPhones and iPads do not display the content that run on it.
If for no other reason, given the tens of millions of dedicated Mobile Apple users, it may finally be time why you should ditch Flash for HTML5.

Flash lovers, need a bit of persuading?

I was once an avid flash designer. My team and I worked on complex interactive sites and in 2009 shortly after we launched our anticipated flash site themed: Evoluti@n , I caught one of my creative designers playing with Google’s beta micro site showing some of the possible interactivity utilizing HTML5.

But I brushed it aside realizing it wasn’t supported in Internet Explorer 8.0 and current version of Firefox at the time.  So we continued on our journey of utilizing Flash as the key interactive tool of choice.    

It wasn’t until shortly after that iPhone began to explode onto the scene and knowing the upcoming iPad would also not support Flash, we realized it will be a matter of time where we need to take adoption of HTML5 more seriously and begin convincing our clientele who continued to be married to Flash that the time has come to make the transition.

And if you need more persuading, how about this. Flash is a bit cumbersome on most mobile devices. In general apps running on Flash plug-in require more battery power than HTML5 apps, and can consume more overall processing power while HTML5 apps tend to be less of a process hog.   It should still be noted that this also depends on how well or poorly one develops and optimizes the HTML5 application.

The Plug-in dilemma

Flash is a plug-in, meaning it must be installed or supported by browsers to deliver its content.  Although this has some advantages, the negatives have overshadowed them.  Being a plug-in, Flash has the potential to crash the browser running it, and even on non-mobile devices while HTML5 embeds the multimedia within the page although it doesn’t support full streaming capability.

Flash may have a wider range of use, but HTML5 handles errors better and is on its way to support majority of functionality Flash delivered.   Basically, even some of the hardcore Flash designers including myself have realized the importance of consideration for HTML5 and its growing adoption.

Animating in HTML5

There are three main routes one can take to apply animation and motion effects in HTML5.

  • – HTML5 Canvas
  • 
- SVG (scalable vector graphics)
  • 
- Plan DIV HTML and CSS

SVG would be easier for you, since selection and moving it around is already built in. DIVs are okay but a bit clunky and have awful performance loading nodes at large numbers.   As for HTML5 Canvas, think of it as simply a drawing surface for a bit map.  You set up a draw (Say with a color and line thickness) , draw it over canvas, and then the Canvas has no knowledge of it (It doesn’t understand where it is or what it is because they are rendered as pixels.

SVG is good for creating apps with few items (tens or hundreds of nodes, but not 1000’s),  HTML Divs can be okay for creating simple motion effect and moving an element from one place to another but can be very clunky and a process bearing with multiple elements and also has limitations when dealing with certain shapes (for example Circles can be created with rounded corners).

Canvas is closest to what a designer may find with flash canvas.  By itself it doesn’t generate search engine friendly content (For example Text will render as a bitmap and so engines won’t necessarily read it unless you use HTML text over canvas).  But canvas is the most optimum for handling thousands of objects and allows for careful manipulation but require more code to create those effects.

Creating an ellipse using SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;"/>
</svg>

Example of Canvas in HTML5

<canvas width="300" height="225"></canvas>

function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}

As a designer/developer you have to determine what type of work you will be creating in HTML5. If it’s plain HTML content with no complex effects then DIV/CSS3 can serve you well,  but if you plan on doing complex animations or creating HTML5 app consider using SVG or Canvas and plan accordingly for the best option to serve your needs.

About the Author

Payman Taei is Founder of Easy WebContent, an award winning online system that allows everyone to quickly and easily create professional website, presentations, demos, infographics and other interactive content.