Atmospheres – AIR Music Player

I’ve been a bit unhappy with the previous version of my music player. I didn’t really liked the way it looked and I really thought it could use playlists. I reused a number of classes from the earlier version, but switched things around and added more features. The new version, which I call Atmospheres, was written to illustrate some other concepts in Flex and AIR.

Some of the things you’ll find in this version are: Dynamically loading style sheets; switching renderers on the fly with a TileList; custom events; custom drag & drop; and more. A more complete list is given below.

You may not be able to run the AIR program as I’ve developed it with an internal beta version of Flex 3. If you have the public beta version of the AIR SDK, recompile the source code, make sure you compile the CSS files into SWFs, too.

If you aren’t interested in developing AIR applications there are still a number of Flex component topics that might be applicable to your work.

Atmospheres with Orange Neon Style
orangeneon_screen_large.jpg Orange Neon Style
Atmospheres with Adobe Red Style
adobered_screen_large.jpg Adobe Red Style


Download all of the parts. The total size of the ZIP was too large for uploading as one file. The file structure mimics a Flex Builder project; I did not include the project and setting files however.

Source Part 1: Download file
Source Part 2: Download file
Source Part 3: Download file
Source Part 4: Download file
Source Part 5: Download file

Create a new Flex Project, flagged to run in AIR. Then import all of the files from these zips (in Flex Builder, select File->Import->From Archive, you do not have to expand the zip files to import their contents).

If you try to run the AIR application itself and it tells you that don’t have the correct version of AIR, then download the Flex 3 Beta from and build Atmospheres from the source code.

If you wish to try and run the Atmospheres program without building it from the source files, download the Atmospheres.air installer. Note that your system may rename the file with a .zip extension. If that happens, save the file first with a .air extension, then launch it when the download completes.


In no particular order they are:

1. Using ColorMatrixFilter to turn images to black and white. The album covers switch to black & white when you mouse over the items and return to color when the mouse leaves. Using a ColorMatrixFilter you can quickly make the change and revert it quite easily.

2. Using the Transformation matrix to skew and distort images. The album cover’s reflection is
Skewed slightly to make it look like the album cover is sitting on a glossy shelf.

3. Using 3rd party controls. Reflections seem to be the big thing these days and I found a 3rd party package to do it. Plus, the Visualization component from Ben Stucki is back.

4. Customized drag and drop. Controls like the DataGrid and List can make drag and drop easy because all you do is tell them you want to drag their contents. But you can also create your own customized drag and drop and visual feedback. It’s actually quite easy and the drag events can help you determine where and when a drop is allowed.

5. Drag and drop within a List control. Controls like DataGrid and List also allow you to rearrange their contents using drag and drop.

6. Custom itemRenderers for List controls. This application uses several itemRenderers. One is pretty complex because it shows an image (album cover), its reflection, artist name, album title, all of the tracks on the album, and a couple of buttons.

7. Dynamically loading style sheets. I’ve created 3 style sheets which you can load from the Themes dialog box (Options->Themes). By being consistent with styles and skins, and placing everything into CSS files, you can easily allow all or part of your application to change at runtime.

8. Using the PopUpManager. This application creates several pop-ups (dialog boxes) and shows you how to received events from them.

9. Custom events and event handling between components. Flex is all about events. For example, if you want to do something when a Button is clicked, you set up a listener for the Button’s click event. You can do this on the MXML tag that defines the button or in ActionScript. You can define your own events in which you can pass data, such as the fields from a form.

10. Bubbling events. Some events “bubble” which means that all of the components above it just let the event pass through until there is an event listener which intercepts it. In Atmospheres you can click the QuickPlay button on an album (in View Large Album mode). This click event is coming from a Button inside of an itemRenderers which is inside a container which is inside a TileList, etc. The click event just bubbles up to the main application where it is intercepted and passed down to the PlayList.

11. Reading & Writing Local Files. This is something unique to AIR – Flash and Flex applications cannot read and write local files. The File class handles all of the work and is easy to use.

12. Playing Sounds. Atmospheres is all about playing sound files. Check the Track class to see how this is done.

