第6回　タイムラインスタイル（2）

前回は、シーンの構成や外部リンクなどのサイトの一部を作成しました。後半となる今回で、サイトを完成させます。

シーンの作成

まず、「⁠動物の写真一覧」ページにあたるシーンを作成しましょう。前回作成した「about」シーンと全く同じ作成方法になります。シーンの名前は「gallery」とします。それでは、「⁠index.fla」のアクションを開いて設定を行っていきましょう。

リスト1　「⁠gallery」シーンの作成

// シーンを作成します。
var gallery:SceneObject = new SceneObject();
// シーンに名前を設定します。
gallery.name = "gallery";
// シーンをルートに追加します。
manager.root.addScene( gallery );

子シーンの作成

続いて、「⁠動物の詳細」ページにあたるシーンを作成していきます。「⁠動物の詳細」ページは3ページありますが、これらは「gallery」シーンの下に追加されるシーンになりますので、「⁠gallery」インスタンスで「addScene()」メソッドを使用しシーンを追加します。

作成するシーンは、それぞれ「american」「⁠french」「⁠mame」シーンとなります。

リスト2　「⁠american」シーンの作成

// americanシーンを作成します。
var american:SceneObject = new SceneObject();
// シーンの名前を設定します。
american.name = "american";   
// シーンをgalleryに追加します。
gallery.addScene( american );

リスト3　「⁠french」シーンの作成

// frenchシーンを作成します。
var french:SceneObject = new SceneObject();
// シーンの名前を設定します。
french.name = "french";   
// シーンをgalleryに追加します。
gallery.addScene( french);

リスト4　「⁠mame」シーンの作成

// mameシーンを作成します。
var mame:SceneObject = new SceneObject();
// シーンの名前を設定します。
mame.name = "mame";   
// シーンをgalleryに追加します。
gallery.addScene( mame);

これで、サンプルサイトを構成するシーンはすべて完成です。

ボタンの作成

それでは、作成した「gallery」シーンに遷移するボタンの設定を行います。シンボル内にある「GalleryButton」を選択してください。前回の「AboutButton」と同じように設定を行っていきます。タイムラインに「component」レイヤーを作成し、「⁠RollOverButton」コンポーネントを設置します。コンポーネントインスペクタから「scenePath」の値を[/index/gallery]に設定します。

ロールオーバーの設定

「GalleryButton」も「トップ」ページのボタンですので「AboutButton」と同様にロールオーバーのエフェクトを設定しましょう。タイムライン上で「effect」レイヤーを作成し、シンボルから「Effect」を設置します。「⁠effect」レイヤーの1フレーム目で「Effect」のアルファ値を0に、座標を[x:-70 , y:0]に設定します。8フレーム目にキーフレームを挿入し、「⁠Effect」のアルファ値を100に、座標を[x：0 , y:0]に設定しましょう。

ボタンの表示

ボタンの設定が完了したら、ステージに配置しましょう。タイムラインの「stage」レイヤー1フレーム目で「GalleryButton」を設置します。座標は[x:0 , y:284]です。

設置が完了したら、ムービーを書き出して確認しましょう。

表示されている「GalleryButton」をクリックすると、Flash のログ上でシーン遷移しているのが確認できます。

表示オブジェクトのアニメーション設定

続いて、「⁠gallery」シーンに遷移した際に表示される表示オブジェクトの設定を行いましょう。表示されるのはシンボルとして登録してある「GalleryPage」です。

簡単なアニメーションの設定を行いましょう。「⁠AboutPage」の設定とほぼ同じです。シンボルの「GalleryPage」を選択してタイムライン上に「component」レイヤーと「label」レイヤーを作成します。「⁠component」レイヤーには「InOutMovie」コンポーネントを設置しします。「⁠label」レイヤーには1フレーム目に「in⁠」⁠、8フレーム目に「stop⁠」⁠、15フレーム目に「out」と、ラベル名をそれぞれ設定しましょう。

次に、「⁠galleryPage」レイヤーを選択して、8フレーム目と15フレーム目にキーフレームを挿入します。1フレーム目で、画像のアルファ値を0に、座標を[x：0 , y:-20]に設定します。8フレーム目でアルファ値を100に、座標を[x:0 , y:0]に設定します。15フレームで画面から消しますので、再びアルファ値を0に、座標を[x:0 , y:-20]に設定します。そして、設定したフレーム間でクラシックトゥイーンを作成します。

表示設定

