Spark Physics with Flex 4 Components and Box2D

By | March 22, 2010
13 Comments

A while back I created a few demos showing how to combine ActionScript physics engines (as well as 3d engines) with Halo components to create a physics-enabled UI. I wanted to see what could be done using the new Flex 4 Spark components and I was very surprised to find that almost nothing had been posted about using physics engines with Flex 4.

So I decided to put something together myself. Nothing ground-breaking here, but this demo uses the Box2D 2.0 physics engine and combines it with Spark buttons using some ideas I’ve taken from Eugene Karataev (translated) and his demo using Flex 3 called FallenUI.

This demo shows some Spark buttons that become physics-enabled once you click the ‘Start Simulation’ button. You can also drag them around and toss them into each other. I’m sure there is a better way to integrate Flex 4 and Box2D, but this is just a quick and dirty attempt to see if I could get it working with no Halo components involved. Of course, the source is also available from the context menu. Let me know what you think. 🙂

View Source

Flash Player Required to view this demo.

13 thoughts on “Spark Physics with Flex 4 Components and Box2D”

  1. David R

    Pretty neat…but I can’t imagine many practical applications. Would be hard to interact with an RIA if all the buttons and input fields keep sliding around and knocking into each other

    Reply ↓
    1. Bill Post author

      True. Moving buttons by themselves is not all that practical and I was not really trying to show that this is a good way to use buttons. The idea I was trying to convey is that combining physics engines and Flex could be useful for interactive data visualizations in which you need to quickly rearrange what you are seeing. 🙂

      Reply ↓
  3. David Havrda

    Pretty cool Bill. I could see this used to write games. You could then package them for the iphone and ipad. I think its pretty useful.

    Reply ↓
  4. Don Kerr

    Thank you Bill! This is exactly what I was looking for. There is a very practical use case for this, in my case: Multi-User Multi-touch discovery apps. I want user to be able to move various components around a shared screen, flick them around, rotate them, zoom in on them, etc. This discovery form of “navigation” on touch pads, tradeshow exhibits, etc. is very cool with Flex 4 and physics!

    I appreciate you sharing this!
    Don

    Reply ↓
  5. Don Kerr

    Hey Bill,
    I tried adding a image inside of the physics container in addition to your buttons, but the physics effects don’t work on the image, only your buttons. Is there something I need to learn about how to add different types of components so they work with the physics effects?

    Thanks,
    Don

    Reply ↓
  7. Don Kerr

    Thanks Bill. I will give this a try.

    BTW, our company started in Round Rock, but most of us live in Houston now. If you’re ever in Houston, let try to meet up. Or come to my Space City Adobe User Group sometime to present???

    Thanks,
    Don

    Reply ↓
  8. Don Kerr

    Embedding the image didn’t seem work. Does it only work with spark components?

    I just dropped this mx component inside to physics container along with your buttons as a quick test to see if it works with any component

    Thanks,
    Don

    Reply ↓
  9. Don Kerr

    s:VideoDisplay, s:CheckBox work great.

    mx:Image or s:BitmapImage don’t take on the physics effects. However, I wrapped a s:BorderContainer around s:BitmapImage, and together, they responded to the physics effect.

    BTW, embed was not required for the video and image to work. Which is cool because I need dynamic sources.

    Now I’m adding Multi-touch gestures to each component in an Air 2 app. Multi-touch plus physics is the goal. 🙂

    Thanks Bill!
    Don

    Reply ↓
  10. Don Kerr

    Bill, any ideas on how to dynamically add child elements to the physicsContainer at runtime? Instead of hardcoding the children in mxml. When I try to use AS3 physicsContainer.addElement(), they add ok visually, but do not take on the physics effects. Must be a timing issue or something.

    I’m loading image data into an ArrayCollection, then looping through it to add each image as a child element to the physicsContainer.

    Thanks,
    Don

    Reply ↓
  11. Don Kerr

    I modified the SkinnablePhysicsContainer so that it supports adding/removing components using states at runtime:

    private function contentGroup_elementAddedHandler(elementExistenceEvent:ElementExistenceEvent):void
    {
    var addedElement:IVisualElement = elementExistenceEvent.element;

    if (addedElement is SkinnableComponent)
    {
    _physicsTargets.addItemAt(addedElement,0);
    _physicsBodies.addItem(createBody(SkinnableComponent(_physicsTargets.getItemAt(0))));
    }
    }

    This creates the bodies immediately vs. using the addedToStage event handler to do it. Seems to meet my need. There may be a more elegant way, but it works. 🙂

    Thanks again for sharing Bill. It is helping me learn the physics and some about elements!

    I must say … I have a love/hate relationship with sparky. 🙂 More power will spark = more complicated than mx.

    Don

    Reply ↓
  12. Jeffrey

    If I take out the background color, the mouse events no longer work. It will still work on the button, not the blank area. Does anyone know why?

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *