Official website for iCreate - the creative magazine for Mac users


Sep 22, 2013

iBooks Author tutorial: Add HTML 5 animations to your iBooks

by Freddie Harrison

Learn how to create HTML5 animations on your Mac with Hype and add those to your next iBooks Author project with our super-simple, step-by-step guide.

iBooks Author - Add HTML5 animations - FeaturediBooks Author - Add HTML5 animations - SidebariBooks Author gives you the tools to create beautiful, interactive iBooks for iBooks 3 on your iPad without needing any technical knowledge, just a desire to create. For those who know their way around the world of HTML code, however, the ability to add HTML elements to your iBooks Author projects opens up an exciting set of options. Better still, you don’t even need to know how to code thanks to another Mac App Store star, Hype. Hype (£34.99/$49.99) might be a little on the pricey side, but using an intuitive interface it will allow you to instantly create HTML5 animations without typing a line of code. Combined with iBooks Author, Hype can allow you to quickly add HTML elements to your interactive books with some stunning results.

iBooks Author - Add HTML5 animations - Step-by-Step

iBooks Author - Add HTML5 animations - Step 1

Step 1: Hype an image

Start by firing up Hype and head to Insert>Image. Select one from the media browser (which conveniently sorts your files like iPhoto does) and add.

iBooks Author - Add HTML5 animations - Step 2

Step 2: Create a fade

In the Images window, drag the Opacity slider to 0% as we want the image to slowly fade in to the animation. Ensure the Timeline marker is also at the beginning.

iBooks Author - Add HTML5 animations - Step 3

Step 3: Push the button

To start recording your animations, tap the red record button here – don’t worry, you don’t have to do anything instantly, so take your time!

iBooks Author - Add HTML5 animations - Step 4

Step 4: Drag the slider

Drag the Timeline marker over to the right to advance your animation by a number of seconds. This will set how long the first transition in your animation lasts for.

iBooks Author - Add HTML5 animations - Step 5

Step 5: Up the opacity

To complete the fade in effect, drag the Opacity slider back to 100% – this will set the image to fade in over the period of time you set in step four.

iBooks Author - Add HTML5 animations - Step 6

Step 6: Repeat and export

Repeat the process above, adding in extra movements, fades and images. Then finish with File>Export as HTML5>Dashboard/iBooks Author Widget.

iBooks Author - Add HTML5 animations - Step 7

Step 7: Add a Widget

Open up your iBooks Author project and, on the page where you want your HTML5 animation to be inserted, click on Widgets>HTML, then resize its box to fit.

iBooks Author - Add HTML5 animations - Step 8

Step 8: Find the file

In the HTML Widget’s Inspector window, hit Choose and select the file you saved in Hype from the Open dialog that appears – it should be a .wdgt file.

iBooks Author - Add HTML5 animations - Step 9

Step 9: Test the results

To check everything’s working properly, hook up your iPad, open iBooks then hit Preview in iBooks Author to send across a draft copy of your book for testing.

(Click on the image below to zoom in and view the annotations)

 iBooks Author - Add-HTML5-animations-Annotated

  • Tell a Friend
  • Our Twitter provides the latest breaking apple news, reviews, tutorials and downloads online and our Facebook fan page is the best place to communicate with other iCreate fans.