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

移行したJavaScriptコードを整える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5 CanvasドキュメントからHTMLドキュメントに移行したスクリプトを整えます。
講師:
05:48

字幕

このレッスンでは Animate の HTML 5 Canvas のドキュメントから HTML ドキュメントの スクリプト要素に移行してきた コードをもっと整えてみたいと思います。 今開いているのが、その移行後の HTML ドキュメントなんですけれども これはアニメーションの コンテンツになっています。 しかもインタラクションがあります。 どんな動きなのか確認しましょう。 「ファイル」>「ブラウザーでプレビュー」で 「Google Chrome 」です。 マウスポインタの後を この Animate で作ったペンギンの アニメーションなんですが それが追いかけてくる、 この追いかけてくる部分が JavaScript のコードです。 あるいは向きが変わったり それからステージを どこかクリックすると アニメーションの動きが変わります。 もう一度クリックすると元に戻る こういったコードが書かれていて 動きそのものには 問題がありませんけれども 無駄とか分かりにくい部分というのを確かめて そこを直していきたいと思います。 HTML ドキュメントを開いている Dream Weaver に戻りました。 大きく二つ修正をします。 ひとつ目はまずここです。 this.stage これは Animate の ドキュメントの中に書いてあるとき Animate のタイムラインの stage という プロパティにアクセスするために this.stage というふうに 参照を書いたんですけれども 今をスクリプトを書いているのは HTML ドキュメントでしたね そこには stage というプロパティがありません そもそも this というのは このウィンドオブジェクトに なってしまいます。 でもなぜ書いたかと言うと 実は stage という変数が 確立するときに Animate から確立するときに 設定がきちんとされているんですね それはこの初期化の関数の中で ここです。 stage のオブジェクトが作られて この中に入っています。 ですから、タイムラインからアクセスしなくても ステージが直接参照できるんですね。 そして、function の外に設定した変数には this. と書いて アクセスする事も可能です。 ですから、文法的に 問題はないんですけれども this . と書いてあると プロパティなのかと 誤解してしまいがちです。 ですから、this. は消しましょう。 変数にアクセスしているのだよという事が 分かるようにしておきましょう。 これでいったん保存して確認します。 「保存」>「ブラウザーでプレビュー」です。 動きは変わりませんね ちゃんと追っかけてきます。 クリックするとアニメーションが 変わるという事で 特に問題は起きていません。 さてもう一つ修正したいのは この Ticker に対して addEventListener で tick イベントに 設定してあるリスナーです。 この Ticker に対して addEventListner するというのは この setAnimation の中でも行っています。 もちろんリスナーが違いますので 全然別のことをやっているのでしたら 残っていても構わないんですが こちらは削除してしまった方が すっきりするでしょう。 という事で // でコメントにします。 ただこれだけだと ちょっと都合が悪いんですね。 確認してみます。 一回保存をして ブラウザーでプレビュー 全然動きません。 けれども 「開発管理」>「JavaScript コンソール」で 見てみると エラーがあれば表示されるはずですが エラーはありません。 というか、JavaScript の処理は きちんと行われているんですね。 ただ表示が更新されないだけです。 アニメーションは tickEvent の度に 描画を更新しなければ 意味がありませんよね。 動かないという事になってしまいます。 逆に言うとこの行が行っていたのは それだけなんですね。 その場合、キャンバスを更新するという createjs のやり方というのは このステージに対して update というメソッドを呼び出す その一行でいい訳です。 だったらこちらの followmouse というのが リスナーになっていますが この followmouse の最後に そのアップデートの処理を すればいい訳です。 ということで、ここに一行加えて stage に対して update と これで tickEvent の度に描画を 更新するという処理は行われます。 ファイルを保存して確認しましょう。 ブラウザーでプレビューします。 再び動くようになりました。 ちゃんとアニメーションも元の通りですね。 クリックで表現が変わります。 また戻りましたね。 このレッスンでは Animate の HTML 5 Canvas ドキュメントから 移行したスクリプト 一応は動いているものを もう少し分かりやすく あるいは無駄のないように 書き換えるという修正を行いました。 ポイントは二つでした。 1つは this.stage で Animate の中では アクセスしていたプロパティなんですが この HTML ドキュメントでは 変数になっているので 変数にアクセスすればいいという事です。 もう一つは、この初期化の 関数の中で行われている ticker に対する tickEvent の リスナーなんですが これは単にステージを アップデートしているだけなので もし ticker に対して tickEvent の リスナーを設定しているのであれば その中で stage.update を行えば それで済みますという事でした。

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

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

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

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

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

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