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.
Related
I want to mask the png image pattern.png with another image - mask.png, but it doesn't work at all and I can't find the reason. Instead of masking the image, the mask just disappears and the pattern stays the same as it was.
I tried making a MovieClip, drawing e.g. a circle and using that as the mask instead of mask.png and it works just fine. Is it because you can't use loader objects as masks? How do I make it work?
edit: After changing the size of mask.png to be smaller than the pattern, I've realized that it actually does kind of work, but what happens is instead of cutting the pattern into the shape I've drawn in the png file it just cuts it into the shape of the entire file, as in, it counts the rectangular transparent background as well. How can I make it cut out just the shape?
var mask:Loader = new Loader();
mask.load(new URLRequest("mask.png"));
var pattern:Loader = new Loader();
pattern.load(new URLRequest("pattern.png"));
pattern.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
function loadComplete(e:Event):void {
addChild(pattern);
addChild(mask);
pattern.mask = mask;
}
Your code is looks correctly. The mask property of DisplayObject wants DisplayObject too. But try to make few things, to find the trouble:
You have only one listener, to pattern.png. But you must be sure, that mask.png has loaded already too.
Despite that Loader is DisplayObject too - try to get content from loader for mask, and just after that try to use it.
*Ah, and one more thing. You must at first add listener, and only later try to load.
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.
I have background image and smaller image. I copy the smaller image into the bigger image using copypixels like this:
destBitMap.copyPixels(img, new Rectangle(0, 0, img.width, img.height),
location);
Now I want to rotate the image before copying it. Whats the best way to do it?
I tried using Matrix and bitmapData.draw() but its unacceptable. it has pixelated edges.
I found this pixelbender filter : http://life.neophi.com/danielr/2009/07/image_rotation_with_pixel_bend.html
for rotating images. on the plus side, it is really fast. I never used pixelbender so Im curious if its possible to take that filter, apply it to bitmapimage and copy the rotated image into the background image.
This is what Ive tried (which doesnt work):
shader = new Shader(new RotateFilter() as ByteArray);
shader.data.origin.value = [resizedImage.width / 2, resizedImage.width / 2];
shader.data.rotation.value = [rotation];
filter = new ShaderFilter(shader);
var bm:BitmapImage = new BitmapImage();
bm.source = resizedImage;
bm.filters = [filter];
Whats next? Is this possible at all?
If you want to apply a single filter to a bitmap, use BitmapData.applyFilter() method. Obviously, you can do anything with the resultant bitmap. But, you have to apply all this on a lower level than UIComponent allows. If your resizedImage is type Bitmap, you do this:
resizedImage.bitmapData.applyFilter(resizedImage.bitmapData,resizedImage.bitmapData.rect,new Point(),filter);
After this, your resizedImage.bitmapData will contain a rotated bitmap.
I have an application where user have to draw a line on the canvas without overlapping it. Is there a way to test the overlapping? I have googled already but found result with circles and rectangle overlapping. My case is different. Here user will draw lines on canvas without overlap the line itself. May be I am missing something so any guidance is appreciated. Thanks
I take it you mean the user draws a line with some sort of pen tool, using the mouse.
Here's what I would do:
First, hold the path of the line drawn in a BitmapData object.
var lineBitmapData:BitmapData = new BitmapData(display.width,display.height,true,0x00000000);
This creates a transparent bitmap object with the user's line on it.
On each frame (or timer event, if you use timer) do the following:
1.capture the current mouse position and put it into a Point object.
var currentMousePosition:Point = new Point(mouse.x,mouse.y);
you will also need a point representing the upper-left corner of your bitmapData.
var pt1:Point = new Point(1,1);
2.perform collision detection between the current mouse position and the lineBitmapData
var result:Boolean = lineBitmapData.hitTest(pt1, 0xFF, currentMousePosition);
the second parameter in the hitTest method is the threshhold value. Basically, this needs to be set to the minimum alpha value that you want to count as a hit.
3.check the result of the hitTest. If it's false, this means what the user is about to draw this frame does not intersect what was already drawn. In this case, you add the bit that was drawn during the last frame to the lineBitmapData.
If the hitTest returns true, however, that means the user is about to make his line intersect, so your program needs to stop the drawing (or whatever behavior you want).
if(result){
myPenTool.stopDrawing();}else{
var drawnLastFrame:BitmapData = myPenTool.drawSingleFrameLine();
lineBitmapData.draw(drawnLastFrame);}
4.Update what the user sees on the screen with the new lineBitmapData
As of right now, I am trying to create a tiling effect for a game I am creating. I am using a tilesheet and I am loading the tiles to the sprite like so...
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(30, 0,tWidth ,tHeight );
var tileImage is the bitMapData. 30 is the Number of pixels to move retangle. then tWidth and tHeight is how big the rectangle is. which is 30x30
This is what I do to change the bitmap when I role over the tile
this.graphics.clear();
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(60, 0,tWidth ,tHeight );
I clear the sprite canvas. I then rewrite to another position on tileImage.
My problem is....
It removes the old tile completely but the new tile positions farther to the right then where the old bitmap appeared.
My tile sheet is only 90px wide by 30px height. On top of that, it appears my new tile is drawn behind the old tile. Is there any better way to perfect this.
again, all i want is for the bitmap to change colors
You could try to load the whole tilesheet in your sprite, and then redefine the scrollRect property each time you need to.
this.scrollRect = new Rectangle( 30, 0, tWidth ,tHeight );
Note that you can't just edit scrollRect.x, .y, .width or .height ; you have to redefine a new Rectangle each time.
Using scrollRect will probably be much faster that redrawing part of the bitmap.
You can read this excellent article from Grant Skinner for more informations about scrollRect.