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