13. Using SharedObject. The SharedObject is something familiar to Flash programmers as a way to store “cookie-like” bits of information between sessions. You can use them in AIR applications, too. Here the users preferences are stored in a SharedObject.

14. Effects. This application uses a couple of effects. Just click the “View On Rhapsody” button in an Album (View Large Album mode) and you’ll see the library slide out and the HTML content browser slide in.

15. States and Transitions. States are quick ways to switch between several views. For example, if you have a login dialog box and want the user to be able to register, you can use a state to switch between Login and Register states. Transitions provide the means to apply effects to the changes between states.

16. Using HTML with an AIR application. Unique to AIR is a full-blown HTML content viewer. Click on the “View On Rhapsody” button in an Album (View Large Album mode) and the HTML content window shows the www.rhapsoday site for the album and artist.

17. RadioButtonGroups. Using RadioButtons isn’t a straightforward as a CheckBox.

Look for the string “====>” followed by a number in the comments of the source code to match with the above list. That should help you find code specific to your area of interest.

Using Atmospheres

By default, Atmospheres looks for your music in your documents directory/My Music folder and expects to see directories for each artist, and within each of those artist directories, directories for each album. This is the structures Windows Media creates when you rip a CD.

All music files must be in mp3 format. Each track file is expected to have this format:

[track number][space][title of the track].mp3

Once Atmospheres starts, you can select a new location for the Music Library from the Options->Library dialog box. Just browse to the directory containing the list of artists and pick the Select button. The music library panel will display shortly.

There are two viewing modes: Large Album and Small Album. The Large Album view uses a fairly large itemRenderer to display the Album’s cover art, the artist name, album title, and the tracks on the album. When you roll the mouse into a Large Album itemRenderer, two additional buttons appear: a small version of the Play button, called “Quick Play” and a LinkButton to information about the album on Clicking the Quick Play button will transfer all of the album’s tracks to the PlayList and begin playing the first track.

In the Small Album view the itemRenderers show a smaller version of the cover art, the artist name, and the album title. This view is nice for large music libraries.

From either view you can drag the cover art into the PlayList area and all of the tracks will be listed. Additional albums are added to the end of the list.

In Large Album view you can also drag individual tracks to the PlayList. You can drop a track between any two existing tacks or at the end of the PlayList. Double-clicking a track will also play that track.

You can arrange the tracks in the PlayList by dropping them into place from a Large Album itemRenderer. You can also drag a track from one position to another within the PlayList itself.

Buttons at the bottom of the PlayList are (from left to right):

Open Playlist: if you have saved a playlist you can load it again;
Save Playlist: you can save the current playlist to a new file.
Shuffle: the playlist is scrambled.
Trash: you can remove an item from the PlayList (not from the album nor from disk) by selecting in on the PlayList and picking this button. The item will be removed from the PlayList only.

The PlayList is controlled by the buttons above it. The large button either plays or pauses – it toggles between those modes. The smaller buttons skip to the previous track, stop playing, or skip to the next track.

The HSlider shows the progress of the music as it plays. At any time you can drag the slider to a new location and playing will be paused and then resumed where you release the slider.

Creating Your Own Styles

I included a fourth style sheet SWF (silverblue.css/.swf) which you can load using the Options->Themes->Other choice. Just go into the custom folder and pick the silverblue.swf file.

You can make your own style sheet by following the css examples. In silverblue I used Flash to make the skins. I actually prefer to do that because it keeps all of the symbols in one location and you have the creativity of Flash at your disposal. The other styles use PNG files (you can use JPG or GIF files, too).

You do need to compile your CSS into a SWF – either use Flex Builder or the mxmlc command line compiler. You cannot load raw CSS files.

One caveat: once you’ve made your SWF stylesheet, you must place it into the Atmospheres application resource directory. The location of this directory varies between Windows and the Macintosh. Style sheets are loaded under tight security controls and must remain in the application’s security domain so the choice of directory is critical.

I hope you find this application useful – if not for the whole then for the parts.

