Flex/Flash/Actionscript

Introducing MuxMaster – a kickass open-source Muxtape player/downloader built with Flex and AIR

MuxMaster is an open-source desktop player to browse, play, and download Muxtape mixes. It is an AIR application that lets you stream music from Muxtape, explore different mixes to find new music, and even download tracks and entire playlists to your computer with a single click.

UPDATE: After being contacted by the creator of Muxtape I have decided that it is in the best interest of the Muxtape service to remove the download functionality from MuxMaster. I was torn about this, but for now the downloading features are removed.

This movie requires Flash Player 9.

If the above install link doesn’t work, do this:

  1. Make sure you have the AIR runtime, if you need to download it from Adobe
  2. Download and run the MuxMaster installer

Here are a few screenshots:
screenshot025.jpg

screenshot026.jpg

screenshot028.jpg

Why did I make this?
I like Muxtape. Like a lot of software/web guys, I saw the clean interface and the barren source code and was immediately impressed. I mean, the dude did a fantastic job. It was just so damn clean.

Then a few days ago people went ga-ga over this video of some dude showing muxtape mixes using the Coverflow visualization to browse through them. OK, so that’s cool, except it uses a Mac-only application called Fluid to basically add normal Mac desktop functionality to web apps. That shit got dugg like 750 times. Now I’m not saying it’s not cool, cause it is. But I figured I could probably whip up a Flex application pretty quickly using the Coverflow component I released before and get a real desktop application that anyone could download and use. Oh, and I thought it would be neat to add downloading functionality too.

So I threw MuxMaster together over the past 3 nights. I like to think of it as a testament to the badassness of Flex and the open-source Flex/Flash community. The fact that I can grab some open source stuff and throw this together in almost no time is pretty cool.

What kind of an application is this?
MuxMaster is an Adobe AIR application, built with Flex. That means it’s a desktop application that can run on Windows, Mac, Linux, whatever. Click the “Install Now” link above to install the app. You might need to go and download the AIR runtime first. Hopefully it’ll tell you that and do everything automagically.

The Muxtape API
Muxtape has no API. But the HTML code is so sleek and beautifully clean. Go look at the source code for the HTML pages on muxtape.com. It’s ridiculous how sparse it is. And of course it validates as valid XML. So what? Well, nice XHTML like that is just as good as the best XML API you can ask for. You want to get a listing of some random Muxtapes? Just load up the XHTML on the Muxtape home page and parse out the list of users. Using E4X you can get a list of users with this single expression: body.div.div.ul.li.a. It’s almost too easy. So then when you get a username you just load that user’s HTML page and you can easily parse the list of songs (body.div.ul.li) or related users (body.div.div.div.ul.li.a). There’s a little trickery involved to figure out exactly how to construct the URLs for the MP3s, but it’s pretty easy to figure out. After a little parsing you can get a list of MP3 URLs and the data about each song, like artist, track title, duration, etc.

Downloading songs

UPDATE: After being contacted by the creator of Muxtape I have decided that it is in the best interest of the Muxtape service to remove the download functionality from MuxMaster. I was torn about this, but for now the downloading features are removed.

The thing about Muxtape is that all the songs are just MP3s stored on Amazon S3. If you know the URL you can download the file. The main Muxtape player doesn’t expose this functionality, but if you take a look at the files that the web-based player is loading you can just copy/paste the URL and load it into a web browser to save the file. So I just made that a bit easier. MuxMaster has a Download link for each song underneath the song name. One click and the song will download in the background (you can specify where you want songs to download to). Additionally, each playlist also has a Download All link, so with a single click you can download all the songs in the playlist.

screenshot032.jpg

screenshot027.jpg

Is this bad?
There’s a whole ethical dilemma that we can spend forever discussing. Is this application against everything that Muxtape stands for (clean, simple, bare-bones UI)? Is adding download functionality quickening the shutdown of the service? Is this effectively taking a step toward destroying the service that I actually really enjoy using? Yeah, the answer to all those might be yes.

Yes, the excessive use of 3D and especially the over-used Coverflow visualization are exactly opposite to the perfectly clean design concept of Muxtape. The truth is, I hate Coverflow. But people gravitate toward it and seem to love it, so I figured it’d be fun to whip something up and see the response. And it was just so damn easy.

