Question

I’m trying to create a mask out of a custom shape, is there any way to convert the shape object to a mask object? The shape is drawn dynamically in code using as3. I can’t seem to find any links to do something like this.

Here’s the code to create the application:

var numPoints:Number = 0;       //  Number of points placed. 
                                //  No dragging will work until all three points are placed.

//  Set max & min stage coordinates that the points can be dragged, and make the point diameters settable.
var xMax:Number = 455;
var xMin:Number = 5;
var yMax:Number = 305;
var yMin:Number = 5;
var circleWidth:Number = 10;

//  Boolean variables to indicate that dragging is happening so that the appropriate point follows the mouse
//  on the MOUSE_MOVE event.
var isDragging1:Boolean = false;
var isDragging2:Boolean = false;
var isDragging3:Boolean = false;
var isDragging4:Boolean = false;
var isDragging5:Boolean = false;
var isDragging6:Boolean = false;
var isDragging7:Boolean = false;
var isDragging8:Boolean = false;

//  The drawBoard is a rectangle on which the triangle will be drawn.  Colors are settable here. To change size,
//  change the variables xMin, xMax, yMin, yMax above.
var drawBoard:Sprite = new Sprite();
drawBoard.graphics.lineStyle(1, 0x000000);
drawBoard.graphics.beginFill(0xEFEF77);
drawBoard.graphics.drawRect(0, 0, xMax - xMin, yMax - yMin);
drawBoard.graphics.endFill();
drawBoard.x = xMin;
drawBoard.y = yMin;

//  Add a default drop shadow filter to the drawBoard
drawBoard.filters = [ new DropShadowFilter() ];

//  This rectangle will listen for mouse clicks in order to construct the three vertices of the triangle.
drawBoard.addEventListener(MouseEvent.CLICK, placePoint);

//  Put on the stage the board on which the triangle will be drawn.
stage.addChild(drawBoard);

//  The filled triangle consists of three lines drawn between the points. It is updated on MOUSE_MOVE once 
//  dragging starts.
var lines:Shape = new Shape();
drawBoard.addChild(lines);


//  The stage will listen for events involving dragging so that the dragging will continue to work even after
//  the mouse has rolled off of the drawBoard region.
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseUpdate);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

//  We add three points to the stage but we do not add the graphics yet.  We do specify listeners
//  at this time so when they are all placed, we will be able to drag them.

var point1:Sprite = new Sprite();
point1.addEventListener(MouseEvent.MOUSE_DOWN, startDragging1);
drawBoard.addChild(point1);

var point2:Sprite = new Sprite();
point2.addEventListener(MouseEvent.MOUSE_DOWN, startDragging2);
drawBoard.addChild(point2);

var point3:Sprite = new Sprite();
point3.addEventListener(MouseEvent.MOUSE_DOWN, startDragging3);
drawBoard.addChild(point3);

var point4:Sprite = new Sprite();
point4.addEventListener(MouseEvent.MOUSE_DOWN, startDragging4);
drawBoard.addChild(point4);

var point5:Sprite = new Sprite();
point5.addEventListener(MouseEvent.MOUSE_DOWN, startDragging5);
drawBoard.addChild(point5);

var point6:Sprite = new Sprite();
point6.addEventListener(MouseEvent.MOUSE_DOWN, startDragging6);
drawBoard.addChild(point6);

var point7:Sprite = new Sprite();
point7.addEventListener(MouseEvent.MOUSE_DOWN, startDragging7);
drawBoard.addChild(point7);

var point8:Sprite = new Sprite();
point8.addEventListener(MouseEvent.MOUSE_DOWN, startDragging8);
drawBoard.addChild(point8);

//  The reset button will stop all dragging, remove all children of drawBoard, and set numPoints back to 0.

btnReset.addEventListener(MouseEvent.CLICK, reset);

function reset(evt:MouseEvent):void {
    var i:Number;
    var n:Number = drawBoard.numChildren;

    isDragging1 = false;
    isDragging2 = false;
    isDragging3 = false;
    isDragging4 = false;
    isDragging5 = false;
    isDragging6 = false;
    isDragging7 = false;
    isDragging8 = false;

    point1.graphics.clear();
    point2.graphics.clear();
    point3.graphics.clear();
    point4.graphics.clear();
    point5.graphics.clear();
    point6.graphics.clear();
    point7.graphics.clear();
    point8.graphics.clear();
    lines.graphics.clear();

    numPoints = 0;
}