設定が完了したら、アクション内でインスタンスを生成後、座標を設定して表示設定を行いましょう。座標は[x:151 , y:114]です。

リスト5　「⁠GalleryPage」の作成

// galleryPageを作成します。
var galleryPage:GalleryPage = new GalleryPage();
galleryPage.x = 151;
galleryPage.y = 114;

次に、イベントハンドラメソッドを用いて表示の設定を行っていくのですが、「⁠about」シーンでは「onSceneInit」と「onSceneGoto」イベントハンドラメソッドを使用していました。「⁠about」シーンからの遷移先はルートシーンか「gallery」シーンのみでしたが、「⁠gallery」シーンからは下の階層の子シーンに遷移することがあります。子シーンに移動するたびにオブジェクトを表示したり削除する必要もないので、「⁠galleryPage」は「onSceneLoad」「⁠onSceneUnload」イベントハンドラメソッドで設定を行いましょう。

リスト6　「⁠galleryPage」の表示設定

// galleryPage の表示設定を行います。
gallery.onSceneLoad = function():void {
  this.addCommand(
    new AddChild( this.container , galleryPage )
  );
}
    
// galleryPage の削除設定を行います。
gallery.onSceneUnload = function():void {
  this.addCommand(
    new RemoveChild( this.container , galleryPage )
  );
}

「gallery」シーンに遷移した際に「GalleryPage」が表示され、他のシーンに遷移すると「GalleryPage」が画面から消去するのが確認できます。

ボタンの設定

「gallery」シーンでは3つのボタンを表示します。この3つのボタンはそれぞれ「american」「⁠french」「⁠mame」シーンに遷移するためのボタンになります。Flaファイルのシンボルにある「home」フォルダから「gallery」フォルダを開くと「AmericanButton」「⁠FrenchButton」「⁠MameButton」が定義されていますが、これからこの3つのシンボルにボタンの機能を設定し、「⁠gallery」シーンで表示させましょう。ボタン機能の設定方法はこれまでと同じです。

AmericanButton

まず「AmericanButton」を選択してください。「⁠component」レイヤーを作成し、「⁠RollOverButton」コンポーネントを設置します。次にコンポーネントインスペクタから「scenePath」を設定します。このボタンを押した際の遷移先は「american」シーンなので、「⁠scenePath」の値には[/index/gallery/american]と設定します。

ここでは、特にアニメーションやロールオーバーのアクションを設定しません。

FrenchButton

次に、「⁠FrenchButton」を選択してください。「⁠component」レイヤーを作成し、「⁠RollOverButton」コンポーネントを設置します。次にコンポーネントインスペクタから「scenePath」を設定します。このボタンを押した際の遷移先は「french」シーンなので、「⁠scenePath」の値には[/index/gallery/french]と設定します。

MameButton

最後に「MameButton」を選択してください。「⁠component」レイヤーを作成し、「⁠RollOverButton」コンポーネントを設置します。次にコンポーネントインスペクタから「scenePath」を設定します。このボタンを押した際の遷移先は「mame」シーンなので、「⁠scenePath」の値には[/index/gallery/mame]と設定します。

ボタンの表示

ボタンの設定が完了したら、実際に表示させましょう。これまで、ボタンの表示はFlaファイルのステージに直接配置していましたが、設定をした3つのボタンはすべて「gallery」シーンに遷移した際に表示されるものです。ステージに直接ではなくスクリプトでイベントハンドラメソッドを使用してボタンを表示させましょう。

表示設定の前には、他の表示オブジェクトと同様にインスタンスを生成し座標を設定します。

リスト7　ボタンの表示設定

// ボタンインスタンスを生成します。
var americanButton:AmericanButton = new AmericanButton();
americanButton.x = 150;
americanButton.y = 161;
// ボタンインスタンスを生成します。
var frenchButton:FrenchButton = new FrenchButton();
frenchButton.x = 270;
frenchButton.y = 161;
// ボタンインスタンスを生成します。
var mameButton:MameButton = new MameButton();
mameButton.x = 390;
mameButton.y = 161;

表示設定の際に使用するイベントハンドラメソッドは「onSceneLoad」です。「⁠gallery」インスタンスを使用して「gallery.onSceneLoad」と呼び出すのですが、これは「galleryPage」の表示設定の際に使用しているため、同箇所に記述します。「⁠addCommand()」メソッド内で複数の処理を登録する場合、処理の間にカンマを入れてください。

リスト8　ボタンの表示設定

