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

配列を使った条件判定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
条件を整数で分岐する処理には、配列を使える場合があります。
講師:
05:06

字幕

この レッスンでは条件で処理を 分岐する所に配列を活用してみます。 現在開いているコンテンツは このペンギンのキャラクターが歩きながら マウスポインターを追いかけるという コンテンツになっています。 確認しましょう。 「制御」>「プレビュー」です。 マウスポインターにペンギンが少し遅れて ついてくるという事になっています。 そしてステージをクリックすると このアニメーションが少し変わります。 今クリックしました。 そうすると歩くのは変わらないんですが 歩きながら回転します。 もう1度クリックすると元に戻ります。 ですからクリックでアニメーションが またクリックしますけど 切り替わるという事になっています。 この処理に配列を使って 条件判定にしてみたいと思います。 今現在のアニメーションの 切り替え方を確認しておきましょう。 このペンギンのシンボルの中に ダブルクリックして開けます。 pen_animation フレームが2つあります。 この2つのフレームそれぞれに 今開けてみますけど 第1フレームの方は歩くアニメーション 戻りまして 2つ目のフレームには ダブルクリックして開けると 回転するアニメーションという事になっていて それを最初は アクションパネルを開くと 「1フレームで止まっておけ」と なっているので 最初は回らない状態で 足踏みするんですが クリックすると メインタイムラインのスクリプトで フレームを切り替えることになります。 見てみましょう。 アクションパネルで 「ステージをクリックしたら」というのは addEventListener で stagemousedown です。 changeAnimation という リスナー関数が設定されていて 現在再生している currentFrame を 確認します。 0か1の二つしかありません。 番号は第1フレームが0 第2フレームが1という事になります。 それが0か1かを判別して 0だったら 第1フレームに行って止まれ そうでなかったら その場合は1フレーム ナンバー1 ですね。 第2フレームなんですが ナンバーは1です。 その場合には0に戻れ ということになっています。 ここ、0の時は1に 1の時は0という事ですね。 整数を使っていますので こういう場合には配列で 条件を指定できる事があります。 今回はその例なんですけども ここを一旦コメントアウトしましょう。 コメントアウトの場合 // だと一行コメントアウトなんですが そこを /* とすると 複数行のコメントアウトになります。 コメントアウト終わりという場合には */ 、逆ですね。 そうするとこの複数行が全て コメントになります。 行が長いときこの方が速いです。 ここに処理を加えるんですが まず最初に配列を作ります。変数です。 変数で var で frameToGo 行くべきフレームです。 配列は [ ] 向かい合わせます。 そして値を最初に決めておきます。 インデックスが0だったら、1に インデックスが1だったら、0に。 ですからこのインデックスを 現在再生されているフレームと いう風に使えばいいわけですね。 現在再生されているフレームは ここにありますから これをインデックスとして gotoAndStop これをコピーしちゃいましょう。 コピーして ペーストということで ) を先に付けてしまいますけど セミコロン ここにこの配列をとってきて これのコピーを持ってきます。 インデックス番号を指定します。 インデックスは現在再生されている この変数の値ですね。 0か1なんですけど それを入れてあげると 0から1へ、1なら0へ という事になります。 これで良いでしょう。 確認しましょう。 「制御」>「プレビュー」です。 さて、最初は足踏みするペンギンですね。 マウスポインターの位置によって 方向が変わるんですが クリックすると 回るペンギンに変わりました。 回りながら追いかけます。 又クリックすると、元に戻ります。 ちゃんと配列で条件判定ができてることが 確認できました。 このレッスンでは条件を整数で分岐する場合 そういう場合には配列が 使えることがあるということで 今回は行き先フレームですね。 現在再生されているフレームが 0か1かを判別して 行き先0だったら1 1だったら0 という風に gotoAndStop に 渡す値を配列で切り替えるという 方法についてご紹介しました。

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

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

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

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

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

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