Flashのフレームワーク「Progression3」を始めてみよう!

第2回 サンプルを動作させてProgression3の基本を理解する

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

シーンを移動させる(1)

次はシーン移動を見てみましょう。これで3つの機能すべてを確認することになります。

プロジェクト作成時に生成されるIndex.asの中を確認してください。

59行目に以下記述があります。

リスト8

// 最初のシーンに移動します。
prog.goto( prog.firstSceneId ); 

実は,最初に作成されるプロジェクトの中で既にIndexSceneへとシーン移動をしています。

もっと分かりやすいように,もう一つシーンを作成し,移動させてみましょう。

シーンを移動させる際,キャストオブジェクトに用意されているボタンを利用します。そのため,ボタンも同時に作成します。

先ほどのMyCastSpriteの時と同様に,MyCastButton.asとMySceneObject.asをコピーし,パッケージ名を追記します。

図4 MyCastSprite.asをコピーして,myprojectフォルダの下に配置する

図4

次に,シーンを追加します。

IndexScene.asの20行目,コンストラクタに以下のとおりに記述します。

リスト9

public function IndexScene() {
  var scene1:MySceneObject = new MySceneObject( "scene1");
  addScene( scene1 ); 
}

これでシーンが追加されました。

次にシーン移動させるためのボタンを追加します。まず,外観と,押した際の移動先をボタンに設定します。

リスト10

public function MyCastButton( initObject:Object = null ) {
  super( initObject );
  //四角形を描画
  graphics.beginFill(0x000000FF);
  graphics.drawRect(0, 0, 250, 50);
  graphics.endFill();
  //移動先のシーンIDを設定
  sceneId = new SceneId("/index/scene1");
}

キャストボタンオブジェクトのsceneIdプロパティに移動先のシーンIDを設定することにより,ボタン押下の際にシーンの移動をさせることができます。

ボタンの設定が終わったところで,ボタンを表示させます。

IndexScene.asの18行目に以下の一行を追加して参照用の変数を宣言します。

リスト11

private var _button:MyCastButton; 

そして,47行目の_onInitメソッド内のコマンドに以下のとおりに追記します。

リスト12

protected override function _onInit():void {
  // 実行したいコマンドを登録します。
  addCommand(
    new AddChild(progression.container,_sprite = new MyCastSprite()),
    new AddChild(progression.container, _button = new MyCastButton())
  );
}

これで,シーンを移動させる準備は整いました。

この状態で,ムービープレビューをしてみてください。丸が出現して円が出現しきった2秒後に,四角いオブジェクトが出現するはずです。

このオブジェクトにマウスカーソルを載せてください。マウスカーソルが変化し,ボタンであることが分かります。この状態でボタンをクリックするとシーンの移動が行われていますが,状態を変化させるための記述がないため,全く変わっていないように見えます。

そこで,シーン移動の状態を出力させてみましょう。

Index.asの49行目に以下の記述があります。

リスト13

// 開発者用の出力を有効化します。
//Verbose.enabled = true; 
//Verbose.filteringCommand();)

この2つの行のコメントを外して保存し,もう一度ムービープレビューをしてください。

出力パネルに,以下のログが出力されます。

[LOG] シーン移動を開始, 目的地 =  /index
[LOG] /index シーンに移動。
[LOG] /index  シーンの load イベントを実行。
[LOG] /index  シーンの init イベントを実行。
[LOG] シーン移動を完了。

この状態で青いボタンを押してください。

以下のログが出力され,シーンの移動が行われていることが分かります。

[LOG] シーン移動を開始, 目的地 =  /index/scene1
[LOG] /index  シーンの goto イベントを実行。
[LOG] /index/scene1 シーンに移動。
[LOG] /index/scene1  シーンの load イベントを実行。
[LOG] /index/scene1  シーンの init イベントを実行。
[LOG] シーン移動を完了。

ProgressionインスタンスのVerboseプロパティの値を有効にすることで,このようにシーン移動の様子を出力してくれるようになります。最初慣れるまではこの値を有効にしておいて,シーン移動の様子を監視するようにした方が良いでしょう。

著者プロフィール

楢山哲弘(ならやまのりひろ)

3年前に上京してきた北海道出身のFlasher。

開発スピードを上げるため,Progressionに傾倒中。そのため,ブログではProgressionについての言及が多くなっている。

URLhttp://narayama.heteml.jp/