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

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

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

詳細ページの項目作成

シーン「AmericanScene」⁠FrenchScene」⁠MameScene」の表示オブジェクトを作成していきます。オブジェクトはシーン共通のものが5つ,シーン毎に各2つの計11個です。

シーン共通のものから作成していきます。[src]→[pages]にテンプレートから「MyCastSprite」を2つコピーします。それぞれのファイル名を「PhotoBG⁠⁠,⁠PhotoBase」に設定します。ファイルを開き,画像を埋め込みます。まず「PhotoBG」ファイルを開いてください。

リスト22 PhotoBG画像の埋め込み

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

次に「PhotoBase」ファイルを開いて、以下のように修正して下さい。

リスト23 PhotoBase画像の埋め込み

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

次に[src]→[ui]にテンプレートから「MyCastButton」を3つコピーします。それぞれのファイル名を「CloseButton」⁠BackButton」⁠NextButton」に設定してください。それぞれの遷移先を「sceneId」プロパティに設定するのですが,⁠CloseButton」ボタンを押したときは「GalleryScene」シーンに遷移するので,⁠sceneId」プロパティは「"index/gallery"」になります。⁠BackButton」ボタンと「NextButton」ボタンは滞在しているシーンによって「sceneId」プロパティの値が変わります。クラスの中では,コメントアウトしておきましょう。同時に画像の埋め込みも行います。まず,⁠CloseButton」ファイルを開いてください。

リスト24 CloseButton画像の埋め込み

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

次に「BackButton」ファイルを開いてください。

リスト25 BackButton画像の埋め込み

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

最後に,⁠NextButton」ファイルを開いてください。

リスト26 NextButton画像の埋め込み

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

続いて,シーン毎の表示オブジェクトを作成していきます。[src]→[pages]にテンプレートから「MyCastSprite」を6つコピーします。それぞれのファイル名を「AmericanPhoto」⁠AmericanText」⁠FrenchPhoto」⁠FrenchText」⁠MamePhoto」⁠MameText」に設定します。

次に,それぞれのクラスに画像の埋め込み設定を行います。それぞれのファイルに以下のソースを記述してください。

リスト27 AmericanPhoto画像の埋め込み

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

リスト28 AmericanText画像の埋め込み

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

リスト29 FrenchPhoto画像の埋め込み

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

リスト30 FrenchText画像の埋め込み

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

リスト31 MamePhoto画像の埋め込み

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

リスト32 MameText画像の埋め込み

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

これで,表示オブジェクトの設定が完了しました。次に実際に表示の処理を設定するのですが,シーンに共通の部分は親シーンのプロパティとして保持させます。シーン共通の表示オブジェクトは5つです。これらを「GalleryScene」クラスで定義します。シーン「AmericanScene」⁠FrenchScene」⁠MameScene」に遷移してきた際は,この5つの表示オブジェクトを表示させます。また,⁠GalleryScene」シーンに戻った時に,5つの表示オブジェクトの削除処理を行います。つまり,削除処理は「GalleryScene」クラス内で設定します。削除処理の設定はイベント「atSceneInit」に設定します。

では,⁠GalleryScene」ファイルを開き,プロパティの定義と削除処理を設定します。

リスト33 GalleryScene表示オブジェクトの削除処理設定

public class GalleryScene extends SceneObject {
  public var photoBG:PhotoBG;
  public var photoBase:PhotoBase;
  public var closeButton:CloseButton;
  public var backButton:BackButton;
  public var nextButton:NextButton;
  public function GalleryScene( name:String = null, initObject:Object = null ) {
    // インスタンスを生成します。
    photoBG = new PhotoBG();
    photoBG.x = 0;
    photoBG.y = 0;
    
    photoBase = new PhotoBase();
    photoBase.x = 100;
    photoBase.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;
  }
  
