• WOW Physics engine: This is a particle based engine, which means every vertex has it’s own physics properties
• JigLibFlash Physics engine: This is a Rigid Body based engine. You work with primitive types like boxes and speres to create a rough shape of you 3d object. These rigid body based engines are faster than particle based engines, because there’s just one rigid body with physics properties instead of (in case of a simple cube) 8.

There’s quite a lot of examples around built with JigLibFlash and Papervision3D. Because I prefer building my 3D stuff in Away3D, I wanted to create some 3D physics with JigLibFlash and Away3D. Here’s a simple example of how it works:

Just use the arrow keys to move the ball around, try to get it to jump the ramp . You can download the source code here.

That’s it for now. it takes a lot of time to figure out how everything works because these physics engines are still buggy and undocumented (grrr). The project members of JigLibFlash did a great job by porting this c++ engine to actionscript, but, for an open source project to be successful they better start documenting the source code (I know it’s a boring job) instead of creating demo apps with Papervision, which, in my opinion is not the best 3D engine around.

The same thing goes for Flex, but Flex has it’s own measuring and sizing methods. I’ve come to know that it’s a great thing as regards to performance, maintainability and scalability of your component to adapt to the Flex Framework.

In this case, I’ve extended a Flex component. The new Component contains an Away3D scene, which wants to take up the full width and height of my Flex Application. To solve this we need to override the updateDisplayList method. This method get’s called by the Flex Framework every time something in the measuring has changed. Here’s how it looks in code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
 
super.updateDisplayList(unscaledWidth, unscaledHeight);
 
// Set the clipping of the 3D scene to make sure only the visible elements are rendered,
// this is great improvement for the performance
var clipping:RectangleClipping = new RectangleClipping(-this.width/2, -this.width/2, this.width/2, this.width/2);
 
// Asign the clipping to the _view3D, in this case a private variable within my class
_view3D.clip = clipping;
 
// Remove the old mask if there is one
if (_mask != null) {
this.removeChild(_mask);
}
 
// Create a new mask
_mask = new Sprite();
_mask.x = this.x;
_mask.y = this.y;
_mask.graphics.beginFill(0xFF0000,1);
_mask.graphics.drawRect(0, 0, this.width, this.height);
_mask.graphics.endFill();
 
// Add it to the displayList
this.addChild(_mask);
// And assign the mask to the view3D
_view3D.mask = _mask;
 
// And center the view3D in the available space
_view3D.x = this.width / 2;
_view3D.y = this.height / 2;
}

So as you see above, it’s quite straighforward. The clipping in the beginning of the method is not necessary for the masking, but since only the masked area is being displayed, there’s no need to render the invisible parts of the view3D.

As you may have read in a few of my other posts I’ve hacked a CoverFlow component together, just to see if it could be done. I was glad to see a lot of people liked it, so I decided to turn it into a proper component instead of the “hacked together” version I’ve posted before.

A lot of things have changed under the hood, a lot of bugs are fixed and you have to use the component a bit different.

• The previous version was built as a container, the new version is built more like a dataGrid, so it’s a component with a dataProvider. The component just renders the data in the dataProvider
• It’s dynamic! It loads the images from the dataProvider. Changes on the dataProvider will be detected through binding
• It’s now compatible with the Flex history manager, I’ve implemented the IHistoryManagerClient interface
• It’s now compatible with the Flex focus manager, I’ve implemented the IFocusManagerComponent interface
• I’ve added keyboard control, so the left and right arrow keys change the selected cover
• It dispatches events, it lets everyone who’s listening know that the selectedIndex has changed, that it’s finished animating, etc
• It’s now properly masked, the 3d scene doesn’t stretch to the full stage width and height anymore
• And some more other small things

I’ve created a new sample project to demonstrate all of the features, see it in action here. You can see and download the source code of the sample project here.

The component free to download and free to use, download the swc here. I’m not publishing the source code of this one for now.

I’ve created documentation to help you put this component to good use, read it here.

Let me know what you think of it. I’d also like to see some end results. some projects in which you’ve used my component.

The next step? Hmm, a piclens component perhaps?

I’ve been quite busy working on my CoverFlow component. I’ve added my reflection class and added the possibility to use cubes instead of planes as a cover. Since I’ve used a true 3D engine (Away3D) to build this component it’s become much more than just a CoverFlow rip-off. Here are some examples of what it can do:

Click here to see the CoverCube in action. Try the presets and drag the sliders to explore the possibilities of this component.
Click here to view the source code.

Here’s a few examples of the component using just planes:

Click here to see the CoverFlowV2 in action. Try the presets and drag the sliders to explore the possibilities of this component.
Click here to view the source code.

So the idea is that there are two flavors to this Reflection classes:

• The Actionscript-only way to create a Reflection
• The MXML-only way to create a Reflection

I also wanted to be able to create a reflection of a video or any other moving object. Check the example to see it in action.

The Actionscript-only way to create a Reflection

I’ve created this one so you can create reflections in Flash or in any Actionscript project. I’m going to use this to create reflection BitmapData’s to use in Away3D. Here’s how you use it:

1

var reflection:Reflect = new Reflect(this.image1 as Sprite, 0.4, 100, true, Reflect.BOTTOM, 0);

The constructor arguments are:

• The sprite to reflect
• the alpha value
• the ratio value
• a boolean to tell if it should be added as a child to the target sprite
• the direction of the reflection
• the updateTime, this one is set to 0, so it doesn’t periodically update the reflection

See the example here
See the sourcecode here

The MXML-only way to create a Reflection

The component version uses exactly the same arguments as the Actionscript class. All properties (except for the updateTime) are bindable, so you can alter the alpha, ratio, etc at runtime.

1

See the example here
See the sourcecode here

There’s one problem with reflecting dynamic textfields. I’m using a Matrix to create the Flipped BitmapData. Unfortunately the scale and translate methods of the Matrix mess up the rendering of dynamic textfields, but hey, who would want to reflect a boring textfield or dateChooser
I’ve written a post about this problem, you can read it here. I know the solution to this problem; Use a Bitmap and set the scaleY property, but this will only flip the Bitmap, the BitmapData is still not flipped, and as I mentioned before, this was all to do about the Flipped and reflected BitmapData.

So every axis points into the positive direction and that’s what puzzled me for about two months while using Away3D; why do my 3D objects appear on the left side of the 0,0,0 position when I create them, while they should appear on the right hand side. This is what the code looks like:

1
2
3
4
5
6

var view3D:View3D = new View3D();
 
this.addChild(view3D);
var sphere:Sphere = new Sphere({radius:200, segmentsW:10, segmentsH:10});
sphere.position = new Number3D(0, 0, 0);
view3D.scene.addChild(sphere);

Here’s the answer: This is because how the view3D instance is initialized. If you don’t pass an initObj to the constructor of the view3D, the camera is positioned at z=1000 and told to look at the center. So the camera is looking towards you, so the whole coordinate system is the other way around.

Glad I figured this one out, I was starting to loose my mind

I’ve been fiddling around with 3d engines in Flash for about a year now, but never used it in Flex before, so I decided to try to build an iTunes coverflow component in Flex. This was what i came up with:

Not really anything special, but since i’ve used a real 3D engine, i can do more stuff with it, like this:

and this:

There’s still a lot of work to do before it’s really useful, but i’m pretty content with the results so far.

I don’t know if I’ll ever finish this component. To me it was just a case study in which I wanted to explore the possibilities of the combination of a 3D engine and Flex.

• View the example
• Download the sourcode