Flash CS3 ドキュメンテーション

ActionScript 2.0 の学習 > テキストとストリングの操作 > CSS スタイルによるテキストのフォーマット > 外部 CSS ファイルのロード

外部 CSS ファイルのロード

外部の CSS ファイル内でスタイルを定義しておき、そのファイルをスタイルシートオブジェクトにロードすることができます。CSS ファイル内で定義したスタイルがスタイルシートオブジェクトに追加されます。外部 CSS ファイルをロードするには、TextField.StyleSheet クラスの load() メソッドを使用します。CSS ファイルのロードの完了を判断するには、スタイルシートオブジェクトの onLoad イベントハンドラを使用します。

次の例では、外部 CSS ファイルを作成してロードし、TextField.StyleSheet.getStyleNames() メソッドを使用して、ロードしたスタイルの名前を取得します。

外部スタイルシートをロードするには :

1. 任意のテキストエディタまたは CSS エディタを使用して、ファイルを作成します。
2. 作成したファイルに次のスタイル定義を追加します。

   .bodyText {
       font-family: Arial,Helvetica,sans-serif;
       font-size: 12px;
   }
   
   .headline {
       font-family: Arial,Helvetica,sans-serif;
       font-size: 24px;
   }
   

3. この CSS ファイルを "styles.css" として保存します。
4. Flash で新規 FLA ファイルを作成します。
5. タイムライン内で ([ウィンドウ]-[タイムライン])、レイヤー 1 を選択します。
6. [アクション] パネルを開きます ([ウィンドウ]-[アクション])。
7. [アクション] パネルに次のコードを追加します。

   var styles:TextField.StyleSheet = new TextField.StyleSheet();
   styles.onLoad = function(success:Boolean):Void {
       if (success) {
           // スタイル名を表示
           trace(this.getStyleNames());
       } else {
           trace("Error loading CSS file.");
       }
   };
   styles.load("styles.css");
   

   メモ

   前のコードでは、this.getStyleNames() は ActionScript の 1 行目で作成した styles オブジェクトを参照します。

8. この FLA ファイルを "styles.css" と同じディレクトリに保存します。
9. Flash ドキュメントをテストします ([制御]-[ムービープレビュー])。

   [出力] パネルに次の 2 つのスタイル名が表示されるはずです。

   .bodyText,.headline
   

   [出力] パネルに "CSS ファイルのロード中にエラーが発生しました" と表示された場合は、FLA ファイルと CSS ファイルを同じディレクトリに保存しているか、CSS ファイルの名前を正しく指定しているかを確認してください。

ネットワーク経由でデータをロードするその他すべての ActionScript メソッドと同様に、この場合も、CSS ファイルとそれをロードする SWF ファイルを同じドメイン内に配置する必要があります。詳細については、ネットワーク API の制限を参照してください。Flash で CSS を使用する方法の詳細については、『ActionScript 2.0 リファレンスガイド』の「StyleSheet (TextField.StyleSheet)」を参照してください。

実行時に SWF ファイルにロードするテキストに CSS フォーマットを適用する方法を示すサンプルのソースファイル "formattedText.fla" については、Flash サンプルページ (www.adobe.com/go/learn_fl_samples_jp) を参照してください。"Samples" zip ファイルをダウンロードし解凍して、"ActionScript2.0/LoadText" フォルダに移動してサンプルにアクセスします。

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00000910.html

コメントの追加