A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: Textured brush effect

  1. #1
    formerly hooligan2001 :) .hooligan's Avatar
    Join Date
    Mar 2008
    Posts
    405

    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:


    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.



    PHP Code:
    loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETEloadedGrass);
    loader.load(new URLRequest("grass.gif"));

    private function 
    loadedGrass(e:Event):void {

    bmp = new BitmapData(loader.widthloader.height);
    bmp .draw(loader);

    graphics.beginBitmapFill(bmp );
    graphics.drawRect(00550400);
    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.



    PHP Code:
    loaderTwo = new Loader();
    loaderTwo.contentLoaderInfo.addEventListener(Event.COMPLETEloadedBlack);
    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.widthloaderTwo.height);
    threshImg.draw(loaderTwo);
    bmp.threshold(threshImg,new Rectangle(550,400), new Point(),">=",0x000000FF0x000000);

    Too get this result:


    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
    World Arcade | Facebook | Twitter - Follow MEEEE! or not......

  2. #2
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    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!
    Last edited by neznein9; 05-27-2009 at 11:33 AM.

  3. #3
    formerly hooligan2001 :) .hooligan's Avatar
    Join Date
    Mar 2008
    Posts
    405
    Thanks heaps neznein9!!!! Appreciate it.
    World Arcade | Facebook | Twitter - Follow MEEEE! or not......

  4. #4
    formerly hooligan2001 :) .hooligan's Avatar
    Join Date
    Mar 2008
    Posts
    405
    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.
    World Arcade | Facebook | Twitter - Follow MEEEE! or not......

  5. #5
    formerly hooligan2001 :) .hooligan's Avatar
    Join Date
    Mar 2008
    Posts
    405
    I just tried this with no success

    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(transtrans.rect, new Point(0,0), BitmapDataChannel.ALPHABitmapDataChannel.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.
    World Arcade | Facebook | Twitter - Follow MEEEE! or not......

  6. #6
    formerly hooligan2001 :) .hooligan's Avatar
    Join Date
    Mar 2008
    Posts
    405
    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(grassgrass.rect, new Point(0,0), 11);
                
    emptyBitmap.copyChannel(grassgrass.rect, new Point(0,0), 22);
                
    emptyBitmap.copyChannel(grassgrass.rect, new Point(0,0), 44);
                
                
    emptyBitmap.copyChannel(transtrans.rect, new Point(0,0), BitmapDataChannel.ALPHABitmapDataChannel.ALPHA);

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

    World Arcade | Facebook | Twitter - Follow MEEEE! or not......

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center