Tony Lukasavage

Caffeine. Whiskey. Code. Mostly the last one.

Flash Builder 4: addElement() instead of addChild()

Here’s a quick tip for those of you who are also switching to Flex 4.x/Flash Builder 4 from Flex 3.x/Flex Builder 3.  In the past when you wanted to add a Flash DisplayObject to the main Application canvas you’d wrap the DisplayObject in a UIComponent, then add the UIComponent to the Application as a child, like this:

var sprite:Sprite = new Sprite();
var ui:UIComponent = new UIComponent();
ui.addChild(sprite);
this.addChild(ui);

Try that in Flash Builder 4 and you’ll encounter a fun error that looks like this:

Error: addChild() is not available in this class. Instead, use
addElement() or modify the skin, if you have one.

To resolve it, simply change the last line of the previous code to use addElement() instead (change in red):

var sprite:Sprite = new Sprite();
var ui:UIComponent = new UIComponent();
ui.addChild(sprite);
this.addElement(ui);

Away3dLite: Face linking, take 2

It was great.  I had a moment of triumph.  In my meager 3D and Away3D experience I managed to get face linking functionality into Away3DLite.  Proud of myself, I posted my success at the Away3D Dev list.  But my party was soon rained on by one of the Away3D developers, Peter Kapelyan, who immediately informed that my linked objects weren’t aligning as they should be.  It felt a lot like that scene in National Lampoon’s Christmas Vacation where Clark finally gets the lights lit on his house, only to have his father-in-law inform him that the little lights weren’t twinkling…

I know Peter, thanks for noticing.

To that end, the above demo is the next revision of my prior face linking code.  This time, I got alignment working.  Because I am 3D math deficient (I’m working on it) I was unable to implement the alignment properly without using a container object for the source and the linked objects.  Someone a little more math savvy can surely make use of the upAxis parameter of the lookAt() function to make it work, but I need some studying before I can do it on my own.  Shawn McInerney from the dev list offered up a potential solution, but it’s a little over my head now.  Perhaps someone else perusing this blog can make use of it.

I hope Peter didn’t take this the wrong way, as I have an abrasive sense of humor that doesn’t translate well to written word.  Just in case, here’s a link to his site which is extremely clean, cool, slick, and a whole bunch of other adjectives that equal up to awesome.

Away3dLite: Normals and Face Linking

The above is a demo of face linking implemented in Away3dLite (right lick to view source).  As you’ll see in the demo, face linking allows us to “link” a 3D object to another, rendering it at the center of the source’s face and then moving along the face’s normal by a given offset.  All credit goes to the original author of the Away3D FaceLink class, as my work was just a minimal modification to port it to Away3DLite.

One thing to note is that this demo required a modification to the Face class, found in away3dlite.core.base.Face.  I simply added a calculated normal and center for the face at creation time and made it available as a public variable.  It’s not altogether the cleanest code I’ve written, but it gives you a good idea of how you might use face linking in your own Away3DLite application.

Just for fun, here’s a couple links to other flash apps I’ve seen that make cool use of faces, vertices, and normals:

Away3D: Augmented Reality

Here’s a quick demo I did of using augmented reality in Away3D.  The quick description is that your webcam is used to identify the position and orientation of the marker (which I’m holding).  With these values identified, FLARToolkit and FLARManager are used to translate your Away3D scene and objects relative to the marker.  You are adding interaction into your Away3D apps using natural movements rather than the typical mouse and keyboard combos.

While the demo itself doesn’t give a great picture of the practical applications, they are showing up more quickly then you might imagine.  One particularly interesting example is the Layar browser, which uses global positioning rather than marker identification to make its alterations to reality.  Rather than try to explain it, check it out here:

And I’m sure plenty more applications are on the way. Want to get on board and start churning out your own augmented reality (AR) apps in Flash?  Check out FLARToolkit and FLARManager for yourself.  You may also want to take a look at the original ARToolkit, which is based in C++, or NyARToolkit, the Java/C# port on which FLARToolkit is based.

Too lazy for all that research?  Stay tuned and I’ll post up the source from the bare bones example I had in the first video of this post.

Testing Away3D Materials

In an effort to learn more about the vast array of materials available in Away3D I put together this little demo.  It’s just an adjustable sphere that you can change the segment count of with a drop down for selecting materials to apply to it.  It’s got just one light: a DirectionalLight3D pointing straight at it.  This, of course, only affects the shaded materials as you can see in the demo.  By the way, anyone know why I’m getting no color on the ShadingColorMaterial?

Discussion on ShadingColorMaterial not working in Away3D 3.5: http://groups.google.com/group/away3d-dev/browse_thread/thread/aaf9d9c73a12473f/b49add76061e9388

Featured Away3D Code:

  • away3d.materials.AnimatedBitmapMaterial
  • away3d.materials.VideoMaterial
  • away3d.materials.PhongColorMaterial
  • away3d.materials.ShadingColorMaterial
  • away3d.materials.Dot3BitmapMaterialF10
  • away3d.materials.Dot3BitmapMaterial
  • away3d.materials.WireframeMaterial
  • away3d.materials.WireColorMaterial
  • away3d.materials.ColorMaterial
  • away3d.lights.DirectionalLight3D

As usual, right click to view the source of the demo.

Face picking in Away3D

Here’s a quick demo of individual face picking and manipulation in Away3D.  Using your mouse you can click to select any visible face of the sphere to change its color, as well as receive information about the face itself.  The face’s number, 3D coordinates, and screen coordinates will appear in the upper left hand portion of the view.

Hopefully you’ll find it useful.  As usual, you can right click and select “view source” to see the source code for the demo.

Featured Away3D code

  • away3d.cameras.Camera3D.screen()
  • away3d.core.draw.ScreenVertex
  • away3d.core.draw.DrawTriangle
  • away3d.core.base.Mesh.faces

Flash Player 10.1

I was checking in on a performance thread I started on the Away3D development mailing list and came upon a tidbit that is quite exciting.  One of the users informed me that Flash Player 10.1 was expected to be a big “game changer” in terms of performance for Away3D.  Always skeptical, I had to check it out myself.

I checked my demo in my last post and was getting around 27 FPS.  I then updated to the pre-release of Flash Player 10.1 and reloaded the demo.  I was shocked to see my average frame per second jump to almost 40!  Without changing a bit of code I got a 30% boost in performance. Very cool.  Can’t wait to see what’s next as 3D in Flash becomes more mature.