텍스트 서식 지정

TextFormat 클래스를 사용하여 서로 다른 여러 텍스트 표시 속성을 설정하고 이를 한 TextField 객체의 전체 내용 또는 특정 텍스트 범위에 적용할 수 있습니다.

다음 예제에서는 한 TextFormat 객체를 한 TextField 객체 전체에 적용하고, 또 다른 TextFormat 객체를 해당 TextField 객체 내의 특정 텍스트 범위에 적용합니다.

var tf:TextField = new TextField(); 
tf.text = "Hello Hello"; 
 
var format1:TextFormat = new TextFormat(); 
format1.color = 0xFF0000; 
 
var format2:TextFormat = new TextFormat(); 
format2.font = "Courier"; 
 
tf.setTextFormat(format1); 
var startRange:uint = 6; 
tf.setTextFormat(format2, startRange); 
 
addChild(tf);

TextField.setTextFormat() 메서드는 텍스트 필드에 이미 표시되어 있는 텍스트에만 영향을 미칩니다. TextField의 내용이 변경되는 경우 해당 서식을 다시 적용하려면 응용 프로그램에서 TextField.setTextFormat() 메서드를 다시 호출해야 할 수 있습니다. TextField defaultTextFormat 속성을 설정하여 사용자가 입력한 텍스트에 사용할 형식을 지정할 수도 있습니다.

텍스트 필드에는 일반 텍스트 또는 HTML 형식의 텍스트가 포함될 수 있습니다. 일반 텍스트는 인스턴스의 text 속성에 저장되고, HTML 텍스트는 htmlText 속성에 저장됩니다.

CSS 스타일 선언을 사용하여 서로 다른 여러 텍스트 필드에 적용할 수 있는 텍스트 스타일을 정의할 수 있습니다. CSS 스타일 선언은 응용 프로그램 코드에서 만들거나 런타임에 외부 CSS 파일에서 로드할 수 있습니다.

flash.text.StyleSheet 클래스는 CSS 스타일을 처리합니다. StyleSheet 클래스는 제한된 CSS 속성 집합을 인식합니다. StyleSheet 클래스에서 지원하는 스타일 속성의 자세한 목록은 ActionScript 3.0 참조 설명서의 flash.textStylesheet 항목을 참조하십시오.

다음 예제에서 볼 수 있는 것과 같이 코드에서 CSS를 만들고 StyleSheet 객체를 사용하여 해당 스타일을 HTML 텍스트에 적용할 수 있습니다.

var style:StyleSheet = new StyleSheet(); 
 
var styleObj:Object = new Object(); 
styleObj.fontSize = "bold"; 
styleObj.color = "#FF0000"; 
style.setStyle(".darkRed", styleObj); 
 
var tf:TextField = new TextField(); 
tf.styleSheet = style; 
tf.htmlText = "<span class = 'darkRed'>Red</span> apple"; 
 
addChild(tf);

StyleSheet 객체를 만든 후 예제 코드에서 스타일 선언 속성 집합을 포함할 단순 객체를 만듭니다. 그런 다음 StyleSheet.setStyle() 메서드를 호출하여 “.darkred”라는 스타일 시트에 새 스타일을 추가합니다. 그 다음에는 StyleSheet 객체를 TextField styleSheet 속성에 할당하여 스타일 시트 서식을 적용합니다.

CSS 스타일의 효과가 나타나려면 htmlText 속성을 설정하기 전에 TextField 객체에 스타일 시트를 적용해야 합니다.

설계상 스타일 시트가 있는 텍스트 필드는 편집할 수 없습니다. 입력 텍스트 필드가 있고 해당 필드에 스타일 시트를 할당하는 경우 해당 텍스트 필드에 스타일 시트의 속성이 표시되지만 사용자가 새 텍스트를 입력할 수는 없습니다. 또한 스타일 시트가 할당된 텍스트 필드에는 다음 ActionScript API를 사용할 수 없습니다.

• TextField.replaceText() 메서드

• TextField.replaceSelectedText() 메서드

• TextField.defaultTextFormat 속성

• TextField.setTextFormat() 메서드

