Kris’s Box

In July, I was at a TOP-100 party, where the dj’s played their 100 most favorite songs. The venue had a few large screens, that showed the number, the artist and the title of each song.
It looked like this:

Whenever the next song started, the new number, artist and title would appear, using some standard PowerPoint-like animation (wipes, blinds, checkerboard, …).

Trying to build something myself seemed like a nice opportunity to experiment with Adobe AIR and jQuery.

• Adobe AIR is a framework to build rich Internet applications that run on the desktop.
• jQuery is a “fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages”.

While I’m building this application, I am planning on sharing my experiences via this blog.

This is posted so far:

• Step 1: Creating a basic html-page displaying the screen
• Step 2: Make that screen appear in an AIR application
• Step 3: Change the screen when pressing a key
• Step 4: Add some animation (sliding text to the left or right)
• Step 5: Make the background color change with the animation
• Step 6: Make it dynamic by reading an XML-file with song information
• Step 7: Allowing for moving to a specific slide immediately by typing the number