80

Technique

InDesign CS4

Plug into the potential beyond print and put the easy into e-zine with Tony Harmers InDesign CS4 step-by-step
In this tutorial youll see how easy it is to create a digital publication in InDesign CS4. Ill guide you through how to set up a workspace and select the best transparency blend space for digital output, then create a document template with its own preferences to speed up your workow. Once the layout is ready, youll be able to start adding interactive assets such as buttons, hyperlinks and page transitions before exporting the publication to SWF for deployment in a web page. And if you want even more from your publication, youll learn what the limitations of the SWF export are and how you can export your InDesign layout to an XFL le, which can be opened in Flash for further development.

Digital publishing made easy

Tony Harmer An Adobe Certied Instructor holding over 40 certications, and chapter leader for the London InDesign User Group, Tonys fortnightly 4T podcast on Design Premium topics is available on iTunes and at his site, www. tonyharmer.co.uk

Time needed 1 to 2 hours Skills  Create a document template  Set document preferences Add page  transitions Add hyperlinks  Export to SWF 

01

Create a new document. InDesign CS4 has a range of common screen sizes in the Page Size drop-down menu, and we wont need Facing Pages selected. Choose 1024x768, then add six columns, gutter 14pt, margins of 36pt for the top, left and right, with 86pt for the bottom. Type the values exactly as you see them here and dont worry if they convert as you commit them.

Select Preferences>Units & Increments. InDesign doesnt have pixels as ruler units yet, but choosing points will do for the moment. Once youve made that change, click OK to close the dialog box.

02

Computer Arts March 2009

ART159.tut_indesign 80

26/1/09 3:42:51 pm

81

04

To make sure that objects containing transparency (Illustrator les and some PSD les, for example) are handled properly and to avoid unexpected colour shifts when creating output for screen, select Edit>Transparency Blend Space> Document RGB.

Although you can choose any font, those designed for screen display in your body copy will make it easier to read. Choose the Type tool and then select something appropriate (Arial, Helvetica or Verdana would be ideal) from the Character drop-down menu it will become the default font for this publication. You might also want to increase the leading slightly.

05

06

Now create your basic elements, such as master page items, guides, titles, dummy copy, type styles, graphics and frames for images to establish the layout. Add an empty layer and name it navigation. Save this document as a template, so any documents based on the template will be ready to go. Choose InDesign CS4 Template from the Save dialog and close the le.

Its really easy to switch between workspaces in CS4 with the handy button at the top right of the control strip. Choose Interactivity, as it will contain the panels we need for this project.

03

Choosing to create a new document from a template will launch Bridge. Locate your template le and double-click it, and a new untitled document is created in InDesign with all of the attributes and elements you set up earlier. Now you can get to work on your layout. The new smart guides make positioning and aligning even easier, so it shouldnt take too long!

07

08

With all of the content now placed, its time to start adding the interactive elements for output to Flash. Lock the layer (or layers) containing your content and make the navigation layer active by clicking on it. If you didnt create a navigation layer earlier, you could do that now.

Computer Arts March 2009

ART159.tut_indesign 81

26/1/09 3:42:56 pm

82 Technique

11 09
Select the arrows you just added and navigate through the spreads, placing copies on each page in the same location using Edit>Paste in Place. Delete the back arrow from the rst page and the forward arrow from the last. You could add a simple visual indicator for the current page, as shown.

10

There are ready-made Flash buttons in the Sample Buttons panel. Drag a back arrow and a forward arrow onto your layout these will already have actions attached to them. Make sure they arent overlapped by any objects using transparency or they wont work. So, a top layer is a good idea.

Hyperlinks that you intend to reuse are best set as destinations. They can then be easily applied to many sources. In the Hyperlinks panel menu, select New Hyperlink Destination, choose URL from the drop-down menu, give it a suitable name and enter the URL in the eld. Dont forget that you need to use absolute addresses (including http://, for example).

Once youve got a destination, all you need to do to apply it is select the object or text that you want your user to click on and pick up the destination from the URL eld in the Hyperlinks panel. You can change the appearance of hyperlinks by going to Hyperlink Destination Options in the panel menu. Hyperlinks arent exported if youre going to export to XFL.

12

13

The Page Transitions panel boasts a dozen or so page transitions with thumbnail previews that play when you move your cursor over them. Ive chosen Page Turn, and it can be applied to every page by selecting Apply to All Spreads from the panel menu.

How being Flash helps

It is now easier than ever for print designers to take their existing skills and move into digital. InDesign CS4 is bringing the tools and functionality you need and making it all easy enough to use with little or no knowledge of Flash, straight out of the box. If you know a bit of Flash, though, you can take things much further in terms of interactivity.

14

Now your publication is ready, its time to export it. Choose File>Export and select SWF in the dialog box. InDesign automatically converts high-resolution print assets to low-resolution web assets upon export to SWF or XFL, and colours are converted to RGB. If selected, a HTML le will be generated at the same time and that le should open in a browser as soon as its done.

Movies in your layout wont export, nor will some button actions that are designed for interactive PDF, such as Close, Exit, Go To Next/Previous View, Movie, Open File, Sound and View Zoom. If you need any of these things, export your publication to the XFL format. It can then worked on in Flash.

15

Computer Arts March 2009

www.computerarts.co.uk

ART159.tut_indesign 82

26/1/09 3:43:0 pm