第7回目と第8回目では，2回に渡りコンポーネントスタイルでの制作を紹介していきます。それでは，早速制作していきましょう。
プロジェクト制作
それでは，コンポーネントスタイルのプロジェクトを作成して開発の初期設定を行っていきます。
1．Progressionプロジェクト起動
Adobe Flashを起動してください。画面上部にあるツールバーの[ウィンドウ]→[その他のパネル]→[Progression プロジェクト] をクリックします。
図1 Progressionプロジェクト起動
2．プロジェクトパネル
Progressionプロジェクトを起動させると，プロジェクトパネルが表示されます。ここで，プロジェクトの作成や管理，各種設定を行っていきます。
それでは，プロジェクトパネルの左上部にある，[新規作成] をクリックします。
図2 プロジェクト作成
プロジェクトの[新規作成] をクリックすると，作成するプロジェクトの初期設定を決定する画面が表示されます。
3．プロジェクト基本設定
プロジェクトの基本事項を設定していきます。
[プロジェクト名]は任意で構いません。今回は「Project_gihyo_comp」としておきます。[書き出し先]の設定も任意の場所で構いません。
続いて，制作スタイルを選択します。[種類] はデフォルトの「コンポーネント」のままで結構です。
今回はWebサイトを制作しますので，[プレイヤー] の項目は「Flash Player 10」を選択しましょう（「Flash Player 9」でも構いません）。
[環境設定] はデフォルトの「Webコンテンツ」のままで結構です。選択してみれば分かるように，Progressionは様々な制作のコンテンツやスタイルに対応できるように設計されています。
設定が完了したら，「作成する」ボタンを押してプロジェクトを作成しましょう。
図3 プロジェクトの基本設定
4．プロジェクトのテスト
プロジェクトを作成すると，以下の図のようにプロジェクトパネルにプロジェクト[Project_gihyo_comp]のファイルが表示されます。今後プロジェクトの管理はプロジェクトパネルでも行えるようになります。
それでは，作成したプロジェクト[Project_gihyo_comp]が問題ないかをテストしてみましょう。
プロジェクトパネルの[プロジェクトをテスト]ボタンを押してください。Flash のログにProgression関連のログが表示されたらテスト成功です。
図4 プロジェクトソース一覧
サンプルサイト制作
はじめに，今回のサンプルファイルを以下からダウンロードしましょう。
サンプルサイト用のフォルダからFlaファイル（index.fla）を，作成したプロジェクト[Project_gihyo_comp]フォルダのFlaファイルに移動（上書き）します。サンプル用のFlaファイル（index.fla）には，今回のサンプルサイト作成のために必要な画像データなどが用意されています。
図5 index.fla のコピー
制作を始める前に
実際に制作を始める前に，今回制作するサンプルサイトの概要について説明します。
今回用意したサンプルサイトは「PET GALLERY」という動物の閲覧サイトです。閲覧サイトやギャラリーサイトといったときに，どういったイメージをお持ちでしょうか。様々あると思いますが，今回は画像のスライドコンテンツをサイト内に盛り込んでいます。サイトの構成は，「トップ」ページから「サイトについての説明」ページ，「動物の写真一覧」ページに遷移できます。「動物の写真一覧」ページから写真を選択すると拡大表示され，「動物の詳細」ページが表示されます。「動物の詳細」ペー ジでは，左右に遷移でき，写真がスライドショーのように表示されます。
図6 サンプルサイト構成図
サイトの構成については以上です。それでは，実際にサイトを制作していきましょう。コンポーネントスタイル前半の今回は，「トップ」ページと「サイトについての説明」ページを作成していきます。
