By
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)
