Adobe Edge Animate CC For Dummies (2013)

---

Placing the Navigation Bar

First, you place the navigation bar, which enables the student to advance the lesson or to backtrack to a previous step, along the bottom of the screen.

1. Use the Rectangle drawing tool to create the navigation bar along the bottom of the Stage. Use the color picker to set the background color (see Chapter 9).

2. Create a text box for the instructions (Chapter 10).

3. Draw a rectangle to house the forward arrow in the lower-right corner (Chapter 3).

4. Place the image of a forward arrow inside the rectangle.

5. Use the guides to help evenly align the elements (text box, arrow box, and arrow) within in the navigation bar.

Figure 18-1 shows how helpful the guides are when you need to align several elements. You can place as many guides as you need.

Figure 18-1: Use the guides to help align elements.

Place the guides and then leave them. Don’t delete them or move them. You want these guides in place throughout the process of creating the tutorial. Each step uses different arrow elements (forward_arrow_step_1, forward_arrow_step_2, forward_arrow_step_3) and leaving the guides in place helps you remember where to place them. Placing your arrows in slightly different positions for each step may create the appearance of the arrows jumping around, even if the arrows change placement in tiny increments. Right now, you’re placing only the forward arrow, but in the next step, you add the back arrow.

Animating the First Step of the Tutorial

Now that you’ve created the navigation bar, you can turn your attention to animating the first step.

1. Place the first main graphic on the Stage.

Each step has a different main graphic. You want to size the main graphics roughly the same size for consistency. In this example, the main image switches between the iPad’s home screen and reminder screen.

2. Use the guides to determine the placement of the main image (see Figure 18-2).

That way, all main graphics appear in the same location.

Figure 18-2: Use the guides to help place the main graphic images.

Resist the temptation to simply move the guides you placed for the navigation bar for use with main graphics.

Using clipping for the callout lines

Now it’s time to draw the callout lines. The callout lines are used to provide a reference as to where the student should tap the screen. In this example, I use rectangles to draw the callout lines, and I use clipping to animate them.

This procedure shows how to animate the callout the lines:

1. Use the Rectangle tool to draw a long, skinny bar and then set the background color, as shown in Figure 18-3.

Figure 18-3: Draw the first callout line.

2. Copy the first callout line and paste it to create the second line.

Each segment of the line is its own element. By copying and pasting, you keep the same width and color and save yourself the trouble of redrawing and reformatting the line.

3. Name each line segment accordingly so that each one isn’t Rect1Copy or whatever.

Use northlinestep1, horizontallinestep1, and so on. You want to keep these names straight so that you can find them easily later to make tweaks.

4. Use clipping (refer to Chapter 9) to animate the callout line appearing on the Stage.

Select the element and then the Clipping tool, toggle the Pin, and move the Playhead down the Timeline. Start the keyframe with the element completely clipped, and end the keyframe with the element completely unclipped.

Figure 18-4 shows a partially clipped callout line.

Figure 18-4: Use clipping to create the animation of the callout line that’s appearing.

You can preview the clipping animation from the Stage.

Create segments in the Timeline for each step

Now that you have Step 1 complete, it’s a good idea to start adding labels to your Timeline (see Chapter 5). The labels should represent where Step 1 begins, another for Step 2, and so on. This is like creating segments in your Timeline, which is helpful for a couple of reasons:

These labels come in handy when you set the actions for the forward and back arrows.

The labels help you visualize where Step 1 is taking place, where Step 2 happens, and so forth.

Using labels is considered best practice because using time code may prove trickier when working with actions. For instance, you can move the label to affect timing without having to edit the action, whereas when using time codes, you can’t. Labels also provide visual clues in the Timeline on what is taking place at that time.

Using Stage triggers to stop the tutorial from advancing

Your tutorial keeps playing unless you add a Stage action to trigger the animation to stop playing. You want the animation to stop playing so that the student controls when to advance the lesson. Otherwise, the animation keeps playing through each step.

This procedure shows you how to stop the animation after each step:

1. Place the Playhead where Step 1 finishes.

2. Click the Insert Trigger icon, as indicated in Figure 18-5.

Doing so opens the Trigger code box.

Figure 18-5: Create Stage triggers to stop the animation from playing at the end of each step.

3. From the Trigger code box, choose Stop from the right side, as shown in Figure 18-6.

Figure 18-6: Choose Stop to stop the animation from playing.

4. Close the box to save the trigger.

Now when you preview the animation, it stops after Step 1 is finished. To test this, repeat the steps and procedures in this section for Steps 2, 3, and so on.

Adding the Interactivity

After you complete animating each step in your tutorial, you need to add the forward and back buttons, which allows students to advance at their own pace. After the procedure on adding actions for the arrows, I show you how to add a quick tip button as a SymbolSymbol.

Creating the forward and back arrows

If you are like me, you may want to create a SymbolSymbol for the back and forward arrows. I’m here to tell you that is overkill. The navigation arrows are too simple to warrant use of a SymbolSymbol. Besides, SymbolSymbols are best used when you want to create animations that areindependent of the main Timeline. The navigation arrows aren’t independent of the main Timeline; in fact, they work directly with the main Timeline in regard to the labels that represent where each step begins. A better reason for creating a SymbolSymbol is for the quick tip, which I discuss in the next section.

