Would an Image or a Rect with several Lines be better for implementing a trapezoidal button in Flex 4?

Question

We're using Flex 4.6 for the current project, and I decided I wanted to put some buttons on the right-hand edge of the screen that essentially just looked like simple tabs, hence having a symmetrical trapezoidal shape. The problem? I understand why Flex wouldn't have trapezoids built in, but it's apparently neither are triangles, and implementing a triangle in Flex is evidently just unnatural.

To implement these buttons, the two main options I see are:

1: Inherit from Image and embed some pngs with transparent backgrounds or something.

2: Inherit from Group, let the rectangular part of the button be a Rect, and let the triangular parts each be a collection of 1-width Lines.

Which would be more efficient? Which would be better in general? I know these approaches are unnatural, but despite the issues I'm seeing with Flex, is there a Flex-style way of handling this that's better? Thanks!

Answer 1

You can easily draw basic shapes like these using Path

Triangle

<s:Path data="M 0 0 L 5 10 L 10 0 Z">
    <s:stroke>
        <s:SolidColorStroke color="0x000000"/>
    </s:stroke>
</s:Path>

Trapezoid

<s:Path data="M 0 0 L 10 0 L 7 5 L 3 5 Z">
    <s:stroke>
        <s:SolidColorStroke color="0x000000"/>
    </s:stroke>
</s:Path>

Legend

• M: move to (don't draw)
• L: draw line to
• Z: close the shape

For more info read the docs

Answer 2

If you look at the ButtonSkin class source code, you can see how they create the stock Button skin. Essentially, they use classes layered upon one another and modify those attributes based on the state.

Whenever I need a new Button skin, I start with the standard Button skin and replace the examples to get you started. It's kind of painful at first, but once you get the hang of the Path and Graphic component you can fly.