Your First Generator Template - Flash

So, you have the authoring extensions and you’re ready to make a template. First you need to decide on your data source. This can be either a humble text file, or a middleware solution such as output from Perl/CGI scripts, ColdFusion, Active Server Pages (ASP), or a direct link to a database. For this simple example we use a text document.

  1. Create a directory on your local machine. The exact location is up to you. Call it GenDev and in this folder make three more folders: one called data, another called swt, and a third named fla.
  2. Create an empty text file in an ASCII editor, either Notepad (PC) or SimpleText (Mac). Save the text file in the data folder as info.txt.
  3. At the top of the text document, type the following words make sure you observe the syntax carefully:
  4. name, value
  5. Save the text file and close it.
  6. Open Flash 5, and save a new empty Flash movie (.FLA file) as lesson1.fla in the fla directory.

Now’s a good time to explain the logic behind the folder structure that we’ve just created. Using relative paths for your data source makes it very easy to migrate the final files to your Web server for final deployment. Also, the current folder configuration affords the extra advantage that the final .SWT files can easily find other source files. The exported .SWF files that are created with Flash’s Test Movie and Scene commands are also saved to the .FLA source folder, where the final .SWTs can find them.

To set your data source, look to the top-right corner of the Flash Timeline window, where as shown below you see the Generator logo. Its presence on the Timeline window indicates that the Generator extensions are installed. It also opens the Generator Set Environment dialog. To insert Environment parameters, click this button and a dialog opens.

The Generator Environment button (to the left of the Scenes pop-up menu) Click to insert a Generator environment variable

Generator Environment button

As shown below, two icons appear at the top-right corner of the Set Environment dialog: Column Name/Value Data Layout and Name/Value Data Layout.

Basically, these variable containers enable you to input names and values in the same manner as we are going to in our text file. You can browse to a data source via the small folder icon in the top left. Remember to keep the paths relative.

The Generator Set Environment dialog

The Generator Set Environment dialog

Let’s enter the data source we have just saved as a text file. If you aren’t there already, switch back to Flash and click the Generator logo. When the dialog opens, type this directly into the text field:


Click OK and save the Flash file. That’s the path to the data source set in the text file, named info.txt. Remember that if you used the browser icon you need to crop off the front part of the absolute path and enter a relative one instead. The following path would need to be cropped to match the preceding relative path example:


Now you’re ready to make your mark on the Flash Stage. Select the Text Tool and change the font to Arial (PC) or Helvetica (Mac). Select a black fill color in the Toolbar, and select a 20-point text size in the Character Panel. Then, click the stage to create a Static Text block, and type the following: {btext}{ntext}. Unlike Flash 5 ActionScript variables, all Generator variables are written between curly braces ({}). Refer below for more information on the position and size of the text.

Making Generator Text in Flash

Making Generator Text in Flash

As you can see, the text layout properties are still active. If we just left it like this, our data source information would have a very small text block letters may wrap to the next line upon generation. That’s because there’s only space for seven characters. To resolve this, set the size of the text box by “grabbing” the circle icon at the top-right corner of the text block and drag while the mouse button is still pressed, as shown below.

Resetting the size of the text box

Resetting the size of the text box

Now save the file make sure that it’s saved in the fla folder of the GenDev folder. As we continue adding more and more information to this file, you’ll need to keep backing it up. Therefore, it’s recommended that you make an incremental save to the file before you make any major changes to it. If these new changes are successful, then you should save the file as the next file in order, as follows: gen_01.fla, gen_02.fla, and so on.

Switch to your text editor and open the text file called info.txt. This file should only contain the two words that we entered at the very beginning. To recap, these should be:

name, value

Under this entry, we’ll insert a carriage return and on the next line down we’ll add our first variable, {btext}, and then on the next line we’ll add our second variable, {ntext}:

Note that a comma follows each of the variables and that the curly braces (that surrounded the equivalent variable in the Flash movie) have been removed. The comma is what is known as the delimiter that means that Generator treats anything appearing after the comma as a variable value.

Knowing this, you might imagine that problems arise when you need to include a whole sentence or a string of characters that may or may not be separated by a comma. We solve this by putting the value of the variable in double quotes. The downside of this solution is that you can’t put double quotes inside a value because it would have the same effect as placing a comma outside double quotes, which would cause the text to end abruptly. You can, however, use single quotes inside double quotes with no adverse effects. Then, if you need to use double quotes, use a as a delimiter. Therefore, to double quote within a set of quotes, write the sentence thus:

This section of ”text” is in quotes.

Now let’s add values for both variables. The first variable, btext, has the value:


Our second variable, ntext, has the variable:

Welcome to Personalization

Our final text document should look something like this:

Finally, save the file and close your text editor. That’s all the text manipulation we need to do. Now, if you closed Flash while working on the text you’ll need to open it again. So let’s go back into Flash for our last time.

Now, we test our file to see if it works. Open lesson1.fla and double-check your Set Environment dialog box one more time to make sure that it’s pointing to your text document. Select Publish Settings in the File menu and make sure that Generator is checked in the Formats tab. This box is the equivalent to the Settings dialog box that you encountered in Generator. Ignore the rest of the Generator settings for this exercise. Click OK. Now, save the file! Choose File➪Publish Preview (F12) or use the Control➪Test Movie command. Behold . . . it worked.

Why does this work if you don’t have the Generator Server on your local machine?
As mentioned earlier, when Flash publishes a .SWF file from a .FLA file with Generator Objects and variables, it will locate the data sources at the time of publishing and fill in the template where necessary. Therefore, you’ll see the data source information in the actual .SWF file. Don’t be fooled though. This isn’t dynamic generation. If you change the info.txt to indicate new text, it will not show up in the .SWF file until you publish a new one from Flash 5.

To dynamically repopulate the text block with updated information, you’ll need to upload the .SWT and info.txt files (with the same directory structure) to your Generator-enabled server. You’ve taken your first step on the dynamic road of Generator. We explore some creative uses of Flash and Generator content.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics