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. :)
by David R
22 Mar 2010 at 20:10
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
by Bill
23 Mar 2010 at 06:16
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. :)
by theRemix
23 Mar 2010 at 23:32
hey bill, nice demo.
great way to show how you can use the new flex 4 framework with Box2d.
by David Havrda
08 Apr 2010 at 15:24
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.
by Don Kerr
05 May 2010 at 21:56
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
by Don Kerr
06 May 2010 at 08:55
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
by Bill
07 May 2010 at 06:33
@Don
I believe it could be that your images are not embedded in the SWF file. Take a look at this link for how to embed an image in an mxml Image tag:
http://livedocs.adobe.com/flex/3/html/help.html?content=embed_3.html
and this one for actionscript:
http://livedocs.adobe.com/flex/3/html/help.html?content=embed_1.html
Hope that helps.
:)
by Don Kerr
09 May 2010 at 10:06
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
by Don Kerr
13 May 2010 at 10:00
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
by Don Kerr
13 May 2010 at 10:50
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
by Don Kerr
31 May 2010 at 23:09
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
by Don Kerr
06 Jun 2010 at 23:41
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