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

インスタンスをマウスポインタに向ける ー 条件判定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタとインスタンスの水平位置によって、インスタンスの向きを変えてみます。
講師:
06:03

字幕

このレッスンではマウスポインタと インスタンスの水平の位置関係を判別して インスタンスの向きを変えてみる 条件による処理の判定 というのを行ってみたいと思います。 現在、この中央にいるペンギンなんですけど マウスポインタの後を 追いかけるようになっています。 動きを確認しておきましょう。 「制御」>「プレビュー」です。 そうすると、ポインタの後を 追いかけるんですが 気になるのは、右に動かしても 背中から付いてくる所ですね。 ポインタが右にあったら右向きに 左に合ったら左向きに という風に、インスタンスの方向を 変えてみたいと思います。 メインタイムラインのスクリプトのレイヤーの アクションパネルを開いて スクリプトを確認してみましょう。 インスタンスがアニメーションしている というのは ticker に対して addEventListener で tickEvent の listener として定めた この followMouse という リスナー関数です。 そこではマウスポインタとインスタンスの 水平、垂直のそれぞれの位置と差をとって それにイージングのための係数を 掛けてあげた上で その値をそれぞれ足しこんでいると いうことで 段々段々、減速しながら追いつくという easeOut の動きになっています。 この中で向きも変えてあげれば良い ということになるわけなんですが その場合の構文です。 条件判定の一番基本的な構文は if というキーワードでスタートします。 そして ( ) の中に条件を入れます。 「条件」と漢字で書いてはいけません。 これは後でちゃんと書き直します。 そして、{ } この中に 条件が当てはまる場合 の処理を書きます。 これで終わりにしても構いません。 そうすると、当てはまらない場合は、この 3行はスキップするということになります。 でも、当てはまらない場合には また別の処理をしたいという場合には else と、そうでなければ という意味ですね。 で、ここにはもちろん 条件が 当てはまらない場合 の処理を書くと こういう形になります。 今回はマウスポインタとインスタンスの位置で マウスポインタがインスタンスの 右にあるか、左にあるか 調べたいと思います。 それは、この moveX でわかりますね。 マウス X 、マウスポインタの座標 X 座標から インスタンスの X 座標を引いた時 これが+だったら マウスポインタが右にあるわけです。 ところが、今デフォルトでは左向きなので この時は向きを反転させればいいわけです。 もう一回アクションを開きますが この時に ease をかけてしまうと ちょっと見にくいので 結果として変わりませんが かける ease は move の方にはかけず moveX moveY にはかけず こちらで掛け算して 足しこむことにしましょう。 結果は変わりませんけど この方が見やすいと思います。 ですから moveX moveY というのは あくまでインスタンスとマウスポインタの 差だと、位置の差ということに なるわけですね。 ということで ( ) はなくても大丈夫です。 こうしたルートを条件として これがもし+だったら +だったらというのは不等号ですね。 0より大きい場合 この時はマウスポインタが 右にあるわけですから 現在のデフォルトを反転させる 水平に反転させなければ いけない、ということなのですが これは便利なプロパティがあります。 これはもちろんインスタンス pen_mc のプロパティなんですけれど scaleX scaleY 水平が X で 垂直がもちろん Y です。 これはもちろん伸縮の名前からわかる通り 伸縮のためのプロパティです。 ですから、縮めたり、あるいは伸ばしたり ということなのですが 1が 100% になります。 パネルでは 100% という単位なんですが このスクリプトでは 単位1が 100% 実寸ということになります。 その時に、マイナス1という数字が使えます。 この場合には、実際の幅そのものは変えずに 左右が鏡に映したように 反転することになります。 ですから、これで向きが変わるわけですね。 そしてそうでない時 そうでない時は これコピーしちゃいましょう。 ペーストしますけれど 1とすれば、元通りということになりますので これで向きが変えられる ということになります。 では確認してみましょう。 「制御」>「プレビュー」です。 そうすると、ポインタが 右にあれば右向き 左にあれば、左向きにということで ちゃんと向きが変わるようになりました。 このレッスンではインスタンスと マウスポインタの水平の位置関係を 条件として判別して それによって処理を変えるという 条件判定について ご説明をしました。 条件判定は if でスタートし ( ) の中に条件を入れる そして、当てはまる場合の処理を その後の { } ですね。 そうでない時、当てはまらない時の処理が ある場合には else に続けて { } その中に処理を書くということです。 それから、反転をするというプロパティ ちょっと変わった使い方なんですが その時にはマイナス1を入れればいいよ ということについてもご紹介をしました。

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

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

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

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

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

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