FrontPage > WebDevelopment > Flash+HTML > ProgressionTutorial (Now)



はじめに

Flash Site 作るなら、これ!
そんな素敵ライブラリのチュートリアルWiki。

準備

Progression - Framwork for Flash
本家サイト。インストールしてきましょう。
本家サイトチュートリアル
日本語ドキュメントがしっかりしすぎてて、チュートリアル作る必要なさそう(笑

始めの一歩

本家のサイトにあるドキュメントを順々に見ていけば誰でもできます。

セットアップガイド - SWCファイル
SWCを導入する方法
クラススタイルガイド
Flex Builder で作成する場合はこの方法がメインになります。うー、楽しそうだぜ。
※ こちらは、Flash CS3のチュートリアル。
APIリファレンス
英語。Progression 全クラスリファレンス
PRMLリファレンス
Progression の中で使われている XML 宣言系のリファレンス

もう終わり?

はい、これだけできれば、もうあなたに敵はいません。
センスの尽きぬ限り、突き進んでください。

...

と、思ったらですね、あのチュートリアル、Flex用じゃない!!!!
手っ取り早くGoogle先生でリンクを探してみます。

Flex Builder 3 + Progressin チュートリアル

実は、FlashCS* 環境に最適化されているため、Flex+Progression 関連の記事及び、サンプルソースはほぼ皆無。
みなさん、Flash Project のサンプルを自己流にコーディングしているみたい。
これは、予想以上に時間がかかりそうだな。

"Flash Project" を、"Flex Builder 3 + Action Script Project" にしてみよう

とりあえず、悪戦苦闘してみる

始めの一歩すら踏み出せない

いきなり、わかりません。
こういうときは、サンプルをしらみつぶしにみていくしかない...。
どうでもいいけど、「しらみつぶし」って、なんか嫌な言葉なんだな。

公式サイトにある example_project を解析してみる

どうみても Flash Project なのですが、asファイルはみれます。
意味不明なファイル以外をピックアップしてみます。

deploy

Flash 関連以外のファイル、index.html とか、Javascript ファイルがあります。
実行しようとすると、SandBox エラーになっちゃうので、試せません。

src

classes
その名の通りクラスファイルのルートフォルダです。
下位層に"myproject.*"の as フォルダが3つありました。
myproject.index.as
※ 下記"templates"参照
myproject.indexScene.as
※ 下記"templates"参照
myproject.Preloader.as
※ 下記"templates"参照
import
画像ファイルのみで構成される。単純な画像フォルダでした。
libs
Progression で使用される外部ライブラリと、Progression 本体。
まぁ、SWC ファイルに全部入っているみたいです。

templates

各ソースファイルのテンプレートが入っているみたい。
もしかして、これを実装すればいいだけなのか?
大事そうなのをピックアップ。

MyIndex?.as
CastDocument? Class を継承している。なにか重要なクラスのような気がする
CastDocument? Class
CastDocument? クラスは、ExDocument? クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的な表示オブジェクトクラスです。
MyPreloader?.as
CastPreloader? Class を継承している。
CastPreloader? Class
CastPreloader? クラスは、ExPreloader? クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的な表示オブジェクトクラスです。
MySceneObject?.as
SceneObject? Class を継承している。
SceneObject? Class
SceneObject? クラスは、シーンコンテナとして機能する全てのオブジェクトの基本クラスです。

ここまででわかったこと

基本的なテンプレートを使えば、とりあえずはサイトが構築できるっぽい。
しかし、もっと具体的な方法は?
次は、Progression 公式サイトのドキュメンテーションを Flex Builder + Action Script Project に適応し直してみたいと思います。

Progression 公式レファレンスを自分なりに解釈してみよう

なんか、よく見ると、Flash関係ないな。

Progression の基本

開始Class は、index.as

Index クラスはデフォルト状態で CastDocument クラスを継承しています。
CastDocument クラスは、ドキュメントクラスとして必要となる様々な機能が追加された
MovieClip クラスのサブクラスです。
このクラスを使用する際には、読み込み状態などを事前に確認が必要となる処理を無視して
コーディングが開始可能な DocumentEvent.INIT イベントが設定されています。
デフォルトでは前述のイベントを
_onInit() というオーバーライド・イベントハンドラメソッドで受け取るように設定されています。

Progression Class のオブジェクトをインスタンス化する

まずは 54 行目にある Progression を使用する際に
もっとも重要な Progression インスタンスの作成コードを確認します。
第一引数にはインスタンスを識別するためのユニークな識別子を、
第二引数には関連付けたい stage インスタンスの参照を、
第三引数にはルートシーン(詳しくは後述します。)
として使用したいクラスの参照をそれぞれ設定することになります。

Progression.sync は、ブラウザと同期を取るプロパティ

57 行目にはブラウザ同期を有効化するための sync プロパティの設定がされています。
今回はブラウザ同期を使用したサンプルを作成しますので、設定値を true に変更してください。

シーン移動には goto() メソッドを使用する

最後に 60 行目の goto() メソッドでシーンの移動を行っています。
シーン移動について詳しくは後述しますが、
特に変更の理由がなければこのままの状態にしておいてください。

Progression のコンテンツの骨格を作る - シーン作成

"シーン機能"とは、"HTMLにおけるページ"と同じ

Progression には、Web サイトをカンタンに作成するための「シーン機能」が用意されています。これは HTML におけるページに相当する要素で、HTML サイトでページを順々と巡っていくのと同じように、Progression ではシーンを巡回しながらコンテンツを閲覧させることになります。

シーンを作るには、SceneObject? Class を使う

クラススタイルでシーンを扱うには、SceneObject? クラスを使用します。SceneObject? クラスをそのまま new して使用することもできますが、今回は SceneObject? クラスのサブクラスを作成して、その中に各種設定を行うことにしましょう。サブクラスを作成するにはプロジェクト内の templates フォルダにある MySceneObject?. as というテンプレートファイルを使用するのが便利です。 クラスが作成できたら任意のエディターでファイルを開き、それぞれクラス名とコンストラクタ名をファイル名に対応したものに、パッケージ名を「myproject」に修正してください。

ルートシーンは、Progression インスタンスの第3引数に指定したシーン

まずはルートシーンから編集します。前項で Progression インスタンスを作成する際に第三引数に IndexScene? と設定していましたが、このクラスがルートシーンの元となるクラスになります。

シーン構成を作る場合、ルートシーンのコンストラクタでシーンクラスをnewし、.nameを指定し、addScene(シーンクラス)を呼ぶ

IndexScene?.as を開くとコンストラクタといくつかのオーバーライド・イベントハンドラメソッドがデフォルトで設定されています。まずはシーン構造を作成していくので、コンストラクタに以下のようなコードを追記してください。

1
2
3
4
5
6
7
8
9
10
11
public function IndexScene() {
// FeatureScene を作成します。
var feature:FeatureScene = new FeatureScene();
feature.name = "feature";
addScene( feature );

// ContactScene を作成します。
var contact:ContactScene = new ContactScene();
contact.name = "contact";
addScene( contact );
}

SceneObject? は、DisplayObject? とほぼ同じ使い方ができる

見て分かるとおり、SceneObject? クラスはメソッド名などに多少の違いがありますが、ActionScript? 3.0 で登場した DisplayObject? クラスで構成される表示リストと同じ方法で扱うことが出来るようになっています。そのため今回は二階層のシーン構造ですが、子シーンに子シーンを追加することで孫シーンを作成することも可能です。

シーンはただの"器"、器の中身を埋めるのはコンテンツ、そしてそのコンテンツを関連づけるのがイベント

Progression のコンテンツの骨格を作る - イベントの設定

SceneObject? のよく使われるイベント一覧

SceneEvent?.INIT イベント
移動先として指定したシーンに到着した瞬間に発生します。主にそのシーンでのみ表示したい画面処理などで使用します。このイベントは onInit イベントハンドラメソッド、及び _onInit() オーバーライド・イベントハンドラメソッドでの設定も可能です。
SceneEvent?.GOTO イベント
移動処理が開始され、現在のシーンから移動する瞬間に発生します。主に SceneEvent?.INIT で表示した画面の消去処理などで使用します。このイベントは onGoto イベントハンドラメソッド、及び _onGoto() オーバーライド・イベントハンドラメソッドでの設定も可能です。
SceneEvent?.LOAD イベント
目的地のシーンが自身もしくは子シーンを示している場合、移動処理時に階層が変更された瞬間に発生します。主に階層を下っても継続的に表示される画面処理(半透明の画面を重ねていく、等)などで使用します。このイベントは onLoad イベントハンドラメソッド、及び _onLoad() オーバーライド・イベントハンドラメソッドでの設定も可能です。
SceneEvent?.UNLOAD イベント
目的地のシーンが親シーンを示している場合、移動処理時に階層が変更された瞬間に発生します。主に SceneEvent?.LOAD イベントで表示した画面の消去処理などで使用します。このイベントは onUnload イベントハンドラメソッド、及び _onUnload() オーバーライド・イベントハンドラメソッドでの設定も可能です。

イベントは、各シーンクラスのコンストラクタに、オーバライドする形で宣言する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// IndexPage を作成します。
// ※あらかじめライブラリにシンボルとして登録済みです。
page = new IndexPage();
}

