Progression Framework 2 初級編：ActionScriptを書かずにFlashサイトを簡単に構築する
作成日
15 January 2008
ページ ツール |
必要条件
Progression Framework 2とは
Progression Framework 2は、Flashを使用したWebサイト開発に最適なActionScript 3.0用フレームワークです。Progression Framework 2を使用すれば、複雑なリンク構造を持つHTMLベースのWebサイトと同等のコンテンツを Flashでも簡単に開発できます。また、Flashコンテンツではなかなか対応が難しい「ページごとのURL発行」「右クリックメニューによるナビゲーション」などにも対応しているため、非常に高いユーザビリティを持つFlashコンテンツを素早く開発することができます。
本記事では、Progression Framework 2の機能の中から、初心者向けに実装されたEasyCasting機能（コンポーネントを使用してProgression Framework 2の機能をムービークリップに実装する機能）を使って、ActionScriptをまったく書かずにサイトを作成する方法を紹介します。図1が作成するサンプルサイトです。
Progression Framework 2を使って、このサンプルサイトを制作する手順をステップバイステップで解説していきます。なお、本記事のサンプル「prog2BeginerSample.zip」では、各ステップのフォルダがあり、ステップで作成したflaファイルが入っています。各ステップフォルダ内のmain_start.flaを開いて進めてください。main.flaは、それぞれのステップでの作業終了後のファイルです。実際にどのような構造になっているかを確認しながら読み進めて行くと理解しやすいでしょう。
Progression Framework 2のインストール
Progression Framework 2は、Progressionのサイトからダウンロードできます。必ず最新版を利用してください。本記事執筆時点（2007年12月末）での最新版は「Progression Framework 2.0.0 Beta 2」です。ソースコードと拡張機能を mxp 形式のファイルで配布しているため、インストールには別途Adobe Extension Managerが必要です。以下の手順でインストールしてください。
- Progression Framework 2のフルパッケージをダウンロードします。※ソースコードアーカイブは必要ありません。
- ダウンロードしたProgression2-Mac.mxp（Mac OSの場合）をダブルクリックして、インストール作業を開始します。
- インストール中に出てくるフォルダ選択画面では、Flash CS3をインストールした際にできるConfigrationフォルダを指定します。下記ディレクトリを参考にしてください。
Windows : C:/Program Files/Adobe/Adobe Flash CS3/ja/Configuration/
Mac OSX : /Applications/Adobe Flash CS3/Configuration/ - インストールが完了するとAdobe Extension Manager上にProgression Frameworkが表示されます（図3）。
- インストール中にFlashを起動していた場合は、再起動します。以上でインストールは完了です。
ステップ1：パーツの作成＜サイトコンテンツのパーツをムービークリップに変換する
まずは、サイトコンテンツの各パーツをムービークリップ化します。本記事のサンプルファイルのlayoutフォルダ内には、各ページのデザインのJPEGファイルが入っています。これらデザイン画像を参考にして、各パーツを作成していきます。スペースの都合で、すべてのパーツについて解説することができないので、ここではナビゲーションパーツとインデックスページを作成します。
- メニューの「ファイル ／新規」を選び、Flash ファイル（AS3.0）で新規ファイルを作成します。
- メニューから「ファイル／読み込み／ステージに読み込み」を選び、 layoutフォルダ内のprog2_top.jpgを読み込んで配置します。
- 読み込んだ画像を選択して、メニューから「 修正／シンボルに変換 」を選び、グラフィックシンボルに変換してアルファ値を50%にセットします（図5）。
- まずはナビゲーションに必要なボタンパーツを作成します。メインのタイムラインにNavigationレイヤーを作成します。サンプルのpartsフォルダ内にあるbg_navi_main.jpgを読み込んで「ButtonBackground」という名前でグラフィックシンボルに変換します。
- ButtonBackgroundグラフィックシンボルの高さを480ピクセルに変更して、デザイン画像に合わせて配置します。デザイン画像を参考にしながら、ナビゲーションのボタンを作成していきます。ボタンの作成が完了したら、各ボタンを選択して、 ムービークリップに変換します（図6）。
- ルートに戻ってナビゲーションのパーツをすべて選択し、 「Navigation」という名前のムービークリップにまとめます（図7）。
- PROFILE、GALLERY、CONTACTの各ページについても、上記のようにデザイン画像を読み込んで作成していきます。ページのムービークリップのレイヤー構造は自由に作っていただいてかまいません。唯一のルールとして、Progression Framework 2でコントロールするパーツは必ずムービークリップシンボルに変換しておくことです。このルール以外に決まりごとはないので自分のやりやすいように作成してください。すべてのパーツを作成したflaファイルが サンプルのstep1フォルダ内にあるmain.flaです。次のステップからは、このflaファイルをもとに進めていきます。今回のサンプルで使用するムービークリップを全部作成すると、ライブラリパネルは図8のようになります。
リンケージ設定（書き出し設定）
先ほど作成したパーツを Progression（ActionScript）で制御できるようにするには、リンケージ設定を行う必要があります。ナビゲーションのCONTACTボタンを例に、リンケージ設定手順を説明します。
- ライブラリパネルのContactButtonを選択して、右クリックメニューのリンケージを選択します。
- リンケージプロパティダイアログが表示されるので、「リンケージ：ActionScriptに書き出し」チェックボックスをオンにします。オンにすると自動で図9のようになるのでそのままでリンケージ設定は終了です。
- サムネイルや各ボタンなどのパーツやコンタクトページ、各写真の詳細ページなども同じようにリンケージ設定を行います（図10）。ただ、Photo1はリンケージ設定を行う必要はありません。
ステップ2：InOutMovieコンポーネントで各ページにアニメーションを実装する
Progressionコンポーネント
Progression Framework 2をインストールすると、「Progression Casts」「Progression Commands」「Progression Loader」といったコンポーネント群もインストールされます（図11）。これらのProgressionコンポーネントをムービークリップ内に設置するだけで、ムービークリップの表示・非表示時にアニメーションを実装したり、シーン移動機能のついたボタンを作成したりすることができます。
本記事のサンプルサイトでは、ページ遷移の際、ページがフェードイン／フェードアウトしながら切り替わるようになています。このフェードイン／フェードアウトアニメーションは、Progression Castsコンポーネント群の中のInOutMovieコンポーネントを使って実装しています。
InOutMovieコンポーネント
InOutMovieコンポーネントには、以下の表にあるパラメータが用意されています。このコンポーネントをムービークリップにドラッグ＆ドロップで設置するだけで、そのムービークリップの表示時と非表示時に再生するフレームアニメーションを設定できます。
| アイコン | パラメータ | 内容 |
|---|---|---|
 |
IN点 | ムービークリップを表示する際に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 |
| OUT点 | ムービークリップを非表示にする際に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 | |
| ツールヒント | バージョン2.0.0 Beta 2では実装されていないため、使用できません。 |
各ページのフェードイン／フェードアウトアニメーションを設定
TopPageムービークリップ（Indexページ）を例に、 InOutMovieコンポーネントを使ってアニメーションを追加する方法を解説します。まずは、TopPageムービークリップの表示時と非表示時のフレームアニメーションを作成します（図12）。表示時用アニメーションの開始位置にフレームラベル「in」を、終了位置に「stop」ラベルを設定します。非表示アニメーションの停止位置に「out」ラベルを設定します。この例では、「stop」ラベルが、非表示アニメーションの開始位置でもあります。
次に、Componentレイヤーに InOutMovieコンポーネントをドラッグ＆ドロップで設置します（図13）。
以上で表示時と非表示時のアニメーション実装は完了です。その他のページにも同じようにInOutMovieコンポーネントを設置してアニメーションを追加します。
ステップ3：RollOverButtonコンポーネントで各ボタンにシーン移動機能を追加する
サンプルでは、ナビゲーションのボタンをクリックして、ページ遷移を行うようになっています。このページ遷移機能は、Progression Castsコンポーネント群の中のRollOverButtonコンポーネントを使って実装しています。また、RollOverButtonという名前が示す通り、このコンポーネントではマウスオーバー時やマウスクリック時のアニメーションも設定することができます。
RollOverButtonコンポーネント
RollOverButtonコンポーネントには、以下の表にあるパラメータが用意されています。このコンポーネントをムービークリップにドラッグ＆ドロップで設置するだけで、そのムービークリップがボタンとして動作するようになります。
| アイコン | パラメータ | 内容 |
|---|---|---|
 |
