Building an animated cookbook page

- Cookbooks are fun to animate, because they're books that readers interact with in a way that they don't when they're reading a novel. Here's just one example of the millions of different things you can do to animate cookbooks and recipes. Let's take a look. Photo comes in and moves over, there's our little cookie girl. Here's an introduction to the recipe, and here's a button for the recipe. When I click it the recipe comes in. Let's take a look at how this file was set up.

First, let's take a look at the timing panel. There aren't really that many moving pieces. The photo comes in and moves over, our cookie character comes in, the intro to the recipe comes in, and then our button appears and triggers the actual recipe. I'll show you just how the file was put together. I'm gonna turn to the second page here, where I don't have any animation applied. I'll go out of preview mode so we can see the parts of the page better. And here's our layers panel, I moved it over here so you can see it just a little bit better.

I'm gonna start with the recipe photo, and I'm gonna isolate that layer by holding down the "option" or "alt" key. We wanna have this photo animate in two ways. First I want it to fade in, and then I want it to move over to the next spread. So I'm gonna start with the fade in, I'll just click on the photo and choose the preset "fade in." Now, in order to put that second animation on it, I need to use our little grouping trick. I'll get an empty rectangle and put it right on top of the photo, I don't wanna change the shape or dimension of the photo.

I'll select both of these, and group them, "command" or "control g." I'll give this group a name, we'll call it "photo group." And now I'm gonna set it to "move right." We'll just choose that preset. But I also, in addition to having it move, I want it to scale up to the full size of the page. I actually scaled this photo down before I placed it on this side. You'll see it's at 75%, that was scaled in in-design. So when I scale it up to this next page, it's going to be its full size.

So I'm gonna set the scaling to 125% in both dimensions. And then we're gonna definitely need to turn on our preview proxy here and see where this ends up. There we go. We're gonna need to adjust the motion path. I kept going over to it to adjust it, and then I need to check my proxy to make sure this is in the right position. That looks pretty good. Next I want that little cookie character to appear over the edge of the page.

So I'll turn on my cookie character, I can turn this proxy off now. And we want the cookie character to just fade in. I'll set it for a slightly longer duration just so it's a little more noticeable. Now we'll preview this and check the position of everything. Plate goes over, there's our cookie girl. I actually didn't like the speed that plate moved with, I'm gonna set the duration of the "move right" to a little bit higher setting.

Great. Next we're going to bring in our recipe intro. So I'll turn that layer on. And you can see how important this layers panel is in this type of animation. In this layer I have two things, one is when this text scrolls in, I want it to change in opacity. So I have this rectangle frame here that actually has a gradient feather applied to it at 90 degrees. It's going to be more opaque at the bottom of the frame and then the text will start showing through at the top of the frame.

I'm gonna turn off this photo layer for a moment. Now I need to make a custom motion path that brings the recipe intro up into the page. I'll turn my recipe title on so I can see where that is, and I'm just gonna start in about the middle of the recipe, hold down the shift key, and draw a path. I'll select that along with the recipe intro and make a motion path. Again, we need to check our proxy and I can see that I need this motion path to be just a little bit longer. Maybe one more adjustment here, we want it to come up just under the recipe.

There we go, that's good. Next, after the text scrolls into position, I want this recipe button to come in. So I'm going to click on the button, and I'm going to set it to appear. With that setting it wont show up until it's prompted to do so in the timing panel. I'm gonna turn on the recipe because when the button shows up, I want to be able to get to the recipe with it. If we take a look at the recipe, we can see that the ingredients in the recipe are grouped. If I double click on the recipe itself, it actually has a white background so that it covers up the recipe introduction, that's very important.

Now, I'll select this group and set it to "fade in." I don't want it to fade in on page load, I wanna trigger it with a button, so I'll click on this icon and then click on our recipe button. I'm gonna turn all our layers back on, and lets see what we have here. Photo comes in, moves over, there's our cookie girl. Up comes our description and there's our button. And there's our recipe.

I'd like to slow this text down just a little bit, maybe bring it down a tad. To do that I'm going to increase the duration. So we'll set it actually to about two and a half seconds. And then it'll come in more slowly. This part looks good, that's better. And there's our recipe button. Animating recipes is a lot of fun, and you can see that you can really make use of the various techniques we've talked about in this course.

I don't know about you, but I'm definitely ready for a cookie.