protected override function _onInit():void {
// 画面に表示します。
progression.container.addChild( page );
}

protected override function _onGoto():void {
// 画面から削除します。
progression.container.removeChild( page );
}

Progression.container は、DisplayObject? のモノとは違う

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

Progression のコンテンツの骨格を作る -ボタンの作成

Progression における "ボタン" は、"HTMLでの<a>要素"と似ている

あとはユーザー操作に従って各シーン間を移動できるようになれば、Web サイトとして必要な機能を一通り揃えることができます。Progression では、HTML での <a> 要素に相当する機能であるボタン機能が用意されています。

ボタンの作成は、"template/MyCastButton?.as"で作成し、クラスとして宣言する

クラスが作成できたら任意のエディターでファイルを開き、それぞれクラス名とコンストラクタ名をファイル名に対応したものに、パッケージ名を「myproject」に修正してください。

ボタンクラスのコンストラクタで移動先を宣言する

コンストラクタで指定している CastButton? クラスの sceneId プロパティが、ボタンがクリックされた際の移動先シーンとなります。この設定は特に必要がない限りはコンストラクタで行うようにしてください。

1
2
3
4
5
6
public function IndexButton( initObject:Object = null ) {
super( initObject );

// クリック時の移動先を設定する
sceneId = new SceneId( "/index" );
}

