lineto & setmask don't work

[digitalecartoon]

I've got a movieclip of a rectangle in my library which I place on stage to attachMovie. Then I create an empty movieclip which I want to use as a mask on that rectangle clip through setMask. Users kan draw into that empty movieclip. My intention is that only those areas of the rectangle clip become visible where the user is drawing a line. So I used this:

_root.attachMovie("clip", "clip", 0);
_root.createEmptyMovieClip("line", 1);
clip.setMask(line);
_root.onMouseDown = function() {
    line.moveTo(_xmouse, _ymouse);
    line.lineStyle(10, 0x00FF00, 100);
    this.onMouseMove = function() {
        line.lineTo(_xmouse, _ymouse);
        updateAfterEvent();
    };
};
_root.onMouseUp = function() {
    this.onMouseMove = null;
};

But that doesn't work: both the line drawn and the rectangle clip become invisible. I know it works because without the setMask part the line is drawn. The other way around does work (line.setMask(clip)): the rectangle clip is now masking the drawn line so only the line becomes visible within the rectangle region. But I want it the other way around: the rectangle should become visible through the lines that are drawn!

Why do both clips now become invisible and how can I make this happen? See attached file.

[dawsonk]

_root.attachMovie("clip","clip",0);
_root.createEmptyMovieClip("line",1);
line.setMask(clip);
_root.onMouseDown = function() {
	line.moveTo(_xmouse,_ymouse);
	line.lineStyle(10,0x00FF00,100);
	this.onMouseMove = function() {
		line.lineTo(_xmouse,_ymouse);
		updateAfterEvent();
	};
};
_root.onMouseUp = function() {
	this.onMouseMove = null;
};

[digitalecartoon]

@dawsonk: no, that's just the other way around. Now the rectangle is serving as a mask to the line being drawn. I want the line being drawn serve as a mask of the rectangle.

I found the answer in the help files I think:
Flash ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer.
So lineTo is not an option combined with setmask. I could use this instead:

_root.attachMovie("clip","clip",0);
_root.createEmptyMovieClip("line",1);
clip.setMask(line);
_root.onMouseDown = function() {
    this.onMouseMove = function() {
        beginX = _xmouse;
        beginY = _ymouse;
        line.moveTo(beginX,beginY);
        line.beginFill(0x0000FF,100);
        line.lineTo(beginX+10,beginY);
        line.lineTo(beginX+10,beginY+10);
        line.lineTo(beginX,beginY+10);
        line.lineTo(beginX,beginY);
        line.endFill();
        updateAfterEvent();
    };
};
_root.onMouseUp = function() {
    this.onMouseMove = null;
};

Which basically draws 10 by 10 squares at the mouse's location upon moving the mouse. But that would leave gaps from one mouse location to the other when moving the mouse fast.

How could I imitate a lineTo using beginFill/EndFill? So that not only the starting point (upon a mouse click) gets a 10x10 square and the end point (from moving from one mouse location to the next) gets a 10x10 square, but also all locations in between those mouse locations?

[digitalecartoon]

Well, I found a way to do it with lineTo too: using cacheasbitmap.


After adding these two lines, the mask is drawn in realtime like I wanted.

_root.attachMovie("clip","clip",0);
_root.createEmptyMovieClip("line",1);
clip.setMask(line);
clip.cacheAsBitmap = true;
line.cacheAsBitmap = true;
_root.onMouseDown = function() {
    line.moveTo(_xmouse,_ymouse);
    line.lineStyle(10,0x00FF00,100);
    this.onMouseMove = function() {
        line.lineTo(_xmouse,_ymouse);
        updateAfterEvent();
    };
};
_root.onMouseUp = function() {
    this.onMouseMove = null;
};