Adobe MAX Japan 2009 城戸さんのデモ再現

2009年4月6日 00:33 action script,flash — littlepad

http://jp.max.adobe.com/player.html?2-10

Adobe MAX Japan 2009におけるROXIK城戸さんのプレゼンムービー。
ムービークリップ(以下MC)の制御に関しては、
自分の手法とは全く異なるもので非常に参考になった。
ムービーがいつまで見れるか分からないので、メモ代わりにデモを再現してみた。

城戸さんの手法は、複数のMCを動かす際に各々のMCを動かすのではなく、
視点という要素を入れ、それを動かすことで実現する。

まず、頂点データ(ポイント)を作る。
それに対応したMC(ボックス)は頂点データを使ってモーション(座標)の計算をする。
最終的に画面に何かを表示する際、MCに位置を割り当てるレンダリングという概念を入れてやるのがポイント。

//頂点データ
var p:Object = {x:100, y:300};

//対応するMC
MC.x = p.x;
MC.y = p.y;

これに視点という概念を入れる。
視点が右(+x)に動くと、眺めている風景は左(-x)に動く。

視点のx座標を右に2ずつ動かし、
レンダリング時にポイント座標から視点が移動した分だけ引いてやる。
すると、MCが左へ移動する。
つまり視点は右へ、MC(風景)は左へ移動する。

MCを複数にしてみる。
各々のMCを制御するのではなく、視点というデータのみを制御する。
最終的にレンダリング時にその結果の帳尻を合わせる。

これに視点を回転させるという概念を加える。
回転した座標計算には以下の公式を使う。

x’ = x * cos – y * sin;
y’ = x * sin + y * cos;

視点にangleというパラメータを追加し、
レンダリングする際に回転の情報を加えてやる。

回転の中心座標とMCの座標との差を”視点からの差”とし、上記公式に当てはめていく。
また、視点を右に傾けるということは、風景が左に回転して見えるということなので、視点はマイナスにしておく。

これにズームする機能を追加する。
視点がズームすると”視点からの差”を伸ばしてやればいい。

視点にzoomというパラメータを追加し、”視点からの差”にzoomをかける。
また、MCのサイズもスケールにzoomをかけてやることで拡大する。

ポイントとしては、モーションする部分とレンダリングする部分を分け、
レンダリング部分に回転やズームの処理を組み込む。
最終的にそこでMCを表示してやる。
モーションをつける時は、直接MCを動かすのではなく、
頂点データや視点データのみを制御するようにする。

2 Comments

  1. 城戸さんのサンプル作ったんですねー。
    あれはホント刺激的でよい内容でした。
    最適化もやらないとですね……。

    コメント by tatzuro — 2009年4月6日 18:08

  2. 今回サンプルをwonderflで実装してみましたがとても良く出来ていました!
    多分、タイトルに城戸さんの名前があるせいだと思いますが、
    ユーザランキングで1位になってしまい、
    ちょっと肩身の狭い思いをしています…。
    早く流れてくれないかなぁ

    コメント by littlepad — 2009年4月6日 18:14

TrackBack URL

Leave a comment

about

ハンドルネーム:littlepad
都内で WEB 制作(デザイン, html/css, Flash, MT, WordPress etc)をしているBOØWY研究家

category:

search:


archives:

GO TO PAGETOP