ボタンの表示は、Index.as の、_onload()中で行う

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// LogoButton を作成します。
var logoButton:LogoButton = new LogoButton();
logoButton.x = 0;
addChild( logoButton );

// IndexButton を作成します。
var indexButton:IndexButton = new IndexButton();
indexButton.x = 514;
addChild( indexButton );

// FeatureButton を作成します。
var featureButton:FeatureButton = new FeatureButton();
featureButton.x = 568;
addChild( featureButton );

// ContactButton を作成します。
var contactButton:ContactButton = new ContactButton();
contactButton.x = 657;
addChild( contactButton );

ここまでで一段落、パブリッシュして Web Site を表示してみよう

Progression のコンテンツを作る - 非同期処理 - "コマンド"のススメ

"コマンド"とは、デザインパターンの一種だ

Progression では、シーンの流れに沿って非同期処理を行うのに最適な機能としてコマンドが用意されています。コマンドとは、よく使う機能をひとつのクラスとしてまとめて、インターフェイスを統一させることによって、より扱いやすくするためのデザインパターン※1の一種です。実際に使用する際には、難しいデザインパターンを意識せずに、ある程度決まったフォーマットに沿って使用するものと理解して頂けば、十分に活用できる機能となっています。

アニメーション処理コマンド - DoTweener?

