第3回　フルパフォーマンス！クラススタイル（2）

今回はクラススタイルでの制作の2回目です。前回は、2つのシーン間を遷移し、シーンに表示オブジェクトを貼りつけ、外部リンクの設定を行いました。今回は、「⁠動物の写真一覧のページ」と「動物の詳細ページ」を作成して、サイトを完成させます。

サイト制作

それでは、前回と同じようにFlashDevelopでプロジェクト[Project_gihyo]を開いて、制作をすすめていきましょう。

1．子シーンの作成

まず、「⁠動物の写真一覧のページ」を作成していきます。このシーンは、前回制作した「サイトについての説明ページ」と構造が同じになっています。「⁠AboutScene」クラスと同じように、プロジェクト内の[template]→[MySceneObject.as]を、[src]→[scenes]の中にコピーしてください。そして、コピーしたファイルのファイル名、クラス名、コンストラクタ名を「GalleryScene」に修正し、パッケージ名を「scenes」にします。

次にシーン同士を繋げる作業を行います。子シーンである「GalleryScene」シーンも親シーンである「IndexScene」シーンの下につくので、インスタンスを生成して「name」を設定し、「⁠addScene()」メソッドで繋げましょう。「⁠IndexScene」クラスを開いてください。

リスト1　子シーンを繋げる

