プログラミング工房
TOP
Flex基本
開発環境 JavaScript連携 PHP連携1 PHP連携2(AMFPHP) ウィンドウ ボタンスキン 矩形スキン ローカルファイル(テキスト) F5等の対策 ローカルファイル(イメージ) ダウンロード、アップロード 1枚の画像のカラーを変更 時間のかかる計算処理 外部SWFの読込み
Flexで3D
Flexだけで3D Papervision3Dを使ってみる 3Dオブジェクト カメラ、前後判定の工夫しました 自由な形状を作成
Flexでクラス
Class1(白黒ゲームの盤) Class2(白黒ゲームのプレイヤー) Class3(プレイヤーを外部SWF)
PHP
共通関数1
Flexの作品
お問合せの説明 サンプルのソース表示の説明 分子構造の表示(PDBファイル) マンデルブロ集合の画像作成 swf参加型白黒ゲーム(Reversi) ストップウォッチ WEB素材
AIR
AIRを使ってみる ソースファイルのHTML変換を作る
etc.
マンデルブロ集合のギャラリー ジュリア集合のギャラリー wonderflを使ってみました お問合せ

Flex4基本-ボタンスキン

■2011.02.24:作成
サンプル サンプルのソース

Flex4のスキンについて

Flexでデザインをよくするためにスキンを使用します。
またスキンを利用するとコンポーネントに機能を追加することが出来ます。

私の場合は以下のフォルダを作成し、クラス・スキンファイルを起きます。
   src/comp:スキン用のクラス
   src/skins:スキンファイル

スキン用のクラスを利用する場合は以下の様な記述「xmlns:comp="comp.*"」を
Main.mxmlのApplicationに追加して下さい。
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:comp="comp.*">
今回はButtonのスキンを作りました。

シンプルボタン(SmpBtnSkin)

スキンの入門用にButtonの形を変える物を作りました。
Buttonの記述の所に「skinClass="skins.SmpBtnSkin"」を追加します。
(この例ではクラスを利用しないので「xmlns:comp="comp.*"」は不要です。)
<s:Button skinClass="skins.SmpBtnSkin" label="シンプルボタン"
        click="onClick(event)"/>

スキンは「/src/skins/SmpBtnSkin.mxml」で作成します。
今回はわかりやすいように最低限の記述を行います。

ソースの赤字の部分の説明
 スキンを定義するときの一番外側のタグは「s:SparkSkin」を利用します。
 「alpha.disabled="0.4"」はボタンが無効の時、alpha=0.4で薄く表示。
 元になる「spark.components.Button」を指定。
 Buttonのステータスは以下のものがあります。
   up:通常の状態
   over:マウスが上に来たとき
   down:ボタンが押されたとき
   disabled:ボタンが無効
 ボタンの状態毎の背景色を定義します。
   「color="0xeeeeee"」初期値
   「color.over="0xaaaaaa"」マウスが上に来たとき
   「color.down="0x999999"」ボタンが押されたとき
     (ボタンが無効は「alpha.disabled="0.4"」で指定)
 「id="labelDisplay"」で「label="シンプルボタン"」を表示
<?xml version="1.0" encoding="utf-8"?>
<!--
シンプルボタン
    使用方法:<s:Button skinClass="skins.SmpBtnSkin" ・・/>
-->
<s:SparkSkin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    minWidth="21" minHeight="21"
    alpha.disabled="0.4">
    
    <fx:Metadata>
        <![CDATA[[HostComponent("spark.components.Button")]]]>
    </fx:Metadata>
    
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    <!-- ボタンの形の定義(外枠付きBOX) -->
    <s:Rect x="0" y="0" radiusX="0" radiusY="0" height="100%" width="100%">
        <s:stroke>
            <s:SolidColorStroke weight="1" color="#000000" />
        </s:stroke>
        <s:fill>
            <s:SolidColor color="0xeeeeee"
                          color.over="0xaaaaaa"
                          color.down="0x999999"/>
        </s:fill>
    </s:Rect>

    <s:HGroup left="5" right="5" top="4" bottom="4"
                                      verticalAlign="contentJustify">
        <s:Label id="labelDisplay" textAlign="center" verticalAlign="middle"/>
    </s:HGroup>
</s:SparkSkin>

アイコン付きボタン(IcnBtn)

Flex4の「spark.components.Button」にはアイコンが無くなったので、「シンプルボタン」に
アイコンを付けたサンプルを作りました。

