- When you apply any animation effect to an object, the animation is always set, by default, to start when your page loads. However, sometimes you want some other event to trigger your animation. Let's start by looking at some animations with the default start event On Page Load set. I've clicked on my bear character here, and it's set with the preset Fade In and the default start event, which is set here in the Animation panel and it's set to On Page Load.
Let's see what this looks like. When the page loads, you'll see that each bear animates one by one. It fades in. So the start event is On Page Load. If we look at the Timing panel, it's set to the event On Page Load, that's the only option there. And it shows the order that our bears will fade in on this page. That's pretty standard and those are all default settings. But what if we want the animation to be more interactive? That's an especially nice feature for a children's book, which is where these animations are actually from.
Would be nice to have something happen when the page is clicked on, for example. I'm gonna go to the next page in this file, and let's preview this animation and you'll see more what I mean. When the page loads, nothing happens. But watch when I click on the page. Our little bees start dancing. Anytime I click, anywhere on the page, the bees dance. Let's see how that was set up. Each of these bees is set with the preset Dance, one of our complex presets, and at first, they were set to play On Page Load.
But instead, I've set them all to start On Page Click. If we look in the Timing panel, instead of saying On Page Load, the Event menu now says On Page Click. And all of these bees are set to dance, they've been linked together so that they all play at the same time On Page Click. I'm gonna turn the animation off on a couple of these, I'll select two of our bees and click the little trash can icon here to get rid of the animation. So here's how these were set.
First, the preset Dance, which as you can see comes in On Page Load. But if we look here, we have other options, including On Page Click. I'm gonna set that, but I still have On Page Load, which is going to take precedence over On Page Click. So I need to turn On Page Load off. It doesn't deselect by itself. Now I have On Page Click. And I'll set this next one also to Dance, and first, I'll turn off On Page Load, and then turn on Page Click.
So now these animations will be prompted when we click on the page. You can actually have both On Page Load and On Page Click on the same page. Let's look at one more example. I'm gonna turn to the next page in this file, and let's preview the animation. In this case, as the page loads, our bears fade in. But, I can also click on the page and have our bees dance around. Again, I can click anywhere on the page.
So, the way this was set up is, just as you saw in the previous pages. Each bear was set to Fade In On Page Load. And the bees were set to play on the start event On Page Click. If we look at the timing panel, here's an interesting thing. Under Event, we actually have two options now. We have on Page Click, which plays all of our dancing bees together; but, if we go to the Event menu, we can now see what is set to play On Page Load. We can have both on the same page.
So the start events are important. Usually, you'll use the default On Page Load, but it's nice to have an option like On Page Click when you want to add a little interaction to your project.
Updated
3/23/2016Released
6/2/2015- Setting up an animation workspace
- Working with the Animation panel
- Viewing and editing animation presets
- Working with rotation and scaling
- Creating motion paths
- Adjusting timing
- Animating type
- Animating infographics
- Adding buttons and sounds
- Building more complex animations
- Exporting animation
- Creating, saving, and sharing custom motion presets
Skill Level Intermediate
Duration
Views
Q: This course was updated on 03/23/2016. What changed?
A: We updated the video "Supported format overview" and added a new movie, 'Using animations with Publish Online."
Share this video
Embed this video
Video: Setting page load and page click start events