基礎から学ぶActionScript 3.0

マウスポインタのステージ中央からの距離にスピードを比例させる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタのステージ中央からの距離に、インスタンスのスクロールスピードを比例させます。反応は比例係数で調整します。
講師:
06:20

字幕

今 開いている Flash ムービーは、 インスタンスが水平方向にスクロールします。 そして、スクロールする方向は、 マウスポインタの位置によって、 中心から右か、左かによって、 変わるようになっています。 そして、インスタンスは、 ステージ端を越えると、 反対側から出てくる。と、 そういうアニメーションです。 そこで、 このスクロールするスピードを、 中心からの距離に 比例するようにしてみたいと思います。 アニメーションを あるパラメータに入れさせる。 という例を作ってみましょう。 では SWF は閉じます。 アニメーションのスクリプトは、 シンボルの中の フレームアクションとして書かれています。 ですから、インスタンスを ダブルクリックして、シンボルを開けます 「シーン1」の右側に、 ムービークリップシンボルのアイコンと、 シンボルの名前が表示されましたので、 現在、シンボルを開けて、 編集状態になっています。 「タイムライン」の scriptsのレイヤー、 キーフレームを右クリックして、 「アクション」パネルを開きます。 インスタンスをアニメーションさせますので、 addEventListener で、 イベントは Event. ENTER_FRAME の リスナーを登録しています。 xScroll という リスナー関数がこれです。 そして、この中で、 インスタンスがスクロールする 方向を決めているのが、 この部分です。 nNewSpeed という変数を宣言し、 nStageCenter という変数は、 ステージの真ん中の位置の座標です。 x 座標ですね。 そしてそれが、マウスポインタの位置が ステージセンターよりも左側だったら、 nNewSpeed というこの変数に、 nSpeed 現在、正の数の 5 が入っています。 これを代入します。 そうでない場合、つまり、 マウスポインタが右側にある場合には、 今度は nSpeed の値を、 - (マイナス)を付けて代入しています。 そして、その値で x 座標を加算し、 スクロールさせていますので マウスポインタの位置によって, 右に動いたり、左に動いたり、 ということになるわけですね。 では、マウスポインタの位置が 中心から離れるほど、 スピード早くするには、 どうしたらいいでしょう。 これ実は、結構簡単です。 この if ステートメントをなくします。 完全に削除してしまうと、 ちょっと心配なので、 コメントアウトします。 コメントアウトは // で、 1行ずつコメントアウトすることも できますが、 /* でコメント始まり、 */ でコメント終わりということで、 範囲を決めてコメントにすることができます。 「ブロックコメント」と言います。 これで、この if ステートメントの部分は、 すべて無効になりました。 じゃ、この nNewSpeed を どうやって決めるかというと、 いきなり nStageCenter の 変数値ですね。 引くことの ステージから見た マウスポインタの x 座標。 これでいいです。 ムービープレビューで確かめて見ましょう。 「制御」>「ムービープレビュー」です。 真ん中に持ってくると、 スピードがゆっくりになります。 左に持って行くと、 スクロールする方向が右になり、 右に持って行くと、 左にスクロールします。 ほぼ出来上がったんですが、 1つだけ、とても大きな難点があります。 端っこの方に持って行くと、 どっちにスクロールしているのか わからなくなりますね。 この値の調整が必要です。 比例係数の調整をします。 では、 SWF は閉じましょう。 スピードと方向を決めている、 この nNewSpeed の右辺を もう一度、確認しましょう。 これは、どういう式かというと、 ステージの中心の水平座標 と、 マウスポインタの水平座標の 差を取っています。 ですから、中心からマウスポインタの 位置が離れるほど、スピードが早くなります。 もっとも、単純な比例です。 ですから、中心から マウスポインタが 100 ピクセル離れれば、 スクロールする1回のピクセル数も、 100 になります。 ですから、どっちに飛んでいるか 分からなくなるですね。 ということで、これに対し、 比例係数を付けます。 今の比例係数は、単純に、 1 が掛け算されていると 考えてもいいですが、 そこにもっと小さい値、 1 より小さい値、 例えば、 0.2 という値を掛け算します。 あと、ここの部分ですね、 コメントアウトしています。 消しちゃってもいいですが、 行を全部選んで、 この - (マイナス)のマークが出てきます。 これをクリックすると、 畳むことができるので、 このようなコメントで あまり見る必要がない所は、 畳んでしまうといいでしょう。 これですっきりしました。 では、ムービープレビューを確かめてみます。 「制御」>「ムービープレビュー」です。 今度は、端っこに行っても、 どっちにスクロールしているのか、 ちゃんとわかりますね。 そして中心に近づくほど、 スピードは遅くなります。 ほとんど止まってますね。 中心からの距離と、 それから、どちら側にマウスポインタを 持ってきたかによって、 スクロールする方向と、 スピードが変わります。 なお、フレームアクションの nSpeed という変数は、 もう使わなくなりましたので、 削除してしまっても構いません。 ここではコメントアウトしておきます。 ここでご紹介したのは, マウスポインタの位置が、 ステージの中央から どれくらい離れているかによって、 スクロールするスピードを比例して、 アニメーションをさせるということです。 そして、そのスピードの調整として、 パラメータですね。 調整係数を付ける。 この場合には、比例係数になります。 そうしたアニメーションの作り方を ご紹介いたしました。

基礎から学ぶActionScript 3.0

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

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

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

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

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