And yes, being able to download an entire mix with a single click may very well be a horrible thing for Muxtape as a whole. I assume the service is already on the radar of the lawyer-crazy music execs, and if it’s not now I assume it will be if it gets big enough. But the technology underneath the service was just so simple (I mean, really? just let people throw a bunch of MP3s up on Amazon S3?) that someone would have shown how to download all those songs soon enough. So I’ll definitely feel bad if this app has a negative effect on Muxtape, but come on, it’s something I whipped up in a few days, someone was bound to do it.

Source code
I’m releasing all the source code for the application. When you install the AIR application you can right click and select “View source” to see all the code. Or you can view the source here. It’s small (16 files, 898 total lines of code). And the code was influenced by the minimalist design of the Muxtap app itself, so I tried to keep things extremely tidy and clean.

I used a few open-source flex libraries. The most obvious one is the Coverflow Flex component that I created and released on my blog. That’s licensed under the MIT license, so you can take that component and add this type of Coverflow visualization to your Flex apps. The Coverflow visualization uses the Papervision 3D library, which is a 3D engine for Flash. It’s badass and free (MIT license). The other Flex library I used is FlexLib, which was used for the FlowBox container. That component can be seen when you download songs. It’s the container that lays out the little download rectangles. FlexLib is also licensed under the MIT license (is there a pattern forming?).

The source code for MuxMaster, like all code released on my blog, is also licensed under the MIT license, which you can read here. Basically you can do whatever you want with the code.

What’s next?
I don’t know if I’m going to do anything more with this application. The app does rely on the format of the HTML pages on Muxtape, so if the creator of Muxtape decides to try to break MuxMaster he probably can, and I’d have to update it to get it to work again. I might do updates like that to keep it working. If people have feature request I’d love to hear them, but I’d encourage other developers to take my source code and add the stuff that they want. If you have feedback shoot me a message using my contact form or leave comments here. I don’t have any big plans, this was fun to make.

Legal nonsense
This application doesn’t contain any music files whatsoever. I am not storing any music files on my server or any server that I am associated with. I am not providing a list of any music files stored anywhere on the Internet. I don’t have any information about how to find music files stored in any database or anywhere in the entire galaxy. If you’re a lawyer looking to scratch that soul-destroying litigious itch that you have, I’m the wrong guy to talk to.

Standard
Flex/Flash/Actionscript

Examples from my 360|Flex session – Using Open Source Community Projects

Here are all the examples I showed today in my session at 360|Flex. The demos are the Physics Form, VistaFlow 3D, WindowShade + Degrafa, MP3 Thumbnail CoverFlow, and FlexSpy Event Listeners. All examples have the full source code available and I’ve tried to write up brief descriptions about each one. I’ve also posted a PDF of my slides. View the slides here.

Physics Form
I mashed together the most generic, boring, crappy Flex form example app with a physics engine. The end result is an example that shows how you can add in physics simulations into “normal” applications (as opposed to only games or whatever). In the example below, click on the Login button to watch what happens (hint: after you click login try dragging around the controls). Oh, and I threw in the PromptingTextInput component from FlexLib to meet my requirement of using at least two open source projects in each example.

This movie requires Flash Player 9.

Open source stuff used:

View the example | View Source

VistaFlow
This example uses the FlexMDI library (now part of FlexLib!) to manage multiple open windows and switch focus between them. I combined that with a slightly modified version of my CoverFlow component that I posted before, and I made an effect similar to Vista’s Flip 3D. When you launch the example try adding a few windows with the “Add Window” button and then press Shift-Enter to cycle through the windows (ie hold Shift and then keep pressing Enter to move through the list of windows).

screenshot006.jpg

Open source stuff used:

  • FlexMDI (now in FlexLib)
  • Extended Flex CoverFlow component

View the example | View Source

WindowShade + Degrafa example
In this example I used the newly added WindowShade component in FlexLib, combined with the CanvasButton control (also from FlexLib), combined with Degrafa for some custom graphics drawing and CSS skinning. It’s a simple example of creating a “drawer” type of component that docks to the top of the screen and drops down when the user clicks the handle.

screenshot007.jpg

Open source stuff used:

View the example | View Source

MP3Flow AIR app
This demo is an AIR application that lets you drag and drop MP3 files onto it and it will extract the thumbnail image from the MP3 file and use that image in a CoverFlow UI. To extract the thumbnail I’m using Metaphile, which is a project created by Ben Stucki for reading and writing metdata from files. This app also uses another of Ben Stucki’s components, which does the audio visualization stuff.

screenshot008.jpg

Open source stuff used:

NOTE: I used the last AIR/Flex 3 Beta for this example. I have not updated it to AIR 1.0. If you have the new AIR 1.0 runtime I assume this app will not install. I’ll try to update this example within a few days, but for now it will probably only work if you have not upgraded the AIR runtime on your machine.

Download the AIR installer | View Source

FlexSpy with Event Listeners
I decided to show this example even though I had already released the code on my blog. I realized that this example was perfect for showing the benefit of keeping a running list of open source projects in your head. I remember seeing FlexSpy when it first came out, I read about it on a few blogs and briefly checked it out by playing with the example. But I didn’t ever download the code or use it in my app. And then last week when I was monkey patching FlexSprite to add extra event listener functionality and I realized that this was a perfect place to use FlexSpy. I couldn’t remember the exact name (I thought it was something like Flexray), but I googled around, determined to find the project that I knew existed. Pretty quickly I found it, pulled it down, started reading the source and hacked in the functionality I wanted.

After doing that I realized that this is exactly what I was going to be talking about in my 360 session. Since I had been reading Flex blogs when FlexSpy was released I at least knew it existed. Since I love open source projects I had initially checked it out and understood what it did. Then later, in a completely unrelated project, something clicked in my mind and from some far corner I pulled up that memory of the FlexSpy project.

Open source stuff used:

View the example | View Source

Standard
Flex/Flash/Actionscript

360Flex Open Source Panel tomorrow at 10am, my open source talk at 2:30pm

screenshot004.jpg
Degrafa
screenshot005.jpg

So tomorrow at 360Flex at 10 am we’re getting together a bunch of open source Flex developers to talk about a few key open source projects, what it’s like to start an open source project, and whatever other random stuff people want to talk about. The truth is, I don’t know what will end up being covered, it’s sort of an open panel discussion thing. The basic idea went something like this: since we’ve got a bunch of guys involved with various open source projects all at the same conference, why not shove em all in the same room and see what happens? So Adam Flater’s going to talk about Merapi, some dudes from the Degrafa team (Juan, Andy, Pavan?) are going to talk about Degrafa, Ben Stucki’s going to talk about OpenFlux, I’ll probably say something about FlexLib, and Ben Clinkinbeard will talk about flexmdi. This is going to be pretty informal, I don’t think we’re going to have slides (unless someone is going to be a dork and over-prepare). So we’ll just hang out and talk open source and Flex. And if you’re working on an open source project be sure to come by and tell us all about it.

When: Tuesday @ 10 am
Where: Maple Room A (Hands-on room)

My talk at 2:30 – Using Open Source Community Projects
I’m also giving my presentation at 360|Flex tomorrow at 2:30pm. My session has a similar theme, but will be entirely different content. I’ll be talking about a wide range of open source projects out there that you can use (physics, 3D, graphics, audio, etc etc). The official sub-title of my presentation is “How to be lazy and make cool shit.” I’m showing a bunch of cool examples (well at least I think they’re cool…) of mashing up various open source projects to make impressive looking stuff without much work. I won’t be digging into Degrafa, OpenFlux, or Merapi, since those will be covered in the panel discussion in the morning and other individual sessions later in the conference.

Oh, and I’ll have an extra hand-bedazzled 360|Flex shirt (like the one Matt Chotin wore at today’s keynote) to give out at my session, so if that doesn’t make you want to come to my session I don’t know what will. Come to my session, it’ll be fun.

When: Tuesday @ 2:30
Where: Pine Room (Custom Components room)

This conference rocks hard
360FlexThis is probably the most fun I have ever had at a conference. Seriously. This community just frickin’ rocks so much, it’s like hanging out with good friends for a few days. Juan Sanchez and I filled in for Jesse Warden today (get well Jesse!) and had a really fun session about building your personal brand. We got a sweet discussion going and people had awesome stuff to talk about in terms of marketing yourself and getting famous. I had a blast and I hope the people in the session enjoyed it.

