Button コントロールはよく使用される四角形のボタンです。Button コントロールの表面にはテキストラベルやアイコンが表示され、実際に押せるような外観を備えています。オプションで複数の Button 状態のそれぞれにグラフィックスキンを指定できます。

標準 Button コントロールまたはトグル Button コントロールを作成できます。標準 Button コントロールは、コントロールの選択後マウスボタンが押されている限りダウン状態に留まります。トグル Button コントロールは、2 回目に選択されるまでダウン状態に留まります。

通常、ボタンはイベントリスナーを使用して、ユーザーがコントロールを選択したときのアクションを実行します。Button コントロールのマウスをクリックしたときに Button コントロールが有効である場合は、click イベントと buttonDown イベントが送出されます。ボタンは、有効か無効かにかかわらず、mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown、mouseUp などのイベントを必ず送出します。

次に Button コントロールの例を示します。

ボタンをアプリケーションの外観と機能に合わせてカスタマイズするには、カスタマイズしたグラフィックスキンを使用します。Button コントロールには、アップ状態、ダウン状態および無効状態に対応して異なるイメージスキンを設定でき、ボタンが選択されているかどうかに応じてこれらの状態のスキンを変えることができます。このコントロールは、イメージスキンを動的に変更できます。

次の例は、HBox レイアウトコンテナに配置されているビデオの録画と再生を制御する 7 つの Button コントロールを示しています。すべてのボタンはアップ状態となっています。

Button コントロールの作成

Button コントロールは、次の例に示すように、<mx:Button> タグを使用して MXML で定義します。MXML で他の場所（別のタグ内または ActionScript ブロック内）にあるコンポーネントを参照する場合は、id 値を指定します。次のコードは、Button コントロールを作成し、「Hello world!」というラベルを指定する例です。

<?xml version="1.0"?>
<!-- controls\button\ButtonLabel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Button id="button1" label="Hello world!" width="100"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Button コントロールのアイコン（指定されている場合）およびラベルは、Button コントロールの領域内の中央に配置されます。labelPlacement プロパティに right、left、bottom、top のいずれかを指定することにより、テキストラベルをアイコンとの位置関係で配置できます。

Button コントロールへのアイコンの埋め込み

Button アイコンは、コンパイル時に埋め込む必要があります。Button アイコンを実行時に参照することはできません。icon プロパティの値として @Embed シンタックスを使用すると、GIF、JPEG、PNG、SVG または SWF のファイルを埋め込むことができます。または、[Embed] メタデータを使用して、スクリプトブロック内で定義したイメージをバインドすることが可能です。ボタンのグラフィックを実行時に参照する必要がある場合は、<mx:Image> タグを <mx:Button> タグの代わりに使用できます。

リソースを埋め込むことについて詳しくは、アセットの埋め込みを参照してください。

次のコード例は、Button コントロールを作成し、ラベルとアイコンを指定しています。

<?xml version="1.0"?>
<!-- controls\button\ButtonLabelIcon.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Button 
        label="Icon Button" 
        icon="@Embed(source='assets/logo.jpg')"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

アイコンは、アプリケーションファイルを含むディレクトリの assets サブディレクトリ内にあります。これで、ボタンのアイコンがラベルテキストの左側に表示されます。

リソース埋め込みの概要については、アセットの埋め込みを参照してください。

Button コントロールのサイズ設定

Flex ではデフォルトで、ラベルとアイコンのサイズ、およびアイコンの周囲に確保される 6 ピクセル分の余白に合わせて Button コントロールの幅が調整されます。このデフォルトの幅は、Button コントロールの width プロパティに特定の値または親コンテナに対する比率を明示的に設定することによりオーバーライドできます。パーセント値を指定した場合、親コンテナのサイズ変更に合わせて、ボタンのサイズが幅の最大値と最小値の範囲内で変化します。

サイズを明示的に指定した Button コントロールにラベル全体を表示できるだけの領域が存在しない場合、ラベルは切り詰められて、省略記号（...）で終わりになります。マウスを Button コントロール上に移動すると、ラベル全体がツールヒントとして表示されます。tooltip プロパティを使用してツールヒントも設定している場合は、ラベルテキストではなくツールヒントが表示されます。