public class IndexScene extends SceneObject {
  public var galleryScene:GalleryScene;
  public function IndexScene() {
    title = "Project_gihyo";
    // インスタンスを生成します。
    galleryScene = new GalleryScene();
    // インスタンスの名前を設定します。
    galleryScene.name = "gallery";
    // 呼び出し元のIndexSceneに引数で設定したGallerySceneを追加します。
    addScene( galleryScene );
  }

これで「GalleryScene」シーンをルートシーンの「IndexScene」シーンに繋ぎました。

2．ボタンの作成

ボタンの作成も前回と同じです。プロジェクト[Project_gihyo]の[template]→[MyCastButton.as]を、[src]→[ui]の中にコピーします。コピーしたファイルのファイル名、クラス名、コンストラクタ名を「GalleryButton」に、パッケージ名を「ui」にそれぞれ修正してください。

作成した「GalleryButton」クラスを開いてください。「⁠GalleryScene」シーンに遷移させるため、コンストラクタ内にある「sceneId」プロパティを設定します。「⁠SceneId」コンストラクタの引数には遷移先のシーンを表すシーンパスが必要になるので、以下のように設定します。

リスト2　sceneIdの設定

public function GalleryButton( initObject:Object = null ) {
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index/gallery" );
}

作成したボタンを表示させましょう。「⁠IndexScene」クラスを開いてください。「⁠GalleryButton」クラスのインスタンスを生成し、座標を設定します。次にイベント「atSceneLoad」内で、ボタンの表示を設定しましょう。忘れずにインポートも行ってください。

リスト3　GalleryButtonの表示

public class IndexScene extends SceneObject {
  public var galleryButton:GalleryButton;
  public function IndexScene() {
  	// インスタンスを生成します。
    galleryButton = new GalleryButton();
    // 座標を設定します。
    galleryButton.y = 254;
  }
  override protected function atSceneLoad():void {
  	// ボタンの表示を登録します。
    addCommand(
      new AddChild( container , galleryButton )
    );
  }

ボタンの表示も完了したので、ここで一度ムービーを書き出して確認しましょう。ムービーを書き出したら「GalleryButton」ボタンをクリックし、「⁠GalleryScene」シーンに遷移することを確かめてください。

「GalleryButton」ボタンをクリックすると、「⁠IndexScene」シーンから「GalleryScene」シーンに遷移しているのが確認できます。また、「⁠GalleryScene」シーンと「AboutScene」シーン間でも移動できることが確認できます。

3．表示オブジェクトの設定1

次に、何も表示されていない「GalleryScene」シーンにオブジェクトを表示させます。「⁠GalleryScene」クラスを開き、「⁠GalleryPage」（⁠※1）の型で変数「gallerytPage」を宣言してください。続けて、コンストラクタ内でインスタンスを生成し、座標を設定します。イベント「atSceneLoad」内の「addCommand()」メソッドで「AddChild」コマンドを使用し、画面に表示させます。「⁠AboutScene」シーンの時と同様に、「⁠DoTweener」コマンドを使用します。複数のコマンドを設定する際は、間にカンマ（,）を入れてください。また、「⁠GalleryScene」シーンから他のシーンに遷移した際は、「⁠GalleryPage」インスタンスを表示リストから削除するので、「⁠asSceneUnload」イベント内に削除処理を設定します。

リスト4　GalleryPageの設定

public class GalleryScene extends SceneObject { 
  public var galleryPage:GalleryPage; 
  public function GalleryScene( name:String = null, initObject:Object = null ) { 
    super( name, initObject ); 
    title = "title"; 
    // インスタンスを生成します。
    galleryPage = new GalleryPage(); 
    // 座標を設定します。
    galleryPage.x = 151; 
    galleryPage.y = 113; 
  } 
  override protected function atSceneLoad():void {
  	// インスタンスのアルファ値を設定します。 
    galleryPage.alpha = 0; 
    // addCommandに画像の表示とアニメーションの設定を登録します。
    addCommand( 
      new AddChild( container , galleryPage ), 
      new DoTweener( galleryPage , { alpha:1 , time:.2 } ) 
    ); 
  } 
  override protected function atSceneUnload():void {
  	// addCommandに画像の削除とアニメーションの設定を登録します。
    addCommand(
      new DoTweener( galleryPage , { alpha:0 , time:.2 } ),
      new RemoveChild( container , galleryPage )
    );
  }

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

「GalleryButton」ボタンを押し、「⁠GalleryScene」シーンに遷移すると、「⁠GalleryPage」インスタンスが表示されます。

4．子シーンの作成

続いて、「⁠GalleryScene」シーンの下の階層に付くシーンを作成します。サンプルサイトでは、まだ設置していませんが、「⁠動物の写真一覧のページ」にある動物の写真をクリックすると「動物の詳細ページ」に遷移するようにします。その遷移先のシーンを先に作成していきます。

作成するシーンは3つです。全て同じ手順になります。[template]→[MySceneObject.as]を[src]→[scenes]へ3つコピーしてください。コピーしたファイル名、クラス名、コンストラクタ名をそれぞれ、「⁠AmericanScene」「⁠FrenchScene」「⁠MameScene」（⁠※2）に修正してください。その際、パッケージ名を「scenes」に修正してください。

作成したシーンを、親シーンに繋げます。「⁠IndexScene」シーンに「GalleryScene」シーンを繋げる方法と同じです。親シーンとなる「GalleryScene」クラスを開いてください。それぞれの子シーンのインスタンスを生成して「name」を設定し、「⁠addScene()」メソッドで繋げます。

リスト5　子シーンを繋げる

public class GalleryScene extends SceneObject { 
  public var american:AmericanScene; 
  public var french:FrenchScene; 
  public var mame:MameScene; 
  public function GalleryScene( name:String = null, initObject:Object = null ) { 
  	// それぞれインスタンスを生成し、名前を設定します。
    american = new AmericanScene(); 
    american.name = "american"; 
    // GallerySceneに子シーンを追加します。
    addScene( american ); 
    
    french = new FrenchScene(); 
    french.name = "french"; 
    addScene( french ); 
    
    mame = new MameScene(); 
    mame.name = "mame"; 
    addScene( mame ); 
  }

これで、子シーン「AmericanScene」「⁠FrenchScene」「⁠MameScene」を親シーンに繋げました。

5．ボタンの作成

次に、シーン間を遷移するためのボタンを作成していきます。これも同様の方法です。[template]→[MyCastButton.as]を、[src]→[ui]へ3つコピーします。それぞれのファイル名、クラス名、コンストラクタ名を「AmericanButton」「⁠FrenchButton」「⁠MameButton」に修正し、パッケージ名を「ui」に修正して下さい。

作成した「AmericanButton」「⁠FrenchButton」「⁠MameButton」クラスを開いてください。コンストラクタ内にある、遷移先を設定する「sceneId」プロパティを以下のように設定します。

リスト6　AmericanButtonのsceneIdの設定

public function AmericanButton( initObject:Object = null ) { 
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index/gallery/american" ); 
}

リスト7　FrenchButtonのsceneIdの設定

public function FrenchButton( initObject:Object = null ) { 
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index/gallery/french" ); 
}

リスト8　MameButtonのsceneIdの設定

public function MameButton( initObject:Object = null ) { 
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index/gallery/mame" ); 
}

「sceneId」プロパティの設定が完了したら、ボタンを表示させましょう。「⁠GalleryScene」クラスを開いてください。「⁠AmericanButton」「⁠FrenchButton」「⁠MameButton」クラスのインスタンスを作成し、座標を設定後、イベント「atSceneLoad」内で表示の設定を行います。また、イベント「atSceneUnload」内で、表示オブジェクトの削除設定も行います。それぞれのクラスのインポートも忘れず行いましょう。

リスト9　ボタンの表示

public class GalleryScene extends SceneObject { 
  public var americanButton:AmericanButton; 
  public var frenchButton:FrenchButton; 
  public var mameButton:MameButton; 
  public function GalleryScene( name:String = null, initObject:Object = null ) { 
  	// インスタンスを生成し、座標を設定します。
    americanButton = new AmericanButton(); 
    americanButton.x = 150; 
    americanButton.y = 161; 
    
    frenchButton = new FrenchButton(); 
    frenchButton.x = 270; 
    frenchButton.y = 161; 
    
    mameButton = new MameButton(); 
    mameButton.x = 390; 
    mameButton.y = 161; 
  } 
  override protected function atSceneLoad():void { 
  	// addCommandに画像の表示設定を登録します。
    addCommand( 
      new AddChild( container , americanButton ), 
      new AddChild( container , frenchButton ), 
      new AddChild( container , mameButton ) 
    ); 
  }
  override protected function atSceneUnload():void {
    // addCommandに画像の削除設定を登録します。
    addCommand(
      new RemoveChild( container , americanButton ),
      new RemoveChild( container , frenchButton ),
      new RemoveChild( container , mameButton )
    );
  }

これでボタンの表示も完了したので、ここで一度ムービーを書き出し、ボタンをクリックして確認してみましょう。

図10　シーン遷移の確認 FrenchScene — **図10**　シーン遷移の確認 FrenchScene

図11　シーン遷移の確認 MameScene — **図11**　シーン遷移の確認 MameScene

「AmericanButton」「⁠FrenchButton」「⁠MameButton」それぞれのボタンをクリックすると、「⁠GalleryScene」シーンから「AmericanScene」「⁠FrenchScene」「⁠MameScene」シーンに遷移しているのが確認できます。

6．表示オブジェクトの設定

次に、シーンの表示オブジェクトの設定を行います。前項目までで作成したシーンは、サイト上での「動物の詳細ページ」にあたります。まず、「⁠AmericanScene」クラスを開いてください。

シーンに表示させるオブジェクトの設定を行っていきます。以下のソースで宣言しているクラスは、flaファイルにシンボルとして登録してあります。これらは「動物の詳細ページ」の枠となる部分です。それぞれインスタンスを生成し、表示する座標を設定します。イベント「atSceneLoad」内で表示の設定を行います。

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

public class AmericanScene extends SceneObject { 
  public var photoBG:PhotoBG; 
  public var base:PhotoBase; 
  public var closeButton:CloseButton; 
  public var backButton:BackButton; 
  public var nextButton:NextButton; 
  public var americanPhoto:AmericanPhoto; 
  public var americanText:AmericanText; 
  public function AmericanScene() { 
  	// インスタンスを生成し、座標を設定します。
    photoBG = new PhotoBG(); 
    
    base = new PhotoBase(); 
    base.x = 100; 
    base.y = 20; 
    
    closeButton = new CloseButton(); 
    closeButton.x = 507; 
    closeButton.y = 30; 
    
    backButton = new BackButton(); 
    backButton.x = 30; 
    backButton.y = 220; 
    
    nextButton = new NextButton(); 
    nextButton.x = 570; 
    nextButton.y = 220; 
    
    americanPhoto = new AmericanPhoto(); 
    americanPhoto.x = 120; 
    americanPhoto.y = 40; 
    
    americanText = new AmericanText(); 
    americanText.x = 119; 
    americanText.y = 354; 
  } 
  override protected function atSceneLoad():void { 
     // addCommandに画像の表示設定を登録します。  
     addCommand( 
      new AddChild( container , photoBG ), 
      new AddChild( container , closeButton ), 
      new AddChild( container , base ), 
      new AddChild( container , backButton ), 
      new AddChild( container , nextButton ), 
      new AddChild( container , americanPhoto ), 
      new AddChild( container , americanText ) 
    ); 
  } 
}

ムービーを書き出して確認してみましょう。

赤線で囲んでいる部分がそれぞれのシンボルに対応している部分です。シンボルと画像の詳細についてはFlaファイルを参照してください。

「GalleryScene」シーンから「AmericanScene」シーンに遷移すると、「⁠AmericanScene」シーンに表示されているオブジェクトが確認できます。

まだ、左右に移動するボタンと閉じるボタンが機能していません。ボタンの機能設定は後で行います。

この手順で、「⁠FrenchScene」シーンと「MameScene」シーンも設定を行うのですが、この設定方法だと「AmericanScene」「⁠FrenchScene」「⁠MameScene」シーンそれぞれに遷移する度、枠となる表示オブジェクトを表示したり、削除する設定が必要です。しかし今回は、サイトの拡張性は考えないものとして、必ずこのシーン構成になると考え、まとめることができる部分は、一度に設定をまとめ、効率を良くしましょう。「⁠動物の詳細ページ」の表示オブジェクトを親シーンのプロパティとして設定します。

「GalleryScene」クラスを開いてください。

リスト11　プロパティに設定

public class GalleryScene extends SceneObject { 
  public var photoBG:PhotoBG; 
  public var base:PhotoBase; 
  public var closeButton:CloseButton; 
  public var backButton:BackButton; 
  public var nextButton:NextButton; 
  public function GalleryScene() { 
  	// インスタンスを生成し、座標を設定します。
    photoBG = new PhotoBG(); 
    
    base = new PhotoBase(); 
    base.x = 100; 
    base.y = 20; 
    
    closeButton = new CloseButton(); 
    closeButton.x = 507; 
    closeButton.y = 30; 
    
    backButton = new BackButton(); 
    backButton.x = 30; 
    backButton.y = 220; 
    
    nextButton = new NextButton(); 
    nextButton.x = 570; 
    nextButton.y = 220; 
  }

これで、親シーンである「GalleryScene」シーンへ表示オブジェクトをプロパティとして保持させました。先ほど「AmericanScene」で設定した表示項目に関しては消去しておいてください。「⁠GalleryScene」シーン内では、基本設定だけを行い表示リストへの追加設定は行いません。「⁠GalleryScene」シーンには子シーンが3つあります。子シーンには、「⁠GalleryScene」シーンから遷移してきた場合、「⁠動物の詳細ページ」の枠となる表示オブジェクトを必ず表示させるよう設定します。遷移してきた時なので、表示を設定するイベントは「atSceneLoad」になります。

もう一度「AmericanScene」クラスを開いてください。ソースを修正します。先ほどは自クラスの中で宣言した変数でしたが、親シーンのプロパティにアクセスしますので、「⁠parent」プロパティを使用します。「⁠parent」プロパティは、呼び出し元の「AmricanScene」シーンの親にあたる「GalleryScene」シーンになります。「⁠parent」プロパティを「GalleryScene」クラスでキャストし、「⁠GalleryScene」シーンの持つプロパティにアクセスします。

リスト12　親シーンのプロパティにアクセス

public class AmericanScene extends SceneObject {
  public var americanPhoto:AmericanPhoto; 
  public var americanText:AmericanText; 
  public function AmericanScene() {
  	// インスタンスを生成し、座標を設定します。
    americanPhoto = new AmericanPhoto(); 
    americanPhoto.x = 120; 
    americanPhoto.y = 40; 
    
    americanText = new AmericanText(); 
    americanText.x = 119; 
    americanText.y = 354; 
  } 
  override protected function atSceneLoad():void { 
    // parentプロパティを使用し、親シーンの持つプロパティにアクセスします。
    addCommand( 
      new AddChild( container , GalleryScene(parent).photoBG ), 
      new AddChild( container , GalleryScene(parent).closeButton ), 
      new AddChild( container , GalleryScene(parent).base ), 
      new AddChild( container , GalleryScene(parent).backButton ), 
      new AddChild( container , GalleryScene(parent).nextButton ), 
      // 自クラスのプロパティの表示を設定します。
      new AddChild( container , americanPhoto ), 
      new AddChild( container , americanText ) 
    ); 
  } 
}

ムービーを書き出して「AmericanScene」シーンで確認しましょう。さきほどと表示結果が同じになります。

シーンを移動する際は、自クラスのプロパティだけ削除します。続けて「AmericanScene」シーンのイベント「atSceneUnload」内に以下のソースを挿入してください。

リスト13　表示オブジェクトの削除

override protected function atSceneUnload():void { 
  // 自クラスのプロパティのみ削除します。
  addCommand( 
    new RemoveChild( container , americanPhoto ), 
    new RemoveChild( container , americanText ) 
  ); 
}

「FrenchScene」「⁠MameScene」クラスも同様に記述します。

リスト14　FrenchSceneクラスの設定

public class FrenchScene extends SceneObject { 
  public var frenchPhoto:FrenchPhoto; 
  public var frenchText:FrenchText; 
  public function FrenchScene( name:String = null, initObject:Object = null ) { 
	// インスタンスを生成し、座標を設定します。
    frenchPhoto = new FrenchPhoto(); 
    frenchPhoto.x = 120; 
    frenchPhoto.y = 40; 
    
    frenchText = new FrenchText(); 
    frenchText.x = 119; 
    frenchText.y = 354; 
  } 
  override protected function atSceneLoad():void { 
    // parentプロパティを使用し、親シーンの持つプロパティにアクセスします。
    addCommand( 
      new AddChild( container , GalleryScene(parent).photoBG ), 
      new AddChild( container , GalleryScene(parent).closeButton ), 
      new AddChild( container , GalleryScene(parent).base ), 
      new AddChild( container , GalleryScene(parent).backButton ), 
      new AddChild( container , GalleryScene(parent).nextButton ), 
      new AddChild( container , frenchPhoto ), 
      new AddChild( container , frenchText ) 
    ); 
  } 
  override protected function atSceneUnload():void { 
  	// 自クラスのプロパティのみ削除します。
    addCommand( 
      new RemoveChild( container , frenchPhoto ), 
      new RemoveChild( container , frenchText ) 
    ); 
  } 
}

リスト15　MameSceneクラスの設定

public class MameScene extends SceneObject { 
  public var mamePhoto:MamePhoto; 
  public var mameText:MameText; 
  public function MameScene( name:String = null, initObject:Object = null ) { 
	// インスタンスを生成し、座標を設定します。
    mamePhoto = new MamePhoto(); 
    mamePhoto.x = 120; 
    mamePhoto.y = 40; 
    
    mameText = new MameText(); 
    mameText.x = 119; 
    mameText.y = 354; 
  } 
  override protected function atSceneLoad():void { 
	// parentプロパティを使用し、親シーンの持つプロパティにアクセスします。
    addCommand( 
      new AddChild( container , GalleryScene(parent).photoBG ), 
      new AddChild( container , GalleryScene(parent).closeButton ), 
      new AddChild( container , GalleryScene(parent).base ), 
      new AddChild( container , GalleryScene(parent).backButton ), 
      new AddChild( container , GalleryScene(parent).nextButton ), 
      new AddChild( container , mamePhoto ), 
      new AddChild( container , mameText ) 
    ); 
  } 
  override protected function atSceneUnload():void { 
    // 自クラスのプロパティのみ削除します。
    addCommand( 
      new RemoveChild( container , mamePhoto ), 
      new RemoveChild( container , mameText ) 
    ); 
  } 
}

ムービーを書き出して確認しましょう。それぞれのシーンに遷移すると、オブジェクトが表示されているのが確認できます。

「AmericanScene」「⁠FrenchScene」「⁠MameScene」シーン間を遷移する際は、それぞれが持つ表示オブジェクトを削除するだけで結構ですが、「⁠GalleryScene」シーンに戻ってきた際は「動物の詳細ページ」の表示オブジェクトを削除する必要があります。子シーンから遷移してきた場合だけですので、表示オブジェクトの削除を設定するイベントは「atSceneInit」になります。

「GalleryScene」クラスを開き、イベント「atSceneInit」内に表示オブジェクトの削除を設定します。

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

override protected function atSceneInit():void { 
  // addCommandに画像の削除設定を登録します。
  addCommand( 
    new RemoveChild( container , photoBG ), 
    new RemoveChild( container , base ), 
    new RemoveChild( container , closeButton ), 
    new RemoveChild( container , backButton ), 
    new RemoveChild( container , nextButton ) 
  ); 
}

これで「動物の詳細ページ」の表示オブジェクトの表示に関する設定が完了しました。

7．ボタンの機能設定

次に、「⁠動物の詳細ページ」の表示オブジェクトである、「⁠CloseButton」「⁠BackButton」「⁠NextButton」ボタンの機能を設定していきます。

プロジェクトの[template]→[MyCastButton.as]を[src]→[ui]に3つコピーします。3つのファイル名、クラス名、コンストラクタ名を「CloseButton」「⁠BackButton」「⁠NextButton」に修正します。パッケージ名を「ui」に修正します。

まずは「CloseButton」クラスから設定します。「⁠CloseButton」クラスは「動物の詳細ページ」を閉じて、「⁠動物の写真一覧ページ」に遷移するボタンです。「⁠CloseButton」クラスを開いてください。「⁠sceneId」プロパティを設定します。「⁠動物の写真一覧ページ」である「GalleryScene」シーンに遷移するよう設定します。

リスト17　CloseButtonクラスの設定

public function CloseButton( initObject:Object = null ) { 
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index/gallery" ); 
}

ここで、「⁠CloseButton」のシンボルと関連づけをしましょう。「⁠index.fla」内の[ui]→「⁠CloseButton」から右クリックメニューのプロパティを開きます。「⁠クラス」の項目が「CloseButton」になっていますが、これを「ui.CloseButton」に修正します。

関連づけが完了したら、チェックボタンをクリックして確認しましょう。そして、ムービーを書き出して確認しましょう。「⁠CloseButton」ボタンにカーソルを合わせるとボタンとして機能しています。クリックすると、「⁠GalleryScene」シーンに遷移するはずです。

次に「BackButton」クラスと「NextButton」クラスの設定を行います。この2つのボタンは「AmericanScene」「⁠FrenchScene」「⁠MameScene」シーン間を遷移する機能を有します。これまで、ボタンを押した時の遷移先はボタンの「sceneId」プロパティで設定を行ってきました。しかし、「⁠BackButton」ボタンと「NextButton」ボタンは表示されたシーンによって、遷移先が変わります[3]⁠。「⁠BackButton」と「NextButton」のクラス内の「sceneId」はコメントアウトしましょう。

リスト18　BackButton、NextButtonクラスのsceneId設定

public function BackButton( initObject:Object = null ) { 
  // 移動先となるシーン識別子を設定 します。 
  // コメントアウト 
  //sceneId = new SceneId( "/index" ); 
} 
--------------------------------------------------- 
public function NextButton( initObject:Object = null ) { 
  // 移動先となるシーン識別子を設定 します。 
  // コメントアウト 
  //sceneId = new SceneId( "/index" ); 
}

未設定の「sceneId」プロパティは、「⁠AmericanScene」「⁠FrenchScene」「⁠MameScene」シーンでそれぞれ設定します。つまり、「⁠BackButton」ボタンと「NextButton」ボタンの「sceneId」プロパティはシーンを遷移するたびに遷移先が変更されます。

「BackButton」と「NextButton」のインスタンスは、「⁠GalleryScene」クラスのプロパティですので、「⁠parent」プロパティを使用します。設定を有効にするため、「⁠atSceneLoad」イベント内で設定します。

「AmericanScene」クラスを開いて設定してください。

リスト19　AmericanSceneクラスのsceneId設定

override protected function atSceneLoad():void { 
  // parentプロパティでアクセスし、移動先となるシーン識別子を設定します。
  GalleryScene(parent).backButton.sceneId = new　SceneId( "/index/gallery/mame" ); 
  GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/french" ); 
  addCommand( 
      ※略
  ); 
}

同様に、「⁠FrenchScene」クラスと「MameScene」クラスも設定します。

リスト20　FrenchSceneのsceneId設定

override protected function atSceneLoad():void { 
  // parentプロパティでアクセスし、移動先となるシーン識別子を設定します。
  GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/american" ); 
  GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/mame" ); 
}

リスト21　MameSceneのsceneId設定

override protected function atSceneLoad():void { 
  // parentプロパティでアクセスし、移動先となるシーン識別子を設定します。
  GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/french" ); 
  GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/american" ); 
}

「BackButton」と「NextButton」も「CloseButton」と同様に、「⁠index.fla」内のシンボルと関連付けを行います。それぞれのシンボルのプロパティを開き、クラスの部分に「ui」を足してください。

設定が完了したら、ムービーを書き出して確認しましょう。シーン毎に設定した遷移先に遷移しているのが確認できます。

8．ロールオーバーの設定

トップページのボタンにロールオーバー時の効果を加えましょう。使用するのはFlaファイルの中にある「Effect」というシンボルです。Progressionの描画クラスを使用して「Effect」を定義しましょう。プロジェクトの[template]から[MyCastSprite.as]を[src]にコピーし、ファイル名、クラス名、コンストラクタ名を「Effect」に修正します。

次に「Effect」を開き、設定を行います。ボタンにマウスポインタがフォーカスされた際に、左側から効果を出したいので、x座標の初期値をマイナス値に設定し、同時にalpha値も0にします。この設定を、イベント「atCastAdded」内に設定します。「⁠atCastAdded」は、コマンドの「AddChild」などを経由して、表示リストに追加されたタイミングのイベントを示します。

リスト21　Effectの設定

public function Effect( initObject:Object = null ) { 
  super( initObject ); 
} 
override protected function atCastAdded():void { 
  // 座標とアルファ値を設定します。
  x = -70; 
  alpha = 0; 
}

この設定により、「⁠Effect」は表示リストに追加された際、x座標は-70になり、alpha値は0になります。

では、設定した「Effect」を表示させましょう。トップページにあるボタンに対して使用するので、「⁠HomeButton」「⁠AboutButton」「⁠GalleryButton」を開き、設定を行います。

「Effect」型で変数を定義し、コンストラクタ内でインスタンスを生成します。表示の設定を、ロールオーバー時にあたる、イベント「atCastRollOver」内に設定します。まず、コマンド「AddChild」を使用し、「⁠Effect」を表示させます。ロールオーバーはこのクラスのインスタンスにだけ適応されればよいので、第1引数には「this」プロパティを入れます。「⁠AddChild」を使用した際、先ほど「Effect」で設定した「atCastAdded」イベントが送出されます。ここまでで、表示リストには追加されましたが、x座標がマイナス値である上、alpha値が0なので視認はできません。コマンド「DoTweener」で動きを加え表示させましょう。

リスト22　atCastRollOverの設定

override protected function atCastRollOver():void { 
  // addCommandにEffectの表示設定を登録します。
  addCommand( 
    new AddChild( this , effect ), 
    new DoTweener( effect , { alpha:1 , x:0 , time:.2 , transition:"easeOutCirc" } ) 
  ); 
}

ロールアウト時の設定も行いましょう。コマンド「Dotweener」を使用し、画面から表示させなくし、コマンド「RemoveChild」を使用し削除します。イベント「atCastRollOut」内に以下のように記述します。

リスト23　atCastRollOutの設定

override protected function atCastRollOut():void { 
  // addCommandにEffectの削除設定を登録します。
  addCommand( 
    new DoTweener( effect , { alpha:0 , x:-70 , time:.2 , transition:"easeInCirc" } ), 
    new RemoveChild( this , effect ) 
  ); 
}

上記の設定を、「⁠HomeButton」「⁠AboutButton」「⁠GalleryButton」クラスに行います。

ムービーを書き出して確認しましょう。

マウスのフォーカスをボタンにあてた際、「⁠Effect」が表示され、マウスをボタンから離すと「Effect」も表示されなくなります。

9．プリローダーの作成

最後に、プリローダーを作成します。プロジェクト[Project_gihyo]の「Preloader.fla」と「Preloader.as」を開いてください。「⁠Preloader.fla」のプロパティを開き、サイズを「640×480」pxに設定します。

「Preloader」クラスの設定を行っていきます。まず、表示させる項目を定義します。

リスト24　表示項目の定義

public class Preloader extends CastPreloader {
  private var _loadedPerField:TextField;
  private var _progressBar:Shape;

続いて、イベント「atReady」内で表示項目の初期化を行います。

リスト25　表示項目の初期化

override protected function atReady():void { 
  // インスタンスを作成し、座標、領域、自動拡大、初期値を設定します。 
  _loadedPerField = new TextField();
  _loadedPerField.x = 220;
  _loadedPerField.y = -100;
  _loadedPerField.width = 210;
  _loadedPerField.autoSize = TextFieldAutoSize.CENTER;
  _loadedPerField.text = "Loading ... 0%";
            
  // インスタンスを作成し、領域、描画色を設定します。
  _progressBar = new Shape();
  var gr:Graphics = _progressBar.graphics;
  gr.beginFill(0x000000);
  gr.drawRect(0, 240, 640, 5);
  gr.endFill();
  _progressBar.scaleX = 0;
}

イベント「atCastLoadStart」内に、読み込み開始時の処理を設定します。

リスト26　読み込み開始時の処理の設定

override protected function atCastLoadStart():void {
  addCommand(
    new AddChild( foreground , _loadedPerField ),
    new AddChild( foreground , _progressBar ),
    // テキストフィールドを画面内に移動させます。
    new DoTweener( _loadedPerField, { y:200, time:1 } )
  );
}

「foreground」プロパティは、最前面に表示される表示オブジェクトを指します。次に、イベント「atProgress」内に、読み込み中の処理を設定します。

リスト27　読み込み中の処理の設定

override protected function atProgress():void {
  var percent:Number = bytesLoaded / bytesTotal;
  // progressBar の横幅を、読み込み状態に応じて変化させます。
  _progressBar.scaleX = percent;
  // テキストフィールドの表示内容を、読み込み状態に応じて変化させます。
  _loadedPerField.text = "Loading ... " + Math.round( percent * 100 ) + "%";
}

最後に、イベント「atCastLoadComplete」内に、読み込み完了時の処理を設定します。

リスト28　読み込み完了時の処理の設定

override protected function atCastLoadComplete():void {
  addCommand(
    // テキストフィールドを画面から消去します。
    new DoTweener( _loadedPerField, { alpha:0, time:1 } ),
    // progressBar を画面から消去します。
    new DoTweener( _progressBar , { alpha:0 , time:1 } ),
    // テキストフィールドを画面から削除します。
    new RemoveChild( foreground, _loadedPerField ),
    // progressBar を画面から削除します。
    new RemoveChild( foreground , _progressBar )
  );
}

以上の設定が完了したら、「⁠Preloader.fla」をコンパイルし、ムービーを書き出してみましょう。

プリローダー画面で、読み込み状況に応じてプログレスバーが伸びているのが確認できます。読み込みが完了すると、サイトのTOPページに遷移します。

10．ブラウザでの確認

完成したサイトをブラウザで確認してみましょう。まず、Progression プロジェクトパネルを開いてください。プロジェクトパネルにある「リリースビルドを書き出す」をクリックします。

プロジェクト[Project_gihyo]内に「bin-release」が作成されます。

「bin-release」内のファイルは、webに公開する際、必要になるファイルです。特に変更がなければ「bin-release」内の全ファイルをwebサーバにアップロードすれば、web上で作成したサイトを閲覧できます。そのフォルダ内の「index.html」を開くと、作成したサイトが表示されます。

まとめ

以上で、クラススタイルでのサイト構築は終了です。始めは戸惑うことがあるかもしれませんが、慣れてしまえば本当に制作が容易になります。今回は初歩的な部分だけでしたが、Progressionにはまだまだ魅力的な機能がたくさんあります。是非、ご自身で探求し、Progressionについて深めてみてください。

なお、サンプルサイト自体にアニメーションがあまりありませんので、コマンドの「DoTweener」クラスなどを使用して、動きを加えてみても面白いでしょう。以下からダウンロードできるソースコードは、多少動きを加えたものになっています。また、今回は表示オブジェクトの大半をシンボルでのみ扱っていましたが、クラスで定義し、「⁠キャスト」として扱うことも可能です。ソースコードにはそちらの手法を載せていますので、参考にしてください。

第3回終了時点のサンプル（CS3以上）

※追記: 6月3日にリリースされたProgression ver 4.0.12にあわせ、データをアップデートしました。

次回は、FlexSDKによるProgressionの環境設定です。Adobe FlashがなくてもProgressionを使用できる環境を設定し、今回と同じサンプルサイトを制作していきます。