前回はProgressionのインストールをおこないました。今回からは，実際にWebサイトを制作していきましょう。サンプルを用いながら説明していきます。
最初の制作スタイルとして「クラススタイル」を取り上げます。なお，「クラススタイル」については今回と次回の2回に分けて紹介します。前半の今回は，Progressionからプロジェクトを作成し，第2階層の一部分までの2ページ分を制作してみます（※1）。
- ※1
- 筆者の制作環境は，Adobe Flash CS4です。また，クラススタイルの制作はFlashDevelopの使用を前提として進めますが，FlashDevelopは必須ではありません。他のエディタや，Flash単体での作業も可能です。
プロジェクト作成
それでは，実際にプロジェクトを作成して開発の初期設定を行っていきましょう。
1．Progressionプロジェクト起動
Adobe Flashを起動します。画面上部にあるツールバーの[ウィンドウ]→[その他のパネル]→[Progression プロジェクト] をクリックしてください。
図1 Progressionプロジェクトを起動
2．プロジェクトパネル
Progressionプロジェクトを起動させると，プロジェクトパネルが表示されます。ここで，プロジェクトの作成や管理，各種設定を行っていきます。
まずは，プロジェクトパネルの左上部にある，[新規作成] をクリックしてください。
図2 プロジェクトパネル
プロジェクトの[新規作成] をクリックすると，作成するプロジェクトの初期設定を決定する画面が表示されます。
3．プロジェクト基本設定
プロジェクトの基本事項を設定していきます。[プロジェクト名]は任意で構いません。今回は「Project_gihyo」としておきます。[書き出し先]の設定も任意の場所で構いません。
続いて，制作スタイルを選択します。[種類] をデフォルトの「コンポーネント」から「クラス」へ変更してください。
今回はWebサイトを制作しますので，[プレイヤー] の項目は「Flash Player 10」を選択しましょう（「Flash Player 9」を選択しても構いません）。
[環境設定] はデフォルトの「Webコンテンツ」のままで問題ありません。選択してみれば分かるように，Progressionは様々な制作のコンテンツやスタイルに対応できるようになっています。
図3 プロジェクトの基本設定
4．プロジェクトその他の設定
基本設定が完了したら，設定画面の上部にある[Action Script] のタブを選択してください。そして，選択した[Action Script] の画面の下部の[その他の設定] の中にある，「FlashDevelopに対応させる」にチェックを入れてください。
以上で設定は完了です。今回，上記以外の設定は全てデフォルトのままで問題ありません。
設定が完了したら，環境設定画面の右下部にある「作成する」ボタンをクリックしてください。
図4 プロジェクトを作成する
5．プロジェクトのテスト
プロジェクトのテストとプロジェクトを作成すると，プロジェクトパネルが以下のように表示されます。プロジェクトパネルにプロジェクト[Project_gihyo]の主要なファイルが表示されます。今後プロジェクトの管理はプロジェクトパネルでも行えるようになります。
では，作成したプロジェクト[Project_gihyo]が問題無いかテストしてみましょう。プロジェクトパネルの[プロジェクトをテスト]ボタンをクリックしてください。FlashのログにProgression関連のログが出れば成功です。
図5 プロジェクトソース一覧
