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

マウスクリックでアニメーションを切り替える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ステージをクリックしたとき、インスタンスのアニメーションを切り替えてみます。
講師:
07:47

字幕

このレッスンではステージをクリックした時に インスタンスのアニメーションを 切り替えてみたいと思います。 今ステージにペンギンのインスタンスがあって これはシンボルの中に 歩くアニメーションが含まれています。 しかも、スクリプトを後で見ますけれど マウスポインタの後を 追いかけるような設定になっています。 動作を確認しましょう。 「制御」>「プレビュー」です。 マウスポインタの後を追いかけます。 歩くアニメーションですね。 それから、マウスポインタとインスタンスの 水平位置に応じて 向きが左右切り替わるようになっています。 でもずっと歩いているだけですね。 実は、このシンボルの中には もう1個アニメーションが含まれています。 アクションパネルでスクリプトを 開いてみる前に シンボルの中のアニメーションの方を先に 確認しておきましょう。 まず、ステージでシンボルを ダブルクリックします。 そうすると、 今 pen_animationとあるんですけど、 実はフレームが2つあります。 そして、上のレイヤーには スクリプトが書いてあるのですけど 簡単なスクリプトです。 this このペンギンですね。 .stop 再生ヘッドを、この赤いマークを ここで止めろということです。 ですからこのままでは、いつまでたっても この2フレーム目に再生ヘッドが移らず 2フレーム目のアニメーションを 見ることはありません。 ということは、この第一フレームにある シンボルのアニメーション、開いてみますけど ダブルクリックで開くと pen_animation の中にあった 実は先程のフレームには pen_walk というシンボルの アニメーションが含まれていたのですけど これがただ、単に歩くというものですね。 戻りましょう。 pen_animation の方に戻って 次のフレームの方に行くと 今度はこのシンボルは また別のシンボルになっています。 プロパティのパネルでも 確認できますけれど pen_rotation というシンボルです。 ダブルクリックすると pen_rotation が開いて 再生と動かすと 水平に回転してるように見えます。 実際には回転しているんじゃないですね。 これが通常の状態です。 このキーフレームで潰れます。 このキーフレームで反対方向 つまり scaleX を -1 にしています。 この「変形」のパネルで見るなら -100% ということなんですが そしてまた真ん中で潰れ そして元の 100% scaleX でいえば1ですね、の状態に 戻るというアニメーションになっています。 ですから、こちらにフレームを切り替えれば この回転のアニメーション 回転してるかのようなアニメーションを 表示することができるわけです。 その場合 gotoAndPlay ではなくて gotoAndStop です。 ここで止まっていないと また元の第一フレームに戻ってしまいますから ここに行って止まるということになります。 gotoAndPlay 行って、再生しろ gotoAndStop 行って、そこで止まれ どちらでもいいですが その行先ですけれど 今フレームラベルがありません。 フレームラベルがない場合には フレーム番号で指定することができるんですが 但し、注意はこの CreateJS の中で フレーム番号は 0からスタートします。 ですから1と書いてありますけど 0と読み替えて下さい。 つまり -1 するんですね。 なんでそんなことにしたか、というと プログラムでは連番は 0からスタートしたほうが 通常、扱いやすいという ちょっと大人の事情なんですけど 0からスタートしますので 0と1を切り替えると、そういう処理を これから設定することになります。 メインタイムライン 「シーン1」に戻って このスクリプトのレイヤーの スクリプトをアクションパネルで 見てみましょう。 今ここに書かれているスクリプトは 一切手を触れません。 ですから、クリックしたらアニメーションを 切り替えるという処理を 新たに追加することになります。 その時、クリックしたらステージは その場合には ステージに対して addEventListener で 但し、イベントは stageMouseDown になります。 これコピーしちゃいましょう。 コピーして そして、ペーストします。 まずイベントを mouseMove を down に書き換えます。 もちろんリスナー関数は変えますね。 changeAnimation にしましょう。 そして、この新しいリスナー関数を function として定義します。 タイプミスをするといけないので コピーを持ってきましょう。 そして、イベントオブジェクトというのは 特に今回使わないですが まあ念のため コピー持ってきておきましょう。 コピーをしておきます。 そして、括弧閉じ } さて、今このペンギンの ムービークリップシンボルの中の 今どのフレームにいるのかということは currentFrame というプロパティでわかります。 ですから pen_mc 、 これがペンギンに対する参照ですね。 それに対して currentFrame これで0か1かがわかります。 変数に入れておきましょう。 currentFrame 同じ名前にしときます。 別に違う名前でも構いませんけどね。 入れました。 ではこれが0か1かを if 条件で判定すればいいわけですね。 ここはコピーしましょう。 コピーして持ってきて currentFlame の値は 最初は0です。 この変数値が0と等しいと 言う条件は = 2つ == で0と書けば良いです。 その場合には表示フレームを 1に切り替えます。 pen_mc の gotoAndStop です。 行って、そのまま止まってなさい ということになります。 0だったら1に行け、ですね。 そして、そうでなかったら 2つしかありませんから もう一個、1の場合というのは else に決まってますね。 3つ以上フレームがあったら ちゃんと判定をしなければいけませんが 今回は else で大丈夫です。 そして、これをコピーしましょう。 コピーして ペーストします。 もちろん行先は 0に変えるということです。 これでステージをクリックしたら アニメーションが切り替わる という処理ができました。 確認しましょう。 「制御」>「プレビュー」です。 まず最初は先程と動きは変わりませんけど ここでクリックをします。 そうすると 歩きながら回転するという ちょっとおかしい動きになってますけれど それでも、またクリックしましょう。 元に戻ります、ということで アニメーションの切り替えが無事できました。 このレッスンではステージに対する マウスクリックで インスタンスのアニメーションを 切り替えました。 具体的にはフレームを 切り替えるということなんですが ステージのクリックはステージに対して addEventListener で イベントは stageMoouseDown そのリスナー関数の中で フレーム、現在インスタンスが どのフレームを表示しているかというのは curentFrame という プロパティでわかります。 そして if 条件で gotoAndStop で フレームを切り替える訳ですが 注意点は第一フレームは ここでは0 第二フレームは1という番号になると この点に、お気をつけください。

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

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

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

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

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

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