Question

I’m not having any success, getting a background to show at 0.5 alpha on a mouseover, with a Sprite as the parent of a TextArea. The best I can get is the text appearing at 0.5 transparency on MouseOver, which is completely not what I’m looking for. I want the text at maximum alpha regardless of Mouse State and only the background(Sprite) to appear at half transparency on MouseOver. I’d rather avoid tweens if possible. Here’s my code:

var textSprite:Sprite  = new Sprite();

    public function Main()
    {
        textSprite.graphics.beginFill(0x000000, 0);
        textSprite.graphics.drawRect(94.95, 80.95, 390, 130); 
        textSprite.graphics.endFill();
        textSprite.addChild(picArea1);//textarea added on stage, same dimensions, transparent background
        textSprite.buttonMode = true;
        textSprite.useHandCursor = true;
        stage.addChild(textSprite);


        textSprite.addEventListener(MouseEvent.MOUSE_OVER, applyAlpha);
        textSprite.addEventListener(MouseEvent.MOUSE_OUT, noApplyAlpha);
    }

    function applyAlpha(event:MouseEvent):void {
       textSprite.alpha = 0.5;
    }

    function noApplyAlpha(event:MouseEvent):void {
       textSprite.alpha = 0;
    }

Answer 1

Setting the sprite’s alpha also affects all of it’s children (by design) which is your current issue.

The way you’re currently doing it (drawing the background with the graphics object), you’d have to redraw the graphics of the sprite on mouse over/out.

Here is method you could use:

public function Main()
{
    drawTextBG(); //a new function I made to avoid duplicating code
    textSprite.addChild(picArea1);//textarea added on stage, same dimensions, transparent background
    textSprite.buttonMode = true;
    textSprite.useHandCursor = true;
    stage.addChild(textSprite);


    textSprite.addEventListener(MouseEvent.MOUSE_OVER, applyAlpha);
    textSprite.addEventListener(MouseEvent.MOUSE_OUT, noApplyAlpha);
}

//new function I made, this draws the background and makes the transparency the value passed in. I set the default to 1 (totally visible)
function drawTextBG(bgAlpha:Number = 1):void {
    textSprite.graphics.clear();
    textSprite.graphics.beginFill(0x000000, bgAlpha);
    textSprite.graphics.drawRect(94.95, 80.95, 390, 130); 
    textSprite.graphics.endFill();
}

function applyAlpha(event:MouseEvent):void {
   drawTextBG(.5); //redraw the background with half (.5) alpha
}

function noApplyAlpha(event:MouseEvent):void {
   drawTextBG(); //redraw the background with the default value (1 - totaly visible)
}

Now, if your using a TLF (text-layout-framework) text field you can just use the backgroundColor and backgroundAlpha properties of the text field and forgo drawing a background manually.