2009.01.31 F-site的MAX [Edit]

最終更新日：2013.07.02

demo1「Flash CS4 言いたい放題」　笠居トシヒロとゆかいな仲間たち
demo2「Flashの勉強・解析・サイトについて」　trick7　寺井周平氏
demo3「Flash・Flexのテキスト周りの進化について」Adobe　Nat McCully氏
ｄemo4「オレら的Flash Design」　Ralph Hauwert氏 ＆ Erik Natzke氏

あいにくの雨の中にも関わらず、160人の会場に163人が参加した、F-site的MAX！
いつも以上に内容の濃いdemoが続きましたが、中でもカナダのFlashユーザーグループ「FITC(Flash in the can..)」のお二方のdemoは、「Flashでここまでやっちゃうの？？？」と驚きまくり。

demo1: Flash CS4 言いたい放題

笠居トシヒロとゆかいな仲間たち
MAXよりも豪華(!?)なメンバーによるFlash放談会。常日頃からFlashに触れているヘビーユーザーの視点から、CS4の新機能について色々と語っていただきました。

新UI

  • CS4では人間工学的に考えられて初期設定のUIが大きく変更された。特にプロパティインスペクタが右に移り大きくなったのには驚き。
  • 他にもワークスペースのリストが「デザイナー」や「アニメーター」など色々と存在しているが、変更に戸惑っている人は、無難に「クラシック」を選択しておくのがオススメ。

新モーショントゥイーン

  • 従来のモーショントゥイーンは「クラシックトゥイーン」という名前に変更され、新概念のモーショントゥイーンが追加された。
  • モーションパスの設定も自動で行われるので軌跡の編集が簡単に。
  • モーションエディタを使って、各プロパティに個別のイージングをつけられるところが便利。
    • ただし、カラー効果はひとつのトゥイーンにつき、一種類しか使えないので注意が必要。(「詳細」を使えば細かい調整も可能だが、それぞれの数値の意味するところを把握するのが大変…。)
  • 雑感としてアニメーター向けというよりはモーショングラフィック向けの進化のような気がする。
  • 新しいモーショントゥイーンはパブリッシュ時に「トゥイーンオブジェクト」として書き出され、AS3ならばスクリプトから制御することもできる。

Flash Player 10

  • 今回のプレイヤーはかなりいい仕事している。
  • 昔から要望を出していたOpenGLなどのハードウェアアクセラレーションが導入されたので劇的に描画速度が上がっている。
  • Flash Player 9以前では全く動かなかったフルHD、30FPSのコンテンツが余裕で動いたことも(しかもMACで！)

3D機能

  • 実はいわゆる2.5Dであり、完全な3Dオブジェクトを使いたい場合はPaperVision3Dなどを使用してほしいというスタンスのように感じられる。
  • オブジェクトの位置はプロパティインスペクタから変更できるが、回転は変形パネルから設定。
  • 3D機能は3D関連の機能を少しでも触るとオンになるが、そうでない場合は、モーションのプロパティから3D回転の機能をオンにする必要がある。
    • ちなみに、スクリプトの場合は一度Zを0と設定すると自動的にオンになる。おまじないみたいなもの。
  • オブジェクトの重なり方は3次元の座標よりも2次元的なレイヤーの重なりが優先される。だから、2.5D。スクリプトの場合は、ディスプレイリストの順番を手動で入れ替える必要がある。
  • 実は「カメラオブジェクト」という概念がないから、消失点が動くようなアニメーションが作れない。（スクリプトでは一応動かすことが可能、ただしプロパティに辿り着くまでが長い）

ボーン/IK 機能

  • ボーンには、ムービークリップに埋め込むタイプとシェイプに埋め込むタイプの2種類がある。
  • ボーンの可動範囲を設定したり、ピストン運動を容易にしたりするオプションもアリ（やっぱりピストン運動はアニメーターにとって重要らしい）
  • シェイプに埋め込むタイプはボーンとシェイプの各ポイントの影響範囲を、バインドツールを使って決められる。

