R – Flex Button with one color on left & another on right

I've been dealing with this issue myself, off and on and in various forms, for a year, and while I haven't figured out just what's causing it yet, there's clearly a mismeasurement happening somewhere along the line.

What I have been able to to, though, is work around it, essentially by subclassing button-type controls (in my case, Button, LinkButton, PopUpButton, et. al.) and assigning their textField members instances of a UITextField extension whose truncateToFit element simply returns false in all cases:

public class NonTruncatingUITextField extends UITextField
{
    public function NonTruncatingUITextField ()
    {
        super();
    }

    override public function truncateToFit(s:String = null):Boolean
    {
        return false;
    }
}

The custom component just extends Button (or whatever other button-type control is the culprit -- I've created a half-dozen or so of these myself, one for each type of control), but uses a NonTruncatingTextField as its label, where specified by the component user:

public class NonTruncatingButton extends Button
{
    private var _truncateLabel:Boolean;

    public function NonTruncatingButton()
    {
        super();

        this._truncateLabel = true;
    }

    override protected function createChildren():void
    {
        if (!textField)
        {
            if (!_truncateLabel)
                textField = new NonTruncatingUITextField();
            else
                textField = new UITextField();

            textField.styleName = this;

            addChild(DisplayObject(textField));
        }

        super.createChildren();
    }

    [Inspectable]
    public function get truncateLabel():Boolean
    {
        return this._truncateLabel;
    }

    public function set truncateLabel(value:Boolean):void
    {
        this._truncateLabel = value;    
    }   
}

... so then finally, in your MXML code, you'd reference the custom component thusly (in this case, I'm telling the control never to truncate its labels):

<components:NonTruncatingButton id="btn" label="Click This" truncateLabel="false" />

I agree it feels like a workaround, that the component architecture ought to handle all this more gracefully, and that it's probably something we're both overlooking, but it works; hopefully it'll solve your problem as you search for a more definitive solution. (Although personally, I'm using it as-is, and I've moved on to other things -- time's better spent elsewhere!)

Good luck -- let me know how it works out.

I would try with a tweening engine... something like this:

function flash() {
   TweenLite.to(button, .5, {tint:0xFF0000, onComplete:unflash});
}
function unflash() {
   TweenLite.to(button, .3, {removeTint:true, onComplete:flash});
}

function deleteFlashing(e) {
   TweenLite.killTweensOf(button);
   TweenLite.to(button, .2, {removeTint:true});
}