Getting Dynamic with Illustrator and Flash

The much anticipated integration between Illustrator and Flash lives up to its expectations, even with Dynamic text. The new Flash Text panel allows you to set up static, dynamic, or input text fields in Illustrator for use in Flash.

In this tutorial, we'll take a look at ways to take advantage of this feature and then import text dynamically from an external text file with ActionScript 3.0.

Getting Started

Open the Illustrator file banner.ai. (download file)

The file contains a typical website banner construction, with a logo, some general links and buttons. The buttons were created from one button that was converted into a symbol by dragging the button into the Symbol panel.

The buttons were then given instance names in the Control panel.

Click to enlarge

Each button has a label which is made with the Type tool and then converted to Flash text in the Flash Text panel (Window > Type > Flash Text). Flash text can be static (default), dynamic, or input text. Since the titles of these buttons could potentially change in the future, we are going to use dynamic text.

Dynamic Text has a few options:

Rendering: Allows you to configure the output of the text for readability, animation, or a custom level. This also allows you to set the text to be formatted with device fonts or generic sans-serif, serif, or typewriter.

Flash text can be selectable, have a border around it, and there are embedding options. In this case, we don't want the text to be selectable, since the user will interact with the button behind it, so turn that option off. Similarly, we don't want a border around the text, so turn off the border option.

Each dynamic text field also needs an instance name in order for us to use ActionScript to pull variables from an external text file into Flash to populate the text fields.

Getting Flashy

1. In Flash, create a new document (Command (Control) + Option (Alt) + N).

2. Go to File > Import > Import to Stage (Command (Control) + R. Choose the banner.ai file and click Open. The Import dialog shows you all of the layers and content from the Illustrator file. You can click on each layer to see how the content is going to be treated in Flash. If we wanted to, we could exclude content by unchecking it in the left column.

Click to enlarge

3. Be sure to turn on the option: Set stage size to same size as Illustrator artboard/crop area (800 x 600) and click OK. All of the content from the Illustrator file is imported into the Flash document and the stage is set the same size. Notice how well Flash imports the gradients and drop shadow from Illustrator. In the past, these features wouldn't render right in Flash.

Click to enlarge

Getting Dynamic

Flash has the ability of importing text from a simple text or XML file. In this case, we will be using the new URLLoader object in ActionScript 3.0 to dynamically load variables from an external text file.

Note: In ActionScript 2.0, it is possible to use a simple loadVariables script to capture variables from an external text file and then populate the text fields by calling on the specific variable in the Var field.
ActionScript 3.0 does not support the Var field for dynamic text fields as all scripts are written only in the timeline now, not on individual objects.

The External Text File

1. In BBEdit or TextWrangler (from Bare Bones Software: www.barebones.com) on the Mac or Notepad on Windows, open up a new text file.

2. We start the file with a variable name and then give it a value. Then we separate each variable and value with an ampersand as follows:

The variables match the instance names of the dynamic text fields to make it easy to remember what value goes where. It's the values that can change anytime we want them to. The convenience is that we won't have to edit the Flash file in order to make these changes, we just change the text file.

3. Save the file as buttons.txt.

The Flash File

1. Create a new layer and call it €˜as.' You can call it whatever you want, I just use this as a shortcut name for ActionScript. Typically, you want this layer to be at the top of the layer section of the timeline, so that you can always access it quickly.

2. Open the Actions panel (F9).

3. We begin our script by creating a new URLLoader object:

4. Then, we set up the formatting of the loader to accept the variables from the external text file:

5. Next, we load the external text file:

6. Finally, we use a listener to make sure the variables from the text file are loaded. When that is completed, we populate the dynamic text fields with a function:

Each dynamic text field has a text property. We target that property and make it equal to the variable in the external text file. Here's the complete script

Click to enlarge

7. Save the Flash file in the same location as the text file.

8. Test the Flash movie, Command + Return, or Control + Enter. At this point nothing should look differently, since the variable names in the text file match the labels in the Flash file.

9. Return to the text file and change the values of the variables:

10. Save the text file.

11. Return to Flash and test your movie again. All of the menu items should now read differently.

Click to enlarge

Summary

Certainly, you can see the benefits of utilizing the new Flash Text options in Illustrator. This example can be extended to all of the text fields in the project. The ability to change text on the fly without having to open the original Flash file is a better workflow for developers.

Note: Most browsers cache images and flash SWF files. If you make a change to your text file and upload it to your server, then refresh your browser, you may not see the changes immediately. You'll have to clear your browser cache and then refresh to see the new content.