• 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?

To conveniently call the asdoc.exe command from every folder on your system you have to add the path to the folder asdoc.exe is in to the PATH system variable. Here’s how: Go to your Control Panel and click System. Go to the Advanced tab and click Environment Variables. In the System Variables list locate the Path variable. If it doesn’t exist create it. Doubleclick the variable to edit the value and add the location of your Flex bin folder, in my case it is: “d:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\bin”. Don’t replace any of the other values in the variable, the value of the variable is semicolon-separated, so just add the path at the end of the value. Now click OK OK and reboot. After the reboot you should be able to just enter this in the command line: c:\asdoc, and ASDoc should respond with a beautiful error.

I hate typing in a command prompt (I don’t like typing at all), so I create a batch file to call ASDoc so I can create and recreate my documentation again and again. I place the batch file in the root of my project, so here’s what my project looks like:

1

asdoc -source-path . -doc-sources . -output asdoc -external-library-path=lib -main-title "My work API documentation" -window-title "My work API documentation"

Some explanation about the switches in this command:

• asdoc: this calls the asdoc command
• -source-path: Enter a dot to tell ASDoc that the current folder is the source path
• -doc-sources: Enter a dot to tell ASDoc to document all of the sources in the current Folder
• -output asdoc: This is the name of the Folder in which the documentation will be generated
• -external-library-path: If you use external swc’s, ASDoc wants to know about them, so enter the Folder in which they are located. In my project above I’ve used Away3D and Tweener, they are located in the lib folder
• -main-title: The title at the top of the document
• -window-title: The title the browser window displays

Note that the -external-library-path is an undocumented switch, I’ve spent an hour to get ASDoc to work properly with external libraries. Using -library-path won’t work, you’ll replace the Flex Framework by doing that, so ASDoc will say something like “Hey, what’s a UIComponent?”.

Everything should work fine, but with ASDoc you’re never sure. Just run the batch file from the command line and see what happens.

By the way: don’t use unsupported tags in your code. The @description tag for instance is not supported, which will result in ASDoc throwing a useless xml parser error.

Good luck, you’re on your own now…

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.

1
2
3
4
5

var flippedBmd:BitmapData = new BitmapData(myUIComponent.width, myUIComponent.height, true, 0xFFCC00);
var flipMatrix:Matrix = new Matrix();
flipMatrix.scale(-1, 1);
flipMatrix.translate(myUIComponent.width, 0);
flippedBmd.draw(myUIComponent, flipMatrix);

Where myUiComponent is any Flex Component instance.

This all works well, except for the text in the Component, all ‘dynamic’ texts won’t show in the BitmapData, whil everything works well if I comment out the flipmatrix.scale and flipmatrix.translate lines.

You can see this weird behavior in action here. Try it by clicking the ‘Flip’ button.

The first one who gives me a BitmapData-only solution to this problem deserves a free beer!

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

1
2

var canvas:Canvas = new Canvas();
canvas.addChild(new Sprite());

According to the documentation i can add any type of DisplayObject as a child to any type of Container, but when you try to do that you’ll get this:

1

cannot convert flash.display::Sprite@54abdd1 to mx.core.IUIComponent

This is because Canvas, or more specific, Container tries to cast our newly created Sprite to a UIComponent, which is an Object lower in the Flex inheritance chain and casting to a more specific type is not allowed. This is one of the basic principles of Object Oriented Programming; you can’t cast any object to another object of a more specific type because you would add functionality to it by doing that.

I could just add my Sprite to the rawChildren property of my container like this:

1
2

var sprite:Sprite = new Sprite();
canvas.rawChildren.addChild(sprite);

But that’s not a really nice solution because the sprite wouldn’t behave like a Flex component and I would get my Sprite mixed up with all of the skinning Sprites and MovieClips of the container.

But I’m wandering off now, here’s the solution to our little Flex and Sprites and addChild problem:

1
2
3
4

var canvas:Canvas = new Canvas();
var uiComponent:UIComponent = new UIComponent();
canvas.addChild(uiComponent);
uiComponent.addChild(new Sprite());

Just use a UIComponent as a container for the Sprite. For as far as i know UIComponent is the only component that can actually add a Non-Flex-Component as a child.