Animate CC の新機能

HTML5 Canvasのその他のパブリッシュ設定の追加機能

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または

HTML5 Canvasのパブリッシュ設定で、アセットをルートに書き出したり、JavaScriptコードをHTMLドキュメントに含められるようになりました。

講師:
05:37

字幕

このレッスンでは HTML5 Canvas のパブリシティ設定に加わった機能を2つご紹介します。今 HTML5 Canvas のAnimate のドキュメントを開いています。こちらがそのファイルの保存されているフォルダなんですけれどもAnimate のファイル以外にまだパブリッシュが行われていません。これからデフォルトの状態でパブリッシュしてみようと思います。ファイルメニューのパブリッシュ設定で確認しておきたいところだけ簡単にご説明します。まず書き出すフォルダなんですけれどもちらっと後ろに見えていますけれども現在背景画像がありますのでそれはこの images というフォルダの中に書き出されます。サウンドはこの中に含まれませんから書き出しはされません。それから Create jsjavaScript ライブラリなんですが現在の設定を詳細で見るとホストのライブラリを使うということでネットワークで JavaScript のライブラリを読み込みますのでこれもフォルダには書き出しはされません。ですから images というフォルダの中に画像が1つ入るということになります。ではこの状態でパブリッシュをしてみましょう。 パブリッシュです。フォルダを確かめると確かにファイルが書き出しされています。images という中に画像が1個ありましてHTML と JavaScript のファイルが書き出されています。ファイル名は animate のファイルと同じ名前です。拡張子が違うということですね。簡単に中を確認しておきましょう。Dreamweaver で開きたいと思います。まずは HTML の方なんですけれども注目したいのはこのスクリプトの部分ですね。この HTML の中にもスクリプトの記述がありましてでもだいたい 60 行ぐらいですね。というのは基本的には初期設定とかあと画像読み込み、ファイルの読み込みの設定があるぐらいでタイムラインの処理というのはすべて javaSacript ファイルの方に書いてあるからです。こちらはかなり分量がありますね。あんな簡単なファイルなんですけれども。実はあのペンギンのアニメーションをするイラストがあるんですがすべて javaScript で書かれていますのでコードも含まれますから結構な分量です。ではフォルダの中から animate のFLA ファイル以外ですねすべて削除します。設定を変えてパブリッシュしますのでゴミ箱に入れましょう。 まだパブリッシュ設定のダイアログは開いたままです。少し変更します。2カ所です。まずこの images というフォルダ。今まではここを空にはできませんでした。厳密には今もできないんですね。消して他のフィールドに移ろうとするとダメですと言われます。何か入れてくださいと。これが今までだったんですが今回はここにボタンが付きました。このボタンをクリックすると消えてしまいます。そうすると javaScript や HTML のドキュメントと同じ階層に書き出しされます。もう一度クリックするとまたフォルダ名を指定するようになってこの状態で空にすることはできないんですがボタンでルートといいますかこれらのファイルと同じ階層に書き出しされます。もうひとつ、今度は JavaScript のファイルなんですがJavaScript のファイルとHTML ドキュメント、2つファイルが書き出されましたね。それに対して新たなオプションが加わりました。「JavaScript を HTML に含める」つまり JavaScript ファイルとしては書き出しされずファイルが HTML に統一されるんですね。これをクリックします。そうするとここにオプションがもう1つあるんですがパブリッシュする時にいちいちHTML ドキュメントを書かないという設定ができるんですがJavaScript を含めますのでタイムラインをいじる場合はJavaScript のコードを変えなければなりません。 ですからこれをオフにすることができなくなりますよという注意です。いいので OK しましょう。そうするともうここはオフにできなくなります。この状態でもう一度パブリッシュしましょう。書き出されたファイルを見ると画像は HTML と同一階層です。それから JavaScript ファイルがなくなりました。というのはコードはすべてこの HTML ドキュメントに入っているからです。確認してみましょう。Dreamweaver で開きます。ではスクリプトをまたちょっと畳みますけれどもこの下に見えている部分196 から下ですね。こちらは先ほど HTML ドキュメントの中にあった初期設定やファイルの読み込みの部分ですね。そんなに長くありません。その上、今畳んだ部分なんですがここが先ほどまではJavaScript ファイルの方に書かれていたコードです。ですからここの部分はかなり分量があるということでHTML のドキュメントの方は行数が増えてしまうということになります。このレッスンでは HTML5 Canvas のパブリッシュ設定に加わった機能を2つご紹介しました。1つはアセットを書き出す時フォルダを指定せずにHTML と同じ階層に書き出すという機能。 もう1つは詳細の方ですけれどもJavaScript を HTML に含んでしまうというこのボタン。この2つをご紹介しました。

Animate CC の新機能

Flash ProfessioalがAnimateへと生まれ変わりました。新しいAnimateではこれまでのFlash PlayerやWebだけではない、より幅広いメディアプラットフォームへの対応が強く意識されています。HTML5への対応強化やCreative Cloudを通じた他のアプリケーションとの連携の機能など新しい機能や機能強化について解説します。

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

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

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

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