基礎から学ぶActionScript 3.0

変化するパラメータ値を設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インタラクティブなアニメーションに応じて、パラメータの値も変えます。マウスポインタとの距離にパラメータ値を対応させましょう。
講師:
10:43

字幕

この3つの ムービークリップインスタンスは、 マウスポインターの後を 異なったスピードで追いかけます。 それだけでなく、 アルファが変化しています。 このアルファは、マウスポインターとの 距離が離れるほど、 透明度が上がるようになっています。 距離に応じてアルファの値が 変わるように、というスクリプトを 加えてみたいと思います。 この3つのインスタンスは、 同じ1つのムービークリップシンボルから 作られています。 そして、スクリプトは このムービークリップシンボルの中に フレームアクションとして 設定されていますので、 「ライブラリ」でアイコンを ダブルクリックして、 ムービークリップを編集状態にします。 「シーン1」 Pen という、 ムービークリップの名前が表示されました。 ですから、現在、 シンボルの中を編集しています。 スクリプトを確認しましょう。 スクリプトのレイヤーの キーフレームを右クリックして、 「 アクション 」 パネルを開きます。 まだ、アルファを変える処理は 加えていません。 今のところは、マウスポインターの後を 遅れて追いかけるという部分です。 addEventListener で、 アニメーションですから、 Event.ENTER_FRAME に リスナー関数を登録します。 リスナー関数は、 マウスポインターの座標を インスタンスから見た座標ですね。 それを調べて、 x 座標 y 座標に加算します。 もっとも、そのまま加算してしまいますと、 マウスポインターの後を キッチリついていってしまうので、 減速率 nDeceleration という値を 掛け算しています。 この値は 0 から 1 の間の値ですので、 一気には追いつかず、 少し余裕を残して、 まだ、余分を残して 追いついていく ということです。 ですから、だんだん、だんだん、減速をして、 近づいていくことになります。 もっとも、この変数値は 値が設定されていません。 これは、メインタイムラインから それぞれのインスタンスに、 異なった値を設定するためです。 メインタイムラインからは、 この xInitialize という メソッドを呼び出して、 関数を呼び出して、 それぞれに異なった値を渡します。 そうすると、追いかける速度が、 ペンギン3つによって、 それぞれ変わってくるというわけです。 マウスポインターと インスタンスとの距離によって、 インスタンスのアルファを 変化させようという場合には、 距離を求めなければなりません。 距離を求めるには、 三平方の定理を使います。 2つの座標が (x1, y1) (x2, y2) だとすると、 この2点間の、 この座標間の距離は、 まず、 x 座標を、 2つの差をとります。 y 座標の差をとります。 それぞれ二乗して、 足し込んで、 それを平方根、 開くと距離になります。 これが三平方の定理です。 その際に使うメソッドは、 Math クラスの Math.pow pow で power と読みます。 (累乗される数 , 累乗) 、 二乗の場合には、ここに2が入ります。 そして、平方根を開くというのは、 Math.sqrt square root の意味です。 数値を入れれば、その平方根が出せます。 この式を使って、 マウスポインターとインスタンスの 距離を調べることにしましょう。 インスタンスとマウスポインターとの 距離を求める式を書きましょう。 まず、マウスポインターの座標は 一旦、変数にとっておきます。 データは Number 型です。 mouseX とありますが、 これを一旦、変数に入れます。 変数に入れて、その変数値を 代わりに、ここに入れます。 y についても同様です。 変数 nY を宣言して、 マウスポインターの座標を代入します。 代わりに、変数ですね。 あ、上が nY になってます。 nX です。 そして、距離を求めます。 Distance という変数にしましょう。 そして、 まず x 座標、 水平座標の二乗ですね。 pow で、 インスタンスの位置は、 自分中心ですから、常に 0 ですね。 マウスポインターの座標というのは、 そもそもインスタンスから見た座標ですので。 2つの x 座標を 引き算する必要がありません。 もう、直接 nY を 二乗してしまって結構です。 その分、今回は簡単ですね。 Math. 同じく pow で、 y 座標です。 nY を二乗します。 それを平方根で開くと、 Math.sqrt です。 ( は入りますけれど、 ) は自分で入れる必要がありますので、 ご注意ください。 次に、アルファを変化させます。 アルファは、 プロパティがまんま alpha です。 さて、どのように変化させましょう? 距離が増えるほどアルファを小さくしたい。 alpha は 0 から 1 までの値です。 このような場合には、 反比例を使うことが定石(お約束)です。 それでまずかったら、 別の式を考えるということなんですが、 今回は、反比例で大丈夫でしょう。 反比例というのは、分数の分母に 変化する値を持ってきます。 今回は距離です。 ですから、距離分の 1。 これを alpha に設定してみます。 こうした設定は、 パラメータの調整が必要になってきます。 そのためには、何度も設定を変えては、 ムービープレビューで 確かめるという作業が入ります。 では早速、ムービープレビューで 確認してみましょう。 「制御」>「ムービープレビュー」 です。 ウィンドウを最大化しておきましょう。 見やすいように。 何も出てきませんね。 これ、ゆっくりすると出てきます。 というのは、距離がちょっと離れると、 たちまち、 0 になっちゃうんですね。 ですから、パラメータの調整が 必要になってくるということです。 では、 SWF のウィンドウは閉じます。 alpha の値を、単純に 距離分の1にしてしまうと、 インスタンスとマウスポインターの距離が 100 ピクセル離れただけで、 100 分の 1 、 パーセントでいえば、 1 % のアルファになってしまいます。 ちょっと変化が大きすぎますね。 こういう場合には、この分母の値を 大きくすればいいです。 あ、すいません。分子です。 分子の値を大きくします。 試しに、これぐらいでやってみましょう。 ムービープレビューを確かめてみます。 「制御」>「ムービープレビュー」 ウィンドウを大きくします。 今度は良さそうですね。 かなり離さないと、 完全な透明にはなりません。 そして近づくと、 クッキリするということですね。 ただし、これは1つ大きな問題があります。 マウスポインターを止めます。 消えてしまうんですね。 この理由を確かめて、改善しましょう。 ウィンドウは閉じます。 問題は alpha を設定した この右辺の式です。 分母は距離ですね。 マウスポインターとインスタンスの座標が 一致した場合、距離は 0 になります。 0 での割り算というのは、 数学上できません。 プログラムの場合には、 できないというよりは、 とんでもない値になって、 結果として、思いもしないことが 起こるというのが通常です。 今回は、思いもしないことというのは、 インスタンスが消えてしまうことです。 では、どうしたらいいかというと、 これが 0 にならないようにします。 幸いなことに、距離というのは 常にプラスの値です。 ですから、 0 より大きい何か値を 加えれば良いということで、 0.1 でもいいんですが、 1 で十分でしょう。 加算します。 これで OK です。 もう一度、ムービープレビューを 確かめてみましょう。 「制御」 >「ムービープレビュー」 です。 ウィンドウを最大化します。 まず、動かしている時のアルファの変化は 先ほどと変わりません。 では、マウスポインター止めます。 消えませんね。 大丈夫なようですので、 ウィンドウは閉じましょう。 マウスポインターからの距離が開くほど、 アルファを下げるという スクリプトのおさらいをします。 まず、距離を求めなければなりません。 距離は、水平方向の距離の二乗を Math.pow で求めます。 同じように、垂直方向の差の二乗を Math.pow で求めます。 その2つの x y の合計を、 平方根 Math.sqrt で求めます。 これで距離が求まります。 次に、変数の値が大きくなるほど、 結果を小さくしたいという場合には、 まず、最初に試すのが反比例です。 反比例というのは、 分母に、その変化する値を持ってきます。 ただし、反比例については。 分母が 0 になってしまうと、 思わぬ結果になります。 ですから、その点については注意しましょう。 今回は 1 を足すことで 0 になることを防ぎました。 もう1つ、合わせて申し上げますと、 もし、距離が 0 になった時、 分母は1ですね。 alpha に 40 を 設定することになります。 alpha は、原則としては 0 から 1 の値ですが、 40、 1 を超える値を設定しても、 とくに問題は起こりません。 アルファ 1 、つまり 100 パーセントの場合と同じになります。 もっとも、これも、 とんでもない値を設定すると、 思いもしない結果になることがあります。 今回は 40 が上限ですので、 このままにしてあります。 以上が 距離が開くほど アルファを下げる という処理 具体的には、 距離を三平方の定理で求め、 alpha を反比例で設定しました。

基礎から学ぶActionScript 3.0

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

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

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

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

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