Adobe InDesign CS5 – Illustrated

Unit H:Adding Interactivity and Exporting

Documents

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

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

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

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 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 Optionsfor 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 Optionsfor 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 Optionsfor the Web

FIGURE H-17: Viewing the exported file in Adobe Flash Professional CS5