ColorTransform
applies to the whole MovieClip
regardless of what's drawn in its graphics property. You could either redraw the rectangle each time you need to:
import flash.display.Sprite;
function drawRect(target:Sprite, clr:Number):void{
target.graphics.clear();
target.graphics.beginFill(clr);
target.graphics.lineStyle(1,0x000000);
target.graphics.drawRect(0,0,6,6);
target.graphics.endFill();
}
function changeColor(e:MouseEvent):void{
drawRect(Sprite(e.target), 0x00ffff);
}
function changeColorBack(e:MouseEvent):void{
drawRect(Sprite(e.target), 0xffff00);
}
var rect:Sprite = new Sprite();
rect.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
rect.addEventListener(MouseEvent.MOUSE_OUT, changeColorBack);
this.addChild(rect);
drawRect(rect, 0xffff00);
Or, if you're set on using ColorTransform
for some reason, you could build your outlined rectangle out of two separate Sprites
(an outer and an inner) and target the inner Sprite
only with the ColorTransform
:
import flash.display.Sprite;
function getRectangle(w:Number, h:Number, x:Number, y:Number, clr:Number):Sprite{
var sprite:Sprite = new Sprite();
sprite.name = "rectName";
sprite.graphics.beginFill(clr);
sprite.graphics.drawRect(x, y, w, h);
sprite.graphics.endFill();
return sprite;
}
function changeColor(e:MouseEvent):void{
var newColor:ColorTransform = new ColorTransform();
newColor.color = 0x00ffff;
inner.transform.colorTransform = newColor;
}
function changeColorBack(e:MouseEvent):void{
var newColor:ColorTransform = new ColorTransform();
newColor.color = 0xffff00;
inner.transform.colorTransform = newColor;
}
var rect:Sprite = new Sprite();
rect.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
rect.addEventListener(MouseEvent.MOUSE_OUT, changeColorBack);
this.addChild(rect);
// Outer rectangle for the outline
var outer:Sprite = getRectangle(8, 8, 0, 0, 0x000000);
rect.addChild(outer);
// Smaller inner rectangle which can be targeted with the color transform
var inner:Sprite = getRectangle(6, 6, 1, 1, 0xffff00);
rect.addChild(inner);