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

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

さて今回は、早速Progressionを使用して、実際に動くサンプルを作成しながら、Progressionが持っている特徴的な機能を説明してきます。

なお、今回の説明するサンプルを以下に用意しました。

Progressionを構成する3つの機能

サンプルを作成する前に、Progressionは大きく3つの機能により成り立っているという点をお話しします。

その3つの機能とは、以下のものです。

  • シーン
  • コマンド
  • キャスト

この3つの機能を理解することが、Progressionを理解する上で非常に重要になってきます。

シーン

Progressionのシーンとは、1つの場面を表現する機能です。

複数のHTMLファイルで構成される一般的なWebサイトのように、複数のシーンの階層構造でWebサイトを構築できるようになります。

Progressionには、シーン間のシームレスな移動、各シーンの参照やシーン毎のアドレス発行など、様々な機能が実装されています。Progressionの中心機能といってもいいでしょう。

ProgressionでFlashコンテンツを作成する際は、最初に、シーン構造を考えることから始めます。

コマンド

コマンドとは処理を登録し、実行するための機能です。

オブジェクトを表示させたり、移動させたり、データを読み込んだりといった処理を簡潔に分かりやすく記述できるようになります。

主要な処理には用意されているコマンドを利用しますが、自作のコマンドを制作することも可能です。

キャスト

