Hack 45 Import Complex Formatting in Flash

Reproduce complex text/graphic layouts such as mathematic notation in Flash using Microsoft Word as a capture buffer and cleanup tool.

As Flash becomes more ubiquitous, it is being used for applications other than pure web site design. Online learning sites require Flash to display complex text formatting, as seen in mathematical equations for science and engineering.

For example, the MathWorld site (http://mathworld.wolfram.com) exceeds the limitations of basic HTML fairly quickly; the equations at MathWorld are implemented as bitmap slices within HTML tables. Those pages must have taken ages to build! It is far easier to use Flash rather than HTML for nonstandard text layouts. Not only can Flash place text with pixel precision, but the text also remains editable.

Flash's formatting capabilities don't end with text layouts, however; you can reproduce other complex formatting in Flash beyond traditional web layouts. As we will see, you can copy an entire HTML page layout into Flash!

Create Math-Formatted Text

You can create math equations in Microsoft Word using the Equation Editor. This tool is not installed as part of the Microsoft Office default installation. To install it in Windows XP (using Office XP), go to the Windows Control Panel and click on the Add or Remove Programs icon. Find Microsoft Office XP and click the Change button. In the Microsoft XP Setup dialog box that appears, choose the Add or Remove Features radio button and click Next. You can now install the Equation Editor (you will find it under Office Tools), as shown in Figure 6-7.

Figure 6-7. Installing the Equation Editor that comes with Microsoft Office

You can also install the Equation Editor on Mac OS X as part of the Microsoft Office Value Pack component that comes on the Microsoft Office for Mac OS X CD-ROM; however, this hack's techniques seem to work better on Windows than on the Mac.

After installing the Equation Editor, to use it from within Microsoft Word, select InsertObject and choose Microsoft Equation. You can then create your equation using the Equation Editor toolbar that appears. The main Microsoft Word pull-down menus also change to facilitate adding further equation-specific formatting (particularly adding subscripts, superscripts, and Greek symbols).

You can upgrade the Equation Editor with MathType (http://www.mathtype.com), a third-party equation editor for Word. (Word may give you a pester dialog box to tell you about MathType when you first use the Equation Editor.) MathType objects are more complex than Equation Editor's standard output, and Flash doesn't seem to be able to import them. So decline the invitation if your goal is to use math equations in Flash.

Using Equation Editor, format your equation correctly in Word. To copy the equation into Flash, simply select the equation text so it all becomes highlighted, as shown in Figure 6-8, and press Ctrl-C (Windows) or -C (Mac) to copy it to the clipboard.

Figure 6-8. A math equation created with the Microsoft Office Equation Editor

You need to copy the live text inside the equation object and not the equation object itself. (You cannot copy the equation object while you are editing it in any case, so as long as you are able to highlight the text as shown in Figure 6-8, you should be okay.) If you copy the object, Flash will be able to import it as a bitmap only. To copy the equation text if you are not currently editing the equation object (i.e., if you cannot see the Equation Editor menu), double-click on the equation object, then highlight the text and press Ctrl-C (Windows) or -C (Mac). Once you've copied the text to the clipboard, switch to Flash. Once in Flash, click on the Stage and paste from the clipboard using Ctrl-V (Windows) or -V (Mac). The equation should appear as editable text embedded within a group, as shown in Figure 6-9.

Figure 6-9. Pasting the equation into Flash makes it appear as a group of editable text

On Mac OS X, copying the equation from the Word document and pasting it into Flash may not display the correct characters. It works better if you copy the equation directly from the Equation Editor (before inserting the equation object into the Word document) and paste it directly into Flash.

If you are going to use the equation often, you should convert the group into a symbol (using F8).

That's a great technique for short equations, but it can be a long session for some of the bigger equations, particularly if you are creating a set of Flash slides on Wave Theory!

Import Formatted Text from Other Sources

You can import larger blocks of text equations as HTML or as PDF.

If you want to present standard equations, simply search the Web until you find a version of the equation formatted in HTML text, as shown in Figure 6-10. Highlight the equation and copy and paste it from the web page into Word. Then reselect and recopy it in Word and paste it into Flash. Word is much better at importing most things using copy and paste than Flash (and better than most other applications in this respect, for that matter).

Figure 6-10. Formatted mathematical text on a web page

Figure 6-11 shows complex formatted text copied from an HTML table into Word.

Figure 6-11. Complex text copied from HTML into Word may appear as a table

Complex text may appear as a table in Word, but copying it from Word and pasting it into Flash works just fine, as shown in Figure 6-12.

Figure 6-12. Table copied from Word into Flash MX 2004

Figure 6-13 shows the appearance of the group that Flash creates during the paste operation. Just think how long it would have taken if you did it by hand in Flash!

Figure 6-13. A complex equation represented as a group of text elements in Flash

It doesn't matter where you copy your formatted text from, as long as you paste it into Word and then recopy and paste it into Flash. And the preceding trick is not just for equations; if you have any HTML that you want to use in Flash (for example, you may want to "Flashify" a static HTML menu and use the HTML version as a guide), simply copy it into Word from the HTML page, and then paste it into Flash. Amazingly, it works perfectly on Windows (although it might not work on a Macintosh).

Copying and pasting is a great way to base the layout of a Flash form on an existing HTML/JavaScript form.

Figure 6-14 depicts highlighting the O'Reilly site mast and side menu and copying the HTML to the clipboard.

Figure 6-14. Highlighting the O'Reilly site mast and side menu

Paste the HTML content into Word, as shown in Figure 6-15, and then copy it from Word to the clipboard and from there to Flash.

Figure 6-15. HTML pasted into Word, then reselected and copied back to the clipboard

Figure 6-16 shows the O'Reilly mast and side menu running in a SWF after being pasted into Flash and some minor cleanup being applied. All elements are static, but this layout could be used as a guide to rebuilding parts of the site in Flash.

Figure 6-16. The O'Reilly site mast and side menu running in a SWF

If you want to import whole pages of a technical document (to create a Macromedia Breeze-style web tutorial on a technical subject, for example), the easiest way to do it is by distilling the Word document into a PDF (or getting the PDF from a third party) and then importing the PDF into Flash using FileImport.

Final Thoughts

Although you can use simple online PDF documents or formatted HTML to present technical discussions on the Web, Flash has an advantage over such methods—your technical diagrams can be animated. Illustrating physics concepts, for example, is difficult with static diagrams, but Flash SWFs with animations presenting the concepts will help immensely.

If that doesn't convince you there is a need for presenting math formulas in Flash, take a look at a few of the animation engines being implemented in Flash (such as Robert Penner's scripted easing equations at http://www.robertpenner.com). Using Flash to explain them seems most appropriate!

Flash text-formatting facilities are not full-featured (even though Flash MX 2004's CSS support goes some way to addressing this). Microsoft Word has much better text handling, so it's just a matter of using Word and the clipboard to get the formatted text into Flash.

Flash MX 2004 is the first version to offer spellchecking. If you are using earlier versions, you can spellcheck your text in Word and then copy it to Flash.

If you need to insert Flash elements into an existing HTML layout, you can import the full layout (including text and bitmaps) via the HTML-to-Word-to-Flash route. This technique even imports most JavaScript interface elements, such as fields, as bitmaps! (The techniques discussed work well on Windows, but Macintosh users may have mixed results.)