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

サイト制作

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

1．子シーンの作成

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

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

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」コンストラクタの引数には遷移先のシーンを表すシーンパスが必要になるので，以下のように設定します。

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

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

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」シーン間でも移動できることが確認できます。