目次:
ビデオ: Demo 2013.8.1 : Adobe Edge Animate CC 2024
ステージは、イメージ、テキスト、描画オブジェクトなどの要素を配置する場所です。ステージはライブのHTMLウィンドウです。つまり、画面に表示される内容は、オーディエンスがコンポジションを表示したり操作したりしたときに表示されるものです。ステージのサイズを変更するには、いくつかの方法があります。
-
ピクセル: Adobe Edge Animate CCでは、ブラウザウィンドウのサイズに関係なく、ステージを特定のサイズのままに設定できます。
<! - 1 - > -
パーセンテージ: より反応性の高いウェブデザインを希望される方に。
-
レスポンシブウェブデザインのテスト: ステージの背景色を変更して、デザインの応答性をテストすることができます。
ピクセル値でステージのサイズを設定する
ステージのサイズを正しく設定することが最も一般的な手順の1つです。既存のWebページにアニメーションを挿入する場合は、最初にアニメーションをそのページでどのくらいのスペースを占めるかを決定し、それに応じてステージのサイズを変更します。
<! - 2 - >ステージのサイズを変更するには、表示されているように、プロパティパネルのステージのセクションの橙色の数字をクリックします。幅または高さの数字をクリックすると、ステージに必要な正確な寸法(ピクセル単位)を入力できます。
数字を入力したくない場合、Edge Animateはステージのサイズを変更する別の方法を提供します:オレンジ色の数字の上にカーソルを置くだけです。カーソルが(図のように)二重矢印に変わったら、クリックしてドラッグしてステージのサイズを増減できます。
画面サイズのパーセンテージでステージのサイズを設定する
特定の寸法に合わないアニメーションを作成する場合は、ピクセル(px)からパーセンテージ%)をクリックして切り替えます(この図を参照)。これは、応答性の高いWebデザインを作成するための1つのステップです。ピクセル値ではなく画面の割合でステージのサイズを変更すると、ステージのサイズは親要素のサイズに応じて変化します。
親要素の1つの例は、アニメーションがスタンドアロンのウェブページである場合、ブラウザウィンドウ自体であってもよい。ただし、アニメーションがWebページの一部である場合、親要素はアニメーションがネストされたdiv要素になります。
ステージ全体をブラウザウィンドウ全体に表示させるには、この図に示すように、ステージの幅と高さを100%に設定します。ステージをブラウザウィンドウの半分に塗りつぶすには、ステージを50%に設定します。アニメーションをどのくらいのブラウザウインドウに占有させるかによって異なります。
デフォルトでは、ステージの背景は白です。したがって、pxと%を切り替えるとステージに違いはありません。
ステージサイズにpxと%を使用する違いをテストするには、ステージの背景色を赤色などの白以外の色に変更します。異なるパーセンテージとピクセルサイズを試して、さまざまな効果を確認してください。
ステージの背景色を変更するには、白い四角をクリックしてカラーピッカーを表示します。
Edge Animateに、幅と高さの比率を同じに保つよう、Link WidthとHeightのアイコンをクリックします(この図ではハイライト表示されています)。デフォルトでは、[リンクの幅と高さ]アイコンはオフになっています。その既定の設定では、Edge Animateはサイズ変更時に同じ比率で幅(または高さ)を保持しません。