9 Responses to Atmospheres – AIR Music Player

  1. Steve says:

    Installation Error:
    This application could not be installed or launched (AIR file D:\resp\project\AIR\========\Atmospheres.air is invalid: This application requires a newer version of the Adobe Integrated Runtime (AIR) to function. Please download the latest version of the runtime from, then launch the application again.).

    but I have download the latest version AIR.
    Peter: I was afraid of that. The AIR runtime you have is not the latest version, but it may be the latest version available. What I suggest you do is download Flex 3 Beta from Adobe Labs and build the application for yourself. Then it will be compatible with the AIR that comes with Flex 3 beta.

  2. TeddybearMX says:

    get an error on :
    if( event.type == FileEvent.DIRECTORY_CHANGING ) {

    I don’t have this property DIRECTORY_CHANGING in FileEvent.
    I know we’ve been changing things internally so this may be one of the item’s that different.

  3. TeddybearMX says:

    Had to add
    import flash.filesystem.File;
    to the code/

    Also is the reflector code included ?


  4. Doug McCall says:

    Got this error after removing references to the DIRECTORY_CHANGING event:

    Cannot resolve attribute ‘fileChoose’ for component type mx.controls.FileSystemList.

    Atmospheres (AIR)/src/com/adobe/musicplayer/dialogs ThemeDialog.mxml

    line 51

    Also, the Reflector component is available from

    I must be an idiot because I cannot run this even using Flex Builder 3 and building the source successfully. I keep getting the “requires newer version of AIR” error.
    Peter: Create a new AIR application. Then look at the app.xml file that it generates. Check the version number on the root tag and make the one for the Atmospheres-app.xml that same as that one.

  5. 机票预订 says:

    I was afraid of that. The AIR runtime you have is not the latest version, but it may be the latest version available.
    I have just updated this code for Flex 3 Beta 3.

  6. l@l says:

    i have 6 errors when creating a new Flex project.
    i have flex 3 m3b2 / air_b2_win_100107

    1061: Appel à la méthode listDirectory peut-être non définie, via la référence de type static flash.filesystem:File. Atmospheres/src/com/adobe/musicplayer/objects line 72

    1061: Appel à la méthode resolve peut-être non définie, via la référence de type static flash.filesystem:File. Atmospheres/src/com/adobe/musicplayer line 85

    1061: Appel à la méthode resolve peut-être non définie, via la référence de type static flash.filesystem:File. Atmospheres/src/com/adobe/musicplayer line 86

    1061: Appel à la méthode resolve peut-être non définie, via la référence de type static flash.filesystem:File. Atmospheres/src/com/adobe/musicplayer/dialogs ThemeDialog.mxml line 124

    1061: Appel à la méthode resolve peut-être non définie, via la référence de type static flash.filesystem:File. Atmospheres/src/com/adobe/musicplayer/objects line 53

    1061: Appel à la méthode resolve peut-être non définie, via la référence de type static flash.filesystem:File. Atmospheres/src/com/adobe/musicplayer/objects line 56

    and when i try to launch “Atmospheres.air” i have this error : initialWindow/content must have a non-empty value :’-(
    Please try the new version published today for Flex 3.

  7. Pixel says:

    Having a few issues building the application myself with your files in Flex 3:

    1) Both your Source Part and Source have a \src folder, but both have different versions of Atmosphere.mxml. Which one do I use?

    2) Same goes for the com\adobe\musicplayer\objects folder. Both and have different files here. Which ones do I use?

    3) As a result of the above (I think), I’m getting an error when running the application:

    Error Message:
    1061: Call to a possibly undefined method resolve through a reference with static type flash.filesystem:File.

    Atmospheres/src/com/adobe/musicplayer/objects/Album.cs on line 72

    on line 85

    on line 86

    on line 53

    on line 56

    Thanks for your help.
    A new version of Atmospheres was published today for Flex 3 Beta 3.

  8. kkonrad says:

    can’t get this runable.

    in the I get 1061’s. the compiler can’t find methods listDirectory() & resolve() in static type flash.filesystem:File -> resource,, ThemeDialog.mxml

    I use the latest AIR and Flex release (and changed the version in the .xml).

    peter, do i get this because this is build on an older air/flex release?

    when i try to execute the .air file I get an installation error:
    initialWindow/content must have a non-empty value.
    The version of the Music Player for developed for Beta 1 – we are now at Beta 3. I will be publishing a new version today. You will either have to port what you have to Beta 3 or download the new version.