BitmapData.draw()

[Felixz]

Is it possible to draw irregular piece of root for example a circle not square.
If I have a BitmapData 50x50 and want to draw in it a circle (corners leave blank or transparent), what should I do?
And one more question: how to replace whole BitmapData using draw() without creating new BitmapData object (when I want to draw transparent shapes they just add to existing BitmapData not replacing)

[skineh]

Is it possible to draw irregular piece of root for example a circle not square.
If I have a BitmapData 50x50 and want to draw in it a circle (corners leave blank or transparent), what should I do?
And one more question: how to replace whole BitmapData using draw() without creating new BitmapData object (when I want to draw transparent shapes they just add to existing BitmapData not replacing)

Here's what I just came up with. Hopefully it's something you can use. Pretty striaghtforward - I keep a movieclip called alphaMask (just a black circle) in a BitmapData (bmd1). I capture the rectangular area I want from the stage into a BitmapData (bmd2). Then I use copyChannel to transfer the alpha from the alphaMask to our target area (from bmd1 to bmd2). The result is your section from the stage minus the area around the circle.



import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;

var bmd1:BitmapData = new BitmapData(50, 50, true, 0x00FFFFFF);
var bmd2:BitmapData = new BitmapData(50, 50, true, 0x00FFFFFF);
bmd1.draw(alphaMask);
bmd2.draw(this);
var rect:Rectangle = new Rectangle(0, 0, 50, 50);
var pt:Point = new Point(0, 0);
bmd2.copyChannel(bmd1, rect, pt, BitmapDataChannel.ALPHA , BitmapDataChannel.ALPHA );

var bm2:Bitmap = new Bitmap(bmd2);
this.addChild(bm2);
bm2.x = 100;


Since I reference a movieclip, I'm attaching the FLA to make life easier on you. Is this along the lines of what you need?

[Felixz]

Strange, I can't adapt it to my project...
The goal is to create a glass effect around window (AEROlike),
but it is still buggy:
http://felixz.mark-naegeli.com/example/
For now this code is too slow, my goal is to have one BitmapDataObject and to not refresh it by calling dispose and new BitmapData (when u use old BitmapData object old image overlaps with new and instead having blurred frame I get black)
protected function refreshBorder(event:Event=null):void {
//visible=false;
var bmd1:BitmapData = new BitmapData(this._finX + BORDER * 2,this._finY + this.barHeight + BORDER, true, 0x00FFFFFF)
var bmd2:BitmapData = new BitmapData(this._finX + BORDER * 2,this._finY + this.barHeight + BORDER, true, 0x00FFFFFF)
bmd1.draw(this);
bmd2.draw(root);
var rect:Rectangle = new Rectangle(0,0,bmd2.width,bmd2.height);
var pt:Point = new Point(0, 0);
bmd2.copyChannel(bmd1, rect, pt, 4 , 4);
this._blurredBorderU.bitmapData=bmd2
//visible=true;



/* visible=false;
this._blurredBorderDataU.dispose();
this._blurredBorderDataB.dispose();
this._blurredBorderDataL.dispose();
this._blurredBorderDataR.dispose();
this._blurredBorderDataU=new BitmapData(this._finX + BORDER * 2,this.barHeight + 1);
this._blurredBorderDataB=new BitmapData(this._finX + BORDER * 2,BORDER);
this._blurredBorderDataL=new BitmapData(BORDER,this._finY + 1);
this._blurredBorderDataR=new BitmapData(BORDER,this._finY + 1);
this._blurredBorderDataU.draw(root,new Matrix(1,0,0,1,-(x + this._blurredBorderU.x),-(y + this._blurredBorderU.y)),null,null,new Rectangle(0,0,this._blurredBorderDataU.width,this. _blurredBorderDataU.height));
this._blurredBorderDataB.draw(root,new Matrix(1,0,0,1,-(x + this._blurredBorderB.x),-(y + this._blurredBorderB.y)),null,null,new Rectangle(0,0,this._blurredBorderDataB.width,this. _blurredBorderDataB.height));
this._blurredBorderDataL.draw(root,new Matrix(1,0,0,1,-(x + this._blurredBorderL.x),-(y + this._blurredBorderL.y)),null,null,new Rectangle(0,0,this._blurredBorderDataL.width,this. _blurredBorderDataL.height));
this._blurredBorderDataR.draw(root,new Matrix(1,0,0,1,-(x + this._blurredBorderR.x),-(y + this._blurredBorderR.y)),null,null,new Rectangle(0,0,this._blurredBorderDataR.width,this. _blurredBorderDataR.height));
this._blurredBorderDataU.applyFilter(this._blurred BorderDataU,new Rectangle(0,0,this._blurredBorderDataU.width,this. _blurredBorderDataU.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderDataB.applyFilter(this._blurred BorderDataB,new Rectangle(0,0,this._blurredBorderDataB.width,this. _blurredBorderDataB.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderDataL.applyFilter(this._blurred BorderDataL,new Rectangle(0,0,this._blurredBorderDataL.width,this. _blurredBorderDataL.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderDataR.applyFilter(this._blurred BorderDataR,new Rectangle(0,0,this._blurredBorderDataR.width,this. _blurredBorderDataR.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderU.bitmapData=this._blurredBorde rDataU;
this._blurredBorderB.bitmapData=this._blurredBorde rDataB;
this._blurredBorderL.bitmapData=this._blurredBorde rDataL;
this._blurredBorderR.bitmapData=this._blurredBorde rDataR;
visible=true;
*/ }

