Progressionフレームワークの思い出

FLASHer Advent Calendar 2016 その2の8日目の記事です。

Progressionのマスタークラスを何人か知っているだけに自分が書くのは本当は畏れ多いのですが、カレンダーに同トピックが見当たらなかったので僭越ながら思い出などぽちぽちと書かせて頂く所存です。

1 Progressionとは
2 Progressionのここが素敵
- 2.1 「シーン」機能が素敵
- 2.2 「コマンド」機能が素敵
3 Progressionガイドブック発売記念イベント
4 最後にさらします

Progressionとは

一言でいうと「Flashサイト、Flashコンテンツの制作がしやすくなる環境を構築するためのフレームワーク」です。

というか他にFlashのフレームワークがあったのかどうか定かではないのですが、僕にとってはとても使い易く便利なフレームワークで、キャンペーンサイトのような中規模なものから、ミニゲーム的な小さいコンテンツまで幅広く使用させて頂きました。

Progressionは、ディープリンクやプリローダー、ページ（画面）単位での階層管理であったり、コンテキストメニュー制御など、Flash制作時にやればできるけど地味に面倒で煩雑な処理になりがちな部分をいい感じに補助してくれる素敵な機能があります。

Progressionのここが素敵

Progressionには使い方に応じて3つの開発スタイルがありますが、AS3でバリバリ書く人向けの「クラススタイル」を使用した前提で書いていきます。

「シーン」機能が素敵

Progressionの中核とも言える「シーン」機能は、コンテンツをいくつかの場面（シーン）の集まりとして定義し、シーンとシーンを好きなように遷移できるツリー構造として管理するという概念になります。

これにより、シーン間の移動とシーンに表示するオブジェクトを切り離して考えることができ、シーン単位・表示オブジェクト単位のClass設計が非常に分かり易く構築できます。

また、シーンの移動状態を管理するシーンイベントがあり、シーン移動のタイミングに応じてイベントリスナーを登録することができます。より簡易的な使い方として以下のようにシーンClass中にオーバーライドしたイベントハンドラメソッドとして実装する方法もあります。

override protected function atSceneInit():void {
  // シーンに到着した直後の処理を書く
}

override protected function atSceneGoto():void {
  // シーンから出発する直前の処理を書く
}

override protected function atSceneLoad():void {
  // 親シーンから現在のシーンに移動した直後の処理
}

override protected function atSceneUnload():void {
  // 現在のシーンから親シーンに移動する直前の処理
}

override protected function atSceneInit():void {

// シーンに到着した直後の処理を書く

}

override protected function atSceneGoto():void {

// シーンから出発する直前の処理を書く

}

override protected function atSceneLoad():void {

// 親シーンから現在のシーンに移動した直後の処理

}

override protected function atSceneUnload():void {

// 現在のシーンから親シーンに移動する直前の処理

}

（ちなみに現代のSPAフレームワークの一つAngular2を最近触っていたのですが、各種Lifecycle Hooks（ngOnInit、ngOnDestoryなど）を見ているとこのシーンイベントを思い出します）

後述する「コマンド」機能と合わせて、今のシーンでコンテンツをフェイドアウトして次のシーンに移動したら、フェイドインで表示する、みたいなことがお手軽にできます。

そして他のシーンに移動するときの記述は

manager.goto( new SceneId( "index/about" ) );

1	manager.goto( new SceneId( "index/about" ) );

とか書けるので超直感的、且つ現在のシーンに応じたディープリンクも自動で発行されてURLを書き換えてくれるとか超親切設計。

「コマンド」機能が素敵

SerialやParallelなどのいわゆる非同期処理をチェーンメソッドでとりまとめる機能ですが、その痒いところに手が届く充実ぶりが素敵。

直列処理コマンド：

var list: SerialList = new SerialList(); // 直列処理用のリストを作成
list.addCommand(
  new Wait(7),
  new Trace("ロードローラーだッ！"),
  new Wait(1),
  new Trace("ＷＲＹＹＹＹ！ブッ潰れよォォッ！")
);
list.execute(); // 処理を実行する

var list: SerialList = new SerialList(); // 直列処理用のリストを作成