例えば、ラベルテキストのうち、Button コントロールの高さを越える部分も描画されません。サイズを明示的に指定した Button コントロールにアイコン全体を表示できるだけの領域が存在しない場合、そのアイコンは Button コントロールの境界ボックスを越えて描画されます。

Button コントロールのユーザー操作

ユーザーが Button コントロール上でマウスをクリックすると、Button コントロールから click イベントが送出されます。次にその例を示します。

<?xml version="1.0"?>
<!-- controls\button\ButtonClick.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Input field. -->
    <mx:TextInput id="myInput" width="150" text=""/>

    <!-- Button control that triggers the copy. -->
    <mx:Button id="myButton" label="Copy Text"
        click="myText.text=myInput.text;"/>

    <!-- Output text box. -->
    <mx:TextArea id="myText" text="" width="150" height="20"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、Button コントロールがクリックされると TextInput コントロールから TextArea コントロールにテキストがコピーされます。

Button コントロールが有効になっている場合、次のように動作します。

• マウスポインタを Button コントロール上に移動すると、Button コントロールがロールオーバー状態であることを示す外観に変わります。
• Button コントロールをクリックすると、その Button コントロールにフォーカスが移動し、ボタンが押された状態であることを示す外観に変わります。マウスボタンを離すと、Button コントロールの外観がロールオーバー状態に戻ります。
• マウスポインタを押し下げたまま Button コントロールの範囲外に移動すると、Button コントロールは元の状態に戻ります。フォーカスは維持されます。
• toggle プロパティが true に設定されている場合は、Button コントロール上でマウスボタンを離さない限り、ボタンの状態は変化しません。

無効状態の Button コントロールは、ユーザーの操作に関係なく無効状態の外観で表示されます。無効状態では、マウスやキーボードのすべての操作が無視されます。

Button コントロールのスキン適用

各プロパティが異なるボタン状態に対応する、最大 8 つの異なるイメージスキンプロパティのセットを指定できます。これらのスキンによって、ボタンの基本的な外観が決まります。次のボタン状態のそれぞれについてイメージを指定できます。

• アップ（マウスがコントロール上にない）
• ダウン（マウスがコントロール上にあり、マウスボタンが押されている）
• オーバー（マウスがコントロール上を移動している）
• 無効
• 選択済みでアップ
• 選択済みでダウン
• 選択済みでオーバー
• 選択済みで無効

Button コントロールのデフォルトの外観を指定するには、アップ状態のイメージ（upSkin プロパティ）を指定します。他のすべての状態は、デフォルトとしてアップ状態のイメージまたは別の状態のイメージを使用します。例えば、ダウン状態のイメージを指定しなかった場合、オーバー状態に指定されたイメージが使用されます。オーバー状態のイメージを指定しなかった場合、アップ状態のイメージが使用されます。選択した状態は、選択した（押した）トグルボタンにのみ使用されます。

スキンイメージによって、シェイプを含めたボタンの外観が決まります。イメージには、GIF、JPEG、PNG、SVG、または SWF ファイルを使用できます。スキンを独立したイメージファイルとして作成するか、複数のイメージを 1 つの SWF ファイルに組み込むことができます。

ボタンイメージは、コンパイル時にアプリケーションの SWF ファイルに埋め込む必要があります。イメージを実行時にサーバーからダウンロードすることはできません。イメージを埋め込むには、@Embed MXML コンパイラディレクティブを使用します。次のコード例は、GIF ファイルをアップ（デフォルト）状態のボタンイメージとして使用する方法を示しています。

upSkin="@Embed(source='assets/buttonUp.gif')"

次のコード例は、トグルボタンを作成し、アップ、ダウン、オーバー、無効の各状態のイメージを指定しています。ボタンにはラベルとアイコンの両方が指定されています。

<?xml version="1.0"?>
<!-- controls\button\ButtonSkin.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Button label="Image Button" 
    toggle="true" 
    color="0xFFFFAA" 
    textRollOverColor="0xAAAA55" 
    textSelectedColor="0xFFFF00"
    upSkin="@Embed(source='assets/buttonUp.gif')"
    overSkin="@Embed(source='assets/buttonOver.gif')"
    downSkin="@Embed(source='assets/buttonDown.gif')"
    disabledSkin="@Embed(source='assets/buttonDisabled.gif')"
    icon="@Embed(source='assets/logo.gif')"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。