As3: Draw overlapping rectangles to a sprite and apply alpha - actionscript-3

Question

I need to draw independet rectangles to a sprite. But the overlapping areas will get visible if I apply alpha to my sprite (the sprite will be fade in and out):
var spBox:Sprite = new Sprite();
this.addChild(spBox);
spBox.graphics.beginFill(0x123456)
spBox.graphics.drawRect(100, 100, 50, 50);
spBox.graphics.endFill();
spBox.graphics.beginFill(0x123456)
spBox.graphics.drawRect(125, 125, 50, 50);
spBox.graphics.endFill();
Is there a way to compine/flatten/merge the rectangles of my sprite? I want a seamless aplha appearence.

Answer 1

I suspect that the graphics object does not support this kind of functionality for parts of its data.
If both boxes are individual DisplayObjects, you can set the .blendMode of the DisplayObjectContainer to BlendMode.LAYER, which gives the desired result. Here's some example code that refactors the drawing of a rectangle into a Box class:
var spBox:Sprite = new Sprite();
this.addChild(spBox);
var a:Box = new Box(50, 50, 0x123456);
a.x = a.y = 100;
spBox.addChild(a);
var b:Box = new Box(50, 50, 0x123456);
b.x = b.y = 125;
spBox.addChild(b);
spBox.alpha = .5;
spBox.blendMode = BlendMode.LAYER;
The relevant parts of the Box class look like this:
public class Box extends Shape
{
public function Box(width:Number = 100, height:Number = 100, color:uint = 0)
{
graphics.beginFill(color)
graphics.drawRect(0, 0, width, height);
graphics.endFill();
}
}