In Part I, we discussed how relying on Flash for websites can lead to problems with smartphones that don’t support Flash. We recommended the solution of detecting whether Flash is installed and, if not, substituting an alternative such as a non-animated graphic image. But that can be rather boring and not in keeping with your site’s up-to-date and sleek philosophy.

In this Part II, we present how, for our clients, we have created Flash-like effects without using Flash at all. Who says that the alternative has to be a boring static image, right?

One word, JavaScript. JavaScript (JScript for Microscoft’s Internet Explorer) is the de facto client-side scripting language embedded in every modern-day browser that, if utilized properly, can be leverage to provide special effects without the need for Flash. All smartphone have to support JavaScript since so many website use it. Note: JavaScript is not the same as Java which, like Flash, needs to be installed in your browser separately and is not available on all device platforms. JavaScript is the only universal browser scripting language.

Let’s explore a few examples of what we can do with JavaScript.

Example 1:  Rotating and Fading Slideshow

Here’s where a spot in a web page is used to show one picture after another. In the old days, a few years ago, abruptly changing from one image to another was an accepted practice. As designers started to use Flash more, they leveraged Flash’s ability to fade one image out and another back in. Well, JavaScript can do that t0o.

Check out Example 1.

Apple eschews Flash technology, and that’s why there is and probably will never be any Flash support on the iPhone and iPad devices. If you go to Apple’s website, you’ll see them using this effect in many places.

Example 2:  Rotating, Fading and Sectioned Slide Show

One disbeliever who is now a happy client said, “so, you can rotate through images, but what about special effects?” We asked him to mention one, and he said “okay, can you have an image swipe across from left to right in three sections?” We worked for a bit and show him something similar to our second example here, and he was convinced.

See Example 2.

What is going on here is that there are actually several images next to one another, three panes as it were. The JavaScript code rotates through the images in tandem, offset by a small delay to get the desired effect. Note the combined effect of simultaneous sectioning and fading.

Example 3: Two-Dimensional Sectioned Slide Show

Just to prove our point without any doubt, we took our second example with horizontal sections and added vertical sections to generate two-dimensional sectioning with two rows and three columns.

See Example 3.

There are other possibilities limited only my our mutual imaginations. Like Flash, JavaScript can create the following effects:

• image fade in / fade out
• image scrolling
• drop-down / slide
• changing speed
• changing color
• rotation
• zoom in / zoom out
• sprite (individual image) control
• overlaying / superpositioning
• multiple image morphing
• synchronization of disconnected animations

JavaScript is not as good as Flash in:

• video playback
• accurate sound and video synchronization
• high frame rates for graphics
• unlimited text font support
• realtime user interaction

This comparison does not suggest that JavaScript is every bit as good as Flash in its handling of effects. Far from it. Flash is a much better environment for creating animation because it has a complete development platform for developing its code and a specialized environment in which to execute it.

That said, if you would like the maximum amount of interoperability especially with smartphones, that Flash is that much a better environment doesn’t matter. In that case, turn to JavaScript.

Since JavaScript doesn’t have an Adobe behind it pumping out development environments for creating animation, you will need to turn to a development firm that knows JavaScripts in’s and out’s, matches up what you’d like to see, and provides a custom solution for your site. While that might sound expensive, it’s really not as we have created JavaScript replacements for fractions of what the original Flash effort cost.

*     *     *

In our two-part article, we hope we’ve expanded your thinking about how not to use Flash, at least not for every animation. We would enjoy hearing from you if you’d like to see if we can help with your site animations.