プロジェクトを作成すると、Flash CS3 上では index.fla が開かれた状態になります。

Index.fla のタイムラインの action フレームには、すでに ActionScript が設定済みの状態になっています。

action フレームを選択した状態でアクションパネルを開き、設定されているスクリプトを確認しましょう。

まずは Progression を使用するために一番重要となる Progression クラスからインスタンスを作成します。

必要なコードはすでに 21 行目にコーディング済みですので、設定されている引数のみ確認しておきましょう。

それぞれ第一引数にはインスタンスを識別するためのユニークな識別子、stage インスタンスへの参照が設定されています。

24 行目にはブラウザ同期機能を使用するための設定が用意されています。

機能を有効化したい場合には、設定値を true に変更しておきましょう。

その下にはルートシーンに対する初期設定が用意されています。シーンの扱い方については後述しますので、今はこのままにしておいてください。

最後に 63 行目で goto() 関数が呼び出されています。これはシーンを移動するための関数で、Progression の中でも特に重要な機能になります。

詳しい設定方法については後述しますので、今はこのままの状態にしておいてください。

Progression には、Web サイト制作をかんたんに行えるようにするシーン機能が実装されています。 これは HTML における各ページに相当する要素で、HTML サイトではリンクをクリックして順々にページを巡回するように、Progression サイトではシーンを巡回することでコンテンツを閲覧することになります。

まずは SceneObject インスタンスを作成してきましょう。インスタンスを作成するには、以下のように SceneObject クラスに対して new 演算子を使用します。

// シーンを作成する
var scene:SceneObject = new SceneObject();

これでシーンを作成することができました。
では、次に子シーンを作成してみましょう。先ほどのコードを、以下のように修正します。

// シーンを作成する
var scene:SceneObject = new SceneObject();

// 子シーンを作成する
var childScene:SceneObject = new SceneObject();

// childScene を scene の子シーンとして登録する
scene.addScene( childScene );
	

※場合によっては import jp.progression.scenes.SceneObject として、クラスパスを設定する作業が必要になります。

シーンにはそれぞれ名前を設定する必要があります。それぞれ作成したインスタンスの name プロパティで任意の名前を設定してください。

// シーンを作成する
var scene:SceneObject = new SceneObject();

// scene の名前を設定する
scene.name = "parent";

// 子シーンを作成する
var childScene:SceneObject = new SceneObject();

// childScene の名前を設定する
childScene.name = "child";

// childScene を scene の子シーンとして登録する
scene.addScene( childScene );
	

これでシーン構造が作成できるようになりました。
まだ構造を作ることのメリットが分からないと思いますが、今の時点ではこのようなものと覚えておいてください。

シーンの基本的な作り方が分かったところで、先ほどの index.fla に設定済みのスクリプトに追記していくことにしましょう。

Progression でシーンを使用するには、特別なルートシーンに対して子シーンを登録する必要があります。
これは通常の Flash 制作でステージ（ドキュメントクラス）という特別な領域にムービークリップを設置していくのと同じような感覚になります。
Progression のルートシーンは、Progression インスタンスを作成すると root プロパティとして自動的に作成されます。

// 子シーン about を作成します。
var about:SceneObject = new SceneObject();
about.name = "about";

// ルートシーンに子シーン about を登録する
prog.root.addScene( about );

// 子シーン contact を作成します。
var contact:SceneObject = new SceneObject();
contact.name = "contact";

// ルートシーンに子シーン contact を登録する
prog.root.addScene( contact );
	

以上でシーン構造ができました。

多少名前などに違いはありますが、これは ActionScript 3.0 で登場した DisplayObject で構成される表示リストと同じフォーマットです。
このようにシーン構造は DisplayObject のように扱うことができるようになっています。
もちろん DisplayObject のように子シーンに対して孫シーン、孫シーンに対してひ孫シーンというように、次々と設定することができるので、お好みのサイト構造を作成することができます。

では、いよいよそれぞれの画面で表示するシンボルを作成していきましょう。

まずはルートシーン用のシンボルを作成します。

新規シンボルを作成ダイアログを表示し、名前を IndexPage として、リンケージ設定の「ActionScript に書き出し」の項目にチェックを入れてください。

シンボルが作成できたら、タイムラインアニメーションを設定するためのコンポーネントを設置しましょう。

画面上部ツールバーの「ウィンドウ」の「コンポーネント」パネルを開いてください。
次に Progression Animation グループの InOutMovie を対象シンボルに対してドラッグ＆ドロップで設置してください。

InOutMovie は表示/削除時のアニメーションを設定するためのコンポーネントです。
それぞれのアニメーションは特定のフレームラベル間を再生するように設定されています。

