Helping customers be successful with Adobe Flex and LiveCycle Mosaic

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

Atmospheres with Adobe Red Style

Download

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.

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 labs.adobe.com 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.

Highlights

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 Rhapsody.com. 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.