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

コンポーネントスタイルでシーンを扱うには、シーン編集用の「Progression シーンエディタ（以下、シーンエディタ）」を使用します。画面上部ツールバーの「ウィンドウ」の「他のパネル」にある「Progression シーンエディタ」を選択してシーンエディタを起動してください。

シーンエディタは、初期状態ではルートシーンのみが設定されています。ルートシーンとは Web サイトにおけるトップページ、ホームページに相当する要素です。コンテンツを作成する際には、ルートシーン以下に子シーンを設定することでサイト構造を定義することになります。

では、さっそくシーン構造を作成していきましょう。子シーンを作成するには、親シーンとなる項目（今回の場合はルートシーン）のアイコンをクリックしてシーンメニューを開き「ネストされたシーンの挿入」をクリックしてください。

作成された子シーンは、アイコンすぐ右のテキストエリアを編集することでシーン名を設定することができます。今回は左の画像のように設定してください。

以上でシーン構造は作成できました。しかし、シーン構造はあくまで“器”だけ用意した状態なので、実際に画面は何も変わりません。画面を作成するにはキャストを設定する必要があります。

キャストとは関連付けられたシーンで表示させたいシンボルの設定のことを言います。まずはルートシーンに対してキャストを設定してみましょう。ルートシーンの「シーンメニュー」を開き、「シーンにキャストの挿入」を選択してください。

キャストが作成されたら、シーンと同じようにアイコンすぐ右のテキストエリアにキャスト名を設定しましょう。今回は「IndexPage」と設定します。

同じように子シーンに対してもキャストを設定します。今回は左の画像のように設定してください。

キャスト設定が完成したら、その設定を FLA ファイルに反映させます。パネル上部の「書き出し」の「キャストをシンボルとして書き出す」を選択して、キャストに対応するムービークリップ・シンボルを FLA ファイルのライブラリに書き出してください。

以上でシーン作成は完了です。最後はパネル上部の「ファイル」の「保存」を選択して、先ほど作成したプロジェクト内の deploy フォルダ内にある easycasting.xml を上書き保存してください。

• ここまでのプロジェクトデータをダウンロードする。

では、先ほど書き出したムービークリップ・シンボルに対して、表示グラフィックを作成していきましょう。まずはライブラリの assets フォルダにある page_index.gr シンボルを IndexPage シンボル内に設置してください。

同じ要領で page_feature.gr シンボルを FeaturePage シンボルに、page_contact.gr シンボルを ContactPage シンボルにそれぞれ設置してください。

シンボルが作成できたら表示する際のエフェクトを設定していきましょう。エフェクトを設定するにはコンポーネントを使用します。画面上部ツールバーの「ウィンドウ」の「コンポーネント」を選択してください。

コンポーネントパネルを開いたら、「Progression Effects」グループにあるコンポーネントを確認しましょう。キャストとして関連付けられた全てのシンボルに対してエフェクトを適用するには、ここに登録されているコンポーネントをドラッグ＆ドロップで設置していくことになります。その際、エフェクト・コンポーネントは複数を同時に設定可能^※1です。

今回は指定はありませんので、お好きなコンポーネントを IndexPage シンボル、FeaturePage シンボル、ContactPage シンボルに対して設置してください。

以上でムービークリップ・シンボルの作成は完了です。

• ※1 一部のコンポーネントには、特定のコンポーネントと同時に使用できない相性が存在します。

• ここまでのプロジェクトデータをダウンロードする。

ここまでの内容でコンテンツの構造と部品は作成できました。しかし、コンテンツ内を自由に行き来するためには移動するためのボタンが必要です。ここではボタンの作成方法をご説明していきます。

まずは画面上部ツールバーの「挿入」の「新規シンボル」を選択し、IndexButton という名前の新規ムービークリップ・シンボルを作成してください。

作成できたらムービークリップ・シンボルを開いて、前項と同じようにライブラリの assets フォルダの button_index.gr シンボルを IndexButton シンボル内に設置してください。

同じ要領で button_logo.gr シンボルを LogoButton シンボルに、button_feature.gr シンボルを FeatureButton シンボルに、button_contact.gr シンボルを ContactButton シンボルにそれぞれ設置してください。

では、作成したグラフィックをボタンとして機能させるためのコンポーネントを設置しましょう。コンポーネントパネルを開き、「Progression Buttons」グループにある RollOverButton コンポーネントを対象シンボルにドラッグ＆ドロップで設置してください。

設置できたら、コンポーネントを選択した状態でパラメータパネルを開き、navigatePath の項目に移動先を示すパスをそれぞれ以下のようにスラッシュ・シンタックス^※1で設定してください。

• ※1 スラッシュで始まり、シーン名をスラッシュ区切りでつなげたものです。最後がスラッシュで終わらないように注意してください。

以上でボタンは完成です。完成したボタンをステージ上に設置したら、FLA ファイルをプレビューして実際にボタンとして機能するか確認してください。

• ここまでのプロジェクトデータをダウンロードする。

最後に SWF ファイルの読み込み待ちをする際に表示されるプログレスバーを作成しましょう。

前項までは index.fla を編集していましたが、今回は使用しないので閉じていただいて結構です。代わりに preloader.fla を開いてください。

preloader.fla を開くとタイムラインにはレイヤー、フレーム、ラベルなどがすでに設定されている状態となっています。

component レイヤーには、読み込み待ち処理を行うための Preloader コンポーネントが設置されています。このコンポーネントは特に編集する必要はありませんので、このままにしておいてください。

label レイヤーには、load ラベル、complete ラベル、error ラベルの 3 つがすでに設定されています。このラベルは Preloader コンポーネントが読み込み処理を行う際に用いるもので、ファイル読み込み時には読み込み状態に応じて、自動的に load ラベルから complete ラベルの間をアニメーション処理されます。また、読み込み時に何か問題が発生した場合には error ラベルが表示されるようになります。

今回はよくあるバータイプのプログレス表示を作成してみましょう。読み込み待ち時には前述の 2 点のラベル間がアニメーション処理されるので、load ラベルのフレームには 0% 読み込み時の状態を、complete ラベルのフレームには 100% 読み込み時の状態をそれぞれグラフィックで作成してトゥイーンを設定することになります。

表示用のシンボルとしてライブラリの assets フォルダに、progressArea.gr シンボルと progressBar.gr シンボルが用意されているので、対応するフレームに設置したのち、load ラベル点の progressBar.gr シンボルの幅を 0% に設定し、2 点間にトゥイーンを設定してください。

あとは読み込みに失敗した場合の画面を error ラベルのフレームに作成すれば preloader.fla は完成です。

• ここまでのプロジェクトデータをダウンロードする。

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

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