Comments前回は、FeathersのButtonクラスについてご紹介いたしました。今回は、Feathersのsliderクラスをご紹介したいと思います。スクロールバーというものをご存知でしょうか?よくボリュームコントロールに利用されていたりするもので、すぐイメージがわいた方もいると思います。Feathersのsliderクラスを使用すると、スクロールバーがとても簡単に実装することができるので、皆さんも是非使ってみてください。それでは、さっそくsliderクラスの使い方の説明に入ります。最初は、今までのオブジェクト同様の手順でインスタンスを生成します。50;次に行うのは、最小値と最大値の設定です。sliderクラスが持つ、minimum/maximumプロパティによって設定することが出来ます。テクスチャは以下のプロパティで設定します。使用している箇所になります。前回のButtonクラスと同様に、defaultSkinが通常時、downSkinが押下時の表示テクスチャです。defaultSkinは設定をしなければ表示がされないので必要となりますが、downSkinテクスチャは省略可能です。その場合、downSkinテクスチャは設定されていないので、押下時でも表示に変化はありません。minimumTrackPropertiesはsliderのbarに当たります。こちらも設定方法はthumbPropertiesと変わりません。ここまでの設定を行うと、addChildで貼り付けて使用することが可能となります。このままでは、trackを動作させることができても、その時のsliderがもつ値がいくつなのかを取得することが出来ません。その為、sliderの値を取得するためにイベントリスナーを追加する必要があります。イベントリスナーの追加時にEvent.CHANGEを指定することで、trackが動くたびにリスナー登録時に引数に渡したコールバック関数が実行されます。);}sliderの値の取得は、コールバック関数の引数であるEventから行うことが出来ます。//sliderクラスが持つ、valueプロパティを参照}値を取得するときに参照したvalueプロパティは直接設定することもでき、その場合trackは自動的に指定した位置に移動します。これを使用することで、sliderの初期位置を指定できます。trackの挙動を設定するプロパティは他にも、step/pageがあります。stepはドラッグ時のtrack移動量の設定で、値を大きく設定すると一度に動く幅が大きくなるので、なめらかなtrack移動を行いたい場合は、小さい値を設定、若しくはデフォルト設定のままの使用が良いと思います。pageはbarクリック時のtrack移動量の設定で、このプロパティを設定するとtrackのドラッグ操作以外に、barをクリックすることで設定した値分trackを移動させることが可能となります。step/pageプロパティを使用する上での注意点として、pageプロパティはstepプロパティより大きい値を設定する必要があります。0.5;Sliderクラスが持つdirectionプロパティを指定することで、縦方向に使用することも出来ます。簡単なご紹介となりましたが、以上で本記事は終了となります。最後まで御覧いただきありがとうございました。wiki<次回の更新について>次回は、FeathersのTiledImageクラスについてご紹介します。弊社では全国各地の請負い(ご自宅)で作業協力頂ける、フリーランスエンジニアの方を常時探しております。ご興味ある方は、お気軽にお問い合わせ下さい。コメントをキャンセルメールアドレスが公開されることはありません。BlogFeathersFeathersHTMLJavaScript。