Standard
Flex/Flash/Actionscript

WindowShade component added to FlexLib

A new Flex container has been added to FlexLib, called the WindowShade. This container shows a header button above or below the content of the container. Clicking the header button opens or closes the panel. This lets you easily create expandable panels in your Flex applications. A single WindowShade container can be used on its own, or you can place a few of them in a VBox to make something similar to an Accordion, except you can have multiple children open at once (similar to Peter Ent’s stack components).

The component was contributed by Dave Glasser, of iDashboards. I initially went back and forth with Dave about the component. At first I thought this was really trying to be an accordion component with multiple open children, in which case I figured if we were going to do that component we should do it right (maybe extend Accordion). But I’ve since been won over to the usefulness of a single WindowShade container, and in my latest project I even used it – 3 times 🙂 So I worked with Dave and we reworked the component a bit, and now I think it’s pretty nifty.

Here’s an example that uses LinkButtons for the headers. You can use any Button control (ie Button, LinkButton, CanvasButton).

This movie requires Flash Player 9.

As a side note, I also contributed a fix from Troy Gilbert that lets you use a CanvasButton in a Repeater. Thanks Troy!

Standard
Flex/Flash/Actionscript

Mint.com uses FlexLib components

James Ward already had a little writeup about Mint.com using Flex for some of their spending habit charting stuff, but what’s even cooler to me is that they’re using a few FlexLib components on the site. I got an email from Jason Putorti, a Flex dev with Mint, letting me know that he’s using the DraggableSlider component, and I took a look and also saw that they’re using the ScrollableArrowMenu. Here’s a screenshot of both the components in use:

firefoxscreensnapz014.png

The menu showing the list of cities there is the ScrollableArrowMenu and above that there’s the DraggableSlider that lets you select the date range you’re using for the chart. Sweet!

Standard
Flex/Flash/Actionscript

More FlexLib bugfixes and updates

Yesterday I made some updates to FlexLib, mostly to sort out some bugs, a few of which I inadvertently created with the previous release. Here’s the list of issues addressed:

  • Issue 71: Drop-down tab-list fails to activate when using states with constant names
  • Issue 72: SuperTabNavigator -Close Tab-
  • Issue 76: Make TabReorderEvent Cancelable/Hookable in SuperTabNavigator
  • Issue 77: Tabbar title change does not resize Tabbar
  • Issue 78: getChildren in ButtonScrollingCanvas

The first four issues are fixes for SuperTabNavigator issues. #71 and #72 were new bugs I introduced with the .2.2 release without realizing it. My bad. This is what happens when the FlexLib QA team consists of me after about 5 beers. #76 is an added feature for the SuperTabNavigator. #77 is a bug fix for a SuperTabBar bug, and #78 is a fix for ButtonScrollingCanvas for what I guess has been a bug since that component was added.

I also managed to put a up a version .2.3 briefly that had an even better bug with ButtonScrollingCanvas that rendered that component and the SuperTabNavigator inoperable. Woopsies again. 🙂 I updated the release and the current version (.2.3.1) should have things all sorted out. There were around 250 downloads of the .2.2 release (jesus you people move fast), so if you downloaded that one, make sure to get the latest and update, that .2.3 release is whack.

There’s also a new component dropped into FlexLib, but I’ll blog about that one tomorrow since I haven’t done the writeups for the component description on the wiki pages yet. But it’s in there.

w00t. Keep reporting bugs.

Standard
Flex/Flash/Actionscript

FlexLib bugfixes for the New Year

As part of my non-existent New Year’s resolutions, I’ve gone through and made a series of bugfixes to FlexLib and released an updated version .2.2. You can download the distribution zip file here or checkout the project from SVN.

What was fixed
Here are the list of issues that I fixed. If you find out that something I think I fixed is still broken then let me know.

