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

プロパティの天動説と地動説

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
座標のプロパティは、原点がインスタンス自身か親オブジェクトかを区別しなければなりません。
講師:
13:03

字幕

マウスポインタの位置に合わせて インスタンスが 追随する くっ付いてくるという こういうムービーを作ってみたいと思います インスタンスの座標と マウスポインタの座標を どう扱うかというのがポイントになります swf は一旦閉じます ただ このムービーをいきなり作り始める前に Action Script 3.0のアニメーション スクリプトによるアニメーションの基本を 別のムービーでちょっと おさらいしておこうと思います この Flash ムービーファイル いわゆる fla ファイルには ライブラリに MovieClip クリックシンボルが作ってあります そして現在この画面は MovieClip シンボルを開いた状態です 左上を見てみますと シーン 1 という横に MovieClip シンボルのアイコンと MovieClip シンボルの名前 Pen と用意されています そしてこのMovieClipの タイムラインのフレームには スクリプトが書いてあります 所謂フレームアクションですね アクションパネルを 右クリックで開いてみます ごく簡単な 7 行のスクリプトですけれども とりあえず結果を確かめてみましょう 制御メニューから ムービープレビューで確かめます Flash Professional を使用します この MovieClip シンボル インスタンスが 右にスクロールして ステージ右端を越えると また左端から現れるという こういう動きです そして後ろに見えている フレームアクションが その処理を行っています では 確認ができましたので swf のウインドウは閉じましょう このフレームアクションには アクションスクリプトの基本となる テクニック文法が使われていますので それを確認した上で 課題のマウスポインタの後を追いかける MovieClip に書き換えたいと思います 先ず 基本その 1 ですけれども アニメーションというのは フレームが切り替わったら もう少し正確に言うと フレームを描画する時に 何か処理を行います こういった処理を行う時は 何かが起こった時 これをイベントと言うんですけれども イベントに対して スクリプトを書くことになります そうすると 何が起こった時というイベントを指定して そしてメソッドとして addEventListener というメソッドを呼び出します そして第 2 引数には メソッドの第 2 引数には このイベントが起こった時に やりたいことを 関数を定めます そして関数はここに定めてあるんですが もう一度確認しますと addEventListener というのは 「このイベントが起こった時 これをやってください」 ということをお願いするメソッドです そして イベントはこの場合は ENTER FRAME というのが 画面を書き換える時 フレームが切り替わって先に進む時 ですからアニメーションでは この ENTER FRAME を使うのが基本です そしてやりたいことを関数 ここでは xMove という名前を付けました を定めます 関数は function という キーワードからスタートし 関数名を定めます そして括弧の中には 引数が加えられるんですけれども EventListener この addEventListener で登録した 関数のことを EventListener という言い方をします 或いは Listener 関数と言うんですけれども Listener 関数は必ず 引数を受け取ります そしてその引数のデータ型というのは イベントのデータ型と一致させます それから戻り値 関数が値を戻すかということなんですが 戻り値はありません ない場合には コロンの後に void を定めます そして関数本体 処理の本番の処理が ここに書かかれています 内容は具体的には X 何もついていませんね 誰の X かと言うと 今スクリプトを書いている MovieClip の x 座標です それに +=5 ということで 5 ピクセル右に動かします ただ 単に動かしていると ステージの右端を超えてしまいます もし超えてしまったら 左端から出したいので ここでその条件判定を行っています 条件判定は if でスタートし 条件を括弧の中に書き込みます この条件はもし x 座標が と こちらの値よりも大きくなった時 この条件に当てはまると if statement の中の この中括弧に書いた処理が行われます 条件に当てはまらないと この処理はスキップされるということです そしてこの条件の右辺にある stage.stageWidth というのは ステージというのは このタイムラインが置かれている いわば一番トップにある Flash プレイヤーの 一番トップの部分になります そのステージに対して 「ステージの幅はいつですか」と尋ねるのが この stageWidth というプロパティです ステージの幅というのは要するに ステージの左端が 0 ですから 右端の座標を意味します ということで もしこのインスタンスの x 座標が ステージの右端よりも大きくなったら この処理を行います 大きくなければスキップされますので ただ単純にコピー規制が加えられるだけです もし右端を超えてしまったら 左端に戻します その時はステージの幅を 差し引いてあげればいいですね -= は差し引くです += は足し込むということで これで先ほどの様な 水平スクロール 右スクロールをして ステージ右端を出ると 左端に戻るという動きになる訳です では このスクリプトを書き換えて マウスポインタの後を追いかける というスクリプトに書き換えたいと思います こういう場合いきなり x 座標 y 座標両方扱ってしまうと 何かトラブルが起こった時に 原因が分かり辛くなりますので 先ずは水平方向にだけマウスポインタの後を 追いかけるようにしたいと思います x 座標を 5 ピクセル右に動かす というのがここにあります プロパティ X は同じですので ここだけ残して消しましょう そしてマウスポインタの x 座標は mouseXです では x 座標を マウスポインタの x 座標と 一致させればいいと こう書きたくなりますけれども これではだめです ムービープレビューで確かめてみましょう 制御メニューから ムービープレビュー Flash Professional を使用です チカチカしていますね マウスに反応はしているようです けれども希望する処理ではありません 希望する動きと違いますよね なぜチカチカしてしまうんでしょうか 一旦 swf は閉じましょう 問題は この 3 行目です プロパティの X これはインスタンスの x 座標です プロパティの mouseX これはインスタンスの マウスポインタの x 座標です ところが基準が違うんですね X というのは インスタンスの座標で このインスタンス座標は インスタンスが配置された親 今 MovieClip シンボルの中で スクリプトを書いていますので メインタイムラインから見た この MovieClip インスタンスの座標になります ところが mouseX というのは 自分から見た座標ということです アクションパネルのウインドウを閉じます 基準点ここで上げますね 小さくバッテンがあります これがこのインスタンスの 原点 基準点になります ですからここから見た マウスポインタの座標ということです ですからマウスポインタが ここにあると mouseX はプラスになります ところがこちらにあると マウスポインタは インスタンスから見ると マイナスの座標になるんですね ところがマイナスの座標を インスタンスの座標に当てはめてしまうと ステージの外に行ってしまいます ステージの外に行くと マウスポインタは今度は動かなくても 値がプラスになりますから ステージの中に戻ります これを繰り返すのでチカチカしてしまう ということが起こる訳です フレームアクションを アクションパネルをもう一度 右クリックして開きましょう X というのは 親から見た座標ですね 言ってみれば地動説です 宇宙の中心から見て 地球がどこにいるかという 測り方と一緒ですね ところが mouseX これはインスタンスから見た座標です ですから天動説ということになります 地球から見ると 太陽が昇って沈んでいる 勿論地球が太陽の周りを回っているのであって 本当はそうではないんですが 自分から見ればそうなる訳です その 2 つを単純に = で結んでしまったところに 問題があったんですね どうやって解決したらいいかと言うと 宇宙を中心にするのか 地球を中心にするのか つまり地動説なのか天動説なのか どちらか一方に決めましょうということです つまり 2 つ解決方法がありますけれども 今回は俺様基準で行きたいと思います 天動説で行きましょう ではどう考えるかと言うと 例えばマラソンで 自分の前に追い越したいランナーがいると そこまで 100 メートルある 追いつくにはどうしたらいいかと言うと 100 メーター埋め合わせればいいですね つまり自分から見て これだけ足りない 逆に言えば 後ろにいる場合には 自分の方が手前になる ということにもなる訳なんですけれども いつにしても その差がある部分を 足し込んであげれば解決がつきます これで結果を確かめてみましょう 制御メニューから ムービープレビューで見てみます マウスポインタを水平に動かすと ちゃんと水平についてきますね 勿論水平にしか動かしていませんので 上下に動かしても 水平分しか付いてきませんが X 座標については少なくとも 意図通りの動きになりました では swf を閉じて y 座標の方も同じ処理にしましょう スクリプトを書き加えます これはコピーしなくても 打ち直してもいいでしょうね += Y+= の mouseY 色が青くなってタイプが 正しいことが確認できますので セミコロンで ここでファイルは一旦保存しましょう ファイルを保存します ムービープレビューを確かめます 制御メニューからムービープレビューです X 方向も Y 方向も きちんとマウスポインタの後に インスタンスが付いてきます これで子題は出来上がりということですので swf を閉じておさらいをしましょう 先ず 1 つ目は EventListener の扱い方です addEventListenener というメソッドで 「何が起こった時に これをやってください」 という引き数を定めます 今回はフレームが切り替わった時 フレームの描画が行われる時 という時に使われるアニメーションの いわば 乗積なんですけれども イベントの ENTER FRAME というイベントを定めました そして第 2 引数には 実行する関数の名前を加えます そして関数は function そして関数名 引数は 1 つだけ この指定したイベントと 同じクラスのデータ型の オブジェクトを受け取ります 戻り値はありません そしてこの中括弧の中に関数処理 本体を書き込みます そして次にマウスポインタと インスタンスの座標 この 2 つの扱いです インスタンスの座標は x と y マウスポインタの方は mouseX mouseY と プロパティそのものは非常に簡単なんですが 気を付けなければいけないのは 原点が違うということです X と Y は 地動説のプロパティ ですから 宇宙の中心から見たのと同じように 自分の外から具体的には 自分が配置されたタイムライン ここではメインタイムラインですけれども そこから測った座標になります ところが mouseX mouseY は 自分の基準点から見た座標 ですから天動説ですね 天動説のプロパティだと言うことです ですから単純に = で 結んでしまってはいけません そこでどうしたかと言うと 天動説で揃えたんですけれども 自分から見た 足りない分或いは 多い分を現在の座標に 足し込んであげればいいでしょう と言うことですね そうすることによって マウスポインタの後を追いかける インスタンスの スクリプトができました

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

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

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

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

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

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