« Dynamic Flex CoverFlow Component with dataProvider
» Create ASDoc code documentation with ANT

Actionscript 3, Adobe Flex 2, Adobe Flex 3, Away3D

Mask an Away3D scene in Flex

09.18.08 | 1 Comment

An Away3D scene usually takes up the full width and height of the embedded swf file in the browser. In Flash you can easily solve this problem by masking the Away3D view.

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.

1 Comment

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:

:


« Dynamic Flex CoverFlow Component with dataProvider
» Create ASDoc code documentation with ANT