// galleryPage の表示設定を行います。
gallery.onSceneLoad = function():void {
  this.addCommand(
    new AddChild( this.container , galleryPage ),
    new AddChild( this.container ,  americanButton ),
    new AddChild( this.container ,  frenchButton ),
    new AddChild( this.container ,  mameButton )
  );
}

ボタンの削除処理も「galleryPage」と同箇所で行います。

リスト9　ボタンの削除処理

// galleryPage の削除設定を行います。
gallery.onSceneUnload = function():void {
  this.addCommand(
    new RemoveChild( this.container , galleryPage ),
    new RemoveChild( this.container ,  americanButton ),
    new RemoveChild( this.container ,  frenchButton ),
    new RemoveChild( this.container ,  mameButton )
  );
}

設定が完了したら、ムービーを書き出して確認してみましょう。

表示されているボタンをクリックすると、それぞれの対応したシーンに遷移するのがログで確認できます。

表示オブジェクトの設定

「動物の詳細」ページの設定に移りましょう。シーンの構成はできているので、あとは表示オブジェクトの設定をするだけです。「⁠動物の詳細」ページには共通の表示オブジェクトが5つと、各シーン毎に2つの表示オブジェクトが存在します。ボタンも含まれていますが、まずは表示を先に設定しましょう。

まずは「american」シーンを設定していきます。Flaファイルのシンボルの「home」フォルダから「gallery」フォルダにある「PhotoBG」「⁠PhotoBase」「⁠CloseButton」「⁠BackButton」「⁠NextButton」がシーン共通の表示オブジェクトになります。さらに「american」フォルダにある「AmericanPhoto」「⁠AmericanText」が「american」シーン固有の表示オブジェクトになります。始めにこれらのインスタンスを生成し、座標を設定します。

リスト10　表示オブジェクトの設定

// インスタンスを生成します。
var photoBG:PhotoBG = new PhotoBG();
photoBG.x = 0;
photoBG.y = 0;   
// インスタンスを生成します。
var photoBase:PhotoBase = new PhotoBase();
photoBase.x = 100;
photoBase.y = 20;
// インスタンスを生成します。
var closeButton:CloseButton = new CloseButton();
closeButton.x = 507;
closeButton.y = 30;
// インスタンスを生成します。
var backButton:BackButton = new BackButton();
backButton.x = 30;
backButton.y = 220;
// インスタンスを生成します。
var nextButton:NextButton = new NextButton();
nextButton.x = 570;
nextButton.y = 220;
// インスタンスを生成します。
var americanPhoto:AmericanPhoto = new AmericanPhoto();
americanPhoto.x = 120;
americanPhoto.y = 40;
// インスタンスを生成します。
var americanText:AmericanText = new AmericanText();
americanText.x = 119;
americanText.y = 354;

次に、イベントハンドラメソッド「onSceneLoad」を使用して、表示設定を行います。

リスト11　表示オブジェクトの表示設定

// americanシーンの表示オブジェクトの表示設定を行います。
american.onSceneLoad = function():void {
  this.addCommand(
    new AddChild( this.container , photoBG ),
    new AddChild( this.container , closeButton ),
    new AddChild( this.container , photoBase ),
    new AddChild( this.container , backButton ),
    new AddChild( this.container , nextButton ),
    new AddChild( this.container , americanPhoto ),
    new AddChild( this.container , americanText )
  );
}

続いて、「⁠onSceneUnload」イベントハンドラメソッドを使用して、削除処理を設定します。

リスト12　表示オブジェクトの削除設定

// americanシーンの表示オブジェクトの削除設定を行います。
american.onSceneUnload = function():void {
  this.addCommand(
    new RemoveChild( this.container , photoBG ),
    new RemoveChild( this.container , closeButton ),
    new RemoveChild( this.container , photoBase ),
    new RemoveChild( this.container , backButton ),
    new RemoveChild( this.container , nextButton ),
    new RemoveChild( this.container , americanPhoto ),
    new RemoveChild( this.container , americanText )
  );
}

ここまで設定が完了したら、ムービーを書き出して確認してみましょう。「⁠AmericanButton」を押すと、設定した表示オブジェクトが表示されるはずです。

表示オブジェクトの削除設定

表示オブジェクトの削除処理は設定しましたが、今の段階では上位のシーンに戻れません。「⁠gallery」シーンに遷移するために、「⁠CloseButton」を編集しましょう。「⁠CloseButton」は「galleryScene」に戻るためのボタンです。「⁠CloseButton」シンボルのタイムライン上に「component」レイヤーを作成し、「⁠RollOverButton」を設置し、コンポーネントインスペクタを開いて下さい。遷移先は「gallery」シーンですので、「⁠scenePath」の値を[/index/gallery]と設定して下さい。