今回は非同期処理としては視覚的にもっとも分かりやすいアニメーション処理を作成することにしましょう。アニメーション処理に使用できるコマンドはいくつか存在しますが、その中でもっとも代表的なコマンドが DoTweener? クラスです。これは名前からも分かるとおり、ActionScript? 3.0 の世界では一般的となっているトゥイーンライブラリである Tweener を使用するためのコマンドです。

Tweener と、DoTweener? の違い - つまりは、"コマンド"という概念

通常のフォーマットとの最大の違いは 1 つの処理につき、インスタンスを 1 つ作成する。 どのようなコマンドの場合にも、実行時には必ず execute() メソッドを使用する。 この 2 点になります。

1
2
3
4
5
6
//Tweener 本家
Tweener.addTween( target, { x:100, time:1 } );

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

シーンクラス毎の、"イベント"に"コマンド"を関連づける

このようにイベント中に処理させるためには、SceneObject? インスタンスの addCommand() メソッドにコマンドを登録していくことになります。

IndexScene? Class の _onInit() に DoTweener? "コマンド"をつけるサンプル

1
2
3
4
5
6
7
8
9
10
11
12
13
protected override function _onInit():void {
// ページを画面に表示します。
progression.container.addChild( page );

// ページを透明にします。
page.alpha = 0;

// 実行したいコマンドを登録します。
addCommand(
// ページを不透明にします。
new DoTweener( page, { alpha:1, time:1 } )
);
}

addCommand() 使用時は、execute() 実行は必要ない

コードを見て分かるように addCommand() 経由で登録されたコマンドは、イベントの流れに応じて自動的に実行されるので、execute() メソッドを実行する必要はありません。

画面の消去処理をするサンプル

次に画面の消去処理を行います。画面を消去するためには「現在のシーンから出発」した際に処理を行えばよいので、SceneEvent?.GOTO イベントを使用することになります。同じように IndexScene? クラスに以下のように追記してください。

1
2
3
4
5
6
7
8
9
10
protected override function _onGoto():void {
// 実行したいコマンドを登録します。
addCommand(
// ページを透明にします。
new DoTweener( page, { alpha:0, time:1 } )
);

// ページを画面から削除します。
progression.container.removeChild( page );
}

addCommand() メソッドで登録したコマンドは、イベント発生が完了した後にまとめて処理される

消去アニメーションはどうでしょうか?意図した動作としては DoTweener? コマンドのアニメーションが再生されて 画面から removeChild() される というものかと思いますが、実際にはアニメーション処理される前に画面から消去されてしまいます。これは addCommand() メソッドで登録したコマンドはイベント発生が完了した後にまとめて処理されるために、イベント内で通常の手続き通りに実行されている removeChild() メソッドの方が先に処理されてしまっていることが原因です。この問題を解決するためには removeChild() メソッド自体を、コマンド処理として設定してあげる必要があります。

removeChild() を後に実行するためには、コマンド処理として設定する必要がある

コマンドは、","で区切ることで、連続実行可能

このようにコマンドを , で区切って続けて登録することで、前のコマンド処理の終了を待った連続実行が可能になります。

削除時コマンドには、new RemoveChild?(progression.container, page)、登場時コマンドには、new AddChild(※同じ)を付け足す事

フォーマットを統一しておくため

Progression のコンテンツを作る - キャストオブジェクトを作る

設定したいアニメーションが表示オブジェクトに関連する者であれば、表示オブジェクト自体に設定する

アニメーションが作成できるようになったことで、表現の幅がとても広がりました。しかし、幅が広がったからといって大量のアニメーションを設定しようとすると、シーンイベントがコマンドだらけになってしまいます。設定したいアニメーションが表示オブジェクトに紐付いたモノであれば、その表示オブジェクト自体に設定してしまう方が設計としてもよりシンプルです。

キャストオブジェクト機能は、表示オブジェクトを継承したクラスを使う

通常、表示オブジェクトを使用する際には Sprite クラスや MovieClip? クラスなどを使用することになります。キャストオブジェクト機能を使用するには、それらを継承した専用のクラスを使用することになります。 jp.progression.casts.CastBitmap? jp.progression.casts.CastButton? jp.progression.casts.CastDocument? jp.progression.casts.CastImageLoader? jp.progression.casts.CastLoader? jp.progression.casts.CastMovieClip? jp.progression.casts.CastObject? jp.progression.casts.CastPreloader? jp.progression.casts.CastSprite? jp.progression.casts.CastTextField?

