Examples from my 360|Flex session – Using Open Source Community Projects
Posted by: Doug, in 360Flex, Degrafa, Flex, Open Source, flexlibHere 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 360Flex, Degrafa, Flex, Open Source, flexlib.
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 » [...]
October 21st, 2008 at 10:35 pm
Hi Doug,
I love your site and tips! You make me look SO good to my employer! Thanks!
Now to my question: I’m trying to use your drawer example in conjunction with a traditional flex accordion control. The drawer opens/closes like it should but if I click on any of the accordion headers my drawer (really your drawer) no longer opens or closes. Any thoughts as to why?
Thanks!
Tami
October 21st, 2008 at 10:37 pm
PS. The drawer is NOT inside the accordion, it’s above it in the mxml.
February 18th, 2009 at 8:17 pm
Cool apps. I liked the window demo you made. Do you know if opening multiple windows in AIR is more memory efficient than opening mini-windows inside the main application window (like your demo)? I’m trying to keep my app (has a lot of images) as lean with as fast response-times as possible…
March 3rd, 2009 at 1:39 am
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt
March 9th, 2009 at 1:26 pm
Hi Doug ,
I have rendered a label with in WindowShadeComponent header and I want to generate an event when that label is clicked , but the problem is I have used event.stopPropogation in order to make sure that the window shade does not roll out when the label is clicked , just wanted to find out how do we handle this situation …
Will be great if you could give me some tips on this
March 16th, 2009 at 10:48 am
I am using the vertical accordion component from flexlib. It works very well except the header labels are not read by the JAWS (screen) reader. I am having trouble making it work. All the other components are recognized and read correctly. Any help is much appreciated.
Thanks.
March 16th, 2009 at 5:16 pm
[...] Physics Form [...]
July 14th, 2009 at 4:49 am
Pretty cool post. I just stumbled upon your blog and wanted to say
that I have really liked reading your blog posts. Anyway
I’ll be subscribing to your blog and I hope you post again soon!
December 9th, 2009 at 4:09 am
Hi!…….
Muito Bacana esse site com varios exemplos de Flex! Parabéns pela Iniciativa.
…\o/… I ‘m love you Flex Builder
May 3rd, 2010 at 8:20 pm
Doug,
Have you tested the physics form with Flex 4 SDK? I get errors in the physicsContainer.as. Is there an update?
Thanks,
Don
May 4th, 2010 at 6:17 am
compiler error is on this line in the setGravity function
_gravityForce = new Gravity( new Vector(xValue, yValue) );
public function setGravity(yValue:Number=0, xValue:Number=0):void {
if(_gravityForce) {
foam.removeGlobalForceGenerator(_gravityForce);
}
else {
foam.simulate();
}
_gravityForce = new Gravity( new Vector(xValue, yValue) );
foam.addGlobalForceGenerator(_gravityForce);
}
here are the errors:
1067: Implicit coercion of a value of type __AS3__.vec:Vector to an unrelated type org.generalrelativity.foam.math:Vector. PhysicsContainer.as
1137: Incorrect number of arguments. Expected no more than 0. PhysicsContainer.as
I’m using Flash Builder 4 with Flex 4 SDK w/ Air 2 SDK.
Looks like an SDK compatibility issue
Any ideas?
Thanks,
Don
May 4th, 2010 at 6:55 am
I downloaded the latest FOAM version
http://code.google.com/p/foam-as3/
and it looks like the same Vector-related errors also occurs in all their examples.
Looks like FOAM needs to be updated to support Flex 4. Maybe the “Vector” name used in FOAM conflicts with a new “Vector” class in Flex 4 or something???
Don
May 9th, 2010 at 7:12 am
Bill White has a nice Spark component physics example that works with Flash Builder 4
http://www.billdwhite.com/wordpress/?p=256#more-256
It uses Box2D, but is very similar to Doug’s physics form.
Don