設定が完了したら、ムービーを書き出して確認してみましょう。「⁠CloseButton」を押した際に「gallery」シーンに遷移するのがログで確認できます。

上位シーンでの削除処理

「american」シーンに遷移後、「⁠CloseButton」がボタンとして機能しているのが確認できます。「⁠american」シーンと同様に「french」「⁠mame」シーンも設定していくのですが、今はそれぞれのシーンで「onSceneUnload」イベントハンドラメソッド内で共通の表示オブジェクトを削除しています。これを、1つにまとめて処理しましょう。

「gallery」シーンからどのシーンに遷移するかは分かりませんが、「⁠american」「⁠french」「⁠mame」それぞれのシーンで「onSceneUnload」イベントハンドラメソッドが呼び出された時は必ず「gallery」シーンに遷移します。したがって、「⁠gallery」シーンのイベントハンドラメソッドで削除処理を設定します。「⁠gallery」シーンから見て、下位のシーンから遷移してくる場合なので、「⁠onSceneInit」イベントハンドラメソッドを使用しましょう。

リスト13　「⁠onSceneInit」の設定

// 共通部分の表示オブジェクトの削除処理を行います。
gallery.onSceneInit = function():void {
  this.addCommand(
    new RemoveChild( this.container , photoBG ),
    new RemoveChild( this.container , closeButton ),
    new RemoveChild( this.container , photoBase ),
    new RemoveChild( this.container , backButton ),
    new RemoveChild( this.container , nextButton )
  );
}

「american」シーンの「onSceneUnload」イベントハンドラメソッドに記述していた共通部分の表示オブジェクトの削除処理は削除します。シーン毎に表示される2つの表示オブジェクトは先ほどのままで結構です。

リスト14　「⁠american」シーンの設定

// americanシーンの表示オブジェクトの削除設定を行います。
american.onSceneUnload = function():void {
  this.addCommand(
	new RemoveChild( this.container , americanPhoto ),
	new RemoveChild( this.container , americanText )
  );
}

設定が完了したら、ムービーを書き出して確認してみましょう。設定を変更する前と同じ動きをしているのが確認できます。

「american」シーンと同様に、「⁠french」「⁠mame」シーンも設定を行ってください。

リスト15　「⁠french」シーンの設定

// インスタンスを生成します。
var frenchPhoto:FrenchPhoto = new FrenchPhoto ();
frenchPhoto.x = 120;
frenchPhoto.y = 40;
// インスタンスを生成します。
var frenchText:FrenchText = new FrenchText ();
frenchText.x = 119;
frenchText.y = 354;

// frenchシーンの表示オブジェクトの表示設定を行います。
french.onSceneLoad = function():void {
  this.addCommand(
    new AddChild( this.container , photoBG ),
    new AddChild( this.container , closeButton ),
    new AddChild( this.container , photoBase ),
    new AddChild( this.container , backButton ),
    new AddChild( this.container , nextButton ),
    new AddChild( this.container , frenchPhoto ),
    new AddChild( this.container , frenchText )
  );
}

// frenchシーンの表示オブジェクトの削除設定を行います。
french.onSceneUnload = function():void {
  this.addCommand(
    new RemoveChild( this.container , frenchPhoto ),
    new RemoveChild( this.container , frenchText )
  );
}

リスト16　「⁠mame」シーンの設定

// インスタンスを生成します。
var mamePhoto:MamePhoto = new MamePhoto ();
mamePhoto.x = 120;
mamePhoto.y = 40;
// インスタンスを生成します。
var mameText:MameText = new MameText ();
mameText.x = 119;
mameText.y = 354;

// mameシーンの表示オブジェクトの表示設定を行います。
mame.onSceneLoad = function():void {
  this.addCommand(
    new AddChild( this.container , photoBG ),
    new AddChild( this.container , closeButton ),
    new AddChild( this.container , photoBase ),
    new AddChild( this.container , backButton ),
    new AddChild( this.container , nextButton ),
    new AddChild( this.container , mamePhoto),
    new AddChild( this.container , mameText)
  );
}

// mameシーンの表示オブジェクトの削除設定を行います。
mame.onSceneUnload = function():void {
  this.addCommand(
    new RemoveChild( this.container , mamePhoto),
    new RemoveChild( this.container , mameText)
  );
}

