[EV]AdobeMAX 2009/1/30 ◆A-6 [Flash]アイデアの実装:コントロールと最適化

覚え書きメモ

◆Adobe MAX 2日目
2009/1/30 14:20~15:20

◆A-6 [Flash]アイデアの実装:コントロールと最適化
Roxik 城戸雅行さん

▼ムービークリップの制御について
モノを動かす、ではなく視線を動かすという考え方。
PointとRender
直接、mc.xやmc.yを制御せずに頂点(Point)データを定義して代入(Rendering)

▼最適化について
・見えないところは計算しない
・ビットマップ化してコマアニメ
・補間を使う

[EV]AdobeMAX 2009/1/30 ◆C-5 Flash CS4 Professionalを使ったアクセシビリティ対応コンテンツの構築

ほとんど意味がわからなかったセッション(汗)
ノートに残ってたメモ。

◆Adobe MAX 2日目
2009/1/30 13:00~14:00

◆C-5 Flash CS4 Professionalを使ったアクセシビリティ対応コンテンツの構築
Matt Mayさん

▼NonTextContent
Accessibility Toolパネル
(ASで制御も可)
同時設定の場合の優先順位はASの方が上
discrptionは書かなくてもいいんじゃない。
updateも重要です。

▼Time-Based
字幕:FLVPlayBackCaptioning
自分でCueポイントを打つ
DFXPで字幕作るのがいいよ。
FLVPlayBackにデフォルトで搭載

▼Meaningful Sequence
FlashはHTMLと違って情報の記述の順番わかんないよね。
なのでTABインデックスを使うよ。
座標をあるアルゴリズムで解析?

▼ResizeText

▼Minimum Contrast
読みやすさにはコントラストが重要
1:5→BG:TEXT
ColorContrastAnalyser

[EV]AdobeMAX 2009/1/30 ◆L-4 失敗事例に学ぶFlexプロジェクトの第一歩

若干うろ覚えの覚え書きmemo

◆Adobe MAX 2日目
2009/1/30 11:40~12:40

◆L-4 失敗事例に学ぶFlexプロジェクトの第一歩
NECシステムテクノロジー株式会社 坂田泰平さん

Flexの特性
・UI上、全ての描画OBJ、コンポーネントはインスタンス化される
・コンポーネントによって重さが違う
・非同期
・データはポイント渡し

失敗プロジェクト(QCD)とは
1)コスト
色々できるからハードルがあがる
→仕様変更→費用アップ→遅延
→画面仕様が未定義(性能問題にも繋がる)
2)品質
Flexでなんとなくできちゃう(スクリプトも楽)
→ちゃんとわかってないとトラブルに対応できない
→遅延→初心者にありがち(性能問題にも)
3)納期
1)2)の原因がそのまま
既存のシステムの置き換えの場合の見積もりの甘さ
→性能問題にも繋がる

失敗事例
CASE1:デモでの執着が命取り
描画での性能問題(インスタンス化における)
→Flexの振る舞いの知識不足
データが多すぎて描画できないとか

CASE2:RPQは続くよ
画面の仕様変更がころころ変わる
→性能が悪くなる

CASE3:基本的な知識不足
描画における性能問題
→納期遅延

CASE4:見た目はOKなのに
重いクラスを使用しており描画が遅い、レスポンス悪い
→性能問題

まず何をしたいのか、何をどう見せたいのかを明確にする。

チェック項目
用件定義
・実現性の検証:モック等
・標準化作業:コーディング規約の設定
・設計:性能に問題はないか。
製造
・mxml/ASメモリリーク(参照の強弱)
・ツール、デバッガを使った検証
評価
・評価ツールの適用
・トラブルシューティング

まとめ
Flexの経験が浅いときは上級者に仰ぎましょう。

[EV]AdobeMAX 2009/1/29 ◆スペシャルイベント Technology Sneak Peek

若干うろ覚えの覚え書き

◆Adobe MAX 1日目
2009/1/29 18:40~20:40

◆スペシャルイベント Technology Sneak Peek

7つのプロトタイム的なもの

★1.サーバーサイドで動くAS
TOMCAT使うらしい
ASにSQL書いて実行みたいな
(具体的に何してるか良くわからなかった・・・)

★2.FLVのMETAデータを超便利につかう
・カラースキーマ
・アクティビティレベル、ライトニングレベル
・顔認識
・音声をTEXT化し、出来た単語を使ってインタラクティブなこと
(Pr CS4の機能みたいな感じ)
→上記をリアルタイムで色々判定できる

★3.FLASHでP2P
つながるみたい

