外部 CSS ファイルのロード

CSS を使用してフォーマットを適用する手法は、実行時に外部ファイルから CSS 情報をロードできる場合にはいっそう強力なものになります。CSS データがアプリケーション自体の外部にある場合、ActionScript 3.0 のソースコードを変更しなくても、アプリケーションのテキストの視覚的なスタイルを変更することができます。アプリケーションをデプロイした後、外部 CSS ファイルを変更することによってアプリケーションの外観を変更できます。このとき、アプリケーションの SWF ファイルを再度デプロイする必要はありません。

StyleSheet.parseCSS() メソッドは、CSS データが含まれているストリングを変換して、StyleSheet オブジェクトにスタイル宣言として格納します。次の例は、外部 CSS ファイルを読み取り、そのファイルに含まれるスタイル宣言を TextField オブジェクトに適用する方法を示しています。

まず、ロードする CSS ファイルの内容を示します。このファイルには example.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 オブジェクトに転送されます。