Buttonにないパラメータ「icon」を追加するでスキン用のクラスが必要になります。
(「xmlns:comp="comp.*"」の記述が必要です。)

利用する側の記述は以下の様な形です。
 「s:Button」でなく「comp:IcnBtn」を利用します。
 「icon="@Embed('img/open16.png')"」でアイコンに利用する画像を指定します。
<comp:IcnBtn label="アイコンボタン16"
       icon="@Embed('img/open16.png')" click="onClick(event)"/>

スキン用のクラスを「/src/comp/IcnBtn.as」に作成します。
 スキン「skins.IcnBtnSkin」と「spark.components.Button」をインポート
 アイコン用のパラメータ「[Style(name="icon", type="Class", inherit="no")]」を定義
 基底クラスを「Button」にします。
 スキン「IcnBtnSkin」を指定
package comp
{
    import skins.IcnBtnSkin;
    import spark.components.Button;
 
    //アイコンイメージのインターフェース「icon」の定義
    [Style(name="icon", type="Class", inherit="no")]
 
    public class IcnBtn extends Button {
        public function IcnBtn() {
            super();
            setStyle("skinClass", IcnBtnSkin);
        }
    }
}

スキン「/src/skins/IcnBtnSkin.mxml」を作成
 アイコンは「{hostComponent.getStyle('icon')}」で指定します。
    <!-- アイコンと文字の表示(横方向に並べる) -->
    <s:HGroup left="5" right="5" top="4" bottom="4" 
                       verticalAlign="contentJustify" gap="5">
        <s:BitmapImage source="{hostComponent.getStyle('icon')}"/>
        <s:Label id="labelDisplay" textAlign="center" verticalAlign="middle"/>
    </s:HGroup>

マーク付きボタン(MakBtn)

アイコンの代わりにマーク(漢字の「■」)をカラー指定で付けサンプル
 イメージの代わりにカラー「makColor="0x00ff00"」を追加します。
<comp:MakBtn label="マークボタン"
        makColor="0x00ff00" click="onClick(event)"/>

スキン用のクラスを「/src/comp/MakBtn.as」でiconの代わりにmakColorを指定
    //マークカラーのインターフェース「makColor」の定義
    [Style(name="makColor", type="uint",format="Color",inherit="no")]

スキン「/src/skins/MakBtnSkin.mxml」に関して
 overとdownでは「■」を「□」に変えます。
 カラーは「{hostComponent.getStyle('makColor')}」で取得
 disabledの時はlabelと同じカラーを使用します。
 (Buttonの既存パラメータ「color」は「{hostComponent.getStyle('color')}」で取得)
    <s:HGroup left="5" right="5" top="4" bottom="4" 
             verticalAlign="contentJustify" gap="5">
        <s:Label text="■" text.over="□" text.down="□" textAlign="center" 
                verticalAlign="middle" 
                color="{hostComponent.getStyle('makColor')}"
                color.disabled="{hostComponent.getStyle('color')}"/>
        <s:Label id="labelDisplay" textAlign="center" verticalAlign="middle" />
             :
    </s:HGroup>

ツールバーボタン(ToolBarBtn)

ツールバーで使えるボタンのスキンです。
 labelは表示しません。
<comp:ToolBarBtn id="TBnew16" icon="@Embed('img/new16.png')" 
        toolTip="新規" click="onClick2(event)"/>

スキン用のクラスを「/src/comp/ToolBarBtn.as」はアイコンボタンと同じです。

スキン「/src/skins/ToolBarBtnSkin.mxml」に関して
 2個の矩形を重ねて背景と影を出しています。
 通常の時は背景と影を表示しないでアイコンだけの表示になります。
    <!-- 背景の影の定義 -->
    <s:Rect left="2" right="0" top="2" bottom="0" radiusX="2" radiusY="2">
        <s:fill>
            <s:SolidColor color="0xcccccc"
                          color.over="0x777777"
                          color.down="0x777777"
                          alpha="0.0"
                          alpha.over="1.0"
                          alpha.down="1.0"/>
        </s:fill>
    </s:Rect>
    
    <!-- 背景本体の定義 -->
    <s:Rect left="0" right="2" top="0" bottom="2" radiusX="2" radiusY="2">
        <s:fill>
            <s:SolidColor color="0xcccccc"
                          color.over="0xaaaaaa"
                          color.down="0x999999"
                          alpha="0.0"
                          alpha.over="1.0"
                          alpha.down="1.0"/>
        </s:fill>
    </s:Rect>

プログラミング工房