コンポーネントを設置したレイヤーとは別に新規レイヤーを作成し、ある程度のフレームを確保した上で in ラベル、stop ラベル、out ラベルという 3 つのフレームラベルを設定してください。

では、最初に表示アニメーションを作成しましょう。

表示時には in ラベルから stop ラベルまでの範囲を再生しますので、その範囲内で任意のアニメーションを作成してください。

次に削除アニメーションを作成しましょう。

削除時には stop ラベルから out ラベルまでの範囲を再生しますので、その範囲内で任意のアニメーションを作成してください。

以上でルートシーン用のシンボルは完成です。
同じ要領で about シーン用の AboutPage シンボル、contact シーン用の ContactPage シンボルも作成してください。

※コンポーネントのより詳しい解説は「リファレンス / コンポーネントリファレンス」をご覧ください。

次に移動のためのボタンを作成しましょう。

ボタンを作成するには、まず画面上部ツールバーの「挿入」にある「新規シンボル」を選択し、新規ムービークリップシンボルを作成してください。

作成したムービークリップシンボルを開き、ボタンのグラフィックを作成します。

作成ができたら、このグラフィックをボタンとして動作するようにしましょう。コンポーネントパネルを開き、Progression Buttons グループから RollOverButton コンポーネントを対象のムービークリップシンボルにドラッグ＆ドロップで設置します。

設置したコンポーネントを選択した状態で画面下部のパラメータパネルを開き、navigatePath の項目に各シーンを現すパスをスラッシュ・シンタックスで記述します。

今回は 3 つのシーンで構成されているので、それぞれのボタンには右のような値を設定してください。

最後にボタンを作成したボタンをステージに配置して終了です。fla ファイルをプレビューし、実際にボタンとして機能するか確認してください。

※コンポーネントのより詳しい解説は「リファレンス / コンポーネントリファレンス」をご覧ください。

シーン構造と表示シンボル、ボタンが完成しました。
あとはそれぞれの要素がキチンと動作するように、シーン移動の仕組みを実装してみましょう。

シーンを移動させるには Progression インスタンスの goto() メソッドに対して SceneId インスタンスで移動先を指定することになります。

移動先の指定には、シーン構造をベースにしたスラッシュ・シンタックスによるシーンパスを使用します。例えば、今回の作成した各シーンに移動するためには、以下のように設定することになります。

// ルートシーンに移動する
prog.goto( new SceneId( "/index" ) );

// AboutScene に移動する
prog.goto( new SceneId( "/index/about" ) );

// ContactScene に移動する
prog.goto( new SceneId( "/index/contact" ) );
	

また、初期化時に説明を省略した firstSceneId プロパティですが、これはブラウザの URL から取得したシーンパスを移動先に指定するもので、ブラウザ同期時には必ずこの移動先を指定することになります。

シーンを移動すると、各シーンでは移動状況に合わせたイベントが順々に発生していきます。以下が SceneObject クラスで送出される代表的なイベントです。

シーン移動時に SceneObject インスタンスで発生する代表的なイベントは以下の通りです。

SceneEvent.INIT イベント

移動先として指定したシーンに到着した瞬間に発生します。主にそのシーンでのみ表示したい画面処理などで使用します。このイベントは onInit イベントハンドラメソッド、及び _onInit() オーバーライド・イベントハンドラメソッドでの設定も可能です。

SceneEvent.GOTO イベント

移動処理が開始され、現在のシーンから移動する瞬間に発生します。主に SceneEvent.INIT で表示した画面の消去処理などで使用します。このイベントは onGoto イベントハンドラメソッド、及び _onGoto() オーバーライド・イベントハンドラメソッドでの設定も可能です。

SceneEvent.LOAD イベント

目的地のシーンが自身もしくは子シーンを示している場合、移動処理時に階層が変更された瞬間に発生します。主に階層を下っても継続的に表示される画面処理（半透明の画面を重ねていく、等）などで使用します。このイベントは onLoad イベントハンドラメソッド、及び _onLoad() オーバーライド・イベントハンドラメソッドでの設定も可能です。

SceneEvent.UNLOAD イベント

目的地のシーンが親シーンを示している場合、移動処理時に階層が変更された瞬間に発生します。主に SceneEvent.LOAD イベントで表示した画面の消去処理などで使用します。このイベントは onUnload イベントハンドラメソッド、及び _onUnload() オーバーライド・イベントハンドラメソッドでの設定も可能です。

実際に移動処理を作成するには、各シーンの上記イベントに対して必要な処理を設定していくことになります。
そうすることで、Progression が現在地から目的地までの移動に必要なルート自動的に検索して処理してくれるようになります。

イベントを受信する方法にもいくつかのパターンが用意されていますが、今回はタイムラインで構築する際にもっともシンプルな方法であるイベントハンドラメソッドを使用することにしましょう。

