memo.393

若干うろ覚えの覚え書き

◆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.今のところ文字を突き詰めたい。
自分の考えるグラフィックデザインでやっていく。

若干うろ覚えの覚え書き

◆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：フラッシュでいうところのフレーム的なもの

若干うろ覚えの覚え書き

◆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と携帯でアルバム共有できるフォトアルバムとか

ドキュメントクラスは、MovieClipかSpriteを継承していないといけない。
そのためどっちを継承したかでthisの性質が変わってくる模様。

以下、Spriteを継承しててはまったこと。
ステージにインスタンス名myMcのムービークリップを配置。
ドキュメントクラスをMain.as

//Main.as
public class Main extends Sprite {
public function Main() {
var main2:Main2 = new Main2(this);
}
}

//Main2.asのコンストラクタ
public function Main2(container) {
var container2:Sprite = container

trace(container2.myMc.x);
}

これだと、container2にmyMcなんてプロパティ無いよと起こられる。
おそらくSpriteはDynamicじゃないからってことかな？
でも、↓こう書けばSprite継承でも参照できるみたい。
trace(container2[“myMc”].x);
まぁcontainer2:Spriteとせずに、Mainとすれば問題ないけど。

最初からMainはMovieClipを継承してれば何の問題もない

//Main.as
public class Main extends MovieClip{
public function Main() {
var main2:Main2 = new Main2(this);
}
}

//Main2.asのコンストラクタ
public function Main2(container) {
var container2:MovieClip= container
trace(container2.myMc.x);
}

結論としては、ドキュメントクラスはMovieClipを継承しといた方が無難・・・

通常、変数にカーソル当ててctrl+shift+1をすると、getterとかsetter作れるショートカット。
このとき変数名に_(アンダーバー)は混ぜない方がいいみたい。

例えば、
var hoge_Hogege:String;
これをショートカットでgetter作ろうとすると、

public function get Hogege(): { return hoge_Hoge; }

このように、予期しない形になります。

ちなみに↓これは
var hoge_Ho:String;

public function get hoge(): { return hoge_Ho; }

こんな感じ。

なので最初からアンダーバーを含まないようにすれば
var hogeHoge:String;

public function get hogeHoge():String { return _hogeHoge; }

こんな感じ。
(そしていつもどおり元の変数にアンダーバーが付与)
(var _hogeHoge:String;)

たとえば、ライブラリにMCがあり、それはクラス名Mcでリンケージしてある。

一般的には

var mc:Mc = new Mc();//インスタンス作成
addChild(mc)//表示リストに追加

一行で書くと

var mc:Mc = Mc(addChild(new Mc()));

もしくは

var mc:Mc = addChild(new Mc()) as Mc;

※addChildの返り値はDisplayObjectなので、型変換が必要

2009/03/04追記
※DisplayObjectで問題なければしなくても良い

関数の中に関数を入れた場合(関数クロージャというらしい)、中の関数でのthisの扱いには注意が必要。

例えば。。。

//フレームアクション
function main(){
trace(this);
//mc赤い四角定義
	var mc = new MovieClip();
	mc.graphics.beginFill(0xFF0000);
	mc.graphics.drawRect(0,0,100,100);
	mc.graphics.endFill();
	sub();
//関数クロージャ(たぶん)
	function sub(){
trace(this);
		addChild(mc);
	}
}
main();

上記を実行すると100×100の赤い四角がx:0,y:0の位置に表示される。
ここで注意したいのが、function subの中のaddChild(mc);
これは本来の文法的にはDisplayObjectContainer.addChild(mc)
DisplayObjectContainerが記載されてないから、thisになるのか、
と思うとそうでもない。。。

this.addChild(mc)

これはエラーになります。
finction sub()のthisと、function main()のthisはtrace結果を見ると違うものです。
よって、関数クロージャのaddChild(～)は、thisが省略されてるわけではないってことで。
※この例では”メインのタイムライン”になっているみたい。(フレームアクションなので)

_onload(),_onInit(),_onCastAdded(),_onCastRemoved(),_onGoto()などのoverride系のメソッドの中のaddCommand()は、execute()無しで、自動的に実行されるみたい。

addCommand()はリスト（CommandList？）にコマンドを追加するメソッドで、色んなクラスに入っている。
が、しかし、
CommandListクラスのメソッドのaddCommand()と
SceneObjectクラスのメソッドのaddCommand()とでは
動作の意味が若干違うみたい。(ドキュメントに書いてあることが違うし)

なんかうまくできなかった。

loaderInfo.addEventListener( Event.COMPLETE, _complete );
↑これってメインのタイムラインとかドキュメントクラスには書いといた方がいいのかな？