littlepad blog

「Adobe FLASH PLATFORM CAMP Tokyo」レポート

2010年4月7日 00:45

遅れましたが…、「Adobe FLASH PLATFORM CAMP Tokyo」のレポートです。

CS5 の発売を控え、FLASH の新機能や最新事情に加え、豪華ゲストによるセッションなど、無料とは思えない充実した内容でした。
ハイレベルすぎるセッションもありましたので、レポート内容にムラがあるのはご勘弁を。
ちなみに当日の模様は公式サイトにて、高画質ストリーミング配信されています。通訳入りなので安心して視聴できますよ！

当日のセッションは以下の通り

  • What’s new in Flash CS5 and Flash Builder 4　
    Flash CS5とFlash Builder 4の新機能　By Lee Brimelow
  • Ralph Hauwert : Skunkworks　
    スカンクワークス（特命チーム）　By Ralph Hauwert
  • Building iPhone applications using Adobe Flash CS5　
    Adobe Flash CS5を使用したiPhoneアプリケーション開発　By Mike Chambers
  • スペシャルセッション　By 深津 貴之氏
  • Welcome to the Sideshow　
    サイドショウへようこそ　By Mario Klingemann
  • Latest ActionScript Topics with Flash Professional CS5　By 新藤 愛大氏
  • Art of Play　
    アート オブ プレイ　By Erik Natzke

What’s new in Flash CS5 and Flash Builder 4
「Flash CS5とFlash Builder 4の新機能」

By Lee Brimelow

■Action Script の編集機能の向上
デフォルトのスクリプトエディタはどうも使いづらく、ガッツリとスクリプトを書く際には外部のエディターを利用している人も多いと思いますが、今回大幅に改善されているようです。

  • コードヒントをカスタムクラス向けに提供
  • import 文の自動挿入
  • 必要なヘルプ

■新しいテキストエンジン　TLF（TEXT LAYOUT FRAMEWORK）
この TLF は様々なオプション設定が可能で、例えば、複数のテキストボックスによるリンク機能。複数のボックスをリンクさせることにって、新聞のようなブロックレイアウトも可能になる。
また、テキストフィードのカラムプロパティを変更することで、自動的にカラムに分けてくれたり、テキスト方向（横、縦）の設定も可能。もちろん編集可能なテキストフィールドなので、縦書きでも動的にテキストを変更することも出来る。
また、従来のテキストは、クラシックとして選択可能。

■描画ツール（DECO）
JavaScript で書かれた描画ツールで、高度な描画が可能。
Building Brush や Tree Brush などのパターン描画ツールが用意されている。

■OPEN XFL FORMAT
ファイル保存時、複数のフォーマットが選択できる

  • シングルバイナリファイル（fla）
  • 非圧縮ドキュメント
  • XFL

XFL で保存すると、FLASH ライブラリ内の画像がライブラリフォルダの中に画像が保存される。例えば、その画像を修正して保存すると、自動的に FLASH 内の画像も修正される。基本的に XML ファイルなので、簡易なソースコントロールが可能になる。

■CODE SNIPPETS
これを使うことにより、簡単にアクションパネルに挿入して使用できる。
独自のコードもスニペットとして登録も可能。

■フォント管理（FONT ENBEDDING PANEL）
組み込むフォントを簡単に管理が出来る

■ビデオの向上
ビデオをステージ上で再生しながら、リアルタイムの作業が可能
FLASH 内でのキューポイント追加も可能

■FXG へのエクスポート
SVG に似たフォーマット
イラストレータからも同じことが出来る

■iPhone へのエクスポート

Ralph Hauwert : Skunkworks
「スカンクワークス（特命チーム）」

By Ralph Hauwert

■Skunkworks

  • すべてうまくいかなくてもいい
  • うまくいけばすばらしい
  • うまくいかなくてもよい経験となる

■影響

  • コンピューターサイエンスなどの他分野
  • デモシーン　など

■skunkwork の内容は仕事につながっている
・Demo Univers
・Anne Frank – Virtual House -（まだ未公開）
・Let it Bloom　http://www.letitbloom.com/#ralph
・Milky Ball　http://www.unitzeroone.com/labs/vertexmap/

■Triangle3D
新しい 3D のエンジンを開発し始める。
この 3D エンジンを突き詰め方がすごい。
同じ FLASH とは思えないぐらい滑らかに動く液状のオブジェクト。

正直このあたりから説明できません！ こちらにて動画をご覧ください！
http://adobefpc.jp/#session2

レポートになってない…、ですね。

Building iPhone applications using Adobe Flash CS5
「Adobe Flash CS5を使用したiPhoneアプリケーション開発」

By Mike Chambers

■事例

  • ZAP
  • モアイまわし
  • スペアロイド

■iPhone Developer Program の登録

  • デスクトップ上でのテスト
  • ipaフォーマット
  • iPhoneへ同期

■パフォーマンスのコツ

■iPhone ≠ PC
iPhone はデスクトップではない！ ということを念頭におかなくてはいけない。
スクリーンサイズ、UI、パフォーマンスなど全てが違う。
両方でうまく動かすことを考える。

■AS3 の最適化
AS3 Performance Testing harness
http://www.gskinner.com/blog/archives/2009/04/as3_performance.html

■Simple Game Framework
http://github.com/mikechambers/Simple-Game-Framework

