Back to recent posts

blog

Insight Article

Rich Animation: Flash vs. jQuery June 1st, 2009

Navaro Kim

Navaro Kim

No Comments

Mixx This  /  Save to del.icio.us  /  Share on Facebook

Early Web Animation

At the beginning of the Internet boom there were two ways to create animation. One was by using an animated gif – a very rudimentary web based version of flip cards. An animated gif strings together a number of images that change slightly, creating an illusion of movement when viewing them quickly in order. Not only could the files be very large at times, but they were also highly pixelated and not very smooth.

In 1996, Macromedia acquired a small startup called FutureWave Software and re-released their FutureSplash Animator product as Macromedia Flash. This introduced a vector-based animation platform that enabled web designers to create animations using a timeline and vector design tools. This solution proved to be much smoother and resulted in smaller file sizes. The only drawback was that you needed to install the plug-in for the browser to view it. At the time, the majority of the Internet population hadn’t really caught on to it.

Netscape’s browser-based JavaScript language was never a true option for animation at the time. It wasn’t until Microsoft’s introduction in 1997 of Internet Explorer 4 as the first real browser that had page objects that could be transformed through scripting that some real potential was shown. There was little that could be done with this however as the processing power didn’t exist, and JavaScript engines were horribly slow.

Web Animation Today

Fast forward to today. Animated gifs are a thing of the past, while vector-based animation goes a step further now with 3D animation and has expanded to include audio and video for the Flash Player, as well as a robust scripting environment. Based on some statistics, 98% of the users in the U.S. have the Flash Player installed on their browser.

HTML with the use of JavaScript has advanced as well. Beginning several years ago with the new attention Ajax gave JavaScript, all major browser vendors are now investing enormous efforts in their browser’s JavaScript engines. Many have rewritten them from the ground up, paying particular attention to performance and producing benchmarks touting their performance gains over one another. Never mind the browser wars, this is the JavaScript war.

With more attention given to JavaScript, dozens of JavaScript frameworks have sprung up as potential tools for Web developers to use. These so-called frameworks are libraries of prewritten functions that make deploying solutions and implementing effects much easier between all browsers, something that has plagued JavaScript for years. Common frameworks include the likes of jQuery and jQuery UI, YUI, Prototype and Scriptaculous, and the Dojo toolkit.

So Flash now has a potential challenger in the animation department by way of JavaScript frameworks. JavaScript has several advantages over Flash. For one, there is no plug-in required since it utilizes open Web technologies such as native Document Object Model (DOM) scripting, HTML and CSS. Secondly, it’s much easier to create animated effects that are accessible and Section 508 compliant. Lastly it can have less of an impact on Search Engine Optimization (SEO) if implemented using SEO friendly techniques.

These days at NavigationArts, when animation comes up it typically becomes a discussion of the pros and cons of our JavaScript library of choice, jQuery, versus Adobe Flash.

So why not use jQuery or JavaScript for all animation? Because when it comes to certain types of animation or techniques, jQuery cannot do –or simply wasn’t meant to do– everything. It does not handle 3D animation, multi-object independent movement, bitmap manipulation and fine user controlled animation. You’re also at the mercy of browser and end user limitations such as resized text, alpha transparency, and more.

Outside of these limitations jQuery can do a lot of simple animation quickly and easily. jQuery is a much better and more appropriate solution for: navigation (i.e., dropdown menus), expandable content areas, widgets (i.e., date picker), and other user interface tools. In fact, that’s exactly what the jQuery UI system is for 1.

Web Animation Tomorrow

There are many new ways to produce animations today, but the most compelling aren’t ready for prime time — yet.

Several examples rely on HTML5 bleeding edge techniques involving scripting the new Canvas element. Canvas is a new drawing technology implemented by every major browser vendor except, unfortunately, Microsoft in Internet Explorer. Canvas allows high performance 2D (3D is coming) transformations in the browser without plugins using JavaScript.

Some fascinating libraries and applications already exist. One such example was actually created by the creator of jQuery, ironically enough. John Resig ported Processing, an open source programming and animation environment, to JavaScript and Canvas — with stunning results. Demos and code can be downloaded from http://processingjs.org. Processing.js will run in Internet Explorer with a compatibility library for IE, although not quite as well as natively with Canvas.

Canvas may not be ready in the market leading browser, but it’s enough to prompt some to wonder if it will replace Flash for animation one day 2.

When and How Should Flash and jQuery be Used?

Since Flash and jQuery are both capable of animation, inherently there comes a gray area where both can perform pretty much the same function. For example, here are two Web sites that have a banner cycling through multiple content items:

Discovery Channel utilizes Flash while Wolftrap takes the jQuery approach. Both have nearly identical functionality.

Another example is the photo gallery:

The Washington Post utilizes Flash while the NFL takes the jQuery (Javascript) approach and again they have pretty much the same functionality.

Decision Factors

The question now becomes in many projects should I use jQuery or Flash to build the tool or widget? When making this evaluation, you’ll have to take the following factors into consideration:

  1. Section 508 and accessibility compliance – How important is this? JavaScript tends to be a little easier to work with when trying to conform to it.
  2. How important are the transitions and interactions? – If the need is for a slick presentation and very smooth transitions, Flash has many more options than JavaScript.
  3. How much copy is present? – If there is more than a paragraph or so of text that need to change, JavaScript would probably better handle the layout in this situation.
  4. How many different browsers and platforms need to be supported? – Flash is much more consistent across browsers and platforms than JavaScript and HTML, thus making Flash much easier and quicker to develop.
  5. Rounded corners, background images and gradients in the design – If the design has plenty of rounded corners and use of gradients, Flash would be much easier and quicker to develop. Rounded corners often take quite a bit of time to make them look consistent in HTML across many browsers. Complex background images as well as multiple gradients are much easier to work with in Flash than HTML.
  6. Technology fall-back — If there’s a concern with what happens to the content or user experience when visitors may not have a Flash plugin, or their scripting is disabled, JavaScript wins hands-down as it is quite possible, using "unobtrusive" techniques, to make this work.

Conclusion

In conclusion, JavaScript, jQuery, and Flash each has their own strengths and weaknesses. The decision to use one or the other depends upon the needs of the situation. It’s also important to keep in mind a third option. Some of the more unique user experiences will take advantage of both of these technologies and present them seamlessly.

Resources

  1. http://ui.jquery.com ↩
  2. http://stairwellblog.com/2009/03/is-canvas-the-end-of-flash/ ↩

Careers

We are looking for experienced professionals to join us and contribute to our clients’ success.

View Opportunities