Download Adobe Edge Animate CC Help

39
Create animations using the Timeline
Setting the Stage
As the Bard said a few hundred years ago, “All the world’s a stage.” That’s certainly true in Edge Animate. As explained
in Chapter 1, when you place an element on the stage, it’s visible to your audience. There are a couple of ways to hide
or remove elements from the stage. If you have the stage Overflow properties set to hidden, then you can exit stage right,
left, top, or bottom by moving the element off stage.
At least, it’s not visible when viewed in a browser. The stage that you work with in Edge Animate represents a portion
of a web page when it’s viewed in a browser. The stage has a limited number of properties. The most obvious are its
dimensions and background color, but you’ll want to understand them all. Here’s the rundown starting from the top of
the Properties panel:
• The ID, as you might guess, is the name of your animation. When you save a project, Animate creates a web page,
also known as an HTML document. Most browsers show the ID of the web page in a tab or the window’s title bar.
• Initially, stage dimensions are shown as W (width) and H (height) properties in pixels. No big surprises here. You
can type in or scrub in the width and height of the stage. The stage doesn’t have to appear in the upper-left corner
of a web page. For example, if your Animate composition is a banner ad, you might create a tall, narrow stage and
then position it on the left side of the page. Use the link next to the W and H properties to lock and unlock your
stage’s aspect ratio. When Link Width and Height are unbroken, changing one dimension automatically changes the
other so that the stage stays proportionate; when the link is broken, you can change W and H independently. You
can change the measurement from pixels (px) to a percentage (%). For example, if you set the stage width to 80%,
the stage will be 80 percent the size of the web browser window that it’s viewed in. This feature is great if you’re
developing a page for computers, tablets, and phones. What’s more, if the browser window is resized, the stage
automatically adjusts to the new size.
• The background color is set using a color picker. In the Properties panel, click the color swatch and a color picker
appears, as shown in Figure 20. Click the bar (also called the spectrum) on the left to choose a hue, and then click
in the larger square to fine-tune the shade. The circle is positioned over the selected color, and the swatch in the
lower-right corner displays it. The three swatches at top right make it easy to quickly choose a white, black, or
transparent background. If you work with a team, you may be given a color spec in RGB or hexadecimal formats.
On the other hand, if you’re calling the shots, you may want to specify a color for other designers.
Last updated 6/15/2014