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

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

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

今回は、完成したコンテンツのレスポンシブレイアウト化をすすめていきましょう。
これにより、タブレットやスマートフォンの表示にも対応したコンテンツになります。

背景のレスポンシブレイアウト化

まずは、背景の画像のレスポンシブレイアウト化をすすめていきましょう。

1.背景を選択します

・背景の設定をしたい場合は、ステージの余白をクリックすると選択できます。
ステージの余白をクリックし選択

2.幅を%で設定します

・これまでpxで設定していた幅の単位をクリックして%に切り替えます。
幅を%で設定

3.最小幅、最大幅を設定します

・最小幅と最大幅を決めることで、設定範囲内のサイズで対応できるようになります。
・最小幅640
・最大幅1024
最小幅、最大幅の設定

4.背景画像のロックを解除し選択します

・背景画像を設定したときに動かないようロックをかけていますので、これを解除します。
・エレメントパネルでロックを解除します。
・背景画像を選択します。
背景画像のロック解除

5.レスポンシブレイアウトのプリセットを適用

・ディスプレイのサイズが小さくなった時にどのように配置するかのプリセットを決めます。
・レスポンシブレイアウトのプリセットを適用をクリックします。
レスポンシブレイアウトのプリセットを適用
・今回は、親要素にたいして相対的に伸縮させます。
・「サイズを伸縮」を選択し、適用します。
サイズを伸縮

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

・背景の部分がレスポンシブになりました
保存して、ブラウザでプレビュー
ブラウザでプレビューし、ブラウザのサイズを変えると、背景画像が伸縮するようになったのがわかりますでしょうか。
また、最大を1024にしているので、それ以上の幅には広がりません。
タブレットでも背景画像はピッタリおさまるようになります。

タイトルのレスポンシブレイアウト化

続いて、タイトルのレスポンシブレイアウト化をおこないます。

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

・マットとテキストをまとめて選択します。
ットとテキストをまとめて選択

2.幅の値を%に変更します

・幅の値を%に変更します。
・%を選択すると今の設定にあった数値に変更されます。
幅の値を%に変更

メッセージのレスポンシブレイアウト化

メッセージ部分のレスポンシブレイアウト化をおこないます。

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

・sb_info1を選択します。
sb_info1を選択
・自動キーフレームモードオフにします。
自動キーフレームモードオフ
・幅の値を%に変更します。
幅の値を%に変更

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

・シンボル2もシンボル1と同様の手順でレスポンシブ化します。
・sb_info2

3.シンボル内の要素も%に変更します

・シンボルをダブルクリックして、テキストやマットも%に変更します。
シンボル内の要素も%に変更

ボタンのレスポンシブレイアウト化

2つのボタンのレスポンシブレイアウト化をおこないます。

1.ボタンも%に変更

・タイトルと同様にボタン2つも単位を%に変更します。

2.ボタンの基点を変えます

・サイズか伸縮したときにでもボタンの配置が一定になるよう基点をきめます。
・左のボタンは左下を基点にします。
・右のボタンは右下を基点にします。
ボタンの基点を変えます

3.ボタンの要素も%に変更

・左ボタン、右ボタンそれぞれシンボル化されているので内容を全て%に変更します。
・シンボルをダブルクリックして、それぞれを%に変更します。
ボタンの要素も%に変更

ンボル化されているので内容を全て%に変更

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

・ブラウザで確認するとコンテンツ部分もサイズの伸縮に対応するようになりました。
・ボタンの基点を設定しているのでボタンの位置も崩れません。
・レスポンシブレイアウトはpxなど固定の単位を相対的な単位の%に変えていくことで対応します。プレビューしてみて伸縮に対応していない要素は%の設定になっているか確認してみてください。

今回で縦で見た場合のレスポンシブレイアウト化ができました。
しかし、タブレットを横にしてみるとレイアウトが崩れてしまいます。
タブレットやスマートフォンは横にすることもあるので、次回は、横にしたときにも対応するよう調整していきましょう。

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



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

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