//  The next function is executed when the mouse is moved.  Note that if all points are not placed and nothing
//  is being dragged, this function does nothing.
function mouseUpdate(evt:MouseEvent):void {
    if (numPoints == 8) {                       
        if (isDragging1) {
            point1.x = goodX(evt.stageX);       //  Set x- & y-coordinates.  See below for definition of 
            point1.y = goodY(evt.stageY);       //      functions goodX & goodY
            lines.graphics.clear();             //  Remove lines shape and redraw it 
            drawLines();                        //      with updated coordinates.
        }
        if (isDragging2) {
            point2.x = goodX(evt.stageX);
            point2.y = goodY(evt.stageY);
            lines.graphics.clear();
            drawLines();
        }
        if (isDragging3) {
            point3.x = goodX(evt.stageX);
            point3.y = goodY(evt.stageY);
            lines.graphics.clear();
            drawLines();
        }
        if (isDragging4) {
            point4.x = goodX(evt.stageX);
            point4.y = goodY(evt.stageY);
            lines.graphics.clear();
            drawLines();
        }
        if (isDragging5) {
            point5.x = goodX(evt.stageX);       
            point5.y = goodY(evt.stageY);       
            lines.graphics.clear();             
            drawLines();                        
        }
        if (isDragging6) {
            point6.x = goodX(evt.stageX);
            point6.y = goodY(evt.stageY);
            lines.graphics.clear();
            drawLines();
        }
        if (isDragging7) {
            point7.x = goodX(evt.stageX);
            point7.y = goodY(evt.stageY);
            lines.graphics.clear();
            drawLines();
        }
        if (isDragging8) {
            point8.x = goodX(evt.stageX);
            point8.y = goodY(evt.stageY);
            lines.graphics.clear();
            drawLines();
        }
        evt.updateAfterEvent();
    }
}


/*  This function chooses the appropriate x-coordinate for a dragged point.  
    If thisX is in the draggable region, then we return it.  Otherwise, we return the max or min x value, 
    depending on which side of the draggable region thisX is on.
*/

function goodX(thisX:Number):Number {
    if (thisX < xMin) {
        return (xMin);
    }
    if (thisX > (xMax - circleWidth)) {
        return (xMax - circleWidth);
    }
    return (thisX);
}


//  This function chooses the appropriate y-coordinate for a dragged point in a manner similar to the previous function. 

function goodY(thisY:Number):Number {
    if (thisY < yMin) {
        return (yMin);
    }
    if (thisY > (yMax - circleWidth)) {
        return (yMax - circleWidth);
    }
    return thisY;
}

// This function manages the placement of points until all three points are placed. 
function placePoint(evt:MouseEvent):void {
    if (numPoints == 0) {
        point1.graphics.beginFill(0x7777FF);
        point1.graphics.drawCircle(0, 0, circleWidth/2);
        point1.graphics.endFill();
        point1.filters = [ new DropShadowFilter() ];
        point1.x = drawBoard.mouseX;
        point1.y = drawBoard.mouseY;
        numPoints = 1;
    }
    else if(numPoints == 1) {
        point2.graphics.beginFill(0x7777FF);
        point2.graphics.drawCircle(0, 0, circleWidth/2);
        point2.graphics.endFill();
        point2.filters = [ new DropShadowFilter() ];
        point2.x = drawBoard.mouseX;
        point2.y = drawBoard.mouseY;
        numPoints = 2;
    }
    else if (numPoints == 2) {
        point3.graphics.beginFill(0x7777FF);
        point3.graphics.drawCircle(0, 0, circleWidth/2);
        point3.graphics.endFill();
        point3.filters = [ new DropShadowFilter() ];
        point3.x = drawBoard.mouseX;
        point3.y = drawBoard.mouseY;
        numPoints = 3;
        lines.graphics.clear();
    }
    else if (numPoints == 3) {
        point4.graphics.beginFill(0x7777FF);
        point4.graphics.drawCircle(0, 0, circleWidth/2);
        point4.graphics.endFill();
        point4.filters = [ new DropShadowFilter() ];
        point4.x = drawBoard.mouseX;
        point4.y = drawBoard.mouseY;
        numPoints = 4;
        lines.graphics.clear();
    }
    else if (numPoints == 4) {
        point5.graphics.beginFill(0x7777FF);
        point5.graphics.drawCircle(0, 0, circleWidth/2);
        point5.graphics.endFill();
        point5.filters = [ new DropShadowFilter() ];
        point5.x = drawBoard.mouseX;
        point5.y = drawBoard.mouseY;
        numPoints = 5;
        lines.graphics.clear();
    }
    else if (numPoints == 5) {
        point6.graphics.beginFill(0x7777FF);
        point6.graphics.drawCircle(0, 0, circleWidth/2);
        point6.graphics.endFill();
        point6.filters = [ new DropShadowFilter() ];
        point6.x = drawBoard.mouseX;
        point6.y = drawBoard.mouseY;
        numPoints = 6;
        lines.graphics.clear();
    }
    else if (numPoints == 6) {
        point7.graphics.beginFill(0x7777FF);
        point7.graphics.drawCircle(0, 0, circleWidth/2);
        point7.graphics.endFill();
        point7.filters = [ new DropShadowFilter() ];
        point7.x = drawBoard.mouseX;
        point7.y = drawBoard.mouseY;
        numPoints = 7;
        lines.graphics.clear();
    }
    else if (numPoints == 7) {
        point8.graphics.beginFill(0x7777FF);
        point8.graphics.drawCircle(0, 0, circleWidth/2);
        point8.graphics.endFill();
        point8.filters = [ new DropShadowFilter() ];
        point8.x = drawBoard.mouseX;
        point8.y = drawBoard.mouseY;
        numPoints = 8;
        lines.graphics.clear();
        drawLines();
    }
}

