In the previous article I walked you through how one uses a variety of applications to create the assets for an interactive magazine and then the process of adding media, motion and interactivity to those assets in InDesign CS5. This article will focus on the end game - outputting the project for delivery through a web page or sending the project to Flash for more work and output to a SWF or even an AIR app.
The reason I am using a magazine-style layout here is to demo a lot of the features in InDesign CS5. I will admit right off the bat, the page size might strike many of you as being a tad largish. Remember, you can use any page size you need and I suspect one of the more common sizes will be in the neighborhood of 800x600. Still, the choice is up to you.
Before we dig in, let's deal with the inevitable "Why a SWF?" and "Why a Flash file?" questions. They are valid and the answer may surprise a few of you.
For far too many years Designers have been sort of forced to sit in the chairs along the wall at the Flash soireé. They would come up with some great ideas but their influence decreased at the same rate as their Developer counterparts rose. As we move into a digital communications realm where paper and screens are regarded as nothing more than display mediums, graphic design becomes increasingly important. Projects designed for print, as you have seen, can move off the static print page and interactivity, audio and video elements can be built built right into the design.
The SWF format, especially with the Flash Player 10.1 release, which puts a monster of a media player in the hands of everyone with access to a screen, allows you to create rapid prototypes for your clients. Just because we "get it" does not mean your clients will. Making the intellectual leap from paper to screen is going to be a new experience and putting a swf in their hands let's them actually "see" what you are talking about.
The Flash format will absolutely thrill Developers. The project will be broken down and reassembled into Flash-friendly pieces which going to require the skills of an experienced Flash Developer to bring back to life. There is none of this: "Yep, just output to Flash and you are in the game." which always seems to catch the attention of people who have never used Flash. As I am fond of saying, "Ain't gonna happen." You will see why I am saying that later on.
From there the normal Flash workflow takes hold as the developer pulls together the class files, code and media elements that build, and a many cases even improve, upon the efforts of the Graphic Designer. What will thrill the Designers is that Flash CS5 goes out of its way to accommodate the integrity of the design. Once this process is complete the project can then be output as anything from the final SWF for embedding in a Web page to an AIR 2.0 app.
Let's get started:
Step 1: Export as a SWF
With the InDesign document open, select File>Export to open the Export dialog box. Select Flash Player (SWF) from the Format pop down menu and click Save.
Your choices are, for the most part, self-explanatory but there are a couple here that may catch your attention:
InDesign Markup (IDL): This format allows the document to be opened in InDesign CS4. This isn't something that concerns us.
InDesign Snippet: This has absolutely nothing to do with the code snippet feature of Flash CS5. It allows you to save and reuse objects on the InDesign page.
XML: I'll bet that one caught your attention. Don't get too excited about this one because it requires a lot of extra work on the developers's part. If you are intrigued with this option understand you can only export XML after you have:
- Created and loaded the appropriate element tags.
- Applied those tags to the elements on the pages.
- Opened the Structure panel and adjusted the hierarchy if necessary.
Mind you, if this "floats your boat," knock yourself out.
Step 2: General Preferences
When the Export SWF dialog box opens, determine your General preferences for the SWF.
Let's go through your choices:
- Export: You can choose to export a piece of a page, the entire document or a range of pages. The generate HTML File selection will create the HTML wrapper for the SWF and the last choice, View SWF after Exporting, will open the HTML page or SWF and allow you to take the project for a test ride.
- Size (pixels): These options allow you choose the physical size of the final SWF. For example, the Fit To: pop down menu offers you a full range of common sizes or you can set your own. If you do change the physical size of the document, the integrity of the design will be maintained which sort of removes the "physical size" discussion from the table.
- Background: If you choose transparent the background color of the HTML will be used.
- Interactivity and Media: Select Appearance Only and all of the interactive elements and media become placeholders.
- Page Transition: You can apply a range of cheesy effects from Blinds to Zoom Out. If you are into PowerPoint, you're in heaven. Otherwise, just ignore this one.
- Interactive Page Curl: This is a pretty cool option. Click and drag a turn page and the page turns. Still, this is not quite ready for prime time. I find this feature a bit difficult to use because, if you don't do it just right, the page flips back. I found using a button for this navigation purpose to be more useful.
Step 3: Advanced Preferences
In the Export SWF dialog box click the Advanced tab to open the Advanced options.
This is where the Pros take over because this panel will determine how the SWF operates. Let's go through your choices:
- Frame Rate: The SWF frame rate is set here. Note that the default rate - 24 fps - is the one used by Flash.
- Text: You get three choices here. Flash Classic text will output as searchable text and results in the smallest file size. Convert To Outlines is a good choice if you have only headlines. In this project this choice is the wrong one because there is a whack of body text. Convert to Pixels will flatten the text into a bitmap and all of the nastiness that entails.
- Image Handling: These choices are quite familiar to anyone who has published a SWF.
Step 4: Click OK to publish the SWF
When you click OK the SWF is created and, as you can see in the screenshot, the project opens in a Web page.
Step 5: The SWF Folder
OK, minimize InDesign and open the SWF folder..
Just so we are all on the same page, so to speak, here are the files that get stuck in there:
- Resources: This is the external media, including FLVPlayback skins, used in the document.
- HTML: The HTML wrapper for the SWF.
- SWF: The swf you just created.
If you are wondering about the images, buttons and text, they are all embedded into the SWF.
Step 6: Outputting to Flash CS5:
To a Flash Developer or Designer, going immediately to a SWF is "simply not done." I couldn't agree more. I find the video feature to be a bit "basic" and I am not a huge fan of putting a video skin over the video while it plays. Also using the various panels to "wire up" buttons and so on when I can do it more efficiently using ActionScript 3.0 sort of makes these "whizzy" features of InDesign feel more like "wind up" toys than anything else. Still they present an opportunity to test functionality, so they do have a use. Even so, if you want to create a lean, mean and fast-loading SWF then Flash is the next stop in the process.
Before I get you all excited about this you need to know that this technique, as you will soon learn, works best between Flash CS5 and InDesign CS5; in fact it is the only Flash format available to you. Also, Adobe has discontinued the XFL export option in InDesign. It was there simply to give InDesign CS4 the ability to move into Flash. Flash export replaces it.
Finally before exporting, make sure to create a new directory to hold the files.
Let's get started.
Step 7: Export as FLA
Select File>Export> Flash CS5 Professional (FLA) and click the Save button to open the Export Flash CS5 Professional (FLA) dialog box.
Step 8: Choose Your Export Options
Many of the choices can be found in the general area of the SWF export dialog box. The new one being Text.
You get four choices. Three - Classic Text, Convert to Outlines and Convert to Pixels - have already been covered. The new one is Flash TLF text. This is the new way of managing text in Flash CS5. TLF stands for Text Layout Framework and it is the feature that brings typography to Flash. Any typographic changes you make in InDesign will transfer, intact, to Flash. This is great news for designers. The bad news is this feature only works with Flash CS5 and with Flash Player 10 or higher.
The Insert Discretionary Hyphenation Points selection "breaks" words when they bump up against the edge of a text box.
Before exporting to Flash you might want to do a "preflight" check to ensure you really do get WYSIWYG. Among the things to check:
- Color: Don't think you can take a CMYK layout and plop it into Flash. Flash uses the RGB color space and any spot colors - Pantone is a great example - will be shifted to the RGB space.
- Transparency: Make sure, especially when exporting to the SWF format, that transparent objects don't overlap any interactive elements. There is a risk that the interactivity may be lost.
- 3D attributes: Any 3D effects used in InDesign - Text on a path - will not move to Flash or to the SWF.
- Fonts: TLF only works with OpenType and TrueType fonts. Postscript fonts are not allowed.
Step 9: The Flash Folder
Minimize InDesign and open the Flash folder.
The only difference you should see between this folder's contents and that of its SWF counterpart is the inclusion of a .fla file.
Step 10: Flash CS5
Take the .fla and open it in Flash CS5 (this is where is gets seriously cool).
First off, the movie only has three frames. The reason is each spread in InDesign, and there are three of them in this document, is wrapped into its own movieclip (named "Spread-xxx") in the Library. All of the buttons used in the InDesign document are turned into button symbols in the Flash Library and each of the images used in the slideshow - a Multi-State object in InDesign - is converted to a movie clip and the images are added to the Flash library as bitmap symbols.
The bad news, and for many of you this isn't really bad news, is all interactivity is lost. You will need to "rewire" the project using ActionScript 3.0.
Step 11: Animation
Let's discuss opening a movieclip containing an animated object.
In this project there is an animated text block on Page 3 that starts with an Alpha value of 0 and uses the Fly In From Top effect in InDesign. These effects move, intact, into Flash, are added to Motion layers and the paths are fully editable in Flash.
Step 12: Select Text
Double-click a spread on the main timeline to open the movie clip and click on a text block.
As you can see, all of the text formatting, including flow between containers, applied in InDesign is reflected in the text container's Text properties in Flash CS5. This is huge. The only thing missing is text wrap; it will not move between InDesign and Flash. What does move, though, are inline images. These are images or graphic elements added to text containers in InDesign as inline elements. Again, this is huge.
Step 13: Select the Video
Video and audio, typical external assets, don't move into Flash. Any video is replaced with a bitmap placeholder of the video's poster frame from InDesign CS5 and audio is, well, ignored. Again these two media types are best handled through ActionScript 3.0 so it is no a great loss. In fact, the video placeholder can be replaced with an FLVPlayback component or video object.
In this tutorial I walked you through the steps necessary to get an InDesign CS5 document prepared for web playback as a SWF or .fla file. They are remarkably similar in how they are exported but the two formats are starkly different.
As I pointed out the SWF export is good for prototyping and a couple of other very specific uses. For many of you, it is the .fla kicked out of InDesign that is most important.
I showed you how motion, page assets, text and audio and video are moved into Flash. The most important aspect of this is all of the assets land in the Flash Library but it is going to require the attention of a Flash developer to "rewire" the project with ActionScript 3.0. This is a good thing; those who don't have your skills and knowledge will think twice before exporting Indesign documents to Flash because they think that will solve their problems. Far from it. They are just starting.
Finally, once the project is "wired up" and functional it can then move to the web or be bundled up as an XFL document and handed over to the Flex team. This is a brand new workflow and I suspect many of you will see this as extra work. I honestly feel that once you get the "hang of it" InDesign is about to become another tool in our arsenal because a flood of tablets - Android and other OS's - are just around the corner.