# Overlapping graphics

**URL:** https://forum.kirupa.com/t/overlapping-graphics/289361
**Category:** flash
**Created:** [May 29, 2009, 11:01am UTC](https://forum.kirupa.com/t/overlapping-graphics/289361 "2009-05-29T11:01:18Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Deborah](https://avatars.discourse-cdn.com/v4/letter/d/6f9a4e/32.png) [@Deborah](https://forum.kirupa.com/u/Deborah)
#### Post date: [May 29, 2009, 11:01am UTC](https://forum.kirupa.com/t/overlapping-graphics/289361/1 "2009-05-29T11:01:18Z")

</div>

Hi,

This code draws a template example.

```auto

//charmedV2
var charmedV2:Sprite = new Sprite();
with (charmedV2.graphics) {
    lineStyle();//removes line
    beginFill(0xd6b2d4, 1);
    drawRect(0,0,239,41);//header 
    beginFill(0xe2d3b2, 1);
    drawRect(0,42,239,248);//content background 
    beginFill(0x6d5636, 1);
    drawRect(0,42,42,248);//left bar
    lineStyle(1, 0xB29679);//
    moveTo(21,42);
    lineTo(21,290);// line behind white balls
    lineStyle();//removes line
    beginFill(0xFFFFFF, 1);
    drawCircle(22,60,14);//top circle 
    drawCircle(22,92,14);//middle circle 
    drawCircle(22,124,14);//fat bottom circle
    for (var iko:int = 48; iko < 290; iko++) {
        drawCircle(233,iko,5);//Little white balls
        iko += 11;
    };
    beginFill(0xd6b2d4, 1);
    drawRect(0,291,239,22);//footer
};
addChild(charmedV2);

```

I need to split the code up into sections so that each graphic can change colors. So I broke it out into individual vars, push the vars into an array, then iterate through the array adding the children to a holder mc. When I do this, for some reason, the overlapping graphics mask each other giving unwanted results. I don’t understand why this happening or how to fix it. Any help?

```auto

//populates holder with selection
stage.addEventListener(Event.ENTER_FRAME, placeChT, false, 0, true);

//vars for element COLORS
var chHolder:MovieClip = new MovieClip();
var chlf:ColorTransform = new ColorTransform();//left footer
var chh1:ColorTransform = new ColorTransform();//headline
var chheaderC:ColorTransform = new ColorTransform();//header Color

//vars for array template elements
var chheader:Sprite;
var chfootl:Sprite;

var chV2header:Sprite = new Sprite();
with (chV2header.graphics) {
    beginFill(0xd6b2d4, 1);
    drawRect(0,0,239,41);//header 
};

var chV2fl:Sprite = new Sprite();
with (chV2fl.graphics) {
    beginFill(0xd6b2d4, 1);
    drawRect(0,291,239,22);//footer
};

var chV2images:Sprite = new Sprite();
with (chV2images.graphics) {
    lineStyle(1, 0xB29679);//
    moveTo(21,42);
    lineTo(21,290);// line behind white balls
    lineStyle();//removes line
    beginFill(0xFFFFFF, 1);
    drawCircle(22,60,14);//top circle 
    drawCircle(22,92,14);//middle circle 
    drawCircle(22,124,14);//fat bottom circle
    for (var iku:int = 48; iku < 290; iku++) {
        drawCircle(233,iku,5);//Little white balls
        iku += 11;
    };
};

var chV2Content:Sprite = new Sprite();
with (chV2Content.graphics) {
    beginFill(0xe2d3b2, 1);
    drawRect(0,42,239,248);//content background 
};
var chV2LB:Sprite = new Sprite();
with (chV2LB.graphics) {
    beginFill(0x6d5636, 1);
    drawRect(0,42,42,248);//left bar 
};

var V2chTemp:Array = new Array();
V2chTemp.push({headish: chV2header, lb: chV2LB, footl: chV2fl, content1: chV2Content, images: chV2images});

//assembles the template
function placeChT(evt:Event):void{
    for (var i1:int = 0; i1 < V2chTemp.length; i1++) {
        chHolder.addChild(V2chTemp[i1].headish);
        chHolder.addChild(V2chTemp[i1].content1);
        chHolder.addChild(V2chTemp[i1].lb);        
        chHolder.addChild(V2chTemp[i1].images);
        chHolder.addChild(V2chTemp[i1].footl);
        //names the element so its color can be changed
        //the vars are defined on lines 14 - 15
        chheader = V2chTemp[i1].headish;
        chfootl = V2chTemp[i1].footl;
    }; 
    addChild(chHolder);
};

```