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

HTML5 Canvasドキュメントのファイルの構造

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5 Canvasドキュメントからパブリッシュされるファイルの基本的な内容をご説明します。
講師:
08:21

字幕

このレッスンでは、 HTML5 Canvas ドキュメントから パブリッシュされるファイルの 基本的な内容についてご説明します。 今、 Animate で開いている ドキュメントなんですが、 HTML5 Canvas のドキュメントです。 ファイル名は assets.fla となっています。 このペンギンのシンボルはアニメーションが 含まれているんですけれども、 このインスタンスの pen_mc に対して、 スクリプトがメインタイムラインの ここに書かれています。 インタラクションやアニメーションが 定められています。 例えば、マウスを動かしたらどうなるとか、 こちらですね。 それから、マウスをクリックしたら、 あるいは、 アニメーションの処理といったものが、 それぞれ function として 書いてありますけれども、 どういう動きになるかを、 ちょっと確認しておきましょう。 一旦これを閉じまして、 「制御」>「プレビュー」です。 マウスポインタ―を動かすと、 その後をペンギンが追っていきます。 ペンギンの歩くアニメーションは ペンギンの中に書かれているんですけれども、 向きが変わるというのは インタラクションですので、 JavaScript のコードとして 書いてあります。 あと、クリックをした時、 アニメーションが変わります。 もう1回クリックすると、戻るんですが、 こういったインタラクションも 先ほどの JavaScript のコードに 含まれているわけです。 最終的にコンテンツとして サーバーにアップロードするのは、 この fla ファイルではありません。 パブリッシュで書き出される HTML のドキュメントとか、 JavaScript のファイルとか、 あるいは画像ファイル、 そういったものになります。 その設定は「パブリッシュ」と 言うんですけれども、 「パブリッシュ設定」で 基本的な設定を行います。 今回、特にデフォルトの設定を 変えませんけども、 簡単に見ましょう。 JavaScript のファイルと HTML のファイルが 書き出されますよということですね。 それから、画像が含まれている場合、 それが、 images という フォルダに書き出されます。 サウンドがあれば、今度は sound というフォルダの中に書き出されて、 あと、CreateJS という JavaScript ライブラリで、 この JavaScript が解釈されて、 コントロールが行われるわけなんですが、 その CreateJS のファイル、 JavaScript のファイルを libs という所に書き出しますよ、 とあります。 ただ、デフォルトでは詳細を見ると、 「ホストのライブラリ」に チェックが付いています。 この場合には CDN と言いますけれど、 ネットワークから ライブラリを読み込んでくるので、 わざわざダウンロードしなくても 良いんですね。 ということなので、この設定になっていれば、 この libs というフォルダは出来ませんし、 もちろん、JavaScript ファイルは 書き出されません。 では、この設定で このままパブリッシュしようという場合には、 「パブリッシュ」のボタンを押します。 何も起こりませんけれども、 ファイルが書き出されました。 では、OK ですね。 「警告」が出ますけれども、 これはあくまでも注意です。 「こういうことがありますので、 注意して下さいね。」というだけですので、 慣れてしまえば、 特に気にする必要はありません。 それから、パブリッシュ設定を 特に変更しないで行ないましたね。 変更がない場合には、 「ファイル」>「パブリッシュ」で、 いきなりパブリッシュすることができます。 「パブリッシュ設定」の状態で 「パブリッシュ」をするという場合です。 それから実は、 「制御」>「プレビュー」とする場合、 「プレビュー」はデフォルトでは、 「ブラウザを使用」になっています。 その時には、この「プレビュー」でも、 やはり書き出しが行われます。 つまり、書き出しが行われて、 その書き出された HTML のファイルを ブラウザで見る。 そういう処理になるわけですね。 では、書き出されたファイルを 確認してみましょう。 こちらのウィンドウが パブリッシュされたファイルです。 assets.fla の隣に出来上がります。 サーバーにアップロードする必要があるのは この2つです。 「あれ?」っと思った方も いるかもしれませんね。 「ペンギンの画像はどうしたの?」 それは、これを開いてみると分かります。 画像を使っていない場合、 ビットマップの画像を使っていない場合には、 images というフォルダが出来ませんし、 画像は描き出されません。 ペンギンの情報は、実は、 この assets.js JavaScript ファイルの中にあります。 確認してみましょう。 Dreamweaver CC 2015 で 開くことにします。 2つのファイルが開かれました。 まず、assets.js の方から 見ていきましょう。 「なんだか、さっぱり分らない。」 分らなくても構いません。 このファイルの中は基本的には、 ユーザーがいじる必要はない という前提になっています。 でも、せっかく開いたんですから、 ちょっと見てみましょう。 下の方に行くと、この辺りなんかは さっぱりわからないですね。 暗号の様になっています。 この暗号の様になっている部分というのは、 シェイプを JavaScript で 描いているんですね。 ですから、ペンギンが 書き出されなかったのは、 ペンギンはシェイプで作られているので、 この中のどこかにペンギンのパーツが あちこち、あるはずなんです。 見ても分かりませんけれども。 ですから、このようにして、 CreateJS が シェイプを描いているんですね。 あるいは、アニメーションもしています。 もうちょっと下に行くと、 この辺り、timeline.addTween なんてあるので、 ちょっと見当が付くかもしれませんが、 Tween アニメーションなどの アニメーションも、 この中で設定されています。 それから、更に下りましょう。 ちょっと見た覚えがあるようなものが 見えてきました。 timeline function とありますけども、 先ほどアクションパネルの中で見た JavaScript のコードです。 それが、ちょっと形が変わりましたけども、 このようにして書き出しがされています。 ですから、Animate の ドキュメントの中に書かれていた JavaScript のコードも この js ファイルの中に含まれています。 では、これをどうやって、 実際に HTML のほうで コントロールしているのか、 描画しているのかというのを 簡単に確認しておきましょう。 assets.html こちらを開きます。 そうすると、まず、 下の方から見ていきますけれども、 CreateJS では描画アニメーションを Canvas で行いますので、 canvas 要素ができています。 そして、body 要素に onload の属性で、 init() 関数の呼び出しが 指定されています。 この関数は CreateJS が使われている こちらの部分なんですけれども、 その中にあります。 こちらもあまり よく分らないと思いますけれども、 1つ指摘しておきたいのは、この部分です。 ここはちょっと覚えておきましょう。 new というのは、オブジェクトを作る時の JavaScript の 決まり文句なんですけれども、 lib.assets とあります。 これ、ファイル名と一緒ですね。 ですから、この部分で、 この assets.js に書かれている コントロール、あるいはアニメーション、 そういったものを含んだ オブジェクトが作られて、 exportRoot という 変数に入っています。 これが、言ってみれば、 メインタイムラインだと思ってください。 メインタイムラインの中には 勿論、シンボルが置かれていたりとか、 インスタンスが置かれていたりとか、 そういったものがありますので、 全てを含んでいるわけですが、 これが一番親の メインタイムラインということです。 assets.js は こちらで読み込んでいますね。 もし、Animate のドキュメントの中に 書くのではなくて、 JavaScript コードを 外に書きたい場合には、 こちらの HTML ドキュメントに 書き込むことになります。 ですから、ここに write your code here と 書いてありますね。 あるいは、短い JavaScript のコードでしたら、 この script の要素の中に 書き足すのでも良いと思います。 更に、分量が増えてきたら、 この assets.js と同じ様に 外部の JavaScript ファイルにして、 その後に追加していくという 方法もあるでしょう。 あと、先ほど、「ホストのライブラリを使用」 とありましたね。 その場合には、CreateJS の JavaScript ファイルが ダウンロードされずに、ネットワークから 取ってくるという風に言いました。 それがこの部分です。 CreateJS のライブラリを https ということで、 ネットから持ってきていますから、 CreateJS のライブラリファイルを ダウンロードして、 それをローカルに取っておくとか、 サーバーに上げるとかという 必要はありません。 このレッスンでは、 HTML5 Canvas ドキュメントから パブリッシュされるファイルの 基本的な内容についてご説明をしました。

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

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

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

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

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

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