Adobe Edge Animate CC For Dummies (2013)

Part III

Formatting and Animating

Chapter 9

Animating Background Color, Borders, Corners, Shadows, and Clipping

In This Chapter

Applying colors

Cutting corners

Enlightening shadows

Clipping elements

In this chapter, I present many more formatting and animating options. I cover how to use background color for elements and how to add a border to elements. You can even animate the background color to transition from one color to another. In the same regard, you can animate the borders as well.

Adobe Edge Animate CC provides you the features necessary to animate the rounding-off of corners. If you want that square to turn into a circle, you can do that; you can also add shadows to your element. In this chapter, I show you a few different examples of using shadows.

Last but not least, clipping is a featured tool in Edge Animate. Use clipping to veil and unveil elements. This is a cool technique to use if you want text to gradually appear on the Stage.

Applying Color

Adobe Edge Animate CC has a few different options for using color, some of which are quite powerful. You can add background color to drawn elements such as rectangles and ellipses, but you can’t add background color to text boxes or images. You can also add color to borders— as well as format and animate the border to appear solid, dashed, or dotted. You can add colors in two ways: by using the Eyedropper tool to sample colors from the Stage or by setting RGBa, Hex, or HSLa numeric values. In addition, Animate boasts a robust Color Gradient tool with many options. I discuss all these features in the following sections. You can find the Color properties in the Properties panel when you have a drawn element (other than a text box) selected, as shown in Figure 9-1.

Figure 9-1: Color properties in the Properties Panel.

To apply background color or a border to a text box, simply place a rectangle with a colored background or formatted border behind the text box, as shown in Figure 9-2. The following section describes how to set background colors, which you can also use for adding color to text. (You can find the steps that show how to format borders in the section that follows the discussion of using gradient colors.)

Figure 9-2: Place a colored rectangle behind a text box to provide background color.

Using the color graph

You can choose a background color and border color in a couple of different spots in Adobe Edge Animate CC, as shown in Figure 9-3. You can set the background and border color from either up near the main menu in the toolbar or from the Color section in the Properties panel.

Figure 9-3: Open the Color properties from either the Properties panel or the near the main menu.

You don’t have to select the border to change its color. You set the color of the border just as you would set the background color. The border color icon is directly to the right of the background color.

You can select colors either by appearance or by numeric value.

When you click the Background Color icon or the Border Color icon, a color graph appears as shown in Figure 9-4. From this graph, you can choose the background or border color for your element.

The color graph gives you many options for picking a color. When you first open the color graph, the box in the top left appears gray. When you choose a new color, the box splits in two, showing you the current color on the left and the original color on the right. If you want to revert to the original color, simply click the right side of the box. When you find a color that you like, you can save it for later use by clicking the + icon near the saved colors (as shown in Figure 9-4).

Figure 9-4: Using the color graph.

To actually choose a color, you can click and drag the circle around the graph, or you can use the first slider to change the hue. The second slider affects how light or dark the color appears. The third slider affects transparency, which is useful if you want to see other elements that might be placed under the element you are adding color to. Another option is to change the color by typing in specific RGBa, Hex, or HSLa color values in the text box.

If you have an image or other element on the Stage that has a color you want to use, then you can use the Eyedropper tool to sample a color for use on a selected element. When you select the Eyedropper tool, you see a target with a large ring around it as shown in Figure 9-5. As the target passes over the Stage, the color it will sample is shown in the ring. When you pass over the color you like, simply right click and that color is automatically applied to the selected element. You can also save this color by pressing the + icon.

You can animate the background and border color as indicated by the presence of a keyframe diamond. It’s possible, for example, to animate a rectangle so its background changes from red to black. Here’s a quick procedure for animating colors:

1. Draw an element, such as a rectangle, on the Stage. Make sure the Auto-Keyframe Mode is on (the Stopwatch is red).

2. Use the color graph from the Properties panel to choose a background color, such as red.

3. Move the Playhead down the Timeline for as long as you want the animation to last.

Figure 9-5: Use the Eyedropper to sample colors from the Stage.

4. Use the color graph to choose a new color, such as blue.

