Flash Professional CC 2015 基本講座

マウスポインタの位置に応じてスピードを変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタの位置に応じて、インスタンスがスクロールするスピードを変化させます。またコメント区切り記号もご紹介します。
講師:
08:39

字幕

このレッスンでは、インスタンスの動きをマウスポインタの位置に応じて変えるようにしてみます。まず今現在 Flash Professional で開いているこのドキュメントなんですけども、メインタイムラインにインスタンスが配置してあり、メインタイムライン自体にはスクリプトがありません。このシンボルの中にスクリプトが書いてあるんですけれども、まず先に動きを確かめましょう。「制御」から「プレビュー」です。インスタンスが右にスクロールしています。これはマウスポインタの位置がステージ中央から右にあると右に動きます。左にあれば左に動きます。そしてステージ外に出てしまえば反対側から出てくるということなんですが、右左の動きの違いはあるんですけれども動く速さそのものは一定です。これをステージ中央からのこのマウスの離れ具合によってスピードを調整してみようということです。ではスクリプトの方を見てみましょう。swf は閉じてインスタンスをダブルクリックしてシンボルが開きました。シンボルの名前は pen です。そしてシンボルのタイムラインにscripts のレイヤーがありますので、スクリプトが書かれているフレームを右クリックしてアクションパネルを開きます。 まず仕組みはEvent.ENTER_FRAME のイベントにリスナー関数が定義されていて、そのリスナー関数というのは条件でこの width というのはステージ幅が収められた変数なんですが、その半分つまりステージ中央から見てマウスのポインタの位置、水平位置ですね。それが大きいかどうか、ステージから見たマウスポインタの位置がステージ中央よりも右かということですね。右の場合にはx 座標このインスタンスのこの x 座標に数字を加算すると。そうでない場合、つまり中央より左側にある場合には同じ値を差し引くことによって動く方向を変えてるわけです。そしてステージの右端を越えたらその幅を引いて左端に戻し、赤丸が付いてしまったので一回クリックして閉じますけども、もし 0 よりもつまり左端よりも座標が小さくなったら、今度は幅を足しこんで右側に戻すというふうにしているわけです。この仕組みではスピードは一定ですね。ですからこの if、else ステートメントは書き換えなければいけません。この時にキーボードから delete で削除してしまうというふうにしても結構なんですが、残しておきたい場合があります。一旦取り消しましょう。 前のスクリプトを残しておいてどう書いてあったのか思い出したい時とか、あるいは上手くいかなかった時に戻したい時とかありますね。そういったときに残しておいてスクリプトとしては無効にすることができます。どうするかというとまずspeed という変数もこれ必要なくなりますね。ここにあるんですがそれを無効にしたい、でも経過は残したいという場合には、先頭にスラッシュ 2 つ、ダブルスラッシュ(//)をつけます。コメント区切り記号というんですがこのダブルスラッシュの後の 1行は無視されます。無効になります。もう少し厳密に言うとswf に書き出しがされません。アクションスクリプトはswf 上で動きますので、書き出しがされないということは消されたというのと同じになります。ではこの if、else ステートメントも1 行 1 行こう書いていくというとちょっと大変ですね。たかだか 5 行ぐらいでも大変ですから20 行 30 行になったらえらい騒ぎになってしまうので、こういうときはここからここまでというコメントがあります。スラッシュ・アスタリスク(/*)でコメント始まり、そしてアスタリスク・スラッシュ(*/)でコメント終わり。 こうすると複数行を無効化することができます。この無効化された部分をコメントというんですけれども、その由来の通りこういうふうにスクリプトを無効にするだけでなくて、コメントを書くこともできます。例えばここでステージ端から外に出たら反対側に戻す、こう書いておけばこのif と else if のステートメントが何をしているのか他の人が見た場合にも分かりますし、自分が半年後に見た場合も確認ができます。ですからこのコメント区切り記号、まあ一行の場合と複数行の場合があるんですが、スクリプトを無効化したい場合コメントを加えたい場合という時に使います。では戻りまして、このコメントにしてしまった部分ですね、これを書き換えることにしましょう。x 座標に加算するというところは同じです。そのあとこの式をどうするかというとこれちょっと借りてしまいましょう。この条件の部分ですがコピーしてペーストします。もちろん不等号、これは式の中に含めるのはちょっと適切ではありません。どうするかというとマイナスとします。マウスポインタ、ステージから見たマウスポインタの座標から中心の座標を引きます。そしてステートメント終了なんですけれども、そうするとステージの中央よりもマウスポインタが右にあると、プラスの値になります。 そして端の方に離れれば離れるほど値が大きくなるので早く右の方に動くことになります。反対に中央より左だと、マウスポインタの座標の値は中央の座標より小さいのでマイナスになります。そしてどんどん左端に持って行くとやはりマイナスの数値が上がるので左方向にスピードが増すということになります。ではここで確認してみましょう。「制御」の「プレビュー」です。中央だと遅くなり右に持って行くと持って行くほど速くなります。そして中央に持って行って左に持って行くと左に離れるほど速くなります。ただし難点がありまして、左端に持って行きます。どっちに進んでいるのか分からなくなる、右端も同様ですね。というのは、単純に中央からのこの距離によってそのままスピードに足してしまっています。ということなので端まで行くとあっという間にステージの半分飛んでしまうわけですね。ということで、どっちに進んでいるのか分からなくなると。ではこれをどういうふうに調整したら良いかですが、この式というのは、マウスポインタとステージ中央の座標の差にスピードを比例させるという式になります。比例というのは比例係数が使えましてこれを括弧で閉じます。その上で掛ける 1(*1)とすれば掛けないのと同じことですね。 1 より大きくすると比例係数が大きいので、この差よりも大きい値で座標が変わることになります。今回は小さくしたいので 1 より小さい値、0.2 くらいにしましょうか。何かコードヒントが出てきましたが要らない時は Esc で消します。これで確認してみましょう。「制御」から「プレビュー」です。真ん中付近では遅いですね。ちゃんと中央から左に行くと左に進み、中央から右に行くと右に進みます。そして端に持って行ってもめちゃくちゃに速くならないですね。反対側も同様です。こういう動きはスクロールするメニューなどで使われますので、スクロールするメニューなどではこういったスピードの調整が必要になるでしょう。このレッスンでは、スクリプトを一時的に無効にするコメント区切り記号ですね、ダブルスラッシュ(//)とスラッシュ・アスタリスク、アスタリスク・スラッシュ(/**/)この二通りですね。それとスピードをある値に比例させる、今回はマウス座標とステージ中央との座標の差に比例させる、その場合に比例係数を使って調整するといったことについて解説をいたしました。

Flash Professional CC 2015 基本講座

Flash ProfessionalはPCだけでなく、モバイル向けにもインタラクティブなアニメーションが作れるソフトウェアです。動画はFlash PlayerだけでなくAIRやHTML5にも書き出せます。このコースではその基本的な操作方法からグラフィックの描画やアニメーション、画像やサウンドの扱い方、そしてActionScriptなどについて説明します。

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

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

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

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