キャストオブジェクトは、template/MyCastObject?.as を使用する

先ほど作成した page インスタンスをキャストオブジェクトに変更して、DoTweener? コマンドをキャストオブジェクト側で実行するように修正してみましょう。 今回も同様にテンプレートから作成していきます。templates フォルダ内にある MyCastSprite?.as をコピーして、各シーンに対応するように IndexPage?.as、FeaturePage?.as、ContactPage?.as の 3 つのファイルを作成してください。 クラスが作成できたら任意のエディターでファイルを開き、それぞれクラス名とコンストラクタ名をファイル名に対応したものに、パッケージ名を「myproject」に修正してください。

キャストオブジェクトインスタンスで発生するイベント一覧

CastEvent?.CAST_ADDED イベント
キャストオブジェクトが AddChild コマンド、AddChildAt コマンド、AddChildAtAbove? コマンド経由でディスプレイリストに追加された瞬間に発生します。このイベントは onCastAdded? イベントハンドラメソッド、及び _onCastAdded?() オーバーライド・イベントハンドラメソッドでの設定も可能です。
CastEvent?.CAST_REMOVED イベント
キャストオブジェクトが RemoveChild? コマンド、RemoveAllChildren? コマンド経由でディスプレイリストから削除された瞬間に発生します。このイベントは onCastRemoved? イベントハンドラメソッド、及び _onCastRemoved?() オーバーライド・イベントハンドラメソッドでの設定も可能です。

キャストオブジェクトには、コマンドの連続実行するフォーマットはいらないかも

ャストオブジェクトを AddChild コマンド、RemoveChild? コマンドで表示/削除するようにコーディング済みですので、キャストオブジェクト側の設定だけ行っていくことにしましょう。

DoTweener? の _onCastAdded?() への移植

まずは IndexScene? クラスの _onInit() メソッドに設定してある DoTweener? コマンドを IndexPage? クラスの _onCastAdded?() メソッドに移植します。移植の際には対象設定を this(= IndexPage? インスタンス)に変更することを忘れないようにしてください。

1
2
3
4
5
6
7
8
9
10
protected override function _onCastAdded():void {
// ページを透明にします。
alpha = 0;

// 実行したいコマンドを登録します。
addCommand(
// ページを不透明にします。
new DoTweener( this, { alpha:1, time:1 } )
);
}

DoTweener? の _onCastRemoved?() への移植

次に IndexScene? クラスの _onGoto() メソッドに設定してある DoTweener? コマンドを IndexPage? クラスの _onCastRemoved?() メソッドに移植します。こちらでも同じく対象設定の変更を忘れないようにしてください。

1
2
3
4
5
6
7
protected override function _onCastRemoved():void {
// 実行したいコマンドを登録します。
addCommand(
// ページを透明にします。
new DoTweener( this, { alpha:0, time:1 } )
);
}

移植元から、移植した部分を削除する。newで作成した連続実行部分は消さない。

Progression プリローダ

規模の大きなサイトになった場合は、プリローダが必要なときもある

前項までの内容で、コンテンツ部分の制作は完了しました。今回のようなシンプルなコンテンツの場合にはファイルサイズも気になりませんが、ある程度の規模になってくるとプリローダーの仕組みが必要になってきます。Progression では、そのようなケースを想定して標準でプリローダー機能が備わっています。

Preloader Class は、_onInit)0 イベントハンドラメソッドで初期化設定する

Preloader クラスは CastPreloader? クラスを継承しており、Index クラスと同様に _onInit() イベントハンドラメソッドで初期化処理を設定することができます。まずはこのタイミングで読み込み状態を表示するためのテキストフィールドを作成しておきましょう。

_onCastLoadStart?() イベントハンドラで、ロート中のアニメーションを定義

