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

第4回 Flex SDK環境における,Progressionを使ったWebサイト構築

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

Aboutページの項目作成

次に,AboutSceneに遷移した際の表示オブジェクトを設定していきます。[src]→[pages]にテンプレートから「MyCastSprite」を選択し,ファイル名を「AboutPage」にしてください。⁠AboutPage」クラスも画像データを埋め込みます。以下のように記述します。

リスト15 AboutPage画像の埋め込み

public class AboutPage extends CastSprite  {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/aboutPage.png")]
  private var Emb:Class;
  /**
   * 新しい AboutPage インスタンスを作成します。
   */
  public function AboutPage( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }
}

「AboutPage」クラスに画像の埋め込みが完了したら,⁠AboutScene」シーンで画像を表示させます。⁠AboutScene」ファイルを開いてください。インポートも忘れず行ってください。

リスト16 aboutPageの表示設定

// 変数定義
private var aboutPage:AboutPage;
public function AboutScene( name:String = null, initObject:Object = null ) {
  // 親クラスを初期化する
  super( name, initObject );
            
  // シーンタイトルを設定します。
  title = "title";
  
  // インスタンスを生成します。
  aboutPage = new AboutPage();
  aboutPage.x = 149;
  aboutPage.y = 134;
}
override protected function atSceneLoad():void {
  // 表示処理を設定します。
  addCommand(
    new AddChild( container , aboutPage )
  );
}
override protected function atSceneUnload():void {
  // 削除処理を設定します。
  addCommand(
    new RemoveChild( container , aboutPage )
  );
}

設定が完了したら,ムービーを書き出して確認しましょう。表示されている「AboutButton」ボタンを押して,⁠AboutScene」シーンに遷移すると,表示オブジェクトの「AboutPage」が表示されているのが確認できます。

図14 AboutPageの表示確認

図14 AboutPageの表示確認

Galleryページの項目作成

続いて,⁠GalleryScene」シーンに遷移した際に表示されるオブジェクトの設定を行います。⁠GalleryScene」シーンで表示されるオブジェクトは,⁠GalleryPage」⁠AmericanButton」⁠FrenchButton」⁠MameButton」の4つです。まずは,表示オブジェクト「GalleryPage」から作成します。

[src]→[pages]内にテンプレートから「MyCastSprite」を選択します。ファイル名は「GalleryPage」に設定します。⁠GalleryPage」クラスに画像を埋め込みます。

リスト17 GalleryPage画像の埋め込み

public class GalleryPage extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/galleryPage.png")]
  private var Emb:Class;
  /**
   * 新しい GalleryPage インスタンスを作成します。
   */
  public function GalleryPage( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }
}

次に,ボタン「AmericanButton」⁠FrenchButton」⁠MameButton」を作成します。[src]→[ui]にテンプレートから「MyCastButton」を3つ作成します。ファイル名をそれぞれ「AmericanButton」⁠FrenchButton」⁠MameButton」に変更します。これらのボタンは,始めに作成したシーン「AmericanScene」⁠FrenchScene」⁠MameScene」に遷移するボタンです。それぞれのクラスの「sceneId」を設定しましょう。加えて,それぞれに画像を埋め込みます。まず「AmericanButton」クラスからです。

リスト18 AmericanButton画像の埋め込み

public class AmericanButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/americanButton.png")]
  private var Emb:Class;
  /**
   * 新しい AmericanButton インスタンスを作成します。
   */
  public function AmericanButton( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // 移動先となるシーン識別子を設定します。
    sceneId = new SceneId( "/index/gallery/american" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

次に,⁠FrenchButton」の画像を埋め込みます。

リスト19 FrenchButton画像の埋め込み

public class FrenchButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/frenchButton.png")]
  private var Emb:Class;
  /**
   * 新しい FrenchButton インスタンスを作成します。
   */
  public function FrenchButton ( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // 移動先となるシーン識別子を設定します。
    sceneId = new SceneId( "/index/gallery/french" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

最後に「MameButton」の画像を埋め込みます。

リスト20 MameButton 画像の埋め込み

public class MameButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/mameButton.png")]
  private var Emb:Class;
  /**
   * 新しい MameButton インスタンスを作成します。
   */
  public function MameButton ( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // 移動先となるシーン識別子を設定します。
    sceneId = new SceneId( "/index/gallery/mame" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

これで,⁠GalleryScene」シーンを構成する表示オブジェクトの設定が完了しました。実際に表示させましょう。表示の設定は「GaleryScene」クラスで行います。表示オブジェクトのそれぞれのインスタンスを作成し,イベント「atSceneLoad」内で表示設定を,イベント「atSceneUnload」で削除処理を設定しましょう。

リスト21 

// 変数定義
private var galleryPage:GalleryPage;
private var americanButton:AmericanButton;
private var frenchButton:FrenchButton;
private var mameButton:MameButton;
public function GalleryScene( name:String = null, initObject:Object = null ) {
  // インスタンスを生成します。
  galleryPage = new GalleryPage();
  galleryPage.x = 151;
  galleryPage.y = 113;
  
  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(
    new AddChild( container , galleryPage ),
    new AddChild( container , americanButton ),
    new AddChild( container , frenchButton ),
    new AddChild( container , mameButton )
  );
}
override protected function atSceneUnload():void {
  // 削除処理を設定します。
  addCommand(
    new RemoveChild( container , galleryPage ),
    new RemoveChild( container , americanButton ),
    new RemoveChild( container , frenchButton ),
    new RemoveChild( container , mameButton )
  );
}

設定が完了したら,ムービーを書き出して確認してみましょう。⁠GalleryScene」シーンに遷移すると,表示オブジェクト「GalleryPage」と3つのボタンが表示されます。このボタンを押すと,それぞれの対応するシーンに遷移するのがログで確認できます。

図15 GallerySceneの表示オブジェクト確認

図15 GallerySceneの表示オブジェクト確認

図16 シーン遷移確認

図16 シーン遷移確認

著者プロフィール

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

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

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