eBook Timelines

April 9, 2012 | 18 min 43 sec

How to add timelines to your iPad ebooks using iBooks Author and Timeline 3D or Easy Timeline.



iBooks Author is a free software application from Apple that allows you to create eBooks for the iPad. It allows you to include multimedia like slideshows, movies, and interactive widgets. Today I’d like to show you how you can create your own timeline to include in your eBook using either Timeline 3D or Easy Timeline.

I’d like to show a book that I created that has some timelines in it. Then I’ll show you how I made it. So this book uses some high resolution images and text from the NASA.gov website and I’ve made a timeline that shows some historic moments in space.

The first timeline I’d like to show you is an interactive timeline widget. This can be created either with Easy Timeline from the Mac App Store or with Timeline 3D from our website. I can just touch these arrows to go through the events in my timeline or I can drag my finger along the time-strip at the bottom to get a preview of the events. Or, I can drag my finger across the iPad to switch between events.

Here’s an event that has a movie in it. Let me show you what that looks like…

Interactive timeline widgets are a great way to include your timeline into an eBook if you have many events, if you want to really feature the media in your events because these are rendered with full iPad Retina Display resolution, or if you want to provide the most interactivity to the readers.

If you have Timeline 3D there are a few more options for how you can include your timeline into an eBook. This is a timeline movie. It is a fully rendered, animated, 3D movie of your timeline that includes soundtracks, automatic narration, and that event media that I showed you. Let me show you what a timeline movie looks like…

So as you can see, timeline movies are a great way to give a very cinematic feeling to your timeline.

Next, I’d like to show you a timeline slideshow. Now this slideshow, you just go event to event by touching the screen or by swiping across the screen. It shows you each event of your timeline with a 3D perspective and this is rendered at the full retina display resolution of the new iPad so the text and images look very crisp in this timeline. It crossfades between the slides so it gives you a real feeling of movement as you move through your timeline.

Finally, I’d like to show you that the last page in my eBooks contains an image from my timeline. This is the same high resolution image that the slideshow had but this is just in my book as a regular image. You can superimpose text or other media on top of it and really integrate it into your book when you don’t need that full interactivity.

So, I’ve showed you four ways you can embed your timeline into an eBook. With either Timeline 3D or Easy Timeline, you can create an interactive timeline widget. If you have Timeline 3D you can also create a timeline animated movie, an interactive slideshow, or you can add 3D images to your eBook. Now I’d like to show you how I created this book.


OK, now let me show you how to create that e-book. let’s start by launching Easy Timeline. Here’s our NASA timeline it has events, titles, dates, notes and here is that event with the video in it.

First let’s create an iBooks Author widget. So, I’m going to click the Widget button in the toolbar here and we’ll choose a color for our titlebar. I like the blue one. And, we’ll set a title that will appear in that titlebar of the widget. After I click Next it will ask me where I want to save my widget. I’ll just save it here to the Desktop and as soon as I click save then it starts creating all the images, audio, video, and the widget content that will playback on the iPad.

One thing to note here. In the current version of iBooks Author there is a bug and how you can work around it is… If you have any video or audio in your widget, make sure that the widget filename does not contain any spaces and also your iBooks Author project filename does not contain any spaces. That will allow you to play video and audio back within your iBooks Author widget.

OK, we’re finished. Now we have an iBooks Author widget saved to our Desktop which we’ll add to our book later. Now I’m going to quit Easy Timeline and launch Timeline 3D. Now Timeline 3D is required in order to export any timelines that have a 3D perspective like movies or Keynote presentations that use the 3D perspective.

So, I’m going to start by creating a movie. Now you may know that there’s a Share to iTunes feature that allows you to create movies optimized for the different Apple devices including the iPad and Apple TV however, this feature exports a movie that has the standard high definition aspect ratio that fits a television. So if you were to create a movie this way it would play back on the iPad but there would be black bars above and below the movie. That is because this movie is created to fill the screen of your television at home. However, in an eBooks it really looks best if the movie fills that entire iPad screen which is a more square screen. It is not quite as wide.

So, let’s go ahead and cancel out of Share to iTunes. we’re not going to use that. Instead, in the File menu we’re going to choose Export 3D > QuickTime Movie. This also creates movies but there’s some different options in here and there’s more control over customization.

Specifically, for this tutorial I’d like to show you that in the Format menu, I’ve added a new option that is the iPad dimensions. 960 x 720. So this will create a movie that can be played back on any of the iPad models and it will have the same aspect ratio as the screen on the iPad. I’m going to click Save and it will go ahead and render that out to our Desktop along with the widget we already created. OK, that’s done now we have a movie saved to our Desktop.

The next style of timeline that we’d like to include in our book is that slideshow. we’re going to use the Keynote export for that. You can see I have all the standard Keynote slide sizes here including one that fits the aspect ratio of the iPad. But recently I’ve added a new option that is that full iPad Retina Display resolution that makes this very big Keynote file that looks super sharp on the new iPads.

So, I’m going to choose that option and now let’s set the media type to Still Images. There are two reasons we want to do this. First, so far I’ve found that movies embedded into Keynote slides don’t play back in iBooks Author books. Even if they did, it would create these very huge files that would make your eBooks very big for your readers to download so please choose Still Images here to make a slideshow.

I’ll click Next. It asks me where I want to save this Keynote file. The Desktop is just fine so I’ll click save and in a few minutes there will be a Keynote file on our Desktop. Now, for the Keynote file I want to customize this a little further so that it looks great within our book.

First, let me resize this because the resolution is just too big to fit on my monitor. OK, now I’ve sized it to fit. And, instead of just going from one picture to the next, I want them to cross-fade between each other. So, I’m going to select all the slides and then in the inspector I’ll chose the slide animations and I’ll find the Dissolve transition. That’ll give us a smoother transition between each event.

And next, I want to add another slide to my presentation. You could add these slides anywhere in your presentation but I’m going to create a title slide. I’ll drag in some artwork I found on the NASA website. Again, remember these slides are very high resolution so if you are adding images, you want to try to find great images that are also high resolution.

I’m just going to adjust the layout with some image masks here so it fits on my slide. I’ll resize it to fill here. I’ll leave a spot at the bottom to add some text. And we’ll give some instructions to our readers, “Touch to advance through timeline.”

OK, I’ll make a few little adjustments here to make it all fit. Great, so now this will be the first slide readers see when they arrive at the presentation. And finally, let me add one more dissolve transition. I want to add a longer transition that takes three seconds so that I will go nice and slow from our title slide into that first view of our timeline.

I’m going to save this and now we have a Keynote presentation saved to our Desktop along with the other files.

And then finally, I am going to export an Image Sequence. This is also through the File menu. This is very similar to the options that are available in the Keynote export. I’m also going to choose the iPad Retina Display resolution for these images but instead of the interactive Keynote presentation we’re just going to create a series of high resolution image files. In this case PNG image files, which is a good format for eBooks. OK, we’re done!

I’ll go ahead and close down Timeline 3D and now you can see that we have four files on our Desktop. A “NASA” iBooks Author widget, a “3DTimeline” movie, a Keynote slideshow called “Timeline,” and a folder of high resolution PNG files called “NASA Images.”

So, we’ve created all the resources for our eBook. Now I’m going to launch iBooks Author and we’ll add all of these to our NASA eBook.

Here is our book. It is very simple. It has four pages with some content I pulled off the NASA website and the steps for each of these timeline types is the same. We’re going to drag it from the Desktop into our book. There it is. Now, I’m going to change some of the styling for how it looks in our book. I don’t need the captions so I’m going to turn that off. Then I’m going to change the name of the widget to “Timeline Widget” and then finally I just need to resize and position the widget so that it looks great in my book. Like that.

So now we have the interactive timeline widget in our eBook. It’s simple!

OK, let’s go to the next page. We’re going to add the animated movie that we created. It’s the same steps. We’ll drag it from the Desktop, drop it in our book… I’m going to hide the caption because I don’t need a caption in this case. I’m going to change the title to “Timeline Movie” and then I’ll just position it and resize it so that it looks good on my page.

But you’ll notice here for the movie, it’s black. That’s because our movie fades in from a black beginning. So I’m going to choose a poster frame here so that reader know what they are going to get when they click the play button. And now we have a movie embedded into our eBook. When readers touch this play button it will play and they can expand it to the full screen if they want to.

Let’s go to the next page and now we’re going to add that Keynote slideshow. Same steps. We’ll drag it from the Desktop, drop it where we want it in our book. Then I’ll restyle it and resize it so that it looks just like I’d like in the eBook.

Finally, I’m going to add one more page to my book which is going to have a full screen image from our timeline. So let me go over here and add a new page to our book. I’m just going to add a blank page that doesn’t have any content in it yet. And I’ll drag in that high resolution PNG file from that folder of images we created and I’ll resize it.

In my case here I want this to fill up the entire blank page but you could certainly make smaller images and integrate them into your text. I’m going to add some text on top of my image that says “Made with Timeline 3D.” I’ll set the color and style of this text too. I’ll move the text into place and I’d this to be italic so I’ll make it italic and let’s make it bold too. There we go!

Now we have our eBook with our embedded timelines. We embedded our timeline as an interactive widget, as an animated move, as a high-resolution slideshow, and we made that last page of our eBook a full-page high-resolution image from our slideshow.


Now that we’ve created this great ebook iBooks Author will allow us to preview it on the iPad, publish it to our website, or sell it on the iBookstore. I know that you are going to enjoy, creating great content with iBooks Author along with Timeline 3D and I know your readers are going to enjoy having these beautiful interactive timelines right within their books.

If you create something great with these tools, please tell me about it. I look forward to seeing what everybody comes up with. Thank you!