Adobe Edge Animate CC For Dummies (2013)

Part III

Formatting and Animating

Chapter 8

Formatting Element Visibility, Positioning, and Sizing

In This Chapter

Concealing and revealing elements

Automating scroll bars

Managing overflow

Adjusting opacity

Applying layout presets and defaults

In Chapter 8, I present how to animate and format several aspects of the elements you use in your animation. This includes formatting and animating visibility: You can choose when, where, and for how long an element appears on the Stage by using visibility.

In addition, scroll bars and the Overflow property enable you to work with content that is larger than the container. For example, scroll bars provide your audience with a way to access and read text that doesn’t fit entirely on the screen.

When creating animations, you expect to size and position elements as needed — and Edge Animate responds with a ton of positioning and sizing features. This includes a variety of layout presets.

Setting the Visibility of Elements

You can format and animate the visibility of an element — that is, whether the viewer can see an element on the Stage. Even if you turn Visibility off and you no longer see the element on the Stage, you can still select it from the Elements panel or the Timeline and work with it. You have these options:

You can turn Visibility Off, On, or Always On.

You can animate the Visibility setting so that elements appear or disappear as the animation plays.

Element Visibility on the Stage

If your composition starts to get cluttered with too many elements, you can turn the visibility of specific elements off and on to help clean up the clutter. When you turn off an element’s visibility, it disappears from the Stage but it’s still present; you can still see it when you preview your animation in a browser.

Figure 8-1 shows where the Set Element Visibility icon is in the Timeline and how it appears when it’s turned on or off. For more information on setting the visibility of elements on the Stage, see Chapter 11.

Figure 8-1: Setting an element’s visibility on the Stage from the Timeline.

Animating the visibility of elements

You can use the Element Display feature on just about anything in Edge Animate, including text boxes, images and rectangles. The Display feature is found in the Properties panel (as shown in Figure 8-2).

The default is Always On, which means your audience will always see the element on the Stage.

Always On, or Off, or On

Use the Display feature to toggle elements from one state to another, whether Always On, On, or Off. Click the tiny arrow next to Always On to open the menu shown in Figure 8-3.

Figure 8-2: The Element Display feature.

Figure 8-3: The Display feature menu.

The Element Display feature is useful in that you can tell Edge Animate when you want a certain element shown in the animation. This comes in handy if, for example, you want a bit of text to appear late in the animation and then for it to disappear. Instead of adding in Opacity attributes to make text appear at a certain point in the Timeline — by animating the Opacity from 0% to 100% — you can simply use the element Display feature. More information on Opacity is found in this chapter.

The default setting for the Element Display feature is Always On. So, if you want your audience to always see the element, then you don’t have to do anything to make sure your element is always on.

To toggle an element from Off to On, you need to first create an element such as a rectangle. Then, from the Properties panel, click the drop-down arrow for Display and choose Off. Doing so inserts a keyframe (diamond) into the Timeline as shown in Figure 8-4 — which also shows the Display setting, which appears in the Timeline along with the keyframe.

Figure 8-4: Element Display off.

From the Timeline, you can toggle the Display between off and on, but in order to revert to Always On, you have to do that from the Properties panel. When you revert the element to Always On, Edge Animate warns you that any keyframes will be removed (as shown in Figure 8-5).

Figure 8-5: Reverting to Always On removes any keyframes associated with Display.

Don’t be alarmed to see your text box suddenly disappear from the Stage when you turn it to Off. Likewise, don’t worry when you realize you can’t select the turned-Off element from the Stage. In essence, when an element is Off, it may as well not be part of the composition at all. However, you can still select it from the Elements panel in the top-right corner and you can also see it listed in the Timeline. That’s how you know the element still exists.

Follow these steps to animate the visibility of an element from Off to On to Off again:

1. Create an element on the Stage.

2. Move the Playhead to the point in the Timeline at which you want the element to become visible.

3. Select the element and then choose On from the Display menu.

Doing so automatically turns Visibility to Off for the time leading up to when it’s On.

4. Move the Playhead to the point in the Timeline at which you want the element to become invisible.

5. Choose Off from the Display menu.

Congratulations! You have now created an animation in which an element starts off invisible, becomes visible, and then disappears again. To test that it works, you can preview the animation in the browser or you can view from the Stage.

Figure 8-6 shows how your Timeline should appear after you complete the quick steps for animating Visibility. The shaded areas represent when the element is off. The Timeline segment between the two hollow diamonds represents the time during which the element is visible.

Figure 8-6: Timeline for an element’s Visibility going from Off to On to Off again.

Adding scroll bars, hidden, visible, or auto

Overflow is a nice added touch in Adobe Edge Animate CC. You can find it in the Properties panel, as indicated in Figure 8-7.

Figure 8-7: Use the Overflow tool in the Properties panel for scroll bars.

