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

前回は、FeathersのButtonクラスについてご紹介いたしました。
今回は、Feathersのsliderクラスをご紹介したいと思います。

スクロールバーというものをご存知でしょうか？
よくボリュームコントロールに利用されていたりするもので、すぐイメージがわいた方もいると思います。
Feathersのsliderクラスを使用すると、スクロールバーがとても簡単に実装することができるので、皆さんも是非使ってみてください。
それでは、さっそくsliderクラスの使い方の説明に入ります。

まず最初は、今までのオブジェクト同様の手順でインスタンスを生成します。

	var slider:Slider = new Slider();
	slider.x = 100;
	slider.y = 50;

次に行うのは、最小値と最大値の設定です。
sliderクラスが持つ、minimum/maximumプロパティによって設定することが出来ます。

    slider.minimum = 0;	//最小値を0に設定
    slider.minimum = 1;	//最大値を1に設定
    

テクスチャは以下のプロパティで設定します。

    slider.thumbProperties.defaultSkin = new Image( Texture.fromBitmap( new Img() ) );
    slider.thumbProperties.downSkin = new Image( Texture.fromBitmap( new Img2() ) );
    slider.minimumTrackProperties.defaultSkin = new Image( Texture.fromBitmap( new Bar() );
    slider.minimumTrackProperties.downSkin = new Image( Texture.fromBitmap( new Bar2() ) );
    

sliderのtrack(つまみ)部のテクスチャ設定に当たるのが thumbPropertiesプロパティ を使用している箇所になります。
前回のButtonクラスと同様に、defaultSkinが通常時、downSkinが押下時の表示テクスチャです。
defaultSkinは設定をしなければ表示がされないので必要となりますが、downSkinテクスチャは省略可能です。
ただしその場合、downSkinテクスチャは設定されていないので、押下時でも表示に変化はありません。
minimumTrackPropertiesはsliderのbarに当たります。
こちらも設定方法はthumbPropertiesと変わりません。

ここまでの設定を行うと、addChildで貼り付けて使用することが可能となります。

しかしこのままでは、trackを動作させることができても、その時のsliderがもつ値がいくつなのかを取得することが出来ません。
その為、sliderの値を取得するためにイベントリスナーを追加する必要があります。
イベントリスナーの追加時にEvent.CHANGEを指定することで、trackが動くたびにリスナー登録時に引数に渡したコールバック関数が実行されます。

    slider.addEventListener( Event.CHANGE, changeHandler );
    


  	private function changeHandler( evt:Event ):void
	{
        trace( "slider changed" );
	}

sliderの値の取得は、コールバック関数の引数であるEventから行うことが出来ます。

  	private function changeHandler( evt:Event ):void
	{
        var slider:Slider = evt.targe as Slider;        //Eventからsliderを取得
        trace( slider.value );                          //sliderクラスが持つ、valueプロパティを参照
	}

値を取得するときに参照したvalueプロパティは直接設定することもでき、その場合trackは自動的に指定した位置に移動します。
これを使用することで、sliderの初期位置を指定できます。

trackの挙動を設定するプロパティは他にも、step/pageがあります。
stepはドラッグ時のtrack移動量の設定で、値を大きく設定すると一度に動く幅が大きくなるので、なめらかなtrack移動を行いたい場合は、小さい値を設定、若しくはデフォルト設定のままの使用が良いと思います。
pageはbarクリック時のtrack移動量の設定で、このプロパティを設定するとtrackのドラッグ操作以外に、barをクリックすることで設定した値分trackを移動させることが可能となります。
step/pageプロパティを使用する上での注意点として、pageプロパティはstepプロパティより大きい値を設定する必要があります。

    slider.step = 0.1;
    slider.page = 0.5;

Sliderクラスが持つdirectionプロパティを指定することで、縦方向に使用することも出来ます。

    slider.direction = Slider.DIRECTION_HORIZONTAL;     //横方向のslider指定

    slider.direction = Slider.DIRECTION_VERTICAL;       //縦方向のslider指定

簡単なご紹介となりましたが、以上で本記事は終了となります。

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

Sliderのサンプルコード

import starling.core.Starling;
import starling.display.Image;
import starling.display.Quad;
import starling.display.Sprite;
import starling.textures.Texture;
import starling.events.Event;

import feathers.controls.Slider;

internal class StarlinTestMain extends Sprite
{
	//各種ファイルの埋め込み
    [Embed(source = "img.png")]
    private static const Img:Class;         
    [Embed(source = "img2.png")]
    private static const Img2:Class;     
    [Embed(source = "bar.png")]
    private static const Bar:Class;     
    [Embed(source = "bar2.png")]
    private static const Bar2:Class;     
    [Embed(source = "title-logo.png")]
    private static const Logo:Class;     
    
	private var logo1:Image;
	private var logo2:Image;

	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);

		var tex:Texture = Texture.fromBitmap( new Logo() );
		
		logo1 = new Image( tex );
		logo1.x = stage.stageWidth * 0.25;
		logo1.y = stage.stageHeight * 0.6;
		logo1.pivotX = logo1.width * 0.5;
		logo1.pivotY = logo1.height * 0.5;
		addChild( logo1 );

		logo2 = new Image( tex );
		logo2.x = stage.stageWidth * 0.75;
		logo2.y = stage.stageHeight * 0.6;
		logo2.pivotX = logo2.width * 0.5;
		logo2.pivotY = logo2.height * 0.5;
		logo2.scaleX = -1;		
		addChild( logo2 );

		
		var slider:Slider = new Slider();
		slider.x = stage.stageWidth * 0.15;
		slider.y = stage.stageHeight * 0.1;
		slider.minimum = 0;
		slider.maximum = 2;
		slider.value = 1;
		slider.page = 0.5;
		slider.step = 0.05;
		slider.thumbProperties.defaultSkin = new Image( Texture.fromBitmap( new Img() ) );
		slider.thumbProperties.downSkin = new Image( Texture.fromBitmap( new Img2() ) );
		slider.minimumTrackProperties.defaultSkin = new Image( Texture.fromBitmap( new Bar() ) );
		slider.minimumTrackProperties.downSkin = new Image( Texture.fromBitmap( new Bar2() ) );
		slider.addEventListener( Event.CHANGE, changeHandler );
		this.addChild( slider );		
		
	}
	
	private function changeHandler( evt:Event ):void
	{
		var slider:Slider = evt.target as Slider;

		logo1.scaleX = 2 - slider.value;
		logo1.scaleY = 2 - slider.value;
		
		logo2.scaleX = -slider.value;
		logo2.scaleY = slider.value;
	}
}

feahters公式HP
feathers wiki

＜次回の更新について＞
次回は、FeathersのTiledImageクラスについてご紹介します。

---

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

---