April 09, 2008

Adobe Media Player

,

Adobe's just released a new product- the Adobe Media Player. This application is built upon AIR using the Flex 3 SDK. The AMP is a new type of video player.

As I write this I'm watching an episode of Star Trek: The Original Series from January 1968. It looks terrific and streams smoothly. There are a dozens of shows to choose from.

I personally think this is paving the way for the future of home entertainment. Why be at the mercy of the cable or satellite companies when the content you want to watch is available when you want to watch it. Right now you can download movies from iTunes and Amazon Unbox. NBC and FOX have the Hulu joint venture with movies and TV shows. I haven't rented a movie at a movie rental store in who-knows-how-long.

For me, the problem is making the interface to these services as easy as bringing up the guide on my TiVo and as simple to connect all the boxes together.

Here's an excerpt from the announcement:

It [AMP] provides high quality video playback of streamed, downloaded, or locally stored Internet TV shows and video podcasts. Users can subscribe to Internet television shows and other online video content, have them download automatically in the background, and later view them on demand. AMP's user interface optimizes the user experience, allowing users to easily enjoy finding and viewing their favorite shows.

AMP represents a tool that is not only important to consumers, but publishers who want to monetize advertisements.  The last couple of months we have been working very hard to get the top broadcasters signed to provide content through AMP. We have successfully signed CBS, MTV and Food Network as just a few that will be part of our launch.

Download Adobe Media Player today!

Posted by pent at 05:38 PM | Comments (1)

January 04, 2008

Using SQL with Adobe AIR

I've not been happy about the performance of my Atmospheres Music Player. I installed it on my home computer where I have a network disk that holds all my CDs - about 240 of them. When I pointed Atmospheres at the network drive, it took a long time for it to read all of the music information from the disk. I had taken steps to make the program responsive while the files were being read, but still, it took a long time. I told my teammate, Kyle Quevillon, about this and he suggested that I cache the information much like other music players do.

What he meant was that Atmospheres shouldn't read the file system, especially one on a remote disk, as its primary source of information in the music library. A light went off in my head when I realized I could use the SQL Lite database built into Adobe AIR. This was a perfect application of the database: I could have Atmospheres read the file system and store information into a local database, reading that information whenever it started. I'd only read the file system when new CDs were ripped.

If you didn't know it already, AIR comes with a genuine, lightweight, database - an implementation of SQL Lite. You can create tables, views, insert data, delete data, and run queries. The API to do this is the flash.data package. If you are interested in using the SQL capabilities of AIR, then read on.

Here's what I did:

I created a class to read the file system and build the Album objects. The Album class already existed and in fact, the code to read the file system already existed, too, in the MusicLibraryViewer class. I created a new class (FileReader) which creates the Album objects and notifies another class once an album has been read.

The other class is the Cache. One function of the Cache class is to take the information from the FileReader (ie, Albums) and store them into a database. Another function is to read the database and build a list of Albums from that information.

Atmospheres starts by getting the Cache to read the database and build the Album list. This is presented in the Atmosphere's user interface. At any time, especially the first time you run Atmospheres, you can refresh the music library. Doing this causes the FileReader to create an Album which the Cache compares to what it has read from the database. Anything new is put into the database as well as in memory.

Scanning the file system isn't lightning fast, but when you are expecting it to be slow, it moves along quickly enough and builds the local database. Reading the database is, in my opinion, astonishingly fast. I've got about 2,800 tracks from those CDs stored in the local database. It reads that data very quickly and builds the Album list in an eye-blink.

Download
You can download the code here. This is a Flex 3 Beta 3 project archive. If you do not hav Flex 3 Beta 3, find it here.

Now when Atmospheres starts on my home computer, it comes up right away, showing all 240 albums and is ready to play any of them.


Posted by pent at 06:36 PM | Comments (1)

December 13, 2007

Flex 3 Beta 3 Available

The third and final public beta releases of Flex 3 and Adobe AIR are now available for download on Adobe labs. These releases are focused on quality and performance, resolving numerous bugs from beta 2. This is your final chance to provide feedback on the release before launch, so please take this opportunity to take a final, thorough look. You can download the final beta releases of Flex 3, Flex Builder 3, and Adobe AIR on Adobe Labs at: http://labs.adobe.com/.  Please also be sure to check out BlazeDS, the newest open source Remoting and Messaging project from Adobe.


Posted by pent at 08:20 AM

August 21, 2007

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

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

Posted by pent at 05:08 PM | Comments (9)

June 15, 2007

Did you know...

... that with Adobe AIR you can easily exchange data between the desktop and AIR applications? For example, you can drag cells of a spreadsheet and drop them onto a DataGrid or drag a chart to the desktop.

If you have Flex 3 Beta, check the help documentation for the flash.desktop package and read up on the ClipboardManager, the DragManager, and more.

See Christophe Coenraet's blog for an example of dragging images and data from an AIR application to the desktop.

Posted by pent at 12:58 PM | Comments (15)

June 12, 2007

Adobe® AIR™ Music Player

