INTERACTIVE PDF in InDesignCS3 March 5th s User Group Meeting in NJ, Mary J. Belthoff from doubleclick first,llc demonstrated many of the Interactive Features in InDesign. The sample art was a layout of a mock web site built in InDesign (buttons were created in photoshop). InDesign is a great tool to present your design and navigation before building HTML document in a web authoring program such as Dreamweaver. Any questions, please don t hesitate to contact - mjbelt@optonline.net. Table of Contents Set-up Document & Create Buttons... Create Buttons (building the navigational bar)... 3 Making Buttons Interactive (hyperlink destination)... 4 Making Buttons Interactive (create hyperlinks)... 5 Add movies and sound files... 6 Exporting as PDF... 7 *TOC is Interactive click away.
Set-up Document & Creating Buttons Create New Document (multi-pages) Open States & Hyperlink Panels Build All Repeated Elements on Master Page Utilize Button Tool START by Creating a New Document (deselect facing pages) 1) Include at least 7-8 Number of Pages (create content text, graphics, place movies, and sound files to local pages.) ) OPEN States & Hyperlinks PANELS (Window>Interactive...) Workspace (States & Hyperlink Panels) 3) Create All Repeated Graphic Elements on MASTER Page - Navigational Bar (home button, about button, etc.) - URL s - email address, etc. Building the Navigational Bar on Master Page. (i.e. home, about, etc.) 1) Select the BUTTON TOOL ) Draw Button Placeholder (notice button will be unnamed in STATES Panel) TIP - how does the button behave with these Three States: Up - when the mouse button is released after a click. Rollover - Button image changes as Mouse moves into the area. Down - When the mouse button is clicked (without being released). LABEL & CREATE ROLLOVER STATE (Only creating states for this exercise) Name: (LABEL button HOME) Click New State ICON - Creates New Rollover State
Create Buttons (building the navigational bar) Stay on Master Page Selecting Button States Place Content into Selected States Graphics created in photoshop Next Place button_art IN STATES PANEL (created in photoshop i.e. home.jpg & home_over.jpg) TIP: To Show Button Placeholder/Label Go to View>Show Frame Edges 1) With Button & UP State Selected In State Panel ) Click ICON Below to Place Content into Selected States. (other option: use fly-away menu on States Panel) 1 Place Content into Selected States 3) Select button_art in Dialog Box (i.e. home.jpg created in Photoshop) 3 1) With Button & ROLLOVER State Selected In State Panel ) Click ICON Below to Place Content into Selected States. (Repeat step 3) above - Select different graphic i.e. home_over.jpg) Place Content into Selected States 3
Making Buttons Interactive (hyperlink destination) Still on Master Page Open Hyperlink Panels Create Hyperlink Destination Now that you ve made you re Buttons look good. It s time to make them Interactive! 1) Select button on Master Page. ) Go to Hyperlinks Panel & Select New Hyperlink Destination in fly-away menu. 3) Select Page for Type of hyperlink. (read Note below on other types of hyperlinks) 4) Name your link i.e. Home - Page 1 where link points to with specific View Settings. (Repeat #4 for other buttons, article, contact, etc.) Note: To create a hyperlink to a to a page or to a text anchor (position in text) with specific view settings, you must first create a destination, and then create the hyperlink that points to that location. InDesign supports 3 kinds of hyperlink destinations: Document page - Page destination, specify the zoom setting of the page being jumped to. Text anchor - Text anchor is any selected text or insertion-point location in a document. (good example would be back to top) URL Destination - URL destination indicates - Uniform Resource Locator (world wide web address) such as a web page, a movie, or a PDF file. The name of a URL destination must be a valid URL address http://www.indesignusergroup.com/chapters/centralnj/ **Hyperlink destinations do not appear in the Hyperlinks panel; they appear in the Destination section of the New Hyperlink dialog box. 4
Making Buttons Interactive Creating Hyperlink Stay on Master Page Open Hyperlinks Panel Create Hyperink Page Text Anchor URL Creating Hyperlinks 1) Select button on Master Page. ) Go to Hyperlinks Panel & Select New Hyperlink in fly-away menu. 3) Name your hyperlink (i.e. Home Hyperlink) Type: Page (refer to pg. 4 for other types) Name: home (hyperlink destination created refer to pg. 4) Appearance: Make Invisible 3 TIP Other hyperlinks created using Type option in dialog box (text anchor, etc.). Page Link URL Link URL Link email 5
Add movies and sound files Create Content on Multi-Pages Place.QT, AVI and.swf files Place sound files (AIF or WAV) File Place>QT. SWF, AIF etc. You can add movies and sound clips to a document, or you can link to streaming video files on the Internet. Media clips cannot be played directly in the InDesign layout, they are played when you export the document to Adobe PDF, QuickTime 6.0 or later is required to work with movies in InDesign. Movie formats: QuickTime (QT), AVI, MPEG, and SWF movies, Sound formats: WAV, AIF, and AU sound clips. (InDesign supports only 8 or 16 bit WAV files that are not compressed) Keep track of media files in the LINKS PANEL. 6
Exporting as PDF Export to PDF Portable Document Format Export as Acrobat 6 or later Test your PDF in Acrobat Portable Document Format (PDF) versions to use with media files. *note the following limitations: Exporting to PDF 1.3/1.4 (Acrobat 4 & 5) SWF and MPEG movies aren t playable in the exported PDF document. Movies cannot be embedded. Sounds cannot be linked. Exporting to PDF 1.5 or later (Acrobat 6) QuickTime is specified as the preferred player when exporting to PDF. Exporting InDesign Document as a PDF will create the Interactive features displayed in Acrobat. Steps to follow: 1) File>Adobe PDF Preset>Define a new Preset or Select [Smallest File Size] (other option: File>Export) ) Check Off: Hyperlinks, Interactive Elements and Booksmarks 3) Check Interactive Elements - Multimedia - Link All. 4) View PDF in Acrobat. 7