From the course: Ebook Foundations

Add interactivity and animations

From the course: Ebook Foundations

Start my 1-month free trial

Add interactivity and animations

- [Narrator] One of my favorite features about fixed-layout EPUBS is that they can contain some sophisticated interactivity. Not just hyperlinks, for example, but you can include slideshows, you can have things animated on the page, you can include basically anything that you can do with HTML5, CSS3, and JavaScript. JavaScript is the key. You can write JavaScript if you like, if you're inclined that way, but I think most people will use an EPUB creation program like InDesign or QuarkXPress or PubCoder or other ones that include animation panels or other interactive panels that you apply to objects. And then when you export to EPUB, the program will write up the JavaScript for you and include it in the EPUB file. Let's take a look at an example of that. We're looking at the Little Red Hen book, which you have in your exercise files. And we're in iBooks. And as I flip through the first few pages, you'll see that we arrive on a page where we have a chick that is animated across the top and three little chicks that grow right here. This was done in Adobe InDesign. Let's jump over to InDesign and take a look at that same spread. As long as you're looking at the spread in normal view, meaning that you can see the non-printing guidelines and frame edges, you can tell which objects have animation applied to them because they have these three little bubbles appearing here at lower right. So this mother hen and her three chicks doesn't, so that's not animated. But this one is. Here's the one that flies in from the left. If I select it, you'll see a green non-printing path appear, and this is the path that the chick flies through. I did this by selecting the chick and then going to the animation panel. And look, there are a ton of interactive features here in InDesign. But here in the animation panel, see the three dots here. I applied an animation to it so that it flies on this custom path. I could also, for example, just take a box and fill it with a color and then animate that thing by coming over here and applying a preset to it. Let's say fly in from left. And then drag out my own motion path for it to follow. So that's what was done with this chick is that it went all the way across. I don't want to get into the details of how this is done exactly because I have a whole chapter in my Creating Fixed-Layout EPUBs from InDesign in the library that goes into this in all the detail. And I'll show you another course that will help you as well. But essentially, that's all I want you to understand is that you select an object in the program that you're using, find out where the interactive commands are in the different panels or bars or whatever interface they use, and apply it. So over here, these guys have a different one where they zoom in, it's called. And I just named "they got big" just to remind myself what is the object that's being animated. InDesign has a preview panel called EPUB interactivity preview panel. That's a mouthful. Where you can actually play the preview of how interactivity goes here without having to export it to EPUB first. So you make sure that it works right and that the path is working fine. And then when you're happy with the interactivity, then you go to File, Export, and choose Fixed-Layout EPUB and that will automatically be included for you, the JavaScript. I mentioned another course that you might want to check out, and that is my friend Diane Burns's course on creating animations in InDesign. There are a lot more sophisticated things you can do to a fixed-layout EPUB in InDesign than just make things fly in from the left or grow that make it look like you're a cartoon animator. And because these are regular EPUBs, just fixed-layout EPUBs, that means that people who purchase the book from the iBooks store, for example, can enjoy those animations and other interactive events that happen in your fixed-layout EPUBs.

Contents