News

How to add interactive widgets in iBooks Author

Let readers go hands-on with your iBook and explore multimedia widgets through touch.

Featured_Web

iBooks Author
Inci_Web
iBooks are the most tactile things you will encounter on a digital platform – they’re made for fingers. You can swipe through galleries and presentations, scroll up and down sidebars, play audio and video, rotate 3D models, and tap to open image pop-overs and zoom into parts of large photos. And it’s really easy to add these elements to your own iBook using the Widgets menu in iBooks Author.

All of the widgets are customisable too, whether it’s changing the shape and layout of an embedded video or setting the running order of photos inside your gallery. In the steps we’re going to run through the widgets with you, and in the annotation below you’ll find a little more detail on working with galleries – just click the image to make it bigger. You can download this example iBook from here, too.

Step-by-step: Create widgets in iBooks Author

1 Gallery

Click the Widgets button at the top to get started, then choose Gallery. Simply drag and drop a few images in from Finder – check the anno for more on setting up a Gallery.

Step 1_Web

2 Pop-Over

Now add a Pop-Over widget and drag an image onto it. There’s no mask for pop-overs, but instead double-click to reveal a text field – it can be as long or as short as you like.

Step 2_Web

3 Scrolling sidebar

Now add a Pop-Over widget and drag an image onto it. There’s no mask for pop-overs, but instead double-click to reveal a text field – it can be as long or as short as you like.

Step 3_Web

4 Media

If you drop an audio or video file onto a Media widget then it will adapt its structure accordingly, and also optimise the file for iBooks. Once exported, just tap or click to play.

Step 4_Web

5 Keynote

Your keynotes can be dragged and dropped in, too. In the widget’s Interaction settings, tick the top option to reduce its size and the bottom one to add slide playback controls.

Step 5_Web

6 Review

This is great for educational iBooks as it enables you to set a pop quiz. Type in the text (using the Interaction tab to add or remove answers) and tick the correct answer.

Step 6_Web

7 3D

Got a model that would suit your iBooks? Drag that in too, and choose your object rotation settings in the Interaction tab. You can even set it to auto-rotate when idle.

Step 7_Web

8 Interactive image 1

This is the fun one. Drag and drop your image, select Default View in the Interaction tab and then use the mask to set up the position of the image. Click Set View to finish.

Step 8_Web

9 Interactive image 2

Each annotation has its own mask; select ‘1. Lorem Ipsum’ and drag/zoom to a point of interest, then click Set View and add text. Add and remove annos with the +/- buttons.

Step 9_Web

In detail: Setting up a widget

Clic the image below to view it at full size.

Anno

×