How to Resize the Adobe Edge Animate Stage

The Stage is where you will place your elements, such as images, text, and drawn objects. The Stage is a live HTML window, which means that what you see on the screen, is what your audience sees when they view and interact with your composition. You can size the Stage a couple different ways:

  • Pixels: Adobe Edge Animate CC enables you to set the Stage to remain a specific size no matter the size of the browser window.

  • Percentage: For those who prefer a more responsive web design.

  • Testing responsive web design: You may want to change the background color of the Stage to test the responsiveness of your design.

Sizing your Stage by pixel values

Most likely one of the first steps you’ll want to take is to size your Stage properly. If you plan to insert your animation into an existing web page, first determine how much space you want your animation to take up on that page, and then size the Stage accordingly.

To resize the Stage, click the orange numbers in the Stage section of the Properties panel — in the far-left column near the top of the screen — as shown. Clicking the width or height numbers allows you to type in the exact dimensions (in pixels) that you want your Stage to have.

image0.jpg

If you don’t want to type in the numbers, Edge Animate gives you an alternative method for resizing the Stage: Simply place your cursor over one of the orange numbers. When the cursor turns into a double arrow (as shown), you can click and drag to increase or decrease the size of the Stage.

Sizing your Stage by percentage of screen size

If you want to create an animation that doesn't have to fit any specific dimension, then you should switch from pixels (px) to percentage (%), by clicking the toggle (see this figure). This is one step to creating a responsive web design. When you size the Stage by screen percentage instead of by pixel values, the Stage sizes itself according to the size of the parent element.

image1.jpg

One example of a parent element can be the browser window itself — if the animation is a standalone web page. However, if the animation is one part of a web page, then the parent element can be a div element within which the animation is nested.

To have your Stage fill the entire browser window, set the Stage width and height to 100%, as shown in this figure. To have your Stage fill half the browser window, set the Stage to 50%; and so on, depending on how much of the browser window you want your animation to occupy.

image2.jpg

By default, the background of the Stage is white. Therefore you won’t see any difference in the Stage when you switch between px and %.

To test the difference between using px and % for Stage size, change the background color of the Stage to something other than white, such as red. Then experiment with different percentages and px dimensions to see the different effects.

To change the background color of the Stage (as shown), click the white square to bring up a color picker.

You can tell Edge Animate to keep the width and height proportions the same by clicking the Link Width and Height icon (highlighted in this figure). By default, the Link Width and Height icon is turned off; with that default in effect, Edge Animate will not keep the width (or height) in the same proportion when you resize.

image3.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com