次にポイントとなるのは _onCastLoadStart?() イベントハンドラメソッドです。このメソッドはプリローダーがメインのコンテンツファイルの読み込みを開始した瞬間に実行され、このメソッドの実行中はシーンオブジェクトやキャストオブジェクトと同様に addCommand() メソッドによるコマンド処理が実行可能です。このイベントは、主にプログレスバー表示の際のアニメーション処理などを行うものとして設計されています。今回は以下のように設定することにしましょう。

_onProgress() イベントハンドラは、読み込み処理監視。ただ、重いaddCommand() が使えない

_onCastLoadStart?() イベントハンドラメソッドで登録したコマンドが全て実行完了すると、実際に読み込み処理が監視されます。読み込みが開始されると _onProgress() イベントハンドラメソッドが呼ばれるようになります。ただし、このイベント中には _onCastLoadStart?() イベントハンドラメソッドのように addCommand() メソッドを使用することはできません。これは _onProgress() メソッドが Event.ENTER_FRAME のように逐次呼ばれるイベントであるため、時間のかかる非同期処理を設定しても意味がないための仕様です。

_onCastLoadComplete?() イベントハンドラで、最期。読み込み完了処理を定義

最後に _onCastLoadComplete?() イベントハンドラメソッドを使用して、読み込み完了後の処理を設定します。このイベントの際には _onCastLoadStart?() メソッドの時と同様に addCommand() メソッドが使用可能になります。

読み込まれたファイルは、全てのイベントハンドラが実行終了したタイミングで画面に表示

読み込まれた SWF ファイルは、_onCastLoadComplete?() イベントハンドラメソッドが完了し、登録されたコマンドが全て実行終了したタイミングで画面に表示されるようになります。

以上、終わり!

パブリッシュして、アップロードしましょう

未整理のサンプル資料

どこかから1

・メインクラス(Spriteから継承)の中で画面ごとのクラスのインスタンスを生成 ・画面ごとのクラスはSceneObject?クラスを継承している ・SceneObject?クラスでは、_onInit()と_onGoto()をオーバーライドする

どこかから2

なぜか突然、Flashのこと書いてみます。Progression3になって丁寧な作りこみがパナイ(半端じゃない)ですね、コンパネすごすぎてちょっと引きました。普段はFlexBuilder?派なので、ActionScript?プロジェクトとして作る時のセットアップメモ。

1.インストール チュートリアル通り、ダウンロードしてインストール。

2.Flashのプロジェクト作る その際、仮に設定は以下のようにした。 プロジェクトの名前:MyProject?-1 パッケージ:hoge メインクラス:Index

3.Flex BuilderのActionScript?プロジェクト作る さっきので出来たMyProject?-1というフォルダにFlexBuilder?の設定を併せる

[プロジェクト名] 適当にASproject-1とかに設定

[プロジェクトコンテンツ] C:\任意のパス\MyProject?-1\src

[ソースパス] libs (C:\任意のパス\MyProject?-1\src\libsのこと) ※flパッケージとかは適宜パス通してください。

[メインソースフォルダ] classes (C:\任意のパス\MyProject?-1\src\classesのこと)

[メインアプリケーションファイル] hoge\Index.as (C:\任意のパス\MyProject?-1\src\classes\hoge\Index.asのこと) でOK。

おまけ・html-templateを消す HTMLラッパーなど得に必要ないと思うので消しました。 ASproject-1のプロパティーから [ActionScript?コンパイラ]→[HTMLラッパー]のチェックはずす

で、とりあえず、調子よいでーす。

どこからか3

参考資料

Progression Forum
公式フォーラム?ここにFlex関係の話題もあるといいな。
特集 - Flashのフレームワーク「Progression3」を始めてみよう!
gihyo.jp の特集記事。公式サンプルよりも具体的になってます。
これも Flash CS3 用なのですが、公式サンプルとは違ったメソッドなどを紹介しています。
Progression で Flex アプリケーションを作る
yoshizu's log さんとこの記事。結構参考になると思う。

参考資料

リンク先タイトル:
一言感想。

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-10-08 (木) 22:36:18 (3756d)
Ads by Sitemix