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

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

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

7.ボタンの機能設定

次に、⁠動物の詳細ページ」の表示オブジェクトである,⁠CloseButton」⁠BackButton」⁠NextButton」ボタンの機能を設定していきます。

プロジェクトの[template]→[MyCastButton.as]を[src]→[ui]に3つコピーします。3つのファイル名,クラス名,コンストラクタ名を「CloseButton」⁠BackButton」⁠NextButton」に修正します。パッケージ名を「ui」に修正します。

図15 ボタンクラス作成

図15 ボタンクラス作成

まずは「CloseButton」クラスから設定します。⁠CloseButton」クラスは「動物の詳細ページ」を閉じて,⁠動物の写真一覧ページ」に遷移するボタンです。⁠CloseButton」クラスを開いてください。⁠sceneId」プロパティを設定します。⁠動物の写真一覧ページ」である「GalleryScene」シーンに遷移するよう設定します。

リスト17 CloseButtonクラスの設定

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

ここで,⁠CloseButton」のシンボルと関連づけをしましょう。⁠index.fla」内の[ui]→⁠CloseButton」から右クリックメニューのプロパティを開きます。⁠クラス」の項目が「CloseButton」になっていますが,これを「ui.CloseButton」に修正します。

図16 シンボルの関連付けクラス修正

図16 ボタンクラス作成

関連づけが完了したら,チェックボタンをクリックして確認しましょう。そして,ムービーを書き出して確認しましょう。⁠CloseButton」ボタンにカーソルを合わせるとボタンとして機能しています。クリックすると,⁠GalleryScene」シーンに遷移するはずです。

次に「BackButton」クラスと「NextButton」クラスの設定を行います。この2つのボタンは「AmericanScene」⁠FrenchScene」⁠MameScene」シーン間を遷移する機能を有します。これまで,ボタンを押した時の遷移先はボタンの「sceneId」プロパティで設定を行ってきました。しかし,⁠BackButton」ボタンと「NextButton」ボタンは表示されたシーンによって,遷移先が変わります※3⁠。⁠BackButton」「NextButton」のクラス内の「sceneId」はコメントアウトしましょう。

※3
「AmericanScene」シーンでの「BackButton」ボタンの遷移先は「MameScene」シーンですが,⁠MameScene」シーンでの「BackButton」ボタンの遷移先は「FrenchScene」シーンになります。

リスト18 BackButton,NextButtonクラスのsceneId設定

public function BackButton( initObject:Object = null ) { 
  // 移動先となるシーン識別子を設定 します。 
  // コメントアウト 
  //sceneId = new SceneId( "/index" ); 
} 
--------------------------------------------------- 
public function NextButton( initObject:Object = null ) { 
  // 移動先となるシーン識別子を設定 します。 
  // コメントアウト 
  //sceneId = new SceneId( "/index" ); 
} 

未設定の「sceneId」プロパティは,⁠AmericanScene」⁠FrenchScene」⁠MameScene」シーンでそれぞれ設定します。つまり,⁠BackButton」ボタンと「NextButton」ボタンの「sceneId」プロパティはシーンを遷移するたびに遷移先が変更されます。

「BackButton」「NextButton」のインスタンスは,⁠GalleryScene」クラスのプロパティですので,⁠parent」プロパティを使用します。設定を有効にするため,⁠atSceneLoad」イベント内で設定します。

「AmericanScene」クラスを開いて設定してください。

リスト19 AmericanSceneクラスのsceneId設定

override protected function atSceneLoad():void { 
  // parentプロパティでアクセスし、移動先となるシーン識別子を設定します。
  GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/mame" ); 
  GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/french" ); 
  addCommand( 
      ※略
  ); 
} 

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

リスト20 FrenchSceneのsceneId設定

override protected function atSceneLoad():void { 
  // parentプロパティでアクセスし、移動先となるシーン識別子を設定します。
  GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/american" ); 
  GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/mame" ); 
} 

リスト21 MameSceneのsceneId設定

override protected function atSceneLoad():void { 
  // parentプロパティでアクセスし、移動先となるシーン識別子を設定します。
  GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/french" ); 
  GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/american" ); 
} 

「BackButton」「NextButton」「CloseButton」と同様に,⁠index.fla」内のシンボルと関連付けを行います。それぞれのシンボルのプロパティを開き、クラスの部分に「ui」を足してください。

設定が完了したら,ムービーを書き出して確認しましょう。シーン毎に設定した遷移先に遷移しているのが確認できます。

図17 設定した遷移の確認

図17 設定した遷移の確認

8.ロールオーバーの設定

トップページのボタンにロールオーバー時の効果を加えましょう。使用するのはFlaファイルの中にある「Effect」というシンボルです。Progressionの描画クラスを使用して「Effect」を定義しましょう。プロジェクトの[template]から[MyCastSprite.as]を[src]にコピーし,ファイル名,クラス名,コンストラクタ名を「Effect」に修正します。

図18 Effectの作成

図18 Effectの作成

次に「Effect」を開き,設定を行います。ボタンにマウスポインタがフォーカスされた際に,左側から効果を出したいので,x座標の初期値をマイナス値に設定し、同時にalpha値も0にします。この設定を,イベント「atCastAdded」内に設定します。⁠atCastAdded」は,コマンドの「AddChild」などを経由して,表示リストに追加されたタイミングのイベントを示します。

リスト21 Effectの設定

public function Effect( initObject:Object = null ) { 
  super( initObject ); 
} 
override protected function atCastAdded():void { 
  // 座標とアルファ値を設定します。
  x = -70; 
  alpha = 0; 
} 

この設定により,⁠Effect」は表示リストに追加された際,x座標は-70になり,alpha値は0になります。

では,設定した「Effect」を表示させましょう。トップページにあるボタンに対して使用するので,⁠HomeButton」⁠AboutButton」⁠GalleryButton」を開き,設定を行います。

「Effect」型で変数を定義し,コンストラクタ内でインスタンスを生成します。表示の設定を,ロールオーバー時にあたる,イベント「atCastRollOver」内に設定します。まず,コマンド「AddChild」を使用し,⁠Effect」を表示させます。ロールオーバーはこのクラスのインスタンスにだけ適応されればよいので、第1引数には「this」プロパティを入れます。⁠AddChild」を使用した際,先ほど「Effect」で設定した「atCastAdded」イベントが送出されます。ここまでで,表示リストには追加されましたが,x座標がマイナス値である上,alpha値が0なので視認はできません。コマンド「DoTweener」で動きを加え表示させましょう。

リスト22 atCastRollOverの設定

override protected function atCastRollOver():void { 
  // addCommandにEffectの表示設定を登録します。
  addCommand( 
    new AddChild( this , effect ), 
    new DoTweener( effect , { alpha:1 , x:0 , time:.2 , transition:"easeOutCirc" } ) 
  ); 
} 

ロールアウト時の設定も行いましょう。コマンド「Dotweener」を使用し,画面から表示させなくし,コマンド「RemoveChild」を使用し削除します。イベント「atCastRollOut」内に以下のように記述します。

リスト23 atCastRollOutの設定

override protected function atCastRollOut():void { 
  // addCommandにEffectの削除設定を登録します。
  addCommand( 
    new DoTweener( effect , { alpha:0 , x:-70 , time:.2 , transition:"easeInCirc" } ), 
    new RemoveChild( this , effect ) 
  ); 
} 

上記の設定を,⁠HomeButton」⁠AboutButton」⁠GalleryButton」クラスに行います。

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

図19 ロールオーバー,ロールアウトの確認

図19 ロールオーバー,ロールアウトの確認

マウスのフォーカスをボタンにあてた際,⁠Effect」が表示され,マウスをボタンから離すと「Effect」も表示されなくなります。

著者プロフィール

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

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

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