[If you’d like to download the files used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.]

Create an old-school MP3 player out of thin air

Ever since the release of Adobe AIR, Flash designers and developers have been able to use their existing skills to create full-featured desktop applications. They can continue to design and develop in Flash CS4 using the same techniques used for building Web-based Flash content and they can simply choose to deploy it as an AIR application. In this tutorial you’ll learn how to create and publish a simple, old-school MP3 player using Flash CS4 and ActionScript 3.0.

1 DOWNLOAD AND OPEN FLA FILE
To get started, download the tutorial files from www.layersmagazine.com. Open the file named OldSchool.fla in Flash CS4. This file is a regular Flash file that’s set up to publish for Flash Player 10. It’s often better to start your AIR project in this way, as it’s slightly faster to compile and test your movie. Only when you’re ready to start testing AIR-specific features do you need to change the publish settings. Another important point is that you must use ActionScript 3.0 when developing applications with Adobe AIR.

2 EXPLORE THE FLA FILE
Let’s take a minute to look at the work I’ve done to set up the movie for you. On the Timeline you’ll see four layers. The back layer contains the cassette tape image, which is actually a movie clip with an instance name of back. The buttons layer contains the Open Track and Close buttons. They have instance names of openButton and closeButton. The text layer contains a dynamic text field with an instance name of trackName that will show the track name. Finally, there’s a locked layer named “actions” that will hold all of the code for the project.

3 CONVERT TO AN AIR APPLICATION
As mentioned above, this file is set to publish to Flash Player 10, so you’ll need to change it so that it publishes to an AIR application. Click off the Stage to reveal the Publish settings section of the Property inspector (Window>Properties). Click the Edit button in the Profile section to open the Publish Settings dialog. Under Player, change the selection to Adobe AIR, and click OK. Note: You may have a different version of AIR displayed based on updates you may or not have installed, but for this example, it’s not important which version of AIR you’re targeting.

4 GET RID OF THE SYSTEM CHROME
If you test your application now by choosing Control>Test Movie, you’ll see your running application. One of the things you’ll notice is that there’s the familiar operating system window chrome around the cassette tape, which we’ll need to remove to achieve the effect we’re looking for. Click Edit in the AIR Settings of the Property inspector, change the Window Style to Custom Chrome (Transparent), and then click the OK button. Test your movie again to see the chromeless application. For now, you’ll have to close it via the Dock or Taskbar.

5 SET UP THE CLOSE BUTTON
Select the first keyframe in the actions layer and open the Actions panel (Window>Actions). The first event you’ll listen for is when the user clicks on the close button; this way, you won’t have to close it from the Dock or Taskbar. Enter the code shown above into the Actions panel. Line 1 registers the event listener to call a function called onClose when it’s clicked on. Lines 3–6 create the onClose function. On line 5, you call the stage.nativeWindow.close() method to close the application. Test the application and click on the Close button to close it.

6 MAKE IT DRAGGABLE
Right now you can’t move the application around, which obviously isn’t very good usability. To fix this, we need to listen for the mouse down event on the cassette tape movie clip. Copy the code shown here into the Actions panel. Line 8 registers the event listener to call a function named onDown. Lines 10–13 create the onDown function. Line 12 calls the stage.nativeWindow.startMove() method to begin dragging the application with your mouse. Test the application and drag it around your Desktop.

7 CREATE SOME OBJECTS
There are three objects that you’ll need to create so the application works properly. The first is an instance of the File class that will allow the user to select a file from his hard drive. The second is an instance of the Sound class that will handle the playback of the local MP3 file. Lastly, you’ll need an instance of the SoundChannel class that works together with the Sound class to control the audio. Copy the code shown in this image into the Actions panel.

8 SET UP THE OPEN BUTTON
When the user clicks on the Open Track button, you’ll be using some AIR-specific code to choose and load in a local file. The first step is to set up the click event for this button. Copy the code above into the Actions panel. Lines 19–25 create the event listener and the onOpen function. Line 23 listens for the select event on the File class and it will fire when the user selects a file using a native OS file chooser. Line 24 opens the file chooser for the user to allow him to choose a file.

9 PLAY THE MUSIC
In the last step we told Flash to call a function called onChoose when the user chooses a file from their computer. Copy the code shown above into the Actions panel to set up that function. Line 29 creates the new Sound object and passes in the URL property of the File class that contains the full path to the selected file. Line 30 starts playing the MP3 file and also assigns it to the SoundChannel object so that you can control it. Test the application and load in a music file.

10 FINISH IT UP
As you probably noticed, there are a couple of issues with the player. First, if you’re playing a song and then load another, they play on top of one another. Secondly, you still need to set the track name of the song. Copy this code into the Actions panel. Line 29 checks to see if the SoundChannel class is currently playing a song and if so, stops it. Line 30 sets the trackName text field to the filename of the MP3 that was just selected. Test the application to see the finished result.

11 PREPARE TO PUBLISH
Click the Edit button in the AIR Settings section of the Property inspector. You can give your application a description and a copyright message, although neither is required. In the download tutorial files, there’s a PNG named icon.png that you can use as the icon for your application. Click the Select Icon Images button and set the 128×128 size to the icon image. As the other sizes will automatically be created for you, delete them by clicking on the Trash icon, and then click OK.

12 CREATE A DIGITAL SIGNATURE
To publish an AIR application, you need to create a digital signature file. In the AIR settings dialog, click the Set (or Change) button in the Digital Signature section. In the Digital Signature dialog, click the Create button to open up the signature creation dialog. All of the fields are required here but can contain anything you want. Don’t be overly concerned with the contents unless you’re planning to release your application to the public. Click Browse to select a location to save the signature file and then click OK. You’ll need to enter a password in the Digital Signature dialog and click OK, as well.

13 PUBLISH THE APPLICATION
Now you’re ready to publish your application to an AIR file that can be installed on Mac, Windows, and Linux. Open the AIR settings window again, if it’s not already open. Click Publish AIR File to create the AIR installer file—this may take a little while depending on a host of factors. You should see a confirmation that it was successfully created. If not, double-check the previous steps to make sure you didn’t miss anything. You should now have an AIR installer in the same directory as the FLA file.

14 INSTALL THE APPLICATION
You’re now ready to install the old-school music player on your system. Double-click on the AIR file to begin the installation process. You can just leave everything at its default value unless you want to store the application in a different place. You can now run the application and load a nice, old-school song to get the full effect. What’s impressive about this example is that it only took 33 lines of ActionScript code. Not bad at all!

ALL IMAGES BY LEE BRIMELOW UNLESS OTHERWISE NOTED