Here is a list of points to keep in mind when working with the navigation arrows:

Each step needs its own arrow element.

Don’t use more than one click (or tap) action per element.

Avoid using the touch commands. Click works best even for touch screens. The touch commands can lead to double-clicking. This is more true for tablets like the Kindle Fire. On the iPad, double-clicking does not happen as often.

Add labels to your Timeline for use with the navigation arrows. If you use a label in an action that doesn’t exist, your animation plays from the beginning of the Timeline.

Here’s the procedure for adding actions to your navigation arrows:

1. Set the visibility of each arrow element.

You don’t want the arrows to always be visible. As you add an arrow for each step, turn the visibility to On at the beginning of the step and Off right before the end of the step. See Chapter 8 for more information on the Visibility property.

2. Name each arrow element accordingly (forward_arrow_1, forward_arrow_2, and so on).

This way, you can find them easily later on.

Now you’re ready to edit the action.

3. Right-click the arrow and choose Open Actions.

4. Choose Click from the menu.

5. Choose Play From in the right column.

6. Edit the code so that a click starts playing the animation from the appropriate location.

For example, for the forward arrow in Step 1, you want the student to advance to Step 2 (see Figure 18-7).

Figure 18-7: Use labels in the actions for ease of use.

7. Set the cursor attribute for the element (see Chapter 5).

This is only necessary if your audience might use a desktop or laptop computer along with a mouse. If you plan for the tutorial to only appear on tablets, then this isn’t necessary.

Now that you have the first arrow created, you can copy the element for re-use on each step. When you are ready to place the arrow to advance to Step 3 of the tutorial (the first arrow advances the student to Step 2), move the Pin and Playhead to where Step 2 starts in the Timeline and then paste in the element in the same spot (using the guides) as where the first arrow was placed.

Then edit the click action (so that it advances to Step 3 instead of Step 2, etc.) and remember to set the visibility for each arrow. For example, at the beginning of Step 2, the first arrow’s visibility should be Off, and the second arrow’s visibility should be On.

You can follow this same procedure for the back arrows. The first back arrow should appear at the beginning of Step 2 so that the student can backtrack to Step 1.

Creating the quick tip

The quick tip in this tutorial is an excellent example of how and when to use Symbols in Adobe Edge Animate CC. The quick tip works independently of the main Timeline and thus has actions and labels that don’t affect the main Timeline. You can even create this Symbol in an entirely different project than you’ve been working on so far, which is exactly what I propose you do until you gain enough experience working in Edge Animate to create Symbols within the main composition.

The quick tip in this example is a plus Symbol. When students tap that Symbol, additional text flies out, and they can close that extra text by tapping on an X. Here’s how you do that:

1. Start a new project.

2. Add an element to the Stage that you want to serve as the icon for the quick tip.

3. Create a keyframe animation in which text flies out from the Symbol.

For example, create a text box directly over the quick tip Symbol and shrink it down to almost nothing.

4. Create a keyframe animation so that it moves up and to the left of the quick tip and slowly enlarges to 100%. Set the visibility to On for the duration of the transition.

5. Add a Stop Stage trigger right after that keyframe.

6. Create a second keyframe animation (after the Stage trigger) so that the enlarged text shrinks back down to nearly 1% and moves back to over the Quick Tip Symbol. Set the visibility to On at the beginning and then to Off at the end.

7. Add a second Stop Stage trigger at the end of the second keyframe.

8. Insert labels into the Timeline to show where the text enlarges and where the text shrinks.

At this point, your Timeline should look similar to Figure 18-8.

Now you need to add an action to the Quick Tip element.

Figure 18-8: Timeline showing keyframes for the Quick Tip animations.

9. Right-click the Quick Tip element, choose Open Actions, choose Click, and then edit the code (see Figure 18-9).

Figure 18-9: Edit the label to start the action where the text enlarges.

10. Create a means for the student to close the text:

a. Import an X icon image and place it in the top-right corner of the text box.

b. Set the visibility to On at the point in the Timeline when the text completely enlarges.

c. Set the visibility to Off when the text starts to shrink, as shown in Figure 18-10.

Figure 18-10: Edit the visibility of the close icon.

11. To enable the student to close the text box, add an action to the X icon element, as shown in Figure 18-11.

Figure 18-11: Code for closing the text box.

You’re ready to convert this project into a Symbol.

12. Right-click and choose Convert to Symbol.

13. In the dialog box, name the Symbol and uncheck Autoplay Timeline, as shown in Figure 18-12; then click OK.

This stops the Symbol from automatically playing when the main animation starts to play.

Figure 18-12: Name the Symbol and uncheck Autoplay Timeline.

14. Copy this Symbol and paste it into the main composition (or you can export the Symbol if you want to import it into several different compositions).

And that’s how you create an animated Symbol that plays independently of the main Timeline