Creating an Interactive Slideshow Animation - Creating Sample Projects - Adobe Edge Animate CC For Dummies (2013)

Adobe Edge Animate CC For Dummies (2013)

Part V

Creating Sample Projects


imageVisit for great Dummies content online.

In this part . . .

check.png Constructing animations

check.png Designing projects

check.png Visit for great Dummies content online.

Chapter 16

Creating an Interactive Slideshow Animation

In This Chapter

arrow Adjusting opacity

arrow Manipulating keyframes

arrow Creating a loop

arrow Making buttons

Creating an interactive and animated slideshow is a great way to acquire some of the Adobe Edge Animate CC basics. In this chapter, I cover how to work with several images in a composition. I also discuss how to time the images fading in and fading out. In addition, I show you how to add a loop to a slideshow so that it keeps playing. To include some basic interactivity to the slideshow, I conclude with a discussion on how to add Play and Stop buttons.

Overall Steps for Creating a Slideshow

This chapter provides detailed steps for creating a slideshow with a loop and buttons for starting and stopping. Here’s a quick rundown of the general steps:

1. Determine the size of the Stage. This is especially important if you want to embed the slideshow into an existing web page.

2. Gather your images and size them the same size as the Stage.

3. Import all of the images through the Library panel in Edge Animate.

4. Drag the first image onto the Stage.

5. Set the Opacity properties for the image to fade in and then fade out.

6. Place the second image on the Stage.

7. Copy the first two keyframes you made for the first image.

8. Select the second image, and then paste the first keyframes so that they apply to the selected image.

9. Repeat Steps 6 through 8 for the remaining images.

10. Add in a Stage trigger to play from the beginning when the animation reaches the end.

11. Add the Play and Stop buttons and set their actions.

12. Add Cursor attributes to the buttons.

That’s the overall procedure in a nutshell. You can find the details on each of these steps throughout the remainder of this chapter.

Setting Up Images and the Stage

Before you even open up Adobe Edge Animate CC, I highly encourage you to organize the images that you want to use in your slideshow. You also want to figure out how big you want to set the Stage. After you have done that, then you can open up Edge Animate and start importing the images.

1. Determine how big to make the Stage. If you want to place the slideshow into an existing web page, determine the available space in the page.

2. When you know how big you want to make the Stage, size the images accordingly.

imageSlideshows look best when you size all the images the same.

3. Create a folder on your desktop for your overall slideshow project. Within that main folder, create another folder called Images. Place all your images within that folder.

4. Open Edge Animate and size the Stage per Step 1.

See Chapter 3 for more on how to size the Stage.

5. Import all your images at once through the Library panel (see Chapter 12).

After completing these first steps, you can proceed to animating the first slide.

tip.epsIf your image is bigger than the Stage, parts of the image appear dimmer than other parts. The parts that appear dimmer are the parts that are off the Stage (see Figure 16-1). You can resize the Stage or the images to make a good fit. You can also change the Overflow property for the Stage to Visible, but that won’t help if you want to place the slideshow within an existing web page and you have tight space considerations.


Figure 16-1: Make sure the Stage and the images are the same size.

Animating the First Slide

Edge Animate is feature-rich, and you can create a composition multiple ways. For example, when creating your slideshow, you can use the Visibility property to make images appear or disappear from the Stage. However, for now, I want to use opacity. I have a couple reasons for doing so. First, I go into detail on using visibility in a later example in Chapter 19; second, I want to show how to use opacity effectively. When you use opacity to fade elements in and out, also using visibility is redundant and unnecessary. The following procedure picks up where I left off in the previous section.

1. Drag your first image from the Library panel onto the Stage.

2. From the Properties panel, set the Opacity to 0.

This starts your image off as appearing invisible, as shown in Figure 16-2.

3. Toggle the Pin and drag the Playhead down the Timeline to the 1-second mark.


Figure 16-2: Using the Opacity setting to conceal the image.

4. Set the Opacity to 100%.

If you preview the slideshow at this point, you see the image fade in over the course of 1 second. You now have your first animation.

5. Select this animation and copy it.

6. Configure the image to fade out:

a. Place your cursor over the yellow bar with the chevrons, as shown in Figure 16-3.

b. Click and drag that keyframe so that the Playhead is at the 2-second mark and the Pin is at the 1-second mark.

c. From the Properties panel, adjust Opacity back to 0.

This makes your image fade out.

tip.epsAnother way to do Step 6 is to copy the transition from the Timeline. Then, use Paste Inverted (from the main menu, click, Edit→Paste Special→Paste Inverted).


Figure 16-3: Click and drag the Playhead and Pin down the Timeline.

You should now have two animations. The first one fades the image in, and the second one fades the image out. If you preview the animation, you’ll see the image slowly appear and then disappear.

The next section shows how to animate the second slide.

Animating the Second Slide

If you’ve been following along since the beginning of this chapter, you currently have a Stage and a set of images in your Library that have the same size dimensions. You’ve also created two transitions during which your first image fades onto the screen in 1 second and then fades out.

Now it’s time to create the second set of transitions for use with the second slide:

1. Drag the second image for your slideshow from the Library panel onto the Stage.

2. Place the Playhead at the 2-second mark in the Timeline.

3. Copy the first two transitions from the previous procedure.

tip.epsYou can select them both at the same time by clicking on the rollup bar, as shown in Figure 16-4.


Figure 16-4: Place the cursor over the top bar to select both keyframes.

4. Make sure you have the second image selected and then paste in the transitions.

This applies the same keyframe attributes to the second image as you set for the first image. At this point, if you preview the slideshow, you see the first image fade in and then out, and then the second image fades in and fades out.

5. Experiment with meshing the two images so that as the first image fades out, the second one starts to fade in.

To do so, select the second set of transitions and drag them down the Timeline so that it starts at the 1-second mark, as shown in Figure 16-5.

If you preview the slideshow now, you see the second image start to appear as the first image disappears.


Figure 16-5: Blend the fading out of the first image with the fading in of the second.

6. Repeat Steps 1 through 5 for your remaining images.

tip.epsScrub the Playhead to about the 1.5 mark in the Timeline. Doing so allows you to see both images at approximately 50% opacity. You can see a combination of both images on the Stage at once, as shown in Figure 16-6.


Figure 16-6: Viewing both images at once.

Adding the Finishing Touches

Up to now, you have a decent slideshow animation. However, it’s missing interactivity. Also, it stops when it reaches the end. In this section, I show you how to add a loop to your animation so that it keeps repeating. I also show you how to add Play and Stop buttons so that your audience can interact with the slideshow.

Adding a loop

Here’s how to add a loop to your slideshow:

1. Place the Playhead at the end of the Timeline.

2. Click the Insert Trigger icon from the Timeline, as shown in Figure 16-7.


Figure 16-7: Insert a trigger into the Timeline.

When you click the Insert Trigger icon, the Trigger dialog box opens.

3. Click Play From on the right side of the box.

This populates the code, as shown in Figure 16-8.

tip.epsBy default, Edge Animate uses 1000 as the timestamp from which to play. If you want your slideshow to repeat from the very beginning, edit this to 0.

4. Close the box to save.


Figure 16-8: Click Play From to create a loop.

imageTo preview the loop, you must watch the animation from a browser (File→Preview in browser). The Stage doesn’t support the trigger.

Adding Play and Stop buttons

Now you have a slideshow that continuously repeats, but what if your audience wants to stop the slideshow? In that case, it’s good to provide some buttons that your audience can interact with. The following procedure shows you how to add a Play button and a Stop button. For this procedure, I’m assuming that you already have images that represent the buttons.

Here’s how to add actions to your buttons. You can repeat this process for the Stop button and the Play button:

1. Place your button on the Stage where you want it to appear (this doesn’t have to be an image. It can be a text box or an image).

2. Right-click the button image and choose Open Actions.

3. From the menu, choose Click.

This opens a second menu.

4. From this menu, choose the action for the button.

You can choose Play or Stop here.

This populates the dialog box with code, as shown in Figure 16-9.


Figure 16-9: Click Play to have the animation start playing where it left off.

imageTo test that your buttons work, you must preview the animation in a browser.

Adding the Cursor attributes

If you previewed a button in the preceding section to see whether it works, you may have noticed that your cursor didn’t change from the standard arrow to a hand when you hovered over the button, indicating that it is indeed a button.

In the next procedure, I show you how to add Cursor attributes to the buttons to provide a visual clue to your audience that they can click the buttons. This procedure assumes you already have an image on the Stage with actions set.

1. Select the element (image of the Play or Stop button) on the Stage.

2. From the Properties panel, click the Cursor attribute icon.

This opens the Cursor attribute menu (Figure 16-10).


Figure 16-10: Add a Cursor attribute to your buttons.

3. Choose the pointing hand icon.

This icon appears when you hover the mouse over the button in a web browser.

imageTo see your Cursor attributes in action, you must preview the animation in a browser. The Stage doesn’t support Cursor attributes.