Flash記事
Progression Framework 2 初級編：ActionScriptを書かずにFlashサイトを簡単に構築する
目次
ステップ1：パーツの作成＜サイトコンテンツのパーツをムービークリップに変換する
まずは、サイトコンテンツの各パーツをムービークリップ化します。本記事のサンプルファイルのlayoutフォルダ内には、各ページのデザインのJPEGファイルが入っています。これらデザイン画像を参考にして、各パーツを作成していきます。スペースの都合で、すべてのパーツについて解説することができないので、ここではナビゲーションパーツとインデックスページを作成します。
- メニューの「ファイル ／新規」を選び、Flash ファイル（AS3.0）で新規ファイルを作成します。
図 4. サイズを765×480ピクセル、フレームレートを24fpsに設定します
- メニューから「ファイル／読み込み／ステージに読み込み」を選び、 layoutフォルダ内のprog2_top.jpgを読み込んで配置します。
- 読み込んだ画像を選択して、メニューから「 修正／シンボルに変換 」を選び、グラフィックシンボルに変換してアルファ値を50%にセットします（図5）。
図 5. 半透明にしたデザイン画像を参考にしながら、パーツを作成します
- まずはナビゲーションに必要なボタンパーツを作成します。メインのタイムラインにNavigationレイヤーを作成します。サンプルのpartsフォルダ内にあるbg_navi_main.jpgを読み込んで「ButtonBackground」という名前でグラフィックシンボルに変換します。
- ButtonBackgroundグラフィックシンボルの高さを480ピクセルに変更して、デザイン画像に合わせて配置します。デザイン画像を参考にしながら、ナビゲーションのボタンを作成していきます。ボタンの作成が完了したら、各ボタンを選択して、 ムービークリップに変換します（図6）。
図 6. ボタンのレイヤー構造は図のようにし、ムービークリップに変換します
- ルートに戻ってナビゲーションのパーツをすべて選択し、 「Navigation」という名前のムービークリップにまとめます（図7）。
図 7. ナビゲーション全体を1つのムービークリップにまとめて、レイヤー構造を管理しやすいように図のように変更します
- PROFILE、GALLERY、CONTACTの各ページについても、上記のようにデザイン画像を読み込んで作成していきます。ページのムービークリップのレイヤー構造は自由に作っていただいてかまいません。唯一のルールとして、Progression Framework 2でコントロールするパーツは必ずムービークリップシンボルに変換しておくことです。このルール以外に決まりごとはないので自分のやりやすいように作成してください。すべてのパーツを作成したflaファイルが サンプルのstep1フォルダ内にあるmain.flaです。次のステップからは、このflaファイルをもとに進めていきます。今回のサンプルで使用するムービークリップを全部作成すると、ライブラリパネルは図8のようになります。
図 8. サンプルで使用するすべてのムービークリップ
リンケージ設定（書き出し設定）
先ほど作成したパーツを Progression（ActionScript）で制御できるようにするには、リンケージ設定を行う必要があります。ナビゲーションのCONTACTボタンを例に、リンケージ設定手順を説明します。
- ライブラリパネルのContactButtonを選択して、右クリックメニューのリンケージを選択します。
- リンケージプロパティダイアログが表示されるので、「リンケージ：ActionScriptに書き出し」チェックボックスをオンにします。オンにすると自動で図9のようになるのでそのままでリンケージ設定は終了です。
図 9. リンケージプロパティダイアログで「リンケージ：ActionScriptに書き出し」チェックボックスをオンにします
- サムネイルや各ボタンなどのパーツやコンタクトページ、各写真の詳細ページなども同じようにリンケージ設定を行います（図10）。ただ、Photo1はリンケージ設定を行う必要はありません。
図 10. 図のようにリンケージ設定を行います
