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

マウスクリックでフレームを移動する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスでステージをクリックしたとき、アニメーションの動きを変えてみます。
講師:
08:06

字幕

この レッスンではマウスで ステージをクリックした時に アニメーションの動きを 変えてみたいと思います。 今開いている Animate のドキュメントは 既にペンギンのアニメーションが 作られています。 メインのタイムライン「シーン1」には 1フレームしかありませんが シンボルの中にアニメーションがあります。 ではこのペンギンのムービークリップ シンボルですけれども ダブルクリックして開けます。 pen_animation これが シンボルの名前ですけども 2つのパートに分かれています。 まず最初の6フレーム これはペンギンの歩く動作です。 start というラベルが先頭になっています。 次は drop というラベルから スタートするアニメーションで 文字通り上から落ちてくると。 けれども スクリプトのレイヤーを作ってあって ここのスクリプトを見ましょう。 右クリックで「アクション」です。 そうすると、この今開いている ペンギンのアニメーションのシンボル これに対して gotoAndPlay 「このラベルに行って再生を続けろ」 つまりループ再生になっているんですね。 ですから実際に再生してみると 落ちてくるアニメーションは出てきません。 確認しましょう。 では「制御」>「プレビュー」です。 かなり忙しいですけど ずっと歩きっぱなしという事ですね。 上から落ちてくることはありません。 ではこのペンギンが歩いている コンテンツなんですけども ステージをクリックした時に 落ちてくるようにしたいと思います。 ということはステージをクリックしたら この drop のラベルに跳んで gotoAndPlay ですね。 「再生を続けろ」という 風にすれば良いでしょう。 ではそのスクリプトをどこに書くか、ですが 通常のスクリプト、全体をコントロール するようなスクリプトは メインタイムライン「シーン1」の方に 書いた方がいいです。 今のようにこのフレームの移動を ただ単にループするとか この中で跳ぶとかいう位でしたら そのシンボルの中に書くのがいいんですが その全体をコントロールする、 そういったスクリプトコードは 「シーン1」メインタイムラインに 書きましょう。 メインタイムラインの しかも第1フレームです。 幸いフレームは1個しかありませんが レイヤーを分けます。 新規レイヤーを作って 名前を分かりやすく scripts と。 ロックをかけておきましょう。 ここにコードを書きます。 右クリックで「アクション」です。 まだ勿論何も書かれていませんね。 では「ステージをクリックしたら」は addEventListener でイベントリスナーを 登録する必要があります。 ではオブジェクト、 誰にお願いするのかと言うと ステージをクリックしたら、ですから ステージです。 でもメインタイムラインは ステージではありません。 メインタイムラインよりももう1つ上 親になります。 でもメインタイムラインのプロパティに ステージへの参照があります。 今メインタイムラインで スクリプトを書いていますので this. でこのタイムラインを参照します。 そして stage と小文字で。 これでステージに対する参照ができますので お願いすることが可能です。 addEventListener ですね。 イベントは何かと言うと 「ステージをクリックした場合」 厳密にはステージ上で マウスボタンを押した場合なんですけども このイベントは stagemousedown 長いです。 ステージ・マウス・ダウン しかも全部小文字です。 そうしたらどうするかと言うと これからリスナーの関数を定義します。 では drop にしましょう。 リスナー関数は関数として function で定義します。 drop そして { } の中に処理を書くわけですが ここでは一旦ちゃんとステージの マウスクリックがとれてるかどうか 確認するために alert を入れることにしましょう。 ここはもう文字でいいです。 mousedown にしましょうか。 余り長くてもなんですから。 mousedown と。 これで確認してみたいと思います。 「制御」>「プレビュー」です。 先程と同じペンギンが歩く アニメーションですけども ステージのどこでもクリックすると mousedown が出てきますね。 このダイアログが出ている間 アニメーションは一旦止まってしまいます。 「OK」で又 アニメーションがスタートします。 ではステージの mousedown がとれたので alert はコメントにしてしまいましょう。 コメントにしてしまうことを 「コメントアウト」と言いますけれども ここに処理内容を書きます。 ペンギンのムービークリップシンボルを ステージに置いたもの これをインスタンスと言うんですけどもね。 ですから正確にはムービークリップ シンボルのインスタンス 或いはムービークリップインスタンスと 言ってもいいですけれども それに対してフレーム跳べと gotoAndPlay を命令するわけです。 その為にはムービークリップ シンボルのインスタンスに対して クリックするとプロパティにインスタンス名と いうボックスが表示されます。 ここに名前をつけます。 では、pen_mc としましょう。 mc という名前は movie clip という事が 分かりやすいように こんな記号をつけたりします。 さて、そうするともう1度 アクションパネルを開けますけれども どうやってこのペンギンに アクセスするかと言うと this. 今付けた名前 pen_mc ということで アクセスすることができます。 これは変数に入れておきましょう。 変数に入れておいたほうがいいです。 というのは、ここでは function の外では this. pen_mc で このペンギンのインスタンスに アクセスできるんですが この中に書いてしまうと this が違う所になります。 this がこのタイムラインになりません。 「タイムラインに置いてある pen_mc というインスタンス」という 意味なんですけども この中の this は ちょっと違ってきますので ここでは this を使って このペンギンのインスタンスを 参照する事ができません。 ということで、これを var 宣言した 変数に入れます。 変数は何でもいいんですけども 分かりやすく同じ名前にしましょう。 pen_mc と。 こうしておけば、この var 宣言した変数は この function の中からでも 参照することができますから pen_mc.gotoAnd 「再生を続けろ」ですから Play ですね。 そしてラベルです。 2つ目のアニメーションのラベルは drop でした。 ということで、確認してみたいと思います。 「制御」>「プレビュー」です。 ペンギンが忙しなく歩いていますけども どこかクリックします。 そうすると上から跳んで 最終フレームに行くと また先頭フレームに戻りますから このシンボルの中ですね。 そうするとまた歩き始めると。 歩き始めると フレームループの中を通りますから またクリックすると落ちてくると。 こういうアニメーションになります。 このレッスンではステージのマウスクリックで インスタンスのフレームを移動してみました。 その時 addEventListener に 指定するイベントは stagemousedown 全部小文字です。 それからお願いする相手は ステージなんですけども このタイムラインのステージという プロパティに対して addEventListener を呼び出せばいい という事です。 そしてこのリスナー関数なんですが リスナー関数の中では this. で インスタンスを参照することができないので 予め var 宣言をした変数に入れておいて その上でこのペンギンのインスタンスに対して gotoAndPlay で行き先のフレームラベルを 指定すればいいという事でした。

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

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

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

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

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

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