情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Flashで文章のフェードイン表示?(ルビ付き)

Flashで文章をフェードイン表示させていくクラスです。

<使い方>

以下のような形式でXMLを定義します。

<Text>
         <Line>
                   <Body>しとしと降りしきる雨は冷たいけれど</Body>
                   <Rubies>
                            <Ruby position="4">ふ</Ruby>
                            <Ruby position="9">あめ</Ruby>
                            <Ruby position="11">つめ</Ruby>
                   </Rubies>
         </Line>
         <Line>
                   <Body>植物に潤いを与えてくれる</Body>
                   <Rubies>
                            <Ruby position="0">しょく</Ruby>
                            <Ruby position="1">ぶつ</Ruby>
                            <Ruby position="3">うるお</Ruby>
                            <Ruby position="6">あた</Ruby>
                   </Rubies>
         </Line>
         ・・・
</Text>

XMLを第1引数に、描画するコンテナを第2引数に指定して、オブジェクトを作り、Startメソッドを呼びます。Startメソッドの第1引数にはアニメーション時間を指定しますが、精度が悪いです。

var text:Text = new Text(xml, this);

text.Start(13000);

α値を設定するには埋め込みフォントを使う必要があるので、埋め込みフォントで描画しています。Flashの開発環境で埋め込みフォントを適切に設定しておいてください。↓の場合メイリオになっていますが、変えたい場合はクラスの内部設定を変えてください。

ルビは指定された文字の中央に表示するようにしています。自分のサイト用に急いで作ったものなので、ルビの重なりの回避などは考えていません。

<スクリーンショット>

下のように順にフェードインしていきます。

<Textクラス>

package
{
    import flash.display.*;
    import flash.text.*;
    import flash.utils.Timer;
    import flash.events.TimerEvent;

    public class Text
    {
        private var xml:XML = null;
        private var container:DisplayObjectContainer = null;

        private var letters:Array = new Array();

        private var timer:Timer = null;

        private var x:int = 0;
        public function get X():int
        {
            return x;
        }
        public function set X(_x:int):void
        {
            x = _x;
        }

        private var y:int = 0;
        public function get Y():int
        {
            return y;
        }
        public function set Y(_y:int):void
        {
            y = _y;
        }

        private var fontSize:int = 24;
        public function get FontSize():int
        {
            return fontSize;
        }
        public function set FontSize(_fontSize:int):void
        {
            fontSize = _fontSize;
        }

        private var fontColor:int = 0xFFFFFF;
        public function get FontColor():int
        {
            return fontColor;
        }
        public function set FontColor(_fontColor:int):void
        {
            fontColor = _fontColor;
        }

        private var rubyFontSize:int = 12;
        public function get RubyFontSize():int
        {
            return rubyFontSize;
        }
        public function set RubyFontSize(_rubyFontSize:int):void
        {
            rubyFontSize = _rubyFontSize;
        }

        private var rubyFontColor:int = 0xFFFFFF;
        public function get RubyFontColor():int
        {
            return rubyFontColor;
        }
        public function set RubyFontColor(_rubyFontColor:int):void
        {
            rubyFontColor = _rubyFontColor;
        }   

        function Text(_xml:XML, _container:DisplayObjectContainer)
        {
            xml = _xml;
            container = _container;
        }

        public function Start(time:Number):void
        {
            GenerateTextField();

            timer = new Timer(time / (letters.length + 10));
            timer.addEventListener(TimerEvent.TIMER, timer_Timer);
            timer.start();
        }

        function timer_Timer(event:TimerEvent):void
        {
            trace(timer.currentCount);

            for (var i:int = 0; i < 10; i ++)
            {
                if (i - 10 + timer.currentCount - 1 >= 0 && i - 10 + timer.currentCount - 1 <= letters.length - 1)
                {
                    letters[i - 10 + timer.currentCount - 1].letter.alpha = (10 - i) * 0.1;
                    if (letters[i - 10 + timer.currentCount - 1].ruby)
                    {
                        letters[i - 10 + timer.currentCount - 1].ruby.alpha = (10 - i) * 0.1;
                    }
                }
            }

            if (timer.currentCount >= letters.length + 10)
            {
                timer.removeEventListener(TimerEvent.TIMER, timer_Timer);
            }
        }

        function GenerateTextField():void
        {
            for (var i:int = 0; i < xml.*.Body.length(); i ++)
            {
                var str:String = xml.Line[i].Body.toString();

                for (var i2:int = 0; i2 < str.length; i2 ++)
                {
                    var textFormat:TextFormat = new TextFormat();
                    textFormat.font = "メイリオ";
                    textFormat.size = fontSize;
                    textFormat.color = fontColor;

                    var textField:TextField = new TextField();
                    textField.x = x + fontSize * i2;
                    textField.y = y + (fontSize + rubyFontSize) * i + rubyFontSize;
                    textField.width = container.width;
                    textField.selectable = false;
                    textField.embedFonts = true;
                    textField.defaultTextFormat = textFormat;
                    textField.alpha = 0.0;
                    textField.text = str.charAt(i2);

                    var letter:Object = new Object();
                    letter.letter = textField;

                    letters.push(letter);
                    container.addChild(textField);
                }

                for (var j:int = 0; j < xml.Line[i].Rubies.Ruby.length(); j ++)
                {
                    var textFormat2:TextFormat = new TextFormat();
                    textFormat2.font = "メイリオ";
                    textFormat2.size = rubyFontSize;
                    textFormat2.color = rubyFontColor;

                    var textFieldRuby:TextField = new TextField();
                    textFieldRuby.x = x + int(xml.Line[i].Rubies.Ruby[j].@position.toString()) * fontSize + fontSize / 2 - rubyFontSize * xml.Line[i].Rubies.Ruby[j].toString().length / 2;
                    textFieldRuby.y = y + (fontSize + rubyFontSize) * i;
                    textFieldRuby.width = container.width;
                    textFieldRuby.selectable = false;
                    textFieldRuby.embedFonts = true;
                    textFieldRuby.defaultTextFormat = textFormat2;
                    textFieldRuby.alpha = 0.0;
                    textFieldRuby.text = xml.Line[i].Rubies.Ruby[j].toString();

                    letters[letters.length - (str.length - int(xml.Line[i].Rubies.Ruby[j].@position.toString()))].ruby = textFieldRuby;
                    container.addChild(textFieldRuby);
                }
            }
        }
    }
}
pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-Flash