Using a mask over a transparant background (Flash)

Hi,

I'm having a hard time with this and I'm hoping someone can point me in the right direction.

First some details about what I am trying to achieve:
I'm making a Flash file with Actionscript 3. The SWF I'm creating is supposed to be a scratchcard with a dynamic background (i.e. the covered picture and the location of the SWF can change).

When starting the front is a grey square (the covered part). Behind it is a picture. The goal is that the SWF can be placed anywhere on a website and after scratching the picture is shown, with the background of the website.

What I have/know:
- I have at least some experience with Flash
- The .fla has a corresponding .as file so the graphics and code are seperated
- I know the basics of working with a mask

Two scenarios I have tried

Place a grey square on the stage
Add the picture on a different layer (PNG with transparent background)
Run the file

Result: the scratching works on the part that contains the picture, but the background stays gray

Place a grey square on the stage
Add the picture on a different layer, with a white square behind it
Set publishing settings (HTML tab) to transparant
Run the file

Result: the scratching works and all the grey disappears, but the background on the end is white

The picture I mention above is a MovieClip with a 5 frames timeline, each containing a part from one long PNG file. According to the position in the timeline, one of the symbols is masked behind the square. This all works fine.
The only thing missing is that the background on the end is not transparant and that is really what I want to achieve.

My code:

package
{
//display
import flash.display.Sprite;
import flash.display.MovieClip;
//ui
import flash.ui.Mouse;
//events
import flash.events.MouseEvent;

public class Kraslot extends MovieClip
{
    //************************************
    //variables
    //************************************
    var mouseclick:Number;
    var mask_mc:Sprite;

    //************************************
    //constructor
    //************************************
    public function Kraslot()
    {           
        //create and add mask
        mask_mc = new Sprite();                     
        symbool_mc.mask = mask_mc; //symbool_mc is the picture                      
        addChild(mask_mc);
        symbool_mc.gotoAndStop(3); //to see if going to another frame works

        //mouse event listeners
        stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseD);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseM);
        stage.addEventListener(MouseEvent.MOUSE_UP, mouseU);

        mask_mc.cacheAsBitmap = true;
        symbool_mc.cacheAsBitmap = true;
    }

    //mouse down event
    public function mouseD(event:MouseEvent):void 
    {
        mouseclick = 1;
    }

    //************************************
    //methods
    //************************************
    //mouse move event
    public function mouseM(event:MouseEvent):void 
    {
        if (mouseclick == 1) 
        {
            mask_mc.graphics.beginFill(0x000000);
            //draws a diamond shape
            mask_mc.graphics.moveTo(mouseX + 5, mouseY - 25);
            mask_mc.graphics.lineTo(mouseX - 5, mouseY - 15);
            mask_mc.graphics.lineTo(mouseX + 10, mouseY + 10);
            mask_mc.graphics.lineTo(mouseX + 20, mouseY);
            mask_mc.graphics.lineTo(mouseX + 5, mouseY - 25);
            mask_mc.graphics.endFill();
        }
    }

    //mouse up event
    public function mouseU(event:MouseEvent):void 
    {
        mouseclick = 0;
    }
}
}

Thanks in advance for any help you can give me.

Jurgen

ansaurus

tags:

views:

answers:

Using a mask over a transparant background (Flash)

related questions