1 November 2011
An interest in creating interactive animations.
Since the first preview release of Adobe Edge on August 1, more than 150,000 copies of this application have been downloaded. Considering that fact, Edge is not even a beta product and has undergone three major revisions since then. It has garnered so much interest it would be safe to assume that Edge is poised to become an integral part of the web designer's toolbox.
This tutorial focuses on Preview 3 for a reason. Preview 1 focused on the user interface, graphics and motion. Preview 2 was a direct result of the feedback on Preview 1 and featured a number of usability enhancements and bug fixes. Preview 3 is the point in Edge's development where interactivity is introduced and makes this a great place to introduce a tutorial, demonstrating how to apply and use the various animation and interactivity features of the application. In fact this tutorial is designed to get you up and running with Edge in very short order. To get started:
With that out of the way, you're ready to dig into Edge and have some fun.
Double-click the ramen_rahko_begin.edge file to launch Edge. When the file opens you will see the Edge interface shown in Figure 2. The various areas of the interface include:
- The Stage: This is where the action happens. If an item is visible at any time on the Stage the user sees it in the browser. Note that the Stage is now centered (a feature added in Preview 2).
- The Properties panel: Just like its cousin Flash Professional, everything, including the Stage, has properties. These properties can range from basic (width, height, and color of the stage) to complex, such as rounded rectangles, rotation and scale values for objects that are manipulated on the Stage. This panel is also context sensitive. For example, if you select a piece of text, the panel shows you the text properties. Select the Stage and you see the Stage properties.
- The Timeline panel: If you are a Flash Professional or After Effects user the Timeline panel is a familiar place. The buttons in the upper left corner determine how keyframes, transitions and even Stage elements are seen. The timecode is "scrubbable," meaning you can drag the timecode to move the playhead across the stage. The Timeline is time, not frame-based, and if you slide the zoom tool at the bottom of the timeline you can increase your view of it from quarter-second increments to milliseconds. This means you have serious control over the timing of your animations.
You can also drag the playhead across the Timeline—a technique called "scrubbing"—to either go to a particular point in time or to review an animation.
Directly underneath the playhead is another useful tool called "the Mark." If you are a Flash Professional or video producer, it is not too much of a stretch to initially regard the Mark as a cue point on a Timeline indicating precisely where a change occurs. The Mark is a bit different in that it is intimately tied to the playhead, and can be used to set the duration of the start or finish point of an animation.
- The Elements panel: This panel simultaneously serves two purposes. It exposes the document's DOM and acts as a form of "Library" for the items in your project. The order in which elements appear in this panel is the order in which they also appear in the Timeline. If you move a Timeline layer up or down in the layering order, that change is instantly reflected the Elements panel and vice versa.
Creating the first animation
Now that you are familiar with the interface you can start putting stuff in motion. Start by having the Airstream trailer move from the left side of the Stage to its present position. Here's how:
- Select Modify > Enable Smart Guides to turn off Smart Guides. Smart Guides were introduced in Preview 2 and are a great method of ensuring the accurate placement of objects, in relation to each other and even the stage. In this case, they aren't needed.
- Turn on Auto-keyframes by selecting the stopwatch at the top of the Timeline panel. Auto-keyframing is turned on when the watch turns red (see Figure 3).
- Zoom into the Timeline until you see 0:00.500 appear between the 0 mark and the 1-second mark on the Timeline.
- Holding down the Shift key, select both pieces of the trailer.
- Drag the Mark to the 0:00.500 point on the Timeline as shown in Figure 4. The process of moving the Mark from one location to another is called "dropping the Mark."
- With the Shift key held down, drag both pieces of the trailer off of the left side of the Stage. When you release the mouse you will immediately see two transition strips appear on the Timeline (see Figure 5). If you press the spacebar, the trailer moves into position. Take a moment and review what you just did and what you are seeing.
- Click the little icon that resembles a martini glass under the stopwatch. All of the layers suddenly become visible (see Figure 6). When selected, this button only shows the animated layers or, as they are officially known, elements. Click the button again and everything not in motion disappears. It is a handy way of reducing Timeline clutter.
Animation in Edge is a bit different from what you may be used to in Flash Professional or After Effects. The first major difference is the use of the Mark. First off, when the Mark is active, all animations move from the playhead to the Mark. In this instance you moved the Mark forward in the timeline to the half second point. This location establishes the end point of the animation. It is, therefore, correct to assume that were the Mark to remain at the 0 point and the playhead moved to the half-second point this animation would have the trailer move off the Stage.
Secondly, you may have noticed that when you turned on Auto-keyframes, the Mark turned white. This visual clue tells you the Mark is enabled. If you wish to turn it off, click the Mark and press Option/Alt+K. The Mark will turn grey and scoot back to its normal position under the playhead.
As you may have surmised another fundamental difference in animation models is only the objects in motion appear on the Timeline and the layer strips indicate the type of motion—in this case on both the X- and Y-axes. This is not exactly true but it will keep you focused on the animated objects and nothing else.
Why is this not "exactly true"?
Removing and extending transitions
The two diamonds indicate the keyframes that mark the start and end points of the animation. What if you want to move only on the X-axis and extend the animation? Follow these steps:
- Click the Translate (Y) layer for either piece of the trailer. The keyframes change color to gold. Press the Delete key and the transition is removed. Repeat this for the other half of the trailer. Next, turn your attention to extending the duration of the animation.
- Holding down the Shift key, select both solid color lines above the keyframes on the Timeline. These solid areas are called layer strips, and the colored areas underneath them and between keyframes are called transition strips. Another way to select a number of transitions is to simply marquee all of the layer and transition strips.
- Move the cursor to the end of the top layer strip and the cursor will change to a splitter icon.
- Click and drag the layer strip out to the 3-second point on the Timeline and release the mouse. Both layers now extend out to three seconds.
- Click the rewind button on the Timeline to return the playhead to the start of the Timeline. Press the spacebar to preview the motion.
Using smart guides for accurate placement
Earlier in this tutorial you turned off smart guides because they weren't necessary. In this exercise you will discover how useful this new feature is when it comes to accurate placement of objects on the Stage. The plan is to have the Airstream trailer split apart to reveal the ramen stand behind the bus.
- Select Modify > Enable Smart Guides to turn this feature on.
- Turn on Auto-keyframes and drag the playhead to the 3.75-second mark on the Timeline.
- Drag the Mark back to the 3.00–second point on the Timeline.
- Hold down the Shift key and drag the right half of the trailer to the right edge of the ramen stand. As soon as you start dragging, purple horizontal and vertical smart guides will appear (see Figure 7). When you reach the right edge of the stand the vertical guide will appear on both the right edge of the selection and the stand. Release the mouse and the selection will snap to the right edge of the stand.
- Repeat this step with the left half of the trailer.
- Scrub the Timeline and the trailer will split apart and the ramen stand becomes visible.
Create transitions with "pop"
The ramen stand is always there and sort of defeats the purpose of the trailer splitting apart. The stand should appear when the trailer halves are in motion. Here's how:
- Move the playhead to the 0:00.00 point on the Timeline and deselect Generate Smooth Transitions (see Figure 8, it looks like a comet). What you have just done is to have a transition appear abruptly—it "pops" into place—rather than a smooth transition over time.
- Click the stand on the stage to select it.
- Click the opacity keyframe in the properties panel (see Figure 9). The first thing you should note is that the Stand layer now appears in the Timeline and an opacity keyframe has been added to the Timeline. What you have also discovered is you can add keyframes manually.
- Reduce the opacity value for this keyframe to 0. You can do this by either changing the value on the Properties panel or by changing the value directly on the Timeline.
- Drag the playhead to the point where the trailer halves start to move apart. Change the opacity value for the stand to 100%. The resulting hollow keyframe tells you the stand will simply pop into view (see Figure 10).
- Rewind the movie and press the spacebar to preview the effect. Note how the stand seems to "grow" out of the two trailer pieces as they move apart?
- Reselect Generate Smooth Transitions and let's give the stand some seating.
Using the origin point to create a transition
If you look at the Timeline and the Stage, you might be wondering, "What chairs?" They are there. They just aren't visible. As you saw earlier this is a complex timeline with lots of layers. A good habit to develop is to turn off a layer's visibility until you need it. Here's how to turn make the chairs visible:
- Scroll down the elements panel until you find the chairs element. Note how the visibility of this element is turned off. Click the dot and two things happen: The visibilty icon is turned on and the chairs element appears on the Stage (see Figure 11). It isn't on the Timeline, yet, because you haven't done anything with it.
- To start, turn off auto-keyframes.
- Click the chairs on the Stage. The blue dot shown in Figure 12 is the transform origin point. Roll over it and the cursor changes from a compass to a pointer.
The plan for the chairs is to have them grow upwards from the bottom of the stage while the trailer halves move apart.
- Drag the origin point to the middle handle at the bottom of the bounding box.
- With the chairs still selected, turn on auto-keyframes and drag the playhead to the end of the trailer split animation.
- Drag the Mark out to the 0:04.5-second point on the Timeline.
- In the Properties panel, unlink the width and weight values in the scale area and change the height value to 0. The chairs will essentially flatten and seem to grow over the duration of the animation if you scrub the playhead. Had you not moved the origin point the chairs would seem to grow up and down out of the middle of the graphic.
Animate a title sequence with some easing
To this point in the project you have created a rather interesting animation but there is nothing identifying this as Rahko's Ramen stand. Follow these steps to add some corporate ID:
- Locate the banner element in the Elements panel and turn on its visibility.
- Move the playhead to the 2.5-second mark of the Timeline and the Mark to the 3.75-second point which is the start of the chairs animation.
- Select the banner and reduce its opacity value to 0.
- In the Elements panel, turn on the visibility of all of the elements above the banner element. The letters in the name—Rahko's Ramen—will appear above the banner.
- Move the playhead back to the 3-second point in the Timeline and leave the Mark where it is.
- Select the R in Rahko's and move it above the Stage. If you scrub across this animation the letter falls into place. Let's give it a bit more "jazz."
- Select the transition strip for the letter. Open the easing pop down in the Properties panel and select easeOutBounce (see Figure 13). Easing is an animator's trick of mimicing gravity or subtly adding realistic effects to animations. You can choose from 29 different easing effects based on jQuery, and the best piece of advice around easing is to use them only when needed.
Let the software do the work for you
One of the great maxims of the digital world is: "Let the software do the work." In the case of the lettering, you might be considering getting a cup of coffee because there are 11 more letters to animate just like the letter R in the previous exercise. Edge contains a neat feature that will let you animate all of the remaining characters in less time than it would take you to walk to the kitchen, pour a cup of coffee, and return to your computer. Here's how:
- Turn off the Mark—Command/Control+K—and move the playhead to the start of the R animation.
- Click the transition strip for the R layer and selct Edit > Copy. The entire animation is now sitting on the clipboard.
- With the Shift key held down, select the remaining letters on the Stage.
- Select Edit > Paste Special > Paste Transitions to Location (see Figure 14).
Add "controlled randomness" to an animation
If you move the playhead to the start of the animation and press the spacebar the letters all bounce onto the banner at once. You'll fix that by staggering the duration of the letters. I'll show you how to do one letter and leave you to do the rest of them.
- Select the A in Rahko's.
- Move the cursor to the left edge of the transition strip. The cursor will change to a splitter.
- Click and drag the left edge of the strip a short disance to the right (see Figure 15). This causes the selection to come in later than the R and move a little faster. If you move the right edge of the transition strip to the left, the effect is having the A come into place sooner than the R. It's a great way of creating controlled randomness into your work.
Importing graphics into Edge
There are four web-friendly graphic formats that can be used by Edge: JPEG, GIF, PNG, and SVG. Your best guide is your list of target browsers and devices for this project. Support for PNG and SVG, for example, is somewhat erratic among the browsers and devices which means your choice will be a format that is a common denominator. In this exercise you are going to import an SVG graphic, which is Rahko's logo.
- Select File > Import and when the Import dialog box opens, navigate to your Exercise folder. Open the graphics folder and select Logo.svg.
- Click Open. The dialog box disappears and, if you look at your Elements panel, you will see the logo file is at the top. Turn on the Logo element's visibilty.
- Obviously, the logo is too large for the banner. Turn off auto-keyframes and, with the logo selected on the Stage, relink the Scale property and change the value to 40%.
- Place the playhead at the 3.0-second mark on the Timeline and drag the Mark to the 3.75-second point on the Timeline. The plan here is to have the logo fade in over the span, grow and spin a couple of times.
- With the logo selected use these values in the Properties panel:
- Opacity: 0%
- Scale: 20%
- Rotation: 720 % (Think of this as a double spin: 360x2)
- Drag the playhead to the start of the animation and press the spacebar. You have created a growing, spinning logo that fades in over 3/4 seconds (see Figure 16).
With all of the motion in place there is one last piece to be added: the Ramen Queen herself Rahko. The plan is to have her appear at the same time as the chairs.
- Turn on the visibility of the Rahko element in the Elements panel. Rahko appears.
- The graphic is a bit large. To prepare her for her appearance turn off auto-keyframes. Doing this allows you to fix a graphic in place before animating it.
- Select Rahko on the Stage and, using the Properties panel, use the scale properties to reduce her size to fit into the window.
- Position the character so that the back edge of her right sneaker is just touching the map (see Figure 17).
- Move the playhead to the 3.75 point on the Timeline.
- With the graphic selected, click the Keyframe diamond beside the opacity area of the Properties panel. This will light up the Rahko layer and a keyframe will apear in the layer.
- Reduce the opacity for this keyframe to 0 by either entering the value in the Properties panel, or by double-clicking the opacity value in the transition strip and entering 0.
- Move the playhead to the 4.5-second mark on the Timeline.
- Click the keyframe icon in the opacity strip to add a keyframe. Change the value to 100% (see Figure 18). Scrub the Timeline.
The plan is to have Rahko fade in as the chairs rise out of the bottom of the stage. Instead of using auto-keyframes you are going to add them manually.
Reusing motion to create loops
Earlier in this exercise a couple of important points were made: "Let the software do the work" and transitions can be copied and pasted at different points in the Timeline. You are going to explore this in greater depth by looping this animation.
- Turn off auto-keyframes and move the playhead to the 7–second mark on the Timeline.
- Select the chairs transition strip in the Timeline and copy it to the clipboard.
- Select Edit > Paste Special > Paste Inverted. The strip appears at the 7-second mark and the playhead moves to the end of the strip. If you scrub the Timeline the chairs will sink to the bottom of the Stage.
- Hold down the Shift key and select the transition strips for both sides of the trailer.
- Copy the selection and use the Paste Inverted command to add them to the Timeline. If you scrub the Timeline you will see the trailer close and move offstage.
- Move the playhead to the start of the animation in the previous step.
- Select the stand layer, copy the selection and Paste Inverted. This time only the keyframes appear.
- If you rewind the animation and press the spacebar you will see that you have created a loop in very short order (see Figure 19). It gets better.
Note: Here's a little teacher trick. Why not have the trailer completely disappear when it moves offstage? Click the pasteboard to show the Stage properties. Choose hidden from the overflow pop-up menu. This selection turns the Stage into a sort of mask.
- Making sure auto-keyframes is turned off, move the playhead to the 13-second mark of the Timeline.
- On the Timeline marquee select the reverse animation you just created and make sure the two keyframes in the stand layer—they will change to a gold color—are also selected.
- Copy and Paste Inverted. The trailer rolls back onto the Stage, opens, the stand appears and the chairs grow back into position.
- Rewind and play the movie.
Add a code snippet to loop an animation
- Make sure the playhead is at the end of the Timeline.
- Scroll to the top of the Timeline panel and click the little icon that looks like a small scroll beside Actions. This icon is called the Open Timeline Actions icon.
- You will be prompted to add an event. Select the complete event from the pop-up menu (see Figure 20). If you don't see the pop-up menu, click the + button.
- The Default Timeline dialog box will now change to show you a number of snippets that can be added to the Timeline (see Figure 21).
- Select Go To and Play from the list. When you make this choice the code snippet shown in Figure 21 appears.
- Change the default time from 1000 (1 second) to 5000 (5 seconds). What you have just done is to write a snippet of code that will scoot the playhead back to the 5-second mark on the Timeline and start the animation playing from that point.
- Close the dialog box and test this project in a browser by pressing Command/Ctrl+Return.
- When finished, close the browser and save the file.
This tutorial has given you the opportunity to use practically every major feature of Edge Preview 3. You have discovered the intimate relationship between the elements and Timeline panel. I showed you how to use the Properties panel to affect selections and how to increase and decrease the duration of animations. You have created animations by either using the Mark or creating them manually. I have shown you several productivity boosters—a personal favorite is the ability to copy and paste entire animation sequences into the Timeline—and a couple of nifty techniques that let the software do the work! You wound up the tutorial by using the code snippets feature introduced in this release.
Now that you have some experience with Edge you next stop should be the Edge samples page on Labs. Download a few of the samples. Open them in Edge. Dissect them and start learning how to do even more with Edge.