Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding an interactive image

From: iBooks Author Essential Training

Video: Adding an interactive image

Now let's add an interactive image into our Explore California Travel Guide. If you're following along, I'm on page 30 in the Nature Watch section. First, let's begin by making a little room for our widget. We'll get rid of this image that we added earlier by simply clicking on the image and then hitting the Delete key on our keyboard. That will get rid of the image altogether. Next, let's add our widget. To do this, go up to your Toolbar and click on the Widget dropdown menu and select Interactive Image. An Interactive Image Widget object appears on our page and our Widget Inspector is automatically opened for us.

Adding an interactive image

Now let's add an interactive image into our Explore California Travel Guide. If you're following along, I'm on page 30 in the Nature Watch section. First, let's begin by making a little room for our widget. We'll get rid of this image that we added earlier by simply clicking on the image and then hitting the Delete key on our keyboard. That will get rid of the image altogether. Next, let's add our widget. To do this, go up to your Toolbar and click on the Widget dropdown menu and select Interactive Image. An Interactive Image Widget object appears on our page and our Widget Inspector is automatically opened for us.

We can then change the object to a Floating object and simply drag it into place using our alignment guides to help us get the alignment correct. Next, we'll go ahead and add our image. I've included a folder called Interactive Image files in the Chapter 10 exercise files. And in there, you should find an image called chiton.jpg. Go ahead and take that image and simply drag it and drop it directly on to our object. We can then click back inside of iBooks Author and begin customizing our widget. The first thing we want to look at is over here on the Widget Inspector.

Let's go ahead and check the box that says Show Transport Controls. Now, the Transport Controls are down here at the bottom and they allow our users to be able to easily navigate among the various different views of our document. It's a great way to work, so I like leaving this option this available to my users. The next option in our Widget Inspector is the ability to show descriptions in a sidebar. Now, right now we've got the view set in the default view which has these small text bubbles that are linking to the image. When we check the box that says Show descriptions in the sidebar, the descriptions that were in the bubbles are now appearing in this sidebar.

This is a nice effect in a lot of different layouts. However, in my layout, I'm going to go ahead and leave this option unset and use the Default view. And speaking of views, let's go ahead and turn our attention to the views next. Then let's start with the Default view. Go ahead and click one time on the Default view in the View section of the Widget Inspector. And then let's adjust the zoom of our image using the heads-up display that appears here on screen. We can simply drag the slider to zoom our image in or out. I'm going to go ahead and set my image zoom down to about 25%.

When I get the image set the way that I wanted, go ahead and click the blue button that says Set View. This locks the view into place. Next, we'll go and do the same thing for the other points of interest. We'll go ahead and select the first view, adjust the slider to the appropriate level of zoom, we can even click inside the image and drag around until we get the image centered exactly where we want it. You can grab the text bubbles and move those to a desired location, and you can grab the end of the line so that you can point it to a particular point on the image that you want to highlight.

Once you get everything locked in place, go ahead and click the Set View button in your heads-up display. Then go ahead and change the text starting with the Title. Go ahead and triple-click on the text to select it, and we'll name this object The Fuzzy Chiton. We'll next edit the Description by triple- clicking on the text there and type in a description. I'm going to type in the Fuzzy Chiton gets its name from the tuffs of hair that grow around the outer edges of its body. Once you get the text entered in, you can then apply styling to the text if you'd like.

I'm going to go ahead and triple- click on my text then let's go ahead and minimize the size of our window and open up our Style sidebar. With our text selected, I'll go ahead and apply a character style of emphasis. This allows the text to show up a little bit cleaner. I don't like the wrapping of the text in the bottom of this window, so I'll deselect and then use the grabber handle to adjust the width of the text box. All right, our first view is fully set. Now, let's go ahead and deal with the second view. To do this, go ahead and click in the second view in the View section of the Widget Inspector, and once again, we'll zoom out our view, we'll move our text bubble to where we want it, and we'll adjust the pointer so that it's pointing at the object that we want to call attention to.

