Progression ─ Flashサイト構築が加速する充実のフレームワーク
Part.3 Progressionによるサイト構築の実践：サイト構造のXML定義〜コンポーネントの配置
今月号の記事
- 株式会社paperboy&co.が提供するショッピングポータルサイト
- Developer Center 今月のトピックス
- Flash CS3 でゼロからはじめようAIRアプリケーション作成講座 Vol.2
- Adobe MAX CUPの興奮を伝えるウィジェット
- Progression ─ Flashサイト構築が加速する充実のフレームワーク
- the Edge Recommends! 最新サイトアイデア帳
- Edge 最新ニュース／イベント・セミナー情報
Progression の解説記事も今回で3回目となりました。Progression Framework も、状態遷移機能とコマンド機能、ブラウザ連動機能を統合した ActionScript 3.0 用のフレームワーク、Progression Framework 2が登場。ベータ版もリリースされ、さらに有用なフレームワークとしてどのように進化したのか実際に体感することができるようになっています。今回の記事では、Progression でサイト全体にダイナミックな動きを与える方法として「PRML」について解説します。Progression では、「いつどこに何を表示して、何を消すのか？」という情報は、サイトの構造を定義するために PRML という Progression Framework 用の XML データに構造化して記述します。今回は XML データの作成を以下の細かいステップで進めていきます。
- PRMLファイルを作成する
- 各シーン（ページ）を定義
- パーツを Progression に登録
- イベントを定義
- パーツの変数や関数を使う
- パーツのフレームアニメーションを再生する
使用する PRML タグ
今回使用する PRML タグは以下の9種類です。記述の仕方は XHTML とほぼ一緒です。それぞれのタグの詳しい解説は PRML リファレンスはご覧ください。
- <screenPlay>
- <casting>
- <scene>
- <event>
- <addChildAt>
- <removeChild>
- <property>
- <gotoAndPlay>
- <multi>
1.PRML ファイルを作成する
以下のコードが PRML の基本形になります。テキストエディタにペーストをして「progression.XML」というファイル名で保存してください。なお、<screenPlay>の version 属性には、使用する Progression のバージョンに対応する値を設定してください。*1
<?XML version="1.0" encoding="utf-8" ?> <screenPlay version="1.4.4"> </screenPlay>
*1 バージョンによって若干 PRML の記述方法が変更されていますので、現在インストールされているバージョン番号を指定してください。Adobe Extension Manger の Flash CS3 の Extension から確認できます。
2.各シーン（ページ）を定義
<scene> を使用してサイトのページ構造を記述していきます。
| <scene> | シーンを定義します。このタグは、子タグにも <scene> を定義することで、階層構造を表現することが可能です。このタグは最低1つ以上設定する必要があります。ただし、<screenPlay> の直下には <scene> を 2 つ以上設定することはできません。 |
|---|---|
| id 属性（必須） | シーン識別子を設定します。この値は同階層にある <scene> タグの id 属性値と重複して設定することはできません。 |
| title 属性 | Progression の syncBlowser プロパティが有効化されている場合に、ブラウザに表示されるタイトルを設定します。この値が省略されている場合にはシーン識別子を表示します。 |
<?XML version="1.0" encoding="utf-8" ?>
<screenPlay version="1.4.4">
<scene id="index" title="Sample">
<scene id="about" title="About | Sample"></scene>
<scene id="gallery" title="Gallery | Sample">
<scene id="photo1" title="Photo1 < Gallery | Sample"></scene>
省略
<scene id="photo10" title="Photo10 < Gallery | Sample"></scene>
</scene>
<scene id="contact" title="Contact | Sample"></scene>
</scene>
</screenPlay>
これでサイトのページ構造が記述できました。次はページごとのイベントや配置する MovieClip の情報を追加します。
3.パーツを Progression に登録
パーツをコントロールするには Progression にパーツのクラス名を教える必要があります。<casting>で Progression にパーツのクラス名を関連づけます。
| <scene> | シーン内で使用したいキャストオブジェクトを宣言します。このタグは、XML 上の任意の場所に記述できますが、同じ id 属性値を持つタグを2つ以上設定できません。 |
|---|---|
| id 属性（必須） | キャストオブジェクトを呼び出す際に使用するキャスト識別子を設定します。 |
| class属性（必須） | キャストオブジェクトを生成する場合のベースとなるクラスのパスを指定します。 |
<?XML version="1.0" encoding="utf-8" ?>
<screenPlay version="1.4.4">
<scene id="index" title="Sample">
<casting id="Header" class="index.Header" x="43" y="42" />
<casting id="Nav" class="navi.Navigation" x="0" y="568" />
<casting id="News" class="index.News" x="0" y="524" />
<scene id="about" title="About | Sample">
<casting id="About" class="about.About" x="0" y="219" />
</scene>
<scene id="gallery" title="Gallery | Sample">
<casting id="Gallery" class="gallery.Gallery" x="0" y="548" />
<casting id="PhotoLoader" class="gallery.PhotoLoader" />
<scene id="photo1" title="Photo1 < Gallery | Sample"></scene>
省略
<scene id="photo10" title="Photo10 < Gallery | Sample"></scene>
</scene>
<scene id="contact" title="Contact | Sample">
<casting id="Contact" class="contact.Contact" />
</scene>
</scene>
</screenPlay>
次はキャストオブジェクトの表示をどのタイミングで行うかを構造化していきます。
4.イベントを定義
キャストオブジェクトの表示をコントロールするには<addChildAt>と<removeChild>を使用します。for 属性で表示をコントロールするキャストオブジェクトの id を指定します。
| <addChildAt> | 対象となるキャストオブジェクトを最前面に配置します。対象となるキャストオブジェクトが画面上に配置済みであった場合には何も起きません。 |
|---|---|
| for属性（必須） | ここで設定する識別子は、あらかじめ<casting> で宣言されている必要があります。また、カンマで区切ることで複数のキャスト識別子を指定することができます。 |
| <removeChild> | 対象となるキャストオブジェクトを画面から削除します。対象となるキャストオブジェクトが画面上に存在しない場合には何も起きません。 |
| for属性（必須） | ここで設定する識別子は、あらかじめ<casting>で宣言されている必要があります。また、カンマで区切ることで複数のキャスト識別子を指定することができます。 |
| <event> | シーンのイベントタイプを設定します。イベント発生時には、タグ内に設定されている各コマンドを最初から順次実行します。このタグは同じ type 属性値を持つタグを2つ以上設定できません。 |
type 属性には以下の４つのタイミングがあります。
- load
- init
- goto
- unload
以上の４つのタイミングで、各シーン毎にいつ何をするのか指定します。
<?xml version="1.0" encoding="utf-8" ?>
<screenPlay version="1.4.4">
<scene id="index" title="Sample">
<casting id="Header" class="index.Header" x="43" y="42" />
<casting id="Nav" class="navi.Navigation" x="0" y="568" />
<casting id="News" class="index.News" x="0" y="524" />
<event type="load">
<addChildAt for="Header" index="4" />
<addChildAt for="Nav" index="10" />
</event>
<event type="init">
<addChildAt for="News" index="5" />
</event>
<event type="goto">
<removeChild for="News" />
</event>
<scene id="about" title="About | Sample">
<casting id="About" class="about.About" x="0" y="219" />
<event type="load">
<addChildAt for="About" />
</event>
<event type="unload">
<removeChild for="About" />
</event>
</scene>
<scene id="gallery" title="Gallery | Sample">
<casting id="Gallery" class="gallery.Gallery" x="0" y="548" />
<casting id="PhotoLoader" class="gallery.PhotoLoader" />
<event type="load">
<addChildAt for="Gallery" />
</event>
<event type="unload">
<removeChild for="Gallery" />
</event>
<scene id="photo1" title="Photo1 < Gallery | Sample">
<event type="load">
<addChildAt for="PhotoLoader" index="1"/>
</event>
<event type="unload">
<removeChild for="PhotoLoader" />
</event>
</scene>
省略
<scene id="photo10" title="Photo10 < Gallery | Sample">
<event type="load">
<addChildAt for="PhotoLoader" index="1"/>
</event>
<event type="unload">
<removeChild for="PhotoLoader" />
</event>
</scene>
</scene>
<scene id="contact" title="Contact | Sample">
<casting id="Contact" class="contact.Contact" />
<event type="load">
<addChildAt for="Contact" index="5" />
<goto id="/index" />
</event>
<event type="unload">
<removeChild for="Contact" />
</event>
</scene>
</scene>
</screenPlay>
5.パーツの変数を設定する
今回は FileLoader プリセットを使用して、外部 jpg を読み込むために FileLoader の url プロパティを<property>で指定します。url プロパティを設定すると、その url のファイルの読み込みが始まります。
| <property> | キャストオブジェクトに定義されているプロパティを変更します。対象のプロパティが存在しない場合には何も起きません。 |
|---|---|
| for属性 | ここで設定する識別子は、あらかじめ<casting>で宣言されている必要があります。また、カンマで区切ることで複数のキャスト識別子を指定することができます。 |
| name属性 | プロパティ名を設定します。 |
| value属性 | プロパティ変更後の値を設定します。 |
<?xml version="1.0" encoding="utf-8" ?>
<screenPlay version="1.4.4">
<scene id="index" title="Sample">
<casting id="Header" class="index.Header" x="43" y="42" />
<casting id="Nav" class="navi.Navigation" x="0" y="568" />
<casting id="News" class="index.News" x="0" y="524" />
<event type="load">
<addChildAt for="Header" index="4" />
<addChildAt for="Nav" index="10" />
</event>
<event type="init">
<addChildAt for="News" index="5" />
</event>
<event type="goto">
<removeChild for="News" />
</event>
<scene id="about" title="About | Sample">
<casting id="About" class="about.About" x="0" y="219" />
<event type="load">
<addChildAt for="About" index="5" />
</event>
<event type="unload">
<removeChild for="About" />
</event>
</scene>
<scene id="gallery" title="Gallery | Sample">
<casting id="Gallery" class="gallery.Gallery" x="0" y="548" />
<casting id="PhotoLoader" class="PhotoLoader" />
<event type="load">
<addChildAt for="Gallery" index="5" />
</event>
<event type="unload">
<removeChild for="Gallery" />
<removeChild for="PhotoLoader" />
</event>
<scene id="photo1" title="Photo1 < Gallery | Sample">
<event type="load">
<addChildAt for="PhotoLoader" index="1"/>
<property for="PhotoLoader" name="url" value="gallery/photo1.jpg" />
</event>
<event type="unload">
<removeChild for="PhotoLoader" />
</event>
</scene>
省略
<scene id="photo10" title="Photo10 < Gallery | Sample">
<event type="load">
<addChildAt for="PhotoLoader" index="1"/>
<property for="PhotoLoader" name="url" value="gallery/photo10.jpg" />
</event>
<event type="unload">
<removeChild for="PhotoLoader" />
</event>
</scene>
</scene>
<scene id="contact" title="Contact | Sample">
<casting id="Contact" class="contact.Contact" />
<event type="load">
<addChildAt for="Contact" index="5" />
<goto id="/index" />
</event>
<event type="unload">
<removeChild for="Contact" />
</eventy>
</scene>
</scene>
</screenPlay>
6.パーツのフレームアニメーションを再生する
各ページの<event>に<gotoAndPlay>を追加して、Navigation のアニメーションを実行させます。
| <gotoAndPlay> | 対象となるキャストオブジェクトのgotoAndPlay()を実行します。 |
|---|---|
| for属性 | ここで設定する識別子は、あらかじめ<casting>で宣言されている必要があります。また、カンマで区切ることで複数のキャスト識別子を指定することができます。 |
| frame属性 | フレーム番号またはフレームラベルを設定します。 |
<?xml version="1.0" encoding="utf-8" ?>
<screenPlay version="1.4.4">
<scene id="index" title="Sample">
<casting id="Header" class="index.Header" x="43" y="42" />
<casting id="Nav" class="navi.Navigation" x="0" y="568" />
<casting id="News" class="index.News" x="0" y="524" />
<event type="load">
<addChildAt for="Header" index="4" />
<addChildAt for="Nav" index="10" />
</event>
<event type="init">
<multi>
<gotoAndPlay for="Nav" frame="indexInit" />
<addChildAt for="News" index="5" />
</multi>
</event>
<event type="goto">
<multi>
<gotoAndPlay for="Nav" frame="indexGoto" />
<removeChild for="News" />
</multi>
</event>
<scene id="about" title="About | Sample">
<casting id="About" class="about.About" x="0" y="219" />
<event type="load">
<multi>
<gotoAndPlay for="Nav" frame="aboutInit" />
<addChildAt for="About" index="5" />
</multi>
</event>
<event type="unload">
<multi>
<gotoAndPlay for="Nav" frame="aboutGoto" />
<removeChild for="About" />
</multi>
</event>
</scene>
<scene id="gallery" title="Gallery | Sample">
<casting id="Gallery" class="gallery.Gallery" x="0" y="548" />
<casting id="PhotoLoader" class="gallery.PhotoLoader" />
<event type="load">
<multi>
<gotoAndPlay for="Nav" frame="galleryInit" />
<addChildAt for="Gallery" index="5" />
</multi>
</event>
<event type="unload">
<multi>
<gotoAndPlay for="Nav" frame="galleryGoto" />
<removeChild for="Gallery" />
</multi>
</event>
<scene id="photo1" title="Photo1 < Gallery | Sample">
<event type="load">
<addChildAt for="PhotoLoader" index="1"/>
<property for="PhotoLoader" name="url" value="gallery/photo1.jpg" />
</event>
<event type="unload">
<removeChild for="PhotoLoader" />
</event>
</scene>
省略
<scene id="photo10" title="Photo10 < Gallery | Sample">
<event type="load">
<addChildAt for="PhotoLoader" index="1"/>
<property for="PhotoLoader" name="url" value="gallery/photo10.jpg" />
</event>
<event type="unload">
<removeChild for="PhotoLoader" />
</event>
</scene>
</scene>
<scene id="contact" title="Contact | Sample">
<casting id="Contact" class="contact.Contact" />
<event type="load">
<multi>
<gotoAndPlay for="Nav" frame="contactInit" />
<addChildAt for="Contact" />
</multi>
<goto id="/index" />
</event>
<event type="unload">
<multi>
<gotoAndPlay for="Nav" frame="contactGoto" />
<removeChild for="Contact" />
</multi>
</eventy>
</scene>
</scene>
</screenPlay>
<event>の中には、各ページの表示のタイミングに合わせて<gotoAndPlay>で Navigation のフレームラベルを指定します。そのまま <gotoAndPlay>だけを追加すると、<gotoAndPlay> → <addChildAt> のように前のコマンドが終了してから順番に実行します。ですが、ここでは同時に動かしたいので、<gotoAndPlay>と<addChildAt>を <multi>で囲みます。
これで、Navigation のアニメーションを実行することができます。XML の作成は完了です。この PRML は Flash 版の HTML と思うといいかもしれません。はじめは難しそうに感じますが、慣れてくるとスラスラと書けるようになります。
3.fla ファイルに progression コンポーネントを配置する
それでは最後の仕上げです。作成したパーツと XML を Progression で関連づける為に、コンポーネントパネルから ProgressionIDE をドラッグしてステージ上に配置しましょう。
次に、ステージ上に配置した Progression Component を選択してパラメータータブを選択して、
下記のように記入します。
| パラメーター名 | 値 |
|---|---|
| PRML ファイルのパス | progression.XML |
| 最初のシーン識別子 | /index |
PRMLファイルのパスは先程のステップで作成したprogression.XMLを入れます。最初のシーン識別子は/index以外でも/index/about などでも可能です。はじめに表示したいシーン識別子を記入してください。
これで、progression コンポーネントの設定は完了です。main.fla と progression.XML、ギャラリー用の写真が入っている gallery ディレクトリを同じディレクトリに配置してパブリッシュしてみましょう。
※main.fla のパブリッシュ設定の ActionScript のバージョンの横の設定先にある
ステージのインスタンスを自動宣言は必ずチェックを外すようにして下さい。
外さないとエラーが出てしまい、パブリッシュができなくなってしまいます。
Progression を使ってみんなハッピーに！
これで、Progression を使用したサイト構築は完了です。Flash にサイトの根幹部分を担当させるだけでこんなにも可能性が広がります。今まで敬遠していた人もこれを機会にチャレンジしてみてはいかがでしょうか? Progression を使えば Flash でアニメーションしか作ったことのない人でもサイトを構築できるようになります、もちろん、ActionScript を使ってインタラクティブに動くサイトを作る事も可能です。
そして何よりも Progression を使うことで今までのサイト制作より時間的にも余裕ができます。その余った時間をさらにクオリティのアップにつぎ込んだり、早めに帰宅して遊ぶ時間や家族や友人などと過ごす時間に使うのもいいですね。
松竹 誠（Mk-10:cellfusion）Web Director & Designer / Flash Engineer
Ryukyu Inc. 所属
http://www.dragon-ball.in/
飯と睡眠よりActionScriptと戯れる事をチョイスする毎日。
最近は映像や3Dにちょっと浮気気味。
阿部貴弘（taka:nium）Director / Designer / Engineer
http://nium.jp/
Progression プロジェクトマネージャ（Spark project）
http://www.libspark.org/
http://progression.libspark.org/trac
映像会社、デザイン会社を経て、現在はフリーランスで活動中。