list.addCommand(

new Wait(7),

new Trace("ロードローラーだッ！"),

new Wait(1),

new Trace("ＷＲＹＹＹＹ！ブッ潰れよォォッ！")

);

list.execute(); // 処理を実行する

実行結果：
（・・・7秒経過）
ロードローラーだッ！
（・・・1秒経過）
ＷＲＹＹＹＹ！ブッ潰れよォォッ！

並列処理コマンド：

var list: ParallelList = new ParallelList(); // 並列処理用のリストを作成
list.addCommand(
  new Trace("くらえッ！DIOッ！"),
  new Wait(5),
  new Trace("半径２０ｍ"),
  new Wait(5),
  new Trace("エメラルド・スプラッシュをーッ！")
);
list.execute(); // 処理を実行する

var list: ParallelList = new ParallelList(); // 並列処理用のリストを作成

list.addCommand(

new Trace("くらえッ！DIOッ！"),

new Wait(5),

new Trace("半径２０ｍ"),

new Wait(5),

new Trace("エメラルド・スプラッシュをーッ！")

);

list.execute(); // 処理を実行する

実行結果：
くらえッ！DIOッ！
半径２０ｍ
エメラルド・スプラッシュをーッ！

コマンドの省略形：（直列処理中に[]でまとめて並列に実行、waitとtraceを省略表記）

var list: SerialList = new SerialList();  // 直列処理用のリストを作成
list.addCommand(
  11,
  [
    "な…なんだ？体の動きが、に…鈍いぞ！？",
    2,
    "動ける時間はそこまでのようだな",
  ]
);
list.execute();  // 処理を実行する

var list: SerialList = new SerialList(); // 直列処理用のリストを作成

list.addCommand(

11,

[

"な…なんだ？体の動きが、に…鈍いぞ！？",

"動ける時間はそこまでのようだな",

]

);

list.execute(); // 処理を実行する

実行結果：
（・・・11秒経過）
な…なんだ？体の動きが、に…鈍いぞ！？
動ける時間はそこまでのようだな

繰り返し処理コマンド：

var list: LoopList = new LoopList(50);  // ループ回数を指定したリストを作成（0指定で無限）
list.addCommand(
  "無駄"
);
list.execute();  // 処理を実行する

var list: LoopList = new LoopList(50); // ループ回数を指定したリストを作成（0指定で無限）

list.addCommand(

"無駄"

);

list.execute(); // 処理を実行する

実行結果：
無駄無駄無駄無駄無駄無駄（以下略

往復処理コマンド：

var list: ShuttleList = new ShuttleList(10);  // 往復回数を指定したリストを作成
list.addCommand(
   "初めから何も動いていないッ！！",
   "終わったアアアーーーーッ",
   "なっ！！なんだッ！？まさかッ！",
   "時間が『逆行』しているのかッ！！まっ…まずいッ！！！"
);
list.execute();  // 処理を実行する

var list: ShuttleList = new ShuttleList(10); // 往復回数を指定したリストを作成

list.addCommand(

"初めから何も動いていないッ！！",

"終わったアアアーーーーッ",

"なっ！！なんだッ！？まさかッ！",

"時間が『逆行』しているのかッ！！まっ…まずいッ！！！"

);

list.execute(); // 処理を実行する

実行結果：
初めから何も動いていないッ！！
終わったアアアーーーーッ
なっ！！なんだッ！？まさかッ！
時間が『逆行』しているのかッ！！まっ…まずいッ！！！
なっ！！なんだッ！？まさかッ！
終わったアアアーーーーッ
初めから何も動いていないッ！！
終わったアアアーーーーッ（以下略

何かセリフばっかり並んでますが・・・実際は内包されたTweenerライブラリを使ったり、カスタムコマンドで特定の処理が終わった後にチェーンでつないだりすることで、自由にアニメーションを組み合わせることができます。