In this case, we want to call attention to the snail over here. I'll go ahead and drag my view around, keep making adjustments until I'm happy with the way things are looking. That's looking much better. All right, let's go ahead and lock that in by clicking the Set View button and then edit our text. Again, I'll triple-click on the title, and this time, I'll simply type in Snail. With the text description, I'll triple click on the text to select it and then enter in Small intertidal snails are at home under the water or on the land. Once you have your text typed in, go ahead and triple-click on the text again, and if you want to apply a character style, go ahead and do that now.

I'm going to apply the Emphasis style to my text. And once again, I'll deselect, and then adjust the width of my text box so that I get a nice wrapping of text. I once again click the Set View button, and now everything is all set for our second option. Let's go ahead and add a third view. To do this, I'm going to start by clicking on the Default view over my Views window to zoom out to the full area of my image. I'll then go ahead and click the Plus button at the bottom of the View section to create an additional view. I'll go ahead and move that view down to the bottom so it appears as the third view.

I'll then select the third view. I'm going to move my text first down here to this lower area and then grab the pointer and move it down here into this area. For this portion of the image, I'm going to have to zoom in quite a bit. So I'll zoom in, pan my image over, and what we want to see are these two small little crabs that are right here on the rock. They're really hard to see unless our image is zoomed in pretty far. So we will go ahead and zoom in, and move our thought bubble, and move the text level until it's in place. Now, we can go ahead, lock in our view by clicking the Set View button, and then edit our text. We'll begin with the Title.

So we will triple-click on the title, and this time we'll type in Glass Crabs. We'll then triple-click on the text description to select it, and we'll type in Glass Crabs are small intertidal crabs. Once again, we can apply the Character Style format by triple-clicking on the text description and then clicking on the Emphasis Style to apply it. Now that we have everything set the way that we want it, we can go ahead and close our Styles panel and re-maximize our window. Things are looking pretty good here, so we'll go back to the Default view and check and see how everything is looking. All right, our page is looking pretty good.

The next thing you'd want to do is click on each of the views and at the bottom of the Widget Inspector, click the dropdown menu under Accessibility Descriptions and add some more detailed information for the screen readers. So we'll go ahead and select Image for Default view under the Background setting, and we'll type in Photograph of a common intertidal zone in California. We can then select each of our different views and check the Label Title, Description, and Target, and make sure that the text appears for each of those as to what we want to have said for our screen readers.

Finally, we'll go ahead and click on the Layout tab of our Widget Inspector to improve a couple of more changes in our layout. We'll make sure our Title label is set to Figure so that matches all the other Figures throughout our Explore California Travel Guide. We can choose to add a caption if we would like. In this case, I'm going to go ahead and select the caption. I'm going to move my heads-up display and then triple-click on the text to select it and type in Common intertidal invertebrates found along the California Coast by our explorers. I'll also go ahead and edit my Figure title, by clicking on the title, selecting the text, and typing in a description for this image.

We'll type in Intertidal Invertebrates for the title. Finally, we'll go ahead and check the box for background color, and then with our object selected, we can go ahead and change the fill color to something that make it stand out a little bit more on our page. All right, there we go. Things are looking pretty good. When we deselect, we go out to the Default view and everything is set up for us. Now, when our users come to our page they'll be able to click on each of the different views and get detailed information about that view. The Interactive Image Widget is a great tool for adding a lot of detailed information about a particular image.

Show transcript

This video is part of

Image for iBooks Author Essential Training
iBooks Author Essential Training

89 video lessons · 20222 viewers

