Using InDesign Export to Flash (XFL)

Export an InDesign document to XFL. Edit the resulting file in Flash Pro while preserving the visual appearance of the original.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Flash Professional CS4

• Try
• Buy

Adobe InDesign CS4

• Try
• Buy

Sample file

lrvid4093_fl.zip (ZIP, 84MB)

Prerequisite knowledge

Intermediate knowledge of layout and design using InDesign CS4

Using InDesign Export to Flash (XFL)

Using Adobe® InDesign® CS4, you cannot only lay out documents for print, but you can also create interactive Adobe Flash® documents destined for the web or mobile devices. In this tutorial, you will learn how to export InDesign CS4 files to Flash CS4 Professional.

Exporting InDesign CS4 files to XFL format

Flash supports XFL files, which are an archive file format that contains layout information and assets. To export an InDesign Document to an XFL file:

1. Open an InDesign document.
2. Choose File > Export. The Export dialog box opens.

   

   Figure 1: The Export dialog box
3. Choose Adobe Flash CS4 Pro (XFL) from the Format menu in the Export dialog box.
4. Enter the filename in the Save As box at the top of the dialog box.
5. Click Save. The Export Adobe Flash CS4 Professional XFL dialog box opens.

   

   Figure 2: The Export Adobe Flash CS4 Professional XFL dialog box
6. Choose a Scale of 100%.
7. Fit the document to a certain pixel width or specify the pixel dimensions to which you want to export.
8. Choose a range of pages. Alternatively, you can export all pages in the document.
9. Leave the Spreads checkbox selected and leave the Rasterize Pages checkbox deselected. Select Flatten Transparency.
10. Click the Text menu at the bottom of the dialog box. You have three options for exporting text. Since this document is headed to Flash, choose InDesign Text To Flash Text.
11. Click OK to close the Export Adobe Flash CS4 Professional XFL dialog box and export the XFL file.

Opening XFL files in Flash

Once you have exported your InDesign document as an XFL file, you can open the document in Flash. To open an XFL file:

1. In Flash, choose File > Open. When the Open dialog box appears, navigate to and select the XFL file. The XFL file opens on the Stage.
2. If necessary, zoom out to view the entire document. Choose View > Magnification > Fit In Window. The same layout from the InDesign document is preserved in Flash. (Instead of importing a native InDesign file, Flash uses the information from the XFL file to create a new, untitled FLA file.)

   

   Figure 3: Viewing the entire document
3. Look at the Library panel docked on the right side of the Flash window. The Library panel shows bitmap assets that were used in InDesign. Also notice that it has created movie clips for each of the pages you exported.

   

   Figure 4: The Library panel
4. Because Flash uses the XFL file to create a new FLA file, you need to save the new file. Choose File > Save As. When the Save As dialog box opens, give the file a name in the Save As text box. Click Save.

Adding Interactivity to the FLA file

Once you have saved the FLA file, you can add interactive elements in Flash, such as animations and ActionScript code. To add interactive elements:

1. Double-click the Stage to enter the Timeline for the spread movie clip.
2. Within the Timeline, text is still editable, just as it is in InDesign. To alter text, merely click on the text element with the Text tool to select it and make the desired changes.
3. You can also group text elements into single symbol instances, for animating later or simply to unite text blocks. To create a symbol out of one or more text elements, choose the Selection tool and Shift-click to select the text in the FLA file. Then, Choose Modify > Convert To Symbol.
4. When the Convert To Symbol dialog box opens, give the symbol a name. Choose Movie Clip for the symbol Type. Click OK.

Applying an animation to a movie clip

1. To apply an animation to the movie clip you just created, first put the movie clip on a separate layer. To move the movie clip to another layer, select it and choose Edit > Cut. The movie clip is removed from Layer 1.
2. Click the New Layer icon at the bottom of the Timeline panel.
3. Select the new layer in the Timeline panel. Give the new layer a descriptive name that relates to its content and function.

   

   Figure 5: Creating a new layer
4. Choose Edit > Paste In Place to paste the movie clip from the first layer into the new layer.
5. To apply a preset motion animation to the movie clip, choose Window > Motion Presets. The Motion Preset panel opens.
6. You can select from default presets or create and import custom presets from which to create your animation. Select your preset from the Motion Preset panel and click Apply.
7. Close the Motion Presets panel.
8. Extend the Timeline in Layer 1 to Frame 12 by selecting Frame 12 and pressing F5 on the keyboard or choosing Insert > Timeline > Frame. Flash automatically inserts the requisite number of frames to the Timeline.
9. Click and drag the playhead to preview the animation.

Adding ActionScript code

ActionScript allows you to add custom animations such as stop action to your project. To add a stop action to your animation with ActionScript:

1. Click the New Layer icon in the Timeline. Name the layer Actions.
2. Select the Frame 12 of the Actions layer. Press F7 to create a blank keyframe.
3. Open the Actions panel by pressing Option+F9 (Mac OS)/F9 (Windows).

   

   Figure 6: The Actions panel
4. On the first line of the Actions panel, type stop(); This code makes the playhead stop after the movie is finished.
5. Close the Actions panel.
6. To test the movie and view the complete animation, choose Control > Test Movie.

Where to go from here

• Flash CS4 Help and Support
• Learn Flash CS4
• Export from InDesign to SWF, by Michael Ninness
• Understanding Flash Integration , by Michael Ninness
• Managing Design Suite workspaces, by Tanya Staples
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors