Adobe Edge Animate CC For Dummies (2013)

Part V

Creating Sample Projects

Chapter 20

Animating Navigation Menus

In This Chapter

Creating an animated drop-down menu

Importing your slideshow project as a Symbol for use in a one-page site

Using mouseovers as actions

Using Open URL actions

Creating a navigational header for a larger site

Creating a one-page site

Edge Animate is good for creating one-page sites and headers within larger sites. Within these headers, you can add navigation to other parts of the parent site. The example in this chapter shows how to create an animated header for a company with three main business units. The animation includes the feature of rollover text for each business unit and links for the visitor to dive deeper into the site.

A great example of a one-page site is a restaurant site. Restaurant sites tend to have a limited amount of text and an abundance of imagery depicting the dining room, the staff, and of course the food. Don’t let the term one-page site trick you though; even though the site won’t have multiple pages, you can still present the appearance of many different pages just by swapping out the text and adding a slideshow. In this chapter, I show you how to create such a site, using an animated drop-down menu.

Creating a One-Page Website

You can create an entire website with Adobe Edge Animate CC, provided you keep it relatively simple. I’m not suggesting that you can create a complex site with tons of text and hundreds of pages; you are better off using another tool for that task. However, it’s completely plausible to create simple websites with limited text with Adobe Edge Animate CC.

As I mentioned, an excellent example of a one-page website is a restaurant site because it tends to have limited text, perhaps a paragraph or two per page, and it tends to rely on imagery to convey its message. The heavy use of imagery lends itself to slideshow animation (refer to Chapter 16 for more on creating slideshow animation), which you can import into your one-page site as a Symbol.

The following sections provide details on creating animated drop-down menus with top-level and sub-level menu items (as shown in Figure 20-1). I also show how to set up the actual content, through the example of importing a slideshow Symbol.

Figure 20-1: Create animated drop-down menus with Edge Animate.

Creating the top-level menu items

The following procedure describes how you can set up the top-level menu items:

1. Place the guides on the Stage to evenly align the menu items.

You can use Modify→Distribute (from the main menu) to help align elements as well.

2. Create a separate text box element for each top-level menu item.

3. Add a cursor attribute to each element.

4. Change the visibility to On for each element, even though the top-level menu items are always visible.

5. Insert a label in the Timeline to indicate where the sub-level menu animation occurs.

6. Place a Stop Stage trigger (see Chapter 5) before the first sub-level animations begin, as shown in Figure 20-2.

Figure 20-2: Use a Stop Stage trigger to prevent the animation from playing before the visitor clicks a link.

7. Right-click the first top-level menu item and add an action (Open Actions→Click, Play From) to start playing from the first sub-level animation segment of the Timeline, using the label that you inserted in Step 5 (see Figure 20-3).

Figure 20-3: Add a Click, Play From action to create a link to the sub-level menu.

Now you need to create the sub-level menu.

Creating the sub-level menu items

The sub-level menu opens when the visitor clicks a top-level menu item. You can animate how the sub-level menu opens. In the following procedure, I show how to create an effect in which the drop-down menu appears to literally drop-down, with each sub-level menu item appearing one at a time as the menu opens. You achieve the drop-down menu animation effect with the Clipping tool, as shown in Figure 20-4. I then turn the visibility to On for each sub-level menu item as the clipping animation reveals each item. I describe this procedure in detail in the following section.

Figure 20-4: Use Clipping to reveal the sub-level menu items container.

Opening animation for the sub-level menu

To create the sub-level menu, follow these steps:

1. Move the Playhead to the point in the Timeline where you inserted the label for the first sub-level menu item.

2. Create a separate text box for each sub-level menu item.

In this example, I changed the font color to white to make it easier to read against a multi-colored background (see Chapter 10).

3. Add a Cursor attribute to each text box element.

4. Draw a rectangle box over the menu list to act as a container.

In this example, I used a 50% Opacity setting with a black background. I also rounded the bottom corners but left the top corners square. These settings are shown in Figure 20-5.

Figure 20-5: Format the menu container from the Properties panel.

5. Toggle the Pin and select the menu container.

6. Use the Clipping tool to create an animated effect of unveiling the rectangle, as though it were sprouting from the top-level menu item.

See Chapter 9 for more on clipping.

7. Time the visibility for each sub-level menu item as the rectangle box reveals itself.

The best way to do this is to scrub the Playhead along the Timeline manually to view when the clipping effect passes over each sub-level menu item. As the rectangle element unclips while you move the Playhead down the Timeline and passes over the sub-level menu item, change the Visibility setting for each of those elements to On. Figure 20-6 shows how that appears in the Timeline.

