What Else Does HTML5 Need to Defeat Flash?

Nowadays, HTML5 is like a shining star in the webs sky. However, is HTML5 ready to take the overall crown? From 2 aspects, we are going to discuss what else HTML5 needs to defeat Flash.

Technically:

First of all, I’d like to emphasize that HTML5 and Flash don’t have many overlapping functions. For example, you can invoke hardware like cameras through Flash; but not HTML5. However, the elements imported by HTML5 do bring some serious competition to Flash.

The most familiar of these features are the canvas and video tags. The other new HTML5 features have very little competitive relationship with Flash, but the canvas and video tags are the key factors that determine the fate of the battle. They’re going to bring some fundamental changes to the entire web industry as long as they’re popularized. In other words, they’re the two major blows HTML5 can lay onto Flash.

Canvas:

Long before Flash took the crown, there were many methods through which web drawing emerged on the market, the most famous being the Java Applet. Those methods competed with each other, with each having their own advantages. But that war quickly ended when Macromedia published Flash.

In order to fight with Flash, many other technologies arose. These included SVG. However, those technologies didn’t stop Flash running away with the top prize. Flash based games and animations crept into every corner of the internet within a very short time.

Now the cycle continues with a new challenger appearing — HTML5’s canvas.

In many ways, canvas does excel over Flash. It doesn’t rely on a plug-in, but instead intimately integrates with the rendering engine of browsers, saving resources and most importantly effectively simplifying the interactivity between images and other elements on the page.

As for Flash, it does take up a lot of time and resources to simply interact with a page. What’s more, it’s inconvenient for programming.

canvas is an element of HTML and it can be operated like any other HTML element. Developers can write all the code in one file, which does reduce the difficulty of maintenance and updates.

However, canvas also has disadvantages:

  • 1. Developers do have to describe every dot and graphic curve in the program; so they do have to deal with matrix transformation in cases of rotation and zoom. This increases the difficulty of drawing complicated pictures. Whereas in Flash, the image display API is kept in the “Sprite” directory; developers are then able to use different tools to design the image; the image rotation and zoom only require a simple invocation of directory functions.
  • 2. There are drawbacks in animation realization as well. Although canvas provides the nontraditional method of using divs to realize the animation, it’s still pretty complicated. The developers have to clean the canvas at each frame, and redraw all elements.
    As a consequence, animation with large numbers of elements display slowly. The movement of even a few elements requires redrawing the whole canvas, wasting huge resources. In comparison, Flash is drastically easier. Although redraw is required on the basic level, it’s processed by Flash Player automatically; the developers don’t have to do it themselves.
    The Flash analysis progress based on bytecode is faster than the one used by HTML5 and JavaScript based on simultaneous compiling. Generally speaking, the more complicated the animation, the more fluid the display. In addition, the well kept image directory and powerful designing tool make animation development much easier.
  • 3. There is no event system. Developers need to judge the image element clicked by users by catching the coordinates of the user clicking on the canvas. During the process, it might check all the displayed elements and judge whether the dot is inside the image or not. It’s complicated to realize, let alone the recursion.

    The problem might be solved by future graphics libraries, but it’s just like building an event response model with JavaScript. Obviously, its efficiency is less than the original event model imbedded in browsers. Event is well kept in the Flash directories, the event of click capture is a piece of cake.
    More importantly, it provides the event and function to judge whether there is intersection between two images, which is really convenient in game programming. HTML5 is not convenient here.

From the above analysis, we can see that HTML5 still lags behind in three areas. It needs a powerful and easy-to-use graphic library, hardware accelerator for image analysis/redraw and a powerful IDE.

At present, the game engine based on canvas already exists, but it’s not nearly as perfect as Flash.

As far as hardware acceleration is concerned, WebGL gives us hope. WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language, allowing it to generate interactive 3D graphics within any compatible web browser. It promotes the speed of image display, and most encouragingly WebGL is available on most browsers, with the notable exception of IE.

As for IDE, it’s ironic that Adobe adds a Flash-to-canvas function for Adobe Flash CS5.

If the above 3 problems can’t be solved, the realization of canvas will be restricted, the development will be difficult, and it’s going to be hard to popularize.

Video:

Video might be the most frustrating thing for Adobe. More than anything it’s probably going to be swipe that knocks Flash’s crown off. The current situation is that there’s a coding problem for the video tag. “H. 264” supported by Apple and Microsoft is not an open standard. Browsers have to pay for it, and that’s why Firefox refused to support H. 264. Although Google purchased a set of high-qualified coding technology, there’s no evidence that indicates Google will open the technology.

According to the statistics of W3schools.com: Google Chrome and Apple Safari have a strong growing trend, but the browser market is still dominated by Firefox and IE. If Firefox keeps H. 264 out of the door, it’s going to be very hard to popularize that video tag.

So HTML5 needs an open and high-qualified video coding standard.

In this article we’ve looked at HTML5 from a technical perspective. We discussed the problems HTML5 is facing. In part 2 we’ll change to a commercial perspective and discuss the relationship between HTML5 and the giants of the industry.

(2 Posts)

Viki is the Founder and Editor-in-chief of 7plusdezine. She's graphic designer with 6 years of experience in vector, flash to HTML5. Meanwhile, She also likes writing articles about her experience, summary and analysis. She is writing for several sites at the moment. Her email is viki@sothink.com.

Comments

  • Eduárd Moldován

    Great article! One thing missing about the video. HTML5 will never ever knok out flash, unless it will support video stream playback as flash does now. There are many things to be done till then!

  • Szyderca

    What’s about sound? That’s a very important matter, especially for game industry. Right now there is no overlapping of sounds.

  • German

    Wow! It seems that you are really inexperienced in coding. Debugging code in one file is difficult to do. And not having a stong typed languado to rely on, this case js, hurts the performance so badly that as tody flash is al least 3 times faster than js.

  • HTML5GameDevelopment

    Many of the game frameworks (CraftyJS, EaselJS, ImpactJS) that are sprouting up address many of the issues mentioned above. It’s also easy to forget that Flash went through many iterations to build up it’s functions to where they are now, HTML5 is just starting out in that regards, but is catching up quickly.

  • While I would argue that the Flash runtimes offer far more than drawing APIs and video playback – I have to point out that the statement that Flash is “inconvenient for programming” is one framed by your perspective. I’d like to know what you mean by this statement. Can you elaborate upon this?

  • I’m always confused on market share statistics. Everyone that publishes them differs so greatly. Great article btw! I’m loving it every time I can swap out a Flash app with new HTML 5 functionality.

  • TechAgnostic

    “Defeat” Flash? Why are standards advocates always looking to copy and defeat innovation, rather than innovate and compete?

  • Flash works best on a Windows computer…on a Mac Flash is slow.

    I have been making the transition from Flash to HTML5 for the past year. It hasn’t been easy and the animations are slower in HTML5.

    I downloaded IE10 and it is by far the fastest browser out there for HTML5.

    It doesn’t support WebGL as of right now and there seemed to be a few quirks but it is a beta browser on a beta operating system.

    iOS5 has dramatically improved which also gives me hope.

    The truth is HTML5 is still about 3 years away from mass market adoption. But within a year you will see many developers using it full time and notifying visitors their browser is out of date.

    I currently send all visitors to the mobile site if they have IE8 or lower, or a browser that doesnt support the new features I’m using.

    Try MobileESP to assist with mobile and tablet detection. And try Modernizr.js for feature detection.

  • Mart Thorpe

    “Developers can write all the code in one file, which does reduce the difficulty of maintenance and updates.”

    Sorry cannot agree.  This is going back to the bad old days.  I guess you have never been presented with a 3000 line page of code to work on (written by someone else obviously).  Sorry splitting code into multiple pages is the start to good structured code imho.  Other than that nice article.

  • Abavisg

    This is by far the most misinformed (I am not sure if it’s done on purpose though or not) post about the “battle”. You actually won the crown!
    Please stop writing bullshit! And please educate yourself first before commenting on development.

    I will only comment on Flash being a plugin: Before the (in?)famous Steve Job’s post you and most of the Flash haters out there had no idea what a plugin is. Now you all hate it.
    You are trying to kill a technology that is still irreplaceable in many cases.With no substitute in the near future.
    Now do you really think this is clever or you are just being a nice “fanboy” (or “fangirl” in  your case)? 

    As a homework please try to find what makes this post the most misinformed!

  • The problem is that HTML 5 is becoming more or less like Snake Oil these days. Yes it can do this – it can do that – 1000 times better. ADOPT IT!

    Everything’s good is now associated with HTML5 and everything’s bad is associated with Flash and regular HTML/CSS, the latter technologies (together) have driven the web for the past 10 years or so.

  • Joel Brown

    that is an interesting look at the beginning differences between 2 different technologies… I guess one question to ask would be:
    Why does there have to be a “fight” between these two? Yes HTML5 has some good things going for it, and will improve over time. Flash also has some good things going for it and will continue to improve over time as well… I guess what I am trying to figure out is why people can’t mash technologies together to produce the best possible experience instead of limiting themselves by thinking one is better than the other. Just a thought by someone who is currently a student in an interactive program that teaches both.

  • I miss Flash :(

  • mbm

    … Where did those browser statistics come from, because they aren’t remotely accurate.

  • 100% agree. Let’s finally “call a pikestaff a pikestaff”!

  • intrr

    Well, if you want automatic scenegraphing, then you won’t be using , you’ll simply use HTML elements and CSS3 controlled by JavaScript. All the advantages of Flash, minus the disadvantages of . I generally don’t understand why everyone seems to be doing everything in canvas, when you can do most of it using regular HTML elements and manipulating the DOM, which is far easier and often more efficient, and where event handling is also “piece of cake” (and works, contrary to Flash) :)

    Uhm somehow the Blog software appends “” to my post… programming is hard!

  • intrr

    He probably means that Flash is convoluted, bloated, chaotic with 23984237423 functions and properties doing the same thing but just with one underscore less, and that to change one simple property of an object, you have to do a 5-fold nested call to some strange functions?

  • I can’t believe no one calls straight and unequivocal Bullshit on the stupid canvas tag. Its been 2 years now since the loud proclamation of how great it all will be. Its a years past the last comment to this article even and still nothing works. Flash cannot be replaced at this pace. I can’t stand what has happened The world was fine one day and the next one they killed flash in mobile browser without a viable replacement. Its an appalling state of things. I am disgusted and I am disgusted with all the misinformation and blablabla. The canvas tag is nothing more than a fancy awkwardly dynamic animated gif. The emperor has no cloths on. An i am saying this in 2013!!!! fuck me!