R.I.P. .fla

Just before Adobe announced that there was to be no Flash CS5 Public Beta, Lee Brimelow, a Flash Platform Evangelist at Adobe, released a Sneak Peek of Flash CS5 on his site gotoandlearn.com. In the overview Lee spends some time talking about the fact that the .fla format is about to become extinct and replaced with a new one named “XFL”. What you may not know is that this format had already found its way into the CS4 studio.

In this article, I’m going to give you a chance to see what all the chatter is about and to prepare yourselves for the slow disappearance of the .fla format.

Note: I have included all the files for this example. If you don’t have After Effects don’t dial out. You can still work along because I have also included the XFL file created by After Effects CS4.

Introduction

Richard Galvan, the Flash Products Manager, and I have a most interesting relationship. We both highly respect what the other is doing but to call us great friends would be stretching the term. What Richard does know is that he can bounce ideas off of me and that they will go no further until the idea comes to life. For me, this is great because I can start thinking of ways to let you know what’s up when it happens.

In the case of the XFL format, I first heard about it, prior to the CS4 release, on a rainy street corner in Toronto when Richard and I were in a line waiting for entry into an FITC event. “What would you say,Tom”, asked Richard, “if I were to tell you we are thinking of getting rid of the .fla format?”

This one caught me by surprise but, as Richard walked me through the reasoning behind their thinking it became rather clear that this was a great idea.

In fact it wasn’t ,for me, a complete surprise. The rise of XML over the past few years has given Flash developers the luxury of working with Flash content that is external to the .swf. At the same time using XML with Flash had moved into the realm of “easy to accomplish” from the nightmare it had been. All of this is good but there was a major issue: Flash stored documents in a binary source file, the .fla, which was a proprietary specification. XFL is Adobe’s response to this issue.

Creating an XFL Document

Contrary to what you may have heard Flash can’t create an XFL document. It can only read them. At the moment there are in fact only two applications in the Adobe lineup that can create these docs: After Effects CS4 and InDesign CS4. Here’s how an XFL document is created in After Effects:

Step 1: AET.aep

Open the AET.aep file in After Effects CS4. It is a simple animation of the letters in the Activetuts+ name Raining In and Raining out.

I have used this effect in a couple of XFL demos I have done, not because I am lazy but because the focus here is technique not design. In this case notice the two layers named active tuts + In and active tuts + Out. The other feature to be aware of is that the Comp i’s dimensions are 400 X 100 and the frame rate is 24 frames per second.

Step2: Export

Select File>Export> Adobe Flash Professional (XFL)… which will open the XFL Settings dialog box.

Step 3: Format

Select PNG Sequence from the Format drop down menu.

Your two choices in the Dialog Box section may seem a bit odd. Here’s what they do:

• Rasterize to: You need to decided whether the output will be rasterized to a series of PNG images or an FLV. The PNG choice may strike many of you as being one to be avoided at all costs. Exporting a series of images and then sticking them in the Flash movie is, to say the least, a tad heretical. Not quite. If you select this option, frames that are identical and adjacent to each other are rasterized only once to a single PNG. That PNG is then referenced several times in the XFL document. Use the FLV option if a layer contains video. Clicking the Format Options button launches the FLV/F4V export settings.
• Ignore: Select this to tell After Effects to ignore layers containing unsupported features such as blending modes other than Normal. Choose this and those layers won’t be added to the XFL document.

Step 4: OK

Click OK to close the dialog box and get the process underway.

You will be prompted to choose a location for the XFL file and to give it a name (I used AETuts). When you click the Save button the dialog box disappears. You can quit After Effects and open the folder where you placed the XFL document. Inside you will see the .aep file and the XFL file as well as a report of the process. Create a new folder and place a copy of the XFL file into it. We’ll be using the copy in a moment.

Step 5: Open the XFL File

Launch Flash and, when it opens, use File>Open to navigate to the XFL file. Open it. A progress bar will appear.

Step 6: Examine the Flash File

When the file opens notice how the layers order is preserved, the animations are placed on Motion layers and that the file opens as an Untitled Flash file. Another very subtle change is that the Scene 1 link has been renamed Comp 1. This is the name of the item in After Effects.

Why does the XFL document open as an Untitled Flash document? The reason is because this document is contstructed from the information contained in the XFL document and new documents in Flash always open as Untitled.

So what does all this “information” I have been chattering about look like? Let’s find out.

Step 7: Change the Extension

Quit Flash, navigate to the folder holding the copy of the XFL file and change the XFL file extension to .zip. The icon will change to a .zip file icon. The key aspect of the XFL format, if you pay close attention to what Adobe is saying, is that it is a container format. In fact they are very clear that you should regard an XFL file as a zip file.

Step 8: Uncompress the .zip File

Using the application you use to open .zip files (I use BetterZip on my Mac) open the .zip file. When it opens you will see that your XFL file contains a lot more than you expected. Move the Library folder and the DOMDocument files to your open folder.

Step 9: Open the Library Folder.

The structure of this folder is how the Flash Library is created. The only difference between the two is that the contents of the folders are placed into movieclips when the file is constructed.

Step 10: Open the DOMDocument.xml File

I am not going to get deep into this document but you can see that each element that makes up the animations from the folders is between the <media> </media> tags and how the movieclips with animation are constructed as well.

Conclusion:

The implication of the new format is quite staggering when you really think about it. For example, nothing says you can’t edit one of the images in the Library folder in Photoshop or Fireworks and not have any effect whatsoever on on the Flash timeline. Another is, once this format takes hold, it won’t be odd to see Flash movies authored using XML and Flash being used primarily for the final .swf export.

I am going to leave the final word on this to the master, Colin Moock. When he learned about this change in CS4 he wrote in his blog:

The natural next step in the evolution of XFL authoring would be to take the Flash authoring tool out of the equation altogether. If Adobe were to offer a command-line XFL-to-SWF compiler along with XFL, nearly any decent programmer would be able to create a .swf-authoring tool, even in ActionScript. The Flash developer community itself would finally be able to create its own custom Flash-authoring tools. I wonder who would be the first to nostalgically make Flash 4 for AIR in ActionScript?

Wouldn’t that be neat?