スマート プレゼンター®でセミナー撮影

7-3 レスポンシブレイアウト化しよう2

この講座は、Adobe Edge Animate CCを使用し、フラッシュを使わないでHTMLのインタラクティブなアニメーションを作成し、また、作成したコンテンツを、レスポンシブなレイアウトにしてタブレットデバイスで表示する、ということを目標に進めていきます。

この講座もいよいよ最終回となりました。
今回はタブレットを横にしたときも対応するよう、レスポンシブレイアウト化をすすめていきましょう。

ブラウザでプレビュー

まずは、ブラウザでプレビューしてみます。コンテンツの高さを低くしてみてください。
ブラウザ上でも高さを低くするとレイアウトが崩れるのがわかります。
これをウィンドウの高さに応じてストレッチするようになおします。

1.自動キーフレームモードオフ

・自動キーフレームモードをオフにします。

2.シンボル1を選択します

・sb_info1の設定を変更します。
・上を%、高さも%に変更します。
・sb_info1中身も%に変更します。
sb_info1の設定を変更

3.シンボル2を選択します

・sb_info2の設定を変更します。
・上を%、高さも%に変更します。
・sb_info2中身も%に変更します。
sb_info2の設定を変更

4.タイトルを選択します

・上を%、高さも%に変更します。
タイトルを上を%、高さも%に変更
・中身も%に変更します。
・テキストも上を%に変更します。
テキストも上を%に変更

5.保存して、ブラウザでプレビューします

・ブラウザのサイズを変更して完成を確認してみます。

6.タブレットでプレビュー

・タブレットでもプレビューし、横向きにしても対応しているかなど確認してみてください。

以上で完成です。
縦は左と幅の単位を調整しましたが、横向きには、上と高さの単位を%に変更することで対応できます。
シンボル化されているものは、一度展開し、内部の単位変更も忘れずおこなってください。

複雑なコーディングを行うことなく、インタラクティブなコンテンツが作ることができることを体感していただけましたでしょうか。
タブレット用にはEdgeInspect等Edgeツールを使うとブラウザと同期でき、より便利です。

以上でWebデザイナーのためのHTMLアニメーション作成入門は終了です。

<前のトピックへ || 次のトピックへ>



各種IT教材と販促支援物の制作承ります

講義、講演会の撮影承ります