1. Chapter 7 Creating Complex Interactivity in an iPad Presentation

2. Image rotation on the iPad relies on the alternate layouts feature in InDesign. Rotating Page Orientation on an iPad

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

4. Create Alternate Layout dialog box Rotating Page Orientation on an iPad

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

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

7. Viewing the alternate layout Alternate layout thumbnail Rotating Page Orientation on an iPad

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

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

10. Document Setup dialog box Rotating Page Orientation on an iPad

11. The Liquid Page Rule options control how objects are sized or resized when copied between layouts. Rotating Page Orientation on an iPad

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

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

14. Alternate vertical layout Rotating Page Orientation on an iPad

15. Alternate vertical layout with scaled artwork Rotating Page Orientation on an iPad

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

17. Panning an image on the iPad Panning and Zooming Images

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

19. Folio Overlays panel Pan & Zoom feature Panning and Zooming Images

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

21. Folio Overlays panel Pan & Zoom feature Panning and Zooming Images

22. Object states can – create complex interactivity on a website. – be placed in multiples within a frame. Using Object States for iPad Interactivity

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

24. Viewing the active object states in the landscapes layout Five object states Using Object States for iPad Interactivity

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

26. Scrollable Frame controls on the Folio Overlays panel Creating a Scrollable Text Frame

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

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

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

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

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

32. Image sequence options on the Folio Overlays panel Adding an Image Sequence

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

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

35. Finger swiping the image sequence on the iPad Adding an Image Sequence

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

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

38. Web Content options on the Folio Overlays panel Incorporating Web Content

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

40. Viewing the website in the frame Incorporating Web Content