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

イーズアウトの公式

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
目的の値に減速しながら近づく「イーズアウト」には、よく用いられる式があります。
講師:
10:28

字幕

今回はマウスポインタを動かすと その後をインスタンスが追いかける というムービーを作ってみたいと思います 前に作った覚えがある と思われるかもしれませんが 動きがちょっと違います ぴったりとくっ付いて来るのではなくて 少し遅れて付いて来ます 所謂イージングということ なんですけれども Flash 使いが好きな動きです こういう動きを作ってみましょう では swf は一旦閉じます この完成品の Flash ムービーは閉じまして もう 1 つ用意した このムービーからスタートしたいと思います 既にスクリプトはある程度書いてあります この MovieClip シンボルがあるんですが そのシンボルの中に スクリプトがありますので ダブルクリックで シンボルを開きます Pen という名前が 付いているんですけれども MovieClip シンボルの 編集状態になっています そしてフレームアクションが用意されていて 右クリックでアクションパネルを開きます スクリプトの説明をする前に 先ずは動きを見てしまいましょう 制御メニューから ムービープレビューです マウスポインタの後を 追いかけますが きっちり付いて来ますね 遅れがありません このムービーに対して 少し遅れて付いて来るという処理を 加えようと思います では swf は一旦閉じて スクリプトを確認しましょう 1 行目は EventListener の登録です メソッド addEventListener を使って Event は ENTER_FRAME フレームが切り替わる時 或いはフレームの描画が 更新される時のイベントで アニメーションで必ず使われます そして その時に行うべき処理を 第 2 引数に関数で渡します そして関数を 2 行目で定義しています function のキーワードでスタートして 関数名 そして括弧の中には EventListener に登録した関数 Listener 関数は必ず EventObject というものを受け取ります この型は場合によって違うんですけれども EventListener で登録した このイベントのクラスで 型指定をするのが普通です そして戻り値はありませんので void ということになります 関数本体の中に そのアニメーションで行いたい処理を 書き加えます マウスポインタの x 座標 y 座標のプロパティ それにマウスポインタの x 座標と y 座標を一致させれば マウスポインタの後を 付いて行くことになります 但し インスタンスの座標のプロパティ X Y とインスタンスから見た マウスポインタの 座標のプロパティ mouseX と mouseY は 原点が違うので注意が必要です x 座標 y 座標は 自分が配置されたインスタンスがいる 親タイムラインから見た座標になります ところがマウスポインタの x 座標 y 座標のプロパティは 自分から 自分の基準点から見た 座標になりますので 単純に = で一致させるわけにはいきません どうしたかと言うと 自分から見た座標の訳ですから その部分を埋め合わせてあげる 足し込んであげることによって マウスポインタの後を 追いかけるということになります ただ これだけでは きっちりと追い着いてしまいまして あまり面白みがありません Flash 使いは大抵 イージングを使いたがるので そのイージングの加え方をご紹介します スクリプトの修正は簡単なので 先ずは書いてしまいましょう 説明はその後にすることにします 変数を 1 つ定めます 比率 率という意味で ratio と Number です そして この値を 後で少し調整してみますが 0.2 ぐらいが 何となく良さそうなので この値を使います これをどうするかと言うと コピーしまして この後に mouseX MouseY の後に 掛け算をします ペーストです 貼り付けです では これをこのまま ドラッグコピーです コントロール若しくはコマンドキーを 押しながらドラッグをするとコピーになります 一旦保存しましょう ムービープレビューで確かめてみましょう 制御メニューからムービープレビューです ちゃんと遅れて追いかけますね この遅れ方と言うのは 離れている時は始め早いんですけれど マウスポインタに近づくにつれ 減速してゆっくりになります これをイージングでは イーズアウトという言い方をします では 閉じて説明をします この処理の式を初めて見ると 余に簡単すぎて逆に 何が起こっているのか分からない という感想を抱かれる方が多いです 例えば この ratio を 1 にしたとしましょう 掛ける 1 と言うのは 掛けないのと一緒ですね ですから この場合は ムービープレビューは いませんけれども きっちり着いていることになります 掛けるが ratio が無いのと一緒です 比較的説明がし易いのが 分かり易いのが 0.5 の場合です 0.5 というのは 2 分の 1 つまり半分ですね この場合どう考えるかというのを ちょっとステージで説明しましょう 一旦アクションパネルは閉じます それからシンボルの編集状態から メインタイムライン シーン 1 に戻ります インスタンスが ステージの真ん中にいますけれども これは整列のパネルを使って 一番左端に持って行きましょう ステージを基準にして 左端に持って行きます 何をしようとしているかと言うと アクションスクリプトの気持ちになって 考えようということです マウスポインタは 例えばここにあったとします enterFrame が起こりました 先程の処理を行います ratio が 1 の場合 つまり 掛ける ratio をしない場合には マウスポインタの後を きっちりとくっ付いて来る訳ですよね ところが その埋め合わせたい距離を 0.5 を掛けて半分にしました ですから この距離の 半分だけ近づくんですね この辺でしょうか enterFrame の処理が 1 回終わりました では次の enterFrame です マウスポインタは未だここにいます そうすると この距離の 0.5 半分だけ近づきます enterFrame 終わりです また次の enterFrame へ送りました また半分近づくんですが 近づくに連れマウスポインタと 自分との距離は縮まっていますから 半分近づく距離も段々小さくなりますね ということで 段々マウスポインタに近づくほど 減速していくと イーズアウトの動きになる訳です ではファイルは復帰しておきましょう 復帰します 先程のスクリプトで使った イーズアウトの式 処理の仕方と言うのは 何も x 座標 y 座標に限りません 例えば回転角とか 或いは少し見にくいでしょうが アルファの変化とか そういったものにも様々な プロパティに使うことができます ですからイーズアウトの 公式という言い方を 私はしているんですけれども 公式の様に覚えておくと良いと思います このイーズアウトの公式というのは 目指すプロパティの値に 段々減速しながら到達する という処理に一般的に使います 式そのものは とても簡単です プロパティに対して 足し込みます それは自分から見た値 もう少し正確に言うと 自分から見た目標と 自分の値との差になります それに対して その足し込んでしまう きっちり その値になってしまいますので 減速率 先程は ratio という名前の変遷をしましたが それを掛け算にします この値は 1 より小さくです 1 ですと きっちり動いてしまいますので このイーズアウトにはなりません さてプロパティの mouseX mouseY は インスタンスから見た 自分から見た マウスポインタの x 座標 y 座標でした でも常に自分から見た座標が 自分から見た目標値が 取れるとは限りませんね 例えば座標で言っても ステージの真ん中に イーズアウトしたいといった場合 ステージの真ん中の座標は分かりますけど 自分から見た値って言うのは 取れないですね そういう場合にどうしたら良いかと その場合には引き算をすればいいです ステージの真ん中なら ステージの真ん中目標値があります そして自分の今の値があります それを引き算してあげれば 自分から見た値になりますので 同じ式が使えます では もう一度フレームアクションを見て おさらいをしましょう ステージにある MovieClip インスタンスを ダブルクリックしてシンボルの編集にします それからフレームアクションを 右クリックでアクションパネルを開きます Listener 関数の中の この 2 行の処理を確認します インスタンスの座標である X Y のプロパティと mouseX mouseY と言う マウスポインタの座標の処理です 但し気を付けなければいけないのは 基準が違う X Y は親から見た座標 mouseX mouseY は 自分から見た座標です ですから この ratio はちょっと除いておいて X に対して mouseX を += 足し込んであげると x 座標と マウスポインタの位置が きっちり一致します y 座標についても同様です これだけでは きっちりくっ付いて行ってしまうので イーズアウトにするには どうしたら良いかと言うと 比率を定めます 変数に入れました 値は 0 から1 の間の値です それを掛け算してあげると きっちり付いて行かずに 少し割り引いて付いていく と言うことになります 例えば 0.5 であれば半分ですね 0.2 と言うことは付いて行く行き方が もっと少なくなります それを掛け算して 足し込んであげる そうすることによって イーズアウトの動きになります 一般的にプロパティに対して 足し込むことの 自分から見た値若しくは 目標と自分の値の差ですね それに対して 0 から 1 の間の 比率を掛け算してあげる これがイーズアウトと言うことでした

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

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

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

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

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

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