設定が完了したら、ムービーで確認しましょう。それぞれのシーンに遷移すると、表示オブジェクトが表示されます。

ボタンの設定

今は、「⁠american」「⁠french」「⁠mame」シーン間で遷移ができません。「⁠動物の詳細」ページではスライドショーのようにお互いのシーンが行き来できるような構成になります。シーン間を遷移するために「BackButton」と「NextButton」の設定を行いましょう。

まず、「⁠BackButton」シンボルを選択してください。「⁠component」レイヤーを作成し、「⁠RollOverButton」を設置します。これまではコンポーネントインスペクタで「scenePath」を設定してきましたが、「⁠BackButton」と「NextButton」の「scenePath」は常に一定ではありません。例えば「american」シーンでの「BackButton」の遷移先は「mame」シーンですが、「⁠mame」シーンでの「BackButton」の遷移先は「french」シーンとなります。ですので、コンポーネントインスペクタでは設定を行わず、スクリプトを用いて設定を行いましょう。

「scenePath」は、「⁠RollOverButton」コンポーネントが持つプロパティなので、スクリプトで設定する場合にインスタンスにアクセスする必要がありますので、あらかじめ「RollOverButton」のインスタンス名を設定しておきましょう。

「RollOverButton」コンポーネントを選択して、プロパティからインスタンス名を「back」としておきましょう。

次に「NextButton」シンボルを開いてください。こちらの同じように「component」レイヤーを作成し、「⁠RollOverButton」コンポーネントを設置します。プロパティからインスタンス名を「next」に設定します。

設定が完了したら、アクションの設定を行っていきましょう。

「BackButton」と「NextButton」の「scenePath」の値が変更するのは、「⁠american」「⁠french」「⁠mame」シーンに遷移したときなので、それぞれのシーンの「onSceneLoad」イベントハンドラメソッド内で「scenePath」の設定を行います。

まず、「⁠american」シーンから設定していきます。「⁠american」シーンでの「BackButton」を押した際の遷移先は「mame」シーンですので、「⁠scenePath」には[/index/gallery/mame]と設定します。「⁠NextButton」の遷移先は「french」シーンなので「scenePath」に[/index/gallery/french]と設定します。

リスト17　「⁠scenePath」の設定

// americanシーンの表示オブジェクトの表示設定を行います。
american.onSceneLoad = function():void {
  // scenePath の設定を行います。
  backButton.back.scenePath = "/index/gallery/mame";
  nextButton.next.scenePath = "/index/gallery/french";
  this.addCommand(
    new AddChild( this.container , photoBG ),
    new AddChild( this.container , closeButton ),
    new AddChild( this.container , photoBase ),
    new AddChild( this.container , backButton ),
    new AddChild( this.container , nextButton ),
    new AddChild( this.container , americanPhoto ),
    new AddChild( this.container , americanText )
  );
}

続いて「french」シーンでの設定を行います。「⁠BackButton」の遷移先は「american」シーンに、「⁠NextButton」の遷移先は「mame」シーンに設定します。

リスト18　「⁠scenePath」の設定

// frenchシーンの表示オブジェクトの表示設定を行います。
french.onSceneLoad = function():void {
  // scenePath の設定を行います。
  backButton.back.scenePath = "/index/gallery/american";
  nextButton.next.scenePath = "/index/gallery/mame";
  this.addCommand(
    new AddChild( this.container , photoBG ),
    new AddChild( this.container , closeButton ),
    new AddChild( this.container , photoBase ),
    new AddChild( this.container , backButton ),
    new AddChild( this.container , nextButton ),
    new AddChild( this.container , frenchPhoto ),
    new AddChild( this.container , frenchText )
  );
}

最後に、「⁠mame」シーンでの設定を行います。「⁠BackButton」の遷移先は「french」シーンに、「⁠NextButton」の遷移先は「american」シーンに設定します。

リスト19　「⁠scenePath」の設定

// mameシーンの表示オブジェクトの表示設定を行います。
mame.onSceneLoad = function():void {
  // scenePath の設定を行います。
  backButton.back.scenePath = "/index/gallery/french";
  nextButton.next.scenePath = "/index/gallery/american";
  this.addCommand(
    new AddChild( this.container , photoBG ),
    new AddChild( this.container , closeButton ),
    new AddChild( this.container , photoBase ),
    new AddChild( this.container , backButton ),
    new AddChild( this.container , nextButton ),
    new AddChild( this.container , mamePhoto ),
    new AddChild( this.container , mameText )
  );
}