var list: SerialList = new SerialList();  // 直列処理用のリストを作成
list.addCommand(
   init,  // 初期化関数呼び出し
   new AddChild(stage, logo),  // ステージにロゴを配置
   new AddChild(stage, menu),  // ステージにメニューを配置
   new AddChild(stage, content),  // ステージにコンテンツを配置
   [
     new DoTweener(logo, { time: 0.5, transition: "linear", alpha: 1 } ),  // ロゴフェイドイン
     new DoTweener(menu, { time: 0.5, transition: "linear", alpha: 1 } )  // メニューフェイドイン
   ],
   0.5,  // 0.5秒待機
   new DoTweener(content, { time: 1, transition: "linear", alpha: 1 } )  // コンテンツフェイドイン
);
list.execute();  // 処理を実行する

// 初期化関数
private function init():void {
  logo.alpha = menu.alpha = content.alpha = 0;
}

var list: SerialList = new SerialList(); // 直列処理用のリストを作成

list.addCommand(

init, // 初期化関数呼び出し

new AddChild(stage, logo), // ステージにロゴを配置

new AddChild(stage, menu), // ステージにメニューを配置

new AddChild(stage, content), // ステージにコンテンツを配置

[

new DoTweener(logo, { time: 0.5, transition: "linear", alpha: 1 } ), // ロゴフェイドイン

new DoTweener(menu, { time: 0.5, transition: "linear", alpha: 1 } ) // メニューフェイドイン

0.5, // 0.5秒待機

new DoTweener(content, { time: 1, transition: "linear", alpha: 1 } ) // コンテンツフェイドイン

);

list.execute(); // 処理を実行する

// 初期化関数

private function init():void {

logo.alpha = menu.alpha = content.alpha = 0;

}

みたいな。

むしろこのコマンド機能が便利過ぎて、シーン管理の必要ない小規模コンテンツでもコマンド機能のためにProgressionで作ったりしてました。

Progressionガイドブック発売記念イベント

「ProgressionによるFlashコンテンツ開発ガイドブック」発売記念で、開発者で著者の阿部さんと共同著者の@clockmakerこと池田さんを交えての登壇イベントがあるとのことで喜び勇んで行きましたよ、ええ。

そしてッ！これがッ！そのときお二方にサインして頂いた本です。

ちなみにそのイベント終了後、同じく出席されていたとあるハイパーFLASHクリエイターの方々と御飯食べながら、「Flashの初心者向けのコミュニティがあったらいいですよねー」みたいな話をして後日本当に作られたのが「いまさら他人に聞けないFlashの基礎的な何かを勉強する会：ひよこの会」でした。

当時駆け出しのFLASHerで人見知りだった自分は、Webクリエイター同士の横のつながりもほとんど無かったのですが、自分の好きなFlashに関するコミュニティということで、ひよこの会を通じていくつかのイベントなどに参加しつつとても勉強させて頂きました。

FLASHは物凄い早さでああなったわけですが、このときに知り合った方々とは別件でお仕事をさせて頂いたり、そこから別のコミュニティにお誘い頂いたりして、今の自分を構成する大きな要素の一つになっています。

また、人と接する機会が増えたことで今の嫁と知り合い、いつの間にか親となり、独りでクリスマスに吉牛で牛丼食べてた自分が子供と一緒にクリスマスツリーを設置して家族写真なんかを撮ったりしてるのもすべてProgressionがきっかけだったと言わざるを得ません。

またこの記事を読んだFLASHerの何人かには、

当時を懐かしんでFlash本を家で探す
↓
埋もれていたアーマードコアを見つける
↓
久しぶりにアーマードコアをプレイする
↓
身体が闘争を求める
↓
フロムが新作を作る

という経済効果も見込まれます。

Progressionバンザイ！

最後にさらします

当時Progression4でPlayStation®の15周年記念コンテンツを作りました。

最初はProgression3で作っていたのですが、PlayStation®3ブラウザ（当時はPS3®でFlashが見れたのですよ・・）でハングアップするという現象が起き、Progression開発者の阿部さんにTwitterでご相談に乗って頂きつつ（こんなニッチなケースに真摯にアドバイス頂きました阿部さんありがとうございます！）、結果的にProgression4で作り直したという経緯があります。

懐かしのPapervision3Dライブラリと併用しています。思い出がてら25日頃までさらしときます。

（一部リンク切れあり）