• If the Stopwatch is red, then you just created an animation in which the background color of the rectangle slowly changes from red to blue.

• If you made the sequence last long enough, you’ll see the element turn purple during the animation as the colors change from red to blue.

• For more precise control over which color you want to use, you can directly input numeric values for either RGBa, Hex, or HSLa values, as shown in Figure 9-4.

Using the color gradients

The Gradient Color icon is located directly to the right of the Background color icon in the Properties panel as shown in Figure 9-1. The Gradient color graph works a lot like the background color graph — but with one big, obvious difference: You can use gradient colors, meaning that you can fade a color from, say, a dark purple to a light purple, or from a light gold to a dark black. Figure 9-6 shows the Color Gradient color graph with the additional gradient feature on the right side.

Figure 9-6: Color Gradient color graph.

To create a gradient color, first draw a rectangle or ellipse on the Stage and then choose the Color Gradient icon from the Properties panel. With the Gradient Color graph open, choose your starting color. Animate automatically picks white as your secondary color. To update the secondary color, click the bottom slider and then choose a second color. The element on the Stage updates as you change the colors so you can see the final outcome as you’re working. You can slide both of the sliders up and down to indicate where you want colors to begin and end in relation to the element.

Linear gradients

When you start choosing gradient colors, Animate picks the Linear option for you, with the first color appearing at the top and the second color appearing at the bottom. You can change this arrangement to fit your needs. For example, if you want the gradient color to start in the top-left corner and end in the bottom-right corner, you can change the gradient angle as shown in Figure 9-7. Simply click and drag the Gradient Angle icon or click the orange number and type in your preferred angle.

To have your gradient color pattern repeat itself, you can click the Repeat option at the bottom of the color graph. To help exaggerate this effect, slide the top and bottom sliders close together (as shown in Figure 9-8).

Figure 9-7: Configuring the gradient angle.

Figure 9-8: Slide the two sliders close to each to exaggerate the Repeat effect.

You can add as many sliders — therefore as many color stops — as you like (as shown in Figure 9-9). That way, for example, you could have red fade into orange, which fades to yellow, which fades to green, which . . . well, you get the idea. To add a slider, simply click inside the bar and a new slider appears. To remove a slider, simply click and drag the slider off the bar.

Figure 9-9: A color gradient with several color stops.

Radial gradients

If linear gradients aren’t what you are looking for then Animate also offers elliptical and circular gradients. Directly to the right of the linear gradient icon, you can find the radial gradient icon. If you long-click this icon, a menu appears with several radial options, as shown in Figure 9-10.

Figure 9-10: Radial options for gradient colors.

You can change the center point of where your radial gradient originates. For example, if you don’t want your radial gradient to start from the center of the element, you can adjust the X and Y axis points as shown in Figure 9-11. When you change the X and Y properties, you can see the changes to the radial gradient appear on the Stage in real time.

Figure 9-11: Configuring the center point of your radial color gradient.

You can save your gradient settings just as you can save your background colors. On the gradient side of the color chart, click the + icon (as shown in Figure 9-12), and Animate saves your current gradient settings in that row of vertical boxes.

Figure 9-12: Saving your gradient colors.

You can animate the colors in a gradient, but you can’t animate from a linear gradient to a radial gradient; you can only animate the colors — say, from gold to black.

Choosing a border style

You can choose the style (None, Solid, Dashed, or Dotted) for the border of a rectangle, rounded rectangle, or ellipse, as shown in the drop-down menu of Figure 9-13. You can choose whatever color you want for the border, using the same type of color-picker tool as for the background.

To update the width of the border, simply click the orange 0 that is located next to the Border Style drop-down arrow.

You can animate the width of the border as you can any property that has a diamond keyframe icon next to it. Note however, that you can’t animate the border type (for example, animating a solid border to become a dotted border).

Figure 9-13: Choosing the border type for rectangles and ellipses from the Properties panel.

Rounding Corners

Corner properties in Edge Animate is a powerful tool (Figure 9-14 provides a glimpse). The Corner properties allow you to set how much of a curve the borders have on your rectangles. For example, if your rectangle has square corners, you can use the Corners properties to round them off.

