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

ビットマップをマウスポインタの水平座標に応じて回す-前編-

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ビットマップのインスタンスを、マウスポインタの水平位置に応じて、3次元空間のy軸で回します。
講師:
07:53

字幕

ステージに置いたインスタンスが 水平方向に回転します そして その回転のスピードは マウスポインタの中心からの 離れた大きさによって 方向と速さが変わっています これ自体は どこかで 見たことがあるかもしれませんが 注目していただきたいのは ステージには何もありません タイムラインもキーフレームも これ空っぽですね それからライブラリです ビットマップのシンボルが 1 つ入っているだけで MovieClip インスタンスが ここに作られている訳ではありません では swf を閉じたいと思います 完成品の Flash ムービーファイル fla ファイルは閉じます そしてサンプルとして開いてある この fla ファイルを書き換えて 先程の様な形にしたいと思います こちらの fla ファイルは ステージに予め MovieClip インスタンスが置いてあります 名前は my_mc と付けてあります ムービープレビューで動きを確認しますが 予めステージに置いてある MovieClip インスタンスを 見た目は同じ様ですけれども マウスポインタの位置によって 回転が変わります では swf を閉じます メインタイムラインに書いてある フレームアクションを確認しましょう キーフレーム 右クリックして アクションパネルを開きます インタラクティブなアニメーションは EventListener を Event の ENTER_FRAME というイベントに登録しています Listener 関数は こちらに定義してあります その中で先ず マウスポインタの水平座標と この変数は インスタンスの x 座標なんですが インスタンスはステージ中央 そして基準点を真ん中に置いていますので 結局ステージ中央という風に 考えていただいて結構です その差を取って それに比例する形で 回転角を増やしていきます この角度を変数に入れるんですが その時 単純なピクセルな値ですと 大きすぎますので それを 割引くための変数が宣言されています そうして決めた角度を インスタンスの rotationY に 足せばいいんでしょうけれども 単純に足してしてしまうと rotationY というプロパティは どんどん 値が無制限に大きくなる 或いはマイナスになってしまします そこで そのための処理が その 2 行になっています インスタンスの プロパティにいきなり値を設定せずに インスタンスの回転角を足し込んだ 値を一旦変数に入れます この値はもしかすると 360 よりも 大きくなるかもしれませんし -360 よりも小さくなるかもしれません それを剰余を取ることによって 360 周期 つまり ±360 度以内に収めておいた上で 改めてインスタンスの プロパティに代入するという形で 回転を行っています さて このムービーを変更します 先ずはアクションパネルを一旦閉じて ライブラリのビットマップは残します MovieClip のシンボル これを消してしまいます 下のゴミ箱のアイコンですね 削除 ステージからも なくなりました そしてタイムラインは フレームが白くなっていますので 何もないということが分かります ではこのビットマップ ライブラリにあるビットマップから インスタンスをスクリプトで 作りたいと思います そのためにはスクリプトで このビットマップを 指示するためのクラス名が必要です それを設定しましょう ビットマップにクラスを設定するには ライブラリのビットマップを 右クリックして プロパティのダイアログを出します そして Action Script というタブです ここで Action Script 用に書き出し ちょっと分かりにくいでしょうけれども Action Script でこれを このシンボルからインスタンスを作りますよ という場合なんですが これを選択します そうするとクラス名を 定めることになっています デフォルトではシンボル名が そのまま入りますが 簡単なため ここは image という名前にしたいと思います image というクラス名を付けました では OK ボタンをクリックします 警告が出てきますが これは気にせずに OK を押してしまってください ライブラリのビットマップには クラス名を付けましたので スクリプトを書いていきましょう キーフレームを右クリックして アクションパネルを開きます 先ずはライブラリのビットマップから インスタンスを作って ステージに置いてみたいと思います my_mc は無くなってしまいましたので また後で復活させますけれども この addEventListener 以降ですね これをコメントアウトします /* で これ以降 無効ですね それか閉じが */ です これで この部分が一旦無効になっています 後 my_mc は無くなってしまいましたから ステージ中央の座標は stage. stageWith を半分にして 設定することにしましょう これで位置は変わりません ではライブラリのビットマップから インスタンスを作るにはというと new の先程 image という名前を付けましたね それを使います Image と (( ちょっと失敗しましたね Image です これでビットマップの インスタンスが出来上がります 但しこれは このままでは ステージに置けないんですね addChild はできません では どうするかと言うと これをビットマップというクラスで ビットマップという オブジェクトで包んであげます ビットマップというオブジェクトを作るには new Bitmap です インポート宣言が自動的に入ります 消しても大丈夫ですけれども 残しておいても問題はありません ここ なんか繋がって 変な感じになっていますが この後は当然括弧です そして この括弧の中に ライブラリのビットマップから作った インスタンス オブジェクトを包むんですね こうすると このビットマップは ステージに表示させることができます ですので変数に入れましょう var myBitmap にしましょうか 型指定は もちろんビットマップです これで このタイムラインに addChild をすることができます つまり このタイムラインの子にして ステージに表示するということですね コントロール若しくは コマンドドラッグでコピーします ムービープレビューを確かめましょう 制御メニューからムービープレビューです ステージの左上隅に ビットマップの ライブラリのビットマップから作った オブジェクトを包んだ Bitmap というクラスの インスタンスが表示されました では確認ができましたので swf は閉じましょう 用語について ここで一旦確認しておきます ライブラリにある画像イメージですね これはプロパティを見ると ビットマップ プロパティ つまりビットマップという風に カタカナで表記されています けれども そのインスタンスを作って 包み込んだ Bitmap という 英語のビットマップのクラス これはカタカナのビットマップとは 別物ですので 区別するようにしてください

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

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

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

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

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

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