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

複数のビットマップを水平に回す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ひとつのSpriteインスタンスに複数のビットマップを加えて、3次元空間で回します。
講師:
10:09

字幕

この Flash ムービーファイルは ステージには予め何も置かず ライブラリのビットマップから インスタンスを作ってステージ上に配置し 水平に回転しています この回転するスピードと方向は マウスポインタの中心からの 離れ方によって変わってきます このライブラリに もう 1 個 ビットマップを用意してあります このビットマップも加えて 前後関係を付けてインスタンスを 回してみたいと思います では swf は一旦閉じましょう ライブラリのビットマップには 予めクラス名が付けてあります 既にスクリプトで回しているのが image0 という名前で これから加えようと思っているのが image1 と言うクラス名です メインタイムラインに フレームアクションを書いて image0 の方を回していますので 距離を確認してみましょう 右クリックでアクションパネルを開きます 先ず 空っぽの Sprite のインスタンスを作って そのインスタンスを addChild メソッドで メインタイムラインの ここに加えています Sprite には未だ何も入っていません さて一方でライブラリの image0 というクラス名を付けた インスタンス ビットマップからインスタンスを作って それを Bitmap クラス 英語の Bitmap ですね そのインスタンスに包んで ビットマップのオブジェクトを作ります そして先程説明した Sprite の オブジェクトに その子どもとして ビットマップのオブジェクトを加えています 次にインスタンスの位置合わせです Sprite のインスタンスの方は 変数に ステージ幅の半分 ステージの高さの半分を x と y 座標のプロパティ 変数に取って それを設定していますから この Sprite インスタンスは ステージの中央に置かれます そして その中にビットマップの オブジェクトがあるんですが ビットマップのオブジェクトは 左上隅が基準点になっています ですから丁度真ん中に来るようにするには 幅と高さの それぞれ半分 左上に持っていく必要があります ビットマップの大きさは 100 ピクセル四方と決めておいたので その半分ですね それを変数 N unit と 単位という意味なんですが ーという変数に取っておいて 左です 左上ですから x 座標をその 100 の半分 要するに -50 ですね 左に持っていって -50 上に持っていくということで インスタンスをステージの中央に 表示することにしています 後はアニメーションの部分ですね EventListener の登録をしていますが アニメーションの場合には Event の EMTER_FRAME というイベントに Listener 関数を登録します こちらがその Listener 関数 マウスポインタの x 座標と ステージ中央の差を 回転角に反映させる訳ですから それに 比率を掛けていますね そのままの数字では大き過ぎるので 0.2 という比率を掛けて 回転角を調整しています その回転角を 設定すればいいんですけれども 3 次元の 回転のプロパティの値というのは 放っておくと幾らでも 大きくなってしまうので 先ず Sprite の 回転角を足し込んでいて それを 360 の剰余を取るということで 360 でまた 0 に戻るという 周期的な値にしています そうしておいた上で Sprite の rotationY y 軸で回転する プロパティーの値に設定しています 2 つのビットマップは 前後関係を付けて回そうと思いますので 今配置しているビットマップ これを少し手前に持ってきましょう ということは このビットマップのインスタンスの z 座標を設定すればいいですね これをコピーしてしまいましょう コピーをして ペーストです z を 手前は 符号がマイナスになります ですからこれで z 座標が少し手前になります アニメーションがどう変わったか この段階で一旦ムービープレビューを 確認しておきましょう 制御メニューからムービープレビューです 少しインスタンスを 手前に持ってきましたんで 手前に出てきたり 後ろに引っ込んだりと 大きさは変わっていますよね これで z 軸の位置が少し変わった ということが確認できたと思います では swf は一旦閉じます このスクリプトに もう 1 つのビットマップ クラス名が image1 ですけれども これを加えましょう 基本的な処理は image0 の処理と同じです ただ 座標位置関係だけ 少し変えることになります 基本的にはですから コピーペーストでいきましょうか コピーします そしてペーストです 名前は image1 に変わります それから変数名も変えないといけませんね Front というのを 1 番目の ビットマップに付けましたので 今度は Back にしましょう このインスタンス名を コピーしておきましょうか その前に その前に こちらへコピーしましょう これをコピーして addChild ですね Sprite に加えているこの部分 先にペーストして それから bitmapBack をコピーします addChild の中身を変えますね ペーストです Sprite はこの場ですから bitmapFront とありますけれども バックも同じように ペーストです ショートカットを使ってしまいますね コントール若しくはコマンド V です コントロール V コマンド V で なぜか 4 つ 3 つでいいんではないかと 思うかもしれませんが rotation を変えようと思います というのは後ろですから ビットマップも 後ろ向きにしようということですね なので rotation y 軸方向で回しますので rotationY これを 180 ということで後ろ向きにします 後 x y z ですね そこは設定するのは フロントの方と同じですけれども 勿論 座標を変えますよ z とそして 1 周回転させて裏向きにしましたので 正の数ですね Unit y はフロントと変わりません そして z は 奥にします奥は + です 回転のアニメーションは 親の Sprite ごと回していますから いちいちビットマップ 1 つ 1 つについて 回したりするという必要はありません ですから これで確認してみましょう 制御メニューから ムービープレビューです 2 つのビットマップが 前後関係付いて回っています ただ 何か妙なことに気付かれたかもしれません ペンギンは 常に後ろになってしまうんですね 前に来ません これはですね Flash では前後関係 重ね順というのは z 軸で管理していません 3 次元の機能が備わる前から 重ね順というのがありまして これについては特別な仕様は 加えられていませんので z 方向が奥になったからといって 重ね順が 奥になるということはないんですね つまり重ね順は 別に判断して処理しなければなりません それは また次の課題としますので とりあえず 2 枚の見た目がちゃんと 奥か手前かによって大きさが変わっています 回転していますので この段階では ここまでということにします ではまとめましょう swf は閉じます フレームアクションを もう 1 度見ておさらいです 2 枚目のビットマップ クラス名を 違う名前が付けてあります これを加えるんですけれども 基本的に 1 枚目を加えたのと 処理の流れは変わりません つまり 付けた名前でインスタンスを作り そのままではステージに置けないので Bitmap 英語の Bitmapですね Bitmap クラスのインスタンスを new で作って包みます そして そのインスタンスを予め作っておいた 1 枚目も入っている Sprite のインスタンスに addChild します その上で位置調整ということになります 位置は 1 枚目が左上 そして手前ですね z が手前です ーだったので 2 枚目のビットマップは 向きを反対向きにしました 裏返しました その上で裏返したので x 座標は + 方向ですね y 座標は 1 枚目と同じです z 座標は 1 枚目が手前マイナスなので 2 枚目は奥にしました + です 後のアニメーションの部分は 元々と変わっていません それからこの処理までの注意ですね インスタンスの重ね順です もう 1 回ムービープレビューを 確認しますけれども z 座標の奥か手前かによって大きさが変わる という部分では きちんと処理されているんですが Flash の仕様として 重ね順は別に 考えなければいけないということです これが次の課題になってきます

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

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

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

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

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

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