Getting Started With Script.aculo.us Visual Effects in Dashboard Widgets

Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation. - Walt Disney

Introduction

I’ve been working on some new Dashboard widgets, AIM Fight! and TruveoCast (see Figures 1 and 2 respectively), that you will be able to read about soon right here on the AOL Developer Network. (Now read the complete article!) AIM Fight crawls through the depths of the Internet to answer the all-important question that plagues us all: How popular am I right this second? TruveoCast lets you browse through a specified user’s list of favorite videos.

Figure 1. AIM Fight!

Figure 2. TruveoCast

In both of these applications I needed to include some special animation. In the AIM Fight widget I needed a visual effect when a fighter lost, and for Truveocast I needed an effect when the user changed the channel. You can see these effects in action in the videos in Figures 3 and 4.

Figure 3. AIM Fight! video

Figure 4. TruveoCast video

Creating Effects

I turned to the Script.aculo.us Javascript library to provide these effects. Script.aculo.us provides a wide range of combination effects which you can see here.

Implementing an effect is quite simple. Once you have the Script.aculo.us library included on your web page, you simply call the appropriate method of the Effect object, with the name of the div you want to animate. For example, to simulate the flicker on the channel change in TruveoCast I used the Pulsate effect:

Effect.Pulsate(‘thumbNail’);

Customizing Effects

The Effect methods also accept an optional parameter to customize the visual effect. For example, by default each effect last 1 second. To speed up the flickering I changed the duration to 0.5 seconds. This changed the call to Pulsate as follows:

Effect.Pulsate('thumbNail', {duration: 0.5});

The effect parameters are fully documented here.

Your Thoughts!

Do you use Script.aculo.us or another JavaScript animation library? If so, let me know why you like script.aculo.us, or why the library you choose is better! I’m looking forward to hearing from you!

You can download my Dashboard widgets at: http://widgets.idcc.net