From the course: iBooks Author Essential Training

Creating a popover effects - iBooks Author Tutorial

From the course: iBooks Author Essential Training

Start my 1-month free trial

Creating a popover effects

- Next, let's add a Pop-Over widget to our Explore California travel guide. If you're following along, I'm on page 22, which is in the Desert to Sea chapter. Let's go ahead and add the Pop-Over widget to our page by coming up to the toolbar and clicking on the Widgets menu and selecting Pop-Over from the drop-down menu. The Pop-Over widget appears inside of our page, and you'll notice it's automatically created as a floating object. Next let's go ahead and add the initial image for our widget. We'll come up to our Media browser, and then I've included an image called surfer in the 10_pictures folder. We'll go ahead and drag the surfer image directly onto the icon for the widget. Next, go ahead and drag the widget into place. We'll go ahead and align it here in the left-hand column. Next let's go ahead and prepare the Pop-Over widget. So double-click on the widget to open up the Pop-Over. The next thing you want to do is come down to the very bottom and grab the center control handle and drag it straight down to the bottom of the page. As the widget drags off the bottom of the page, you'll see that it automatically pops over to the right-hand side of the widget. Next we can grab the lower right-hand control handle, and we can stretch that out to a larger size. Now we're able to add text, shapes, or images. Let's go ahead and start off by adding another image. Let's add the surfer2 image by clicking and dragging it into place and dropping it in front of the text. We can then stretch that image out by grabbing the lower right-hand control handle and stretching it until it mostly fills the widget space. Next, we'll go ahead and add some text. I've included a file in the text files folder called Surfers_Point.rtf. Go ahead and select all the text in there and copy it to your clipboard. We'll then go back to iBooks Author and triple-click on the line of text in order to select it inside of the Pop-Over widget and then paste our text. Let's apply a little formatting by triple-clicking on the first line of text to select Surfer's Point - C Street and then go up to the style object inside of your toolbar and scroll down until you find the Heading 1. Next, let's make sure that our Pop-Over widget is set, so that it displays all the text. Right now, our users would have to scroll in order to read all of the text inside of the widget. But if we grab the center control handle at the bottom of the widget, we can stretch down until the widget has enough space for all the text. That's all there is. Now we can go ahead and deselect the widget. If you want to see how this widget reacts on your iPad, go ahead and plug your iPad in and come up and click the Preview button. And then you can test the widget out on your iPad to make sure that it's working as you expected.

Contents