[skineh]

Ahh, yeah, if you're going to be doing it that often, it isn't very efficient. Great idea, btw! :)

Hmm... okay, this may sound like a hack, but consider this idea - What if you had a Display Object sitting on top of everything except your draggable window. Inside this display object, you put a copy of everything on your stage (that you want to show up behind your draggable window). Put them all in the same position that their originators are in. Then apply a blur filter to the display object they're all sitting in. Then make your draggable window (or just the top part of it if that's the only area doing it) a visible mask to that display object. The effect should be very similar (and more fluid) - all items underneath the draggable window's area that you defined as a mask will appear blurry when you put it over top of them. Whadda ya think?

[skineh]

Okay, got home and had some time to throw this together. This is using the method I just discussed above. Admittedly, the blur filter won't be enough to get the effect you want, but you can see how this approach is much easier on your processor. A duplicate of your stage is made as a bitmap, the filter is applied, then the bitmap is put into a container on the stage. Then a movieclip inside of the draggable window is assigned as that container's mask.
Check it out and think over the different types of filters and blend modes available to display objects to see if there's a combination that would give you the effect you're looking for. Hope this is helpful!

Edit - Oh! And you'll probably wanna put mouseEnabled to false on the duplicate clip (blurLayer) so it doesn't interfere w/ your real objects. :)

Double Edit - Well geez, I completely forgot you had your own setup blurred just the way you wanted, right? The problem was the redrawing of the bitmap in the draggable window itself, yes? Seems like you could combine the first suggestion I made with this new one and get the effect you want with only having to do it once! Maybe it's just wishful thinking, but hopefully your blurring effect could be implemented with this masking example!

[Felixz]

Hmm looks interesting,
I will post here when I implement that

[Felixz]

Ok I have done it but... I don't know what is wrong blurred copydoesn't seem to follow window unless redrawn
public function draw():void {
//this._blurredBorderU.y=-this.barHeight;
this._closer.x=this._blurredBorderR.x=this._finX;
this._blurredBorderB.y=this._finY;
this.graphics.clear();
switch (WindowManager.DISPLAY_MODE) {
case DisplayMode.SMOOTH:
this.graphics.lineStyle(1,0x000000,.66,true);
this.graphics.beginGradientFill(GradientType.LINEA R,_arrayColors,ARRAY_ALPHAS,ARRAY_RATIOS,matrixWin dow,SpreadMethod.REFLECT,InterpolationMethod.RGB);
break;
case DisplayMode.BALANCED:
this.graphics.lineStyle(1,0x000000,1,true);
this.graphics.beginGradientFill(GradientType.LINEA R,_arrayColors,[1,1],ARRAY_RATIOS,matrixWindow,SpreadMethod.REFLECT,In terpolationMethod.RGB);
break;
case DisplayMode.FAST:
this.graphics.lineStyle(1,0x000000);
this.graphics.beginFill(color);
break;
default:
throw new Error("WindowManager.DISPLAY_MODE is invalid: " + WindowManager.DISPLAY_MODE);
}
this.graphics.moveTo(- BORDER,- (this.barHeight - BORDER));
this.graphics.curveTo(- BORDER,- this.barHeight,0,- this.barHeight);
this.graphics.lineTo(this._finX,- this.barHeight);
this.graphics.curveTo(this._finX + BORDER,- this.barHeight,this._finX + BORDER,- (this.barHeight - BORDER));
this.graphics.lineTo(this._finX + BORDER,this._finY);
this.graphics.curveTo(this._finX + BORDER,this._finY + BORDER,this._finX,this._finY + BORDER);
this.graphics.lineTo(0,this._finY + BORDER);
this.graphics.curveTo(- BORDER,this._finY + BORDER,- BORDER,this._finY);
this.graphics.moveTo(0,0)
this.graphics.lineTo(this._finX,0);
this.graphics.lineTo(this._finX,this._finY);
this.graphics.lineTo(0,this._finY);
this.graphics.endFill();
this._mover.graphics.clear();
this._mover.graphics.lineStyle();
this._mover.graphics.beginFill(0x000000,0);
this._mover.graphics.moveTo(- BORDER,- (this.barHeight - BORDER));
this._mover.graphics.curveTo(- BORDER,- this.barHeight,0,- this.barHeight);
this._mover.graphics.lineTo(this._finX,- this.barHeight);
this._mover.graphics.curveTo(this._finX + BORDER,- this.barHeight,this._finX + BORDER,- (barHeight - BORDER));
this._mover.graphics.lineTo(this._finX + BORDER,0);
this._mover.graphics.lineTo(- BORDER,0);
this._mover.graphics.endFill();

this.maska.graphics.clear();
this.maska.graphics.beginFill(0);
this.maska.graphics.moveTo(- BORDER,- (this.barHeight - BORDER));
this.maska.graphics.curveTo(- BORDER,- this.barHeight,0,- this.barHeight);
this.maska.graphics.lineTo(this._finX,- this.barHeight);
this.maska.graphics.curveTo(this._finX + BORDER,- this.barHeight,this._finX + BORDER,- (this.barHeight - BORDER));
this.maska.graphics.lineTo(this._finX + BORDER,this._finY);
this.maska.graphics.curveTo(this._finX + BORDER,this._finY + BORDER,this._finX,this._finY + BORDER);
this.maska.graphics.lineTo(0,this._finY + BORDER);
this.maska.graphics.curveTo(- BORDER,this._finY + BORDER,- BORDER,this._finY);
this.maska.graphics.endFill();
WindowManager.Instance.addChildAt(this._blurredBor derU,3);
addChildAt(maska,0);
this._blurredBorderU.mask=maska
refreshBorder()

}
protected function refreshBorder(event:Event=null):void {
this._blurredBorderU.visible=visible=false;
if (!this._blurredBorderDataU)this._blurredBorderData U=new BitmapData(stage.stageWidth,stage.stageHeight);
this._blurredBorderDataU.draw(root)
this._blurredBorderDataU.applyFilter(this._blurred BorderDataU,new Rectangle(0,0,this._blurredBorderDataU.width,this. _blurredBorderDataU.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderU.bitmapData=this._blurredBorde rDataU;
this._blurredBorderU.visible=visible=true;
/* this._blurredBorderU.visible=false;
var bmd1:BitmapData = new BitmapData(this._finX + BORDER * 2,this._finY + this.barHeight + BORDER, true, 0x00FFFFFF)
var bmd2:BitmapData = new BitmapData(this._finX + BORDER * 2,this._finY + this.barHeight + BORDER, true, 0x00FFFFFF)
bmd1.draw(this);
bmd2.draw(root);
var rect:Rectangle = new Rectangle(0,0,bmd2.width,bmd2.height);
var pt:Point = new Point(0, 0);
bmd2.copyChannel(bmd1, rect, pt, 8 , 8);
this._blurredBorderU.bitmapData=bmd2
this._blurredBorderU.visible=true;
*/
/* visible=false;
this._blurredBorderDataU.dispose();
this._blurredBorderDataB.dispose();
this._blurredBorderDataL.dispose();
this._blurredBorderDataR.dispose();
this._blurredBorderDataU=new BitmapData(this._finX + BORDER * 2,this.barHeight + 1);
this._blurredBorderDataB=new BitmapData(this._finX + BORDER * 2,BORDER);
this._blurredBorderDataL=new BitmapData(BORDER,this._finY + 1);
this._blurredBorderDataR=new BitmapData(BORDER,this._finY + 1);
this._blurredBorderDataU.draw(root,new Matrix(1,0,0,1,-(x + this._blurredBorderU.x),-(y + this._blurredBorderU.y)),null,null,new Rectangle(0,0,this._blurredBorderDataU.width,this. _blurredBorderDataU.height));
this._blurredBorderDataB.draw(root,new Matrix(1,0,0,1,-(x + this._blurredBorderB.x),-(y + this._blurredBorderB.y)),null,null,new Rectangle(0,0,this._blurredBorderDataB.width,this. _blurredBorderDataB.height));
this._blurredBorderDataL.draw(root,new Matrix(1,0,0,1,-(x + this._blurredBorderL.x),-(y + this._blurredBorderL.y)),null,null,new Rectangle(0,0,this._blurredBorderDataL.width,this. _blurredBorderDataL.height));
this._blurredBorderDataR.draw(root,new Matrix(1,0,0,1,-(x + this._blurredBorderR.x),-(y + this._blurredBorderR.y)),null,null,new Rectangle(0,0,this._blurredBorderDataR.width,this. _blurredBorderDataR.height));
this._blurredBorderDataU.applyFilter(this._blurred BorderDataU,new Rectangle(0,0,this._blurredBorderDataU.width,this. _blurredBorderDataU.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderDataB.applyFilter(this._blurred BorderDataB,new Rectangle(0,0,this._blurredBorderDataB.width,this. _blurredBorderDataB.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderDataL.applyFilter(this._blurred BorderDataL,new Rectangle(0,0,this._blurredBorderDataL.width,this. _blurredBorderDataL.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderDataR.applyFilter(this._blurred BorderDataR,new Rectangle(0,0,this._blurredBorderDataR.width,this. _blurredBorderDataR.height),new Point(0,0),new BlurFilter(6,6));
this._blurredBorderU.bitmapData=this._blurredBorde rDataU;
this._blurredBorderB.bitmapData=this._blurredBorde rDataB;
this._blurredBorderL.bitmapData=this._blurredBorde rDataL;
this._blurredBorderR.bitmapData=this._blurredBorde rDataR;
visible=true;
*/ }
http://felixz.mark-naegeli.com/example/

[skineh]

I'm not sure I follow what you're saying exactly. Where is this draw() function at? I'm not sure what the scope of these display objects are. If I had to guess, are you saying that your blurred layer is the white portion in your example? If that's the case, then you're putting your blur layer in the window itself. That's not what I was doing in my example. Assuming that is the case (and if not, then just ignore all this), your blur layer should be added as a child of the stage, not the window, and its mask should be set to the mask you have in the window (that part I see you did). The blur layer shouldn't be moving with the window - it should be static, as a duplicate of the stage.

[Felixz]

draw function is in window itself
The white square is a picture of stage but not refreshed (I have removed timer for performance), just resize that window...
The problem is when stage is redrawn and filter applied that mask has problems with showing that layer (when i move the window blur is in its old position)

[skineh]

Okay, hopefully I'm following correctly. That picture of the stage should be made outside of your window. You'd capture the stage, draw it as a bitmap, and then addchild at the root level. You'd then assign its mask like you're doing now. That way when the window is being dragged (and the mask along with it), the mask shows only that portion of your stage bitmap. If your stage capture is inside your window, then it's going to want to get dragged along with it (and you'd always see the same thing through the mask).
I'd also recommend using an empty Sprite to hold your stage bitmap in, then apply the mask to the container Sprite. If you can, look through the FLA I posted earlier and see how everything is related to one another. I'm on my way out the door but wanted to get a quick reply in for you. I hope I'm understanding you so far and my info here isn't proving useless!

[Felixz]

that image isn't in a window,
WindowManager.Instance.addChildAt(this._blurredBor derU,3);
WindowManager is a class (singleton added to root).
It looks like that mask isn't moving with window. It looks as it should on full redraw.
I can show you a full source through sharing folders on Live Messenger

[skineh]

ActionScript Code:

WindowManager.Instance.addChildAt(this._blurredBor derU,3);




Ah yes, duh. Sorry about that. Hmm.. yea, it looks like it's set up correctly, with the mask in your window and the entire window set to drag. We can try to catch each other on Live Messenger. I have to set up an account once I get home from work. I'll send you a private message here once I have it up and leave myself on and hopefully catch you when I'm around.

Edit - Ha! Okay, I just NOW realized it redraws your mask in the window when you mouseover the bottom part of it. :P Yeah, the effect is working, just gotta get that mask to drag...
It should drag automatically w/ the window since it's a child of the window. We'll get to making that work, but in the meantime see how well it performs if you put an enterFrame listener on the window that repositions the mask w/ the window. Just to force it to stay where it's supposed to for now and see how well it runs.

[skineh]

Man, sorry for not being able to get back to this sooner, Felixz! I've been pretty swamped lately (still am), but I'd like to set some time aside to look at this if you still want assistance! I don't have time to get myself on Messenger in the evenings, but I'm sending you a private message here on the forums with my e-mail if you'd like to send the FLA there. :)

[Felixz]

FLA is empty as a tear :P Don't get scared when u look at classes

[skineh]

Hahaha, you won't hear any complaints from me! I'm always yelling at one of my coworkers because he writes all of his code on the timeline. :m: