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

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

Twitter リスト

2010年5月31日

青木健至

この記事を読むのに必要な時間：およそ 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　表示オブジェクトの確認

Flash, フレームワーク, Progression

著者プロフィール

青木健至（あおきたけし）

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

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

バックナンバー

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

第8回　コンポーネントスタイル（2）
第7回　コンポーネントスタイル（1）
第6回　タイムラインスタイル（2）
第5回　タイムラインスタイル（1）
第4回　Flex SDK環境における，Progressionを使ったWebサイト構築
第3回　フルパフォーマンス！クラススタイル（2）
第2回　フルパフォーマンス！クラススタイル（1）
第1回　はじめよう！Progression

ピックアップ

LINE テクノロジー＆エンジニアリング大全: 「LINE DEVELOPER DAY 2020」より，注目すべきテクノロジー，エンジニアリングをピックアップし，詳説インタビューを実施しました。
プロダクト思考で開発が進む「みてね」の今とこれから～みてねの生みの親笠原健治氏，開発マネージャ酒井篤氏が考える，プロダクトとエンジニアリングの素敵な関係: 「家族アルバムみてね」を支えるエンジニアリングについて，開発体制やプロダクトの開発・運用，これからのビジョンについて伺いました。
自分の証明と持続的な学びがこれからのDX人材の鍵を握る～A-BANKが考えるDX人材バンクの在り方とは？: 2020年11月にスタートしたA-BANKの人材バンク。評価・育成・紹介の一体型人材紹介から見える，これからの人材エコシステムに迫ります。
APIゲートウェイとサービスメッシュの違い: APIゲートウェイとサービスメッシュの，それぞれの概要とユースケースを紹介し，いずれを使用するかの判断の指針となるチートシートを提供しています。
LightningChart® Traderによるテクニカル分析と証券取引アプリケーションの開発: 証券取引アプリケーションの開発プロセスを大幅に簡素化するLightningChart® Traderのビルドイン機能について紹介します。
コードの安全性・安定性を高める開発サイクル～テスト管理の効率を上げ，脆弱性診断を自動で行う～: 本連載では，連載「業務を改善する情報共有の仕掛け」を受けつつ，安全性・安定性を加えた開発サイクルについて考えていきます。

その他の連載

CSS3アニメーションでつくるインターフェイス表現: CSS3によるアニメーション表現を紹介していきます。その中でも，幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。
MySQL道普請便り: 本連載では，MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。
Ubuntu Weekly Recipe: Ubuntuの強力なデスクトップ機能を活用するための，いろいろなレシピをお届けします。
JavaScriptセキュリティの基礎知識: JavaScriptに関するセキュリティ上の問題はどこで発生し，どうすれば防ぐことができるのか？について解説していきます。
Javaでなぜ問題が起きるのか〜システムをきちんと運用するための基礎知識: システムは「作って終わり」ではなく，運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか，問題発生時に何をしなければならないのか，ポイントを解説していきます。
きたみりゅうじの聞かせて珍プレー: ソフトウェア開発の現場で体験したトホホな失敗，思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます！
玩式草子─ソフトウェアとたわむれる日々: Plamo Linuxのメンテナンスの傍ら，Linuxやオープンソースソフトと日々を過ごす著者が，その魅力とつきあい方を，エッセイ風味でお届けします。
はまちちゃんとわかばちゃんのREADER'S FORUM―読者のページ: WEB+DB PRESS特別編集部員，さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが，毎号，読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。