基礎から学ぶActionScript 3.0

イーズアウトの公式

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
目的の位置まで徐々に減速しながら到達するというアニメーションは、イーズアウトという動きです。イーズアウトによく使われる計算式をご紹介します。
講師:
07:17

字幕

このムービーでは、 インスタンスがマウスポインターの 後を追いかけます。 ただし、ぴったりと くっ付いてくるのではなくて、 少し遅れて追いかけます。 インスタンスのアニメーションに対して、 加速や減速を加えることを 「イージング」といいます。 このインスタンスの場合には、 マウスポインターに近づくほど減速します。 こういう動きは「イーズアウト」というので、 イーズアウトのアニメーションを スクリプトで作ってみましょう。 この Flash ムービーには、 イージングのない、 ぴったりマウスポインターに ついて行くアニメーションが、 スクリプトとして書かれています。 書かれている場所は、 ムービークリップシンボルの中です。 インスタンスをダブルクリックして、 シンボルをあけます。 「シーン1」の横に、 Pen というシンボル名が 出てきました。 では、 scripts レイヤーの キーフレームを 右クリックして、 「アクション」パネルを開きます。 まずは、スクリプトを順に確認しましょう。 最初に addEventListener で、 アニメーションですから、 Event.ENTER_FRAME ですね。 その Event に リスナー関数を登録します。 リスナー関数は xFollowMouse です。 ここが リスナー関数で、 そして、マウスポインターの座標に、 インスタンスの座標を 合わせているのが、ここです。 マウスポインターの座標と インスタンスの座標は、 基準が違いますので、 注意が必要でした。 マウス座標の場合は 自分から見た座標です。 そして、インスタンスの座標は、 自分が配置された親から見た座標です。 これを一致させるには、 インスタンスから見た座標、 これは自分と マウスポインターとの違いですね、 差になります。 差を埋め合わせてあげれば、 マウスポインターに追いつくということで、 こういうスクリプトが書いてあります。 このスクリプトを実行すれば、 マウスポインターのあとを きっちり付いていきます。 「アクション」パネルを一旦、閉じて 動きを確認してみましょう。 「制御」>「ムービープレビュー」です。 マウスポインターのあとを きっちり付いてきますね。 速く動かしても、 速く動かすと、若干、エンターフレームの タイミングでズレますけれども、 でも 頑張って、付いてきてます。 SWF のウィンドウを閉じましょう。 では、このアニメーションに、 減速、つまり、イーズアウトの動きを、 処理を加えてみたいと思います。 改めて、「アクション」パネルを開きます。 キーフレームを右クリックで、 「アクション」です。 変数を1つ定めます。 変数名は nDeceleration 長いですけれども、 Deceleration というのは、 「減速」という意味です。 スピードを落とす、減速ですね。 データは Number です。 数値を与えます。 あとで説明しますが、 0 から 1 のあいだの値です。 今回は 0.2 いわゆる、パラメーターに あたるんですけれども、 これを設定します。 そして、どうするかというと、 mouseX の後に、 掛け算します。 同様に mouseY の後にも、 掛け算します。 結果を見てから、ご説明をしましょう。 「アクション」パネルを閉じて、 ムービープレビューを確かめてみます。 「制御」>「ムービープレビュー」です。 今度は少し、マウスポインターの後を 遅れて付いてきますね。 確かに、イーズアウトの動きに なっています。 では、先ほどの式で、 なぜ、こういう動きになるのでしょうか? ご説明しましょう。 SWF のウィンドウは閉じます。 イーズアウトのアニメーションで 使った式は、 公式風に表すと こうなります。 プロパティに対し、 先ほどは座標でした。 自分から見た 目標の相手との差を取ります。 それを埋めてあげれば、 ただちに相手に追いついてしまいます。 それに対して、すぐに追いつくのでなく、 少し遅らせたい場合には、 0 から 1 のあいだの数字を 掛け算します。 これを「減速率」と言っていいでしょう。 そして、それを プロパティに 足し込めば、 すぐに追いつかずに、 徐々に追いつくということになります。 図でも確認してみましょう。 例えば、インスタンスがここ、 そして、マウスポインターが ここにあるとします。 そして、減速率は、 分かりやすいのは 0.5 つまり、半分なので、 半分で考えてみます。 ペンギンとマウスポインターの差を、 いきなり 一気に埋めてしまえば、 追いつきますね。 それに対して 0.5 つまり2分の1します。 すると。半分追いつく ということになりますね。 少し近づきました。 さて、次のエンターフレームの時に、 また、ペンギンと、 マウスポインターとの間の距離を 半分だけ埋めます。 また近づきますが、先ほどよりは 近づく度合いが減ります。 というのは、マウスポインターとの距離が どんどん縮まりますから、 半分追い付くその距離も 数字はだんだん少なくなります。 また、次のエンターフレーム。 さらに 、今の位置と マウスポインターとの位置を 半分近づける。 これを繰り返していくと、近づくにつれ、 動きがドンドン ドンドン小さくなります。 したがって、目標値に近づくにつれ、 だんだん減速するという処理になるわけです。 ムービークリップシンボルの フレームアクションに戻りました。 0.2 という数字を試しましたが、 変数を入れましたので、 いろいろ変えてみることができます。 数字が 1 に近いほど、 きっちり早く近づきます。 0.8 で試しましょう。 「制御」>「ムービープレビュー」です。 遅れがあんまり目立ちませんね。 かなり早く近づいてます。 では、 SWF を閉じまして、 今度は、もっと 数字を小さくします。 0.01 ムービープレビューを確認します。 今度は、なかなか近づきませんね。 だいぶ待つ必要があります。 というように、 0 から 1 までの値を与えることによって、 イージングがかかるということです。 1 ですと、それは、 減速率を掛けないのと一緒ですね。 1 を掛け算するということは 1 をかけないのと同じになりますので、 キッチリついていきます。 0 にしてしまえば、 その場で止まってしまって動きません。 0 から 1 の間の値を 設定することになります。 これを公式のように覚えて、 「自分から見た相手との差を、 減速率を掛け算して足し込む」 というふうに 覚えてください。 イーズアウトのアニメーションの ご説明でした。

基礎から学ぶActionScript 3.0

このコースではFlashのActionScript 3.0を初めて学ぶ方を対象に、ActionScriptの基礎から実際にプログラミングをするところまで学習していきます。簡単なスクリプトによるオブジェクトの操作の仕方から始まり、変数や関数といったプログラミングの基礎、そしてインタラクティブなコンテンツの作成まで詳しく解説いたします。

6時間30分 (49 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年01月16日

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

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

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