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


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


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.


We’re not waiting for Flex 4

Ely Greenfield presented some cool ideas about the future of the Flex framework during his presentation at MAX in Chicago last year. The core idea is that they’re considering drastic changes to really apply an MVC approach to the full component set, which would mean the core components themselves would be viewless controls, allowing you to easily apply custom skins and have complete control over the look of each component. I wrote up more about Ely’s session here. The future of these changes is still unknown, I think we’re all hoping that stuff becomes the Flex 4 framework whenever that gets released.

But the Flex community isn’t waiting. There are a number of people working on similar concepts outside of Adobe. A recent post by P.J. Onori triggered this blog post. I’ve noticed a few others working on very similar ideas, so I just wanted to point this out, and make a note that it’s worth keeping tabs on these guys/projects because there’s going to be some seriously cool shit that’s going to be possible.

  • P.J. Onori released a set of layout managers. These layout managers are very lightweight, are not tied the Flex framework, and in fact aren’t really even tied to the display of the components. They handle different algorithms for laying out objects, ie in a grid, in a circle, etc etc.
  • Stephen Downs (aka Tink) is working on some layout algorithms for use within a ViewStack. The basic idea is very similar, create a set of layout algorithms that determine how the children get placed, but make those algorithms independent of the actual visual component. Tink’s stuff hasn’t been released just yet, but keep an eye out for it soon.
  • Ben Stucki is working on an ambitious project he’s calling OpenFlux to create a complete framework for containers, layout algorithms, and component creation techniques. At a minimal level this will allow you to do similar stuff like P.J. Onori’s layout algorithms. But then Ben is going to be combining his stuff with 3D and we’re going to have flexible 3D containers with complex custom layouts (ie you could build CoverFlow using these base classes in a matter of minutes). Ben is calling the OpenFlux + 3D stuff PlexiGlass. In case you saw the session list for 360 Flex in Atlanta and wondered what the hell Ben’s topic meant 🙂 His session is definitely going to be one to watch at the conference.
  • Degrafa has just been released, which allows you to write complex graphics tags using MXML. A core piece of Ely’s presentation relied on the new mx:Graphics tags that are going to be in Flex 4. The Degrafa team has basically done the same thing, but you can use it now instead of waiting for the next Flex release. What this means is that if you have a set of core components without specific visual designs, you can easily create skins using Degrafa in MXML. This idea of MXML skinning and skin-less base components is crucial to what Thermo is going to allow you to do.

So we’re not quite there yet, but we’re getting close. What I’m seeing is that gradually we’re moving toward a highly-customizable, display-agnostic full component set for Flex, coupled with some advanced display options (using both 2D via Degrafa and 3D via PlexiGlass). What would that let you do? You could define a base data-driven list. Then you could choose to render that list as custom 2D graphics using Degrafa, or you could choose to render it as 3D components using PlexiGlass. The underlying component is the same base list component that has a list of data, selectedIndex, etc. But you could swap the rendering at runtime, letting you toggle between 2D and 3D views, or fluidly switch between different 3D layout algorithms, etc.

Some of the stuff I mentioned is released now, some is coming in the next few months. But keep an eye on these projects, they signal a shift in the Flex framework. I suspect that shift will officially come from within Adobe eventually with a future release of the Flex SDK, but it will come from within the community sooner. It’s gonna be fun 🙂