Flash画面遷移フレームワーク「Progression 4」公式ガイド

第3回 フルパフォーマンス!クラススタイル(2)

この記事を読むのに必要な時間:およそ 14 分

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

サイト制作

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

1.子シーンの作成

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

図1 GallerySceneクラスの作成

図1 GallerySceneクラスの作成

次にシーン同士を繋げる作業を行います。子シーンである「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」にそれぞれ修正してください。

図2 GalleryButtonクラスの作成

図2 GalleryButtonクラスの作成

作成した「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」シーンに遷移することを確かめてください。

図3 GalleryButtonボタンを表示

図3 GalleryButtonボタンを表示

図4 シーン遷移の確認

図4 シーン遷移の確認

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

著者プロフィール

青木健至(あおきたけし)

株式会社CLOQUE. 所属。Flash歴半年。Progression歴半年。Progression無しでのFlash制作は不可。2009年にFlashの技術を会得するために上京し,Progressionプロダクトマネージャーの阿部氏に師事。日々精進中。

http://twitter.com/ichikaku1
URL株式会社CLOQUE

コメント

コメントの記入