ntegrating Flash or any other XML-supporting application with Office 2003’s XML capabilities is easy. In fact, when I was noodling around trying to come up with demonstration apps, I was somewhat dismayed to find that I was spending all my time in Flash; there weren’t really any challenges in Office. And then I remembered: That’s the point!
Shortly after publishing “XML Integration Between Office Apps” on DevX, I received an email asking if it was possible to combine the expressive and analytical power of Office with the display slickness of Flash. Yes, and it’s quite easy, even for a person with limited Flash abilities (a category including yours truly).
To program Flash, you’ll need a Flash compiler. The vast majority of users will use Macromedia’s offerings (I use Flash MX 2004 Professional), but I recently became aware of a product from a company called Swfsoft (recently acquired by Madcap Software) that directly supports XML to specify Flash movies. Because most people will use Macromedia’s products, I didn’t include a sample. Throughout the rest of this article, “Flash” refers to the Flash MX 2004 designer and its runtime engine, Flash 7.
Office XML To Flash Basics
The major issue in using XML from Flash is that the parser that Macromedia uses to interpret an XML-formatted text file differs significantly from those Microsoft uses in the Office suite and provides for .NET developers. This is not a show-stopping problem?one of the major features of XML interoperability is that different parsers can be used and that the specification is so simple (compared to, say, the C++ programming language) that there’s not really any ambiguity about what’s legal and what isn’t.
Having said that, Macromedia’s parser is more lax than any I’ve used since the late ’90s, and it doesn’t support the validation and navigation features that a Visual Basic .NET or C# programmer might expect. For an Office developer, the most significant thing is that Macromedia’s parser doesn’t support W3C XML Schema, so the types of work one associates with Word’s XML Structure taskpane or Excel’s XML Maps is unavailable within Flash.
It’s true that working with Schema within Office can be difficult, but the recently updated Excel XML Toolbox is a tremendous aid?an absolute must-have when working with Excel and XML. As can be seen in Movie1, the “Build Schema” capability of the Toolbox creates a valid XML Map from selected cells virtually instantly. This data can be exported to Flash-consumable XML by choosing “Save as…” and “XML Data”. The resulting file is shown in Listing 1.
In Flash development jargon, the next step is to create a Symbol that is a MovieClip, place it on the Stage, name the instance, and then add ActionScript to load the XML file and modify the instance’s values based on the XML.
For advanced Flash development, these steps will become second nature, but initially, for those who’ve been relying on Flash’s Timelines to create animations, it can be confusing. Flash can be programmed two ways: visually, relying on the Stage and Timelines, or with code, emphasizing ActionScript (which is essentially EcmaScript, a.k.a. JavaScript).
When coding Flash, a Flash “Movie” is analogous to a Windows Forms “Control”?an instance of an Object class that combines data and behavior, including visual properties. The Stage and Timeline don’t have similar analogues; the Stage is something like a Form but Timelines are something like a method and something like a form of flow control. (Timelines are actually similar to the way things worked in the old days of line-numbered BASIC?control generally moves sequentially forward but jumping commands allow you to GOTO anyplace you want.)
The first example showed the most basic use of driving Flash from Office XML, manipulating an existing symbol. More commonly, you’ll want to create new Symbols, place them on the Stage, and manipulate them according to the provided XML. While this could be done with the top-down, hard-coded approach to navigation used in the first example, investing a little time to develop a more sophisticated XML deserialization pattern will really pay off in the long run.
Dynamically Creating Flash Objects From Office XML
Starting with the slightly more complex Excel spreadsheet shown in Figure 2, choosing “Save as…”/”XML Data” creates the XML shown in Listing 3.
Our goal is to create a Flash object corresponding to each row in the spreadsheet, with properties corresponding to the spreadsheet values. Our first step in Flash is to create MovieClip objects corresponding to each of the possible values of the “Type” column. In this case, I made simple geometric MovieClips, but of course these could be complex Flash animations. Once I had in my Library MovieClips exported for ActionScript linkage as “SquareMovie,” “CircleMovie,” and “TriangleMovie,” I opened the Actions panel for Scene 1 : Layer 1 : Frame 1 and wrote the code shown in Listing 4.
This begins just like the basic code from Listing 2, but instead of parsing the XML in the onLoad() event-handler, I instantiate a new object of type ShapeParser, passing in the xml object to it. The ShapeParser class is not defined in Flash; I created it in an external ActionScript file, as shown in Listing 5. The code in the file should look quite familiar to Jscript programmers and at least somewhat familiar to VB.NET or C# programmers; it is an object-oriented class that has a constructor ( function ShapeParser(xml:XML) ) and a function called parseRow(rowNode:XMLNode) ) that is called once for each row in the spreadsheet XML.
 Figure 2. Saving the XML data in Excel 2003. |
