Flash, Actionscript の3D表現を学習中です。
Flash Player 10 – AS 3 を使い地球を作ってみました。
3Dライブラリを使うのもアリなのでしょうが今回はサードパーティーの助けを借りないことにしました。
テクスチャで用意した画像をいかに負荷なくマッピングしていくかが重要みたいです。
マッピングするためにテクスチャを3角形に分割する必要があります。
ポリゴン（？）のようなものを作るってことらしい。
Flash Player 10 から使える drawTriangles を使いましたが、これがムズイ。
なんとか地球が出来上がり水平に回転するところまではたどり着きました。
AS2 時代の DisortImage Class by kirouko と Advanced ActionScript 3.0 Animation を参考にコードを組み立てました。
マッピングと言うより、テクスチャで用意した画像を丸めてるのかな。
前回同様 Advanced Actionscript 3.0 Animation を参考に画像を筒状に並べて3D回転させてみた。
サンプルでは Rotate Carousel（回転木馬）と名前がついていた。
サンプルは Shape を並べていて表裏が関係ない、Bitmap に置換えるときに注意が必要。
Flash Player 10 で追加された3D関連のクラスを把握するのに時間がかかりそうな予感。
Matrix3d, Vector3D, PerspectiveProjection が重要な働きをしている。
Demo : Rotate Carousel v.1 - Flash Player 10 が必要です。
ポップアップされたウインドウをリサイズすると面白い。
もう一つ。
PerspectiveProjection.fieldOfView を小さくしたものを作った。
Demo : Rotate Carousel v.2 - Flash Player 10 が必要です。
全ての画像が見えるようになると、手前の画像が表を向いている必要があるので、v.2 では rotationY を +180 している。
PerspectiveProjection.fieldOfView は魚眼効果を出す働きがある。
値が大きいと効果も大きくなる、0 から 180 の間で設定できる。
Advanced Actionscript 3.0 Animation を参考に立方体を3D回転させてみた。
Bitmap を各面にはり、Mouse との距離で回転スピードを調整した。
200px X 200px の正立方体。
リフレッシュごとに各面のZ深度を調整しないと立方体が壊れてしまう。
Flash Player 10 から使える Marix3D を使うのは Actionscript リファレンスを見ただけでは思いつかないな。
Vector3D も登場して難易度はますます上がってしまう。
各面を配列に保持しリフレッシュ時にdeltaTransformVector値を比較しソートさせる。
書けば簡単だけど、イマイチ理論が理解できない。
perspectiveProjection を使うことで stage をリサイズした時の立方体のゆがみを抑制することができるんだね。
以前に比べて簡単なようなそうでもないような・・・
Demo : Rotate Cube - Flash Player 10 が必要です。
gotoAndLearn() の新しいサンプルを試した。
3D Photo Panels – Learn how to create a nice 3D hover and scale effect using the new features in Flash Player 10.
6枚の画像をマウスにあわせて3D回転させるサンプル。
回転アニメーションにTweenLiteを使う。
クリックされた画像が拡大される。
画像を1枚にし、クリックされた画像が拡大されるを無しで作ってみた。
demo : require Flash Plaer 10 above
CATMAN [DVD]
青池良輔
詳解 ActionScript 3.0アニメーション
Keith Peters
.fla 2 ―Idea of Flash Creation―
新藤愛大, 寺井周平, 萩原俊矢, 小山智彦, 眞野東紗, 小瀧和正
詳解 Objective-C 2.0
荻原 剛志
iPhone デベロッパーズ クックブック
Erika Sadun
© Copyright 2008 ~ 2010 Hiroaki Okubo All rights reserved.
