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

条件を複数加えて判定する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
条件判定のif文に複数の条件を定める構文についてご説明します。
講師:
08:26

字幕

このレッスンでは条件判定の if 文に 複数の条件を定める 構文についてご説明します。 まずは、今この Animate の ドキュメントに設定されている 処理なんですけど、このペンギンの キャラクターに対して、今開いていた スクリプトの処理が実行されています。 具体的にはマウスポインタの後を追いかけると そういう処理なんですけど 確認してみましょう。 「制御」>「プレビュー」です。 マウスポインタの後を 少し遅れながらついてくると そういうアニメーションです。 そして、歩いているのですけど 歩く方向ですね。 水平方向がマウスポインタの位置によって 左右向きが変わるようになっています。 更に、アニメーションには 処理が加えてありまして クリックすると 歩きながら回転するという アニメーションになります。 これもやはりマウスポインタの後を ついてくるわけなんですが 実際どういうスクリプトになっているか ということを確認していきましょう。 先にアニメーションの切り替え 回転する方と、ただ単に歩いている あの内容について確認するために シンボル開けてみます。 これペンギンのシンボル pen_animation なんですけど ダブルクリックして開くと pen_animation の中が見えます。 2つのフレームなんですが こちらがただ単に歩いている 足踏みしているだけです。 こちらは回転しながら足踏みするという そういうアニメーションになっています。 それぞれ見てわかりませんけれど シンボルになっているので このシンボルを更に開きます。 pen_walk というシンボルです。 ダブルクリックすると、開いて 足踏みしているアニメーション これがループしますので 歩き続けるということになります。 戻ります。 今度は2フレーム目なんですけど、こちらは ダブルクリックして開くと、今度は pen_rotation という シンボルなんですけれど このペンギンのシンボルは pen_walk になっていますので 足踏みするという処理は そのまま行われるんですが 同時に、この pen_rotation の中では 回転をするという モーショントゥイーンが仕込んであります。 実際には水平に伸び縮みしているだけ なんですが、回転しているように見えますね。 それを、 pen_animation に戻りますけど ここでスクリプトが書いてあって ここで止まれという ことになっています。 ですから、第一フレームで止まりますから そのままでは足踏みしているだけですね。 ですからスクリプトの方で 第二フレームに行って止まれ という風にすると、回転する アニメーションに切り替わります。 それが先程の開いていたスクリプトの中に 書いてある処理なんですけど ただ、スクリプトで このフレームを切り替える時 1フレーム目が、番号では0になります。 gotoAndStop を使うんですけど gotoAndStop 0 2フレーム目が1になりますので そこに注意する必要があります。 ということを頭に置いて「シーン1」 メインタイムラインに戻って スクリプトを確認しましょう。 今の処理はここですね。 ステージに対して addEventListener ステージ上でマウスダウンをしたら changeAnimation という リスナー関数を実行しましょう ということで、それがここです。 まず今、このペンギンの シンボルですね、インスタンスの中で どのフレームが再生されているのかを 確認します。 それが0だったら 1に行け、ということですね。 そうでなかったら フレーム2つしかありませんので 0でなかったら1ですね。 その場合には 0に戻れ という風になっています。 ここについては 特に手を加えません。 今回、手を加えたいのは アニメーションの処理ですね。 Ticker に対して addEventListener で 毎回毎回、一定間隔で実行される アニメーションの処理 それがリスナーが followMouse で ここに書いてあります。 マウスポインタの水平位置によって 向きを変えるというのは、ここになっています。 マウスポインタの X 座標と ペンギンの座標 引き算してプラスかマイナスかによって もしプラスであれば ペンギンは元々左を向いてますので 右を向けと scaleX を -1 プロパティの設定をすれば 裏返る ということになります。 そして、scaleX を1にすれば 通常の状態に戻るということで 切り替えています。 この時、いま回転するペンギンなのか 足踏みするペンギンなのかという判定は この中に入っていません。 ということなので、よくみると ちょっと煩わしい所があります。 もう一度確認しましょう。 「制御」>「プレビュー」です。 足踏みしているペンギンは マウスポインタの水平位置によって 向きが変わって、これは良いですね。 クリックすると回転するペンギンになります。 回転するペンギンというのは、そもそも向きが こう、くるくると変わってるわけですね。 ですからわざと意地悪く ここでちょこちょこと、こう左右に動かすと 回転してるのに、更に裏返ったり 元に戻ったりしますので 非常に煩わしい動きになっています。 ですから回転している時は 裏返す必要はないですね。 マウスポインタがどこにあろうが 回転し続ければいいわけですので そういうことで条件を 加えたいと思います。 条件を加えたいのは このマウスポインタの 水平位置の関係によって 裏表を変えている この if 文ですね。 ここに対して、何も考えずに 常に裏表、切り替えてるんですが ここにもう1つ条件を 加えたいと思います。 どういう条件かというと いま再生しているペンギンのアニメーションが 回転する方なのか、回転しない方なのか 回転する方であれば この currentFrame ですね。 これが1になっているはずですね。 0番目、1番目ということで 2フレーム目は1ですので currentFrame が、これコピーしましょう。 コピーを持ってきます。 もし、これが 1だったら回転しない、ですよね。 逆に言えば0だったら回転して良い ということになります。 pen_mc の現在再生している currentFrame ですね。 それが ==0 0に等しい時 つまり第一フレームのアニメーションが 再生されている時 これが条件1つですね。 もう1つは マウスポインタの位置が変わった時 ということになりますけど この2つの条件に対して 両方当てはまる必要があるのか それともどちらか片方が当てはまればいいのか という、そういう2つの場合がありますけれど どちらか片方が当てはまればいい という場合には 縦棒2つ になります。 そうすれば currentFrame が 0に等しい、か or 条件と言いますけどね。 位置関係の差を取った時に それが正かと 0より大きいか どちらか当てはまれば ということになりますけど 今回は再生しているフレームが 一番目、つまり ==0 かつ、マウスポインタの位置が変わった時 ということになりますので この場合には & を2つ付けます。 両方満たされた時のみ 裏表が変わるという処理になります。 では確認してみましょう。 「制御」メニューから 「プレビュー」です。 足踏みしているペンギンの場合には マウスポインタの水平位置によって 向きが変わります。 これは先ほどと変わりません。 ちゃんと動いていますね。 クリックすると 回転するペンギンになります。 この時には、マウスポインタの位置によって 裏表変わる必要がありません。 ここで先程と同じように 意地悪く、こう左右に振ってみても 回転が裏表変わりませんので ちゃんと自分の回転を続ける ということになっていますね。 ですから、2つの条件の判定が きちんとできたということになります。 このレッスンでは、条件判定の if 文に 複数の条件を定める構文について どう書けば良いのか ということをご説明しました。 if の ( ) の中に 2つの条件をまず羅列するということですね。 羅列して、その2つの条件が 同時に満たされることを条件とする場合には & 記号2つになります。 どちらか一方で良ければ 縦棒2つ ということでした。

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

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

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

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

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

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