Take the 2-minute tour ×

I'm trying to make a button in Flash Builder 4.5 that is multi-lined (specific line break, both are left justified), with the second line being italicized. I can do this by making a button, and throwing a label on top of it, but it wrecks the button functionality where that label sits.

Is there an easy functionality to do this, or is it starting to step into custom skins? (I've looked at it, but I'm pretty new to FB, and it looks like a steep learning curve)

share|improve this question
add comment

4 Answers

Yeah, you definitely want skinning. It's fairly easy since it generates all the code for you. You just need to find the label for the button and modify it to your will.

Sorry to say, but this is the only way to do it properly. If what you're trying to do is just hack it together, I don't think you should be touching code...

share|improve this answer
yeah, it's not so much because I'm incapable, just freaking lazy. As far as I've found there is nothing to do what I want currently. –  travistravis May 21 '11 at 22:14
add comment

Minor clarification/addition: While having multiple lines in the button label is as easy as setting the 'maxDisplayedLines' attribute of the 'labelDisplay' in the skin to anything larger than '1', s:Label does NOT support multiple styles; i.e. you can't have one line regular and the second line italic.


share|improve this answer
add comment

To create a multi-lined Label of a Button:

  1. Skin your Button (Simplest way: Create Skin from the Design view)
  2. In the Skin, scroll to where you see the Label with the id="labelDisplay"
  3. Set a Fixed Width to that Label in the Skin & you're Done!

Once you populate the label property of the Button, it'll auto multi-line for you

share|improve this answer
add comment

There was nothing I've found to do what I wanted to do (I did find Flexlib and canvasButton, but it didn't seem to work for me)

What I ended up doing is making my own "simulated" buttons. A container with 2 lines of labels (one normal, one italic, like I wanted) with another container over it. mouseOver and mouseOut and click were all bound to the top container to make it seem like one large button. (I also used some alpha transparency to simulate highlighting.

For the curious (or other beginners with similar issue) -this is what I've done

    <s:BorderContainer id="bottomContainer" x="129" y="99" width="200" height="44" backgroundColor="#EEEEEE"
                   borderVisible="false" cornerRadius="6">
    <s:Label id="encLabel1" x="48" y="8" color="#000000" fontFamily="Arial"
             text="Create a new encounter"/>
    <s:Label id="encLabel2" x="48" y="24" color="#000000" fontStyle="italic"
             text="Single encounter"/>
    <s:Image x="10" y="10" source="assets/001_01.png"/>
<s:BorderContainer id="coverContainer" x="129" y="99" width="200" height="44" backgroundColor="#000000"
                       borderVisible="false" cornerRadius="6" alpha=".1" mouseOver="alphaOver(event)" mouseOut="alphaOver(event)" click="trace('working')">
share|improve this answer
I'd be happy to use skins, but haven't been able to find a way to make a skin with 2 different styles in it - (One line italic, one line non-italic.) Anything constructive to give? I've looked a lot since the original post, and nothing I've found leads me to believe you can modify button skins to have multiple labels, with different styles. –  travistravis May 22 '11 at 8:04
I have, and have searched adobe forums, but it seems like skinning is mostly for appearance, not to change functionality, and as far as I can tell, buttons only have support for a single label. I can make it into a multi-line label easily, but not 2 different lines, with 2 different styles. If you have a link to prove otherwise, I'd be happy and grateful for the direction. –  travistravis May 22 '11 at 20:29
add comment

Your Answer