設定が完了したら、ムービーを書き出して確認しましょう。それぞれのシーンで「BackButton」「⁠NextButton」を押した際に対応したシーンに遷移しているのが確認できます。

プリローダーの作成

最後にプリローダーを作成しましょう。[Project_gihyo_tl]の[src]から「preloader.fla」を開いてください。タイムラインを表示すると、既に「Preloader」コンポーネントが配置されているはずです。まず、プロパティからサイズを[640px × 480px]に変更します。

「Preloader」コンポーネントにより、読み込み状態はレイヤーのラベルに相当します。1フレーム目から50フレームまでがロード中です。「⁠error」ラベル部分には読み込みに失敗した際の設定が可能です。

読み込み中に表示するテキストをステージに貼り付けましょう。「⁠stage」レイヤーの1フレーム目にテキストツールで「Loading...」と記述して下さい。座標は[x:270 , y:200]です。

「init」ラベルに到達した際はテキストを消しますので、61フレームから70フレーム目まではテキストを削除しましょう。読み込み失敗時にもテキストを使用します。「⁠error」ラベルのある71フレーム目にキーフレームを挿入し、テキストの内容を「読み込みに失敗しました。」に修正します。座標は[x:240 , y:200]です。

次に読み込み状態を示す「ProgressBar」シンボルを作成します。Flaファイルのライブラリ内に新しくムービークリップのシンボルを作成し、名前を「ProgressBar」とします。シンボル内に、[width:640 , height:5]の長方形を作成します。

続いて、読み込みのパーセントを示す「ProgressPer」シンボルを作成します。ムービークリップの新規シンボルを作成し、テキストツールで初期値を[0%]と書きましょう。また、プロパティからダイナミックテキストを選択し、読み込み状況に応じてテキストを変更するためにアクセスするので、インスタンス名を「per」としておきます。

作成したシンボルをステージに貼り付けていきましょう。タイムライン上に「progressBar」と「progressPer」レイヤーを作成します。「⁠progressBar」レイヤーの１フレーム目で「ProgressBar」シンボルを貼り付けます。座標は[x:-640 , y:240]です。

読み込み状態に合わせて、「⁠ProgressBar」を移動させたいのでアニメーションの設定を行います。「⁠progressBar」レイヤーの51フレーム目にキーフレームを挿入し、「⁠ProgressBar」の座標を[x:0 , y:240]にします。この2点間でクラシックトゥイーンを作成してください。

読み込みが完了すると、「⁠init」フラグに到達します。ここでは「ProgressBar」シンボルを表示させないので、削除しておきましょう。「⁠error」フラグの場合も同様の設定をしておきます。

続いて、「⁠ProgressPer」の設定に移ります。同じように「progressPer」レイヤーの１フレーム目に「ProgressPer」を設置します。座標は[x:340 , y:200]です。「⁠ProgressPer」シンボルは後ほどアクセスするので、プロパティからインスタンス名を「pp」としておきましょう。

「ProgressPer」シンボルも「init」「⁠error」時には表示しませんので、削除しておきましょう。

読み込み状態をパーセントで表示するために、アクションを設定します。

読み込み開始から読み込み完了までは、50フレームあります。これを最大100％で表示しますので、毎フレーム現在のフレーム値を取得して2倍にして表示させましょう。「⁠action」レイヤーの1フレーム目でアクションを開いて、以下のように設定します。

リスト20　読み込みパーセント表示設定

// フレーム毎にテキストの値を変更します。
addEventListener( Event.ENTER_FRAME , perText );

function perText( e:Event ):void {
  // 現在フレームが50を超えたら、イベントリスナーを削除します。
  if( currentFrame > 50 ) {
    removeEventListener( Event.ENTER_FRAME , perText );
  }
  // ProgressPerにパーセンテージを設定します。
  pp.per.text = String( currentFrame  * 2 - 2 ) + "%";
}

設定が完了したら、ムービーを書き出して確認してみましょう。

プリローダーの読み込み状態が100％になると、index.swf が呼び出されます。1％単位で読み込みを表示したい場合はフレームを100まで伸ばしましょう。

まとめ

タイムラインスタイルでの制作は以上になります。今回の制作では、サイトの構成を最優先にしましたが、タイムラインでの制作はフレームを使ってのアニメーションも楽しい部分だと思いますので、サンプルサイトの中にアニメーションを組み込んでみましょう。

なお、今回のサンプルソースはこちらからダウンロードできます。