텍스트 필드에 할당된 스타일 시트가 있지만 나중에 TextField.styleSheet 속성을 null로 설정하는 경우 TextField.text 및 TextField.htmlText 속성의 내용이 모두 해당 내용에 태그와 특성을 추가하여 이전에 할당된 스타일 시트의 서식을 통합합니다. 원래 htmlText 속성을 유지하려면 한 변수에 해당 속성을 저장한 후 스타일 시트를 null로 설정합니다.

CSS를 통해 서식을 지정하는 방법은 런타임에 외부 파일에서 CSS 정보를 로드할 수 있는 경우 더욱 유용합니다. CSS 데이터가 응용 프로그램 외부에 있는 경우 ActionScript 3.0소스 코드를 변경하지 않고도 응용 프로그램에서 텍스트의 시각적 스타일을 변경할 수 있습니다. 응용 프로그램을 배포한 후 응용 프로그램 SWF 파일을 다시 배포하지 않고도 외부 CSS 파일을 변경하여 응용 프로그램의 모양을 바꿀 수 있습니다.

StyleSheet.parseCSS() 메서드는 CSS 데이터가 포함된 문자열을 StyleSheet 객체의 스타일 선언으로 변환합니다. 다음 예제는 외부 CSS 파일을 읽고 TextField 객체에 해당 스타일 선언을 적용하는 방법을 보여 줍니다.

우선 example.css라는 CSS 파일의 내용을 로드합니다.

p { 
    font-family: Times New Roman, Times, _serif; 
    font-size: 14; 
} 
 
h1 { 
    font-family: Arial, Helvetica, _sans; 
    font-size: 20; 
    font-weight: bold; 
} 
 
.bluetext { 
    color: #0000CC; 
}    

다음은 example.css 파일을 로드하고 TextField 내용에 해당 스타일을 적용하는 클래스의 ActionScript 코드입니다.

package 
{ 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLLoader; 
    import flash.net.URLRequest; 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 
    import flash.text.TextFieldAutoSize; 
 
    public class CSSFormattingExample extends Sprite 
    { 
        var loader:URLLoader; 
        var field:TextField; 
        var exampleText:String = "<h1>This is a headline</h1>" +  
            "<p>This is a line of text. <span class='bluetext'>" + 
            "This line of text is colored blue.</span></p>"; 
         
        public function CSSFormattingExample():void 
        { 
            field = new TextField(); 
            field.width = 300; 
            field.autoSize = TextFieldAutoSize.LEFT; 
            field.wordWrap = true; 
            addChild(field); 
             
            var req:URLRequest = new URLRequest("example.css"); 
             
            loader = new URLLoader(); 
            loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); 
            loader.load(req); 
        } 
         
        public function onCSSFileLoaded(event:Event):void 
        { 
            var sheet:StyleSheet = new StyleSheet(); 
            sheet.parseCSS(loader.data); 
            field.styleSheet = sheet; 
            field.htmlText = exampleText; 
        } 
    } 
}

CSS 데이터가 로드되면 onCSSFileLoaded() 메서드가 StyleSheet.parseCSS() 메서드를 실행 및 호출하여 스타일 선언을 StyleSheet 객체로 전송합니다.

flash.text.TextField 클래스에서 유용한 메서드는 setTextFormat() 메서드입니다. setTextFormat()을 사용하면 텍스트 필드 일부의 내용에 특정 속성을 할당하여 사용자 입력에 응답할 수 있습니다. 예를 들어 이 메서드는 사용자가 텍스트의 일부를 선택할 때 사용자에게 텍스트 필드 내 텍스트 구문의 하위 섹션 강조를 변경해야 하거나 특정 항목이 필요하다는 것을 알려야 하는 양식에 유용합니다.

다음 예제에서는 특정 문자 범위에 TextField.setTextFormat()을 사용하여 사용자가 텍스트 필드를 클릭할 때 myTextField의 내용 중 일부의 모양이 변경되도록 합니다.

var myTextField:TextField = new TextField(); 
myTextField.text = "No matter where you click on this text field the TEXT IN ALL CAPS changes format."; 
myTextField.autoSize = TextFieldAutoSize.LEFT; 
addChild(myTextField); 
addEventListener(MouseEvent.CLICK, changeText); 
 
var myformat:TextFormat = new TextFormat(); 
myformat.color = 0xFF0000; 
myformat.size = 18; 
myformat.underline = true; 
 
function changeText(event:MouseEvent):void 
{ 
    myTextField.setTextFormat(myformat, 49, 65); 
}