2008.02.23一味違うFlashサイトの作り方

2008.02.23一味違うFlashサイトの作り方 [Edit]

最終更新日：2013.07.02

demo1「Flex アプリ設計のワークフロー」　講師：大雅氏
demo2「初めてのFlash Video」　講師：永井勝則氏
demo3「フルFlashによる大型プロモ制作」　講師：サブリン氏

demo1:Flex アプリ設計のワークフロー

講師：大雅氏
フリーのWebディレクター兼デザイナーの大雅氏に、Flexをディレクター＆プロデューサー向けに分かりやすく、ご説明いただきました。本セミナーをまとめた大雅氏の詳しいレジュメは、F-site 発表資料として、下記でご覧いただけます。スライドのデータ、サンプルデータもダウンロードできます。
http://blog.taiga.jp/archives/2008/02/25/014500/

Flexとは

XML文章のMXML、ActionScript、CSSを使った、RIA(リッチインターネットアプリケーション)のためのフレームワーク。多彩なビジュアルコンポーネントライブラリ、高性能なデータサービスを提供してくれる。
Flexで作れるものは、

HTMLの一部に埋め込むタイプのコンテンツ
フルFlashコンテンツ

いずれも、アウトプットはSWFなので基本的にはFlashと変わりない。
効率よく制作するには、コンポーネントの役割を知っておくことが重要になる。また、要件定義を決めて、設計書を作成し、どういう機能を持つのか、しっかり把握してから制作に取りかかるのがポイントになる。

Flexアプリケーションでのレイアウト

基本は、XML文章のMXMLによるレイアウトコンテナを使い、DOM構造を意識しながら画面レイアウトをすることができる。レイアウトコンテナとは、子コンテナを持つ矩形領域のことをいう。
レイアウトコンテナは種類が多いので、主に使うものの用途を優先して覚えていくと良い。

主なレイアウトコンテナ一覧

Canvas
Box,HBox,VBox
ControlBar
ApplicationControlBar
DividedBox,HDividedBox,VDividedBox
Form,FormHeading,FormItem
Grid
Panel

コンポーネント構造設計

コンポーネントの分割

よく使う機能は部品としてカスタムコンポーネントにする。こうすることで再利用が可能になり、効率よく制作することができる。
そのためには設計の段階で、どれぐらい再利用できるのか検討しておくと良い。
イメージとしては、Flashのシンボルの再利用する考え方に似ている。

SWFの分割

Module
SWFLoader

上記コンポーネントを使えば、外部SWFファイルを読み込むことが可能になるが、分割した分コーディング量が増えたり、テストが手間になるなどのリスクが増える場合がある。
SWFファイルを分割する必要が特になければ、無理に使う必要はない。

画面の遷移方法

Flexには、Flashのようなタイムラインを使った画面遷移の概念がないが、以下の方法を使って実装することが可能になる。

ViewStackコンポーネント
ビューステート（mx.states）
PopUpManagerによるポップアップ
HTMLの遷移（メモリリークのリスクを解消できる）

HTMLの遷移は、SWFを読み込み直すことになるので占有したメモリ容量を解放し、メモリリークによるブラウザの強制終了やフリーズを回避することができる。強引な方法ではあるが、手っ取り早くて効果的な方法。

スタイル概要

Flexの見た目の装飾は、HTMLに使うCSSに良く似ており、CSS2.0のシンタックスに準拠したスタイルシートで定義することができる。
「x」「y」「width」「height」などは、CSSではなく、コンポーネントのプロパティとして調整する点には注意が必要。

スタイルの定義には以下の方法がある。

外部CSS
ローカルのCSS定義（<mx:style>）
StyleManagerクラス
getStyle()メソッドとsetStyle()メソッド
インラインスタイル

また、CSSの種類による優先順位は高い順から以下のようになる。

インラインスタイル
クラスセレクタ
タイプセレクタ
globalセレクタ

デザイン

デザインパーツは、基本的にFlashで作成しておくと、SWFもしくはSWCファイルの読み込みが出来、便利になる。JPEGやPNGなどの画像データ、そのほか動画や音声データなどを直接読み込むこともできるが、そのデータが多いほど、ビルドに時間がかかってしまうという欠点もある。チームで作業する場合は特に気を付けたほうが良い。

Demo2：初めてのFlash Video

講師：永井勝則氏
オライリージャパンから発売された書籍初めてのFlash Video の著者である永井さんに、本書のエッセンスである「楽しく、安価にビデオを作る方法」を解説していただきました。

ビデオは敷居が高いと思われがちだけど…

今回の書籍を執筆するにあたり永井さんがテーマに挙げたのは「ビデオ作品も写真のようにみんなが簡単にBlogなどで投稿できるようになったらいい」ということ。実際のところは、フリーソフトと安価な機材でも、そこそこのクオリティのビデオ作品を制作することが可能。

ビデオ撮影のコツ

カメラは動かさない。ズームもしない(動かすのならばむしろシーンごとにカットで区切る)
三脚を使う(ブレが激減しそれだけでもアマチュアっぽさが消える)
ショットのはじめと終わりに5秒ほどの「とめ」を入れる(あとからの編集時に役立つこと間違いなし)