CURRENT点 | 「移動先となるシーンパス」パラメータにかかれているシーンにいる時に表示するフレームを指定する。 |
| DISABLE点 | クリックできない状態の時に表示するフレームを指定する。 | |
| DOWN点 | マウスクリック時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 | |
| OVER点 | ロールオーバー時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 | |
| UP点 | ボタンからマウスが離れた時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 | |
| 移動先となるURL | 移動先となるURLを指定する。 | |
| 移動先となるシーンパス | 移動先となるシーンのパスを指定する。シーンの設定については「外部XMLに各シーンごとの設定を書き込む」で詳しく説明します。 | |
| アクセスキー | バージョン2.0.0 Beta 2では実装されていないため、使用できません。 | |
| ツールヒント | バージョン2.0.0 Beta 2では実装されていないため、使用できません。 |
各ボタンの設定
ProfileButtonムービークリップ（PROFILEボタン）を例に、 RollOverButtonコンポーネントを使ってページ遷移機能を実装する方法を解説します。まずは、ProfileButtonムービークリップのフレームアニメーションを作成します（図14）。そして、上記のパラメータを参考に、マウスオーバー時やマウスクリック時のフレームラベルを設定します。
次に、ComponentレイヤーにRollOverButtonコンポーネントを設置します（図15）。
以上で、ナビゲーションボタンへのページ遷移機能の実装は完了です。その他のボタンにも同じようにRollOverButtonコンポーネントを設置してアニメーションを実装します。
ステップ4： ImageBoxコンポーネントを使って写真を外部から読み込む
サンプルのGALLERYページでは、写真のサムネイルが並び、サムネイルをクリックすると拡大写真がページ中央に表示されるようになっています。拡大写真は、外部ファイルとして読み込んでいます。この外部画像ファイル読み込み機能は、Progression Castsコンポーネント群の中のImageBoxコンポーネントを使って実装しています。
ImageBoxコンポーネント
ImageBoxコンポーネントには、以下の表にあるパラメータが用意されています。このコンポーネントをムービークリップにドラッグ＆ドロップで設置するだけで、そのムービークリップに指定した画像を読み込むことができます。
| アイコン | パラメータ | 内容 |
|---|---|---|
 |
ERROR点 | 画像の読み込みのエラー時に表示するフレームラベルを指定する。 |
| LOAD点 | 画像の読み込み中に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 | |
| スムージング | 画像をスムージング（滑らかに表示）するかどうかを指定する。 | |
| ピクセルにスナップ | ピクセルに沿って配置をするかを指定する。 | |
| 画像のURL | 読み込む画像のURLを指定する。 | |
| 縦横比の維持 | 画像の縦横比を維持するかどうかを指定する。 | |
| ツールヒント | バージョン2.0.0 Beta 2では実装されていないため、使用できません。 |
各拡大写真を外部読み込みに設定
Photo1Pageムービークリップを例に、GALLERYページの拡大写真を外部読み込みにする方法を解説します。Photo1Pageムービークリップは、写真画像を入れ子にしたPhoto1ムービークリップと、拡大写真表示時に周りを暗くするための半透明の黒い矩形を入れ子にしたDetailBackgroundグラフィックシンボルで構成されています。サンプルではPhoto1ムービークリップ には直接画像が張られている状態なので、その画像を外部読み込みにするために ImageBoxコンポーネントで置き換えます。
ImageBoxコンポーネントで置き換えたら、次に、拡大写真をクリックするとGALLERYページに戻るようにしたいので、ParentButtonコンポーネントを使って、戻るボタン用のGalleryBackButtonムービークリップを作成します。
ParentButtonコンポーネント
ParentButtonコンポーネントには、以下の表にあるパラメータが用意されています。ParentButtonコンポーネントはRollOverButtonコンポーネントの派生で、一つ上の階層に戻る機能を実現します。
| アイコン | パラメータ | 内容 |
|---|---|---|
 |
CURRENT点 | 「移動先となるシーンパス」パラメータにかかれているシーンにいる時に表示するフレームを指定する。 |
| DISABLE点 | クリックできない状態の時に表示するフレームを指定する。 | |
| DOWN点 | マウスクリック時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 | |
| OVER点 | ロールオーバー時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 | |
| UP点 | ボタンからマウスが離れた時に再生するアニメーションの開始位置と終了位置のフレームラベルを指定する。 | |
| Progression識別子 | ||
| アクセスキー | バージョン2.0.0 Beta 2では実装されていないため、使用できません。 | |
| ツールヒント | バージョン2.0.0 Beta 2では実装されていないため、使用できません。 |
GALLERYページに戻るボタンを設定
GALLERYページに戻るボタンとなるGalleryBackButtonムービークリップには、ParentButtonコンポーネントを設置して、また、ロールオーバー時のグレーアウト効果のための矩形を作成します（図17）。
GalleryBackButtonムービークリップを作成したら、Photo1ムービークリップにGalleryBackButtonムービークリップの矩形とPhoto1の背景の矩形と合うように GalleryBackButton レイヤーに配置します（図18）。
Photo1Pageムービクリップにも表示・非表示のアニメーションを追加するので、InOutMovieコンポーネントを設置します（図19）。
各サムネイルにRollOverButtonコンポーネントを追加する
各サムネイルをクリックすると対応した拡大写真を表示したいので、各サムネイルにRollOverButtonコンポーネントを設置して、各写真のシーンのパス （/index/gallery/photo1）を設定します（図20）。
Photo1Pageムービクリップにも表示・非表示のアニメーションを追加するので、InOutMovieコンポーネントを設置します（図19）。
ステップ5：EasyCasting機能でサイトのシーン表示をコントロールする
コンテンツのパーツやページを作成し、コンポーネントで各種機能を実装した後は、EasyCasting機能を使ってサイト表示のコントロールを行います。EasyCasting機能では、XMLファイルでサイトの各シーンにどのパーツを表示するかなどを定義して、EasyCasting Loaderコンポーネントを使用してそのXMLファイルをSWFファイルに読み込みます。
XMLファイルの作成
Progression Framework 2で、使用するXMLのタグは以下の3種類です。
| タグ | 属性 | 内容 |
|---|---|---|
| prml | htmlタグのように、必須となるタグ。 | |
| version | prmlのバージョンを記述します（現在は2.0.0） | |
| scene | 各シーンの設定をするタグです。 | |
| name | シーンの名前を設定する。この名前を使用して、RollOverButtonコンポーネントなどから移動するシーンを指定するので必ずユニークな名前を付ける必要があります。 | |
| title | Webブラウザに表示するタイトルを設定する。 | |
| cast | 表示するオブジェクトの設定をするタグ。 | |
| ERROR点 | cls | 表示するクラス名を設定する。はじめに設定したリンケージ設定のクラス名で指定する。 |
| index | 表示するオブジェクトの深度を設定する。数字が大きいほど上になる。 |
では、このタグを使って、簡単なサイトの構造例を書いてみましょう。
<?xml version="1.0" encoding="UTF-8" ?>
<prml version="2.0.0">
<scene name="index" title="ALAN SMITHEE">
<cast cls="TopPage" index="5" />
<cast cls="Navigation" index="10" />
<cast cls="Footer" index="1" />
<scene name="profile" title="profile | ALAN SMITHEE">
<cast cls="ProfilePage" index="5" />
<cast cls="Navigation" index="10" />
<cast cls="Footer" index="1" />
</scene>
</scene>
</prml>
この例のサイト表示を説明すると、indexシーンとprofileシーンの2つのシーンがあって、indexシーンではTopPageを表示し、profileシーンではProfilePageを表示しています。各シーンでは共通してNavigationオブジェクトとFooterオブジェクトを表示します。1つのシーンでしか指定されていないオブジェクトは、指定されていないシーンに移動する際に自動で消去されます。sceneタグは入れ子にすることができるので、複雑な構造のサイトでも簡単に構造を作ることができますが、1つだけ注意点があります。prmlタグの直下にはsceneタグは1つしかおけないので、第一階層のsceneタグは1つだけになります。
では、今回のサンプルサイトのXMLファイルを作成します。サイト構造を再度確認しておきましょう。これを元にXMLファイルを作成し、ファイル名を「easycasting.xml」とします。
ParentButtonコンポーネントには、以下の表にあるパラメータが用意されています。ParentButtonコンポーネントは RollOverButtonコンポーネントの派生で、一つ上の階層に戻る機能を実現します。
<?xml version="1.0" encoding="UTF-8" ?>
<prml version="2.0.0">
<scene name="index" title="ALAN SMITHEE">
<cast cls="TopPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
<scene name="profile" title="profile | ALAN SMITHEE">
<cast cls="ProfilePage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
</scene>
<scene name="gallery" title="gallery | ALAN SMITHEE">
<cast cls="GalleryPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
<scene name="photo1">
<cast cls="Photo1Page" index="15" />
<cast cls="GalleryPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
</scene>
<scene name="photo2">
<cast cls="Photo2Page" index="15" />
<cast cls="GalleryPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
</scene>
<scene name="photo3">
<cast cls="Photo3Page" index="15" />
<cast cls="GalleryPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
</scene>
<scene name="photo4">
<cast cls="Photo4Page" index="15" />
<cast cls="GalleryPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
</scene>
<scene name="photo5">
<cast cls="Photo5Page" index="15" />
<cast cls="GalleryPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
</scene>
<scene name="photo6">
<cast cls="Photo6Page" index="15" />
<cast cls="GalleryPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
</scene>
</scene>
<scene name="contact" title="contact | ALAN SMITHEE">
<cast cls="ContactPage" index="5" />
<cast cls="Navigation" index="20" />
<cast cls="Footer" index="1" />
</scene>
</scene>
</prml>
これで、XMLファイルでのシーンの設定は完了です。なお、今回はムービークリップのXY座標は Flash IDE上で調整しているため省略していますが、下記のようにXMLでXY座標を指定できます。
<cast cls="ContactPage" index="5" x="15" y="20" />
なお、xやyの属性が省略されている場合は、ステージの原点（左上）に配置されます。
次に、XMLファイルによるシーン設定を読み込むEasyCasting Loaderコンポーネントを配置します。
ノート : XML で指定したクラスがきちんとリンケージ設定されているか確かめましょう。リンケージ設定がされていない場合は、表示されません。
EasyCasting Loaderコンポーネント
EasyCasting Loaderコンポーネントには、以下の表にあるパラメータが用意されています。
| アイコン | パラメータ | 内容 |
|---|---|---|
 |
XMLファイルのURL | サイトの構造を記したXMLファイルのURLを記述する。 |
| XMLファイルの自動読み込み | 自動で読み込むかどうか。 | |
| オンライン上でブラウザ | ||
| キーボードショートカット | ||
| シーン移動をロック | ||
| シーン移動中は自動的に |
EasyCasting Loaderコンポーネントの設置
ルートにEasyCasting Loaderコンポーネントを設置します。
以上ですべての設定は完了です。メニューから「制御／ムービーのプレビュー 」を選んで、swfを書き出して、動作確認を行います。正常に動作したら、swfと easycasting.xmlとswfを埋め込んだhtmlファイルをサーバにアップします。
まとめ
Progression Framework 2はいかがでしたでしょうか。説明だけ読んでいるとちょっと複雑で面倒なように感じるかもしれませんが、実際に使ってみると今まで面倒だった基礎部分のほとんどをProgression Framework 2がカバーしてくれることがわかると思います。今回は初級編ということで一切ActionScriptを使わずに構築しましたが、中級編、上級編という形で今回とは違う実装方法について説明したいと思います。
