A few days ago, 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”.
I am a heavy DreamWeaver user, so I had downloaded the Adobe AIR extension for Dreamweaver before. I had worked through the “Hello World” Getting Started demo successfully, but I hadn’t gone further with AIR yet, as I did not have a good experiment in mind. This TOP-100 app would change that.
The first step was to create an AIR application that would simply display the 3 elements on a screen: a number, an artist and a title.
The first step is to create a Site in DreamWeaver. I created the site “Top100” and a new file “step1.html” in it. I added the 3 elements and used some CSS to make it look like the example. This is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Top 100: step 1</title>
<style type="text/css">
body, p {
font-family:"Arial Rounded MT Bold", "Arial", sans-serif;
font-size: 24px;
color: #FFFF00;
background-color: #3366FF;
margin: 0;
padding: 0;
text-align: center;
}
#number {
font-size: 12em;
margin-top: 5px;
margin-bottom: 10px;
}
#artist {
font-size: 6em;
margin-top: 5px;
margin-bottom: 5px;
}
#title {
font-size: 4em;
margin-top: 10px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<div id="number">47</div>
<div id="artist">SEAL</div>
<div id="title">KISS FROM A ROSE</div>
</p>
</body>
</html>
The result in a browser was:
which looked pretty much like I wanted it.
The next step was to make this screen show in an AIR application. I will explain how that went in part 2.
♦ Related files: step1.html