CODEWITHSUNDEEP
actionscript-3apache-flexbutton
Stian Berg Larsen
Stian Berg Larsen

Reputation: 553

Flex AS3 - Custom buttons

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!

Upvotes: 1

Views: 1056

Answers (3)

Gunnar Karlsson
Gunnar Karlsson

Reputation: 28470

This tutorial on how to do button skinning in Flex 4 goes through the process step by step.

Flex 4 also enables easy-to-implement 3d effects (which you mentioned in your question).

Upvotes: 0

Brian Genisio
Brian Genisio

Reputation: 48127

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

enter image description here

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.

Upvotes: 3

Larusso
Larusso

Reputation: 1151

When youre working with flex then why don`t use the flex components and skin them?

Upvotes: 0

Related Questions