Component Issue
SuperTabNavigator Add ItemCloseEvent to SuperTabNavigator
FlowBox FlowLayout does not respect includeInLayout Usability
ScrollableMenu ScrollableMenu should be more extensible
ScrollableMenu ScrollableMenu bugs: icons and variableRowHeight
HAccordion HAccordion icon rotation issue
ScrollableArrowMenu ScrollableArrowMenu RTE TypeError 322
SuperTabNavigator SuperTabNavigator PopupMenu doesn’t support localization
SuperTabNavigator SuperTabNavigator truncates labels with … Unnecessarily
Base64Image Base64Image throwing error when using url as source
FlowBox Vertical size of FlowBox is measured for vertical layout instead of the flow layout used
DragScrollingCanvas DragScrollingCanvas array of children to allow scrolling/mouse interaction
EnhancedButtonSkin Add EnhancedButtonSkin support for downSkin and selectedDownSkin
SuperTabNavigator SuperTabNavigator unneccesarrily places tabbar at 0,0
CanvasButton CanvasButton not working with Flex 3 beta 3

How you can help

  1. There are still open issues that have not been fixed. If you take a look at the list and know how to fix something listed there, submit a patch by emailing it to the FlexLib discussion group and we’ll add it in.
  2. Report more bugs using the issue tracking system. It’s MUCH easier to keep track of bugs people have found if they log them in the issue tracking system. I tried to go back over emails to the flexlib discussion group where people reported bugs, and I got some of them, but I likely missed some there. If you previously emailed the list (or me directly) with bug reports but did not log it in the issue tracking system then it might have gotten lost. If it’s logged in the system then even if it takes me a while to get to it, at least I have all the issues in one nice list to review. I also fixed a few small bugs that were emailed to the list without filing them as issues, and now I forget what they were, so if you sent me an email with a bug you might want to check the latest release to make sure it’s still an issue (and then file a report).
  3. There are two issues I can’t reproduce or need more clarification on. Check out these two reports and see if you can reproduce either one. If so, write up a more detailed description of the problem and maybe I can figure it out.

Thank you
Thanks to everyone who has reported bugs, keep it up. Special thanks go to Hob Spillane, Kevin Fauth and Andrew Westberg, who all submitted patches to fix a few of these issues (if I forgot anyone who submitted accepted patches I apologize, you can send me an email to bitch at me if you want).

What’s Next for FlexLib
So near the end of last year FlexLib was fairly stagnant, there were no updates since September sometime. We’re all super busy, and I simply didn’t have the time to devote to bugfixes, etc. I’m hoping to stay on top of my shit a bit more this year (which I estimate will last for a solid few weeks). We’ve got to figure out the best way to allow new contributions without compromising the quality of the components. I’m aware that there have been submissions that have taken a long time to get in, or are still sitting in moderation limbo. I don’t have a good answer as to the best way to open up a bit more while keeping quality high enough, if anyone who is wiser than I am has suggestions on ways to run open source projects like this then feel free to contact me with your advice.

I also know that the Scheduling Framework in FlexLib is a big area of concern for a lot of people. There are 7 bug reports in the issue tracking system related to the Scheduling Framework. Unfortunately I’ve never used the Scheduling Framework and so have a) no insight into the code and b) no motivation for fixing code I’ve never used. The original creators of the Scheduling Framework are busy as hell like all of us. I think some ideal scenario is that some badass coder comes along who has extensive experience with the Scheduling Framework and wants to be the champion and take care of the code. If that’s you, then shoot me an email and let me know.

FlexLib and Flex 3
One of the bug reports had to do with Flex 3 compatibility. The latest release will compile with the Flex 3 SDK. I have tested many of the components and for the most part things seem to work fine (I had to make a few minor tweaks here and there). That said, some of the FlexLib components have some copy/pasted code from the Flex 2 SDK, and I have not upgraded these to the Flex 3 versions (they still work, but do not benefit from potential bugfixes in the Flex 3 SDK). For the most part I think you can use FlexLib in Flex 3 projects without any problems. But I don’t want to require the Flex 3 SDK just yet, especially since Flex 3 is still in beta. Sometime after the official release of Flex 3 we’ll figure out the best way to move forward. New components that require Flex 3 will likely be created. At some point we may have to freeze the Flex 2 version and continue moving forward and require Flex 3. But for now you can use the current version with Flex 2 or 3.

Standard
Flex/Flash/Actionscript

Nifty Flex Accordion Menu (like on Apple.com)

This is an example of using a slightly modified Flex Accordion to create a sweet looking menu. Someone on flexcoders asked how to make a menu like the one found here on Apple’s website.

Here’s the example I came up with to do this:

This movie requires Flash Player 9.

The Accordion
This is a Flex Accordion component (well, sort of…). It’s actually a slightly modified Accordion. The cool part is that FlexLib already had a modified Accordion component because I had made the Horizontal Accordion. Because of that there has been a VAccordion in FlexLib as well, which up until now has been exactly the same as the normal Accordion component in the framework.

So I added a new property to both VAccordion and HAccordion called headerLocation, which allows you to specify where the header should appear relative to the content. For VAccordion this property can be either “above” or “below”. Using above means it works just like the normal Accordion. But now you can also specify below, which will render the header below the content, which was the first requirement for this example.

The header renderer
The next problem was that the header of the Accordion needs to be more complex than a normal button. It needs to show two text fields, one for the title of the header and one for the descriptive text. And the description needs to wrap on multiple lines. So as I blogged about previously, I used the CanvasButtonAccordionHeader in FlexLib to easily use a complex header on an Accordion.

The header skin
Next we have the problem of the skin for the button. The skin isn’t too complex, but there are a few things that are hard to do with the standard Button skin. We want rounded corners on the bottom of the button but not the top. And we want nice control over the gradient of the button. What to do? FlexLib has an EnhancedButtonSkin that lets us do all this (and a lot more). Problem solved.

The mouse interaction
The menu we’re trying to emulate responds to mouse over events, not clicks like the normal Accordion does. This is easy enough to fix by simply faking a MouseEvent.CLICK event any time we get a MouseEvent.MOUSE_OVER event. By making our headers dispatch these fake click events we trick the Accordion into opening the child when the mouse rolls over each header.

And there you have it.

View the example in its own window (view-source enabled)
View the source of the example

In the source I’ve bundled a version of flexlib.swc that includes the new headerLocation property for the Accordion components. This is because I haven’t yet released an updated distribution zip on the FlexLib project page that includes this update (but I did commit the changes to SVN if you’re using that).

Standard
Flex/Flash/Actionscript

Using complex headers with the Flex Accordion

Here’s an example of how to use complex UI components for the header renderers of a Flex Accordion component. Normally the Accordion only allows you to specify a Button as the header renderer, and any customization still requires you to subclass Button, so it’s hard to get full control over the headers. The CanvasButton component in FlexLib is an extension of Button that acts like Canvas, which means that it subclasses Button but allows you to easily add children via MXML.

I’ve created a special extension of CanvasButton that is specifically for use as a header renderer in an Accordion. The new CanvasButtonAccordionHeader (nice name huh?) is now in the FlexLib SVN repository. Note that this is in the FlexLib SVN repository but is not in the zip distribution on the main FlexLib page yet, once we get a few more updates I’ll update the .zip distribution. For now you’ll have to get the source from the repository.

The example below shows using a header renderer for the Accordion that display a ComboBox and a CheckBox in the header. The point here is that since you’re effectively using a Canvas as the header, you can easily add whatever UI components to the headers that you want.

Browse the MXML source of this example.

This movie requires Flash Player 9.

Standard
Flex/Flash/Actionscript

FlexLib updates: new IconLoader component, bugfixes

A new component has been added to FlexLib: IconLoader from Tobias Patton, which allows you to load .icns (Mac OSX) or .ico (Windows) icons into your Flex projects.

New component: IconLoader
The IconLoader component converts a Macintosh OS X (.icns) or Windows XP (.ico) icon file, along with its alpha mask, to a Flex 2 UIComponent.

Documentation | Example | Contributor: Tobias Patton

New component: PromptingTextArea
This is exactly like the existing PromptingTextInput in FlexLib (is that perhaps the most-used component in flexlib?). Same thing, extends TextArea and allows you to specify a prompt to be displayed when the text area is empty.

The changelog for FlexLib .2 release:

  • Added PromptingTextArea
  • Added IconLoader
  • Added case-insensitive option for Highlighter
  • fixes for issues 35, 45, 47, 50

Keep reporting bugs! I do monitor the bug list and make fixes.

Also of note is that this is the first “corporate” contribution (outside of Adobe). Tobias Patton developed the IconLoader while working for EffectiveUI. We encourage companies to contribute components to FlexLib. You’ve got to release them under the MIT license, but we give you credit on the contributors page 🙂

Standard