2008.2.23 F-siteセミナー「一味違うFlashサイトの作り方」レポートその1

Feb 23, 2008

最近暖かい日が続いていたんですが、三寒四温と言うように、今日は昨日までとは打って変わって真冬に逆戻り。冷たい春風も吹く中、F-siteのセミナーに参加してきました。

F-site毎年二月のセミナーは、ディレクター&プロデューサー向けと銘打っているだけあって、テーマもFlashやASに関するマニアックな話題は少なく、また内容もFlashに関する知識がない人にとってもわかりやすいものでした。

といっても、現場のFlash制作者である自分にとってもかなり有益な話やエピソードを聞くことができました。以下が今回のテーマです。（サイトより抜粋）

今回はプロデューサー＆ディレクターにお勧めの内容です。
Flex、Flash video、Flashサイトの共同作業と従来と一線を画したFlashサイトを制作する上で押さえておきたいポイントをそろえました。
demo1　講師：大雅(50分)「Flex アプリ設計のワークフロー」レポート
 demo2　講師：永井勝則(50分)「初めてのFlash Video」レポート
 demo3　講師：サブリン(50分)「大手Flashキャンペーンサイト構築とその仕事術」レポート

講演のレポートは以下から。長くなったので複数回に分けて掲載します。

「Flex アプリ制作のワークフロー」

Flexとは、FlashをベースにしたRIA（リッチインターネットアプリケーション）を作るためのフレームワークということですが、その中身はUI（ユーザーインターフェース）を構成するMXML（Macromedia Flex Markup LanguageというXML形式のファイル）と、ロジックを生成するActionScript3.0部分に分かれています。（Flex2）講演では、インターフェース部分となるMXMLについての説明がメインとなりました。

インターフェース部分の作成は、コンポーネントというものを用いて、ActionScriptのハードコーディングを行わずにMXMLに独自タグを記述していきます。

この作業、CSSでHTMLを組むときに似ているようです。。実際に、CSSをMXML上に記述すれば、スタイルが適用できます。HTMLと違う点は、あくまでコンポーネントに対してCSSを適用するとのこと。x,y,width,heightはCSSのスタイルではなく、コンポーネントのプロパティになるということです。

またHTMLの場合は、外部CSSファイルも一緒にサーバーにアップロードしなければなりませんが、Flexの場合はビルドした段階でCSS情報が埋め込まれるため、アップするのはswfファイルひとつだけでいいようです。また、スタイルシートのswfを作れば動的にスタイルシート設定を変えることができるようです。

じゃあデザインの乗せ方はどうするの？というと、Flash内に素材を貼って、そのswfファイルをFlexで読み込むそうです。なるほどね。CSSについてはこのへんにしておきます。

FlexとFlashの大きく異なる点は、Flexにはタイムラインという概念がないことです。その代わりに下記の方法を用いて場面遷移を行うようです。

ViewStackコンポーネント

ViewState（mx.status）

PopUpManagerによるポップアップ

HTMLの遷移（メモリリーク問題が解消される）

ViewStatusコンポーネント、ViewStateは、Flashでいうところの、タイムライン上にキーフレーム生成し、フレームごとにコンテンツを用意して、フレーム遷移する感じに似ています。紙芝居のように目的のシーンに遷移する、というイメージでしょうか。

四つ目の、HTMLを遷移させてしまう方法は少し強引な方法ですが、それによってメモリがリークしていく問題は解消されます。メモリを解放できずにブラウザが落ちてしまう、ということがあってはならないページの場合に、有効な方法だそうです。

Flexについてほとんど具体的な予備知識を持たずに講演を聞いたため、間違った情報もあるかもしれません。ご指摘あれば修正していきます。

追記：補足資料について

大雅さんのブログ上に講演資料がアップされていました。実際に講演で見せたスライドの内容、サンプルのソースなどがアップされています。

F-site 発表資料 | blog.taiga.jp

※続いて次のエントリーでは、「初めてのFlash Video」、「大手Flashキャンペーンサイト構築とその仕事術」についてレポートしていきます。

demo1　講師：大雅(50分)「Flex アプリ設計のワークフロー」レポート
 demo2　講師：永井勝則(50分)「初めてのFlash Video」レポート
 demo3　講師：サブリン(50分)「大手Flashキャンペーンサイト構築とその仕事術」レポート