You may think that web based animation can only be done with Flash and this is true for more complex animations like shape tweens but simple animations involving moving elements around the screen and adjusting the transparency and the size of those elements can easily be done using JavaScript. The key to this is a function called setTimeout(). With this function you can call other functions that for example add 10 pixels to the width and height of an image, leaving a time gap between each function call; this gives the effect of animation.

The aim of this tutorial is to create a feed reader that reads from your top albums feed on LastFM and displays album covers of random albums in the feed.

Step 1

The first thing you need to do is locate your top albums XML feed, to do this go to LastFM, log in and go to your dashboard page. At the bottom of your dashboard page, click on 'Data Feeds' listed under 'Resources'. Once you're on the feeds page click on the link for Audioscrobbler
...MORE

Step 1

Create a new document in Photoshop and set its size to something like 90 by 35 pixels. Then select 'transparent' under 'background contents'. Select the rounded rectangle tool and set the radius to 10, draw the rectangle on your canvas, leaving a small gap round the edges.

Step 2