キャストとは、Progressionで用意されているオブジェクトの総称です(一般的なプログラム言語で用いられる、型変換のキャストとは違います⁠⁠。

呼び出し元ではなく、キャストオブジェクト側に出現時や退出時の処理を記述することができます。

3つの機能の関係

さて、ザックリ3つの機能の説明をしましたが、まだ、何のことかサッパリ分からない方も多いのではないでしょうか?

以前、Progression開発者の阿部さんがTwitter上で⁠プログレ(監督⁠⁠、シーン(舞台⁠⁠、コマンド(脚本、演技指導⁠⁠、キャスト(役者)ですねー⁠といった発言をしていましたが、これが一番分かりやすく説明できる表現になると思います。

これを図で表してみましょう。

図1 全体を統括するのがProgression。シーンのとある状態でコマンドが実行され、キャストが個々特有の振る舞いをしながら舞台に登場・退場する
図1

現時点では、なんとなくで良いので、Progressionはシーン、コマンド、キャストという機能で成り立っているということだけ把握してもらえれば十分です。サンプルの作成を進めながら理解を深めていきましょう。

早速コマンドの動作を見てみる

今回は、コマンドの動作から見ていきます。

前回作成したプロジェクトのIndexScene.asの42行目、_onInitメソッド内に以下のとおりに記述してください。

リスト1
protected override function _onInit():void {
  // 実行したいコマンドを登録します。
  addCommand(
    new Trace("初めてのコマンド"),
    new Wait(1000),
    new Trace("1秒待ちました"),
    new Wait(1000),
    new Trace("もう1秒待ちました")
  );
}

そして、Flashでムービープレビューをしてみましょう。出力パネルに1秒毎にtrace文が出力されたと思います。

これは、trace文を出力するTraceコマンドと、指定時間処理待ちをするWaitコマンドを利用しています(各コマンドの解説は次回連載で行います⁠⁠。

実際動かしてみると分かりますが、Progressionのコマンドは処理の流れを制御する仕組みを提供してくれます。

次に、以下のように変えてムービープレビューをしてみましょう。

リスト2
protected override function _onInit():void {
  // 実行したいコマンドを登録します。
  addCommand(
    new Trace("初めてのコマンド"),
    new Wait(1000),
    [
    new Trace("1秒待ちました"),
    new Wait(1000),
    new Trace("これは同時に実行されます")
    ] 
  );
}

どうでしょうか? [ ]で括られた中のコマンドは全て同時に実行されているのが分かると思います。

順番に処理させるものをシリアルリスト、同時実行させるものをパラレルリストと呼び、これらを組み合わせて、複雑な処理フローを実現させることができるようになります。

キャストオブジェクトを登場させる

次に、キャストオブジェクトを使用してみましょう。

個々のキャストオブジェクトは、用意されているキャストオブジェクトを継承して作成します。

作成したプロジェクトフォルダの下にTemplatesというフォルダがありますが、ここからMyCastSprite.asをコピーして、myprojectフォルダの下に配置してください。

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

コピー後、MyCastSpriteの4行目に以下のようにパッケージ名を追記します。

リスト3
package myproject{

次にMyCastSpriteの見た目を記述します。

MyCastSpriteの20行目からのコンストラクタに以下のとおりに記述します。

リスト4
public function MyCastSprite( initObject:Object = null ) {
  super( initObject );
  //赤色の円を描画
  graphics.beginFill(0x00FF0000);
  graphics.drawCircle(400, 300, 50);
  graphics.endFill();
}

次にMyCastSprite.asの32行目から下を以下のように追記してください。

リスト5
protected override function _onCastAdded():void {
  // 実行したいコマンドを登録します。
  addCommand(
    // 任意のコマンドを記述してください。
    new Prop(this,{alpha:0}),
    new DoTweener(this,{alpha:1,time:2})
  );
}

次にProgressionの表示リストに追加します。

まず、後のことを考えて、参照用のプライベート変数を宣言します。IndexScene.asの17行目に以下の一行を追加してください。

リスト6
private var _sprite:MyCastSprite; 

そして、IndexScene.asの43行目、_onInitメソッド内を以下のように書き換えてください。

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

ここまで記述できたら、ムービープレビューをしてみましょう。

少々分かりづらいかもしれませんが、円がフェードインして登場します。

図3 円が登場する
図3

今回overrideした_onCastAddedメソッドは、キャストオブジェクトが表示リストに追加された際に動作するメソッドです。

このようにキャストオブジェクトは出現時と退出時の振る舞いをオブジェクト側で記述できます(新しいコマンドが沢山登場しましたが、これらについては次回連載で述べますので、動作を見ることに集中してください⁠⁠。

シーンを移動させる(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プロパティの値を有効にすることで、このようにシーン移動の様子を出力してくれるようになります。最初慣れるまではこの値を有効にしておいて、シーン移動の様子を監視するようにした方が良いでしょう。

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

もっと見た目に分かりやすくなる様にシーンを作りこみましょう。

そのための準備として、キャストオブジェクトを追加します。

前述の「キャストオブジェクトを登場させる」を参考に、もう一つMyCastSprite2.asという名前でCastSpriteを継承したキャストオブジェクトを作成します。

先ほど作成したMyCastSprite.asをコピーし、名前を変更してください。

描画する円の色を、以下のように記述して青色にしましょう。

graphics.beginFill(0x000000FF);

そしてボタンをもう一つ作成します。

こちらも先ほど作成したMyCastButton.asをコピーし、MyCastButton2.asという名前にします。

描画色は

raphics.beginFill(0x00FF0000);

として赤にし、シーンIDを

sceneId = new SceneId("/index");

としてインデックスシーンに戻るような設定にします。

さて、シーン遷移時の状態変化を書いて行きましょう。

まず、インデックスシーンから移動する際、赤い丸とボタンには消えてもらいましょう。

IndexScene.asの59行目_onGotoメソッドに以下記述をします。

リスト13
protected override function _onGoto():void {
  // 実行したいコマンドを登録します。
  addCommand(
    new RemoveChild(progression.container,_sprite), 
    new RemoveChild(progression.container,_ button) 
  );
}

次に、シーンを移動した際、新しく作ったキャストオブジェクトを出現させます。

MySceneObject.asの17行に以下参照用の変数を定義

リスト14
private var _sprite:MyCastSprite2; 
private var _button:MyCastButton2; 

45行目の_onInitメソッドに以下出現処理を記述

リスト15
protected override function _onInit():void {
  // 実行したいコマンドを登録します。
  addCommand(
    new AddChild(progression.container,_sprite = new MyCastSprite2()),

    new AddChild(progression.container, _button = new MyCastButton2())
  );
}

シーンから移動する際に、追加したキャストオブジェクトを消します。

58行目のonGotoメソッドに以下退出処理を記述

リスト16
protected override function _onGoto():void {
  // 実行したいコマンドを登録します。
  addCommand(
    new RemoveChild(progression.container,_sprite), 
    new RemoveChild(progression.container, _button) 
  );
}

ここまで出来たらムービープレビューをして下さい。

どうでしょう? 四角いボタンを押す毎にシーンを行ったり来たりする様になりましたでしょうか?

図5 シーン1(左図⁠⁠ と シーン2(右図)
図5 シーン1 図6 シーン2

これでProgressionの3つの機能全てを使用したサンプルが出来上がりました。 次回は今回説明が出来なかったProgressionで用意されているコマンド、キャストの種類について説明いたします。

おすすめ記事

記事・ニュース一覧