This article is an update of my previous article about a music player I built using the Apollo Alpha 1 release. Now that Apollo has become AIR (Adobe Integrated Runtime) and the beta is available on Adobe Labs, I thought I should update the Music Player for the new AIR release.


Click the above image to download and install the AIR Music Player. Note that your system may interpret the .air file as a .zip. If this happens, pick "Save As" instead of "Open", rename the file to "MusicPlayer.air". Once the file has downloaded, launch it and it will install a new version of the Music Player.

Posted by pent at 06:20 PM | Comments (8)

Adobe® Flex™ 3 Public Beta and Adobe® AIR™

The first public beta release of Flex™ 3 is now available on Adobe labs. This major functional release adds rich new UI capabilities, enhanced developer productivity, desktop deployment and enterprise testing and performance profiling tools. The Flex 3 public beta also marks the first major deliverable for the open source Flex project, beginning the availability of nightly builds, a public bug base and roadmap.

Beta 1 is an early preview of the Flex 3 release. The goal of the release is to give the community an opportunity to provide feedback on the feature design and to help identify bugs and missing capabilities. Not all of the planned features have been implemented, and you should expect to find significant bugs, so be sure to save and back up your work often.

Some of the new major features include:

Get the complete details and download the beta on Adobe Labs at: http://labs.adobe.com/technologies/flex.

The Adobe Integrated Runtime - AIR™ - code named Apollo - is now available on Adobe labs. Using AIR, developers can use their web skills and tools (Flex Builder) to builld desktop applications that fit seamlessly with web applications. AIR applications can contain an integrated HTML control for displaying web pages and interact with those pages using Flex controls and events. AIR applications also have the ability to use system resources, such as the local file system.

Get complete details on Adobe Labs at: http://labs.adobe.com/technologies/air

The AIR SDK is included with the Flex 3 Beta; all you need is the AIR player.


Posted by pent at 12:28 PM | Comments (1)

April 13, 2007

Apollo Music Player Redux

After I received a comment on the previous Apollo Music Player article I decided to implement the missing feature of selecting the music library directory.

The new version, available for download here or on the previous article, has an option button on the Library panel where you can select the directory containing the music files. If you are interested in seeing how to use the Apollo File class and supporting UI components such as FileSystemList, take a look at this new source code.

Library Options Button

Library Options Dialog

Also, I should add to the to-do list "Playlist" as there is no support for them in my version. It is pretty amazing how complex something as simple as a program to play an MP3 file can get.

Download AIR installer. This requires the Apollo Alpha1 runtime. The file may download as a .zip file (for some reason I don't understand). Rename it .air before launching it. Just double-click it once you have the Apollo runtime installed.

Download Source. The source is missing the Visualization source code by Ben Stucki. If you want to use it, please download the latest copy from the Adobe Exchange. This new source code has been restructured a little and I've added comments to the code.

Posted by pent at 03:31 PM | Comments (3)

April 11, 2007

Apollo Music Player

,

If you haven't checked out Adobe Apollo on Adobe Labs yet, what are you waiting for? Apollo is a platform-independent runtime system. Apollo applications can mix Flash, HTML, and PDF content all in one application.

If you download the Apollo alpha trial you'll find some great examples. I decided to try my own hand at an Apollo application and created a music player. There is a music application on the Apollo Showcase site, but there's nothing like writing your app to get a feel for how things work.

You can rip your CDs into a special directory ({documents}/My Music) and the music player will display them in a Tree control. Select an album from the control and the track listing will be displayed in the main window. You can play, pause, and skip to any point in a song. You'll also be treated to a visualization by Ben Stucki

Downloads

13 Apr 2007. These downloads are the same as the ones in the Apollo Music Player Redux article.

Download Music Player Installer AIR file (you will need to install the Apollo Runtime System first). The uploaded file has an extension of .air but the browser may try to download this file as a .zip. Right click this link and pick Save As and give the file a .air extension. Or download an save the file with a .air extension. This way you can double-click it and the Apollo Runtime will install the application properly.

Download Music Player Source (a zip file with a Flex 2.0.1 Project). The source does not include the visualization component; please download that from Adobe Exchange or remove it from the application.

Music Directory

The music directory ({documents}/My Music, where {documents} is your local documents directory; on Windows that would be My Documents) should be structued like this:

My Music/
        artist/                (eg, Jason Mraz)
             album/          (eg,     Waiting for my Rocket to Come)
                 track         (eg,            You and I Both.mp3)

This is the typical structure created by Windows Media Player when it rips a CD to disk.

Things to Note

I built and tested this application in Flex Builder. Apollo applications are created in a familiar environment with tools you already know.

Existing Flash and Flex content integrate easily. I pulled the visualization component from the Adobe Exchange and used it right away. Any Flex components you have already created can be used as-is.

The Shuffle and Repeat buttons use small Flash 8 SWFs when toggled on. The Repeat button, for example, shows a spinning arrow.

To do

There are still a few things to do:


Posted by pent at 11:36 AM | Comments (10)