★4.AIRでいろいろDrag&Drop
LiveCompornentのDrag&Drop
ブラウザのDrag&Drop
SwfのDrag&Drop
FlexコンポーネントのDrag&Drop
→何も設定しなくてもそれぞれ同期してるみたいな

★5.LiveCylce+CreativeSuites
動画をLiveCycleにアップすると他のPCからその動画にアクセスできてコメントとか入れれる。
Prで開いてもコメントデータが残ってる

★6.DWでのAJAX簡単利用
簡単にAJAX
FrameWorkごとに使い方が違うから覚えるの大変
→OpenAJAXAllianceでajaxの内容をxmlにする感じ?
widgetで設定決めて簡単にhtmlに設置できちゃうみたい

★7.たくさんの写真を使ったモーフィング的なこと
10000枚用意して、その写真の任意の2毎を奥行きだったり横方向だったりスムーズに繋ぐ
(上手く説明できない)

[EV]AdobeMAX 2009/1/29 ◆E-4 CATMAN作者が語るFLASHアニメ最新情報

若干うろ覚えの覚え書き

◆Adobe MAX 1日目
2009/1/29 17:10~18:10

◆E-4 CATMAN作者が語るFLASHアニメ最新情報
青池 良輔さん

FLASHでのアニメ製作の利点
・プレビューが早い
・AEとかと連携できる
・ファイル共有しやすい(シンボルだけ送るとか)
・多媒体への展開がしやすい

FLASHでのアニメするには
→トゥイーン、コマアニメ、スクリプト

このへんで奥さんから電話
声が冷たかったらしい。

シンボルは断然グラフィックシンボルがよい。
→プレビューしなくても動きが確認できるから

コツ的なもの
絵コンテをFLASHに反映させた時点でそれなりに骨組みは作りこんでおく。
→時間的なタイミングとか
絵コンテみながら動かすところの方法を決める
→コマアニメorトゥイーンとか
Fl→AEは連番PNGの方が間違いが起きない
→movとか怪しい

★CS4での製作事例
▼「THE FLEA」 MTV ITALY用
ワークフロー
1.イラレでキャラ作成
2.Flにインポート
3.IK(ボーン)を設定
4.オブジェクトベースにアニメつける

▼実写ドラマとアニメをまざったもの
実写+Flは
実写をAEでなんとなくエフェクトつけて、XFLで書き出し
XFLをFlで読み込んでなんとなくエフェクトを下敷きにFl編集

まとめ
・CS4はモーション系のアニメーター、デザイナーには可能性の拡大
・アニメーションもオブジェクト指向
・可能性+効率で創意工夫を頑張る!と。

おまけ
CATMANのDVDに実際のアニメ(1分くらい)のFlaファイルと解説ついてるよ。

[EV]AdobeMAX 2009/1/29 ◆C-3 プロフェッショナルのピクセルコントロール

若干うろ覚えの覚え書き
(ってかホントに走り書きのメモを写しただけ・・・)

◆Adobe MAX 1日目
2009/1/29 14:20~15:20

◆C-3 プロフェッショナルのピクセルコントロール
Ralph Hauwettさん

2D/3Dを勉強するときに、Image Registrationという本を読んだよ。
意味不明な数式ばっかりだったけど。

これしか出来ないという制約の中から以下にその昨日をハックして自分の作りたいものを作るかに喜びを見出すみたいな。
アルファベットのAとbを組み合わせて人の形をつくるとか。

たとえば音
マイクでテープに録音して、テープを短くしてアナログ的にエフェクトとか。

いかにありえないハックをするかみたいな。

9Fingers by Spaceballs
http://jp.youtube.com/watch?v=Nln80hiP5AY
フロッピー2枚で3分のビデオ

Starstruck by TBL
http://jp.youtube.com/watch?v=-wtMEBPWeMo
Hard的には3Dできないのに3Dする

Flashも今の機能をフル活用して面白いものつくろうみたいな。
setPixel()とか重いからFilterで代用とか
soundもasだけ書けばとっても軽いよとか

Bump Mapping作るには。
pixel処理は重いからFilter効果で
Math.sqrt()も重いから、Filter効果で

Tunnel的なエフェクトも
FP9だけでは限界があるけど、
pixelベンダー使えば実現できたとか。

papervisionXもあるよ、みたいな。

[EV]AdobeMAX 2009/1/29 ◆E-2 Flash Player10の新テキストエンジン”TextLayoutFramework”フル活用Tips

若干うろ覚えの覚え書き
(ってか聞いてもほとんど理解できませんでした・・・)

