XFL: Bringing Designers and Developers Together Since 2008

,,

In a previous
Adobe Education Technologies blog article we examined how to use Adobe InDesign CS4 to create a visually rich layout, add interactivity with hyperlinks, buttons, and page transitions,
and then export to SWF. We were able to do all of this without using Adobe Flash Professional and Actionscript programming. The downside of this direct-to-SWF export is that there isn’t an easy way to edit the SWF file should we want to further modify it.

Now, Adobe InDesign CS4 allows designers to create multi-page layouts and then export to the new XFL (XML for Flash) file format. The XFL file can be opened directly in Adobe Flash CS4 Professional preserving layout and typographic fidelity. Then developers can enhance the file with animation, interactivity, and video. Let’s take a look at the workflow:

We start in Adobe InDesign CS4. In this example we have a 9 page document which is purposely built for viewing on screen with its landscape orientation. When you create a new document using Adobe InDesign, there are a list of document sizes which match up with standard monitor/browser displays – like 1024 x 768, 800 x 600, etc.

Adobe InDesign CS4 document layout for viewing on screen.

Once we are done with our design, we would choose File > Export and select XFL from the file format list. After defining a name and location, we click Save which would then open the Export to Adobe Flash CS4 Professional (XFL) dialog box.

Adobe InDesign CS4 export to XFL.

From here we can choose to resize the the dimensions of our overall design as well as define which pages to export. By default, Rasterize Pages and Flatten Transparency checkboxes are deselected to ensure the XFL file’s maximum editabilty. Finally, we can keep our text editable by selecting InDesign Text to Flash Text. Other options in the Text list include InDesign Text to Vector Paths (converting text to editable outlines) and InDesign Text to Raster Paths (converting the text into bitmaps).

XFL Export Options.

When we click OK, the file is saved to our computer. We then launch Adobe Flash CS4 Professional and open the XFL file. Each Adobe InDesign page is converted to a movie clip symbol and represented sequentially on the timeline as keyframes (black dots). To work on a specific page, drag the CTI on the timeline to the appropriate keyframe and then double-click the page on the stage with the selection tool to enter into symbol editing mode.

XFL opened in Adobe Flash CS4 Professional preserving visual fidelity.

At this point we will be able to select page elements to reposition, animate, delete, etc. Also, if we had chosen InDesign Text to Flash Text from our XFL export options, the text will be editable as demonstrated below:

Text editability preserved.

There is a lot more that we can do to this file using the Adobe Flash interface or with Actionscript. To see examples of further Flash development, check out Paul Burnett’s video tutorial on Adobe TV.

2 Responses to XFL: Bringing Designers and Developers Together Since 2008

  1. Remno says:

    WOW!!! It’s COOL! Real!

  2. Remno says:

    WOW!!! It’s COOL! Real!