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

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

ScrollTextクラスはhtmlのインラインフレームのようなものです。
窓(テキスト表示領域)のサイズを決定し、設定したテキストがその中に表示されます。
窓のサイズに収まらない場合は、窓内をスクロールすることが出来ます。

それでは、使用方法の説明に入ります。

インスタンスを生成します。

    var scrollText:ScrollText = new ScrollText();
    scrollText.text = "表示したいテキストを入力";
    //横幅を設定
    scrollText.width = 200;
    //縦幅を設定
    scrollText.height = 200;
    addChild( scrollText );
　　

テキストを任意の箇所で改行したい場合は”\n”を使用します。

    scrollText.text = "1行目です\n 2行目です";
　　

窓には背景色または、背景画像を設定することが可能です。

    //背景色を設定
    scrollText.background = true;
    scrollText.backgroundColor = 0xFFFFFF;

    //背景画像を設定
    scrollText.backgroundSkin = new Image( Texture.fromBitmap( new TextBG() ) );
　　

flash標準のTextFormatクラスを使用して、フォーマットを変更することが出来ます。

    var format:TextFormat = new TextFormat();

    //文字サイズを設定
    format.size = 30;

    //埋め込みフォントを使用
    scrollText.embedFonts = true;
    format.font = "使用するフォント名";

    //フォーマットを適用
    scrollText.textFormat = format;
　　　

また、全てではありませんが、表示するテキストにはhtmlタグを使用することも出来ます。

	//htmlタグを有効にする
	scrollText.isHTML = true;

	//htmlタグを使用してテキストを設定
	scrollText.text = "<font color=\"#ff0000\">Hello world</font>";
　　　

窓と枠に間隔(空白)をあけたい場合は、paddingプロパティを使用します。

    //一括で設定する場合
    scrollText.padding = 20;

    //上下左右別々で設定する場合
    scrollText.paddingTop = 1;
    scrollText.paddingBottom = 55;
    scrollText.paddingLeft = 30;
    scrollText.paddingRight = 15;
　　

スクロールした時に、バーを表示するには以下のように設定します。

    //横方向のスクロールバーを使用する場合
    scrollText.horizontalScrollBarFactory = function():ScrollBar
    {
        var scrollBar:ScrollBar = new ScrollBar();
        scrollBar.direction = ScrollBar.DIRECTION_HORIZONTAL;

        //スクロールバーのSkinを設定
        scrollBar.minimumTrackProperties.defaultSkin = new Image( Texture.fromBitmap( new BarBG() ) );
        scrollBar.thumbProperties.defaultSkin = new Image( Texture.fromBitmap( new BarTHUMB() ) );

        scrollBar.trackLayoutMode = Scroller.DEFAULT_CHILD_NAME_HORIZONTAL_SCROLL_BAR;
        return scrollBar;
    }

    //縦方向のスクロールバーを使用する場合
    scrollText.horizontalScrollBarFactory = function():ScrollBar
    {
        var scrollBar:ScrollBar = new ScrollBar();
        scrollBar.direction = ScrollBar.DIRECTION_VERTICAL;

        //スクロールバーのSkinを設定
        scrollBar.minimumTrackProperties.defaultSkin = new Image( Texture.fromBitmap( new BarBG() ) );
        scrollBar.thumbProperties.defaultSkin = new Image( Texture.fromBitmap( new BarTHUMB() ) );

        scrollBar.trackLayoutMode = Scroller.DEFAULT_CHILD_NAME_VERTICAL_SCROLL_BAR
        return scrollBar;
    }
　　

このように、ScrollTextクラスを使用すると、簡単に表示領域が固定でスクロール対応のテキスト表示窓を実装することが出来ます。
皆さんも、是非使ってみてください。

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

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

ScrollTextのサンプルコード

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 flash.text.TextFormat;

import feathers.controls.*;

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

    [Embed(source = "../res/img/bar_thumb.png")]
    private static const BarTHUMB:Class;         

    [Embed(source = "../res/img/CorkBoard01.png")]
    private static const TextBG:Class;         
	
	
	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 scrollText:ScrollText = new ScrollText();
		scrollText.text = "ScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\nScrollTextクラスで表示しています。\n";
		this.addChild( scrollText );
		scrollText.x = stage.stageWidth*0.5;
		scrollText.y = stage.stageHeight*0.5;
		scrollText.width = 500;
		scrollText.height =300;
		scrollText.pivotX = scrollText.width*0.5;
		scrollText.pivotY = scrollText.height * 0.5;
	
		//背景設定
		scrollText.backgroundSkin = new Image( Texture.fromBitmap( new TextBG() ) );
		
		//フォーマット設定
		var format:TextFormat = new TextFormat();
		format.size = 22;
		scrollText.textFormat = format;

		//パディング設定
		scrollText.padding = 20;
	
		//ScrollBarの設定
		scrollText.verticalScrollBarFactory = function():ScrollBar
		{
			var scrollBar:ScrollBar = new ScrollBar();
			scrollBar.direction = ScrollBar.DIRECTION_VERTICAL;
			scrollBar.minimumTrackProperties.defaultSkin = new Image( Texture.fromBitmap( new BarBG() ) );
			scrollBar.thumbProperties.defaultSkin = new Image( Texture.fromBitmap( new BarTHUMB() ) );
			scrollBar.trackLayoutMode = Scroller.DEFAULT_CHILD_NAME_VERTICAL_SCROLL_BAR
			return scrollBar;
		}
	}
}
    

feathers公式HP
feathers wiki

＜次回の更新について＞
次回は、feathersを使用したTextInputについてご紹介します。

---

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

---