◆Adobe MAX 1日目
2009/1/29 14:20~15:20

◆E-2 Flash Player10の新テキストエンジン”TextLayoutFramework”フル活用Tips
Nat McCullyさん

TFL:TextLayoutFramework
flash.text.engineの新機能
高度なレイアウト
世界中の言語に対応
TextFieldは今までどおり。

Demo
世界の言語対応サンプル(ADOBEサイトからダウンロード可能)
→ヘブライ語(右から左)とか日本語(縦)とかOk

TFLについて
Flashならmxpインストールで。
ツールパネルとASの両方で制御可能。
Flex4なら最初からAPI入ってる。
で記述

Flowが一番多用途

まとめ
FP10ならTextFieldじゃなくて、FTEとTFL使おう!
普通の人はツールパネルで。
頑張る人はASだけで。
まだベータ版ということをご理解お願いします。

[EV]AdobeMAX 2009/1/29 D-1 ウェブとタイポグラフィー、伝達と表現

若干うろ覚えの覚え書き

◆Adobe MAX 1日目
2009/1/29 13:00~14:00

◆D-1 ウェブとタイポグラフィー、伝達と表現
川上俊さん

元々グラフィックデザイナーなのでWEBでもグラフィックデザイン的なものを作りたい。

製作事例
1.artless(自社サイト) http://www.artless.co.jp/
page数の多いものは作りたくなかった。
→Ps1枚のデザイン
グリッドデザイン(システマチック→WEB向き)
細かい情報が別サイトのBLOGに表示

クライアントワーク
1.giuliano Fujiwara http://www.giulianofujiwara.com/
ブランドイメージ
→ミニマリズム
→テーマカラー:黒
→4つのドットがロゴ
テキストのメニューがメインビジュアル
(特にボタン画像的なものは使わない)
サムネイルにルックナンバーを表示させることでスタイリストはそのままお店に注文できる仕組み。
(お店のスタッフにも使いやすくなっている)
日本語の英語を併記
→日本のブランドということをアピール
→グローバルなイメージ

2.ISSEY MIYAKE Official Site http://www.isseymiyake.co.jp/
建設的なイメージでデザイン
これもメインメニューがメインビジュアル
メニューにマウスオンでブランドイメージ画像を表示
→イメージは縦につながっていてシームレスな感じなトランジション
ページ遷移は動きの構造を考えて作成
→メインは上下でその下は左右とか
紙広告で使ったタイポグラフィが好評で次の媒体に派生
→郵送用のダンボール箱への印刷
→WEBサイトのトップBG

3.STUDIO APARTMENT http://www.studioapartment.jp/
文字と音だけ(ビジュアル的な画像はなし)
Ps1枚的なデザイン
メインビジュアルの日付はそのままblog(news)へのリンクに
文字だけでのデザインをする際の書体選びは、その書体の背景をクライアントに説明
(バックボーンをしっかり調べ、選んだ書体の根拠を提示)
書体が決定してから、全体のデザインを開始する。

4.null http://www.nullartless.com/
WEB屋さんに紙のデザインをお願いしたプロジェクト
WEB屋だからWEBだけってわけでもなく何でもアンテナ伸ばしたほうが良し。

5.TYCOON GRAPHICS
書体を切り返すボタンでサンセリフとゴシックを切り替え
→メンバーの二人の得意なフォントをそのまま参照している。

Q&A
Q.文字デザインでの自分の中でのタブーはありますか?
A.基本をちゃんと理解した上での行動であれば、あえてタブーというしきりを作らなくても良いと思う。
Q.HTMLデザインはやりますか?
A.自分が面白くないから基本やりません。
もともとWEBデザインに入ったきっかけもFLASHという媒体ができたから。
Q.書体の選び方のコツ?
A.最初は自分の好み→クライアントのイメージから提案
背景的な部分を話し、説得
Q.今後は?(文字に飽きたら次は?)
A.今のところ文字を突き詰めたい。
自分の考えるグラフィックデザインでやっていく。

[EV]AdobeMAX 2009/1/29 L-2 Flex/AIR/CS4によるデザイナー&デベロッパーのワークフロー革新

若干うろ覚えの覚え書き

◆Adobe MAX 1日目
2009/1/29 11:40~12:40

◆L-2 Flex/AIR/CS4によるデザイナー&デベロッパーのワークフロー革新
クラスメソッド株式会社 杉浦篤史さん

★FlexでのRIA開発
▼Fx3の場合
→プロジェクト管理が難しい
→RIAのコンポーネントがデフォルトのものだけでは厳しい
 (カスタムコンポーネントの必要性)
