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

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

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

5.ボタンの作成

次に,シーン間を遷移するためのボタンを作成していきます。これも同様の方法です。[template]→[MyCastButton.as]を,[src]→[ui]へ3つコピーします。それぞれのファイル名,クラス名,コンストラクタ名を「AmericanButton」⁠FrenchButton」⁠MameButton」に修正し、パッケージ名を「ui」に修正して下さい。

図7 ボタンの作成

図7 ボタンの作成

作成した「AmericanButton」⁠FrenchButton」⁠MameButton」クラスを開いてください。コンストラクタ内にある,遷移先を設定する「sceneId」プロパティを以下のように設定します。

リスト6 AmericanButtonのsceneIdの設定

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

リスト7 FrenchButtonのsceneIdの設定

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

リスト8 MameButtonのsceneIdの設定

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

「sceneId」プロパティの設定が完了したら,ボタンを表示させましょう。⁠GalleryScene」クラスを開いてください。⁠AmericanButton」⁠FrenchButton」⁠MameButton」クラスのインスタンスを作成し,座標を設定後,イベント「atSceneLoad」内で表示の設定を行います。また,イベント「atSceneUnload」内で,表示オブジェクトの削除設定も行います。それぞれのクラスのインポートも忘れず行いましょう。

リスト9 ボタンの表示

public class GalleryScene extends SceneObject { 
  public var americanButton:AmericanButton; 
  public var frenchButton:FrenchButton; 
  public var mameButton:MameButton; 
  public function GalleryScene( name:String = null, initObject:Object = null ) { 
  	// インスタンスを生成し、座標を設定します。
    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に画像の表示設定を登録します。
    addCommand( 
      new AddChild( container , americanButton ), 
      new AddChild( container , frenchButton ), 
      new AddChild( container , mameButton ) 
    ); 
  }
  override protected function atSceneUnload():void {
    // addCommandに画像の削除設定を登録します。
    addCommand(
      new RemoveChild( container , americanButton ),
      new RemoveChild( container , frenchButton ),
      new RemoveChild( container , mameButton )
    );
  }

これでボタンの表示も完了したので,ここで一度ムービーを書き出し,ボタンをクリックして確認してみましょう。

図8 ボタンの表示

図8 ボタンの表示

図9 シーン遷移の確認 AmericanScene

図9 シーン遷移の確認 AmericanScene

図10 シーン遷移の確認 FrenchScene

図10 シーン遷移の確認 FrenchScene

図11 シーン遷移の確認 MameScene

図11 シーン遷移の確認 MameScene

「AmericanButton」⁠FrenchButton」⁠MameButton」それぞれのボタンをクリックすると,⁠GalleryScene」シーンから「AmericanScene」⁠FrenchScene」⁠MameScene」シーンに遷移しているのが確認できます。

6.表示オブジェクトの設定

次に,シーンの表示オブジェクトの設定を行います。前項目までで作成したシーンは,サイト上での「動物の詳細ページ」にあたります。まず,⁠AmericanScene」クラスを開いてください。

シーンに表示させるオブジェクトの設定を行っていきます。以下のソースで宣言しているクラスは,flaファイルにシンボルとして登録してあります。これらは「動物の詳細ページ」の枠となる部分です。それぞれインスタンスを生成し,表示する座標を設定します。イベント「atSceneLoad」内で表示の設定を行います。

リスト10 表示オブジェクトの設定

public class AmericanScene extends SceneObject { 
  public var photoBG:PhotoBG; 
  public var base:PhotoBase; 
  public var closeButton:CloseButton; 
  public var backButton:BackButton; 
  public var nextButton:NextButton; 
  public var americanPhoto:AmericanPhoto; 
  public var americanText:AmericanText; 
  public function AmericanScene() { 
  	// インスタンスを生成し、座標を設定します。
    photoBG = new PhotoBG(); 
    
    base = new PhotoBase(); 
    base.x = 100; 
    base.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; 
    
    americanPhoto = new AmericanPhoto(); 
    americanPhoto.x = 120; 
    americanPhoto.y = 40; 
    
    americanText = new AmericanText(); 
    americanText.x = 119; 
    americanText.y = 354; 
  } 
  override protected function atSceneLoad():void { 
     // addCommandに画像の表示設定を登録します。  
     addCommand( 
      new AddChild( container , photoBG ), 
      new AddChild( container , closeButton ), 
      new AddChild( container , base ), 
      new AddChild( container , backButton ), 
      new AddChild( container , nextButton ), 
      new AddChild( container , americanPhoto ), 
      new AddChild( container , americanText ) 
    ); 
  } 
} 

ムービーを書き出して確認してみましょう。

図12 AmericanSceneクラスの確認

図12 AmericanSceneクラスの確認

赤線で囲んでいる部分がそれぞれのシンボルに対応している部分です。シンボルと画像の詳細についてはFlaファイルを参照してください。

「GalleryScene」シーンから「AmericanScene」シーンに遷移すると,⁠AmericanScene」シーンに表示されているオブジェクトが確認できます。

まだ,左右に移動するボタンと閉じるボタンが機能していません。ボタンの機能設定は後で行います。

この手順で,⁠FrenchScene」シーンと「MameScene」シーンも設定を行うのですが,この設定方法だと「AmericanScene」⁠FrenchScene」⁠MameScene」シーンそれぞれに遷移する度,枠となる表示オブジェクトを表示したり,削除する設定が必要です。しかし今回は,サイトの拡張性は考えないものとして,必ずこのシーン構成になると考え、まとめることができる部分は,一度に設定をまとめ、効率を良くしましょう。⁠動物の詳細ページ」の表示オブジェクトを親シーンのプロパティとして設定します。

「GalleryScene」クラスを開いてください。

リスト11 プロパティに設定

public class GalleryScene extends SceneObject { 
  public var photoBG:PhotoBG; 
  public var base:PhotoBase; 
  public var closeButton:CloseButton; 
  public var backButton:BackButton; 
  public var nextButton:NextButton; 
  public function GalleryScene() { 
  	// インスタンスを生成し、座標を設定します。
    photoBG = new PhotoBG(); 
    
    base = new PhotoBase(); 
    base.x = 100; 
    base.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; 
  } 

これで,親シーンである「GalleryScene」シーンへ表示オブジェクトをプロパティとして保持させました。先ほど「AmericanScene」で設定した表示項目に関しては消去しておいてください。⁠GalleryScene」シーン内では,基本設定だけを行い表示リストへの追加設定は行いません。⁠GalleryScene」シーンには子シーンが3つあります。子シーンには,⁠GalleryScene」シーンから遷移してきた場合,⁠動物の詳細ページ」の枠となる表示オブジェクトを必ず表示させるよう設定します。遷移してきた時なので,表示を設定するイベントは「atSceneLoad」になります。

もう一度「AmericanScene」クラスを開いてください。ソースを修正します。先ほどは自クラスの中で宣言した変数でしたが,親シーンのプロパティにアクセスしますので,⁠parent」プロパティを使用します。⁠parent」プロパティは,呼び出し元の「AmricanScene」シーンの親にあたる「GalleryScene」シーンになります。⁠parent」プロパティを「GalleryScene」クラスでキャストし,⁠GalleryScene」シーンの持つプロパティにアクセスします。

リスト12 親シーンのプロパティにアクセス

public class AmericanScene extends SceneObject {
  public var americanPhoto:AmericanPhoto; 
  public var americanText:AmericanText; 
  public function AmericanScene() {
  	// インスタンスを生成し、座標を設定します。
    americanPhoto = new AmericanPhoto(); 
    americanPhoto.x = 120; 
    americanPhoto.y = 40; 
    
    americanText = new AmericanText(); 
    americanText.x = 119; 
    americanText.y = 354; 
  } 
  override protected function atSceneLoad():void { 
    // parentプロパティを使用し、親シーンの持つプロパティにアクセスします。
    addCommand( 
      new AddChild( container , GalleryScene(parent).photoBG ), 
      new AddChild( container , GalleryScene(parent).closeButton ), 
      new AddChild( container , GalleryScene(parent).base ), 
      new AddChild( container , GalleryScene(parent).backButton ), 
      new AddChild( container , GalleryScene(parent).nextButton ), 
      // 自クラスのプロパティの表示を設定します。
      new AddChild( container , americanPhoto ), 
      new AddChild( container , americanText ) 
    ); 
  } 
} 

ムービーを書き出して「AmericanScene」シーンで確認しましょう。さきほどと表示結果が同じになります。

シーンを移動する際は,自クラスのプロパティだけ削除します。続けて「AmericanScene」シーンのイベント「atSceneUnload」内に以下のソースを挿入してください。

リスト13 表示オブジェクトの削除

override protected function atSceneUnload():void { 
  // 自クラスのプロパティのみ削除します。
  addCommand( 
    new RemoveChild( container , americanPhoto ), 
    new RemoveChild( container , americanText ) 
  ); 
} 

「FrenchScene」⁠MameScene」クラスも同様に記述します。

リスト14 FrenchSceneクラスの設定

public class FrenchScene extends SceneObject { 
  public var frenchPhoto:FrenchPhoto; 
  public 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; 
  } 
  override protected function atSceneLoad():void { 
    // parentプロパティを使用し、親シーンの持つプロパティにアクセスします。
    addCommand( 
      new AddChild( container , GalleryScene(parent).photoBG ), 
      new AddChild( container , GalleryScene(parent).closeButton ), 
      new AddChild( container , GalleryScene(parent).base ), 
      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 ) 
    ); 
  } 
} 

リスト15 MameSceneクラスの設定

public class MameScene extends SceneObject { 
  public var mamePhoto:MamePhoto; 
  public 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; 
  } 
  override protected function atSceneLoad():void { 
	// parentプロパティを使用し、親シーンの持つプロパティにアクセスします。
    addCommand( 
      new AddChild( container , GalleryScene(parent).photoBG ), 
      new AddChild( container , GalleryScene(parent).closeButton ), 
      new AddChild( container , GalleryScene(parent).base ), 
      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 ) 
    ); 
  } 
} 

ムービーを書き出して確認しましょう。それぞれのシーンに遷移すると,オブジェクトが表示されているのが確認できます。

図13 FrenchSceneクラスの確認

図13 FrenchSceneクラスの確認

図14 MameSceneクラスの確認

図14 MameSceneクラスの確認

「AmericanScene」⁠FrenchScene」⁠MameScene」シーン間を遷移する際は,それぞれが持つ表示オブジェクトを削除するだけで結構ですが,⁠GalleryScene」シーンに戻ってきた際は「動物の詳細ページ」の表示オブジェクトを削除する必要があります。子シーンから遷移してきた場合だけですので,表示オブジェクトの削除を設定するイベントは「atSceneInit」になります。

「GalleryScene」クラスを開き,イベント「atSceneInit」内に表示オブジェクトの削除を設定します。

リスト16 表示オブジェクトの削除設定

override protected function atSceneInit():void { 
  // addCommandに画像の削除設定を登録します。
  addCommand( 
    new RemoveChild( container , photoBG ), 
    new RemoveChild( container , base ), 
    new RemoveChild( container , closeButton ), 
    new RemoveChild( container , backButton ), 
    new RemoveChild( container , nextButton ) 
  ); 
} 

これで「動物の詳細ページ」の表示オブジェクトの表示に関する設定が完了しました。

著者プロフィール

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

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

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