Tài liệu InDesign CS5 Bible- P17 doc

Chapter 33: Using Hyperlinks and Creating Web Pages 755 Images pane In the Images pane, you choose how your images are converted to the Web’s GIF and JPEG for- mats, selecting options such as image quality and color palette: l Copy Images: Use this popup menu to determine how the InDesign document’s images are converted when copied to the folder you are saving your XHTML pages to. Your options are Original, which leaves them untouched (meaning that they won’t be converted into Web-compatible formats); Optimized, which converts them to the Web format speci- fied in the Image Conversion popup menu; and Link to Server Path, which does not copy the file but instead inserts an image link ( <IMG SRC> ) to the current location. l Formatted: Select this check box to export the images to reflect any modifications made to them in InDesign, such as cropping, transparency, or scaling. Otherwise, the raw source files are exported (under the assumption that you will manipulate them further in a Web editor or image editor). l Image Conversion: Use this popup menu to specify what format images are converted to: GIF, JPEG, or Automatic (which selects the best format on a case-by-case basis). l GIF Options: Use the Palette popup menu to choose the color palette for the image: Adaptive (No Dither), Web, System (Win), or System (Mac). For Web display, the first two are best; use the other two for pages meant to be shown on a specific platform, such as pages available only on an internal company Web site. Select the Interlace check box to speed up the initial screen display of the images while the page is loading, but note that this can slow down overall page loading, so you should use it only with very large images. l JPEG Options: Use the Image Quality popup menu to select the image quality and thus the amount of compression (greater compression means lower quality): Low, Medium, High, or Maximum. Use the Format Method popup menu to control how the image appears as it loads on the Web page: Baseline (all at one time) or Progressive. Note that choosing Progressive can slow down overall page loading, so you should use it only with very large images. Advanced pane In the Advanced pane, you set how text formatting is converted to the Web’s version of styles, called cascading style sheets, or CSS. The CSS options are the following: l Embedded CSS: This option lets you control how text formatting such as paragraph styles are handled in the CSS style list that a Web document uses to apply text formatting. Note that text that had styles applied in the InDesign layout will have the styles indicated using <p class> tags for paragraph styles and <span class> tags for character styles in the exported Web page. You have two options: 46_607169-ch33.indd 75546_607169-ch33.indd 755 4/22/10 10:10 PM4/22/10 10:10 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part VIII: Multimedia Fundamentals 756 l Include Style Definitions: If selected, this option creates CSS style definitions in the exported files that include the specific fonts and sizes used in the InDesign layout. This can be dangerous if you use many fonts that aren’t available in Web browsers, because unless the CSS style is changed to use Web-standard fonts, browsers substi- tute fonts of their choosing for these print-oriented fonts. Of course, by including these fonts in the CSS, the Web designer can easily and consistently replace print- oriented fonts with Web-oriented ones in a Web-editing program. l Preserve Local Overrides: If selected, this option preserves local formatting, such as the use of character styles and font styles such as italics, in the exported XHTML file. The Web designer should look out for the <span class> tags that result to ensure they don’t cause issues for the final Web page’s display. l No CSS: This ignores style information in the InDesign file, thus placing just simple <p> tags at each paragraph and stripping out any <span> tags. Essentially, you get unformat- ted text. l External CSS: This option adds a <link href="name" rel="stylesheet" type="text/css"> tag in the <head> section of the exported file, using the style name specified in the field below the External CSS radio button. (Don’t forge the .css file name extension!) This means that after someone creates the specified CSS style file, the document knows what formatting to apply to the text. (Text that had styles applied has the styles indicated using <p class> tags for paragraph styles and <span class> tags for character styles.) External CSS style files ensure consistency across multiple Web pages, all of which can call on the same style file. But note that InDesign does not create a style file for you based on your InDesign document’s formatting — all style definitions must be done in your Web-editing software. New Feature The Embedded CSS option in InDesign CS5 replaces the previous version’s Empty CSS Declarations option, giv- ing you the new capabilities to export the InDesign style settings to the CSS file and to preserve local format- ting such as italics applied to text. n Tip Fonts generally safe to use for Web pages, due to widespread support for them by popular browsers, are the following TrueType and OpenType fonts: Arial, Courier New, Georgia, Monaco, Tahoma, Times New Roman, and Verdana. n The Advanced pane also lets you specify whether InDesign inserts a <script type="text/ javascript" src="name.js"></script> tag in the <head> section of the exported file, using the script name specified in the field below the Link to External JavaScript check box, which must be selected for this to work. (Don’t forget the .js file name extension!) You must create your JavaScript elsewhere. After you’ve adjusted the XHTML Export Options dialog box’s settings as desired, click Export to create the XHTML file. 46_607169-ch33.indd 75646_607169-ch33.indd 756 4/22/10 10:10 PM4/22/10 10:10 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 33: Using Hyperlinks and Creating Web Pages 757 Summary InDesign lets you create hyperlinks and anchors within your documents — to Web addresses, pages, files, and specific text selections in your InDesign document, as well as to pages and text in other InDesign documents that are then clickable from a PDF file created from your InDesign file. InDesign can export layouts or selected objects to the Web’s XHTML format, converting graphics to Web-compatible versions and optionally including style definitions from the InDesign layout. However, these exported files make no attempt to replicate the layout. Instead, InDesign ensures that the Web designer has the latest versions of all the document’s contents in a format that the designer can work on directly using a Web editor such as Adobe Dreamweaver. 46_607169-ch33.indd 75746_607169-ch33.indd 757 4/22/10 10:10 PM4/22/10 10:10 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 46_607169-ch33.indd 75846_607169-ch33.indd 758 4/22/10 10:10 PM4/22/10 10:10 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 759 CHAPTER Using Interactive Media and Creating PDF Documents IN THIS CHAPTER Creating bookmarks Adding buttons and actions Using page transitions Working with audio and video objects Previewing interactive features Creating interactive PDFs and e-books I n most respects, a document is a document is a document, but in today’s electronic world, documents have evolved to include more than the text and graphics that have comprised documents for centuries. Not only can you print documents the traditional way, but also you can deliver them electronically as files in the Web’s HTML format, as Adobe Portable Document Format (PDF) files and e-book files, and as Flash animation files. That electronic delivery format permits a degree of interactivity never possi- ble in printed documents, including hyperlinks, automated actions, and the use of audio and video objects. You create interactive documents — also called rich media documents and multimedia documents — just as you create print documents. InDesign’s interactive functions work with those traditional capabilities; there’s no spe- cial, interactive mode to work under. InDesign’s ability to export in these various rich media formats does raise some key questions as you create your multimedia documents. Theoretically, you could design a document to support all of these formats, but the reality is that not all functions work in all media: The fancy page-transition effects, for example, appear only in Flash and full-screen-view PDF files, whereas support for audio and video formats varies widely across the supported mul- timedia formats. So, it’s more likely you will have one or two formats in mind as you create a document, and you’ll use just the capabilities available in them. Regardless of what specific multimedia files you intend to create, the build- ing blocks are common across most of them. For example, most of the sup- ported multimedia formats can take advantage of hyperlinks as well as some button capabilities. Button-based actions work in interactive PDF, e-book, and Flash files. 47_607169-ch34.indd 75947_607169-ch34.indd 759 4/22/10 8:07 PM4/22/10 8:07 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part VIII: Multimedia Fundamentals 760 This chapter goes through the interactive building-block functions first: bookmarks, buttons and actions, and audio and video file usage. Then I explain the issues in exporting to interactive PDF — the most commonly used interactive document format — and e-book files. Cross-Reference Chapter 33 explains how to create and work with hyperlinks, as well as how to export files to the Web’s HTML format. Chapter 35 explains how to create animations within InDesign for use in Adobe Flash files, as well as how to export Flash files. n Creating Bookmarks Bookmarks are an indexing mechanism used in Adobe PDF files. They typically act like tables of contents, letting you view the organization of a document through a set of clickable headings. Figure 34.1 shows an example file viewed in Adobe Acrobat Professional. FIGURE 34.1 An example PDF document with bookmarks (at left) 47_607169-ch34.indd 76047_607169-ch34.indd 760 4/22/10 8:07 PM4/22/10 8:07 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 34: Using Interactive Media and Creating PDF Documents 761 InDesign has two ways to create bookmark entries. One is simply to create a table of contents using the standard InDesign Table-of-Contents tool. (Be sure that the Create PDF Bookmarks option is selected in the Table of Contents dialog box.) The other is to specify bookmarks to spe- cific pages, objects, and/or text using the Bookmarks panel. Figure 34.2 shows the Bookmarks panel (choose Window ➪ Interactive ➪ Bookmarks) and its flyout menu. FIGURE 34.2 The Bookmarks panel and its flyout menu Note The Bookmarks panel includes any TOC entries in your document if the Create PDF Bookmarks option was selected in the Table of Contents dialog box. Chapter 27 covers the table of contents feature. n Using the Bookmarks panel To create your own bookmark entries — either instead of or in addition to having InDesign use the table of contents — select what you want the bookmark to refer to (what appears on-screen in the PDF file when a user clicks the bookmark in Acrobat or Adobe Reader). This can be a text selection or an object (frame or line); if nothing is selected, the bookmark is to the current page. Then choose New Bookmark from the Bookmarks panel’s flyout menu, or click the Add Bookmarks iconic button — the page icon — at the bottom of the panel. After you create the bookmark, use the Rename Bookmark menu option to give it a meaningful name; this is the name that appears in the Bookmarks pane in Acrobat or Adobe Reader. If you want a bookmark to be a subentry of another bookmark — the equivalent to a second-level or third-level headline in a table of contents — make sure that, before you create the bookmark, you select a bookmark in the Bookmarks panel. Any new bookmark is made a child of the selected bookmark. The other Bookmarks panel flyout menu options are straightforward: l Choose Delete Bookmark to delete any bookmarks selected in the panel. (You can also click the Delete Bookmarks iconic button — the trash can icon — at the bottom of the panel.) 47_607169-ch34.indd 76147_607169-ch34.indd 761 4/22/10 8:07 PM4/22/10 8:07 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part VIII: Multimedia Fundamentals 762 l Choose Go to Selected Bookmark to jump to that page in your InDesign document. An easier way is to simply double-click the bookmark entry in the pane. l Choose Sort Benchmarks to sort benchmark subentries — this alphabetizes second-level, third-level, and other page-based subentries, and it sorts in order of appearance on the page any text- and/or object-based entries. It does not sort the top-level bookmarks, which appear in sequential order from the beginning of the document. However you create your bookmarks, InDesign places them automatically in interactive PDF files when you export to that format, as described later in this chapter. If you export to print (static) PDF format, you have to make sure the Bookmarks check box is selected in the General pane’s Include section in the PDF Export dialog box. (Chapter 32 covers print PDF export options in detail.) Bookmarks: What works where When using bookmarks, keep the following usage limits in mind for your intended output format: l Web pages: Bookmarks are converted into text anchors ( <a name> HTML tags). l PDF files: All bookmarks are retained, though for print PDF files you have to tell InDesign to retain the bookmarks while exporting. l E-book files: No bookmarks added through the Bookmarks panel are retained, though you can have InDesign export bookmarks into the e-book file from the document’s TOC. l Flash files: No bookmarks are retained. Creating Buttons and Actions One underused feature of the interactive PDF format is the ability to set actions. Most people sim- ply create PDF files that are on-screen versions of the print document — static representations — but PDF files can include forms, buttons, and other interactive elements. One reason for the underuse of actions is that few tools let you create the placeholder items for them, and adding them in Acrobat Standard or Acrobat Professional is awkward; they really work best when they’re created in the program that creates the whole document. InDesign addresses this reality with its support for interactive features. Note These buttons and actions also work in Flash files, which InDesign also lets you create (see Chapter 35). n Creating buttons In InDesign, you use the Buttons panel to create buttons and other objects that have actions associ- ated with them. 47_607169-ch34.indd 76247_607169-ch34.indd 762 4/22/10 8:07 PM4/22/10 8:07 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 34: Using Interactive Media and Creating PDF Documents 763 The first thing you do is draw your button using any InDesign frame, shape, line, or path tools. Even a text frame can be a button, though a text selection cannot. (Don’t let the term button fool you: You’re not limited to something that looks like a traditional button.) Select the object and choose Object ➪ Interactive ➪ Convert to Button to turn the object into a button. The Buttons panel appears. You can also select the object and click the Convert to Button iconic button at the bottom of the Buttons panel. You can convert a button to a regular object the same way, removing all associated states and actions: Select the button and then either choose Object ➪ Interactive ➪ Convert to Object or click the Convert to Object iconic button at the bottom of the Buttons panel. Be sure to add a name for the button in the Name field of the Buttons panel; InDesign puts in a default name such as Button 1, but that kind of generic name is hardly going to help you remem- ber what that button is if you need to work on it later. Tip InDesign comes with a library of buttons you can use instead of having to create your own. Just choose Sample Buttons from the Buttons panel’s flyout menu to open the Sample Buttons library file. (Choose Window ➪ Interactive ➪ Buttons to open the panel.) Then just drag the desired buttons from that library to your layout. Close the library when done. (Chapter 7 covers libraries in detail.) n Figure 34.3 shows the Buttons panel and its flyout menu, as well as a button created from a graphic. Note the button icon at the lower right of the graphic frame; InDesign places this non- printing indicator automatically so that you know what objects are buttons. FIGURE 34.3 A sample button (left), the Buttons panel, and its flyout menu. The button is in its default [Normal] state. Lower right: The bottom of the Buttons panel changes slightly when you select an object that is not a button. Preview Spread Convert Button to Object Delete State and Its Content Convert Object to Button 47_607169-ch34.indd 76347_607169-ch34.indd 763 4/22/10 8:07 PM4/22/10 8:07 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part VIII: Multimedia Fundamentals 764 Creating button states Buttons work by invoking different states, or appearances, based on what the user is doing with them. Each button has three possible state appearances: [Normal], [Rollover], and [Click]: l The [Normal] state is added automatically when you create a button — it’s how the but- ton appears when the user’s mouse is not over it or hasn’t clicked it. In other words, it’s what shows when the user has done nothing other than display the page. l The [Rollover] state determines what happens when a user passes the mouse over the but- ton. Typically, you want a visual change to occur so that the user realizes that the object is in fact a button. l The [Click] state determines what happens when a user clicks the button. Here, you would typically have a visual indication that the button was in fact clicked. To determine the button appearance for any state, simply select the button and the desired state in the Buttons panel, and then make your modifications using InDesign’s standard tools. For exam- ple, for the [Rollover] state in Figure 34.3, I used the Swatches panel to change the button’s color. You could do much more than that, such as change a frame’s contents, shape, and as many other attributes as desired. You can also use InDesign’s standard methods to place content into the but- tons (such as choosing File ➪ Place or pressing Ô+D or Ctrl+D, or choosing Edit ➪ Paste Into or pressing Option+Ô+V or Ctrl+Alt+V). New Feature InDesign CS5 has two new options in the Buttons panel. One is the Preview Spread iconic button that opens the Preview panel, which shows you a preview of the current spread to test out buttons and other interactive functions before exporting your interactive PDF or Flash file. (The Preview panel is covered later in this chap- ter.) The other is the Hidden Until Triggered check box, which prevents the button from appearing until it is triggered, such as if it is clicked or rolled over. n Setting button actions There are six types of mouse-related conditions you can use as triggers for button actions. Even though at first they may seem related, these actions have nothing directly to do with states; you can have only one state yet have all six triggers invoke actions. You associate actions to these triggers in the Event popup menu. (If no action is associated to a trigger, that trigger is inactive.) The triggers in the Event popup menu are as follows: l On Release: Here, you can set what actions occur when a user releases the mouse after clicking the button. Typically, you want the button to do nothing in this case; if so, you simply set no action. l On Click: Here, you can set what actions occur when a user clicks the button. l On Roll Over: Here, you can set what actions occur when a user’s mouse moves within the button’s boundaries. 47_607169-ch34.indd 76447_607169-ch34.indd 764 4/22/10 8:07 PM4/22/10 8:07 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... about just print documents For several versions, InDesign has been moving away from its print-only roots to embrace electronic media such as PDF files InDesign CS5 takes this progression to the next level by not only enhancing InDesign s Web-export and interactive-document capabilities, as covered in Chapters 33 and 34, but adding a whole new set of capabilities for creating animations in InDesign that... and Adobe Reader InDesign CS5 fixes many of those issues, and you should get reliable playback when using version 9 or later of Acrobat and Reader However, to support QuickTime, AVI, AIFF, and WAV files, InDesign places the media into a compatibility-mode layer in the PDF files, which may still result in playback issues Therefore, it’s best not to use these older formats InDesign CS5 includes the Adobe... section, you can select the Include InDesign TOC Entries check box to have a TOC created in the eBook based on the TOC created in InDesign (see Chapter 27), as well as specify the TOC style to use for the generated TOC Another option, available only if Include InDesign TOC Entries is selected, is Suppress Automatic Entries for Documents If selected, this option uses only the InDesign TOC entries, stripping... and Flash files InDesign CS5 now lets you place Flash video and MP3 audio files, and its exported interactive documents more reliably play back files using Flash video, Flash animation, and MP3 files than those using other supported formats The new Media panel lets you control how these media files appear in the exported document, and the new Preview panel lets you see how your exported document works... sound files in your InDesign document to allow playback in interactive documents (After you’ve placed the file, you can size it like any other placed graphic: You’re essentially sizing the window in which the video or sound plays.) InDesign has several limits in what kind of video and audio files it can import, as well as how those files can be used in exported files: l Video: InDesign can place Flash... create in InDesign CS5 is the limit of what the SWF file can present SWF files are playable by the Adobe Flash Player, either on a computer or via a Web browser l An FLA file is the default file format that Adobe Flash Professional CS5 uses for its projects It can contain button actions, hyperlinks, and object states created in InDesign, but not animations In the exported FLA file, all the supported InDesign. .. PDFs Most of what you need to do to export interactive PDF files is the same as for regular print documents The biggest difference is that there are several options in the Export Adobe PDF dialog box specific to interactive documents that you should use Cross-Reference Chapter 32 covers how to export InDesign documents to PDF files for print usage n To start your export, choose File ➪ Export or press Ô+E... what page transitions are used in the exported PDF if displayed in full-screen mode in Acrobat or Reader If you select From Document, whatever page transitions specified in the InDesign document are used; otherwise, the selected page transition is used, overriding any set in InDesign l Buttons and Media: This section lets you control how buttons, button actions, and media files are exported By default,... Place a Video from a URL Place a Video or Audio File Set Interactive PDF Export Options New Feature The Media panel in InDesign CS5 replaces the Movie Options and Sound Options dialog boxes in previous versions of InDesign n 768 Chapter 34: Using Interactive Media and Creating PDF Documents Common options in the Media panel are the following: l The Place a Video from a URL iconic button, if clicked,... Point in the Options popup menu in that panel and the desired navigation point from the Point popup menu that then appears) Chapter 34: Using Interactive Media and Creating PDF Documents Previewing Interactive Documents InDesign CS5 has a new panel called Preview that lets you test out your interactive features before exporting your layout to interactive PDF or Flash formats You access the panel by choosing . InDesign lets you create hyperlinks and anchors within your documents — to Web addresses, pages, files, and specific text selections in your InDesign document,. as to pages and text in other InDesign documents that are then clickable from a PDF file created from your InDesign file. InDesign can export layouts or