  override protected function atSceneInit():void {
    // 削除処理を設定します。
    addCommand(
      new RemoveChild( container , photoBG ),
      new RemoveChild( container , photoBase ),
      new RemoveChild( container , closeButton ),
      new RemoveChild( container , backButton ),
      new RemoveChild( container , nextButton )
    );
  }

これで,⁠GalleryScene」クラスの設定が完了しました。続いてクラス「AmericanScene」⁠FrenchScene」⁠MameScene」の設定に移ります。この3つのシーンは遷移してきたときに,シーン共通の表示オブジェクトを表示させます。この設定は「atSceneLoad」イベント内に記述します。⁠GalleryScene」シーンはこの3つのシーンの親シーンにあたるので,⁠GalleryScene」クラスのプロパティには「parent」プロパティを使用してアクセスします。さらに,シーン毎によって遷移先が変わる,⁠BackButton」ボタンと「NextButton」ボタンの「sceneId」プロパティも,イベント「atSceneLoad」内で設定します。また,シーン毎に表示させるオブジェクトの設定も行います。同時に,イベント「atSceneUnload」内に削除処理も設定します。

まず,⁠AmericanScene」ファイルを開いてください。

リスト34 AmericanSceneの設定

public class AmericanScene extends SceneObject {
  private var americanPhoto:AmericanPhoto;
  private var americanText:AmericanText;
  public function AmericanScene( name:String = null, initObject:Object = null ) {
    // シーン固有のインスタンスを生成します。
    americanPhoto = new AmericanPhoto();
    americanPhoto.x = 120;
    americanPhoto.y = 40;
    
    americanText = new AmericanText();
    americanText.x = 119;
    americanText.y = 354;
  }
  override protected function atSceneLoad():void {
    // parent プロパティを使用して backButton と nextButton の sceneId を設定します。
    GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/mame" );
    GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/french" );
    
    addCommand(
      // parent プロパティを使用して 親シーンの表示オブジェクトの表示処理を設定します。
      new AddChild( container , GalleryScene(parent).photoBG ),
      new AddChild( container , GalleryScene(parent).closeButton ),
      new AddChild( container , GalleryScene(parent).photoBase ),
      new AddChild( container , GalleryScene(parent).backButton ),
      new AddChild( container , GalleryScene(parent).nextButton ),
      // シーン固有の表示オブジェクトの表示処理を設定します。
      new AddChild( container , americanPhoto ),
      new AddChild( container , americanText )
    );
  }
  override protected function atSceneUnload():void {
    // シーン固有の表示オブジェクトの削除処理を設定します。
    addCommand(
      new RemoveChild( container , americanPhoto ),
      new RemoveChild( container , americanText )
    );
  }
}

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

リスト35 FrenchSceneの設定

public class FrenchScene extends SceneObject {
  private var frenchPhoto:FrenchPhoto;
  private 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;
  }
  // parent を使用して,親シーンのプロパティにアクセス。
  override protected function atSceneLoad():void {
    // parent プロパティを使用して backButton と nextButton の sceneId を設定します。
    GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/american" );
    GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/mame" );
    
    addCommand(
      // parent プロパティを使用して 親シーンの表示オブジェクトの表示処理を設定します。
      new AddChild( container , GalleryScene(parent).photoBG ),
      new AddChild( container , GalleryScene(parent).closeButton ),
      new AddChild( container , GalleryScene(parent).photoBase ),
      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 )
    );
  }
}

リスト36 MameSceneの設定

public class MameScene extends SceneObject {
  private var mamePhoto:MamePhoto;
  private 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;
  }
  // parent を使用して,親シーンのプロパティにアクセス。
  override protected function atSceneLoad():void {
    // parent プロパティを使用して backButton と nextButton の sceneId を設定します。
    GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/french" );
    GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/american" );
    
    addCommand(
      // parent プロパティを使用して 親シーンの表示オブジェクトの表示処理を設定します。
      new AddChild( container , GalleryScene(parent).photoBG ),
      new AddChild( container , GalleryScene(parent).closeButton ),
      new AddChild( container , GalleryScene(parent).photoBase ),
      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 )
    );
  }
}

以上で設定は完了です。ムービーを書き出して確認してください。それぞれのシーンに遷移した際に表示オブジェクトが表示され,ボタンを押した時も対応のシーンに遷移しているのが確認できます。また,⁠GalleryScene」シーンに遷移した際は,表示オブジェクトが削除されているのも確認できます。

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

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

著者プロフィール

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

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

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