Overflow gives you some handy ways to control the visibility of your elements. You can

Add scroll bars to an element.

Allow for content that is larger than the size of the element or Stage to be in one of two states:

• Visible: Useful when you want all of the content to appear even if it overflows the container (see Figure 8-9) or the Stage.

• Hidden: Useful when you want to hide certain content.

Use an Auto feature in which Edge Animate determines whether to have scroll bars present.

Overflow is a CSS property. Auto, Visible, and Hidden are all values of that property.

When you click the drop-down arrow for the Overflow attribute in the Properties panel, several choices appear as shown in Figure 8-8.

Figure 8-8: Overflow attributes include Visible, Hidden, Scroll, and Auto.

You can set the Overflow properties to any type of element.

Visible Overflow property

Visible allows any overflow content (content that doesn’t fit on the Stage or within a container) to still appear, both on the Stage and in the browser. In Figure 8-9, the container is the blue-outline box with selection points.

Figure 8-9: Visible allows content that extends past the container to appear.

Hidden Overflow property

The Hidden Overflow property keeps any content that overflows the container hidden from immediate view onscreen until your audience scrolls to it (as shown in Figure 8-10).

Figure 8-10: The Hidden attribute covers content that extends past the container.

Scroll Overflow property

The Scroll Overflow property inserts scroll bars into the element’s container or the Stage, as shown in Figure 8-11. With the scroll bars available, the user can scroll around within the box. Figure 8-11 shows an example.

Figure 8-11: Scroll bars enable your audience to scroll through text or other content.

Auto Overflow property

Auto enables Edge Animate to do the thinking and determine if any content overflows the container. If content does overflow the container, then Edge Animate automatically adds scroll bars (as shown in Figure 8-12). With Scroll enabled, the scroll bars appear both on the bottom and on the right (refer to Figure 8-11). However, if you use Auto, Edge Animate knows to add only the right scroll bar, and the bottom scroll bar won’t appear because it isn’t necessary.

Figure 8-12: Auto enables Edge Animate to do the thinking on adding scroll bars.

Animating with Opacity

Opacity is the condition of lacking transparency or translucence; when an object is opaque, you can’t see through it (you knew that). And Adobe Edge Animate CC enables you, through the Opacity tool, to have elements slowly fade in or out or simply appear as mere see-through shadows. Figure 8-13 shows where you can find the Opacity tool on the Properties panel.

Figure 8-13: Set the Opacity to 50% to make an element see-through.

Figure 8-14 shows an image at 50% Opacity placed over a rectangle. At 50% Opacity, you can see through the image and make out the rectangle behind it.

Figure 8-14: Using Opacity to allow your audience to see through elements.

Here are some quick steps on animating with Opacity. In this example, I show you how to make an image slowly appear on the Stage:

1. Select an element on the Stage, such as an image.

2. From the Properties panel, move the Opacity slider down to 0% (as shown in Figure 8-13).

3. In the Timeline, toggle the Pin and then move the Playhead down to specify as long a time as you want the Opacity animation to last.

The farther you separate the Playhead from the Pin, the longer the animation, and the more slowly the image appears.

4. With the Playhead set, go back to the Opacity slide bar and drag it up to 100%.

Edge Animate creates a keyframe animation sequence after you set the Opacity the second time.

You can now preview the Opacity animation from the Stage or in a browser.

Configuring Positioning and Sizing

Adobe Edge Animate CC has no shortage of settings when it comes to positioning and sizing. Many of these features work best when nesting elements, so you may want to check Chapter 10 to understand how the Element panel works. Positioning refers to the coordinates of the element relative either to the Stage or to the parent element when one element is nested inside the other. You can also use a position attribute to affect how you want the element to react when you size it.

Setting the relative position

Specifying the relative position of an element affects which corner of your element is manipulated when you resize it. You can find the Position and Size attributes in the Properties panel (as shown in Figure 8-15). Be sure to select an element from the Stage to have these attributes appear.

When I refer to relative position in the context of Edge Animate, note that it doesn’t mean the same as relative positioning in Cascading Style Sheets (that is, the distinction between Position: absolute and Position: relative). In strict CSS terms, Edge Animate 1.0 uses only absolute positioning.

Here’s how to test the way relative position works in Edge Animate:

1. Make sure the top-left corner of the element is highlighted (as indicated in Figure 8-15).

2. Adjust the width or height of the element by using the W and H attributes (as indicated in Figure 8-15).

Notice that when you adjust the width or height, the top-left corner of the element stays where it is, while the rest of the element shrinks or grows.

3. Select the bottom-right corner, resize the element, and see what a difference it makes.

The bottom-right corner stays in the same location while the other three corners are affected.

Figure 8-15: Setting the relative position to affect how elements are manipulated.

Global or Applied settings

You may wonder about the difference is between Global and Applied settings. Here’s the essence:

Global settings coordinate elements relative to the Stage.

Applied settings use underlying property values to affect elements.

I go into further detail in the next two sections to provide a better sense of what these properties do.

When you switch between Global and Applied, it affects all elements on the Stage. It isn’t possible to have some elements configured as Global and some as Applied; it’s an all-or-nothing deal. However, switching between Global and Applied doesn’t affect relative positioning applied to a specific element. For example, if you set an element with Top Right positioning, it remains in that setting whether you choose Global or Applied.

Using Global settings for position

When you use Global settings, the position coordinates always appear as x and y axis points (as shown in Figure 8-16). You can use keyframes with the position points, which means you can animate the position of an element; for example, you can have the element move from the left of the Stage to the right.

Figure 8-16: Global settings, the default, make coordinates appear as x and y axis points.

To get a better sense of how Global settings work, try the following:

1. Draw four rectangles on the Stage and click Global.

2. Set the first element using the top-left square as shown in Figure 8-15.

3. Set the second element using the top-right square.

4. Set the third element with the bottom-left square.

5. Set the fourth element with the bottom right.

6. Switch to the Stage by clicking an empty part of the Stage.

7. Adjust the height and width of the Stage as shown in Figure 8-17.

Notice how the four different elements are affected.

When you adjust the width of the Stage, elements set with the top-right and bottom-right positioning are affected. When you adjust the height of the Stage, elements set with the bottom-left and bottom-right positioning are affected. The element set with the top-left positioning isn’t affected at all when you change the dimensions of the Stage.

Figure 8-17: Adjust the height and width of the Stage to see how that affects elements.

Using Applied for position

The first difference you may notice between Global and Applied is in the Properties panel:

When you choose Global and then select an element, you see x and y axis points.

When you choose Applied, you see axis points based on the relative position if one element is nested inside another element.

For more information on nesting elements, see Chapter 10.

You can nest certain types of elements into another element by dragging them over that other element.

Figure 8-18 shows an element set with Applied Top Left positioning. Notice the axis points are shown with L (left) and T (top). If you choose Right Bottom positioning, then the axis points appear as R (right) and B (bottom). And so on for the other positions.

Figure 8-18: Applied settings with top-left positioning.

If your element is nested inside another, as shown in Figure 8-19, then the relative position is shown in relation to the parent item. For example, if you select an ellipse that is nested inside a rectangle, then you see the position of the ellipse from the rectangle. If you choose Global, then you see the relative position from the Stage.

Figure 8-19: Nesting items by dragging one over another.

The Global and Applied settings don’t modify any settings, instead, they provide a means to display the relative positioning between nested elements.

Layout presets

Adobe Edge Animate CC conveniently provides Layout presets. You can select different Layout presets instead of configuring the settings yourself. There are different Layout presets depending on the type of element that you select from the Stage. There are different presets for the two major types of elements used in your animation:

Text boxes and other drawn elements have their own presets.

Images: Different settings appear depending on if the image is an img or a div. See Chapter 6 for more information.

Layout presets make more sense when the Stage’s width and height are formatted by percent.

Text boxes and drawn elements

The different Layout presets for text boxes and drawn elements such as rectangles and ellipses include these:

Scale position: Sets elements to use % instead of px for the position (as shown in Figure 8-20).

Scale size: Sets elements to use % instead of px for the size (as shown in Figure 8-21).

Figure 8-20: Using the Scale Position layout preset.

Figure 8-21: Using the Scale Size layout preset.

Images

If you have your image set as an img, then different options appear under Layout presets than if you set the image as a div (see Chapter 6). Both img and div provide the same Layout presets — scale position and scale size — as drawn elements.

Img sets the image as a regular image on the Stage. Div sets the image as a background image.

For regular images, you can select a Scale Image Layout preset (as described in Figure 8-22).

Figure 8-22: Layout presets for images set as img from the Properties panel.

Images set as div that act as background images have even more options, as shown in Figure 8-23.

Figure 8-23: You can choose from four different background Image Layout presets.

To get an idea of what each different Preset Layout does, simply click the box for the description, then click Apply.

There’s one more place to configure default layouts up near the main menu. If you click the Layout Defaults icon (as shown in Figure 8-24), a menu appears that enables you to select a default setting for relative positioning, px (pixels), or percent; you also get to choose how to use images.

Figure 8-24: Set the Layout Defaults for elements and images.

Minimum and maximum sizing

Hidden away at the bottom of the Position and Size section of the Properties panel, you can find a little icon that reveals two more sizing options for setting minimum width and/or maximum width (as shown in Figure 8-25).

The best way to use the minimum and maximum settings for an element is when you design a responsive web animation in which you create elements that change dynamically in proportion relative to the size of the Stage and browsers. (Chapter 12 goes into more detail on creating a responsive web animation.)

Figure 8-25: Set the minimum and maximum widths for a responsive web design.