→フレームワーク

デザイナー (Ds)とデベロッパー(Dv)での分業
Ds;レイアウト、インタラクション実装
Dv:ロクック、カスタムコンポーネント作成

Fx3での開発フロー(項目:分担:使用アプリ)
skining:Ds:イラレ、フォトショ等
layout:Ds,Dv;Flex
Interaction:Ds,Dv;Flex
Logic:Dv:Flex

Fx3での問題点
Dsがフレックス使えないとダメ
DsとDv間でのインタラクション実装における連携が大変
Dvにトランジション的な動きを作る知識が必要
→Ds、Dv両者ともそれなりに知識がいる

▼Fx4の場合
ワークフロー
Flash Catalyst(Fc)ができました
Fc→インタラクションデザインツール

skining:Ds:イラレ、フォトショ等
layout:Ds;Fc
Interaction:Ds,Dv;Fc
Logic:Dv:Flex

実際のフロー
1)イラレ→FXG(Fcで読める形式)に書き出し
2)FXGをFcで読み込み
3)Fcでボタンとか作る
4)Fcで動かしたいものとかコンポーネント選ぶ
5)FcでFXPで書き出す
6)FlexでFXPをインポートして読み込む

Fx4でのメリット
→スピードアップ
→モックアップが簡単に作れる
→Fcだけで色んな製作物の修正可
→FlexからFXPに戻してPs等で修正してFlexに戻すも可

Fx4でのデメリット
→高度なカスタムコンポーネントには向かない
→自動生成されるMXMLがごちゃごちゃしててヨロシクナイ。

まとめ
1.Fcはワークフローを大きく変える!
2.既にFx3での開発基準としてたモノの利用は無理っぽい。
3.Fcが使いこなせれば開発が速くなるかも。

Q&A
Q:カスタムコンポーネントはFx3のものは使える?
A:多分そのままでは無理かも
Q:FcでMXMLにid打てる?
A:コードビューにすれば打てると思う
Q:PsでエフェクトかけたデザインデータはFcでどうなるの?
A:Psでは試してないけど、Aiだとマスクとかラスタライズされます。
Q:Fcのステートって何?
A:フラッシュでいうところのフレーム的なもの

[EV]AdobeMAX 2009/1/29 基調講演

若干うろ覚えの覚え書き

◆Adobe MAX 1日目
2009/1/29

◆基調講演
ケビンリンチさん

世の中変化してる→マルチスクリーンの時代
▼これからのAdobeの考える3つのトレンド
★1.クライアント+クラウド
★2.ソーシャルコンピューティング
★3.デバイス+デスクトップ

★1.クライアント+クラウドについて
1)クライアントについて
クライアントの代表→FlashPlayer10
良いところ
sounod、text、3Dエフェクト、ピクセルベンダー
普及率は発表から2ヶ月で55%
MLBのAIRアプリなんかもあるよ。
クライアントとクラウドを繋ぐ→AIR
(ONLINEとOFFLINEの共存)
AIR流行ってるよ。
squirrefish(js)+webkitも対応してます。

AIRの事例としてニュース配信の新しい形について
紙の新聞は最近下向き、NYタイムズも下向き

新聞のAIRアプリ
FP10のTEXT機能で解像度にあわせたレイアウトが可能。
ページをサムネイル化したり画像ON/OFFとかレイアウト自由。
広告クリックでその場でCM再生開始とか
クロスワードもインタラクティブ!
MobileInternetDeviceにも対応。

その他AIRアプリの例
・KITツール(不動産情報紹介アプリ)
・株価情報表示アプリ
・Felicaでメンコアプリ(SONY VAIO)

2)クラウドについて
Tour de flex
→クラウド選択できる
→なんか色々なサービスを突っ込める
Adobe Developer Box
→Adobeの情報RSSとか

★2.ソーシャルコンピューティングについて
人と人とのつながり。
複数人でのエクスペリエンスを重要視。
Adobe WAVE(開発中)
→SNSをまとめるってことかしら?
 (MYSPACEとかeviteとか)
ニコニコ動画
→これも人と人とのつながり、素晴らしい。

★3.デスクトップ+デバイス
2007年での端末割合
携帯電話>家電>パソコン
今後携帯メインになるとも考えておかなくっちゃね。

docomoさんからのお話
携帯でAIRとか出来ると便利。
オンラインとオフラインどっちでも使えるみたいな。
モバイルAIR
→ビジネス
→エンタメ
→ゲーム
例えば…
WEDDINGを最初から最後までサポートするサービスとか
PCと携帯でアルバム共有できるフォトアルバムとか