Chris Mattia
Author

 
Expand all | Collapse all
  1. 4m 48s
    1. Welcome
      48s
    2. Using the exercise files
      4m 0s
  2. 53m 58s
    1. Installing iBooks Author
      1m 47s
    2. Installing iBooks on an iPad
      1m 9s
    3. Creating a new document
      3m 25s
    4. Understanding the interface
      4m 48s
    5. Creating a book cover
      9m 26s
    6. Adding an intro video
      1m 48s
    7. Creating chapters
      8m 2s
    8. Creating sections
      3m 52s
    9. Creating pages
      2m 15s
    10. Adding visual interest
      4m 54s
    11. Customizing the table of contents
      5m 44s
    12. Creating a glossary
      2m 57s
    13. Previewing your work on an iPad
      3m 51s
  3. 27m 22s
    1. Understanding templates
      3m 18s
    2. Creating a blank layout
      3m 42s
    3. Modifying existing layouts
      5m 13s
    4. Creating a custom layout
      3m 57s
    5. Defining placeholder media
      1m 1s
    6. Defining placeholder text
      50s
    7. Adding auto-updating text
      1m 18s
    8. Creating a photo collage layout
      3m 25s
    9. Sharing a custom template
      1m 55s
    10. Creating a portrait-only book
      2m 43s
  4. 19m 25s
    1. Dragging and dropping plain text
      3m 16s
    2. Inserting text from Pages
      6m 51s
    3. Inserting text from Microsoft Word
      7m 11s
    4. Creating linked text boxes
      2m 7s
  5. 52m 13s
    1. Understanding how to format text
      2m 5s
    2. Formatting text
      8m 6s
    3. Creating lists
      5m 29s
    4. Creating custom styles
      9m 34s
    5. Controlling tabs
      5m 54s
    6. More on text control
      12m 37s
    7. Embedding equations with LaTeX
      3m 53s
    8. Embedding equations with MathType
      4m 35s
  6. 29m 14s
    1. Understanding objects
      7m 33s
    2. Adding objects
      2m 26s
    3. Manipulating objects on a page
      3m 24s
    4. Layering objects together
      1m 36s
    5. Changing an object's appearance
      7m 15s
    6. Adding titles, labels, captions, and descriptions
      5m 25s
    7. Adding accessibility text to objects
      1m 35s
  7. 21m 45s
    1. Adding images
      5m 33s
    2. Removing parts of photos with Instant Alpha
      3m 54s
    3. Cropping and masking images
      4m 0s
    4. Controlling image settings
      3m 0s
    5. Spanning an image across two pages
      5m 18s
  8. 16m 12s
    1. Understanding shapes
      2m 29s
    2. Adding shapes
      2m 29s
    3. Editing shapes
      3m 24s
    4. Drawing shapes
      3m 31s
    5. Creating a custom shape mask
      4m 19s
  9. 25m 57s
    1. Understanding tables
      2m 22s
    2. Creating tables
      2m 9s
    3. Adding and importing data into tables
      3m 3s
    4. Formatting table cells and data
      8m 37s
    5. Performing calculations
      3m 57s
    6. Using conditional formatting
      2m 52s
    7. Sorting table data
      1m 15s
    8. Adding a custom table description
      1m 42s
  10. 22m 33s
    1. Understanding charts
      2m 30s
    2. Adding charts
      3m 59s
    3. Editing chart data
      3m 51s
    4. Formatting charts
      5m 24s
    5. Changing the chart type
      5m 48s
    6. Adding chart descriptions
      1m 1s
  11. 45m 53s
    1. Understanding widgets
      4m 18s
    2. Creating an image gallery
      5m 18s
    3. Adding a movie
      4m 4s
    4. Adding a Keynote presentation
      5m 32s
    5. Adding a 3D object
      4m 24s
    6. Adding an interactive image
      7m 54s
    7. Adding custom HTML
      7m 57s
    8. Creating a scrolling sidebar
      3m 45s
    9. Creating a popover effect
      2m 41s
  12. 17m 4s
    1. Understanding review questions
      2m 26s
    2. Adding a review section
      2m 27s
    3. Creating multiple-choice questions
      7m 16s
    4. Creating matching questions
      4m 55s
  13. 27m 1s
    1. Preflighting on an iPad
      6m 21s
    2. Exporting a book in iBooks format
      2m 26s
    3. Exporting a book as a PDF
      2m 33s
    4. Exporting a book as a text document
      1m 49s
    5. Emailing a book
      2m 24s
    6. Getting ready to publish to the iBookstore
      4m 44s
    7. Publishing to the iBookstore
      6m 44s
  14. 32s
    1. Goodbye
      32s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed iBooks Author Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.