« Flash Creative Technique - vol.58
3次元のスパイラルを表現する(前編)
| DEEP KICK.com Blog | Flash Creative Technique - vol.60
回転ドア式のフォトギャラリー(前編) »

2007年3月31日

Flash Creative Technique - vol.59
3次元のスパイラルを表現する(後編)

このエントリーをはてなブックマークに追加

web creators 2007年4月号web creators 2007年4月号の「Flash Creative Technique」は「3次元のスパイラルを表現する」(後編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

前回は仮想的な空間にあるオブジェクトをスクリーンに透視変換する原理について、考察しました。今回は運動するオブジェクトが作る「軌跡」に焦点をあてて、考察を加えたいと思います。

単独では何の変哲もない運動も、その軌跡を取り出してみると、幾何学的な美しさを持っていることがあります。「軌跡」というのは、なんとなく美しい響きを持つ言葉で、ハヤシカオルが好きな言葉のひとつです。実は「The spiral driver version 0.1」の作成のなかで、もっとも著者的に苦心したのが、この軌跡の表現でした。なので、その原理を追求してみようという方は、サンプルをこころして眺めてください(笑)。しかし苦労した甲斐があって、Flashで軌跡をとらえることに成功することができました。これはまさに奇跡にと呼ぶにふさわしい(笑)。

軌跡というのは、最初に運動しているオブジェクトの過去の姿、つまり何フレーム目か前の状態であると考えます。2つや3つじゃ、あんまり軌跡に見えませんが、30とか50ぐらい連続すると、軌跡に見えてきます。

オブジェクトの過去の姿を後で使うためには、必要なプロパティの値を変数などに保存しておく必要があります。誌面では「五大プロパティ」と勝手に呼んでおりますが、オブジェクトのX座標・Y座標・X方向およびY方向の拡大縮小率・アルファ値を、毎フレームごとに「構造体」を用いて記録します。

例えば1フレーム目の五大プロパティは、new Object(); を用いて「kiseki_1」というインスタンス名の構造体を生成し、その内部に記録します。2フレーム目は「kiseki_2」というインスタンス名の構造体に記録します。これを毎フレーム繰り返します。

次に必要な情報は、複製するオブジェクトの個数とオブジェクトを複製するタイミング、つまりインターバルとなるフレーム数です。インターバルを決めれば、次に複製するオブジェクトが最初のオブジェクトの何フレーム分過去の状態に該当するのか計算することができます。それを個数分繰り返します。

p = i - interval * r
この数式を見ます。i は最初のオブジェクトが運動を始めてからのフレーム数。interval はインターバル、r は複製されたオブジェクトのインスタンス名末尾の数字を表します。例えば最初のオブジェクトの次に複製されたオブジェクトのインスタンス名は「iName_1」、次のオブジェクトは「iName_2」というインスタンス名を持ちます。この数式でもとめられるp は、軌跡を記録している構造体の名前末尾の数字になります。つまり何フレーム目に記録した軌跡が複製したオブジェクトそれぞれに当てはまるのかをこの数式で計算しているわけです。

ここまで解決すれば、後は構造体から取り出した五大プロパティの値を複製した各オブジェクトのプロパティに適用すれば完成です。軌跡を追いかけるのは、複製するオブジェクトの個数にもよりますが、onEntefFrameイベントハンドラ内でfor文を使うなど、瞬間的にかなりの計算が必要なことがわかります。もしかするともっとうまい方法があるのかもしれませんが、とりあえずハヤシカオルが今回のサンプル作成を通して辿り着いた方法ということで、ご参考までに。

投稿者 kaoru : 2007年3月31日 16:00

このエントリーをはてなブックマークに追加

contents
about
contact
Photo Gallery
blog
iPhone/iPad アプリ
Kindle book
portfolio