패키지 | flash.text |
클래스 | public dynamic class StyleSheet |
상속 | StyleSheet EventDispatcher Object |
언어 버전: | ActionScript 3.0 |
런타임 버전: | AIR 1.0, Flash Player 9, Flash Lite 4 |
TextField 객체에 스타일을 적용하려면 StyleSheet 객체를 TextField 객체의 styleSheet
속성에 할당합니다.
참고: 스타일 시트가 있는 텍스트 필드는 편집할 수 없습니다. 즉, type
속성이 TextFieldType.INPUT
으로 설정된 텍스트 필드는 텍스트 필드의 기본 텍스트에 StyleSheet를 적용하지만 그 내용은 더 이상 사용자가 편집할 수 없습니다. 입력 텍스트 필드에 스타일을 적용하려면 TextFormat 클래스의 사용을 고려해 보십시오.
Flash Player는 원본 CSS1 사양(www.w3.org/TR/REC-CSS1)의 하위 속성 세트를 지원합니다. 다음 표에서는 지원되는 CSS(Cascading Style Sheet) 속성과 값, 그리고 이에 대응하는 ActionScript 속성 이름을 보여 줍니다. 각 ActionScript 속성 이름은 해당 CSS 속성 이름에서 파생된 것입니다. 이름에 하이픈이 포함되어 있으면 하이픈이 생략되고 그 뒤에 오는 문자가 대문자로 바뀝니다.
CSS 속성 | ActionScript 속성 | 구문 및 지원되는 값 |
---|---|---|
color
|
color
| 16진수 색상 값만 지원됩니다. blue 등의 명명된 색상은 지원되지 않습니다. 색상은 #FF0000 형식으로 쓰여집니다. |
display
|
display
| 지원되는 값은 inline , block 및 none 입니다. |
font-family
|
fontFamily
| 쉼표로 분리되는 글꼴 목록이며 내림차순으로 되어 있습니다. 모든 글꼴 집합 이름이 사용될 수 있습니다. 글꼴 이름을 지정하면 해당되는 장치 글꼴로 변환됩니다. mono 는 _typewriter 로 변환되고, sans-serif 는 _sans 로 변환되며, serif 는 _serif 로 변환되는 등의 글꼴 변환이 발생합니다. |
font-size
|
fontSize
| 값의 숫자 부분만 사용됩니다. 단위(px, pt)는 해석되지 않으며 픽셀과 포인트를 동일하게 처리합니다. |
font-style
|
fontStyle
| 인식되는 값은 normal 및 italic 입니다. |
font-weight
|
fontWeight
| 인식되는 값은 normal 및 bold 입니다. |
kerning
|
kerning
| 인식되는 값은 true 및 false 입니다. 자간은 포함된 글꼴에만 지원됩니다. 일부 글꼴(예: Courier New)은 자간을 지원하지 않습니다. kerning 속성은 Windows에서 만든 SWF 파일에서만 지원되고 Macintosh에서 만든 SWF 파일에서는 지원되지 않습니다. 그러나 이러한 SWF 파일은 Windows가 아닌 버전의 Flash Player에서 재생될 수 있으며 자간은 그대로 적용됩니다. |
leading
|
leading
| 행 사이에 일정하게 분배되는 간격 크기입니다. 값은 각 행 뒤에 추가되는 픽셀 수를 지정합니다. 음수 값을 사용하면 행 사이의 간격이 좁아집니다. 값의 숫자 부분만 사용됩니다. 단위(px, pt)는 해석되지 않으며 픽셀과 포인트를 동일하게 처리합니다. |
letter-spacing
|
letterSpacing
| 글자 사이에 일정하게 분배되는 간격 크기입니다. 값은 각 문자 뒤에 추가되는 픽셀 수를 지정합니다. 음수 값을 사용하면 문자 사이의 간격이 좁아집니다. 값의 숫자 부분만 사용됩니다. 단위(px, pt)는 해석되지 않으며 픽셀과 포인트를 동일하게 처리합니다. |
margin-left
|
marginLeft
| 값의 숫자 부분만 사용됩니다. 단위(px, pt)는 해석되지 않으며 픽셀과 포인트를 동일하게 처리합니다. |
margin-right
|
marginRight
| 값의 숫자 부분만 사용됩니다. 단위(px, pt)는 해석되지 않으며 픽셀과 포인트를 동일하게 처리합니다. |
text-align
|
textAlign
| 인식되는 값은 left , center , right 및 justify 입니다. |
text-decoration
|
textDecoration
| 인식되는 값은 none 및 underline 입니다. |
text-indent
|
textIndent
| 값의 숫자 부분만 사용됩니다. 단위(px, pt)는 해석되지 않으며 픽셀과 포인트를 동일하게 처리합니다. |
관련 API 요소
속성 | 정의 주체 | ||
---|---|---|---|
constructor : Object
지정된 객체 인스턴스의 클래스 객체 또는 생성자 함수에 대한 참조입니다. | Object | ||
styleNames : Array [읽기 전용]
이 스타일 시트에 등록된 모든 스타일의 이름이 문자열로 포함된 배열입니다. | StyleSheet |
메서드 | 정의 주체 | ||
---|---|---|---|
새 StyleSheet 객체를 만듭니다. | StyleSheet | ||
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
리스너에서 이벤트 알림을 받을 수 있도록 EventDispatcher 객체에 이벤트 리스너 객체를 등록합니다. | EventDispatcher | ||
스타일 시트 객체에서 모든 스타일을 제거합니다. | StyleSheet | ||
이벤트를 이벤트 흐름으로 전달합니다. | EventDispatcher | ||
styleName이라는 스타일에 연결된 스타일 객체의 복사본을 반환합니다. | StyleSheet | ||
EventDispatcher 객체에 특정 유형의 이벤트에 대한 리스너가 등록되어 있는지 여부를 확인합니다. | EventDispatcher | ||
지정된 속성이 객체에 정의되어 있는지 여부를 나타냅니다. | Object | ||
Object 클래스의 인스턴스가 매개 변수로 지정된 객체의 프로토타입 체인에 있는지 여부를 나타냅니다. | Object | ||
CSSText의 CSS를 파싱하여 연결된 스타일 시트를 로드합니다. | StyleSheet | ||
지정된 속성이 존재하고 열거 가능한지 여부를 나타냅니다. | Object | ||
EventDispatcher 객체에서 리스너를 제거합니다. | EventDispatcher | ||
루프 작업에서 동적 속성을 사용할 수 있는지 여부를 설정합니다. | Object | ||
스타일 시트 객체에 지정된 이름의 새 스타일을 추가합니다. | StyleSheet | ||
로캘별 규칙에 따라 서식이 지정된 이 객체의 문자열 표현을 반환합니다. | Object | ||
지정된 객체의 문자열 표현을 반환합니다. | Object | ||
CSS 파싱 기능을 확장합니다. | StyleSheet | ||
지정된 객체의 프리미티브 값을 반환합니다. | Object | ||
이 EventDispatcher 객체 또는 조상 객체에 지정한 이벤트 유형에 대한 이벤트 리스너가 등록되어 있는지 여부를 확인합니다. | EventDispatcher |
styleNames | 속성 |
StyleSheet | () | 생성자 |
public function StyleSheet()
언어 버전: | ActionScript 3.0 |
런타임 버전: | AIR 1.0, Flash Player 9, Flash Lite 4 |
새 StyleSheet 객체를 만듭니다.
관련 API 요소
clear | () | 메서드 |
public function clear():void
언어 버전: | ActionScript 3.0 |
런타임 버전: | AIR 1.0, Flash Player 9, Flash Lite 4 |
스타일 시트 객체에서 모든 스타일을 제거합니다.
getStyle | () | 메서드 |
public function getStyle(styleName:String):Object
언어 버전: | ActionScript 3.0 |
런타임 버전: | AIR 1.0, Flash Player 9, Flash Lite 4 |
styleName
이라는 스타일에 연결된 스타일 객체의 복사본을 반환합니다. styleName
에 연결된 스타일 객체가 없으면 null
이 반환됩니다.
매개 변수
styleName:String — 검색할 스타일의 이름을 지정하는 문자열입니다.
|
Object — Object
|
관련 API 요소
예제
예제 사용 방법
parseCSS() 또는 transform() 메서드 예제에서
getStyle()
메서드 사용법을 참조하십시오.
parseCSS | () | 메서드 |
public function parseCSS(CSSText:String):void
언어 버전: | ActionScript 3.0 |
런타임 버전: | AIR 1.0, Flash Player 9, Flash Lite 4 |
CSSText
의 CSS를 파싱하여 연결된 스타일 시트를 로드합니다. CSSText
의 스타일이 이미 styleSheet
에 있으면 styleSheet
의 속성이 유지되고 CSSText
의 스타일만 styleSheet
에서 추가되거나 변경됩니다.
원래의 CSS 파싱 기능을 확장하려면 StyleSheet 클래스의 하위 클래스를 만들어 이 메서드를 재정의하면 됩니다.
매개 변수
CSSText:String — 파싱할 CSS 텍스트(문자열)입니다.
|
예제 ( 예제 사용 방법 )
생성자에서 다수의 텍스트 필드가 생성되고 그 내용은 HTML 형식의 문자열로 설정됩니다. HTML 헤딩과 span 태그는 CSS 스타일이 적용되기 전에는 렌더링되지 않습니다. URLRequest
객체는 CSS 파일의 위치를 식별하기 위해 만들어지며 이 예제의 경우 CSS 파일은 SWF 파일과 동일한 디렉토리에 있습니다. 이 파일은 URLLoader
객체와 함께 로드됩니다. loader
URLLoader 객체를 위해 두 개의 이벤트 리스너가 추가됩니다. IO 오류가 발생하면 errorHandler()
메서드가 호출되고 텍스트 필드에 오류 메시지가 표시됩니다. 모든 데이터를 수신해서 loader
URLLoader 객체의 데이터 속성에 배치한 후에 loaderCompleteHandler()
메서드가 호출됩니다. 이 메서드는 파일에서 로드한 데이터의 CSS 스타일을 파싱해서 sheet
StyleSheet 객체를 해당 스타일 정의로 채웁니다.
사용자가 텍스트 필드를 클릭하면 clickHandler()
메서드가 호출됩니다. clickHandler()
메서드의 if 문이 스타일 시트를 텍스트 필드에 적용하기 전에 파일 로드가 완료되었는지 확인합니다. 스타일 시트가 적용되려면 스타일 시트가 텍스트 필드에 전달된 후에 htmlText
속성이 내용과 함께 재할당되어야 합니다. 헤딩 태그에 쓰이는 CSS font-family
및 color
속성 역시 텍스트 필드의 내용에 추가됩니다. 이러한 속성 값은 스타일 시트 값이 적용되지 않으면 "정의되지 않음"으로 표시됩니다.
다음은 이 예제와 함께 사용할 수 있는 CSS 파일의 내용입니다. 이 예제를 실행하기 전에, 텍스트 파일 하나를 만들고 다음 CSS 내용을 그 파일에 복사하고나서 이 파일을 test.css
라는 이름으로 저장해서 SWF 파일과 같은 디렉토리에 배치합니다.
p { font-family: Times New Roman, Times, _serif; font-size: 14; font-Style: italic; margin-left: 10; } h1 { font-family: Arial, Helvetica, _sans; font-size: 20; font-weight: bold; } .bluetext { color: #0000CC; }
package { import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.MouseEvent; public class StyleSheet_parseCSSExample extends Sprite { private var loader:URLLoader = new URLLoader(); private var field:TextField = new TextField(); private 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>"; private var sheet:StyleSheet = new StyleSheet(); private var cssReady:Boolean = false; public function StyleSheet_parseCSSExample() { field.x = 10; field.y = 10; field.background = true; field.multiline = true; field.autoSize = TextFieldAutoSize.LEFT; field.htmlText = exampleText; field.addEventListener(MouseEvent.CLICK, clickHandler); addChild(field); var req:URLRequest = new URLRequest("test.css"); loader.load(req); loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); } public function errorHandler(e:IOErrorEvent):void { field.htmlText = "Couldn't load the style sheet file."; } public function loaderCompleteHandler(event:Event):void { sheet.parseCSS(loader.data); cssReady = true; } public function clickHandler(e:MouseEvent):void { if (cssReady) { field.styleSheet = sheet; field.htmlText = exampleText; var style:Object = sheet.getStyle("h1"); field.htmlText += "<p>Headline font-family is: " + style.fontFamily + "</p>"; field.htmlText += "<p>Headline color is: " + style.color + "</p>"; } else { field.htmlText = "Couldn't apply the CSS styles."; } } } }
setStyle | () | 메서드 |
public function setStyle(styleName:String, styleObject:Object):void
언어 버전: | ActionScript 3.0 |
런타임 버전: | AIR 1.0, Flash Player 9, Flash Lite 4 |
스타일 시트 객체에 지정된 이름의 새 스타일을 추가합니다. 지정된 이름의 스타일이 아직 스타일 시트에 없으면 이 스타일이 추가됩니다. 해당 이름의 스타일이 스타일 시트에 이미 있으면 기존 스타일이 이 스타일로 바뀝니다. styleObject
매개 변수가 null
이면 해당 이름의 스타일이 제거됩니다.
Flash Player는 이 메서드에 전달한 스타일 객체의 복사본을 만듭니다.
지원되는 스타일의 목록을 보려면 StyleSheet 클래스에 대한 설명 부분에 나오는 표를 참조하십시오.
매개 변수
styleName:String — 스타일 시트에 추가할 스타일의 이름을 지정하는 문자열입니다.
| |
styleObject:Object — 스타일을 설명하는 객체 또는 null 입니다.
|
transform | () | 메서드 |
public function transform(formatObject:Object):flash.text:TextFormat
언어 버전: | ActionScript 3.0 |
런타임 버전: | AIR 1.0, Flash Player 9, Flash Lite 4 |
CSS 파싱 기능을 확장합니다. 고급 개발자는 StyleSheet 클래스를 확장하여 이 메서드를 재정의할 수 있습니다.
매개 변수
formatObject:Object — 객체의 속성으로 스타일 규칙을 포함하며 스타일을 설명하는 객체 또는 null 입니다.
|
flash.text:TextFormat — CSS 규칙을 텍스트 서식 속성에 매핑한 결과가 포함된 TextFormat 객체입니다.
|
관련 API 요소
예제 ( 예제 사용 방법 )
transform()
메서드를 사용하여 CSS 파일의 스타일을 텍스트 필드의 TextFormat 객체에 적용합니다.
CSS 스타일은 보통 HTML 내용 서식에 사용합니다. 그러나 StyleSheet 객체의 transform()
메서드를 사용하면 특정 CSS 스타일을 TextFormat 객체에 할당할 수 있고 어떤 텍스트 필드라도 적용이 가능합니다.
URLRequest
및 URLLoader
객체를 사용하면 CSS 파일을 로드할 수 있습니다. Event.COMPLETE
이벤트에 필요한 이벤트 리스너가 추가되며 이 이벤트는 모든 데이터를 수신해서 loader
URLLoader 객체의 데이터 속성에 배치했을 때 발생합니다. 그러면 loaderCompleteHandler()
메서드가 파일에서 로드한 데이터의 CSS를 파싱해서 sheet
StyleSheet 객체를 해당 스타일로 채웁니다. 스타일 시트의 getStyle()
메서드는 HTML 단락 스타일을 가져온 다음 스타일 시트의 transform()
메서드를 사용해서 cssFormat
TextFormat 객체에 할당합니다. 마지막으로, inputField
텍스트 필드의 기본 텍스트 서식은 새로운 cssFormat
텍스트 서식으로 설정됩니다.
package { import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldType; import flash.events.IOErrorEvent; import flash.events.Event; public class StyleSheet_transformExample extends Sprite { private var loader:URLLoader = new URLLoader(); private var inputField:TextField = new TextField(); private var sheet:StyleSheet = new StyleSheet(); public function StyleSheet_transformExample() { inputField.x = 10; inputField.y = 10; inputField.background = true; inputField.width = 300; inputField.height = 200; inputField.wordWrap = true; inputField.multiline = true; inputField.type = TextFieldType.INPUT; addChild(inputField); var req:URLRequest = new URLRequest("test.css"); loader.load(req); loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); } public function errorHandler(e:IOErrorEvent):void { inputField.htmlText = "Couldn't load the style sheet file."; } public function loaderCompleteHandler(event:Event):void { var cssFormat:TextFormat = new TextFormat(); sheet.parseCSS(loader.data); var style:Object = sheet.getStyle("p"); cssFormat = sheet.transform(style); inputField.defaultTextFormat = cssFormat; } } }
package { import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFieldAutoSize; public class StyleSheetExample extends Sprite { public function StyleSheetExample() { var style:StyleSheet = new StyleSheet(); var heading:Object = new Object(); heading.fontWeight = "bold"; heading.color = "#FF0000"; var body:Object = new Object(); body.fontStyle = "italic"; style.setStyle(".heading", heading); style.setStyle("body", body); var label:TextField = new TextField(); label.styleSheet = style; label.htmlText = "<body><span class='heading'>Hello </span>World...</body>"; addChild(label); } } }
Tue Jun 12 2018, 03:17 PM Z