Creating animated ads: Financial ratios

- Sometimes advertising can have an awful lot of text in it, and it's good to break up the information, even better to bring a little action to it. We're gonna take a look at an example of advertising that could have used boring old bullet points, but instead uses animated blocks of text. Let's view this is the preview panel. A lot more interesting than bullet points, isn't it? Let's take a look at this more closely.

I'm gonna start with the timing panel here, and you can see that we have the color shapes, starting with the circle in the middle, which has type on it, come in, and then after a delay, the color blocks come in. Upper left, upper right, and so forth. Next, the text in each block comes in. Let me show you just how that was set up. I'm gonna turn to the next page of this file, where nothing is animated yet. I'll start with the middle circle here.

As this circle comes in, I want it to be rotating counterclockwise 90 degrees. I want it to animate to its current appearance. I want it to start from zero percent scaling and go to its current appearance. I also want it to slow down a little bit as it comes in. It'll be subtle but i think it's worth doing. So we have to set the speed to ease out. Finally, I want it to fade in as it comes in. Now, remember when we use to current appearance, opacity is the opposite of what you'd think.

I'm gonna set it to fade out, and that will actually cause it to fade in because it's animating to the current appearance. Let's take a look. Great. The other items won't be there at that point in the animation once we get them set up. Next, we're gonna animate the four color blocks. So, I'm gonna select them in the order I want them to animate. That's very important. If for example I wanted to animate in a clockwise direction I could select profit in the liquidity square, but instead I want them to go left to right so I've selected them efficiency, profit, solvency, liquidity, and that's the order they're going to animate in.

For each one, we want them to come in by scaling from zero percentage, to their current appearance. We don't need any fade in effect particularly, but I am going to apply ease in again so that they slow down a little bit as they come in. Finally, I'm gonna set each of these to hide until animated, because I'm going to link them together in the timing panel and this will help the timing be very precise. They'll show up when they're ordered to. Now I'm gonna deselect these, and we do have to change the orientation point for each of them because I want each of them to come out from the center.

So, for this one, we want it to animate from this corner. This one from this corner, and each one in turn we want the orientation to be the point that it's coming out from the circle. Now, I'm going to set all of these actually to play at the same time, but starting with the color blocks I'm gonna put in a one second delay. I could let the center just animate by itself and then link these, but this helps me make the timing just a little bit more precise.

Let's take a look. Great. And again, the type isn't going to be there because I'm about to animate it. Having the text come in is going to be super easy. Again, I'm holding down the shift key, and I'm going to select the text in the order I want it to animate. If I go out of order, of course I can change things in the timing panel, but it's easiest to just select things in the order you want to begin with. With all of these, I want them to come in with the simple appear preset.

That should do it. Let's take a look. Of course I could link the text as well and it could all come in at once. But this way it gives the reader a chance to read the text as each one comes in. This is a great example of using animate to current appearance. Any time you want something to scale from zero, you'll want to set it to animate to current appearance, because your design is ultimately where the animation ends up. Throw in some spinning and you've got a lot more action than tired old bullet points.