Flash Professional CC 2015のアップデート

HTML5Canvasのパブリッシュ機能強化

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ビットマップをスプライトシートとして書き出しでき、CreateJSライブラリは最新版に対応しました。
講師:
07:50

字幕

このレッスンではHTML5 Canvas の ドキュメントをパブリッシュする時の 新しい機能を3つご紹介します まず1つ目はパブリッシュするファイルが 必要最小限度のものに最適化されます 2つ目はビットマップ全てをHTML5 Canvasの スプライトシートとして 書き出せるようになりました そして3つ目が最新の CreateJSライブラリをサポートします まずHTML5 Canvasからパブリッシュする時に 必要のないデータは書き出さず 必要最小限度のデータに サイズを最適化するという機能です 具体的には次のものが除外されます 使われていない タイムラインに置かれていない リンケージのないライブラリ項目 これは書き出しされません 次にガイドレイヤーに置いてある素材 これも不要ですから書き出しません 3つ目は非表示レイヤーの素材です 但しこれはオプションがありまして [非表示レイヤーを含める]の オン/オフができます もし非表示だけど含めたい時には オンにすればいいですし 必要がなければ オフにすれば書き出されません 最後にグラフィックシンボルの中で 使われていないフレームに置いてある素材は 要りませんので書き出されません このようにしてファイルのサイズを最小限度に コンパクトに纏めることになりました 次にビットマップ全てをHTML5 Canvasの スプライトシートに 纏めて書き出すという機能です 今開いているflaファイルなんですが レイヤーがありまして 一番下のレイヤーには 地面ですね それから2番目には猿 3番目にキリン 4番目に像というふうに レイヤーごとにパーツが置かれています それぞれはムービークリップシンボルの インスタンスですが その中にビットマップが配置されています 例えば 猿はムービークリップ monkey_mc キリンはこちらですね 像はこちらという風に みんなムービー クリップの中にビットマップが入っています ではパブリッシュ設定を見てみましょう ファイルからパブリッシュ設定です まずJavaScriptのファイルの名前ですね それからアセット書き出しオプションの中で 「すべてのビットマップと スプライトシートを書き出し」 これがビットマップを纏めて スプライトシートにするという機能です 新たに付け加わりました デフォルトではオンになっています ちなみに英語名では Export all bitmaps as sprite sheets となっています ですから日本語もちょっとおかしいですね 「すべてのビットマップをスプライトシート として書き出す」という意味です それからサウンドと CreateJSを収めるフォルダーですね シンボル イメージ CreateJSの名前空間 これは今までと一緒です それから非表示レイヤーを 含めるかどうかのチェックが ここでオン/オフできます もうひとつ ホストのライブラリが デフォルトでオンになっています これはCreateJSのライブラリを サイトに公開されているJavaScriptファイル から読み込んでくるということです そうすると自分のサーバーに アップロードする必要がありません ではこれでパブリッシュしてみましょう OKを押して一旦閉じます このimagesというフォルダの中に ビットマップが書き出されています 開きます ではこれをPhotoshopで開いてみましょう Adobe Photoshop CC 2015 です 3匹の動物が1つのファイルに ビットマップとして収められています こうしておくとファイルから データをロードする時 3つのファイルではなく1つですむので サーバーに対するリクエストが減ります 1個ですむということで これが1つの最適化になっているわけです このビットマップのファイル名は もともとのflaファイルのファイル名 sample_atlas_.png ファイルですね というふうになっています atlasというのが スプライトシートを意味しています もう1つ json ファイルがあります ファイル名は一緒で 拡張子が .json です これも開いてみましょう このアプリケーションで開くのは Dreamweaver CC 2015とします jsonの中身ですが まず今のpngファイルの パスが収められています そしてここにあるのは 1枚にしてしまった ビットマップの中の どの部分を猿 どの部分をキリン どの部分を像として使うという つまり3匹分に分けられたデータの 座標情報が含まれています このデータに基づいて 先ほどのビットマップファイルを切り出して HTMLあるいはJavaScriptのファイルが 扱えるようになるわけです もう一度 HTML5 Canvas ドキュメントの パブリッシュ設定を見てみます CreateJSは最新版が使われます そしてこの「ホストのライブラリ」の チェックボックスですが これについては一点注意が必要です Adobeのサイトで確認しましょう Adobeサイトのメニューで Flashが出てこないので すべて見ましょう そして下にスクロールして Flashが出てきましたね 最新情報を確認します この最新情報の中で 下にスクロールして 「すべてのリリースノートを見る」 を確認します 「Flash Professional ヘルプ 新機能の概要」 というページに跳びました そして「新機能および機能強化」とありますが 少し下にスクロールして すべてを表示します そして最新のCreateJSライブラリの統合は 対応したということですが ここに注意書きがあります 「最新のライブラリはまだCDNによって ホストされていない」となっていて 「ホストのライブラリ」チェックボックスを オフにしてください と書いてありますが これは実は多分 少し古い情報です ちゃんとCDNの つまりサイトに公開された CreatJSのライブラリが 読み込まれています それを確認したいと思います パブリッシュされた中の元のflaファイルと 同じ名前のHTMLドキュメント これを確認します またDreamweaverで開きます Dreamweaver CC 2015 ここがCreateJSライブラリの 読み込み部分になります ちゃんと http://code.createjs.com となっていますから サイトからのデータは引っ張ってきています ちなみにEaselJS 最新バージョンは0.8.1 その他のTweenJS PreloadJS あと出ていませんが 今回サウンドを使っていないので 出ていませんが SoundJS これらはすべて 0.6.1 が 最新版となっています ですからホストの所のチェックは 入れて結構です このレッスンでは HTML5 Canvasからの パブリッシュに関する新機能 3つをご紹介しました 1つはパブリッシュされるファイルを 最小限にして最適化すること 2つ目はビットマップ全てを纏めて スプライトシートとして書き出すこと 3つ目は最新のCreateJSライブラリに 対応していて ホストのライブラリがチェックできる ということです

Flash Professional CC 2015のアップデート

このコースではアップデートされたFlash Professional CC 2015の中から主な新機能を紹介します。関節の動きのようなアニメーションが作れるボーンツールやFlash PlayerとAIRおよびHTML5 Canvasドキュメントのパブリッシュの強化、その他ちょっと知っておくだけで作業効率が高まる細かな改善などについて解説します。

48分 (13 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年07月15日

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

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

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