ActionScript 3.0による3次元表現の基礎

4面のインスタンスをマウスポインタの水平位置に応じて回す

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
4面のSpriteインスタンスを、マウスポインタの位置に応じて水平に回します。
講師:
12:08

字幕

この Flash ムービーファイルは ライブラリにあるビットマップから ダイナミックにオブジェクトを作り それを Sprite インスタンスにして ステージに置き マウスポインタの位置によって 水平に回転しています 中心から水平に マウスポインタを離すほど 回転の速さは早まります また方向も変わります ところで このライブラリには 全部で 4 つのビットマップを用意し それぞれに違うクラス名が 付けてあります この 4 つのビットマップを Sprite に 追加していきたいと思います では SWF は閉じます このフレームアクションの 組み立てを簡単に確認します 先ずもともとタイムラインには 何も置いていません そこに Sprite のオブジェクトを 作っています そしてこのメインタイムラインに 子として加えます それから位置は ステージの中央に x y 座標を定め それから Matrix 3D の クラスを使うため z 座標を 0 に設定しています 回転のアニメーションはこの Sprite インスタンスに対して行います 先ず Sprite インスタンスの transform のプロパティから Matrix 3D のオブジェクトを 取り出します z 座標を 0 にしましたので 3D の操作が行われることが明らかで Matrix 3D のオブジェクトが 出来上がっていますので それを変数に入れます 次にアニメーションはイベントの ENTER_FRAME に対して addEventListener で リスナーを加えます リスナー関数は ここに定義されています 回転する角度は マウスポインタの x 座標と ステージの中心座標との差を取り それに比例係数を掛けて 回転角としています 回転させるメソッドは appendRotation を使っています 回転角と軸は y 軸です append の場合 そのインスタンスが置かれた親タイムライン 親オブジェクトの基準点を原点に変形されます インスタンスの中心 基準点を中心としている場合には 親のタイムラインの基準点に appendTranslation で 移動してあげる必要があります Sprite の元は MovieClip インスタンスでしたけれども その座標を引き算することによって 親のタイムラインの基準点に 自分の基準点を一致させます そして appendRotation で 回転した後改めて appendTranslation 移動のメソッドで 元の場所に戻すということで インスタンスの基準点を中心に 回転するというアニメーションに なるわけです もっとも Sprite そのものは 放っておけば空っぽです 面を作るための関数を定めて それを呼び出して ライブラリのビットマップから 作ったオブジェクトを Sprite のインスタンスとして返す という関数があります それを Sprite の中に追加していく つまり Sprite の入れ子を 作っていくわけですね この関数の内容を もう少し見ていきましょう では ここは 畳んでしまいます この面を作る関数は ライブラリのビットマップに定めてある- クラスを引数として渡します そうすると このビットマップのイメージを持った- Sprite のインスタンスを作って 返してくれます ですからそれを addChild している 親の Sprite インスタンスに addChild しているということです 具体的にどういう処理かというと 先ず 入れ子になるわけですけれども 面の Sprite を 1 つ作ります これは空っぽです そこに今度は Bitmap のオブジェクトを作ります そのコンストラクタには ライブラリの ビットマップに定めたクラスを new で呼び出すということになっています この変数は引数で受け取った- ライブラリのビットマップの クラスということになります ですから ライブラリのビットマップが入った- Bitmap オブジェクトが 出来上がりますので それを最初に作っておいた Sprite に addChild を子どもとして加えます あとビットマップの左上隅が 基準点になっているので 返す Sprite の基準点と ビットマップの中心が合うように 左上に少しずらしています ビットマップは 100 ピクセル四方 という風に決めているので その半分の値を変数にとって 便利に使えるようにしてあります そして最後に Sprite のインスタンス ビットマップが入った Sprite の インスタンスを返しているという処理です 面を作る処理は関数にしましたので ビットマップでクラスが定めてあれば 幾つでも作ることができます では例えばこれをコピーして そしてペーストします 渡すクラスを 別のビットマップの名前にします これで出来上がるんですけれども 位置がピッタリと同じですから 2 つ重なってしまって 片方しか見えません そうなると座標をずらすことが できるようにした方が良いですね 具体的には x y 座標を この後に引数として加えます まだ加えてないのですが 加えたつもりで書いてしまう z 座標を手前に持っていきたいと 思いますので マイナス変数にとっておいた nUnit を使います そして今度はもう 1 個は奥の面にします ということはプラスで nUnit こういう風に渡せるように 関数に変更を加えよう ということになります 関数に x y z の座標を 引数として加えましょう nX とします Number です 同じように nY で Number nZ で Number です 引数に受け取った x y z 座標は Sprite の座標として 設定することにします この後にペーストして x を nX ですね 同様にペーストして y を nY もう 1 つペーストで z を nZ ということです ムービープレビューを 確かめてみましょう 制御メニューから ムービープレビューです 2 つの面が前後 少し間隔を離して回転していますね 重ね順については 何の処理も加えていませんので 元々の重ね順のままです つまりペンギンが 常に後ろにある状態ですね ただ遠近感は ちゃんと与えられていますので 現在のところは これで我慢しておきます 一旦 SWF を閉じましょう 面をまたもう 1 つ加えます コピーしてペーストです クラス名を変えて 今度は x 座標は 0 にして z 座標ですね失礼しました z 座標は 0 にして x 座標を右に持っていきます これで確認してみましょう 制御メニューから ムービープレビューです 3 つが並びましたね 最終的には 4 つのビットマップを y 軸を囲むように 四方に並べたいです ということは 3 枚目に加えた このビットマップですね鹿のような これを 90 度回転したいです ですから関数に今度は回転角 y 軸に対する回転角の 引数を加えましょう つまりここに前面は回転しません 後面は回転しなくても良いのですが せっかく作るのですから 裏向きにしましょう そして右向きの面は反時計回りに 90 度ということになります そしてこの引数を関数に加えます y 軸で回しますので nRotationY としておきます 回転もやはり Sprite のプロパティに設定します RotationY ですね それをこの引数の値 コントロールもしくはコマンドドラッグで タイプミスをしないようにコピーします もう一度ムービープレビューを 確かめましょう 制御メニューから ムービープレビューです コの字型に面が 配置されています 重ね順が設定されていないので たまに変な風に見えますけれども 配置座標については 問題ないようです では閉じましょう 4 つ目の面を加えましょう では このステートメントを そのままコピーしてしまいます ペーストです そしてクラス名をちゃんと書き換えて これが右側の面になりますので 今度は左側ということで プラスマイナスを逆にすれば良いですね 回転も同じです プラスマイナスを逆にします 一旦保存しましょう ファイルメニューから保存です ムービープレビューで 確かめてみましょう 制御メニューから ムービープレビューです 4 つの面が四角く並んでいますね 重ね順については今回は見送ります 座標がきちんと反映されて 遠近法が 適用されていれば大丈夫です 良さそうですね では SWF は閉じてまとめましょう おさらいするのは面を作る関数と その呼び出しですので 他の所はたたんでおきましょう メインタイムラインに おおもとの親となる Sprite を addChild で加えて その Sprite に子どもとして 4 つの面を addChild で 加えています その時に面を作る関数を 定めたのですが 元々は引数に ライブラリのビットマップに定めた クラス名だけ渡していたのですが 位置関係を整えたいために 座標や y 軸の回転角という引数を 加えています image という変数のクラス ライブラリに設定したクラスに加えて x 座標 y 座標 z 座標 更に y 軸における回転角を加えています それを全てリターンする 返す 作って返す Sprite 子どもの Sprite ですね その Sprite の座標と y 軸の回転角 rotationY に 設定しています そうすることによって 子どもの座標回転角が変わった状態で 親に加えられますから 親の方は位置関係については 特にいじる必要がありません 後はアニメーションは 親を回してしまえば 中のインスタンスも当然回ってくると 但し重ね順は 次の課題として残されています

ActionScript 3.0による3次元表現の基礎

このコースではActionScript 3.0の基礎を学んだ人を対象に、3次元空間を使ったオブジェクトの動かし方について学習します。ActionScript 3.0の3次元を扱うクラスの扱い方を説明するとともに、その基礎となる数学や物理の考え方についても解説します。

3時間53分 (29 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。