Adobe InDesign CS5 – Illustrated Unit H: Adding Interactivity and Exporting Documents

Upon completion of this unit, you should be able to: Objectives Upon completion of this unit, you should be able to: Create a document for the Web Create a hyperlink Create an animation Export a document as a Flash Player file Create a button Create a rollover

Objectives Export a document as an interactive Adobe PDF file Understand export options for the Web

Creating a Document for the Web Existing documents can be converted for the Web It is ideal to create a Web document from scratch in the New Document dialog box Allows you to choose Print or Web as the intended output for the document When you choose Web Some settings in the dialog box change to reflect the Web environment Current unit of measure and color mode

Creating a Document for the Web FIGURE H-1: New Document dialog box

Creating a Document for the Web FIGURE H-2: Viewing the Interactive workspace

Creating a Hyperlink Hyperlinks Make it possible to jump to other locations In the same document To other documents To Web sites Can appear as a rectangle or can be invisible Created using the Hyperlinks panel

Each hyperlinks requires a source and a destination Creating a Hyperlink Each hyperlinks requires a source and a destination Source: actual link that a user will click Can be text, a text frame, or a graphics frame Destination: place the source jumps to Hyperlinks Only active in InDesign documents exported as Adobe PDF or SWF files

Creating a Hyperlink FIGURE H-3: New Hyperlink dialog box

Creating a Hyperlink FIGURE H-4: Viewing the hyperlink

Creating a Hyperlink FIGURE H-5: Buddy Dog Humane Society Web site

Creating an Animation Animation Effect used to cause an object to move in a specific way (e.g., zoom in from the side or spin) Can add a lot of fun and visual interest to InDesign documents Created using the Animation panel Select the object that you wish to animate Choose a type of animation from the Preset menu on the panel

Creating an Animation You can choose: How many seconds the animation should last How many times it should occur The event that will cause it to occur

Creating an Animation FIGURE H-6: Choosing an animation preset

Creating an Animation FIGURE H-7: Preview panel

Exporting a Document as a Flash Player File Shockwave Flash (or SWF) Popular format for online animations and games Files are scalable and compact Makes them perfect for the Web Files can be viewed by anyone with Flash Player

Exporting a Document as a Flash Player File To export an InDesign document as an SWF file Choose Flash Player (SWF) in the Save as type list (Win) or Format list (Mac) in the Export dialog box Generate an HTML File To preview the SWF file in a browser window after exporting

Exporting a Document as a Flash Player File FIGURE H-8: Export SWF dialog box

Exporting a Document as a Flash Player File FIGURE H-9: Viewing the interactivity pointer

A button refers to an interactive, clickable item Creating a Button A button refers to an interactive, clickable item Becomes active when the document is exported as an interactive Portable Document Format (PDF) or SWF file A button can be made out of just about any object in InDesign Shape, placed image, or text

Creating a Button To create a new button Select the object Click the Convert to Button command on the Object menu Buttons panel opens, prompting you to choose an action and an event Event: required treatment of the button Action: what will happen as a result of the action

Creating a Button FIGURE H-10: Converting the apple to a button

Creating a Button FIGURE H-11: Defining the action for the event

When you create a button: Creating a Rollover When you create a button: You can change its appearance, or state, when an event takes place To define a new appearance: Select the button Click either [Rollover] or [Click] on the Buttons panel Make changes New appearance appears on the Buttons panel

Creating a Rollover Working with effects Preflight panel Ten effects can be applied to InDesign objects from the Object Effects menu More than one effect can be applied to an object at a time Preflight panel Use to check an open document for errors

Creating a Rollover FIGURE H-12: Selecting the [Rollover] appearance FIGURE H-13: Effects dialog box

Creating a Rollover FIGURE H-14: Viewing the drop shadow effect

Exporting a Document as an Adobe PDF File PDF, Portable Document Format File format used in Adobe Reader and Acrobat software programs Allows you to view documents created from other software programs and saved in PDF file format Without needing those programs installed Makes it easier for a large audience to view

Exporting a Document as an Adobe PDF File FIGURE H-15: Export to Interactive PDF dialog box

Exporting a Document as an Adobe PDF File FIGURE H-16: Viewing Apple button.pdf in Adobe Reader

Understanding Export Options for the Web Designers must: Create printed materials Translate materials for use on the Web InDesign Makes it easy to prepare Web-ready graphics and pages Can be exported for use in: Adobe Flash Adobe Dreamweaver Other HTML editors

Understanding Export Options for the Web InDesign documents can be exported for use on the Web as: JPEG (Joint Photographic Experts Group) Dreamweaver SWF (Shockwave Flash) FLA XML

Understanding Export Options for the Web FIGURE H-17: Viewing the exported file in Adobe Flash Professional CS5