Use the Color Graph in Adobe Edge Animate - dummies

Use the Color Graph in Adobe Edge Animate

By Michael Rohde

You can choose a background color and border color in a couple of different spots in Adobe Edge Animate CC, as shown in this figure. 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.

Open the Color properties from either the Properties panel or the near the main menu.
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. From this graph, you can choose the background or border color for your element.

Using the color graph.
Using the color graph.

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).

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 this figure.

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.

Use the Eyedropper to sample colors from the Stage.
Use the Eyedropper to sample colors from the Stage.

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.

  4. 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.