Add blur to everything in an area AS3 - actionscript-3

I'd like to know how can I add blur in a certain area for example behind a movieclip, maybe a mask that will blur everything in the area of that moviclip.
I don't want to blur everything, just what's behind a movieclip :)
Sort of like Apple is doing with their menus

The only way to do this in AS3 is draw whatever is behind the MovieClip to a Bitmap, then blur the bitmap.
For example, say your MovieClip is a modal dialog of some sort with a semi-transparent background, you could use the following script (inside the MovieClip) to blur whatever is on the stage behind it onto a bitmap surface:
// create a bitmap surface to use as a blurred background
var blurData:BitmapData = new BitmapData(width, height, false);
var blur:Bitmap = new Bitmap(blurData);
addChildAt(blur, 0); // put the blur surface behind everything in the movieclip
// this function draws the portion of the stage that's behind the movieclip
// onto the bitmap surface, then blurs it
function drawBlurBehind():void {
// fill the bitmap with the stage color first
blurData.fillRect(blurData.rect, stage.color);
// account for the coordinate offset of the stage and movieclip
var offset:Point = globalToLocal(new Point());
var matrix:Matrix = new Matrix();
matrix.tx = offset.x;
matrix.ty = offset.y;
// hide the movieclip so it doesn't show up in the blurred background
visible = false;
// draw the stage behind the movieclip onto the bitmap
blurData.draw(stage, matrix);
// blur the background bitmap
blurData.applyFilter(blurData, blurData.rect, new Point(), new BlurFilter(25, 25));
// show the movieclip after the background has been blurred
visible = true;
}
Note that this drawing is not "live" and any time anything changes (you move the movieclip or what's behind it changes) you have to redraw. You could use an ENTER_FRAME event handler to continually redraw every frame, which would basically make it live, but that will be relatively expensive so avoid it if you can.
Also note that this script draws and blurs the whole stage (excluding the movieclip), not what is strictly "behind" the movieclip. So if you want things to appear above the movieclip and not appear blurred behind the movieclip, you'll have to set those to visible=false while you draw the blurred background.

Related

My startDrag rectangle isn't where I set it to be

I've made a rectangle, a rectangular sprite and a circular sprite. The rectangular sprite has the exact same properties of my rectangle, and I set my circle to be positioned in the center of the stage, which is the middle of both of these rectangles.
After tracing the values of the rectangle, I can safely say that the rectangle is the same as the rect sprite. So then of course, if I wanted to drag the circle around the rectangle, it should stay within the bounds of it, right?
stop();
var isDragging:Boolean;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.display.Sprite;
import flash.geom.Point;
var px:Number = boundingBox.x;
var py:Number = boundingBox.y;
var h:Number = boundingBox.height;
var w:Number = boundingBox.width;
var box:Rectangle = new Rectangle(px,py,w,h);
trace(box);
var blob:Sprite = new Sprite();
blob.graphics.beginFill(0x000000);
blob.graphics.lineStyle(1.2, 0xFFFFFF);
blob.graphics.drawCircle(stage.stageWidth/2, stage.stageHeight/2, 18);
blob.graphics.endFill();
addChild(blob);
var box2:Sprite = new Sprite();
box2.graphics.lineStyle(1, 0xFFCC00);
box2.graphics.drawRect(px,py,w,h);
addChild(box2);
blob.addEventListener(MouseEvent.MOUSE_DOWN, drag);
function drag(event:MouseEvent):void {
event.target.startDrag(false, box);
isDragging = true
}
Well that doesn't seem be the case. Maybe I'm just a noob but I have no idea what's going on.
When I run the scene, everything looks normal.
The orange/dotted line is two rectangles I made, one is a movie clip that I used to set the properties of the rectangle I made in AS3 (dotted) and the orange is the AS3 sprite.
The circle is in the middle of the stage and it all looks as exactly how I wanted to be programmed.
But as soon as I click on it, it teleports over here.
And when I try to drag it, it seems as if the box's top left corner has been translated to that point all the way down there, and it only drags around in the bottom-right quadrant of the stage, and even drags further off screen.
I'm not sure if the rectangle that I put into the startDrag function is somehow distorted from the actual rectangle.
I have no idea why this happens, because when I tried to do this using a movie clip that I added to the stage, everything worked fine. But as soon as I try to do it programmatically, everything goes tits up.
I'd appreciate some help on why this isn't working. Thanks for reading.
There's your problem:
blob.graphics.drawCircle(stage.stageWidth/2, stage.stageHeight/2, 18);
You draw this circle and only seem to care about the circle:
if I wanted to drag the circle around the rectangle, it should stay within the bounds of it, right?
No. Just because you added something to the .graphics doesn't mean As3 automagically knows that this is what should stay within the bounding Rectangle that's being passed to startDrag().
The thing that stays within the bounding Rectangle is the registration point of the Sprite. That registration point is not where you drew the circle. It is in fact still at its default position of 0/0 in your first image. I added a green star at the registration point of blob. I also added a red rectangle that connects the registration point and your point. Think of this as some jelly that both your circle and the registration point are stuck in. This should help illustrate that just because you drew a circle somewhere doesn't mean that you are only dealing with that circle:
But as soon as I click on it, it teleports over here.
As soon as you click, the movement limitation of startDrag() is applied. The registration point has to be in the Rectangle that you specified and that's exactly what happens. The whole red jelly blob is moved over so that the green star is in the Rectangle:
To solve this, first create your blob in a reasonable fashion, which means drawing the circle around the registration point at 0/0 and then moving the Sprite object around if you want to have the circle at another position. This way, there's no red jelly and the green star is right at the center of the circle. The visual helpers that I added become superfluous, because your perception of the situation now matches with how it actually is.
const RADIUS:Number = 18;
var blob:Sprite = new Sprite();
blob.graphics.beginFill(0x000000);
blob.graphics.lineStyle(1.2, 0xFFFFFF);
blob.graphics.drawCircle(0, 0, RADIUS);
blob.x = stage.stageWidth/2;
blob.y = stage.stageHeight/2;
blob.graphics.endFill();
addChild(blob);
This will keep the blob within the bounds for the most part or more precisely: its center point. If you want to keep the entire circle within the bounds, you'd have to subtract the circle from the bounding Rectangle Minkowski-style. Mink-what? yeah...err, that's a fancy way of saying: make the bounding Rectangle smaller by the radius, so that this smaller boundary can be applied to the center of the radius to ensure that the whole circle stays within the bigger original boundary.
In your case Rectangle's inflate() should do:
var px:Number = boundingBox.x;
var py:Number = boundingBox.y;
var h:Number = boundingBox.height;
var w:Number = boundingBox.width;
var box:Rectangle = new Rectangle(px,py,w,h);
box.inflate(-RADIUS, -RADIUS);
trace(box);

Bitmap inside a Sprite - But still not clickable? AS3

Basically I've got a bitmap which is an image that the user captures from a webcam which was previously stored as bitmapdata which I converted into a bitmap and added it onto the stage..
From here I want the bitmap to be selectable so I can do other things to it, so I realised I would need to add this into sprite in order to add event listeners onto it.
Having done so, for some reason my application ain't wanting to recognise the events added?
Here is the code I've got..
Bitmap..
//Create a new bitmap from the video capture
image = new Bitmap(bitmap,"auto",true);
//Set the width and height properties
image.width=150;
image.height=125;
//Set the stage position
image.x = 430;
image.y = 280;
stage.addChild(image);
Sprite..
var imageSprite:Sprite;
imageSprite = new Sprite();
imageSprite.x = 200;
imageSprite.y = 50;
imageSprite.addChild(image);
stage.addChild(imageSprite);
Event listener:
imageSprite.addEventListener(MouseEvent.MOUSE_DOWN, SelectWebImage1);
Function:
function SelectWebImage1(e:MouseEvent): void {
trace("Clicked");
}
I receive no errors from this but I noticed that when I have that code written in my application, all of the code underneath it doesn't seem to function?
I really don't know what i'm doing wrong, any help appreciated thanks!
When you set Sprite's dimensions, you implicitly set its scale, and also if you place some graphics by using width and height, the width and height includes any sprite's children, accounting for their position. You should place that bitmap into imageSprite and not set x,y proerties for the bitmap, this way you won't have to account for its position inside the sprite to position the bitmap.

Showing a mask of MovieClip with AS3

Is it possible to display a mask object using AS3?
I have a MovieClip called myMC, then I mask myMC with the MovieClip called myMask. MOVIE_CLIP and MASK are library MovieClips.
var myMC:MovieClip = new MOVIE_CLIP();
var myMask:MovieClip = new MASK();
myMC.mask = myMask;
Of course, myMC won't show.
What I want is that myMC is only displayed in myMask, and not outside it, with myMask reamining visible.
To be quite honest with you, this isn't possible AFAIK. A mask, by definition, is invisible. What you would need is to have the mask be the SHAPE you want, and then have an additional MovieClip that shows whatever visual elements you would have shown on the mask.
Case and point, if you wanted to use a glass-pane graphic as your mask, you would need to have a glass-pane graphic, the mask with the same dimensions, and then the MovieClip you're masking underneath that mask.
I hope that helps.

AS3: How can I implement a perfect ROLL_OVER(or MOUSE_OVER) event listener on curved movieclips

I've a problem with ROLL_OVER event listener. When I enter the empty area withing the movieclip with mouse cursor, ROLL_OVER event triggers. But I want that event trigger only when mouse cursor is on the colored area.
To Make it more clear: Think about " O " letter, when mouse cursor is between the empty area of O letter (inside of O) , event shouldn't trigger. It should trigger only when mouse curser is on the black area.
How can I implement this?
Thanks
-Ozan
PROBLEM IS SOLVED THANKS TO #Ethan Kennerly
I just want to add a few things to help people have problem same as me. In my situation I tried to make continents glow when my mouse is over them. I used the ROLL_OVER/MOUSE_OVER eventlistener to check if my mouse is over them or not. But with the data given by Ethan Kennerly I produced another way.
In Ethan Kennerly's solution, if your mouse enters the area of continent from a transparent area , it doesn't get blur effect because ROLL_OVER and MOUSE_OVER event listeners only trigger once per enters so I used MOUSE_MOVE event listener on each continent movieclips.
And for this statement:
if (isPixelTransparent(DisplayObject(event.currentTarget), new Point(stage.mouseX, stage.mouseY)) {
return;
}
add whatever is in the "ROLL_OUT or MOUSE_OUT" eventlistener function, add all of them inside this statement. But don't remove ROLL_OUT or MOUSE_OUT functions.
It sounds like the movie clip contains a shape that has transparent pixels. Transparent pixels respond to mouse over and roll over. If you could draw vector graphics that have no shapes with transparent pixels, the mouse would ignore the empty space in the movie clip's bounding box.
Yet it sounds like you need to use transparent pixels and you want the mouse to ignore them, so you could guard, like this:
private function onRollOver(event:MouseEvent):void
{
if (isPixelTransparent(DisplayObject(event.currentTarget), new Point(stage.mouseX, stage.mouseY)) {
return;
}
// respond to roll over.
}
To detect transparency, Miguel Santirso rendered the pixels and translated the coordinate space here: http://sourcecookbook.com/en/recipes/97/check-if-a-pixel-is-transparent-in-a-displayobject (Except line 38 looks on my computer like "rect" got rendered as "ct"). You could optimize that code by only drawing the pixel in question, instead of the whole image, and checking if that pixel value (getPixel32) is 0, instead of calling a hitTest. I would optimize Miguel's code like this:
public static function isPixelTransparent(objectOnStage:DisplayObject, globalPoint:Point):Boolean
{
var local:Point = objectOnStage.globalToLocal(globalPoint);
var matrix:Matrix = new Matrix();
matrix.translate(-local.x, -local.y);
var data:BitmapData = new BitmapData(1, 1, true, 0x00000000);
data.draw(object, matrix);
return 0x00000000 == data.getPixel32(0, 0);
}
By the way, if all your movie clips would have the same hit test shape, you could create a separate transparent shape that listens to the roll over. I use a transparent shape to define a custom hit test shape that is a consistent and simple shape (like a circle) when the image is a more complicate shape (like an X or an O with nothing in the middle). The custom hit test shape is a Sprite with a transparent shape. The sprite listens to the roll over. A separate mouse listener shape is also useful if your movie clip, on later frames, creates new shapes that alter the silhouette of the movie clip.
The easiest solution would be using the Interactive PNG class by Moses.
http://blog.mosessupposes.com/?p=40
Normally the clear areas of a PNG are treated as solid, which can be especially frustrating when dealing with a lot of images that overlap each other because they tend to block mouse interactions on the clips below them.
This utility fixes that so that mouse events don't occur until you
bump against a solid pixel, or a pixel of any transparency value
besides totally clear. InteractivePNG lets you set an alphaTolerance
level to determine what transparency level will register as a hit.

AS3 erase bitmap that has filters

So I use bitmap.bitmapData.draw(erase,null,null,"erase"); to erase part of a bitmap that has the sprite called erase over it. The problem is that I need the bitmap to be blurred, and after I apply a blur filter the bitmapData.draw function doesn't work anymore. Meaning absolutely nothing happens. I tried using bitmapdata.applyFilter, which almost works except when I erase near a blurred edge it "unblurs" itself.
var erase:Sprite=new Sprite();
erase.cacheAsBitmap = true;
var blur:BlurFilter = new BlurFilter(10,10,10);
var blurs:Array=new Array();
blurs.push(blur);
bitmap=new Bitmap(bitmapdata);
bitmap.blendMode = "layer";
bitmap.y=-10;
bitmap.x=-10;
Refs._stage.addChildAt(bitmap,0);
also:
erase.graphics.beginFill(0xFF0000);
erase.graphics.drawCircle(stage.mouseX+10,stage.mouseY+10,35);
erase.filters = blurs;
erase.graphics.endFill();
bitmap.bitmapData.draw(erase,null,null,"erase");
It's just how the erase draw works. It erases pixels based on the alpha value of the object being drawn in erase mode. Where the alpha is above 0.5, that pixel get its alpha dropped to zero. Other pixels are not touched. This is what you experience when you draw with erase, then blur, then draw with erase again. No, Flash is not intelligent enough to do erase-blur, you might have to do it yourself. You might try drawing a transparent BitmapData with BlendMode.ERASE to do a blur-erase, but I don't expect it to return a blurred bitmap with blurred erased regions.