Setting on click self and on button click start events

- We've talked about start events for animations including the default, On Page Load and also On Page Click, both of which are page-driven animation starts. But in this video, I wanna talk about some more targeted start events; On Click and On Roll Over (Self) and button events. Let's take a look at this animation. I'm gonna preview it in the EPUB Interactivity Preview panel. I'll use the keyboard shortcut, shift + option or alt + return.

On Page Load, a little truck on a lilypad floats in. If I click on the page, nothing else happens, however, if I click on our little truck, the real mode of travel is revealed, a turtle. This event is driven by On Click (Self). Let's take a look at how this is set up. I have the Layers panel here so that we can pull this apart a little more easily. The item that comes in On Page Load is this little truck.

In fact, I'm gonna isolate this entire layer by holding down the option or alt key, and clicking it to turn off the visibility on the rest of this image. Here is our initial animation that comes in On Page Load. But then we have two other items here. This is the turtle with the truck on his back and if we look at the start event, it's On Click (Self). So that when you click on this item, it will play the animation.

Which in this case, is that, it will appear. At the same time, we have the initial or a copy, I should say, of the initial truck on a lilypad. That is also set to animate On Click (Self). But this disappears. It basically gets rid of that incoming initial animation. So, the two together make this work. When we click on this area, and it could be anywhere within the bounding box of these items, On Click (Self) will animate appear and disappear.

In this case, if we look at the Timing panel, there's nothing there except for On Page Load our initial truck that comes in. The animation's On Click (Self) don't add anything to the Timing panel. And that sort of makes sense if you think about it because there's no series of animations that will occur. It's a one-shot deal, if you will. On Click (Self), that one item will animate. Now, you could have multiple On Click (Self) items on a page. In fact, you make lots of fun little games and that sort of thing with this start event, but it doesn't list in the Timing panel.

Now, let's look at an animation related to this which is On Roll Over (Self). I'm gonna turn to the next page of this file and turn my Layers back on. And let's play this animation. Our little truck comes rolling in on a lilypad and this time, instead of clicking, I'm just rolling over the area with the mouse. It's set up basically the same way as our other animation where we have a On Roll Over event, this turtle with the truck on its back appears and this time though, we chose On Roll Over (Self).

The previous animation, we used On Click (Self). This works in exactly the same way, except it's prompted by On Roll Over. The one thing you need to remember about this however is that tablets and other mobile devices don't honor On Roll Over. There is no roll over on an iPad, for example. So, assuming that you are creating this for an EPUB, you wouldn't wanna use this event. You'd wanna use On Click, which would be the same as On Tap, On Click (Self) have an event occur. There's one more start event that I wanna show you.

I'm gonna go to the next page of our file and close the Layers panel. Let's play this animation. Nothing happens, however. This animation has a button trigger and here is my button, so when I click on it, the animation occurs. The hippos fade in. Having buttons trigger animation events is really useful. Let's see how this is set up. I'm gonna turn to the next page of this file where I don't have any animations or buttons set up.

I'll show you how this works. First, I'll select our baby hippo and I'll set the animation which is simply to Fade In. Now, the default event On Page Load comes in. That's not what I want, so I'm gonna turn that off. I'm gonna uncheck it. It doesn't happen automatically, but when I go here to choose a button event, it's grayed out. That's because the way we trigger a button event is to actually use this icon here on the panel and it's really easy to use. Watch this. I'm going to simply click on this icon and then roll over to the object that I wanna be my button.

When I click it, a couple of things happen. One, this is automatically made into a button. Here's my Buttons panel that opens for me automatically. And the animation is added to it. Animation of my baby hippo. It doesn't get much easier than that. Let's do the next animation. I'll close the Button panel and this time, I'm gonna click the large hippo. Now, with my large hippo selected, I'm gonna do the same thing. First, I'll set the animation which is Fade In. Next, I'll turn off On Page Load.

Then, I'm just gonna click this button icon again and go right back to that very same button and click. It's already a button, but this time, the second animation is added automatically. When the button is clicked or tapped, first, the baby hippo animation will play followed by the mama hippo animation. Again, this makes it really easy to set up multiple events on one button. Let's take a look at the Timing panel. If I deselect everything on my page and open the Timing panel, nothing is there.

That's because my animations are tied to this button and so I need to click on the button and then I can see what animations are associated with this button in the Timing panel. I could even rearrange them here or link them to play simultaneously. We're gonna talk a lot about buttons in another video, but for now, I just wanted you to see the various options for start events for triggering your animations. It doesn't always have to be On Page Load. And these targeted animation start events can really help increase the interactivity of your projects.