Set 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.
This figure shows where the Set Element Visibility icon is in the Timeline and how it appears when it’s turned on or off.
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).
The default is Always On, which means your audience will always see the element on the Stage.
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.
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 this figure — which also shows the Display setting, which appears in the Timeline along with the keyframe.
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).
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:
Create an element on the Stage.
Move the Playhead to the point in the Timeline at which you want the element to become visible.
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.
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.
This figure 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.