Question

I’m having a flickering issue with a text control.

Here’s the context:
I have a title which is represented by a Text control (no Label cause it needs to be able to be displayed in several lines). When the user rolls over the title, the text has to be underlined.

What I have done:
I’ve set listeners to the title’s rollover and rollout events to something like this:

    private function titleHandler(e : MouseEvent) : void {
        switch(e.type) {
            case MouseEvent.ROLL_OVER: 
                _title.styleName = 'accessoriesTitleHover'; 
                break;
            case MouseEvent.ROLL_OUT: 
                _title.styleName = 'accessoriesTitle'; 
                break; 
        }
    }

Issue:
The title is flickering every time the stylename is changed (I would even say that the title disappears and reappears)

Alternative solutions I’ve tried:

• changing the underline property using setStyle (doesn’t work)
• defining .accessoriesTitle and .accessoriesTitle:hover styles in the CSS, but the hover doesn’t work =(

Would anyone know a solution or workaround this flickering thing?

Thanks for your time and help!! 🙂

Regards,
BS_C3

---

Sorry for the delay, here’s the declaration of both styles:

.accessoriesTitle{
    font-size: 13pt;
    text-decoration: none;
    leading: 1pt;
}

.accessoriesTitleHover{
    font-size: 13pt;
    text-decoration: underline;
    leading: 1pt;
}

Regards

Answer 1

I found a “hack” to fix this problem.
Without the hack, it would seem that the text was emptied before being rendered again with the underlined style. The same goes when the text goes from an underlined style to a no text decoration style.

The text was either changing its size (from current size to 0 and then to new size) or emptying the content before rendering it again.
So I set the text height and here’s what I get:

private function titleHandler(e : MouseEvent) : void {
    switch(e.type) {
        case MouseEvent.ROLL_OVER: 
            _title.height = _title.height;
            _title.styleName = 'accessoriesTitleHover';  
            break;
        case MouseEvent.ROLL_OUT:  
            _title.styleName = 'accessoriesTitle';  
            break; 
    }
}

And everything’s working fine 🙂

Thanks for ur time.
Regards,

BS_C3