Adobe Edge Animate CC For Dummies (2013)
Part V
Creating Sample Projects
Chapter 19
Animating an Interactive Children’s Book
In This Chapter
Getting organized to animate an interactive children’s book
Formatting text and effectively using shadow
Creating navigation links
This chapter presents a basic outline on how to create an animated children’s book. What I don’t do is provide step-by-step directions on animating the actual story. Writing and animating the story are up to you. The writing part, well, that’s completely up to you; but by reading this book, you find out how to animate the story. This chapter provides tips on how to add subtle refinements to your animation project and how to organize and plan a children’s book.
Overview Planning
To animate an interactive children’s book, the first thing you gotta do is write the story. (I realize that’s probably common sense, but I’ve been guilty of wanting to jump ahead a few steps in times past, so I thought I’d add that as a gentle reminder.) So, step one is to write the story and create a storyboard that outlines how the book progresses.
Before you start animating, the second item to check off is gathering your assets. Whether that means hiring an illustrator to create the artwork, doing it yourself, buying stock art from various websites, or using copyright-free images off the Internet is up to you. Regardless of your methods, be sure to get at least one image that you can use for the background, or multiple background images if your story takes place in more than one location. Having a consistent background image helps in placing your characters and text boxes, and it facilitates an interactive table of contents.
My thinking process on how to create the table of contents
Probably one of the most important techniques to learn while creating an animated book is proper development of the table of contents (TOC). I stumbled onto this one when I first tried to create an animated children’s book. My initial plan was to make the TOC a Symbol. I wanted the TOC to behave independently of the main Timeline so that it appeared and disappeared based on the audience’s interaction.
The tricky part was creating links in the TOC so that the audience could jump from chapter to chapter (or page to page). The easiest way to do so is to use Play From actions utilizing labels from the main Timeline. The problem is that Symbols behave independently of the main Timeline and, therefore, don’t recognize labels from the main Timeline.
My second thought was to use URLs in the action, but for that to work, I would have to create each chapter as its own Edge Animate project, which would create tons of files and tons of uploading (because I would have to upload each project separately and each project would have its own URL). I suppose for very lengthy books that approach is a viable option, but most children’s books aren’t lengthy — think of Goodnight Moon as compared to Game of Thrones.
Finally, I ditched the idea of using a Symbol for the TOC. Instead, I created a segment in the main Timeline in which I placed my TOC animations and links. You can read the details on how I did this later in the chapter.
I do realize that most children’s books do not contain chapters. If your book does not contain chapters per say, every time you read the word “chapter,” simply replace it with the word “page.” If your book is extremely short, you may want to skip creating a TOC. For longer books that need more than one sitting to read, I recommend a TOC.
If your book becomes very long, loading times may be affected. If it takes too long for your book to load, consider dividing the book into multiple Edge Animate files (different projects) to reduce the file size. If you do make multiple files for your book, you need to use URL links in your TOC instead of linking to labels from the Timeline.
In addition to the artwork, think about what kind of font(s) you want to use in your book. Now is a good time to review the section in Chapter 12 on working with fonts.
Once you have your storyboard created and your artwork is ready to go, it’s time to start thinking about how to organize your Timeline in Adobe Edge Animate CC. Decide how to create segments in the Timeline, how to use labels to help you visualize where Chapter One starts, where Chapter Two starts, and so on. Think of the keyframe animations for each chapter as segments. You also want to segment some time for the table of contents (TOC). At first blush, you may think about creating a Symbol for the TOC, but for this example, I show you how to use labels from the main Timeline to create links for the TOC, which is why the TOC is part of the main Timeline and not a Symbol.
Symbols are used to create animations that are independent of the main Timeline. Symbols have their own set of labels for their own Timeline. Symbols don’t recognize labels from the main Timeline.
Finally, before you start animating, here are few things to consider doing:
Set the Visibility of elements to turn on when you want them to appear and turn off when you want them to disappear.
Add labels in the Timeline to signify when different chapters (or pages) start and for use with Play From actions.
Create different text boxes for headers, body paragraphs, and each different link or navigation button.
Formatting the Text Boxes
Although Adobe Edge Animate CC has many features, settings, and properties for text, it isn’t intended for text-heavy projects, which is fine for children’s books that may contain only a few lines of text on each page. Edge Animate is also good for creating children’s books because you can enable interactivity by creating links with the text boxes and other elements.
Creating a different text box for each element
For Edge Animate CC, you must create a separate text box whenever you want to use different formatting for the text. For example, if you use different font sizes or colors for the chapter headings than you use for the main text, you need to create different text boxes for the different types of text.
You also have to create separate text boxes for each link in the TOC. Although it may seem easier to create a single text box with a long list of chapter titles, doing so won’t work in this example. Each text box can contain only one Play From action, which you use to create the links. So, each chapter title in the TOC must have its own text box.
Using shadow on text appropriately
Say that your background image consists of blue skies and white puffy clouds. If you use a light-colored text, your text may become lost or hard to read over the white clouds. Or say that you want to use the color blue for the TOC link and place it in the top-left corner of the Stage on top of a blue sky — using blue on blue may make it hard for your audience to read or even see the text.
To help with this, I recommend placing a subtle shadow on the text to make it easier to read (see Figure 19-1).
Figure 19-1: Add a shadow to your text for easier reading.
To create the shadow, follow these steps:
1. Check the Pin to make sure it’s not toggled and be sure that Edge Animate doesn’t automatically create keyframes as you perform these steps.
2. Select the text box.
3. From the Properties panel, toggle No Shadow to enable adding shadows, as shown in Figure 19-2.
Figure 19-2: Enable the Shadow properties.
4. Change the shadow color to black and set each of the properties to 1, as shown in Figure 19-3.
Figure 19-3: Configure the shadow for subtlety.
You now have a shadow on your text, which makes the text easy to read when it’s placed over images, as shown in Figure 19-4.
Figure 19-4: Text with a slight shadow is easier to read.
Creating a Segmented Timeline
Although I don’t go into the specifics of animating an interactive children’s book (after all, the story you tell and how you tell it are up to you), I do want to provide a list of items to keep in mind while animating your story:
Label the start of each chapter (or page) to create a segmented Timeline. This makes it easy to see where each part of the book starts. You can use the labels for your Play From actions as well. Also, insert a label for where you want your TOC animation to start.
Set the Visibility property for each of your elements to On (instead of using the default Always On) at the appropriate times.
Animate each segment to tell your story.
Place a Stage trigger to stop the animation at the end of each segment. Otherwise the story keeps playing, and the audience loses control over when they want to move forward.
Turn the Visibility of elements to Off just after the Stage Stop trigger for each segment. (Unless, of course, you want those same elements visible in the next segment.)
If you plan to use a consistent background image throughout the story, you can leave that element’s Visibility setting at Always On so that the image is visible when the TOC opens — and so your audience doesn’t experience a blank Stage when they open the TOC.
Navigating the Story
In this section, I discuss a couple ways for your audience to navigate through your story. I present how to build an interactive table of contents (TOC) and discuss how to place navigation links for your audience to advance the story or return to a previous page.
Place the forward and back navigation links as you animate each chapter or page. That way, when you preview the story in a browser, you can test the navigation as you edit each chapter or page. You may wait until you finish animating the story before you add the TOC, simply because you may not have all your labels in place until the end.
Placing the next and back navigation
Consistency is always the key to good navigation. Don’t make your audience guess where or how to move the story forward. If you want to use more creative text than “Next” or “Back” to indicate the navigation, be sure you make clear what your audience needs to do to advance the story. For example, add something like “Find out what happens to the bear by clicking the beehive.”
If that approach is still too dry, you can do something along the lines of, “The bear swatted at the beehive with his paw. Can you help him get the honey by knocking down the bee hive?” Then make the beehive glow for a moment. Such visual clues will clearly signal the audience to click the beehive to advance the story.
Using standard and consistent buttons for navigation is a tried-and-true approach, and this is how you do it:
1. Use the Stage guides to align your navigation buttons or text.
The Stage guide helps you consistently place the elements in the same location for each page (see Figure 19-5).
Figure 19-5: Use the guides to help place elements.
2. Make sure the Pin is not toggled, and place the text or image on the Stage.
3. Advance the Playhead to the point in the Timeline where you want the navigation element to appear — for example, at the end of Chapter One.
4. From the Properties panel, turn the visibility On for the navigation element (see Figure 19-6).
Figure 19-6: Turn the visibility from Always On to On.
5. Right-click the element and add an action to the element (click Play From) and use the label for Chapter 2, for example (see Figure 19-7).
Figure 19-7: Add a Play From action for the Navigation link.
6. Slide the Playhead down the Timeline to the end of the first chapter and just after the Stop Stage trigger. Change the visibility to Off, as shown in Figure 19-8.
Figure 19-8: Turn the visibility to Off after the Stage Stop trigger.
Repeat this procedure, using a unique element, for each navigation element. You can create the back navigation in the same manner.
Building the table of contents
Using a TOC is a nice touch that adds another level of professionalism to your interactive book.
Create a TOC only if it truly benefits your audience. For example, if you create a book in which your audience may want to skip around to different parts, a TOC can be useful. A TOC may also be useful if the story takes more than one sitting to read; however, if your audience can read through the book in 5 to 15 minutes, a TOC isn’t necessarily beneficial. Figure 19-9 shows the TOC that I talk about in the following sections.
Figure 19-9: An example of formatting a table of contents.
Formatting the table of contents
Before you start formatting the TOC, advance the Playhead to a point in the animation where the visibility for all other elements is turned off. This gives you a clear working space for formatting the TOC. For example, move the Playhead to the far end of the Timeline.
Make sure that the Pin isn’t toggled and that Edge Animate is not set to start automatically creating keyframes. Otherwise Edge Animate creates keyframes as you format the TOC.
How to create a table of contents:
1. Draw a rounded rectangle to create a container for the TOC. Place it along the left side of the Stage.
2. From the Properties panel, in the Corners section, choose the 4-corner formatting option.
3. Format the corners so that those at top-right and bottom-right are slightly rounded (see Figure 19-10).
4. Format the top-left and bottom-left corners to appear square (simply click the box for that corner) to create a tabbed look (see Figure 19-10).
Figure 19-10: Creating a tabbed look for the TOC container.
5. Use a 50% Opacity setting for the background of the rounded rectangle so that the background image is visible through the element (see Figure 19-11).
Figure 19-11: Use 50% Opacity to see through the TOC container.
6. Create a separate text box for each chapter or page of the book and place them vertically within the rounded rectangle.
Use the guides to help you align the text boxes, as shown in Figure 19-9.
7. Format the text in a traditional blue color to signify it’s a link, as shown in Figure 19-12.
Figure 19-12: Format the color of the text in a traditional blue link color.
8. Select the rounded rectangle and the text boxes and move them off the Stage to the left (see Figure 19-13). Remember not to animate this step.
Figure 19-13: Slide the TOC elements off the Stage.
After you complete formatting the TOC, you can start to animate it so that the audience can interact with it.
Animating the TOC
The animation for the TOC consists of the TOC sliding out from the left when the TOC link is clicked. (Placing the TOC link is the last procedure in this chapter, right after this one.) When the audience clicks one of the TOC links, the TOC disappears from the Stage. Here are the steps for this process:
1. Insert a label in the Timeline to designate where you want to start the TOC animation.
You use this label later for the TOC link.
2. Move the Playhead down the Timeline to where you inserted the TOC label.
3. Toggle the Pin to start automatically creating animated keyframes.
4. Move the Playhead down the Timeline to indicate the length of time that you want the TOC to take to slide onto the Stage, as shown in Figure 19-14.
Figure 19-14: Toggle the Pin and move the Playhead down the Timeline to animate the TOC sliding in from the left.
5. Select all the TOC elements and move them onto the Stage. This creates a keyframe animation.
6. For each TOC element
a. Select the element and right-click it (for example, choose Open Actions and then Click) to add an action (for example, Play From).
b. Type the label as shown in Figure 19-15.
Figure 19-15: Add a Play From click action to create a link.
7. Add a Cursor attribute for each of your TOC elements (Figure 19-16).
Figure 19-16: Add a Cursor attribute to your TOC items.
8. Place a Stage Stop trigger at the end of the TOC segment in the Timeline.
9. Move the Playhead slightly past the Stage Stop trigger and then turn off the visibility for each of the TOC elements.
You have now created the animation for the TOC. The next step is to create a way for the audience to open the TOC.
Placing the TOC text box link
In this section, I present a procedure on how to create a means for your audience to access the TOC. At the beginning of the animation, the TOC is not visible. You want to create an element that enables the reader to open the TOC. If you don’t want to use a text box to create the link to open the TOC, you can just as easily use an image or a drawn element. Whatever you choose to use, make sure it signifies that, by clicking (or tapping) it, the audience knows it’s opening the TOC.
Here’s how to create an element that opens the TOC:
1. Place the Playhead in the point in the Timeline where you want the TOC link to appear.
For example, you may want the TOC link to appear directly after an opening title screen or at the end of the first page or chapter.
2. Find a place on the Stage where you want the TOC link to consistently appear — for example, in the top-left corner of the screen.
3. Draw a text box and type Table of Contents, or whatever you think is appropriate.
4. From the Properties panel, change the visibility from Always On to On.
5. Add an action to the TOC element (right-click the element, then choose Open Actions→Click→Play From, and then type in the TOC label), as shown in Figure 19-17.
Figure 19-17: Adding a Play From action that specifies Click for the TOC element.
6. Move the Playhead down the Timeline to the point in the animation where you want the TOC element to turn off and change the visibility setting to Off from the Properties panel.
Here’s a trick for getting the TOC element (the link) to disappear when the TOC is open:
1. Make sure the TOC animation (when it slides in from the left) is at the very end of the animation, after all the chapters.
2. Set Visibility for the TOC element link to On at the beginning of the book.
3. Set Visibility to Off at the end of the project’s last chapter, but before the start of the TOC animation.
4. Place a Stage Stop trigger at the end of the last chapter.
Otherwise the TOC animation plays at the end of the last chapter.
Place Stage Stop triggers at the end of each chapter to stop the animation; otherwise the story continues to play. For more information on Stage Stop triggers, refer to Chapter 5.