Textured brush effect

I've currently been trying to make a drawing application in flash and have sort of hit a wall with the brush tool. What I am trying to achieve is have the brush tool draw a texture.

Like this:
http://www.freshvision.com.au/uploads/image_drawing.png

I thought I could see several ways to do it. But my biggest problem is I want to be able to keep all pixels on one bitmapData so I can export it later. Also the transparent areas need to remain transparent on export.

How I think it should work is something like this. Load in my tileable image and tile the image to a sprite, in this case the stage.

http://www.freshvision.com.au/uploads/image_grass.png

PHP Code:

---

loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedGrass);
loader.load(new URLRequest("grass.gif"));

private function loadedGrass(e:Event):void {

bmp = new BitmapData(loader.width, loader.height);
bmp .draw(loader);

graphics.beginBitmapFill(bmp );
graphics.drawRect(0, 0, 550, 400);
graphics.endFill();
} 


---

I've been testing with loading in an external image for the next part. In the final version I will draw black pixels directly to a bitmapData.

So next I load in a premade transparent image with black pixels in the spots I want to be visible.

http://www.freshvision.com.au/uploads/image_black.png

PHP Code:

---

loaderTwo = new Loader();
loaderTwo.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedBlack);
loaderTwo.load(new URLRequest("black.png")); 


---

This is the part I'm confused with. I think I'm supposed to use bitmap threshhold but not sure how.

PHP Code:

---

private function loadedBlack(e:Event) {
threshImg = new BitmapData(loaderTwo.width, loaderTwo.height);
threshImg.draw(loaderTwo);
bmp.threshold(threshImg,new Rectangle(550,400), new Point(),">=",0x000000FF, 0x000000);
} 


---

Too get this result:
http://www.freshvision.com.au/uploads/image_final.png

Am i going about this the wrong way. I feel like I'm doing the threshold on the wrong image, and not even sure on the values.

Is there a better way to achieve this effect.

2 Other ways I thought I could do this are

1. Do it is using masks but I didn't think that I could save an image with transparent areas from this.

2. Looping through all the pixels in the brushes radius when the mouse moves, check that they are black and using copy pixels off a texture that is tiled at the size of the stage.

Any thoughts? Actually after writing this post I'm thinking the later. But seems a waist not to post this :)

I haven't done it in a while but I think you could just use copyChannel to bring the alpha over from the drawn bitmap onto the texture - I think that would look something like this:

grassBMD.copyChannel(brushBMD, brushBMD.rect, new Point(0,0), BitmapDataChannel.ALPHA, BitmapDataChannel.ALPHA);

[edit] Just tested this and the code is correct - but make sure both images have a transparent channel enabled!

Thanks heaps neznein9!!!! Appreciate it.

Hmm at the moment I'm trying to tile the loaded grass graphic, using beginBitmapFill. As far as I know you can only do this on instances of Sprite?

Code:

---

bmp = new BitmapData(loader.width, loader.height);
bmp .draw(loader);

graphics.beginBitmapFill(bmp );
graphics.drawRect(0, 0, 550, 400);
graphics.endFill();

---

So now I have a sprite (mainStage) that's 550 * 400 tile the tiled graphic. Is there another way to do this also so I can tile this graphic inside a BitmapData instead? For me to use the copyChannels I need to BitmapData's?

There is only one way I think I can do that is manually tile the image inside the bitmapData.

I just tried this with no success :confused:

PHP Code:

---

package {

import flash.display.*;
import flash.geom.Point;
    
public class Main extends Sprite {
        
private var grass:Grass;
private var trans:Trans;
        
public function Main() {
            
grass = new Grass(0,0);
trans = new Trans(0,0);
            
grass.copyChannel(trans, trans.rect, new Point(0,0), BitmapDataChannel.ALPHA, BitmapDataChannel.ALPHA);
            
var finalBitmap = new Bitmap(grass);

addChild(finalBitmap);

}
}
} 


---

grass and trans are two .png images with transparency in the library the the linkage ID's are Grass and Trans.

All I get on the stage is the original grass image attached.

I managed to get it to work like this.

PHP Code:

---

package {
    
    import flash.display.*;
    import flash.geom.Point;
    
    public class Main extends Sprite {
        
        private var grass:Grass;
        private var trans:Trans;
        
        public function Main() {
            
            grass = new Grass(0,0);
            trans = new Trans(0,0);
            
            var emptyBitmap:BitmapData = new BitmapData(200,200);
            
            emptyBitmap.copyChannel(grass, grass.rect, new Point(0,0), 1, 1);
            emptyBitmap.copyChannel(grass, grass.rect, new Point(0,0), 2, 2);
            emptyBitmap.copyChannel(grass, grass.rect, new Point(0,0), 4, 4);
            
            emptyBitmap.copyChannel(trans, trans.rect, new Point(0,0), BitmapDataChannel.ALPHA, BitmapDataChannel.ALPHA);

            var finalBitmap = new Bitmap(emptyBitmap);
            
            addChild(finalBitmap);
        }
        
    }
} 


---