Animate CC 基本講座

HTML5へのコンテンツのパブリッシュ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5向けのコンテンツをサーバーにアップロードするファイルとして書き出す場合のパブリッシュについてご説明します。
講師:
05:18

字幕

このレッスンでは HTML5 向けのコンテンツを サーバーにアップロードするファイルとして 書き出す場合のパブリッシュについて 説明します。 今フォルダの中に開いてみている sample_Canvas.fla は Animate で HTML5 Canvas の形式で 作られたファイルです。 Animate で今の sample_Canvas.fla を開きました。 ドキュメントのプロパティを見てみると 確かに HTML5 Canvas という 風になっていますね。 どんなコンテンツか 簡単なサンプルなんですけど 見てみることにしましょう。 「制御」>「ムービープレビュー」> 「ブラウザを使用」します。 背景があって ペンギンがアニメーションで歩いています。 そしてサウンドが鳴っていて インタラクションのプログラムが 含まれていますので クリックするとジャンプします。 そういうコンテンツです。 Animate に戻ってみると 何か警告が出ていて ちょっと物騒な感じがするんですけども これはあくまでも注意です。 こういうことに注意してコンテンツを 作ってくださいということですので 特に気にしなくて構いません。 タイムラインに切り替えておきましょう。 パブリッシュする場合に この中で使われているパーツには どんなものがあるのかというと レイヤーが分かれていて 背景があって ペンギンのアニメーションがあって サウンドがあって それから JavaScript のプログラムがある ということなんですが これらのパーツの多くは ライブラリに入っています。 まず background は png のファイルになっています。 それからペンギンのアニメーションは ベクターグラフィックで作られていて ここでちょっと確認ができるのですが こんなアニメーションです。 それからサウンドです。 クリックすると波形が見えますけども mp3 のサウンドになっています。 スクリプトはこの中には入っていません。 ではこれをパブリッシュして みたいと思います。 「ファイル」>「パブリッシュ設定」 を開きます。 最低限2つのファイルが必要です。 「パブリッシュ」というところに チェックが入っていますが 2つが もうセットになっていますね。 JavaScript のファイルと HTML です。 HTML5 の書き出しですから 当然 HTML のファイルは必要ですね。 そしてアニメーションなどの コントロールを含めて 例えばクリックした時に ペンギンがジャンプするといったものも 全て JavaScript でコントロールしているので この2つは絶対必要になります。 あと何が必要かというのは 実際にパブリッシュしてみましょう。 パブリッシュボタンを押して 書き出しがされました。 また警告が出てますが気にしないで下さい。 「OK」で確認してみましょう。 ファイルやフォルダが沢山書き出されました。 images フォルダがありますね。 開いてみると背景画像が jpg として入っています。 戻りまして sounds 大体見当がつきますね。 mp3 のサウンドが書き出されています。 それから最初に パブリッシュのときに申し上げた通り HTML と JavaScript ファイルがあります。 あれ ペンギンどこへ行ったんだろう?と。 ペンギンはベクターグラフィックで 描かれています。 ベクターグラフィックの描画というのは 実は JavaScript で行うんですね。 ですから この JavaScript ファイルの中に ペンギンの描画のソースそのものが 入っていますので images の中にはペンギンが無いです。 勿論アニメーションを作る時に BMP を使って アニメーションを作っていれば それが images の中に入ります。 けれどもベクターグラフィックの場合には JavaScript で全部作ってしまいます。 その意味ではファイルのサイズは 軽くなるという事が言えます。 そしてサーバーにアップロードする時には この fla ファイル以外を アップロードしてください。 この JavaScript ファイルが images 或いは sounds の中に 入っているファイルを読み込んで そして HTML の方に 表示したり或いは再生したりと いう事をするコントロールをしますので これらのフォルダの中のファイルも サーバーにアップロードしないといけません。 Flash Player の場合と同様 この fla ファイルはサーバーに上げても 意味がありません。 これは必要なファイルを書き出す為の いわば元となるファイルです。 Animate の方でコンテンツに 修正が入った後パブリッシュしたい場合 パブリッシュ設定に特に変更がなければ 「ファイル」>「パブリッシュ」という 風に選べば パブリッシュ設定に設定された内容で 改めて変更された内容に基づいて HTML のファイルや JavaScript のファイル images、sounds といったものを書き出します。 書き出したものを改めて確認したい ブラウザで見たいという場合には 最初にお見せした「制御」メニュー> 「ムービープレビュー」> 「ブラウザを使用」を選べば やはり必要なファイルは全部書き出されて その上でブラウザを開き HTML ドキュメントの表示をし コンテンツの確認をすることが出来ます。 このレッスンでは HTMl 5 向けのコンテンツを サーバーにアップロードするファイルとして 書き出す場合の パブリッシュについて説明しました。

Animate CC 基本講座

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

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

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

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

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