chapter 7
DESCRIPTION
Chapter 7. Creating Complex Interactivity in an iPad Presentation. Rotating Page Orientation on an iPad. Image rotation on the iPad relies on the alternate layouts feature in InDesign. Rotating Page Orientation on an iPad. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/1.jpg)
Chapter 7
Creating Complex Interactivity in an iPad Presentation
![Page 2: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/2.jpg)
• Image rotation on the iPad relies on the alternate layouts feature in InDesign.
Rotating Page Orientation on an iPad
![Page 3: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/3.jpg)
• 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
![Page 4: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/4.jpg)
Create Alternate Layout dialog box
Rotating Page Orientation on an iPad
![Page 5: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/5.jpg)
• 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
![Page 6: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/6.jpg)
• 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
![Page 7: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/7.jpg)
Viewing the alternate layout
Alternate layout thumbnail
Rotating Page Orientation on an iPad
![Page 8: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/8.jpg)
• 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
![Page 9: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/9.jpg)
• 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
![Page 10: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/10.jpg)
Document Setup dialog box
Rotating Page Orientation on an iPad
![Page 11: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/11.jpg)
• The Liquid Page Rule options control how objects are sized or resized when copied between layouts.
Rotating Page Orientation on an iPad
![Page 12: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/12.jpg)
• 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
![Page 13: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/13.jpg)
• 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
![Page 14: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/14.jpg)
Alternate vertical layout
Rotating Page Orientation on an iPad
![Page 15: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/15.jpg)
Alternate vertical layout with scaled artwork
Rotating Page Orientation on an iPad
![Page 16: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/16.jpg)
• Two other classic interactions with the iPad are done with their fingers: there’s the “swipe” and the “pinch/split.”
Panning and Zooming Images
![Page 17: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/17.jpg)
Panning an image on the iPad
Panning and Zooming Images
![Page 18: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/18.jpg)
• 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
![Page 19: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/19.jpg)
Folio Overlays panel
Pan & Zoom feature
Panning and Zooming Images
![Page 20: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/20.jpg)
• 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
![Page 21: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/21.jpg)
Folio Overlays panel
Pan & Zoom feature
Pan & Zoom feature
Panning and Zooming Images
![Page 22: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/22.jpg)
• Object states can– create complex interactivity on a website.– be placed in multiples within a frame.
Using Object States for iPad Interactivity
![Page 23: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/23.jpg)
• 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
![Page 24: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/24.jpg)
Viewing the active object states in the landscapes layout
Five object states
Using Object States for iPad Interactivity
![Page 25: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/25.jpg)
• 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
![Page 26: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/26.jpg)
Scrollable Frame controls on the Folio Overlays panel
Creating a Scrollable Text Frame
![Page 27: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/27.jpg)
• 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
![Page 28: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/28.jpg)
• 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
![Page 29: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/29.jpg)
• 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
![Page 30: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/30.jpg)
• 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
![Page 31: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/31.jpg)
• 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
![Page 32: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/32.jpg)
Image sequence options on the Folio Overlays panel
Adding an Image Sequence
![Page 33: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/33.jpg)
• 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
![Page 34: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/34.jpg)
• 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
![Page 35: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/35.jpg)
Finger swiping the image sequence on the iPad
Adding an Image Sequence
![Page 36: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/36.jpg)
• 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
![Page 37: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/37.jpg)
• 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
![Page 38: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/38.jpg)
Web Content options on the Folio Overlays panel
Incorporating Web Content
![Page 39: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/39.jpg)
• 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
![Page 40: Chapter 7](https://reader036.vdocument.in/reader036/viewer/2022081604/56816774550346895ddc6696/html5/thumbnails/40.jpg)
Viewing the website in the frame
Incorporating Web Content