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.
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.
I'm brand new to AS3, trying to take a bitmap from the library and display it in the timeline with actionscript. Here's the code I'm using so far as per Adobe's site:
addChild(new Bitmap(new myBitmap(100, 100)));
and this works, but changing the dimensions in those brackets doesn't. How can I change the dimensions?
Also, how can I change the position of the bitmap? Right now it's at 0,0.
You first get a handler of that bitmap:
var theBitmap:Bitmap=new myBitmap();
Then, you can change its coordinates:
theBitmap.x=100;
theBitmap.y=100;
addChild(theBitmap);
In order to do scaling, you can also alter its scaleX and scaleY properties as with any other displayed object. In order to make a Bitmap object to be of certain size on screen, you have to scale it so that scaling parameter equals (new dimensions)/(old dimensions). But, if you want something else, you have to explain it further.
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.
Ok so im trying to load a bitmap image as a background using this:
screenBitmapData.copyPixels(tilesBitmapData,new Rectangle(sourceX,sourceY,tileSize,tileSize),new Point(destX,destY));
screenBitmap = new Bitmap(screenBitmapData);
addChild(screenBitmap);
This load my tiled map correctly and display it on the screen.
Now i want to add another image which will be used as my character and the frame displaying it contain my character movement and then display the image as follow:
screenBitmapData.copyPixels(playerSheetBitmapData, new Rectangle(currentSpriteColumn * CHAR_SPRITE_WIDTH, currentSpriteRow * CHAR_SPRITE_HEIGHT, CHAR_SPRITE_WIDTH, CHAR_SPRITE_HEIGHT), new Point(xPos, yPos), null, null,true);
I setted the alpha channel on my character image and this is the result when im moving around my map with it:
http://snag.gy/L2uuR.jpg
As you can see, the background image doesnt refresh. And i simply dont know how to do this. Im pretty new with flash and as3 and ive been trying for days to make it work. I know it have something to do with the copypixel or redrawing the background before i draw the sprite again... Any ideas?
You need to redraw the entire scene. All you're doing at the moment is drawing the player ontop of the result of your previous draw.
All you need to do in your case is draw the entire background each frame before you draw the character. It could look like this:
function renderScene():void
{
// Draw the background, which will replace all the current graphics
// on the Bitmap.
screenBitmapData.copyPixels(tilesBitmapData,new Rectangle(sourceX,sourceY,tileSize,tileSize),new Point(destX,destY));
// Then draw the player.
screenBitmapData.copyPixels(playerSheetBitmapData, new Rectangle(currentSpriteColumn * CHAR_SPRITE_WIDTH, currentSpriteRow * CHAR_SPRITE_HEIGHT, CHAR_SPRITE_WIDTH, CHAR_SPRITE_HEIGHT), new Point(xPos, yPos), null, null,true);
}
To actually clear the Bitmap though, you can just use fillRect() to fill it with a color (e.g. black):
// Fill the Bitmap with black.
screenBitmapData.fillRect( screenBitmapData.rect, 0x000000 );
I've a MovieClip with 10 frames and a photo (1024x768 px) in each frame. Now I'ld like to create a 174x174 px thumbnail from it and place it into a container (instance: thumb1 - thumb10)
How to make this happen?
var mc:MovieClip = new MovieClip();
var bitmapData:BitmapData = new BitmapData(mc.width, mc.height, ... );
bitmapData.draw(mc);
then just use the bitmapData to create a Bitmap and scale it the way you like.
Easiest way would be to create the thumbnails outside of Flash in a graphics editor (such as Photoshop or Paint.net). This would increase your file size slightly, but would probably work the best.
A simple way to do this in Flash, would be to give each image a Class linkage in the library, and just create a new instance of them when you need it. You can just set width and height (or scaleX and scaleY) on the Bitmaps to resize them, but make sure you set smoothing to true for each of them, or they wont look very nice.