テキストの作成と表示

Flash Player 10 以降、Adobe AIR 1.5 以降

Flash Text Engine を構成するクラスにより、テキストの作成、フォーマット、および制御が可能になります。次のクラスは、Flash Text Engine でのテキストの作成と表示のための基本的な構成要素です。

  • TextElement/GraphicElement/GroupElement - TextBlock インスタンスのコンテンツが格納されています。

  • ElementFormat - TextBlock インスタンスのコンテンツのフォーマット属性を指定します。

  • TextBlock - テキストの段落を構築するためのファクトリです。

  • TextLine - TextBlock から作成したテキストの行です。

テキストを表示するには、ElementFormat オブジェクトを使用してフォーマット特性を指定して、String から TextElement オブジェクトを作成します。TextElement を TextBlock オブジェクトの content プロパティに割り当てます。 TextBlock.createTextLine() メソッドを呼び出して、表示するテキストの行を作成します。 createTextLine() メソッドは、指定された幅に収まるだけの文字列を含む TextLine オブジェクトを返します。文字列全体が行にフォーマットされるまで、このメソッドを繰り返し呼び出します。作成する行がなくなると、TextBlock オブジェクトの textLineCreationResult プロパティが値 TextLineCreationResult.COMPLETE に割り当てられます。行を表示するには、行を(位置を示す適切な x 値および y 値を指定して)表示リストに追加します。

例えば、次のコードではこれらの FTE クラスを使用して、形式およびフォントのデフォルト値で「Hello World! This is Flash Text Engine!」を表示します。この単純な例で作成されるのは、わずか 1 行のテキストです。

package 
{ 
    import flash.text.engine.*; 
    import flash.display.Sprite; 
     
    public class HelloWorldExample extends Sprite 
    { 
        public function HelloWorldExample() 
        { 
            var str = "Hello World! This is Flash Text Engine!"; 
            var format:ElementFormat = new ElementFormat(); 
            var textElement:TextElement = new TextElement(str, format); 
            var textBlock:TextBlock = new TextBlock(); 
            textBlock.content = textElement; 
             
            var textLine1:TextLine = textBlock.createTextLine(null, 300); 
            addChild(textLine1); 
            textLine1.x = 30; 
            textLine1.y = 30; 
        } 
    } 
}

createTextLine() のパラメーターは、新しい行を開始する行および行の幅(ピクセル単位)を指定します。新しい行を開始する行は、通常は前の行ですが、最初の行の場合、この値は null になります。

GraphicElement オブジェクトと GroupElement オブジェクトの追加