Figure 9-14: The Corners properties allow you to round off corners or square them.

Not only can you use the Corners properties to round off square corners, you can also change the radius for each corner. This means you can set one corner square, another corner with a small radius, and another corner with a large radius.

One, four, or eight different points

Figure 9-15 shows a composite of the three different views of the Corners tool:

Option 1 affects all four corners by changing the orange number.

Option 4 allows you to specify the roundness of each corner individually.

Option 8 allows you to specify the roundness of each corner, and each corner has two different specifications that you can adjust for roundness.

Figure 9-16 provides an extreme example of how you can change the look of a rectangle by manipulating eight different points. Take note of how each corner is contorted differently according to the settings you make from the Properties panel.

Figure 9-15: One, four, or eight different points of a rectangle.

Figure 9-16: Experiment with different configurations for your rectangles.

By toggling the px switch, you can choose between using px or percentage to specify how your corners look. Also, setting the border radius to 50% creates a circle.

Animating rounded corners

What’s really great about the Corners tool is that you can animate how round, or square, the corners appear. For example, you can start with a circle that transforms into a square. Here’s how you can do that:

1. Start off by drawing a perfect circle.

Hold down Shift while drawing the circle with the Ellipse tool to maintain even proportions.

2. Slide the Playhead down the Timeline to where you want the animation to end, leaving the Pin at the beginning of the animation.

3. Select the circle and adjust the corner radius to 0.

Doing so creates an animation that transforms your circle into a square.

4. Preview the animation on the Stage or in the browser.

This is great stuff to learn, but what if you want just the opposite — say, to transform a square into a circle? In that case, repeat the preceding procedure, and when you finish, select the keyframe animation sequence and copy it. Then paste the copied sequence into the Timeline using Edit, Paste Special, Paste Inverted (Figure 7-16).

Adding Shadows

You can create some pretty sweet animations and effects using shadows.

The Blur feature of the Shadow properties can create some interesting imagery, as shown in Figure 9-17.

Figure 9-17: Experiment with the Blur property for interesting effects.

Shadow properties

As an extreme example of pushing the Shadow properties to the edge, you can create a shadow that appears as simply blurred or as a gradient. Note, in Figure 9-18, that the element need not be on the Stage (and here it isn’t). In this section, I show you how to create an effect such as this by explaining each of the Clip properties.

Figure 9-18: All systems are “Go” in this Shadow effect.

To enable the Shadow tool, you must toggle the switch as indicated in Figure 9-19. You can choose, if you want, to configure a Drop Shadow or an Inset Shadow. Drop shadows appear outside the borders of the element (making it appear to float) and inset shadows appear along the inner edges of the element.

Figure 9-19: Toggling the Shadow switch to enable the properties.

Besides setting a drop or inset shadow, you can also configure these options:

X and Y axis points: These settings determine exactly where the shadow appears in relation to the element.

Blur: Your shadow can have anything from straight corners (0 blur) to an appearance of foggy haze (1000 blur).

Spread: This setting controls how big, or how little, the shadow appears in relation to the element.

Color: You can open a color graph to choose a color for the shadow.

Animating shadows

You can animate shadows in Adobe Edge Animate CC, and the opportunities it presents are pretty powerful.

Shadow does provide keyframe diamonds for each of the properties — X, Y, Blur, Spread — allowing you to animate shadows. In this example, I provide an example of an element and a shadow appearing as if they come together, after which the shadow shrinks to become a blurry edge of the element. Follow these steps to create the example:

1. Select an element from the Stage and set the Shadow properties as shown in Figure 9-20.

On the right of the figure, you see the element is mostly off the Stage; the shadow has square corners and doesn’t even touch the element.

Figure 9-20: Setting the Shadow properties at one extreme and then animating to the other.

2. Set the Playhead and the Pin in the Timeline so that you can create a keyframe animation sequence.

3. Change the settings in the Shadow properties (as shown in Figure 9-21).

By changing the settings, you create a keyframe animation sequence.

4. Play the animation on the Stage or in the browser.

Note how the shadow and the element come together, and the shadow first softens and then frames the border.

Figure 9-21: The end effect of shadow and element coming together.

Using Filters

Adobe Edge Animate CC has a set of properties called Filters, which are similar to what you would find in software such as Adobe Photoshop. You can find these Filters in the Properties panel (as shown in Figure 9-22). You get the Filters properties to appear in the Properties panel by having an element selected. You can apply the individual Filters — Invert, Hue-Rotate, Contrast, Saturate, Sepia, Grayscale, Blur, and Shadow — to text boxes, drawn elements, divs, symbols, and images. You cannot apply the Filters properties to the Stage itself. Using the Filters properties is a versatile way to create special effects such as fuzzing out images in the background.

You can pick and choose which Filters you want to affect your element by clicking the X after each Filters property you want to use. A grayed-out X indicates that a particular Filters property will not affect the element; a bright X shows that it will affect the element.

The Filters properties are still highly experimental; they work best in Chrome, Safari, iOS 6, and Blackberry 10.

Figure 9-22: The Filters Properties.

Unveiling the Clipping Tool

Adobe Edge Animate CC features a Clipping tool, which you can find just under the main menu as shown in Figure 9-23. Clipping is an animation effect used to unveil or veil an onscreen element; you can animate the effect of an element appearing left-to-right or top-to-bottom.

Selecting the area

The following procedure demonstrates how to use the Clipping tool:

1. Select an element on the Stage and then click the Clipping tool.

The element takes on a green outline, as shown in Figure 9-24.

2. Click and drag the selectors (the mini squares on the outline) from the green box.

Figure 9-23: The Clipping tool.

Figure 9-24: Elements have a green outline when the Clipping tool is selected.

Doing so selects the areas of the element that you want clipped.

• The solid gray area inside the green outline shows which parts of the element are visible.

• The diagonal lines that create a shaded effect show which parts of the element will appear clipped (see Figure 9-25).

At this point, your element appears half-visible.

Figure 9-25: A partially clipped element.

To undo the magic just done in the previous steps — creating an animation that unveils the clipped portion of the element to your audience — follow these steps:

1. If the element isn’t already clipped, select the Clip tool and drag the left-middle green selector on the element all the way to the right.

Doing so completely clips the element.

2. Position the Playhead and the Pin in the Timeline to designate when the unveiling starts and how long you want the animation to last.

3. Grab the left-middle selector again and drag it to the left until the entire element is unclipped.

The result is an animated sequence keyframe that unveils the element.

You can watch this animation play on the Stage or preview it in a browser.

Adjusting the properties

You can use the Clip feature in animations to reveal or hide parts of an element; you have two ways to do it. In addition to the Clipping tool, Adobe Edge Animate CC features a Clip section in the Properties panel that you can use to clip or cut off portions of an element (text, images, or whatever). Figure 9-26 shows the Clip section in the Properties panel.

You must toggle the Clip switch to enable the properties.

Figure 9-26: The default setting of the Clip attributes.

The px controls affect the element in a circular fashion: The top px (orange number) affects the top of the image, the right px affects the right side of the image, the bottom px affects the bottom of the image and the px on the left affects the left side of the image.

In order to see the green border and the clipped area, you must select the Clip tool (refer to Figure 9-23).

The following steps show how this use of the Clip feature works:

1. Click the clipped element to select it.

2. Click the Clip tool.

The element acquires a green border, and the clipped area becomes visible.

3. Clip exactly 50 px of the element from the top down by setting the orange number on top to 50 and the number on the right to the width of the element (as shown in Figure 9-27).

Adobe Edge Animate CC is smart enough to provide the width and height of the element for you.

4. Click the keyframe diamond to set your chosen properties in the Timeline.

If you don’t want to type in a number to specify how much Clip property to apply, you can click and drag on the orange number to increase or decrease the clip area.

Figure 9-27: Click the diamond to create a keyframe.

5. Set the Pin and the Playhead in the Timeline, and then set the Top and Left value for the Clip property to 0.

The resulting animation unveils the clipped area of the element.

You can preview the complete animation, showing both the veiling and unveiling of the clipped part of the element, on the Stage or in a browser.

If you set the bottom and the right Clip values to 0, you make the element invisible.