- 2006-12-21 (木) 23:26
- action script
Sandyとは「3(サン)D(ディー)」の名の通り、Flashで3D処理を扱うためのオープンソースのライブラリです。「Open Source Flash – sandy」が公式トップだと思います。ページ中の3D猫のサンプルを見ていただけると、どこまで3Dできるかが分かるかと思います。Flashで、3D Studio Maxのような3Dソフトの .ASE や .WRLといった形式のファイルをパースすることができ、テクスチャまで貼れるという、相当な本気仕様です。詳細な解説は「Using Sandy 3D Flash Library」を読むと良さそうです。僕は未読。
でも、現状ではこの手の本格的な3D表現は計算量も膨大で、処理速度が結構かかります。そのあたりは、AS3.0になれば処理速度が劇的に向上するので、改善されていくでしょう。
僕はそこまでの3Dスキルもありませんので、動作も軽く、実用できそうなSandyの中のDistortImageクラスから入門してみました。これは「Flashで画像を台形に変形させる方法」に書いたように、矩形(平面画像)を好きな形に変形させられる機能です。
まずはSandyのパッケージをダウンロード(最新版は1.1)して、クラスパスを通しておきます。で、ここで注意点。今回使う”sandy/util/DistortImage.as”ファイルですが、このまま使うと238行目の
public var points:Array;
の部分が、「同じメンバー名を繰り返し使用することはできません。」とエラーになってしまいます。こちらの記事のコメント部分でLeeさんもおっしゃられているように、この部分は削除しても悪影響はないそうなので、
//public var points:Array;
と、コメントアウトしておきましょう。
肝心の使い方は、同じく「The Flash Blog」のこちらのエントリで公開されているコードを見ていただければ分かります。
- 3行目でDistortImageクラスをインポート
- 15行目で動かしたいクリップ(ここではphoto)と同じサイズのBitmapDataを生成。これが変形処理のための舞台として使われる。
- 16行目でholderという空MCを生成、clipに渡しておきます
- 17行目でDistortImageを使っています。引数は順に、(変形後の画像を格納するMC, 変形のための舞台となるBitmapData, 水平方向の分割値, 垂直方向の分割値)となります。分割値は同じ値にした方が良いそうです。
- 18行目で、クラスインスタンスdiのプロパティであるtexture(先ほど舞台として登録されたbmd)にphotoをdrawしています。
- 19行目。あとはクラスメソッド setTransform で自由に変形させることができます。
で、setTransformによる変形ですが、今度はThe Flash Blogさんのこちらの記事を見ていただければ理解できます。
DistortImageクラスインスタンス名. setTransform(x0, y0, x1, y1, x2, y2, x3, y3); // x0,y0が左上、時計周りに1が右上、2が右下、3が左下のx, y座標を表しているので、それぞれ数値指定します。
以上を踏まえて、変形アニメーションがしたい時は、onEnterFrameでsetTransformさせてください。Fuseトゥイーンと連携させる場合は、空のMCを4つ作ってそれらを各自Fuseトゥイーンさせ、そのx,y座標をsetTransformに突っ込めばOKです。
下手な説明になってしまいましたが、使いこなせばこんなことができるそうですよ。
12/25追記:クラスパスについての補足。Sandyの中のasファイルを見ていただければ分かるのですが、クラスファイルのまま使う場合は、いつものcomフォルダの中ではなく、comフォルダと同階層に置くことでグローバルクラスパスが通ることになります。
- Newer: UNIQLO MIX: MIXPLAY
- Older: Sandyで台形変形してみたのですが
Comments:0
Trackbacks:1
- Trackback URL for this entry
- http://www.trick7.com/blog/2006/12/21-232651.php/trackback
- Listed below are links to weblogs that reference
- Sandyについて from trick7
- pingback from DistorImageを(今更)試す… « 2BLOG 09-02-26 (木) 21:44
-
[...] 先日のページをめくるイメージを作る際、DistorImageを試したので自分なりにまとめました。既にtrick7.comさんや閃光的網站・弛緩複合体 -Review Division-さんなど著名なブログで詳しく説明されています。 僕は以前、台形つくるのにラインで走査していくように作っていたので結構おどろいた。 こういうクラスを作る人も情報をキャッチする人もすごいね。もっぱら使いこなす方に回ってます。 シンプルで汎用的なクラスですし、いろいろな場面で使えると思いました。 [...]






![Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]](http://ecx.images-amazon.com/images/I/617sNhK9P9L._SL75_.jpg)


![FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]](http://ecx.images-amazon.com/images/I/51915J1BG6L._SL75_.jpg)