■レンダリング
ブラウザでのプレイヤーの場合、ソフトウェアレンダリングだが、iPhoneの場合は、デバイスのハードウェアを使ってGPUでレンダリングをさせる。
処理の流れとしては、

ソフトウェア（プレイヤー）でレンダリング
↓
ハードウェアにアップロード
↓
ハードウェアで動かす

以下の設定により、ハードウェア加速が有効になる

cashAsBitmap:Boolean = true;

これにより、DisplayObject に変更があれば、再レンダリングし、GPU に再アップロードされる。

■その他、パフォーマンスのポイント

  • 大きいエリアでレンダリングするとパフォーマンスが落ちる
  • 再描画エリアを減らすことでパフォーマンスを向上させる
  • 基本的にはハードウェアレンダリングする
  • インスタンスは最小限に抑える
  • 新しいインスタンスはパフォーマンスを落とす（new Hoge(); は極力減らす）
  • EnterFrame の方が Timer よりパフォーマンスが良い。但し、EnterFrame の多用は NG

スペシャルセッション

By 深津 貴之氏

■FLASH でプロトタイプを作る

  • ビルト&スクラッチが楽
  • オンラインでのベータテスト
  • 他環境への移植が楽　など

■UI for Smart Phone
プロトタイプはフォトショップで作らない

  • モニタとデバイスは解像度が違う
  • 文字タイプが実サイズでなければ試せない

よって紙で考える

■タッチ UI

  • マウスがないのでロールオーバーがない
  • タッチエリアとして 44px ぐらいないと安定して押せない

■Various Input
マルチタッチ、電子コンパス、カメラ、マイク、三軸加速度センサー

■Less Than More
可能な限りシンプルな機能で

Welcome to the Sideshow
「サイドショウへようこそ」

By Mario Klingemann

写真がないので、面白さ半減ですが、こちらの動画と合わせてどうぞ。
http://adobefpc.jp/#session5

  • 新しいアイディア
  • モノをつくること

これを追求している。

■hitTest メソッドを使ったオブジェクトのランダム描画
文字をマスキングすることで、その文字の周りにオブジェクトを配置する。
オブジェクトが配置されればされるほど、文字が浮かび上がるサンプル。
背景にビットマップを配置して、そのピクセルカラーを取得して描画する。
これを応用したクリップアートを利用したランダム描画のサンプルも面白かった。

■細分割 subdivision
多角形を裁断するサンプル。
これも背景のビットマップの色をサンプリングして、切り刻む度に絵が浮き出てくる。
これを応用して、人間がどの部分に興味があり、詳細を描画させる部分なのかをコンピューターに判定させる。
人間が何を重要と捉えるかということを境界線検出で行ってみる。
エッジフィルタを使ってみるが、そんなに精度が高くない。

次に、画像を四角に裁断し、四角の中のエッジの量が80％以上の場合、その四角を細分割する。その中の平均的な色を表示する。

ボロノイ図（ボロノイダイアグラム）：スペースを分割する技術

これら、5年分の作業が詰まっているコードをオンライン化している
http://code.google.com/p/quasimondolibs/

■細分化によって生まれた技術
コラージュ、これがすごい！
多角形の中に、自分がとった写真やグラフィックを配置。パターンとターゲットイメージを足していき、回転させたり、拡縮したりして、直前よりいいマッチングが見つかれば、その部分を置換していく。

Latest ActionScript Topics with Flash Professional CS5

By 新藤 愛大氏

FlashPlayer 10.1 と AIR2 で追加された機能についての紹介でした。

■マイクから入力波形データがとれるようになった

microphone.addEventListener(SampleDataEvent.SAMPLE_DATA,sampleDataHandler);

■補足施忘れた例外をまとめてキャッチ出来るようになった

loaderInfo.uncaughtErrorEvents.addEventListener(UncaughtErrorEvent.UNCAUGHT_ERROR,uncaughtErrorHandler);

■SocketServer
これにより、ソケットの待受が出来るようになった。
以前、AIR を利用したアプリを使用した際、結構強引な手法で実現したのを覚えていますが、これで AIR 間の通信も楽チンに！

■外部ネイティブアプリの起動が出来るようになった
これも以前の AIR 案件で実現出来ずに泣いた要件でしたが、AIR2 から実現出来るようになりました。AIR2 すごい！

Art of Play
「アート オブ プレイ」

By Erik Natzke

エリックさんは元々グラフィックデザイナーとしてクライアントワークを行っていたそう。しかし、自分のビジュアルのアイディアをなかなか実現出来ないことに不満を持っていて、クライアントワークで培った技術を使って写真などのエフェクトなどを実験し始めたのが始まり。

アイディアがあれば、それを追求しようとするしぶとさがある。その信念はあとのビジュアルに対するこだわりと、追求心から強く感じられました。

また、他人が開発したものをそのまま使うのではなく、その実現方法のプロセスを学ぶことを楽しんでいるそうです。

前半でエリックさんのFlashの遍歴を実際のコードを追って紹介していましたが、最初はタイムラインベースのアニメーションから、スクリプトベースになり…と、その飛躍具合がすごい。

初期の作品には、いわゆる CG っぽさは残っているものの、日々そのスタイルは進化していき、最近の作品は FLASH で描いているとは思えない、温もりさえ感じさせる作風へと変貌と遂げています。
本当に本当に素晴らしかったです。
こちらでその美しい作品群が見れます。
http://jot.eriknatzke.com/

カテゴリー: event　

コメントはまだありません

No comments yet.

TrackBack URL

Leave a comment