AnimateでHTML5 Canvasコンテンツをつくる

マウスポインタを追いかけるアニメーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタを動かすとインスタンスがその後をついてくるアニメーションにしてみます。
講師:
06:57

字幕

この レッスンでは マウスポインターを動かした時 インスタンスがその後をついてくる様な アニメーションにしてみたいと思います。 現在アニメーションするペンギンの ムービークリップシンボルの インスタンスがあります。 インスタンスには名前として pen_mc と付けてあります。 それからペンギンのインスタンスの レイヤーの上に スクリプト用のレイヤーがあって ロック(鍵)が掛けてあります。 現在はスクリプト、インタラクションが ありませんので ただ歩くだけなんですが確認しましょう。 「制御」>「プレビュー」です。 マウスポインターを動かしても 何も起こりません。 この後を追いかけるようなスクリプトを 加えてみたいと思います。 スクリプトのレイヤーで アクションパネルを開きましょう。 「マウスポインターを動かした時」 これはどこで頼んだらいいかと言うと ステージです。 ステージは今メインタイムラインですから ここは this ですね。 それに対して stage というプロパティで ステージが参照できますから お願いする時は addEventListener です。 イベントは「ステージでマウスを動かしたら」 ということなので stagemousemove と ちょっと長いです。 全部小文字です。 その時どうするかと言うと では、マウスポインターの座標を 知りたいと思いますので recordMouse という リスナーの名前にします。 そして function ですね。 リスナーですから。 タイプミスをすると嫌なので コピーして ペーストします。 そして ( ) ですね。 { } そしてマウスポインターの座標は 変数に入れておきましょう。 変数は XY 座標に分かれていますので var の mouseX 代入する値は無いんですが 数値が入るんだよ、と分かるように 初期値をこう入れておくという そういうことをすると分かりやすくなります。 では、ここはコピーしてしまいましょう。 コピーして、ここに ペーストして mouseY です。 さて、ここにマウスポインターの 座標を入れたいんですが 誰に訊いたらいいでしょう、と いう事ですね。 実は addEventListener で イベントに登録をすると リスナーというのはこの関数の引数を 1つ受け取ることになっています。 イベントオブジェクトと言われることが 多いんですね。 イベントに関する情報を持っています。 なので、ここでは名前を 何でもいいんですが まんま eventObject とします。 そうすると実はこの人に訊くと わかるんですね。 コピーしましょう。 コピーして、この人に対して ペーストして stageX というのでマウスポインターの X 座標が分かります。 ではこれを mouseX に代入すると。 コピーしましょう。コピーして ここにペーストで、X を Y に変えます。 さて、座標を調べたいんですが alert ですと 毎回毎回ダイアログが出てきて そのたびにアニメーションが 止まってしまうので もう少し違うやり方で 数値を確認したいと思います。 ブラウザーの中でコンソールという ウィンドウで 変数の値を確かめることができます。 そこに出すには console.log この中に知りたい値を 複数ある場合も大丈夫です。 mouseX カンマ区切りで mouseY と。 するとブラウザーウィンドウで この値を確認する事ができます。 では、「制御」>「プレビュー」です。 そのコンソールはデフォルトでは 表示されていませんので 「表示」>「開発」>「JavaScript コンソール」 そうすると数字が出ていますね。 ちょっと今ステージの上を通ったので。 ステージの外では働きませんから ステージの中を通ると 数字が出てきますね。 どんどん左上へ持って行くと XY 座標が限りなく0に近づきます。 ここまで来ると なかなか0には行かないですが ちゃんとマウスポインターの座標が 取れていると。 このあたりですと 550 の 400 位ですけれども 確認できました。 ではこのインスタンスの位置を 座標に合わせれば良いと いう事になりますね。 確認用のメソッド console.log は もう要りません。 うるさいので // でコメントアウトします。 そしてペンギンのインスタンスは 名前が pen_mc ですね。 そしてもう1回 アクションパネルを出します。 関数の外でしたら this. pen_mc でアクセスできますから これを変数に入れておきます。 同じ名前にしておきましょう。 pen_mc に代入します。 そうすれば関数の中でも pen_mc という変数にアクセスして コントロールすることができますので この X 座標は文字通り x です。 これを mouseX に合わせ Y 座標を mouseY と いう風にすれば良いでしょう。 確認してみましょう。 「制御」>「プレビュー」です。 外では反応しませんので 中に入れるとちゃんと ポインターの後を追いかけて くるという事で アニメーションが完成しました。 このレッスンではステージ上で マウスポインターを動かした時に そのマウスポインターの座標を調べて そこにインスタンスの位置を合わせる つまりマウスポインターを追いかけると いうアニメーションを作りました。 addEventListener に指定するイベントは stagemousemove です。 そしてマウス座標は リスナー関数の引数に stageX stageY ということで プロパティを調べれば分かります。 そしてムービークリップは一旦外で this. インスタンス名ですね。 変数に入れた上で そのインスタンスの変数に対して X 座標 .x をマウス座標に合わせ .y をマウス座標の Y 座標に 合わせれば良いという事でした。

AnimateでHTML5 Canvasコンテンツをつくる

Animate CCではPCやモバイル、Webブラウザなどさまざまなデバイスとプラットフォームに向けたコンテンツが作れます。またHTML5に対応したダイナミックでインタラクティブな表現が可能です。このコースはAnimateで作った素材をJavaScriptでどのようにスクリプティングするのかを基礎から解説します。

2時間43分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年05月19日

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

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

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