Chapter 7

Creating Complex Interactivity in an iPad Presentation

• Image rotation on the iPad relies on the alternate layouts feature in InDesign.

Rotating Page Orientation on an iPad

• When designing for the iPad, creating alternate layouts is almost always part of the process; you need one layout for vertical orientation of the iPad, and another for the horizontal layout.

Rotating Page Orientation on an iPad

Create Alternate Layout dialog box

Rotating Page Orientation on an iPad

• When you create an alternate layout based on a page that has artwork, all of the artwork on the base page is copied to the alternate layout.

Rotating Page Orientation on an iPad

• If you click the Link Stories check box, text frames from the original layout are linked to text frames in the alternate layout.

Rotating Page Orientation on an iPad

Viewing the alternate layout

Alternate layout thumbnail

Rotating Page Orientation on an iPad

• If you make changes to the text in the original layout, the text frame in the alternate layout will alert you that you can update the text in the frame on the alternate layout.

Rotating Page Orientation on an iPad

• If you do so, the changes you made to the text on the base layout will be reflected in the alternate layout.

• This feature can be very useful for maintaining consistency between layouts.

Rotating Page Orientation on an iPad

Document Setup dialog box

Rotating Page Orientation on an iPad

• The Liquid Page Rule options control how objects are sized or resized when copied between layouts.

Rotating Page Orientation on an iPad

• If the option is turned off, the artwork from the base layout is copied at the same size and with the same physical relationships – to the alternate layout.

Rotating Page Orientation on an iPad

• Once you create an alternate layout, you’re ready to create an article and add it to a folio for upload to the iPad.

• When the article is added to the folio, those alternate layouts are accessed when the iPad is held in a vertical or horizontal orientation.

Rotating Page Orientation on an iPad

Alternate vertical layout

Rotating Page Orientation on an iPad

Alternate vertical layout with scaled artwork

Rotating Page Orientation on an iPad

• Two other classic interactions with the iPad are done with their fingers: there’s the “swipe” and the “pinch/split.”

Panning and Zooming Images

Panning an image on the iPad

Panning and Zooming Images

• When you prepare an article in InDesign for the iPad, you need to specify images to pan and zoom by clicking the Pan & Zoom option on the Folio Overlays panel.

Panning and Zooming Images

Folio Overlays panel

Pan & Zoom feature

Panning and Zooming Images

• The Pan & Zoom option is only available when an image in a graphics frame is larger than the frame.

• In other words, the frame is cropping part of the image that is not seen.

Panning and Zooming Images

Folio Overlays panel

Pan & Zoom feature

Pan & Zoom feature

Panning and Zooming Images

• Object states can– create complex interactivity on a website.– be placed in multiples within a frame.

Using Object States for iPad Interactivity

• Object states can– have a different image in each state, and then

linked through thumbnail image buttons.– be used to make a slideshow for an iPad

presentation.

Using Object States for iPad Interactivity

Viewing the active object states in the landscapes layout

Five object states

Using Object States for iPad Interactivity

• With a scrollable frame, you can finger swipe as you read and the text scrolls so that you can continue reading.

• Other elements of the page – like the headline or a photo – remain stationary.

Creating a Scrollable Text Frame

Scrollable Frame controls on the Folio Overlays panel

Creating a Scrollable Text Frame

• An InDesign layout is created with frames into which you place images, illustrations, and text – text that can be selected and edited.

• The images and illustrations too can be edited: they can be enlarged, rotated, flipped, etc.

Creating a Scrollable Text Frame

• When an InDesign layout is added and uploaded as an article to a folio, the layout is essentially exported as a jpeg, which is what you see with the layout on the iPad.

Creating a Scrollable Text Frame

• When you export the file to InDesign, the “text” is actually an image file of text, an image that’s taller than the frame that contains it.

Creating a Scrollable Text Frame

• The Scrollable Frame option can be applied to any frame, not just a frame containing an image of text.

• Additionally, the frame can be set to scroll in more directions than just vertically.

• Click the Scroll Direction menu for more options.

Creating a Scrollable Text Frame

• An image sequence is one of the easiest options to apply and is really powerful when students use frames from a video as the image sequence.

Adding an Image Sequence

Image sequence options on the Folio Overlays panel

Adding an Image Sequence

• When the layout is uploaded to the iPad, finger swiping across the frame rapidly moves from one image to the next, both forward and reverse.

Adding an Image Sequence

• On the iPad, finger swiping the image sequence becomes like playing a movie forward and reverse, and making the movie move at the speed of your fingertips.

Adding an Image Sequence

Finger swiping the image sequence on the iPad

Adding an Image Sequence

• When creating an image sequence: size matters, both the size of the images in the sequence and the size of the frame that contains them.

• It is best to keep all images in a sequence the same size.

Adding an Image Sequence

• The Web Content option on the Folio Overlays panel allows you to use a frame in an InDesign layout as a window to a website.

• When the article is uploaded to the iPad, the website appears in that frame on the iPad screen.

Incorporating Web Content

Web Content options on the Folio Overlays panel

Incorporating Web Content

• The web page in the frame on the iPad screen is live and interactive.

• If you link to Google’s home page, you can do a Google search right there in your own layout in your own iPad presentation.

Incorporating Web Content

Viewing the website in the frame

Incorporating Web Content