Examples from my 360|Flex session - Using Open Source Community Projects
Posted by: Doug, in Flex, flexlib, 360Flex, Degrafa, Open SourceHere 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.
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).
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
This entry was posted
on Tuesday, February 26th, 2008 at 12:51 pm and is filed under Flex, flexlib, 360Flex, Degrafa, Open Source.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Entries (RSS)
February 26th, 2008 at 1:20 pm
Doug, your presentation was fantastic! A real highlight of the conference, and the slides are a great guide to navigating the best of Flex open source. Thanks for your contributions.
BTW, here’s the answer you were looking for:
http://en.wikipedia.org/wiki/Profanity_in_ASL
February 26th, 2008 at 3:00 pm
Doug, you’re really an inspiration. Congratulations, extremely good work. Thanks so much.
February 26th, 2008 at 5:11 pm
Wow! thanks
February 27th, 2008 at 4:57 am
Totally awesome presentation. I don’t want to know how quickly you pulled those examples together, but I’m sure is was WAY faster than I could have done.
BTW, the sign language thing was freakin’ halarious!!
February 27th, 2008 at 10:49 am
[…] Using Open Source Community Projects by Doug McCune http://dougmccune.com/blog/2008/02/26/examples-from-my-360flex-session-using-open-source-community-projects/ […]
February 27th, 2008 at 4:55 pm
Nice Examples + Good use of effects. I definitely didn’t expect the first form to fall apart. Enjoy 360 Flex! I wish I could’ve been there this year.
February 28th, 2008 at 5:08 am
Just caught the tail end of your presentation due to a schedule conflict, but cool shit as always. Nice to see you again, and thanks for the advice with the Flex Scheduling Book touchscreen thingy.
February 28th, 2008 at 8:25 am
[…] Using Open Source Community Projects by Doug McCune ici […]
February 28th, 2008 at 8:50 am
Thanks Doug, I really enjoyed this presentation. It was really an eye-opener for someone just getting into flex. Keep it up!
February 28th, 2008 at 9:09 am
Great! And if you move pretty fast, you can even take the login button, and the other components outside the Panel! hehe
March 1st, 2008 at 1:28 pm
[…] Contact « Examples from my 360|Flex session - Using Open Source Community Projects 01 03 2008 […]
March 4th, 2008 at 10:18 am
[…] Also yesterday I saw Doug Mccune give his overview of what’s out there in Flex open source. It was very informative filled with awesome information on projects I’ve never heard of and with plenty of cool shits. Pardon the translation. (His cool shits can be found here) […]
March 5th, 2008 at 6:52 am
[…] Doug McCune’s presentation was a testament to being creative. He took a very boring login screen and coupled it with an actionscript physic engine. Click on “login” and the controls all shake and fall in true ragdoll style. Watching the controls slide and be thrown around was quite humorous. Practical? Not so much. Does it solve the single sign on debate? No. However, his point (as I understood) was to show how developers can take two very diverse open libraries and build something ingenious. In order for the Flex community to thrive, developers need to contribute to the open initiatives. […]
March 5th, 2008 at 5:53 pm
360|Flex 中的一些示例…
从Doug Mccune 的 Blog 上看到了他在 360|Flex 上演示的一些示例，这些示例都用了Flex的一些开源库，效果很不错。
查看原文
幻灯片下载
……
March 6th, 2008 at 11:49 am
[…] So all that said, there were two things that really got me to switch as a Flex developer, and both of them were spurned on by a talk that Doug McCune gave at 360|Flex. The first is Subclipse, which is a great Subversion plugin for Flex Builder. This thing is so easy to use and the integration is awesome. I tried using the Perforce plugin for Eclipse a few months ago and came away with enough hitches in it that I just went back to P4Win. […]
March 16th, 2008 at 12:52 pm
[…] I’m a little late in doing this, but what the hey! Well its over and back to work, eh? Time to put all that great knowledge to use and create some UX baby! 360|Flex Atlanta was awesome. Kudos go to John Wilker and Tom Ortega for pulling off such a sweet event. Some awesome speakers were present and it was truly a developers conference. Some highlights of sessions I attended were Jun Heider’s talk on Memory Management, Ben Clickinbeard’s talk on Reusable components, and Ben Stucki’s far out You got to wear funny looking 3D glasses talk. Oh, and who could miss the bedazzling man o’ the hour Doug McCune talking on Open Source Flex stuffs as well as some language antics. […]
March 24th, 2008 at 7:52 pm
Where i download
xmlns:controls=”com.benstucki.controls.*”
I need to re-create for flex a project
http://dougmccune.com/360Flex_ATL/MP3Flow_srcview/index.html
April 1st, 2008 at 5:18 pm
[…] Doug McCune » Blog Archive » Examples from my 360|Flex session - Using Open Source Community Projects 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. […]
April 5th, 2008 at 6:38 am
Hey Doug! I am new around and you have some outstanding and very useful components (not like you didnt know that lol).
I am hooked on the WindowShade + Degrafa example. I have been looking for a drawer-like component for some time now and yours would be perfect! However, I was looking for one that would go horizontally (opening to the left or to the right). Do youknow if there is anything like that out there already? Or is there a way to make it open horizontally?
Thanks!
May 24th, 2008 at 6:31 pm
[…] Doug McCune » Blog Archive » Examples from my 360|Flex session - Using Open Source Community Projects 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 (tags: flex OpenSource projects Actionscript) similar nonsense in: ill.icio.us | No Comments » […]
June 22nd, 2008 at 11:36 pm
Examples from my 360|Flex session