//  Draws the three lines between the points with appropriate fill and adds a drop shadow.
function drawLines():void {
    lines.graphics.lineStyle(1, 0xFF0000);
    lines.graphics.beginFill(0xFF7777);
    lines.graphics.moveTo(point1.x, point1.y);
    lines.graphics.curveTo(point1.x + 50, point1.y + 50, point2.x, point2.y);
    lines.graphics.curveTo(point2.x + 50, point2.y + 50, point3.x, point3.y);
    lines.graphics.curveTo(point3.x + 50, point3.y + 50, point4.x, point4.y);
    lines.graphics.curveTo(point4.x + 50, point4.y + 50, point5.x, point5.y);
    lines.graphics.curveTo(point5.x + 50, point5.y + 50, point6.x, point6.y);
    lines.graphics.curveTo(point6.x + 50, point6.y + 50, point7.x, point7.y);
    lines.graphics.curveTo(point7.x + 50, point7.y + 50, point8.x, point8.y);
    lines.graphics.curveTo(point8.x + 50, point8.y + 50, point1.x, point1.y);
    /*lines.graphics.lineTo(point2.x, point2.y);
    lines.graphics.lineTo(point3.x, point3.y);
    lines.graphics.lineTo(point4.x, point4.y);
    lines.graphics.lineTo(point5.x, point5.y);
    lines.graphics.lineTo(point6.x, point6.y);
    lines.graphics.lineTo(point7.x, point7.y);
    lines.graphics.lineTo(point8.x, point8.y);
    lines.graphics.lineTo(point1.x, point1.y);*/
    lines.graphics.endFill();
    lines.filters = [ new DropShadowFilter() ];
}

//  The next functions "turn on" dragging for the point that is clicked, as long as all three points have
//  been placed.
function startDragging1(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging1 = true;
    }
}

function startDragging2(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging2 = true;
    }
}

function startDragging3(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging3 = true;
    }
}

function startDragging4(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging4 = true;
    }
}
function startDragging5(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging5 = true;
    }
}

function startDragging6(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging6 = true;
    }
}

function startDragging7(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging7 = true;
    }
}

function startDragging8(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging8 = true;
    }
}

//  Turns off dragging. This function is called when the mouse button is released anywhere on the stage.
function stopDragging(evt:MouseEvent):void {
    if (numPoints == 8) {
        isDragging1 = false;
        isDragging2 = false;
        isDragging3 = false;
        isDragging4 = false;
        isDragging5 = false;
        isDragging6 = false;
        isDragging7 = false;
        isDragging8 = false;
    }
}

Answer 1

Add the Shape to the display list with addChild(maskShape) and set it as a mask for your clip targetClip.mask = maskShape also you may have to set .cacheAsBitmap = true for booth clips (regarding of its contents). targetClip and maskShape should have the same parent.

PS: please post only code snippets where you have problems with in the future.
PPS: instance names in my answer do not match your code variables.