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

ドキュメントのスクリプトの最小限の移行

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5 Canvasドキュメントの中に書いたスクリプトを、ブラウザで開くHTMLドキュメントのscript要素に移します。
講師:
07:47

字幕

この レッスンでは HTML 5 Canvas ドキュメントの 中に書いたJavaScript のコードを ブラウザーで開く HTML ドキュメントの スクリプト要素の方に移してみます。 現在 Animate のドキュメント assets.fla というファイルを開いています。 この中には JavaScript のコードが 書かれていて インタラクションがあるんですけれども 動きを確認しましょう。 「制御」>「プレビュー」です。 マウスポインターの後を ペンギンが追いかけます。 マウスポインターの水平位置によって ペンギンの向きが変わります。 ステージをクリックすると アニメーションの表現が変わって もう1回クリックすると 元に戻ります。 こういう処理が JavaScript コードとして 書かれているわけです。 今お見せしたようなインタラクション アニメーションの処理は メインタイムライン「シーン1」の スクリプトのレイヤーの 第1フレームに書いてあります。 開いてみましょう。 このような感じですね。 これをそっくり HTML ドキュメントの方に 移したいと思います。 この他にも若干スクリプトは この fla ファイルの中にありまして 例えばこのペンギンをクリックすると シンボルの中ですね。 シンボルの中にはここにコードがあって アクションパネルで見ると ここで止まれ、という命令が書かれています。 ただ、こういったアニメーションを コントロールするような基本的な動き 「止まれ」とか「動け」とか「ループしろ」 それはこの中に書いておいて結構です。 そうではなく、メインとなる インタラクションやアクション アニメーションといったものを この中に全部書いて行くと だんだん管理がしにくくなります。 特にデザイナーと JavaScript コードを 書く開発者が分かれている時には この中に JavaScript コードを書くと デザイナーが変更するときに とても面倒になります。 ですから、このコードは 外に出したいと思います。 今ムービーをプレビューしましたので HTML のドキュメントと JS ファイルが 自動的に書き出されています。 JS ファイルの方は基本的には いじりません。 スクリプトを書き加えるのはこちらの HTML のドキュメントになります。 但し、これをそのまま書き換えると もしデザインが変更されて パブリッシュし直すと 上書きされてしまいます。 そういうことなので名前は 変えておいた方がいいでしょう。 sample とします。 sample.html 。 勿論パブリッシュすれば又 assets.html が出てきますが そちらは全く無視してしまって 構いません。 書き出された assets.js こちらの方を HTML ドキュメントの方で 読み込んで使うということになります。 ではこちらを開いておきましょう。 Dreamweaver CC 2015 で 開くことにします。 スクリプトを書く場所なんですが ごく簡単な方法として 初期設定が パブリッシュする時に自動的に かかれるんですが この後に書き加えていくことにしましょう。 ここに先程 fla ファイルに書かれていた JavaScript コードを持ってきます。 メインタイムラインのスクリプトの レイヤーの第1フレームを アクションパネルで開いて すべてを選んで カットです。 無くなりました。 ここでもう1回パブリッシュしておかないと assets.js はこの中にスクリプトが 書いた状態で書き出されているので ダブってしまいますね。 ですからもう1回 パブリッシュそのまましますので 「パブリッシュ」で行きましょう。 パブリッシュされました。 警告は気にしなくて構いません。 ファイルも保存しておきましょう。 そして Dreamweaver CC の方に移ります。 今 Animate のドキュメントから カットしたコードをここにペーストします。 書き換えは最低限の所を やっておくことにしましょう。 最低限というのは どういう所かと言うと まずはこの自動的に 書き出されている init これは初期化の設定なので これが最初に呼ばれます。 その後にこちらの処理を 実行しなければいけませんね。 ところが、この変数はおいといて この部分を放っとくと 順番が変わってしまうかもしれないので この3行は関数にして その関数をこの init の中の 最後に呼び出すという風に しておいた方がきちんと処理の 順番が守られます。 まだ関数の定義をしていませんが 名前を決めましょう。 init は使われてしまったので startAnimation にしましょう。 ( ) で、セミコロンです。 この3行を function にしますので function として コピーを持ってきましょう。 このままコピーを持ってきます。 そして { で、 } をこの3行の後にもってきて それから見やすいように 3行は Tab キーを押して インデントをかけます。 まずこれが1個目ですね。 もう1つはここです。 pen_mc というムービークリップの インスタンスが メインタイムラインに置いてありました。 ですからメインタイムラインの中では this. pen_mc で アクセスできたんですが 今ここは HTML ドキュメントですよね。 そうすると this はこのドキュメントに なってしまいますから これでペンギンのインスタンスの 参照をとることはできません。 ということなので、ここは 宣言だけしておきます。 // で無効化します。 では、どうするかと言うと この startAnimation が呼ばれたら 設定するんですね。 pen_mc これコピーをもってきます。 そして = さてどうするかと言うと メインタイムラインに当たるのは この中では exportRoot になります。 これをコピーを持ってきて そうすればインスタンスに アクセスできますから pen_mc としてあげればよいでしょう。 ファイルを保存して確認します。 確認は「ブラウザーでプレビュー」で Chrome を使います。 マウスポインターの後を追いかけます。 方向が変わりますね。 クリックすると アニメーションの表現が変わり もう1回ステージをクリックすると 元に戻ります。 ということで、ちゃんと元通りの動きが 再現されていますね。 このレッスンでは HTML 5 Canvas ドキュメントの中に 書いた JavaScript のコードを HTML のドキュメントの方に そのスクリプト要素の中に移しました。 そのポイントは2つありました。 1つは基本的な処理はすべて この初期化の処理が終わった後に 呼ばなければいけないと。 ですから、べたっと書いてあった処理は ちゃんと function の中に入れて 呼び出すようにする。 もう1つはタイムラインの中の インスタンスにアクセスする部分 これは Animate のドキュメントの 中では this. で アクセスしていくことができるんですが ここではこれができないので this の代わりにメインタイムラインを 表す exportRoot を使って 設定する必要がある、 という事でした。

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

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

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

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

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

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