Animate CC の新機能

HTML5 Canvasのステージを中央に表示とレスポンシブにする設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5 Canvasのパブリッシュ設定で、ステージを中央に表示したり、レスポンシブにすることができるようになりました。
講師:
03:46

字幕

このレッスンでは HTML5 Campus のパブリッシュ設定でステージを中央に表示したりレスポンシブにすることができるようになりましたのでそれを試してみたいと思います。今、このサンプルの Animate ファイルなんですけれどこれは HTML5 Campus の設定になっています。まずは、ブラウザーで確認してみることにしましょう。「制御」>「ムービープレビュー」>「ブラウザーを使用」になっていますので「プレビュー」を選択して良いでしょう。そうすると、左上の方に小さくムービーが表示されます。簡単なスクリプトが組んでありますのでクリックするとペンギンが上から落ちてくるというこんなアニメーションになっています。ではこのキャンバス、ステージの位置をウィンドウの中央に設定するようにしてみましょう。「ファイル」メニューから「パブリッシュ設定...」です。そして新たに加わったオプションとして「ステージを中央に表示」というチェックが付けられるようになっています。これは「水平」「垂直」「両方」どっちだという3つの選択肢がありますので今回は「両方」にしておきましょう。このステージ小さいのでど真ん中にしてみたいと思います。 では これで「パブリッシュ」をします。ブラウザーで確かめて見ましょう。ブラウザーでファイルをリロードします。そうすると 水平も垂直もど真ん中になりました。もう1つパブリッシュ設定を確かめてみたいと思います。もう1度「ファイル」>「パブリッシュ設定....」ですね。そして「レスポンシブにする」というチェックが付けられます。これにチェックを付けます。こちらの「幅を基準」にするのか「高さを基準」にするのか「両方」にするのか、とあります。これはもう「幅」で良いでしょう。一旦 OK をしておきます。というのはこの大きさではレスポンシブにしてもなかなか確認しづらいですね。ですから このサイズを大きくしてしまうことにします。「修正」>「ドキュメント」そして「ステージのサイズ」とありますけど幅と高さを連携させますのでこのチェーンを繋げます。そして 800 ぐらいにしましょうか。800 とそうすると高さも連動して変わります。「コンテンツを拡大/縮小」します。どこを基準にというのもありますけれどこのままで良いでしょう。ステージのカラーも特に変えません。OK します。大分大きくなりました。100% 表示なんですが今この画面には収まりきれていません。 改めて「パブリッシュ」をしましょう。そしてブラウザーで確認します。ではまたブラウザーをリロードします。大きくなりましたね、では幅を縮めてしまいます。ちょっとちらちらするのですけど幅をどんどん縮めてもちゃんと全部が表示されてます。レスポンシブになったということです。このレッスンは HTML5 Campus のパブリッシュ設定について新たなオプションを2つご紹介しました。それは「パブリッシュ設定...」の「ステージを中央に表示」すると常にウィンドウのまん中にステージ、キャンバスが表示されるようにするという設定と、それからウィンドウのサイズを変えた時それに対応するレスポンシブな設定とこの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宛までご連絡ください。