We highlight and explain only the portions of the code in Example 2 that are different from the corresponding parts of the code for Example 1. In paticular, we emphasize the need for naming our dots this time; that is, for the use of 'name' property of display objects in AS3 and 'getChildByName' method. DiplayObject.name property (new to AS3) is extremely useful in many circumstances.
In Example 2 applet, dots may have two different colors, red or blue. Also, in addition to the user being able to remove dots, we have two buttons BLUE OUT, RED OUT. Each button when clicked removes all dots of the corresponding color and updates the fill. We create a numerical variable that stores the current color, and a string variable containing the name of the color. That string variable, will become a part of the name for each dot created so we will be able to tell apart blue dots from red dots.
..............
var curDotColor:Number=0x0000CC;
var curColorName:String="blue";
..............
Within the function boardClicked, to each dot being created, we assign a value to the name property of the dot. 'name' is a property of every display object. The name assigned below is the color of a new dot and its consecutive number.
spBoard.addEventListener(MouseEvent.CLICK,boardClicked);
function boardClicked(e:MouseEvent):void {
var curX:Number=spBoard.mouseX;
var curY:Number=spBoard.mouseY;
if(checkCoords(curX,curY) && numDots<200){
var currentDot:Sprite=new Sprite();
numDots+=1;
curDispNum+=1;
plotDot(currentDot);
spDotHolder.addChildAt(currentDot,spDotHolder.numChildren);
currentDot.x=curX;
currentDot.y=curY;
currentDot.name=curColorName+String(curDispNum);
currentDot.addEventListener(MouseEvent.CLICK, dotClicked);
updatePolygon();
}
}
Within the function plotDot, we draw a circle of the current color:
function plotDot(s:Sprite):void {
..............
s.graphics.beginFill(curDotColor);
..............
}
BLUE OUT and RED OUT buttons (instance names: btnColorBlue, btnColorRed) simply assign the corresponding values to the variables curDotColor and curColorName.
btnColorBlue.addEventListener(MouseEvent.CLICK,chooseBlue);
function chooseBlue(e:MouseEvent):void {
curDotColor=0x0000CC;
curColorName="blue";
}
btnColorRed.addEventListener(MouseEvent.CLICK,chooseRed);
function chooseRed(e:MouseEvent):void {
curDotColor=0xCC0000;
curColorName="red";
}
BLUE OUT button has to remove all blue dots. After the user added and deleted any number of dots of both colors, the only way to select all blue dots from children of spDotHolder is by checking if their names contain the string 'blue'. If yes, we store the name of any such child in a local Array variable. Then, we romove all those children looping through the array and using getChildByName method.
btnOutBlue.addEventListener(MouseEvent.CLICK,outBlue);
function outBlue(e:MouseEvent):void {
var i:int;
var curChild:Sprite;
var bluesNames:Array=[];
var curIndex:Number;
for(i=0;i<numDots;i++){
curChild=Sprite(spDotHolder.getChildAt(i));
if(curChild.name.indexOf("blue")>-1){
bluesNames.push(curChild.name);
}
}
for(i=0;i<bluesNames.length;i++){
curIndex=spDotHolder.getChildIndex(spDotHolder.getChildByName(bluesNames[i]));
spDotHolder.removeChildAt(curIndex);
numDots+=-1;
}
updatePolygon();
}
RED OUT button acts analogously.
Those are all the changes in the code needed for Example 2 to work.
