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.

  1. Click on Create New.
Intro to Edge Animate (1)

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.

Intro to Edge Animate (2)
  1. Save the current document as edge-animate-testdrive.html in a new folder called edge-animate.
  2. Check out all the files that are generated for this Edge Animate project. The .an file is the controlling Edge Animate project file. There is also the HTML file and a bunch of JavaScript files.
Intro to Edge Animate (3)

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.

Intro to Edge Animate (4)
  1. Change the color of the stage using the color chip in the Properties panel (in the Stage subpanel).
Intro to Edge Animate (5)

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.

Intro to Edge Animate (6)
  1. 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.
Intro to Edge Animate (7)
  1. 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.
Intro to Edge Animate (8)
  1. Select the rounded rectangle tool and draw a rounded rectangle in another corner.
Intro to Edge Animate (9)
  1. 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.
Intro to Edge Animate (10)
  1. Add an ellipse in a third corner. Hold the shift key down while drawing, to make it a perfect circle.
Intro to Edge Animate (11)
  1. Use the Selection tool to select each shape in turn, and change the fill/stroke colors in the Properties panel (Color subpanel).
Intro to Edge Animate (12)
  1. 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.
Intro to Edge Animate (13)
  1. 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.
Intro to Edge Animate (14)

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.

Intro to Edge Animate (15)
  1. 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.
Intro to Edge Animate (16)
  1. Move the gold playhead to 0:03 (3 seconds). Notice how Edge Animate describes time in minutes and seconds, rather than as frames and frames per second. That is because JavaScript and CSS describe time in microseconds and seconds, respectively.
Intro to Edge Animate (17)
  1. Click the circle’s Opacity keyframe diamond in the Property panel. We will be changing the circle’s opacity at 0:03.
Intro to Edge Animate (17)
  1. 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.

Intro to Edge Animate (19)
  1. 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.
Intro to Edge Animate (20)
  1. Move the gold playhead back to 0:00.
Intro to Edge Animate (21)
  1. Move the circle back to its original position.
Intro to Edge Animate (22)
  1. 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.

Intro to Edge Animate (24)
  1. Play the 3-second animation by clicking on the Play triangle in the Timeline panel.
Intro to Edge Animate (23)
  1. 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.
Intro to Edge Animate (25)

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.

Intro to Edge Animate (26)
  1. Play your animation by clicking the Play triangle in the timeline panel.
  2. Move the playhead to 0:04.
Intro to Edge Animate (28)
  1. 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.
Intro to Edge Animate (29)
  1. 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.
Intro to Edge Animate (30)
  1. 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.
Intro to Edge Animate (31)
  1. 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.
  2. Press Cmd+A (mac) or Ctrl+A (PC) to select all of the elements on the stage.
Intro to Edge Animate (33)
  1. 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.
Intro to Edge Animate (36)
  1. Move the playhead to 0:04.250. Double-click on the playhead, which adds the toggle pin to it in a more direct way.
Intro to Edge Animate (32)
  1. Use the Selection tool to move all three shapes off the left edge of the stage.
Intro to Edge Animate (34)

Notice how the timeline panel shows the change in position between 0:04 and 0:04.250.

Intro to Edge Animate (35)
  1. 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.
  2. With your playhead at 0:04.250, add a rectangle to the middle of the stage.
Intro to Edge Animate (37)

Notice that a new element is added to the Elements panel for Rectangle2.

  1. Select the T tool. Click in the middle of the rectangle on the stage, and a text box will pop up.
Intro to Edge Animate (38)
  1. Type “Hello World” in the text box and then close it using the X.
Intro to Edge Animate (39)
  1. With the text element selected, adjust the font in the Text section of the Properties panel. Then center it within the rectangle.
Intro to Edge Animate (40)
  1. In the Elements panel, drag the “Text” <div> element onto the “Rectangle2” <div> element and drop. This nests the text block into the <div>.
Intro to Edge Animate (41)

Now if you play the animation, this text rectangle appears throughout. We only want it to appear at the end.

  1. 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%.
Intro to Edge Animate (42)
  1. 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.
Intro to Edge Animate (43)
  1. Set the opacity to 0.
Intro to Edge Animate (44)
  1. Turn off the pin and play your completed animation.
  2. 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.
Intro to Edge Animate (45)
  1. Save your file. Go to File > Preview in Browser to see your completed animation working in the browser with just HTML, CSS and JavaScript.

It should work something like this.

  1. Locate your edge-animate folder in Finder (Mac) or Windows Explorer (PC) and ZIP the folder.