Question

I’m programming an flash AS3 file now, In the AS3 file i create an shape using points on the stage (which you place yourself) and then fill the parts in between. I think I’ve successfully added the shape to an array. Now I’m having problems with getting the shape on the stage after i cleared the stage.

Code here:

var numPoints:Number = 0;       //  Number of points placed. 
                                //  No dragging will work until all 7 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;

//  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(0xCCCCCC);
drawBoard.graphics.drawRect(0, 0, xMax - xMin, yMax - yMin);
drawBoard.graphics.endFill();
drawBoard.x = xMin;
drawBoard.y = yMin;


// Array

var shapeArray:Array = new Array();

//  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);

// Button 2 (Left)
bttn_add.addEventListener(MouseEvent.CLICK, toevoegen);

// Button 3 (Middle)
bttn_show.addEventListener(MouseEvent.CLICK, showit);


// adding shape to array

function toevoegen(e:Event):void
{

    // adding
    shapeArray.push( lines );

    trace(shapeArray)
}

// Shape show

function showit(e:Event):void
{

    // Show me it now!
    var shapeArray:String = lines[0];

}

//  We add 7 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);




//  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;

    point1.graphics.clear();
    point2.graphics.clear();
    point3.graphics.clear();
    point4.graphics.clear();
    point5.graphics.clear();
    point6.graphics.clear();
    point7.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 == 7) {                       
        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();
        }

        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 7 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();
        drawLines();
    }
}

//  Draws the 7 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.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(point1.x, point1.y);
    lines.graphics.endFill();
    lines.filters = [ new DropShadowFilter() ];
    trace(lines)
}

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

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

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

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

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

function startDragging7(evt:MouseEvent):void {
    if (numPoints == 7) {
        isDragging7 = 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 == 7) {
        isDragging1 = false;
        isDragging2 = false;
        isDragging3 = false;
        isDragging4 = false;
        isDragging5 = false;
        isDragging6 = false;
        isDragging7 = false;

    }
}

The error i’m getting now is

ReferenceError: Error #1069: Kan eigenschap 0 niet vinden bij
flash.display.Shape en er is geen standaardwaarde. at
TriangleDrag_fla::MainTimeline/showit()

I’m not that experienced in Flash neither do i have any background in advanced coding, however I’m eager to learn how to improve myself

In advanced Thank you, any help is welcome.

PS: If I have to provide additional information just say what

Correct code:

var numPoints:Number = 0;       //  Number of points placed. 
                                //  No dragging will work until all 7 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;

//  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(0xCCCCCC);
drawBoard.graphics.drawRect(0, 0, xMax - xMin, yMax - yMin);
drawBoard.graphics.endFill();
drawBoard.x = xMin;
drawBoard.y = yMin;


// Array

var shapeArray:Array/* of flash.display.Shape */ = [] /* of flash.display.Shape */;
var lines:Shape = new Shape();

//  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.

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);

// Button 2 (Left)
bttn_add.addEventListener(MouseEvent.CLICK, toevoegen);

// Button 3 (Middle)
bttn_show.addEventListener(MouseEvent.CLICK, showit);


// adding shape to array

function toevoegen(e:Event):void
{

    // adding
    shapeArray.push( lines );

    trace("Done that... True story")
}

// Shape show

function showit(e:Event):void
{
    trace(shapeArray.length);
  if (!shapeArray || shapeArray.length == 0)
    return; // nothing to do here

  const lines:Shape = shapeArray[0] as Shape;
   if (lines && ! lines.parent) {
}
// show it
    drawBoard.addChild(lines)

    trace()
}
//  We add 7 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);




//  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;

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

    //lines.graphics.clear();
    drawBoard.removeChild(lines);
    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 == 7) {                       
        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();
        }

        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 7 points are placed. 
function placePoint(evt:MouseEvent):void {

    //var point = new Sprite();
    //array.push(point);

    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();
        drawLines();
    }
}

//  Draws the 7 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.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(point1.x, point1.y);
    lines.graphics.endFill();
    lines.filters = [ new DropShadowFilter() ];
    trace(lines)
}

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

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

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

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

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

function startDragging7(evt:MouseEvent):void {
    if (numPoints == 7) {
        isDragging7 = 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 == 7) {
        isDragging1 = false;
        isDragging2 = false;
        isDragging3 = false;
        isDragging4 = false;
        isDragging5 = false;
        isDragging6 = false;
        isDragging7 = false;

    }
}

If anyone wants to use the code feel free

Answer 1

According to you code, lines is a new shape and no array. This is the first error.

var shapeArray:Array/* of flash.display.Shape */ = [] /* of flash.display.Shape */;
var lines:Shape = new Shape();

// what was wrong
function showit(e:Event):void
{
  // lines is a shape, no array, thus lines[0] will throw a runtime error
  // also, if you wanted to get the first shape, type the reference to
  // Shape instead to String
  var shapeArray:String = lines[0];
}

// doing it better
function showit(e:Event):void
{
  if (!shapeArray || shapeArray.length == 0)
    return; // nothing to do here

  const shape:Shape = shapeArray[0] as Shape;
  if (shape && !shape.parent) // ensure it exists and hasn't been added yet.
    addChild(shape) // show it
}