Figure 20-6: The keyframes appear staggered along the course of the clipping animation.

8. Add a Stop Stage trigger at the end of this animation.

At this point, you have an animation for opening the sub-level menu. To finish, you need to create the closing animation for the menu. I describe how to do so next.

Closing animation for the sub-level menu

In addition to creating an animation for when the menu opens, you can create an animation for when the menu closes. This animation occurs while the menu is open and the visitor clicks the top-level menu item.

The following procedure describes how you can create the closing animation:

1. Insert a label in the Timeline to indicate where you want the close menu animation to begin, such as at the end of the open menu animation.

2. Swap out the top-level open menu element with a close menu element.

a. Copy the top-level menu item.

b. Turn the visibility to Off.

c. Paste the menu item.

d. Turn the visibility to On.

e. Update the action to close the sub-level menu items (see Figure 20-7).

Figure 20-7: Update the action to reflect closing the menu.

3. Reverse the animation sequences you made to open the menu to reflect closing the menu.

a. Use the Clipping tool to create an animation in which the menu container (the rectangle) appears to roll up.

b. Time the visibility of the sub-level elements so that they appear Off (that is, disappear) as the clipping occurs (Figure 20-8).

4. At the end of the menu-close menu animation, add a Stage trigger in the Timeline to play from the beginning of the Timeline (see Figure 20-9).

This brings your visitor back to the beginning of the Timeline, where the click action for the top-level menu opens the sub-level menu.

5. Just after the Stage trigger that you inserted, turn off the visibility for the menu-close element (top-level menu item text box) and the menu-container element (the rectangle).

Figure 20-8: Time the elements so that the visibility is Off during the clipping animation.

Figure 20-9: At the end of the close menu animations, add a Stage trigger to play from the beginning.

At this point, you have animations for when the menu opens and closes. In the next section, I show you how to create an animation for when visitors click a menu item.

Navigating to new content

In this project, you create a one-page site with a menu. Although the site is considered a one-page site, that doesn’t mean all of the content is static. You can still make new content appear, as though visitors were clicking through to a new page, even though they remain on the same page. You can use the following procedure to create this navigation by inserting a slideshow as a Symbol.

1. Create a slideshow as described in Chapter 16.

You can skip adding the buttons if you want; I don’t use them in this example. Instead, I use an infinite loop so that the slideshow keeps repeating (at the end of the slideshow animation, insert a Stage trigger to play from the beginning).

2. Convert the slideshow into a Symbol (refer to Chapter 12) and export it.

Be sure to leave Autoplay selected. That way, when the visitor clicks the Gallery link from the menu, the slideshow automatically starts to play.

3. Import the Symbol into this current project through the Library panel by clicking the + icon (see Figure 20-10).

Figure 20-10: Click the + icon next to Symbols to import a Symbol.

4. Insert a label in the Timeline to indicate where the sub-level menu item’s content is animated.

In this case, name the label Gallery.

5. Add an action (Click, Play From) for the sub-level menu item, using the label Gallery as shown in Figure 20-11.

Figure 20-11: Select the sub-level menu item and add a Click, Play From action.

6. Place the Playhead over the Gallery label in the Timeline.

7. Drag the Symbol from the Library panel onto the Stage.

8. Change the visibility for the Symbol from Always On to On.

Now when your visitor clicks Menu→Gallery, the slideshow automatically starts to play. When your visitor clicks another menu item, the slideshow goes away.

Navigating with Mouseovers and Open URL Actions

So far in this book, I’ve discussed navigating in terms of being within an animation’s Timeline, using actions with clicks and Play From. In this section, I branch out and move toward navigating with the Open URL action. This works great when your animation is embedded within a larger — parent — site. By using an action with Open URL, you can place links within your animation to other pages of the parent site. That way, your visitor can navigate within your animation to access other parts of the site.

Another type of action I haven’t discussed much so far is mouseovers. Mouseovers (aka rollovers) are great for when a click isn’t necessary. For example, you can allow your visitor to scroll through a list of items, and as she scrolls, new information appears on the screen. That way, the visitor doesn’t have to click through each item to see more information. In the following procedures, I show you how to use an effective mix and Open URL actions and mouseover actions to create a functional and effective navigation menu, or a header, that you can embed into a larger site.

This example focuses on a business with three main departments. The three departments are listed vertically on the left, with room on the right for text that describes the different departments. When the visitor rolls over the different departments, different text appears on the right. When the visitor clicks the logo or one of the text links, she is taken to a page within the larger, parent site.

Placing the artwork and the text

You can use the following procedure to set up the project and get started:

1. Gather your assets, including the URLs you want to link to and the text you want to appear.

2. Size your Stage according to the space you want it to consume on the parent site.

3. Use the guides on the Stage to create partitions, using the rule of thirds — that is, with one-third of the space on the left and two-thirds on the right.

In Figure 20-12, you see that I even added guides to create margins for the text. Vertically, use the Stage to create three rows for the left column.

4. Place the Always On elements on the Stage, such as the logos and the names of the business units on the left.

You may also want a consistent header at the top on the right.

Figure 20-12: Use the guides to partition the Stage and place the Always On elements.

5. Add some kind of animation to the logos to draw attention to them.

I discuss how to make elements spin in Chapter 7. Later in this chapter, you find out how to add an Open URL action to the logos.

6. Add a Stage Stop trigger after the initial animations.

If you don’t add the Stage Stop trigger, all the mouseover text appears in order. And you don’t want that to happen.

With the Stage set, it’s time to add the text that you want to appear when a visitor rolls a mouse pointer over one of the business units.

Adding the mouseover text

In this example, I use text that appears before the visitor clicks anything. This text is then replaced when a mouseover or click action occurs.

Follow these steps to add the rollover text:

1. Draw a text box on the right within your guides and type the initial text.

2. Change the visibility from Always On to On.

3. Segment your Timeline with labels for use with the mouseovers. Each label represents where in the Timeline the mouseover text appears. Insert the first label.

4. Place the Playhead in the Timeline where you inserted the first label.

5. Draw a text box on the Stage within your guides and type or paste the text.

6. Set the visibility to On for the text.

7. Insert a second label into the Timeline for the second business unit’s text.

8. Just before the second label, add a Stage Stop trigger, as shown in Figure 20-13.

Figure 20-13: Insert Stage Stop triggers in the Timeline after each business unit text.

9. Place the Playhead in the same spot as the second label.

10. Turn off the visibility for the first business unit text.

11. Place a text box for the second business unit’s text on the Stage. Turn the visibility to On.

12. Repeat Steps 1 through 11 for the third business unit’s text.

A nice aspect to using mouseovers is that the rollover text doesn’t go away if the visitor moves the mouse off the element — that is, of course, if she doesn’t mouse over another element that has a mouseover action.

Adding the mouseover and open URL actions

Use the following steps to add the mouseover and open URL actions.

1. Right-click the top-left element for the first business unit to open the Actions panel.

2. Add a mouseover.

3. Add a Play From action and use the label for the first business unit text. Test it in a browser to confirm that when you roll over the element, the text changes on the right.

You can add animations to the text on the right to ensure that your audience notices that the text changes. Chances are that the text updating is fairly obvious.

Overusing animation can be just as bad as no animation at all. Be careful not to overdo it.

4. Select the logos and add a cursor attribute.

It’s a good idea to start adding a cursor attribute first (before adding the link) for all links. I usually discover that I forgot to add it when I test the link. When the cursor doesn’t change, I think I didn’t add the link, but then when I click it and the link works, I realize I simply forgot to add the cursor attribute.

5. Add the Click, Open URL action for the logo. Update the URL in the code to where you want your visitor to go, as shown in Figure 20-14.

Figure 20-14: Use the Open URL Action to navigate within the parent site.

At this point, you may realize that the spinning logo link may not be enough to prompt visitors to click, especially if they’re looking for a traditional-colored text link to click. In this case, you can add a text link within the rollover text, as I describe next.

Adding text links

It’s a good idea to add a colored text link in your rollover text so that, for example, your audience can clearly navigate to the About Us page for a particular business unit to find more information. This is how you add the link:

1. Move the Playhead over the first label.

2. Add a new text box under the business unit text and set the visibility to On. Don’t forget to set the visibility to Off right after the Stage Stop trigger.

3. Right-click the text box element to add a Click, Open URL action, as you did for the logo.

4. You can color the link any way you like, but the traditional hyperlink blue is R: 0; G: 0; B: 255.

See Chapter 10 for more information on formatting text.

5. Repeat Steps 1 through 4 for each business unit.

You may even want to add text links within the initial text box just in case visitors don’t hover over the mouseover elements or don’t click the logos. If you decide to do so, remember to use a separate text box for each link, as shown in Figure 20-15. Also, remember to use the guides to evenly align each text box.

Figure 20-15: Each link needs its own text box element.

After completing the procedures in this chapter, you have an animated navigation system that you can incorporate into a larger parent site.

To post these projects online, refer to Chapter 14, where you find out how to get your animation ready for the web using the Publishing settings. Also refer to Chapter 15 for information on putting your composition on the web, including how to embed the animation in an existing web page.