GraphicElement オブジェクトを TextBlock オブジェクトに割り当てると、イメージまたはグラフィックエレメントを表示することができます。グラフィックまたはイメージから GraphicElement クラスのインスタンスを作成し、それを TextBlock.content プロパティに割り当てるだけです。通常どおりに TextBlock.createTextline() を呼び出してテキスト行を作成します。次の例では、2 つのテキスト行を作成します。一方のテキスト行には GraphicElement オブジェクトが含まれ、他方には TextElement オブジェクトが含まれます。
package 
{ 
    import flash.text.engine.*; 
    import flash.display.Sprite; 
    import flash.display.Shape; 
    import flash.display.Graphics; 
 
    public class GraphicElementExample extends Sprite 
    { 
        public function GraphicElementExample() 
        { 
            var str:String = "Beware of Dog!"; 
     
            var triangle:Shape = new Shape(); 
            triangle.graphics.beginFill(0xFF0000, 1); 
            triangle.graphics.lineStyle(3); 
            triangle.graphics.moveTo(30, 0); 
            triangle.graphics.lineTo(60, 50); 
            triangle.graphics.lineTo(0, 50); 
            triangle.graphics.lineTo(30, 0); 
            triangle.graphics.endFill(); 
     
            var format:ElementFormat = new ElementFormat(); 
            format.fontSize = 20; 
             
            var graphicElement:GraphicElement = new GraphicElement(triangle, triangle.width, triangle.height, format); 
            var textBlock:TextBlock = new TextBlock(); 
            textBlock.content = graphicElement; 
            var textLine1:TextLine = textBlock.createTextLine(null, triangle.width); 
            textLine1.x = 50; 
            textLine1.y = 110; 
            addChild(textLine1); 
     
            var textElement:TextElement = new TextElement(str, format); 
            textBlock.content = textElement; 
            var textLine2 = textBlock.createTextLine(null, 300); 
            addChild(textLine2); 
            textLine2.x = textLine1.x - 30; 
            textLine2.y = textLine1.y + 15; 
        } 
    } 
}
GroupElement オブジェクトを作成して、TextElement、GraphicElement およびその他の GroupElement オブジェクトのグループを作成できます。GroupElement は、TextBlock オブジェクトの content プロパティに割り当てることができます。 GroupElement() コンストラクターのパラメーターは Vector です。Vector はグループを構成するテキスト、グラフィック、およびグループエレメントを参照します。次の例では、2 つのグラフィックエレメントおよびテキストエレメントをグループにまとめ、それらを 1 つの単位としてテキストブロックに割り当てます。
package 
{ 
    import flash.text.engine.*; 
    import flash.display.Sprite; 
    import flash.display.Shape; 
    import flash.display.Graphics; 
     
    public class GroupElementExample extends Sprite 
    { 
        public function GroupElementExample() 
        { 
            var str:String = "Beware of Alligators!"; 
 
            var triangle1:Shape = new Shape(); 
            triangle1.graphics.beginFill(0xFF0000, 1); 
            triangle1.graphics.lineStyle(3); 
            triangle1.graphics.moveTo(30, 0); 
            triangle1.graphics.lineTo(60, 50); 
            triangle1.graphics.lineTo(0, 50); 
            triangle1.graphics.lineTo(30, 0); 
            triangle1.graphics.endFill(); 
             
            var triangle2:Shape = new Shape(); 
            triangle2.graphics.beginFill(0xFF0000, 1); 
            triangle2.graphics.lineStyle(3); 
            triangle2.graphics.moveTo(30, 0); 
            triangle2.graphics.lineTo(60, 50); 
            triangle2.graphics.lineTo(0, 50); 
            triangle2.graphics.lineTo(30, 0); 
            triangle2.graphics.endFill(); 
             
            var format:ElementFormat = new ElementFormat(); 
            format.fontSize = 20; 
            var graphicElement1:GraphicElement = new GraphicElement(triangle1, triangle1.width, triangle1.height, format); 
            var textElement:TextElement = new TextElement(str, format); 
            var graphicElement2:GraphicElement = new GraphicElement(triangle2, triangle2.width, triangle2.height, format); 
            var groupVector:Vector.<ContentElement> = new Vector.<ContentElement>(); 
            groupVector.push(graphicElement1, textElement, graphicElement2); 
            var groupElement = new GroupElement(groupVector); 
            var textBlock:TextBlock = new TextBlock(); 
            textBlock.content = groupElement; 
            var textLine:TextLine = textBlock.createTextLine(null, 800); 
            addChild(textLine); 
            textLine.x = 100; 
            textLine.y = 200; 
        } 
    } 
}

テキストの置換

TextElement.replaceText() を呼び出して、 TextBlock.content プロパティに割り当てた TextElement 内のテキストを置換することにより、TextBlock インスタンスのテキストを置換できます。

次の例では、 repaceText() を使用して、行の先頭にテキストを挿入した後、行末にテキストを追加し、最後に行の中央のテキストを置換します。
package 
{ 
    import flash.text.engine.*; 
    import flash.display.Sprite; 
 
    public class ReplaceTextExample extends Sprite 
    { 
        public function ReplaceTextExample() 
        { 
     
            var str:String = "Lorem ipsum dolor sit amet"; 
            var fontDescription:FontDescription = new FontDescription("Arial"); 
            var format:ElementFormat = new ElementFormat(fontDescription); 
            format.fontSize = 14; 
            var textElement:TextElement = new TextElement(str, format); 
            var textBlock:TextBlock = new TextBlock(); 
            textBlock.content = textElement; 
            createLine(textBlock, 10); 
            textElement.replaceText(0, 0, "A text fragment: ");  
            createLine(textBlock, 30);  
            textElement.replaceText(43, 43, "...");   
            createLine(textBlock, 50);     
            textElement.replaceText(23, 28, "(ipsum)"); 
            createLine(textBlock, 70); 
        } 
             
        function createLine(textBlock:TextBlock, y:Number):void { 
            var textLine:TextLine = textBlock.createTextLine(null, 300); 
            textLine.x = 10; 
            textLine.y = y; 
            addChild(textLine); 
        } 
    } 
}

replaceText() メソッドは、 beginIndex パラメーターおよび endIndex パラメーターによって指定されたテキストを newText パラメーターによって指定されたテキストで置換します。 beginIndex パラメーターと endIndex パラメーターの値が同じである場合は、 replaceText() はその位置に指定されたテキストを挿入します。それ以外の場合は、 beginIndex および endIndex によって指定された文字を新しいテキストで置換します。