Question

I need some input..
What would be the best (well, recommended) way to implement custom buttons inside Flash Builder?

What I mean by custom buttons, is that I need to show for example a building with 5 floors (in 3d view). The user can then click each of the floor, to update the main view to show the currently selected floor.

In previous examples I’ve simply added one invisible layer below the image, which contains one solid color for each button (each floor). Clicking the image triggers a function that checks what color is selected, and then triggers the action I want.

Are there any better ways of doing this?

Maybe importing an external SWF that communicates with the main app to send the floor-switching commands? (Not that I know how to communicate from an imported external SWF to the main app, only the other way around).

Any input would be great =)

Thanks!

Answer 1

EDIT

After your question, I whipped up something quickly to show that buttons can be of any shape. If you want the floors to be selectable, then you probably want a ToggleButton, not a Button so I have re-worked my example a bit and the result is what you described

Why not use the Flex 4.0 Skinning capability? You get the behavior (and states) of the button component with your own look/feel:

<s:ToggleButton skinClass="FloorButton" y="0"  />
<s:ToggleButton skinClass="FloorButton" y="25" />
<s:ToggleButton skinClass="FloorButton" y="50" />

You define your button skin (FloorButton) with some images:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                   alpha.disabledStates="0.5">

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.ToggleButton")]
    ]]>
    </fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>

    <s:Path data="M 0 0 L 20 20 L 40 0 L 40 20 L 20 40 L 0 20">
        <s:fill>
            <s:SolidColor color="#AAAAAA" color.selectedStates="#000000" color.over="#777777" />
        </s:fill>
    </s:Path>

</s:SparkButtonSkin>

Of course, the path can be replaced with a PNG with transparency to achieve a similar effect.