2008年3月アーカイブ

以前の同僚のお手伝いで制作したインディーズバンドのサイトが公開となりました。初のAS3.0案件でした。デザイン、AS、PHP/MySQLを一人で頑張りました。

頑張ったところ

• AS3.0への移行とともに、フルクラスベースの制作にスイッチ
• Profileページの3d表現。「Making Things Move!」のおかげで、Papervision3d使わなくてもできました。
• ライブスケジュールと新着情報の管理をするための、クライアント用管理画面の作成や、問い合わせや予約に対するバックメール送信も、MySQL/PHPで頑張って実装しました。サーバサイドは本当に入門以前なレベルなので、かなり力技な実装だと思いますが。

頑張れなかったところ

• デザインがちょっと・・。早いとこhtmlサイト的なデザインから、意識的に脱却しないとダメかなと思います
• ディテールへのこだわり。トゥイーンの動きとか、画面遷移とか、キモチよさを追求する余裕がありませんでした。そういうとここそ大切なのに。
• 制作期間。3ヶ月は時間かかり過ぎですよねorz

その他

• 利用したライブラリとか
  • Tweener - お世話になりました
  • SSR(Super Simple Remoting) - AMFPHPやるとき便利
  • hellokeita.comさんのTextAnimationクラス - thaっぽいテキストアニメを、任意のPennerEasingで実現
  • AS3.0 Cookbook付属のユーティリティクラス - 日時のフォーマットとか
• このサイト用に作成したクラスは60個くらい。その他に自分の汎用ライブラリとして20個くらいのクラスができました。
• AS3.0はやればやるだけ好きになれましたが、代わりにAS2.0をやるのが怖くなりましたw。

Soundboothキャンペーン
via MACお宝鑑定団

Web Premium、Web Standard、Flash CS3（アップグレード版含む)の購入者を対象としたキャンペーンで、 Soundbooth CS3が$99で買えるようになるっぽいですが、詳細ページがリダイレクトされてしまい、内容がよく分からんち。

以下引用。

どうでもいいけど、Adobeストアの使い勝手の悪さは、いい加減改善したほうがいいと思うよ。「Flashウンコ」って言われちゃうから。

以下のようなテキストフィールドをMovieClipに入れ子にしたオブジェクトをマスクしたいとします。

*今回はマスクターゲット(MyText)とマスクオブジェクトの関係が分かりやすいように、実際にマスクを適用するのではなく、赤色の半透明のShapeをマスク用オブジェクトとして作成しています。

普通にMyTextのx, y, width, heigthでマスクオブジェクトを作成すると、こんな感じだと思います。

coverObject(myText);

function coverObject(obj:DisplayObject):void {
	var shape:Shape = new Shape();
	shape.graphics.beginFill(0xff0000, .5);
	shape.graphics.drawRect(obj.x, obj.y, obj.width, obj.height);
	addChild(shape);
	trace("x:", obj.x, ", y:", obj.y, ",width:", obj.width, ", height:", obj.height);
	//output x: 10 , y: 10 , width: 208.7 , height: 261.05
}

この結果がこちら。 なんか微妙に右と下の端が欠けちゃってます。

これをフィックスしたのがこちらのソース

coverObject(myText);

function coverObject(obj:DisplayObject) {
	var rect:Rectangle = obj.getBounds(this);
	var shape:Shape = new Shape();
	shape.graphics.beginFill(0xff0000, .5);
	shape.graphics.drawRect(rect.x, rect.y, rect.width, rect.height);
	trace("x:", rect.x, ", y:", rect.y, ", width:", rect.width, ", height:", rect.height);
	//output x: 12.35 , y: 11.55 , width: 208.70000000000002 , height: 261.05
	addChild(shape);
}

trace文が出力する値に注目すると、getBoundsを使用した場合は、MyTextの実際の表示領域、つまり内包するテキストフィールドの位置がマスク座標として指定されていますね。

んー、考えれば当たり前のようにも思えるのですが、MyText.widthとMyText.heightが返す値について、どこか釈然としない感じがするのは僕だけでしょうか？

あ、getBounds()を使いましたが、表示領域のボーダーを考慮しない場合はgetRect()で良かったのかもしれません。

そんなわけで、niumさんのProgression講座レポです。

今回はProgression Frameworkの開発者であるniumさんによるワークショップ形式のイベントということで、参加者が各自持参したノーパソで最新のビルドのProgressionを使い、ご用意いただいたサンプルを解説を聞きながら紐解いていくといった内容でした。

恥ずかしながら、Progressionについてはまったくの勉強不足で、「ASをあまり書かなくても、Flashサイト制作が行えるフレームワークなのかな」くらいに考えていました。イベント前日(!)に、Adobe Edge Vol.9 - Vol. 10掲載の紹介記事を試してみて、Progressionコンポーネントを配置し、プロパティを設定するだけで、ページ遷移や画像の読込みといった一連の作業を、スクリプトを書かずに行う事ができることを知り、「これは便利」と思ったものの、Progressionがクラスベースの制作手法にどう活用され、どれほど効果的なのかは未だ不明のまま。

そんな状態での参加だったので、ProgerssionがクラスベースでのFlashサイト作成においてこそ、その真価を発揮し、AS3でのFlaサイト制作の縁の下の力持ちに留まらず、自分で実装するにはなかなか気力と労力を強いられるであろうユーザビリティのケアまで行ってくれる事を知り、一気にProgression萌え度が高まりました。