まずは、各シーンに対して以下のようなコードを記述してください。

// Progression インスタンスを作成します。
var prog:Progression = new Progression( "index", stage );

// ブラウザ再生時に URL 同期を有効化します。
prog.sync = true;

// 表示するページグラフィックを作成します。
var indexPage:IndexPage = new IndexPage();
var aboutPage:AboutPage = new AboutPage();
var contactPage:ContactPage = new ContactPage();

// シーンオブジェクトが目的地だった場合に、到達した瞬間に送出されます。
// このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
prog.root.onInit = function():void {
// 画面に表示する
progression.container.addChild( indexPage );
};

// シーンオブジェクトが出発地だった場合に、移動を開始した瞬間に送出されます。
// このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
prog.root.onGoto = function():void {
// 画面から削除する
progression.container.removeChild( indexPage );
};

// 子シーン about を作成します。
var about:SceneObject = new SceneObject();
about.name = "about";
about.onInit = function():void {
// 画面に表示する
progression.container.addChild( aboutPage );
};
about.onGoto = function():void {
// 画面から削除する
progression.container.removeChild( aboutPage );
};
prog.root.addScene( about );



// 子シーン contact を作成します。
var contact:SceneObject = new SceneObject();
contact.name = "contact";
contact.onInit = function():void {
// 画面に表示する
progression.container.addChild( contactPage );
};
contact.onGoto = function():void {
// 画面から削除する
progression.container.removeChild( contactPage );
};
prog.root.addScene( contact );

	

※あらかじめ設定済みの prog.root.onLoad イベントハンドラメソッド、prog.root.onUnload イベントハンドラメソッドは今回は使用しないので削除していただいて結構です。

今回の設定では、それぞれ onInit() と onGoto() に設定したので、それぞれの要素はそれぞれのシーンでのみ表示されるようになります。

また、画面に表示する際に、SceneObject インスタンスの progression プロパティを経由して、Progression インスタンスの container プロパティを呼び出していますが、これは SceneObject から表示リストにアクセスしやすくするために用意された機能です。

前項までの内容でも、静止画を処理するだけであれば十分な機能を持っていますが、せっかく Flash を使うのですからアニメーションや外部ファイルの読み込みなども作りたいですよね。 本項では、そのような時間のかかる処理（以下、非同期処理）の設定方法をご紹介します。

Progression で非同期処理を扱う場合には、すべてコマンド機能を使用することになります。 コマンドとは、よく使う機能をひとつのクラスとしてまとめ、インターフェイスを統一させることによって、より扱いやすくしたものです。

今回はまず手始めにアニメーションを実行させてみることにしましょう。
アニメーションの設定に使用するコマンドは DoTweener コマンドです。
名前からも分かるとおり、このコマンドは ActionScript 3.0 では一般的なトゥイーンライブラリである Tweener の機能をコマンドとして扱いやすくしたものになります。

まずは通常の Tweener の設定方法ですが、1 秒間で target の x 座標を 100 に移動させるアニメーションの場合には以下のようになります。

Tweener.addTween( target, {
x:100,
time:1
} );
	

次に同じ処理をコマンドで記述してみます。

var com:DoTweener = new DoTweener( target, {
x:100,
time:1
} );
com.execute();
	

このようにコマンドを使用する場合には、使用したいコマンドクラスからインスタンスを作成して execute() メソッドから実行することになります。

さて、基本的なコマンドの使い方を軽くご紹介しましたので、さっそくコマンドとシーン移動と連携させてページを表示させてみましょう。ルートシーンの onInit() メソッドを以下のように修正してください。

prog.root.onInit = function():void {
// 実行したいコマンドを登録する
addCommand(
// 画面に表示する
new AddChild( progression.container, indexPage )
);
}
	

このようにシーンイベントのフロー上でコマンド処理を行いたい場合には、addCommand() メソッドを使用して必要なコマンドを登録することになります。addCommand() メソッドで登録されたコマンドは、フロー上で自動的に実行されることになりますので execute() メソッドを設定する必要はありません。

同じ要領で onGoto() メソッドにも設定を行いましょう。

prog.root.onGoto = function():void {
// 実行したいコマンドを登録する
addCommand(
// 画面から削除する
new RemoveChild( progression.container, indexPage )
);
}
	

以上でコマンドの作成は完了です。

以上で全ての作業は完了しました。最後に作成したコンテンツを公開する方法をご説明します。

まずはプロジェクト内の deploy フォルダを開いてください。このフォルダ内にはコンテンツを公開する際に必要となるファイルが全て含まれています。特に特殊な設定をする必要がなければ、deploy フォルダの中身一式をそのまま Web サーバーにアップロードすれば作業は完了です。