[ Feathers ] オブジェクト – Button –

前回までは、starlingの機能を使用して、実装方法を説明してきました。

今回は、StarlingFrameworkを利用したUIコンポーネントの、
Feathersを使用してボタンを実装する方法を下記の流れでご紹介します。

・Feathersについて
・Feathersの導入方法
・ボタンの実装方法

【Feathersについて】
Feathersは、StarlingFramework上で動作するUIコンポーネントのことです。
実装出来るUI部品については、下記URLにあるサンプルで確認することが出来ます。
http://feathersui.com/examples/components-explorer/

【Feathersの導入方法】
※事前にStarlingが動作する環境の準備が整っている状態での導入方法となります。

1.Feathersのホームページを開きます。
http://feathersui.com/

2.画面中央にある、DOWNLOAD FEATHERS1.3.0ボタン(※1)を選択します。
※1)1.3.0は、2014.06.30時点でのバージョンです。

3.feathers-1.3.0.zipが取得できるので、解凍します。

4.解凍したら、”feathers-1.3.0″フォルダが出来上がるので、”/swc/feathers.swc”を
作成中のフラッシュプロジェクトにコピーします(※2)。
※2)私の場合は、”プロジェクトフォルダ/libs/bin”に置きました。

5.次に使用しているプロジェクトのflaの設定を行います。
　プロジェクトのflaファイルをクリックし、Flash Professional CCを起動します。

6.「ファイル」→「ActionScript設定」でActionScript詳細設定をウィンドウを表示します。

7.「ライブラリパス」に手順4でコピーしたfeathers.swcを追加して、「OK」ボタンを選択します。

ここまでで、feathersの導入は終了となります。

【ボタンの実装方法】
feathersのボタンを実装する場合は、feathersのButtonクラスを使用します。
StarlingにもButtonクラスが存在するため、feathersのButtonクラスのみをimportします。

import feathers.controls.Button;	//ボタンクラスのimport

それでは、ボタンを作成していきましょう。
ボタンの作成について、部分ごとに説明していきます。

ボタンの定義を行い、ボタンのクラスのインスタンスを作成し、座標を設定します。

		var buttonA:Button;             //ボタンAの定義
		buttonA = new Button();         //ボタンクラスの生成
		buttonA.x = 100;                //ボタンのX位置を設定
		buttonA.y = 200;                //ボタンのY位置を設定

ここまでは、Spriteの作成時と同じです。

ボタンにラベル名を設定します。このラベルはボタンを識別するために必要なものとなります。

		buttonA.label = "ButtonA";      //ボタンのラベルに名前をつける

ボタンにImageを設定します。設定したImageが表示されているタイミングは下記コードのコメントに記載しています。

		buttonA.defaultSkin = imageDef;         //通常時に表示されるボタンImageを設定
		buttonA.downSkin = imageOn;             //ボタンが押された際に表示されるImageを設定
		buttonA.hoverSkin = imageOver;          //ボタンの上にマウスカーソルが移動した際に表示されるImageを設定
		buttonA.disabledSkin = imageDis;        //ボタンの押下不可時に表示されるボタンImageを設定

ボタンの押下不可は、ボタンインスタンスの”isEnabled”をfalseに、
押下可能は、ボタンインスタンスの”isEnabled”をtrueにしますにすることで切り替えれます。
デフォルトは、trueになっています。

最後にイベントを設定して、ボタンを貼り付けてボタンの生成が完了となります。

		buttonA.addEventListener(Event.TRIGGERED, buttonTouch );
		addChild(buttonA);

TRIGGEREDは、ボタンが押下されたタイミングでコールバック関数を呼び出すイベントとなります。

次に、TRIGGEREDで呼び出される関数を実装していきます。
Eventクラスを引数とする関数を実装します。

	public function buttonTouch(evt:Event):void{
	}