Progressionの懐の深さゆえに、すべての機能を使いこなすには修練が必要そうですが、niumさん曰く「Progression 2.0では、一部の機能だけでも独立して利用することが可能」だそうで、気に入った機能だけでも取り入れていくことができる、というのも嬉しいところです。Utlilyクラス感覚で気軽に試してみてもいいのかも知れませんね。

というわけで、「Progressionはこんな感じ」ということが分かったので、後は使い込んで行くのみ。頑張らねば。

以下メモです

• 専用のパネルからProgressionプロジェクトを作成すると、ライブラリ一式を任意のディレクトリに出力してくれるよ
• その中には、Tweenerもはいってるし、SWFAdressもあるし、MacMouseWheelまで入ってるよ
• htmlのタイトルとか、flashのコンテキストメニューとかツールチップとか細かいところまで至れり尽くせりだよ
• 画面の遷移はSceneという単位で行われ、SceneはDisplayオブジェクトのようにツリー状に管理されるよ
• Sceneの移動の際、イベントが上記ツリー構造内で連鎖して発生する様は、Flashのイベントが「キャプチャーフェーズ→ターゲットフェーズ→バブリングフェーズ」で連鎖発生するみたいな感じかな？
• 実はniumさんには壮大な野望があるよ。野望が叶うと日本のFLASHerも今よりはハッピーになれるはずだよ

関連リンク

• 第4回東京てら子「niumさん復活記念！Progression を教えてくれるよ」
• 東京てら子
• 東京てら子+Progression
• 第４回 東京てら子で Progression 講座受けてきたよ。
• Progression公式サイト
• Progressionフォーラム

teraさん@trick7が中心になって開催されている、FLASH勉強会「東京てら子（第4回）」に参加させていただきました。

まずはteraさんの発表。 Colin Moockを囲む会でも大ウケだったGainer Helmet Ver. 2で用いられた、Wiiのリモコンハックの応用です。

今回はなんとWiiのセンサーバーの代わりにロウソクを利用。Wiiのセンサーバーというのは赤外線を出しているだけなので、炎でも代用可能だということなのです。これはちょっと驚きですよね。
灯した炎が投射する赤外線を、据え置きしたWiiリモコンが検知し、その認識範囲をFLASHのグラデーションマスク領域として利用されていました。
すると、プロジェクターに投影された黒背景のPCの画面の前で、炎を灯したロウソクを手に持ち移動させると、その背後に画像がゆらゆらと浮き上がるのです。

赤外線を投射するものならば、ロウソクの炎でなくても代用できたわけですが、暗闇に隠されたオブジェクトを照らし出すという、今回のアウトプットのメタファーとしてキャンドルを選択した、というところが秀逸ですよね。
個人的には自分の技術の低さを嘆くよりも、このように人を微笑ましい想いにさせてくれるようなアイディアを生み出す才能やら努力やらの重要性について考えさせられました。

Flashの実装で、灯りの揺らぎを再現するために利用したのが、Go。これはFuse Kitの開発者として知られるMoses Guneschsさんが手がけている、AS3用のアニメーション"プラットフォーム"です。Fuse KitのAS3版がいよいよ登場なのか、というとどうやら違うみたいです。ちょっと意外に思い、疑問に感じるとこともあったので、ちょいと調べたのが以下です。

「Flash、Flex、AfterEffects、JavaScript、サードパーティーのトゥイーンキット（TweenerやTweenLite等のこと）は、すべてECMA Scriptベースのトゥイーンライブラリを保有しているが、共通のプラットフォームが存在していない。これを確立するべきである。」

このコンセプトは、Flex Beta2の開発段階でAdobeにもコミットし、その際にはアニメーションライブラリも一緒に提供したが、ロードマップ的な問題で採用には至らなかったとか。

というわけで、Go。AS3用のアニメーションプラットフォーム。（[注意]上記コンセプトとは違い、Goがターゲットとしているのは、ECMA Scriptベースのプログラム用ではなく、あくまでAS3用プラットフォーム。）Goの概念が浸透すれば、AS3で相互利用が可能なベースレベルのレイヤーとなるコードを、Goの拡張機能として利用できるようになるとか。または既存のサードパーティーのアニメーションライブラリも、より互換性の高いAPIとして移植することが可能になるでしょう、と。

上記が経緯というかGoの概念ですね。ちょっと崇高に過ぎないですか？って思うのは余計なお世話ですね。

具体的な使い方は、teraさんのblogの「Goの基本的な使い方」を読めば分かりますが、結局のところ、Goが提供するのは、AS3で相互利用できるアニメーションフレームワークを「自分で実装する」際に利用するための骨組みであって、FuseKitのようなトゥイーンアニメフレームワークそのものではないということです。

サイトにも書かれていますが、Goのコンセプトが受け入れられれば、例えば、物理に詳しい開発者が、物理エンジン用のアニメーションライブラリを作ってくれるとか、そういう素敵な展開が待っているみたいです。
僕みたいな人間は、神コーダーが3dPhysicsMotionTweenみたいなのを提供してくれる日を待つのが正しい姿勢の感じですね。

調べものをしてたら長くなってしまったので、niumさんのProgression講座については次回書きます。Progression = niumさんもスゴすぎて、書く事がたくさんありそうです。