iBooks 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.
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.
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.
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!
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.
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.
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.
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.
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.
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)