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

ビット演算を条件判定に使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ビット演算は条件判定に使えることもあります。
講師:
05:13

字幕

この レッスンではビット演算子を 条件判定に利用してみます。 現在 Animate で開いているコンテンツは ペンギンのアニメーションが マウスポインターの後を追いかけるという コンテンツになっています。 確認しましょう。 「制御」>「プレビュー」です。 マウスポインターの後を追いかけます。 そして今回ビット演算子を使いたいのは 今ステージをクリックすると アニメーションが変わります。 ここの部分ですね。 ステージをクリックしたら ペンギンが歩きながら回るという アニメーションになりました。 もう1回クリックすると 元に戻ります。 ですから、オンオフですね。 クリックすると、アニメーションが変わり クリックすると、又戻ると。 この条件判定の処理に ビット演算子を使ってみたいと思います。 その前に今現在どういう処理に なっているか確認しておきましょう。 アニメーションの切り替えは このシンボルの中にフレームがあって そこで切り替えています。 シンボルをダブルクリックすると このシンボル pen_animation が開いて フレームが2つあるんですが このフレーム2つで 1フレーム目は歩く 2フレーム目は回転しながら歩くと いうフレームになっていて 第1フレームで アクションパネルを見ると 最初は止まっているんですね。 これをスクリプトで切り替える、具体的には gotoAndStop というメソッドで 行き先フレームを0にするか1にするかで アニメーションを切り替えています。 そのスクリプトはメインタイムラインに 書いてあるんですけど このムービーの場合には 現在配列を使っています。 今現在シンボルの中で 再生されているフレームが 0番の場合は1に移動すればいいですね。 それから、1番の場合には0に 移行すればいいということで 配列の中に行き先を書いてあります。 そして、クリックした時に実行される stagemousedown ですけれども リスナー関数の中で 現在表示しているフレームが シンボルの中で何フレームなのか 0か1かということを変数にとっておいて この配列からインデックスとして 現在再生中のフレームを指定すると 0だったら行き先が1になり 1だったら行き先が0になる ということで、gotoAndStop に 渡しているわけです。 ここは今回ビット演算でもできますので ビット演算で書き換えてみましょう。 何を使うかと言うと具体的には XOR というビット演算子です。 確認のため MDN Mozilla Developer Network の ビット演算子のページを開きました。 使うのは「ビットごとの XOR」。 記号は山形、キャレットという言い方も 英語ではしますけども 山形を使います。 そして a が現在再生中の フレームだとしましょう。 a が 0 の時は 1 にしたいわけです。 1 の時には 0 にしたい。 その時 b に 1 を入れてあげれば 0 の時に 1 になり 1 の時に 0 になりますね。 ですから常に1と「ビットごとの XOR」の 演算をしてあげれば フレームは行き先が変わることになります。 では今あるスクリプトのうち 配列は最早要らなくなるので // でコメントアウトしておきます。 ここも配列を使っていますけど ビット演算子 XOR で行きますので // ですね。 そして書き換えます。 pen_mc の gotoAndStop ここは一緒ですから コピーして新しいようにペーストします。 ) を付けてしまいましょう。 この中をどうするかと言うと 先程言った通り a と b の演算の a を現在再生中の フレームにするわけですから これをコピーを持ってきます。 そして XOR の演算は ^ でしたね。 そして相手は常に1にしてあげれば 0 と XOR 1 というのは 0 になり 1 と XOR 1 は 0 になる ということで 0、1 が切り替わることになります。 確認してみましょう。 「制御」>「プレビュー」です。 ペンギンのアニメーションが マウスポインターを追いかけます。 ステージをクリックします。 そうすると歩きながら回転するという アニメーションに変わりました。 もう1回クリックすると元に戻って 回転はせずに 向きが変わると。 こういうアニメーションになりましたから 切り替えがちゃんとできてるという事ですね。 このレッスンでは整数 0 を 1 1 を 0 に切り替えるというところで ビット演算子の中の XOR キャレットを使いました。 そうすると ^1 と書いてあげれば 0 は 1 に、 1 は 0 に 切り替わるという事です。

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

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

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

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

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

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