텍스트 생성 및 표시

Flash Player 10 이상, Adobe AIR 1.5 이상

Flash Text Engine을 구성하는 클래스를 사용하여 텍스트를 만들고 제어하며 텍스트에 서식을 지정할 수 있습니다. 다음 클래스는 Flash Text Engine을 사용하여 텍스트를 만들고 표시하기 위한 기본 구성 블록입니다.

  • TextElement/GraphicElement/GroupElement - TextBlock 인스턴스의 내용 포함

  • ElementFormat - TextBlock 인스턴스 내용의 서식 특성 지정

  • TextBlock - 텍스트 단락을 구성하는 팩토리

  • TextLine - TextBlock에서 만들어진 텍스트 행

텍스트를 표시하려면 String에서 TextElement 객체를 만들고 ElementFormat 객체를 사용하여 서식 지정 특성을 지정합니다. TextElement를 TextBlock 객체의 content 속성에 할당합니다. TextBlock.createTextLine() 메서드를 호출하여 표시할 텍스트 행을 만듭니다. createTextLine() 메서드가 지정된 폭에 알맞은 길이의 문자열을 포함하는 TextLine 객체를 반환합니다. 전체 문자열이 여러 행으로 서식이 지정될 때까지 반복해서 메서드를 호출합니다. 더 이상 만들 행이 없으면 TextBlock 객체의 textLineCreationResult 속성에 TextLineCreationResult.COMPLETE 값이 할당됩니다. 행을 표시하려면 적절한 x y 위치 값을 사용하여 표시 목록에 행을 추가합니다.

예를 들어 다음 코드는 이러한 FTE 클래스를 사용하여 기본 서식 및 글꼴 값으로 "Hello World! This is Flash Text Engine!"을 표시합니다. 이 간단한 예제에서는 텍스트 행이 하나만 만들어집니다.

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() 을 호출하여 텍스트 행을 만듭니다. 다음 예제에서는 두 개의 텍스트 행, 즉 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로, 해당 그룹을 구성하는 텍스트, 그래픽 및 그룹 요소를 가리킵니다. 다음 예제에서는 두 개의 그래픽 요소와 하나의 텍스트 요소를 그룹화하여 하나의 단위로 텍스트 블록에 할당합니다.
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 인스턴스의 텍스트를 대체할 수 있습니다.

다음 예제에서는 replaceText() 를 사용하여 먼저 행 시작 부분에 텍스트를 삽입한 후 행 끝 부분에 텍스트를 추가하고, 마지막으로 행 중간의 텍스트를 바꿉니다.
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 로 지정된 문자를 새 텍스트로 바꿉니다.