Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><code>ColorTransform</code> applies to the whole <code>MovieClip</code> regardless of what's drawn in its graphics property. You could either redraw the rectangle each time you need to: </p> <pre><code>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); </code></pre> <p>Or, if you're set on using <code>ColorTransform</code> for some reason, you could build your outlined rectangle out of two separate <code>Sprites</code> (an outer and an inner) and target the inner <code>Sprite</code> only with the <code>ColorTransform</code>:</p> <pre><code>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); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload