Flash Professional CC 2015 基本講座

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5用につくったコンテンツを、サーバーにアップロードするためにパブリッシュします。
講師:
07:04

字幕

このレッスンではFlash Professional で作った―HTML 5 Canvas 用のコンテンツを最終的に サーバーにアップロードするためにどのように ファイルの書き出しパブリッシュを行うのかということについて ご説明します今 画面で開いている.fla ファイルこれは HTML 5 Canvas 用の設定になっていますですから HTML 5 の書き出しができる ということになりますでは Flash Professionalの方に移ってみましょうFlash Professional でHTML 5 Canvas 用の設定で作った簡単なアニメーションのコンテンツを開いていますこの中には いくつかの代表的な パーツが含まれています「ライブラリ」 で見るといいんですけれどもまずは 簡単なアニメーションですアニメーションは このウィンドウで再生内容を確認することができるのですけれどもこんな感じのアニメーションですそれからサウンドも用意されていますサウンドはここに sound というレイヤーなのですけれども1 マスしかありませんがここに配置されていますこんな感じのサウンドですちょっとだけ 聴いてみましょうそれから画面で見て わかるでしょうけれどもバックグラウンドこれは PNG(ピング)ファイル なのですがそれも配置されていますアニメーション 画像それから サウンドこういったものが配置されたHTML ドキュメントの設定のコンテンツをでは パブリッシュしてみたいと思いますパブリッシュの設定は「ファイル」>「パブリッシュ設定」ですこれで パブリッシュ設定のダイアローグを 開きますデフォルトの設定のままいきたいと思うのですけれども書き出されるファイルが実は いくつかありますJavaScript のファイル拡張子が .js ですねそれから もちろんHTML のファイルが 必要ですそして JavaScript のファイルはこの元の .fla ファイルと同じ名前で拡張子が .js という風になりますそれから この中には表示されていませんけれどもHTML も この .js の部分が.html に書き換わった形でファイルが出来上がりますそれから 中に配置されている―画像とか サウンドとかその他のものも ありますけれどもデフォルトの設定のままパブリッシュをしてみたいと思います「パブリッシュ」をすると 書き出しが行われて画面上は 何の変化もないように見えますけれども書き出しされましたでは OK しましょう何か警告が出て気になるかもしれませんが警告というと きついのですけれどもこういうことに気を付けてくださいね という注意書きですのでこれは 気にしないで結構ですでは どんなファイルが書き出されたか 確認してみましょう先程は.fla ファイル 1 つだったウィンドウ内にたくさんファイルが 書き出されていますまず わかりやすいところからimages とありますけれどもこれはバックグラウンド 背景のファイルが JPEG として書き出されていますそれから サウンドがありましたのでそのサウンドが この sounds というフォルダの中にありますMP 3 の形式ですそれから もちろんHTMLのドキュメントは必要ですねそれから 同名の.js という拡張子のJavaScript ファイルがありますあれ アニメーションはどうしたと思うかもしれません実は あのアニメーションはFlash のベクターグラフィックで作ってありますベクターグラフィックで作られたものは実は JavaScript で書いてしまうんですねですからこの images の中にその ペンギンの先程の絵が含まれる ということはないですビットマップで アニメーションを作ればもちろん images の中に入るのですけれどもベクターグラフィックで書いたものについてはJavaScript のファイルの中に含まれてしまいますつまり とても軽くなるということが言えますではちょっと この 2 つを開いてみましょうDreamweaver CC で開きますDreamweaver CC 2015開けてみましょうまずは わかりやすいのは HTML ですねこちらはライブラリが必要なものが 含まれていますこの Flash Professional から書き出した Canvas を使うHTML 5 のドキュメントではCreateJS というライブラリ群ライブラリ スイート ですねを使うことになっていますですから そのCreateJS に含まれる 様々なJavaScript ファイルが読み込まれていますそれから 先ほど書き出した中にありましたね.js のファイル これも読み込まないといけませんそうでないと アニメーションが再生できませんからねアニメーションが含まれているという風に申し上げましたそしてこの CreateJS を使うための基本的な設定がこの script 要素の中に書かれていますということで これら必要なものを もし他の HTML ドキュメントの方に移すのであれば1 個 1 個といいますかこのスクリプトの読み込みとそれからJavaScript のコードですねこれを コピーして持っていくということになるのですが初心者の方には ちょっとやりにくいかと思いますのでその場合にはこの HTML ドキュメントに対して必要な要素を 埋め込んでいって場合によっては JavaScript も書き加えていく という風にした方が良いのではないか と思いますでは もう一つ .js ファイルこちらの方は 本当にちらっと見るだけですというのは 内容を見てもよくわからないからですねこの中を書き換えよう ということはよほど中級 上級にならない限りはやめた方がいいと思いますそして何か ドドっと意味不明の記号が 現れてきましたがこれが実は ベクターグラフィックスを描くとですから ペンギンを一生懸命ここで描いているんですねということで 中身を見てもわからないのですがベクターグラフィックはJavaScript で書かれるしたがって テキストファイルですねということで 軽くなるということだけ 頭に入れていただければ結構でしょうさて そういうことでサーバーに 最終的にアップロードするのは.fla ファイルを除いたこれらのファイル ということになりますもし 画像をたくさん 使っていたりサウンドを複数使っていたりということになればファイルの数も それに伴って増えていきますけれどもこの .fla ファイル以外.fla ファイルは 上げても意味がありませんので.fla ファイル以外を サーバーにアップロードしますこのレッスンではFlash Professional で作った―HTML 5 Canvas 用のコンテンツをどのように パブリッシュ 書き出しをしてどのファイルを サーバーにアップロードすればいいのかということについて ご説明しました

Flash Professional CC 2015 基本講座

Flash ProfessionalはPCだけでなく、モバイル向けにもインタラクティブなアニメーションが作れるソフトウェアです。動画はFlash PlayerだけでなくAIRやHTML5にも書き出せます。このコースではその基本的な操作方法からグラフィックの描画やアニメーション、画像やサウンドの扱い方、そしてActionScriptなどについて説明します。

7時間21分 (78 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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