Creating an interactive page flip (SWF) from Indesign CS4

Creating an interactive page flip web e-brochure using Indesign CS4

This blog is to show how you can export your indesign paged brochure/document into an interactive e-brochure to use on the web. Firstly you create your standard Indesign document with pages, then you click export. In the dialog box select “swf” as the save as file type definition. You are then prompted with another dialog box.

Which includes the following options:

Size (pixels)

Specify whether the SWF file is scaled by a percentage, fit to a monitor size you specify, or sized according to the width and height you specify.

Pages

Indicate whether all pages in the document are included, or specify a page range, such as 1-7, 9 to print pages 1 through 7 and 9.

Spreads

If this option is selected, each spread is treated as a single clip in the SWF file, regardless of how many pages appear in each spread. If this option is not selected, each page acts as a separate clip, like its own slide in a slideshow.

Rasterize Pages

This option converts all InDesign page items to bitmap. Selecting this option results in a larger SWF file, and page items may appear jagged when zoomed in on.

Generate HTML File

Select this option to generate an HTML page that plays back the SWF file. This option is especially useful for quickly previewing the SWF file in your web browser.

View SWF After Exporting

Select this option to play back the SWF file in your default web browser. This option is available only if you generate an HTML file.

Text

Specify how InDesign text is output. Choose InDesign Text To Flash Text to output searchable text that results in the smallest file size. Choose InDesign Text To Vector Paths to output the text as a series of smooth straight lines, like converting text to outlines. Choose InDesign Text To Raster Image to output the text in a bitmap image. Rasterized text may appear jagged when zoomed in on.

Interactivity

Specify which options are included in the exported SWF file: buttons, hyperlinks, page transitions, and interactive page curls. If Include Interactive Page Curl is selected, users playing the SWF file can drag a corner of the page to turn it, giving the appearance of turning the page in a real book.

Image Compression

Choose Auto to let InDesign determine the best quality for color and grayscale images. For most files, this option produces satisfactory results. Choosing JPEG is suitable for grayscale or color images. JPEG compression is lossy, which means that it removes image data and possibly reduces image quality; however, it attempts to reduce file size with a minimal loss of information. Because JPEG compression eliminates data, it can achieve much smaller files sizes. Choosing Lossless (Do Nothing) exports the JPEG file without lossy compression.

I normally click on these options:

Scale = 100%,  Pages = All,

Tick on Spreads,  Generate HTML File,   Indesign Text to Vector Paths, Include Buttons, Include Hyperlinks,  Include Interactive Page Curl,

Image Compression (Lossless (do nothing)), Curve Quality = High

SWF Dialog Box

Thats it, you just drag the html file onto your internet explorer and try it.

You can also use interactive buttons in your indesign document to export as a flash file (basic web page). This will be covered in my next blog.

Mark Jope is a Graphic Designer at London based printer PrintHouse Corporation.

If there is a query in regarding design and print please contact me here.

Tagged as: browser, CS4, e-brochure, export, Flash SWF file, indesign, interactive buttons, Interactive Page Curl, page flip, page transitions, Pages, Spreads, swf, web page