Sneak Peek at content from my CFUnited Presentation this Friday

CFUnited speaker badgeThis Friday, August 14, I’ll be speaking at the CFUnited conference in Virginia. My session is titled Riding Coattails to the Top: Using Open Source Flex and ActionScript Projects (yeah, I know my session titles are getting too verbose) and will be all about using the thousands of open-source Flex projects that are out there in the community. I’ll be covering projects like Axiis, Adobe’s Open Source Media Framework, computer vision libraries, and a host of other cool projects that you should know about.

I’m preparing a handful of demo applications that I’ll be showing off as examples of integrating some of the coolest open-source work out there. The goal of each example is to show how to integrate at least two open source projects together to create a sweet application. The screenshots below are from a few of the apps that I’ve been working on, just to give a little taste. If you’re going to be attending CFUnited be sure to stop by my session on Friday at 1:30.



If you’re going to be at CFUnited be sure to flag me down and say hi or find me at the bar on Friday night!


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

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


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.


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.


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