最後に一言ずつ

野中：
クルクルとパースをかけてオブジェクトを回すASが簡単になったのはいいですよね。UIは自分の好きなようにカスタマイズしたほうが無難でしょう。

A.e.Suck：
新しいトゥイーンは、キーフレームが一つしかないので、動きの途中でシンボルを差し替えるなど、今までできていたトリックができなくなっていることに注意が必要です。そういった場合はクラシックトゥイーンを使うようにしましょう。

森：
オーサリング時に作ったものをスクリプトに持っていきやすくなったのは評価できます。 ただ、そのスクリプトのマニュアルがローカルには簡易版しか保存できないので、そのあたりをアドビさんには改善してほしいです。

青池：
CS4、何に使うのかなぁ…。いろいろといいのですが、まだ戸惑いの方が多いです。
魅力的な部分も多いのですが、使い道がまだ見えていないのです。

笠居：
これからはAS3が必須になりますね。ボーンとか、3Dを使った時点でAS3でしか動かなくなるし。

佐分利：
個人的には、アプリの安定性もなかなか高くて気に入っているバージョンです。

demo2 : Flashの勉強・解析・サイトについて

trick7　寺井周平氏
セミナーアンケートでのリクエストを受けて著名Flashブロガーの寺井氏にデモをお願いし、制作に対するスタンスについて語っていただきました。

Flashはたのしい

  • ネタがあるのがたのしい
  • ネタは日々の生活の中にたくさんある
  • 自分で模索していけるのがFlashの面白さ。
  • ネタを見たときの自分の感情を大事にする。
  • いつもFlashにならないか考えている。
  • いつもメモ帳を持ち歩きメモを取る。
  • そして記憶の中に残しておく。
  • とにかくネタを見つけたら気軽に作れば良い。

Flashで考える

  • 電車の中で見たコーヒーカップの広告を見てひらめき！！
  • すぐに電車の中でノートパソコンを開きコーディングをした。
  • ※なんてことない丸を入れ子にしたムービークリップを作りパラメーターを変えるとその丸いムービークリップがそれぞれ回る。
  • コーヒーカップの軌跡がわかる。そういう軌跡を「サイクロイド曲線」という。 ← 新たな興味につながる。

インスピレーション

  • ネットを見ているとインスピレーションを受ける写真がたくさんある。（動かしたくなるような写真ありますよね？）
  • ある日ネット写真を見て動かしたくなった。日曜日の朝にコーディングをして作った。
  • 大事なのはフラッシャーだからじゃなく、普通の人から見た視点で感じること。それがチャンス！！

ネタ系Flash判断基準

  • 喜んでくれるか？
  • Flashのプレゼンス（存在）をあげることができるか？
  • 自分なりに技術的な課題設定ができるか？

とにかくたのしんでやる！

  • ネタを見つけて作ることを諦めない！
  • アイデアがあっても作れないと意味がないからね。

作り方はひとそれぞれ

  • MEDIASやホネホネクロックを見て自分はタイツトレースで立ち向かう。
  • 自分自身が日曜日の朝一に全身タイツでビデオ撮影
  • それをトレースしてFlashで動くようにコーディング。
  • まず、やってみる！諦めないこと！

インスピレーションはビジュアルだけにやってくるのではない

  • プログラムの組み方についていも普段の生活の中で気づくことがある。
  • 例えば客席でマスゲームをやりたいときに、どういう命令をすれば効率的なのかを考える。
  • 方法1：番地に分ける？ → 指揮者が疲れる。
  • 方法2：上からプロジェクション投影して各自に判断させる？ → 自分のことは自分だけ。これってオブジェクト指向？
  • そういうことを考えているとScriptでいかに効率的に指示できるかどうかの訓練にもなる。

素敵なサイトを見て勉強する

  • dajistudioのトゥイーンのさせ方 （参考：dajistudioサイトの動きに注目した記事）
  • amanaのスクロールの止め方
    • エスカレーターと共通点がある。
    • 平らなエスカレーターだと降りるときに突っかかる。
    • でも普通のエスカレーターは降りるときに遅くなりスムーズに降りることができる。
  • 終わり感を身体が求めてる。それが気持ち良い。当然目にしても気持ちが良い
  • 身体の持っている気持ち良さを観察して分析して理由を見つけてそのエッセンスを学ぶ。

Flashを解析する

  • Google Analytics Tracking for Flash なら簡単に解析できる。通称「がっふる」
  • 単純にFlash内のアクション解析
  • 自分のインターフェイスが本当に効いているのか？比較実験。
  • Flashエフェクトの効果測定やボタンクリック率などを調べてみる。
  • ブログパーツ貼り付けコードのコピー方法をどちらを選んだか？までわかる。スゴイ！！
  • 自分が良いと思っていても世に投げてみないと結果はわからない。
  • 調べてみた結果作り手の常識が通じないということがわかる。
  • 作り手側だけじゃなく見る側の気持ちを理解しやすい。

※Google Analytics Tracking for Flashについては、Media Technology Labsをご覧下さい。

demo3: Flash・Flexのテキスト周りの進化について

Adobe　Nat McCully氏
InDesignの元開発者のひとりで、最近は主にFlashプラットフォームのテキストエンジンの開発をしているNat氏にFlash Player 10で搭載されたテキスト周りの新機能について解説を頂きました。

「テキストレイアウトエンジン(TLE)」ついて

  • Flash Player 10の新しいテキストエンジン
  • サンプル：ニューヨークタイムズのIHTニュースリーダー

テキストレイアウトフレームワーク(TFL)の概念

  • 100％ ActionScriptのツールキット
  • flash.text.engineの新機能を充実
  • 高度なレイアウトの為の充実したAPI
  • 世界の言葉（文字）を正しく組み版できる
  • 従来のTextFieldはそのまま使用可

テキストレイアウトフレームワークを利用した日本語縦組みレイアウトのデモ。

  • 以下のいずれでも設定可能。
    • Flash CS4
    • Flex（Gumbo）
    • XMLマークアップ

テキストレイアウトフレームワークについてのまとめ

  • Flash Player 10のテキストエンジンは大幅に機能アップ
  • 英語（欧文）以外の文字を入れるならTextFieldではなくて、FTEとTLFをつかいましょう
  • デザインの時はFlash CS4のテキストレイアウトパネルで
  • Flexでの開発の場合はGumbo compornentsを使用
  • 奥深いところまで行くならActionScriptのレイアウトAPIがお友達

参考資料
Adobe Labs からコンポーネント・サンプル等のダウンロード

demo4: オレら的Flash Design

FITC Ralph Hauwert氏 ＆ Erik Natzke氏
北米で最も大きなデザインカンファレンスのひとつ、FITC。今回はそのFITCのメンバーお二人によるデモをAdobeの西村、太田両氏のご協力のもと行っていただきました。

Ralph Hauwert氏
Papervision3Dのコアメンバーのひとり
Earthmineというプロジェクトにも関与

  • 2Dバンプマッピングのデモ
  • Papervision3Dの次期バージョンであるPapervisionXのデモ

Erik Natzke氏
Flashのプログラミングを利用して絵を描かれるグラフィックデザイナー
最近はPaint By Numberと読ばれているフレームワークを使って、いろいろなアート表現を生成している

  • ActionScriptでリボンを合成して画像を生成する作品のデモ
  • 上記作品の制作プロセスについてのお話
  • 最近の仕事として、40インチ四方の大判の紙にActionScriptで生成したアートワークを出力する作品の紹介

二次会

FITCのメンバーも合わせて(40人収容の座敷に)50人という大宴会！
密接度＆盛り上がりの程が垣間見れる映像がFITCから届けられました！
http://blog.fitc.ca/post.cfm/japan-loves-fitc

レポート作成
小野田智、セガナオキ、堀江真治
写真
桜井和貴

（敬称略）

その他の記事