• ホーム
• 購読申込
• ヘルプ
• アーカイブ

Progression ─ Flashサイト構築が加速する
充実のフレームワーク

Part.2　Progressionによるサイト構築の実践：パーツの作成編

前回に引き続き、Edge Newsletter を読まれている Flash デベロッパの方々にぜひ活用していただきたいフレームワーク「Progression」について解説していきます。

Flash によるサイト制作は、その規模と構造にもよりますが、 より良いユーザ体験を提供するために大抵の場合は多くの時間と労力がかけられるものです。 Progression は Flash サイト制作が、よりシンプルかつスピーディーに行えるようになるフレームワークであり、以下の 3ステップで Flash による Web サイト構築をすることが可能になります。

1. パーツ（クラス）を作成
2. サイト構造を XML で記述
3. fla ファイルに progression コンポーネントを配置

画面遷移の処理が挙げられていませんが、それは Progression が XML ファイルに記述した内容を解析して自動的に対応してくれるのです。言葉で説明するよりも実際にサイトを構築しながら説明した方が分かりやすいので、8月4日～5日に沖縄コンペンションセンターで開催された「CSS Nite in OKINAWA」のセッションで使用したサンプルサイトを Edge 誌面上で構築していきましょう。

今回制作するサンプルサイトは右図のようなビジュアルをもつ Flash サイトです。サイトの構造は以下の通りです。このような構造をもつサンプルサイトを Progression を使用して作成していきます。

パーツ（クラス）を作成

まず最初のステップとして、パーツ（クラス）を作成していきます。具体的には、サイトのパーツを MovieClip シンボルで作成し、プリセット*1 を設定します。そして各パーツのプリセットに対応したフレームラベルを追加して、アニメーション（動き）を付けていきます。

使用するプリセット

今回使用するプリセットは以下の 4種類です。それぞれのプリセットの詳しい説明はプリセットリファレンスをご覧ください。

• InOutMovie
• RollOverButton
• FileLoader
• CastMovieClip

１.パーツを Photoshop から Flash へ取り込む

ダウンロードしたファイルをご覧ください。各ページごとの psd ファイルは design ディレクトリに入っています。

• index.psd
• about.psd
• gallery.psd
• contact.psd

なお、各写真のページは外部 jpg ファイルを読み込んで表示するため psd ファイルはありません。

各ページは Flash CS3 の新機能を使えば手早くインポートできます。Flash CS3 に psd ファイルを直接読み込むには、「ファイル」メニューの「読み込み」>「ステージに読み込み」を選び、psd ファイルを指定します。その際に、下図のようにレイヤー毎に読み込み方法を指定できますので、パーツごとのフォルダをムービークリップにして、テキストは更新するもの以外は画像で読み込むように設定します。

次に下図と同じように設定をしたら「OK」ボタンを押して、psd ファイルからパーツをインポートします。

他の3ファイルも同じようにインポートします。すべてインポートし終わったらムービークリップの中身を微調整して、パーツの取り込みは完了です。このように完成したファイルが、ダウンロードしたファイルの「1_1ディレクトリ」にある「main.fla」です。

２. 各パーツにプリセットを設定

MovieClip シンボルのリンケージ設定を開いて、基本クラスにプリセット用のクラスを記入することでプリセットを設定します。各プリセットを指定するには下図のように指定します。

しかし手動で設定していては大変なので、Progression と一緒にインストールされた拡張機能「リンケージを一括設定する」を使用して、すべてのパーツに一括でプリセットやリンケージ名を設定します。「リンケージを一括設定する」は、MovieClip のシンボル名でリンケージの設定などを判断して設定するので、以下のように修正します。

クラス名_設定する基本クラスの接尾辞

それぞれのプリセットに対応する接尾辞は以下のとおりです。

Navigation にはCastMovieClip、Navigation 内のボタンと Gallery の中のサムネイルボタンにはRollOverButton、Gallery の PhotoLoader にはFileLoader、その他の各ページ用のパーツにはInOutMovieをそれぞれ指定します。

シンボル名の変更が完了したら、「コマンド」メニューから「リンケージを一括設定する」を実行します。下図のウィンドウが出てくるので、そのままの設定で「適用する」をクリックします。

すると結果が出力ウィンドウに表示されます。

ここでリンケージ設定に間違いがないか、出力ウィンドウで確認します。間違いがなければ、すべてのパーツのリンケージ設定が完了です。リンケージ設定が完了したファイルが、ダウンロードしたファイルの「1_2ディレクトリ」にある「main.fla」です。

この「リンケージを一括設定する」コマンドは、Progression だけではなく汎用的に使うことができるコマンドです。ここで簡単な特徴を説明しましょう。まず「Hoge_inout」というシンボルに対して実行すると、下図のようにリンケージ設定が行われます。

「シンボル名がクラスの命名規則に準拠していなければ適用しない」にチェックがある場合は、大文字から始まるシンボル名にしか適用されません。また、下図のようにディレクトリの中にムービークリップを入れて実行すると、クラスの指定がディレクトリ構造と同じようになります。

※ディレクトリ名が大文字から始まる場合には適用されません

３. 各パーツにアニメーションを設定

先程プリセットを設定したパーツにアニメーションをつけていきましょう。アニメーションにはプリセット対応したフレームラベルを付ける必要があるので、キャストユーティリティーを使用して、プリセットに対応したフレームを追加します。

「ウィンドウ」メニューから「その他のウィンドウ」>「 キャストユーティリティーを選択」を選ぶと下記のウィンドウが出現します。

各プリセットに対応したフレームラベルを追加するには、アニメーションをつけるムービークリップを編集状態にします。キャストユーティリティーウィンドウにあるプルダウンメニューから「InOutMovie」を選択し、「ラベルレイヤーを挿入する」をクリックします。すると、下記のようにフレームラベルが挿入されます。

これで表示時には in から stop までのフレームアニメーションが実行され、消去時には stop から out までのフレームアニメーションが実行されます。このラベルの位置は自由に変更することが可能ですので、アニメーションの時間に応じて長さを変更してみてください。

なお、Navigation だけはページごとに表示位置が異なるため、違うアニメーションをする必要があります。その分だけ、フレームラベルとアニメーションを作成しましょう。

このような感じでシーンとイベントに合わせてフレームラベルを作成して、アニメーションをつけていきます。アニメーション設定が完了したファイルは「1_3ディレクトリ」の「main.fla」です。

４. 各ボタンのリンクの設定

写真のサムネイルとナビゲーションのボタンにリンクを設定します。AboutButton_robtn のムービークリップを編集状態にすると、以下のようなフレームになっています。

ASレイヤーを選択してアクションパネルを開きます。さらに下記のように記述します。

goto = "/index/about";

こうすることで、このボタンはアバウトページへのリンク機能を持ちます。続けて、他のボタンにもリンクを設定していきましょう。設定は下記の表を参考にしてください。

これでボタンの設定が完了しました。ボタンの設定が完了したファイルは「1_4ディレクトリ」の「main.fla」ファイルです。ここまででパーツの作り込みが完了しました。

今回の解説はここまでとしましょう。サンプルファイルを参考にしながら、ご自身でも Photoshop CS3 や Fireworks CS3 でサイトデザインを行い、psd ファイルを上記の方法で取り込んでみてください。次号では次のステップとして、今回用意したパーツにどのような動きを持たせるかを XML ファイルに記述していく方法。そして第三のステップとして、パーツと XML をProgression で関連づける為にステージ上に Progression コンポーネントを配置する方法を解説します。

‹ 戻る