特殊撮影諸々

グリーンバックを使ったアルファビデオ(背景が透けるビデオ)
連射ビデオ
コマドリ
携帯電話での撮影

映像は編集によって初めて作者の意図が出る

カットの順番を買えることによって最終的なイメージが変わってくる(モンタージュ理論)
カット割りの勉強はDVDを見ながら、気に入ったシーンの分析をノートに書いていくとよい。
「ストーリーは重層的に視聴者の心の中に残っていく」

FLV周りでの注意点

QuickTimeなどで書き出す際には、とにかく高画質にする。ファイルサイズはFLVに変換する段階で圧縮するので、それより前のステップでは気にしない。
AS2でFLVのキューポイントを活用するためにはカスタムクラスを作る必要がある。(EventDispatcher と Delegateを使うと便利)

Demo3：フルFlashによる大型プロモ制作

講師：サブリン氏
お馴染みf-siteの名物司会サブリンさんに、2月初頭に公開されたばかりのフルフラッシュサイト『LISMO』の制作裏話などをディレクター的観点から語っていただきました。

まずはフルFlashに関する一般のイメージをおさらい

フルFlashのメリット

動きがコントロールできる（AJAXより簡単）
音やアニメーションの演出をつけることができる
ユーザーを飽きさせない（ロード待ちとかの演出を付けられる）
キャンペーン向き

フルFlashのデメリット

ロード待ちが長い
アニメーションの演出がうざい
音とかアニメとかうるさいのはイヤ
遷移に時間がかかる
重い

と思われがちですが…

フルFlashのデメリット？？

~~ロード待ちが長い~~ → むしろ待たせ方が悪い
~~アニメーションの演出がうざい~~ → 演出が悪い、もしくは仕組みが悪い
~~音とかアニメとかうるさいのはイヤ~~ → 消せるようにする、注意する
~~遷移に時間がかか~~る → 設計が悪い、スキップできるようにすればよい
重い →　まずは、何が「重い」か整理する。ファイルサイズ？CPU？ユーザー層のことを考えると、多少は割り切っていい場合も。

つまり、Flashに対するネガティブイメージは「設計が悪い」ことから発生するもので、どんな案件でも「クライアントワーク」の段階で、いかに各方面の要望を聞き入れつつ、使いやすいサイトに調整するかが肝心。

今回の『LISMO』では、クライアント、代理店、アーティスト側、アートディレクターなど、様々な立場の人たちとのやり取りが一番大変だった。

コミュニケーションにおける注意点

それぞれの相手の属性に合わせたアイテムを用意する

説明や内容が気になるクライアントには、説明のビッチリ入った仕様書／設計書
絵や雰囲気のことが気になるアートディレクターには、ビジュアルイメージが伝わるデザインカンプやアニメーションのモック（実働デモ）

代理店やアートディレクターのWebコンプレックスを取り払う

企画で大風呂敷広げときながら、できたものが微妙…なんてことにはしない。
「WEBではそんなことはできません」はNGワード
「こんなことやりたいよね」って実際に動いているものをいきなり見せてしまうのも効果的。

実制作で気にした部分

デザインと細かい機能や要望への対応は両立できる。
複雑なサービスの説明は沢山の項目がただ羅列されているだけだったものを、カテゴリ分け＋逆引き方式にして整理し、探しやすくした。
上記構造のために階層が少し深めになってしまうので、パンくずリストを利用して現在地をわかりやすくした。また、画面遷移中でもアニメを割愛し、次の画面に更に移動できるようなスクリプトの仕組みにした。
機能の意図を細かく考えて演出をつける。例えば、小物の表示切替のアニメーションは、対象物が表示されるときにはややリッチに、消えるときには簡易になど、緩急を必ずつける。

チームで働く際に気にした部分

プログラムでやったほうが早いところと、タイムライン上でやったほうが早いところのバランスをとることが大切。タイムライン派なデザイナーも編集しやすいソースを作る。
ファイルの先祖がえりにはくれぐれも気をつける。テンポの速い仕事だと作業中に次の指示が来ることが多いので大事。
音やフォントを埋め込んで毎回パブリッシュしようとすると、マシンによってはかなり重くなるので（遅いマシンを与えられやすい）プログラマが嫌がることがある。いつも同じようにするのではなく、みんなが幸せになるワークフローを都度考え、調整する。

お楽しみじゃんけん大会

今回も参加者の方が携わられた本を提供いただきました。また、じゃんけんの対象にはなりませんでしたが、Demo2：初めてのFlash Videoの書籍を発行しているオライリー社より、「オライリー書籍割引クーポン」が参加者全員にプレゼントされました。

伊藤のりゆきさん、株式会社毎日コミュニケーションズさんより

1ランク上の技を身につけるFlashの強化書　計 7冊

SIHOさんより

世界一わかりやすいFlash CS3　2冊

二次会

二次会は毎度おなじみ新宿西口石狩川。参加者ひとりひとりの「事故」紹介を交えつつ、Flash談義に花を咲かせました。三次会以降も例によって有志によって続けられ、最終的には少人数で朝までカラオケになった模様。

F-site