Clearing A BitmapData’s Contents
I've been using BitmapData lately more and more (I know, I'm very late to the party) and something that I was curious in was how to clear it before I can draw to it again so that the previous frame's contents are not in it. Particularly, I was wondering how I can very simply and quickly erase everything inside of what I just draw into a BitmapData object. I did some quick Google work and found the answer to be VERY simple.
In the code below, I'm just using TweenMax to tween a box diagonally across the screen. If you look closer at the code, however, you will see that I'm doing the tween inside of "container" which is actually never put on the stage. I'm simply using an ENTER_FRAME event to draw the animation into the BitmapData and that is what is being updated on the stage (alternately I could have done this with TweenMax's handy little onUpdate function as well).
-
import gs.TweenMax;
-
import fl.transitions.easing.*;
-
import flash.display.Bitmap;
-
import flash.display.BitmapData;
-
-
var container:Sprite = new Sprite();
-
-
var b:Box = new Box();
-
b.x = b.y = 0;
-
container.addChild(b);
-
-
var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
-
var bmp:Bitmap = new Bitmap(bmd);
-
this.addChild(bmp);
-
-
TweenMax.to(b, 1.5, {x: 525, y: 375, ease: Regular.easeOut, onComplete: doComplete});
-
-
function doComplete():void
-
{
-
this.removeEventListener(Event.ENTER_FRAME, drawAnimation);
-
}
-
-
this.addEventListener(Event.ENTER_FRAME, drawAnimation);
-
-
function drawAnimation($evt:Event):void
-
{
-
bmd.fillRect(bmd.rect, 0);
-
bmd.draw(container);
-
}
The key line here is the following in the drawAnimation method:
-
bmd.fillRect(bmd.rect, 0);
What this does is basically fill's the area of the BitmapData object with a transparency by using the size of the BitmapData's rectangle to define the area to fill. A VERY handy little trick to know when working with BitmapData. If you take out this line of code you will see that the box is still moving across but leaving "streaks" behind it, also a cool little effect in its own way.
I'm not posting the source file to this simply because the code is all posted above and there is nothing else to the file except a MovieClip in the library with the linkage identifier of "Box" exported for ActionScript. Nothing groundbreaking there.
If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.
11 Comments
Og2t,
That certainly works but that just clears an area like you stated. I wanted a quick way to clear the whole thing. Essentially they are doing the same thing just with different rectangles.
no, it doesnt... i searched the docs for both as2 and as3, there is no BitmapData.clear() method.
Why are you insisting on arguing everything posted on my blog? I post this stuff to help others, not to argue over what is the proper way or what methods exist and dont. if you don't find it useful, nobody is holding you to reading it, just move along.
For the past two days all you've done is criticized random posts and throughout that came with only one suggestion that was actually viable. other than that, you do not do your research and do not read the classes for the most part, just look at the examples and refer to that in your criticism. If you think I'm being rude, I'm only replying in the temperament that I read your posts in, so if you want to be spoken to like a normal reader, comment like a normal reader. That's all I'm going to say on this whole thing and leave it at that.
Maybe it was this one i meant: dispose()
import flash.display.BitmapData;
var myBitmapData:BitmapData = new BitmapData(100, 80, false, 0x00CCCCCC);
var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc.attachBitmap(myBitmapData, this.getNextHighestDepth());
mc.onPress = function() {
myBitmapData.dispose();
}
If you copy/paste my code into a new FLA and replace the fillrect line with the dispose line, it doesnt work and throws errors. you would have to re-setup the bitmapdata everytime which is much more processor heavy than simply using the fillrect to clear it and redraw into it.
Hey Matt, just used this little trick on a project I'm working on- worked like a charm. Sadly, it's top secret at the moment but I'll show you once the wraps are off.
I was thinking of more efficient way of clearing area of a BitmapData, let's say you've got a big full-screen Bitmap and you draw some object each frame at a different position. Of course you don't want to clear everything on every frame and that could be achieved by using getColorBoundsRect method to get a rectangle containing you object.
Something like:
var maskColor:uint = 0xFFFFFF;
var color:uint = 0xFF0000;
var redBounds:Rectangle = bmd.getColorBoundsRect(maskColor, color, true);
trace(redBounds);
bmd.fillRect(redBounds, 0);
Just thought it could be a nice tip