さて今回は、早速Progressionを使用して、実際に動くサンプルを作成しながら、Progressionが持っている特徴的な機能を説明してきます。
なお、今回の説明するサンプルを以下に用意しました。
Progressionを構成する3つの機能
サンプルを作成する前に、Progressionは大きく3つの機能により成り立っているという点をお話しします。
その3つの機能とは、以下のものです。
この3つの機能を理解することが、Progressionを理解する上で非常に重要になってきます。
シーン
Progressionのシーンとは、1つの場面を表現する機能です。
複数のHTMLファイルで構成される一般的なWebサイトのように、複数のシーンの階層構造でWebサイトを構築できるようになります。
Progressionには、シーン間のシームレスな移動、各シーンの参照やシーン毎のアドレス発行など、様々な機能が実装されています。Progressionの中心機能といってもいいでしょう。
ProgressionでFlashコンテンツを作成する際は、最初に、シーン構造を考えることから始めます。
コマンド
コマンドとは処理を登録し、実行するための機能です。
オブジェクトを表示させたり、移動させたり、データを読み込んだりといった処理を簡潔に分かりやすく記述できるようになります。
主要な処理には用意されているコマンドを利用しますが、自作のコマンドを制作することも可能です。
キャスト
キャストとは、Progressionで用意されているオブジェクトの総称です(一般的なプログラム言語で用いられる、型変換のキャストとは違います)。
呼び出し元ではなく、キャストオブジェクト側に出現時や退出時の処理を記述することができます。
3つの機能の関係
さて、ザックリ3つの機能の説明をしましたが、まだ、何のことかサッパリ分からない方も多いのではないでしょうか?
以前、Progression開発者の阿部さんがTwitter上で“プログレ(監督)、シーン(舞台)、コマンド(脚本、演技指導)、キャスト(役者)ですねー”といった発言をしていましたが、これが一番分かりやすく説明できる表現になると思います。
これを図で表してみましょう。
現時点では、なんとなくで良いので、Progressionはシーン、コマンド、キャストという機能で成り立っているということだけ把握してもらえれば十分です。サンプルの作成を進めながら理解を深めていきましょう。
早速コマンドの動作を見てみる
今回は、コマンドの動作から見ていきます。
前回作成したプロジェクトのIndexScene.asの42行目、_onInitメソッド内に以下のとおりに記述してください。
そして、Flashでムービープレビューをしてみましょう。出力パネルに1秒毎にtrace文が出力されたと思います。
これは、trace文を出力するTraceコマンドと、指定時間処理待ちをするWaitコマンドを利用しています(各コマンドの解説は次回連載で行います)。
実際動かしてみると分かりますが、Progressionのコマンドは処理の流れを制御する仕組みを提供してくれます。
次に、以下のように変えてムービープレビューをしてみましょう。
どうでしょうか? [ ]で括られた中のコマンドは全て同時に実行されているのが分かると思います。
順番に処理させるものをシリアルリスト、同時実行させるものをパラレルリストと呼び、これらを組み合わせて、複雑な処理フローを実現させることができるようになります。
キャストオブジェクトを登場させる
次に、キャストオブジェクトを使用してみましょう。
個々のキャストオブジェクトは、用意されているキャストオブジェクトを継承して作成します。
作成したプロジェクトフォルダの下にTemplatesというフォルダがありますが、ここからMyCastSprite.asをコピーして、myprojectフォルダの下に配置してください。
コピー後、MyCastSpriteの4行目に以下のようにパッケージ名を追記します。
次にMyCastSpriteの見た目を記述します。
MyCastSpriteの20行目からのコンストラクタに以下のとおりに記述します。
次にMyCastSprite.asの32行目から下を以下のように追記してください。
次にProgressionの表示リストに追加します。
まず、後のことを考えて、参照用のプライベート変数を宣言します。IndexScene.asの17行目に以下の一行を追加してください。
そして、IndexScene.asの43行目、_onInitメソッド内を以下のように書き換えてください。
ここまで記述できたら、ムービープレビューをしてみましょう。
少々分かりづらいかもしれませんが、円がフェードインして登場します。
今回overrideした_onCastAddedメソッドは、キャストオブジェクトが表示リストに追加された際に動作するメソッドです。
このようにキャストオブジェクトは出現時と退出時の振る舞いをオブジェクト側で記述できます(新しいコマンドが沢山登場しましたが、これらについては次回連載で述べますので、動作を見ることに集中してください)。
シーンを移動させる(1)
次はシーン移動を見てみましょう。これで3つの機能すべてを確認することになります。
プロジェクト作成時に生成されるIndex.asの中を確認してください。
59行目に以下記述があります。
実は、最初に作成されるプロジェクトの中で既にIndexSceneへとシーン移動をしています。
もっと分かりやすいように、もう一つシーンを作成し、移動させてみましょう。
シーンを移動させる際、キャストオブジェクトに用意されているボタンを利用します。そのため、ボタンも同時に作成します。
先ほどのMyCastSpriteの時と同様に、MyCastButton.asとMySceneObject.asをコピーし、パッケージ名を追記します。
次に、シーンを追加します。
IndexScene.asの20行目、コンストラクタに以下のとおりに記述します。
これでシーンが追加されました。
次にシーン移動させるためのボタンを追加します。まず、外観と、押した際の移動先をボタンに設定します。
キャストボタンオブジェクトのsceneIdプロパティに移動先のシーンIDを設定することにより、ボタン押下の際にシーンの移動をさせることができます。
ボタンの設定が終わったところで、ボタンを表示させます。
IndexScene.asの18行目に以下の一行を追加して参照用の変数を宣言します。
そして、47行目の_onInitメソッド内のコマンドに以下のとおりに追記します。
これで、シーンを移動させる準備は整いました。
この状態で、ムービープレビューをしてみてください。丸が出現して円が出現しきった2秒後に、四角いオブジェクトが出現するはずです。
このオブジェクトにマウスカーソルを載せてください。マウスカーソルが変化し、ボタンであることが分かります。この状態でボタンをクリックするとシーンの移動が行われていますが、状態を変化させるための記述がないため、全く変わっていないように見えます。
そこで、シーン移動の状態を出力させてみましょう。
Index.asの49行目に以下の記述があります。
この2つの行のコメントを外して保存し、もう一度ムービープレビューをしてください。
出力パネルに、以下のログが出力されます。
この状態で青いボタンを押してください。
以下のログが出力され、シーンの移動が行われていることが分かります。
ProgressionインスタンスのVerboseプロパティの値を有効にすることで、このようにシーン移動の様子を出力してくれるようになります。最初慣れるまではこの値を有効にしておいて、シーン移動の様子を監視するようにした方が良いでしょう。
シーンを移動させる(2)
もっと見た目に分かりやすくなる様にシーンを作りこみましょう。
そのための準備として、キャストオブジェクトを追加します。
前述の「キャストオブジェクトを登場させる」を参考に、もう一つMyCastSprite2.asという名前でCastSpriteを継承したキャストオブジェクトを作成します。
先ほど作成したMyCastSprite.asをコピーし、名前を変更してください。
描画する円の色を、以下のように記述して青色にしましょう。
そしてボタンをもう一つ作成します。
こちらも先ほど作成したMyCastButton.asをコピーし、MyCastButton2.asという名前にします。
描画色は
として赤にし、シーンIDを
としてインデックスシーンに戻るような設定にします。
さて、シーン遷移時の状態変化を書いて行きましょう。
まず、インデックスシーンから移動する際、赤い丸とボタンには消えてもらいましょう。
IndexScene.asの59行目_onGotoメソッドに以下記述をします。
次に、シーンを移動した際、新しく作ったキャストオブジェクトを出現させます。
MySceneObject.asの17行に以下参照用の変数を定義
45行目の_onInitメソッドに以下出現処理を記述
シーンから移動する際に、追加したキャストオブジェクトを消します。
58行目のonGotoメソッドに以下退出処理を記述
ここまで出来たらムービープレビューをして下さい。
どうでしょう?
四角いボタンを押す毎にシーンを行ったり来たりする様になりましたでしょうか?
これでProgressionの3つの機能全てを使用したサンプルが出来上がりました。
次回は今回説明が出来なかったProgressionで用意されているコマンド、キャストの種類について説明いたします。