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



Related:

  • The first half of my interview for the Flex Show is up online. Listen to me blabber. We go over 360Flex, FlexLib, a bunch of open source Flex libraries, and I talk about my thoughts on Flex component development. We had some technical issues (all my fault). My mic wasn't…
    Tags: flex, source, open, flexlib, component
  • 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…
    Tags: open, source, flex, degrafa, stuff, flexlib
  • 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…
    Tags: flexlib, example, source, component, flex
Standard

33 thoughts on “Examples from my 360|Flex session – Using Open Source Community Projects

  1. Mark Doberenz says:

    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!!

  2. Pingback: MyoT » Blog Archive » 360Flex Atlanta: Links to Presenters’ Sessions

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

  4. Pingback: Martin Arvisais, As-Is - Développeur et Formateur Adobe Flash - Flex - FMS - Actionscript 3.0 - Apollo - Web - Internet » Blog Archive » Il n’y a pas que Adobe Flex 3 et Adobe Air 1.0 …

  5. Gustavo says:

    Great! And if you move pretty fast, you can even take the login button, and the other components outside the Panel! hehe

  6. Pingback: dougmccune.com » Blog Archive » My 360|Flex Writeup

  7. Pingback: jun :: realeyes media » Blog Archive » 360 Flex Milan, 360 Flex Atlanta, and My Presentation

  8. Pingback: 360Flex: A Developer’s Conference « Emergent Truths

  9. Pingback: Dreamer's Blog

  10. Pingback: Moving Flex Project from Perforce to SVN at Ben Throop

  11. Pingback: cubicleman.com » 360|Flex Atlanta rawked the house

  12. Pingback: Sweet example of WindowShade + Degrafa « Ramblings

  13. Axel says:

    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!

  14. Pingback: my so-called blog » links for 2008-05-25

  15. digitalDiva says:

    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

  16. msmooshoo says:

    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…

  17. sandeep says:

    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

  18. Ranga says:

    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.

  19. Pingback: 110+ Awesome Resources for Popular Adobe Products | Spoonfed Design

  20. 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!

  21. Simão Neto says:

    Hi!…….

    Muito Bacana esse site com varios exemplos de Flex! Parabéns pela Iniciativa.

    …\o/… I ‘m love you Flex Builder

  22. Doug,
    Have you tested the physics form with Flex 4 SDK? I get errors in the physicsContainer.as. Is there an update?

    Thanks,
    Don

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

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

Comments are closed.