Animate CC 基本講座

HTML5にパブリッシュされたファイルの内容

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5 Canvasドキュメントからパブリッシュされるファイルについて、簡単にご説明します。
講師:
05:58

字幕

このレッスンでは HTML5 Canvas から パブリッシュされるファイルについて 簡単にご説明します。 今開いているサンプルのファイルは 「プロパティ」を見てみると HTML5 Canvas の ドキュメントだということがわかります。 これをパブリッシュする時には 「ファイル」>「パブリッシュ設定」 を選択します。 まず最低限 JavaScript と HTML の 2つのファイルが書き出されます。 そして JavaScript のファイルは ここに書いてあるような名前で 出力されます。 sample_Canvas.js これは sample_Canvas という fla ファイルの ファイル名を持って来ています。 それからここに書いてありませんが HTML についても この同じ名前の後に .html ということで書き出されます。 それから、このコンテンツには 画像があります。 背景画像があったりとか サウンドがあります。 それらをどこに保存するかというと という設定もここにあります。 画像は images という フォルダの中 サウンドは sounds という フォルダの中に入ります。 そして、この HTML5 Canvas の アニメーション等 あるいはインタラクションを含めるんですけど そういったコントロールをするのが CtreateJS という JavaScript のライブラリになります。 これをもし、サーバーにアップロードして あるいはローカルにダウンロードして 使うという場合には libs というフォルダの中に入ります。 デフォルトでは このライブラリは CDN Contents Delivery Network と言いますけれど ネットワークからライブラリを読み込む という形になります。 ですから、この libs というフォルダの中に ライブラリが入ることは、ありません。 逆に言えばサーバーにアップロードする時に この CreateJS のライブラリを サーバーに上げるという必要がない ということになります。 CreateJS のライブラリを CDN で使うかというのは この「詳細」タブで 「ホストのライブラリ」 ここにチェックが入っていると CDN から CreateJS の ライブラリを読み込んでいきます。 ですから、ローカルやサーバーにライブラリの ファイルを持つ必要がありません。 外した場合にはダウンロードされて libs のフォルダの中に CreateJS のライブラリが入ります。 その場合にはサーバーに やはりアップロードしなければいけない ということになります。 ここはチェックを付けておきましょう。 ですから CDN、ネットワークから CreateJS のライブラリを 読み込んでくるという形にします。 そして「パブリッシュ」をしましょう。 警告は気にしなくて構いません。 OK です。 パブリッシュされたファイルを フォルダで開いています。 images の中に 背景画像があり sounds の中に mp3 のサウンドが入っています。 それから HTML と JS ファイル どちらもファイル名は fla と一緒です。 サーバーに上げるのは fla を除いた この4つということになります。 ちょっとこの HTML と JS ファイル JavaScript のファイルの 内容を見てみましょう。 DreamWeaver CC 2015 で 開くことにします。 まず JS ファイルのほうですね。 こちらは基本的には いじることはありません。 ですから簡単に見るだけにしますけど いろいろ JS ファイルですから 書いてあるのですけど JavaScript をご存知の方でも 何かよくわからない暗号があります。 ここは実は、アニメーション ベクターのアニメーションの場合に べクタ―画像を書くのですけど そのベクター画像を 設定して書いている部分です。 この辺などもそうですね。 更にもっと下っていくと またちょっと違った 暗号のようなものがありますけど ここはアニメーション‘を 制御する部分です。 このように JavaScript で ベクターグラフィクスを描き それをまた JavaScript で アニメーションさせている、ということで そういった操作を この JS ファイルは行っています。 ここは最初に申し上げた通り いじることはありませんので あ、こんなことやってるんだね. だから必要なんだな. ということが分かって頂ければ十分です。 もしいじるとすれば この HTML ファイルのほうになります。 初期化の関数が init というものなんですけど ここにメモ書きがありますね。 コメントがあります。 write your JS code here と もし JavaScript で、このコンテンツを コントロールしたいのであれば ここに書いて下さいね ということです。 ここに直に書くというよりは この中から関数を呼び出して 関数をどんどん付け加えていく という形になると思います。 それから CreateJS のライブラリを 読み込んでいますが https:// ということで ネットワークから読み込むと ご説明した通り パブリッシュ設定に従って ローカル、あるいはサーバーから ライブラリを読み込むのではなくて ネットワークから読み込む ということになっています。 それからパブリッシュで 一緒に書き出された ファイル名共通 JS ファイルと いうものがあります。 そして最後に 1つだけご注意なんですけど write your JS code here とあって 確かにここにコードを書くんですけど このままでは、パブリッシュをすると このファイルは上書きされてしまいます。 ですから、ここに コントロールするための JavaScript コードを どんどん書き加えていく ということであれば、ファイル名は 別にしておいたほうが良いです。 ですから fla ファイルと 違ったファイル名にしておいて それを使う、と。 そしてパブリッシュされた時に 上書きされる方は それはダミーとして 捨ててしまって JS ファイルには、その他の素材を使う というふうにすると良いでしょう。 このレッスンでは HTML5 Canvas の ドキュメントからパブリッシュされる ファイルについて 簡単にご説明しました。

Animate CC 基本講座

Animateはインタラクティブなアニメーションが作れるソフトです。2016年にFlash Professional からアップデートされ、機能がますます充実し、名前も新しくなりました。このコースではAnimateの基本的な操作からグラフィックの描画やアニメーション作成、映像やサウンドの扱い方まで幅広く解説します。

6時間31分 (78 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2016年05月04日
アップデート日:2016年06月21日

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

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

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