引数のEventのcurrentTargetには、ボタンインスタンスが格納されているので、
ラベル名でどのボタンが押下されたか判別することが可能となります。

		var button:Button = Button( evt.currentTarget );
	   switch ( button.label ){
		   case "ButtonA":
	　                 //ここにボタン押下時の処理をいれる
			   break;

以上で、feathersのボタンの実装が完了となります。

最後まで御覧いただきありがとうございました。

ボタンのサンプルコード

import starling.core.Starling;
import starling.display.Image;
import starling.display.Sprite;
import starling.events.Touch;
import starling.events.TouchPhase;
import starling.events.TouchEvent;
import starling.textures.Texture;
import starling.events.Event;

import feathers.controls.Button;	//ボタンクラスのimport
import starling.events.Event;		//starlingEventのimport

internal class StarlinTestMain extends Sprite
{
	//各種ファイルの埋め込み
    [Embed(source = "button_def.png")]
    private static const buttonDef:Class;     
	
    [Embed(source = "button_on.png")]
    private static const buttonOn:Class;     

    [Embed(source = "button_over.png")]
    private static const buttonOver:Class;     

	[Embed(source = "button_dis.png")]
    private static const buttonDis:Class;     

    [Embed(source = "buttonB_def.png")]
    private static const buttonDef2:Class;     
	
    [Embed(source = "buttonB_on.png")]
    private static const buttonOn2:Class;     
	
	private var imageDef:Image;
	private var imageOn:Image;
	private var imageOver:Image;
	private var imageDis:Image;

	private var imageDef2:Image;
	private var imageOn2:Image;

	private var buttonA:Button;		//ボタンAの定義
	private var buttonB:Button;		//ボタンBの定義

	public function StarlinTestMain()
    {
        addEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
    }
 
    private function addStage(e:starling.events.Event):void
    {
        removeEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
         
		//ボタンA用のTexture作成
		var textureDef:Texture = Texture.fromBitmap( new buttonDef() );
		var textureOn:Texture = Texture.fromBitmap( new buttonOn() );
		var textureOver:Texture = Texture.fromBitmap( new buttonOver() );
		var textureDis:Texture = Texture.fromBitmap( new buttonDis() );
		
		//ボタンB用のTexture作成
		var textureDef2:Texture = Texture.fromBitmap( new buttonDef2() );
		var textureOn2:Texture = Texture.fromBitmap( new buttonOn2() );

		//ボタンA用のImage作成
		imageDef = new Image( textureDef );
		imageOn = new Image( textureOn );
		imageOver = new Image( textureOver );
		imageDis = new Image( textureDis );

		//ボタンB用のImage作成
		imageDef2 = new Image( textureDef2 );
		imageOn2 = new Image( textureOn2 );
		
		//ボタンAの実装
		buttonA = new Button();				//ボタンクラスの生成
		buttonA.label = "ButtonA";			//ボタンのラベルに名前をつける
		buttonA.x = 100;					//ボタンのX位置を設定
		buttonA.y = 200;					//ボタンのY位置を設定
		buttonA.defaultSkin = imageDef;		//通常時に表示されるボタンImageを設定
		buttonA.downSkin = imageOn;			//ボタンが押された際に表示されるImageを設定
		buttonA.hoverSkin = imageOver;		//ボタンの上にマウスカーソルが移動した際に表示されるImageを設定
		buttonA.disabledSkin = imageDis;	//ボタンの押下不可時に表示されるボタンImageを設定
		buttonA.addEventListener(Event.TRIGGERED, buttonTouch );
		addChild(buttonA);

		//ボタンBの実装
		buttonB = new Button();
		buttonB.label = "ButtonB";
		buttonB.x = 300;
		buttonB.y = 200;
		buttonB.defaultSkin = imageDef2;
		buttonB.downSkin = imageOn2;
		buttonB.addEventListener(Event.TRIGGERED, buttonTouch );
		addChild(buttonB);

	}
	
	public function buttonTouch(evt:Event):void{
		//ボタンのラベルで判定する
		var button:Button = Button( evt.currentTarget );
	   switch ( button.label ){
		   case "ButtonA":
			   break;
		   case "ButtonB":
			   if(buttonA.isEnabled){
				   //ボタンAを無効
				   buttonA.isEnabled = false;
			   }else{
				   //ボタンAを有効
				   buttonA.isEnabled = true;
			   }
			   break;
	   }
   }

詳しくは下記を参照ください。
http://wiki.starling-framework.org/feathers/button

＜次回の更新について＞
次回は、fethersを使用したスライダーの実装についてご紹介します。

---

弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。

---