The function parseRow() reads the value of the Type node and, depending on the value, instantiates a new Shape object of the appropriate subtype. (Experienced ActionScript or Jscript developers may prefer to use the dynamic capabilities of the prototype rather than this more mainstream “statically typed” approach.) Each subtype is passed the XMLNode containing the appropriate properties.
This pattern of passing along lower-and-lower-level XML nodes to newly constructed objects that handle the XML deserialization of their own properties is one of the key techniques in using XML in non-.NET languages (behind-the-scenes, .NET’s XML serialization uses a similar pattern).
The Square class is shown in Listing 6. As you can see, it’s very simple. It calls its base constructor (that is, the constructor of the Shape object) which we’ll return to in a moment). After that, it calls _root.attachMovie(), which is how new movie clips are placed on the root-level stage. The type of movie attached is a “SquareMovie” (I’m sure you can guess what type of movies are attached by the Circle class and Triangle classes).
The Z-depth of the new movie is determined by the call to getNextHighestDepth(). The name of the movie is shapeName, which is set in the base Shape constructor. And once the movie is created, the function setPosition() is called, passing in the XML.
The function setPosition() is not shown in Listing 6, because it’s defined in the Shape class. All of the subtypes of Shape (Square, Circle, and Triangle) are identical, except for the type of movie specified in attachMovie().
So, let’s finally take a look at the Shape class, shown in Listing 7. Our first task is to create a unique name for each Shape object we create. We do that by incrementing a static (shared in Visual Basic terms) variable called shapeCount and assigning its string representation to the shapeName variable.
The setPosition() function takes the XMLNode corresponding to a single line in the Excel spreadsheet. Knowledge of the XML structure (which child nodes correspond to what property of the Shape being created) is embedded in this function, but it’s localized and if the Excel spreadsheet XML Map changed, it would be pretty straightforward to change this function.
The function parseIntNode() is used on appropriate XML values (which are always string values), and then that value is used to set the appropriate properties on the MovieClip associated with the Shape’s shapeName. For instance, _root[shapeName]._x and _root[shapeName]._y. Note that “array field specification” (the form target[someVariable]) as opposed to “dot field specification” (the form target.someVariable) must be used to specify dynamically named fields, properties, and MovieClips in ActionScript.
The way to set the color of a MovieClip in ActionScript is different from what a Windows Forms programming would expect and worth calling out. Listing 7‘s setColorFromNode() shows the technique: first, we determine the RGB value to which we want to set the target MovieClip. Then, we create a new Color object, passing in the target whose color we wish to manipulate. Finally, we call setRGB() on the Color object. This may seem a little backwards to a Windows Forms programmer, who would expect the Color object to be a property of the target, but it actually makes sense, given that Flash allows you to animate Colors.
So that’s it for the code: the XML is loaded and then new objects are created which parse it, creating more new objects on the fly, which create and manipulate Flash movies. The Flash movie dynamically created from an XML spreadsheet is shown in Figure 3.
It’s pretty straightforward, really. The complete solution, including XML spreadsheets and Flash projects, is available here. Figure 3. Shapes Everywhere! |
Surprisingly Easy Office XML Integration
The examples shown in this article don’t exploit the capabilities of either Office or Flash. The point isn’t creating an image with a couple of shapes placed here and there, the point is that there’s terabytes (if not petabytes) of data in millions of Office documents and, with Office’s support for XML, all of that data becomes available for other uses.
Similarly, there’s another huge world of data that’s been hard to analyze or manipulate with Office. With XML, you can use the strengths of two (or more!) applications in combination, creating new types of capabilities. Flash, for instance, doesn’t have the analytical capabilities of Excel, but it’s really good for animation and there’s a natural fit between the two applications for visualizing time series and creating educational resources.
XML is by far the most successful bridge we’ve had for moving data between disparate applications. I hope that this tutorial helped you bridge Office and Flash, please be sure to drop a line with any success stories!
