Adobe Edge Animate Basics
Open Adobe Edge Animate. Here is the welcome screen. From here you can dive into lessons, open an existing project, or create a new project.
- Click on Create New.
Here is the Edge Animate workspace. It has a lot of similar panels to Flash.
Tools are along the top edge, Properties on the left, a Timeline along the bottom, and panels on the left such as Elements and Library.
- Save the current document as edge-animate-testdrive.html in a new folder called edge-animate.
Notice that the View menu allows you to change how your document is viewed. Instead of using this menu repeatedly, press Cmd + = (Ctrl + = on the PC) a couple of times to enlarge the stage in your workspace.
- Change the color of the stage using the color chip in the Properties panel (in the Stage subpanel).
Just under the menu bar is the tool panel. On the left is the familiar selection arrow. A few tools over are the rectangle, rounded rectangle, ellipse, and text tools. there are also color chips for the fill and stroke colors.
- Select the rectangle tool and click-and-drag a rectangle in one corner of the stage. The shape is an HTML <div> styled with CSS. You can customize it in the Properties panel.
- With the rectangle still selected, change its fill and stroke in the Properties panel (Color subpanel). For a stroke to appear, you need to set all three properties: color, type, and width.
- Select the rounded rectangle tool and draw a rounded rectangle in another corner.
- Adjust the curve of the corners in the Corners subpanel of the Properties panel. Click on the 4 to set each corner to a different radius. See what happens when you click on the 8 and make adjustments.
- Add an ellipse in a third corner. Hold the shift key down while drawing, to make it a perfect circle.
- Use the Selection tool to select each shape in turn, and change the fill/stroke colors in the Properties panel (Color subpanel).
- Move the rounded rectangle so that it overlaps the rectangle and circle a bit. Notice the stacking order: more recent drawings are higher/above older drawings.
- Make the rounded rectangle 50% opaque using the slider at the top of the Properties panel. You should be able to partly see the rectangle where the rounded rectangle overlaps it.
Check out how the various shapes are listing as <div> elements on the page, in the Elements panel. You have the option to turn off visibility of any element here. You can also change the stacking order by dragging the bars up or down.
- Make the circle 50% opaque as well. Notice how the elements are also listed in the timeline below. Because we have special properties assigned to the circle, these appear as attributes of the circle in the timeline. It’s like the Flash Timeline and Motion Editor blended together. There are property keyframes in place at the beginning of the Timeline for fill (Background Color), stroke (Border Color), and Opacity.
- Click the circle’s Opacity keyframe diamond in the Property panel. We will be changing the circle’s opacity at 0:03.
- Move the circle into another corner. The Timeline places property keyframes for the circle at the 3-second mark for Top and Left.
Notice that Left and Top have no property keyframes at 0:00, so there is no tween for those properties. This is because we did not keyframe the X and Y properties at 0:00 before moving the circle.
- Change the circle’s opacity back to 100%. A new property keyframe is added at 0:03 for Opacity, and a tween between the keyframes is shown as a blue-green bar. Opacity did get a keyframe at 0:00 because we changed it from the default setting a few steps back.
- Move the gold playhead back to 0:00.
- Move the circle back to its original position.
- In the Properties panel with the circle still selected at 0:00, click the keyframe diamonds for X and Y. This sets the property keyframes for the circle’s current position at 0:00.
X refers to how many pixels from the left edge of the stage, and Y refers to how many pixels down from the top edge of the stage.
You should see tweens show up for Left and Top and now in the timeline.
- Play the 3-second animation by clicking on the Play triangle in the Timeline panel.
- In preparation for moving the rectangle, select it and add keyframes for X and Y in the Properties panel, like we did for the circle.
Move the playhead to 0:03 and move the rectangle elsewhere on the stage. This time, the tween shows up. as soon as we adjust the X and Y coordinates.
- Play your animation by clicking the Play triangle in the timeline panel.
- Move the playhead to 0:04.
- Click the Toggle Pin icon in the timeline panel. It adds a little blue pin to the playhead. The pin is a tool that works with the timeline to make animation a little easier.
- Drag the little blue pin (just the blue shape, not the gold one) from the playhead back to 0.03. A gold band appears. Gold animates from the current state to some future state.
- One at a time, select each of the shapes on the stage and set its opacity to 0. New tweens for the opacity property of each shape appears in the timeline.
- Turn off the Toggle Pin by clicking on the button again. Play your complete animation. The shapes should move around while changing opacity, and then fade away.
- Press Cmd+A (mac) or Ctrl+A (PC) to select all of the elements on the stage.
- Click the keyframe diamond for the X property under Position and Size in the Properties panel. This will make sure that the current position is locked in prior to the next step.
- Move the playhead to 0:04.250. Double-click on the playhead, which adds the toggle pin to it in a more direct way.
- Use the Selection tool to move all three shapes off the left edge of the stage.
Notice how the timeline panel shows the change in position between 0:04 and 0:04.250.
- Turn off the toggle pin and play your animation. Moving the original elements off the stage makes room for a new set of elements. If you simply delete them, the whole animation goes away too.
- With your playhead at 0:04.250, add a rectangle to the middle of the stage.
Notice that a new element is added to the Elements panel for Rectangle2.
- Select the T tool. Click in the middle of the rectangle on the stage, and a text box will pop up.
- Type “Hello World” in the text box and then close it using the X.
- With the text element selected, adjust the font in the Text section of the Properties panel. Then center it within the rectangle.
- In the Elements panel, drag the “Text” <div> element onto the “Rectangle2” <div> element and drop. This nests the text block into the <div>.
Now if you play the animation, this text rectangle appears throughout. We only want it to appear at the end.
- With the playhead still at 0:04.250 and the text rectangle selected, click to add a keyframe for opacity in the Properties panel. This sets a keyframe in the timeline with opacity at 100%.
- Double-click the playhead to add a pin. Move the blue pin above the playhead to 0:05. This makes a blue band. Blue animates to how things look now.
- Set the opacity to 0.
- Turn off the pin and play your completed animation.
- Deselect everything on the stage. In the Properties panel, give the page a title using the text box at the very top. Press the Tab or Return key to commit the change.
- Locate your edge-animate folder in Finder (Mac) or Windows Explorer (PC) and ZIP the folder.