Let's look at bulk content creation. We're going to use a DOS Batch file to quickly generate multiple SWFs containing different text, sound, images etc. but which follow a template defined by us.

I must admit, I am a SWF lover. You hear a lot these days about HTML5 and other emerging technologies that will somehow put the good old SWF out of business, but I will be one of those developers clinging to my beloved SWF for as long as I can. Over the past 14 years or so, the SWF has been unique in its ability to deliver rich media content over the web, way before any other technologies could come even close.

For elearning, the SWF is still pretty much the standard, and is something I use throughout all of my lesson content. I use it for everything from virtual tutor videos to vector images, vector text, and interactive activities of all kinds.

For doing bulk content creation, I've found that nothing works quite as quickly and powerfully as a good DOS Batch file. You can quickly write and modify a batch file to do all kinds of interesting things, and if you are working with a large amount of images, text, and audio, a batch file can quickly turn that into multimedia content in the form of a SWF.

Reasons you may like to do this include:

1. You don't have Flash installed on the PC where you are working
2. You want to create SWFs in bulk
3. You want to create SWFs from the command line

The only tool in Windows that you need other than your code editor is the Flex SDK, and optionally an open source ASCII to UTF-8 converting application called iconv from the GnuWin project, if you plan to use international characters or accent marks in your text.

Final Result Preview

Let's take a look at the final result we will be working towards

Step 1: Determine Your SWF Type

Bulk creation means that all of your SWFs will follow the same template, so decide what kind of items you have a need for: vector text, image, audio, etc.

Step 2: Organize Assets and Fonts

Name your files appropriately: each text, image, and audio file should have matching names, as well as case. If your files are disorganized, you may want to download a file utility program to batch rename them, convert to lowercase, etc. One such program I found is called Useful File Utilities.

You may want to open a text file and keep a list of absolute paths to these items, including any fonts you plan to embed.

In the source/utility folder of your download for this tutorial, you'll find some small batch scripts that can help you create a master wordlist to use with your SWF creation. If your file names contain more than one word, please use a dash between words [-]. Dashes are already accommodated for in my main .bat file which creates the SWFs. When using dashes, they are converted to numbers and later converted back to dashes with another small utility file, as otherwise your AS3 class files will fail to compile.

Step 3: Create AS3 Class File Template

Open up your code editor (I always use Notepad++ for multi language coding, it's an amazing open source application).

In the following steps, I will sketch out possible elements for you to add to your class file definition, which will be used by your DOS file to generate all of your SWFs.

If you'd like to follow along by examining the class file I used for these snippets, open the source/lago.as file in your download package for this tutorial.

We begin by adding a generic package layout in AS3, which without any functions would look something like this:

package  
{  
import flash.display.Sprite;  
import flash.display.*;    
 
    public class lago extends Sprite  
    {  
      
    }   
}

Now let's add some actual items to our SWF!

Step 4: Embedding an MP3

As always, you begin by importing the necessary class files:

import flash.media.Sound;   
import flash.media.SoundChannel;

Here is code to embed a sound at a static location. You'll notice when we come to create our DOS file, we use the variables for our folder and file name instead.

  [Embed(source="C:/Users/You/Desktop/sound/lago.mp3")]  
		public var soundClass:Class;  
		var sndChannel:SoundChannel;  
		var smallSound:Sound = new soundClass() as Sound;

Step 5: Embedding an Image

Here is code to embed an image:

    [Embed(source="C:/Users/You/Desktop/images/lago.swf")]  
		public var Picture:Class; 
		var pic:Sprite = new Picture();

In my file I first create a Sprite, which I add the image to, but if you want to add the picture directly to the stage you would just use:

addChild(pic);

Step 6: Embedding a Font

As I am using international characters, I embed my font by specifying which Unicode characters to include:

[Embed(mimeType="application/x-font", unicodeRange='U+0061-U+007A,U+00E1-U+00E1,U+00E9-U+00E9,U+00ED-U+00ED,U+00F1-U+00F1,U+003F-U+003F,U+00FA-U+00FA,U+00E1-U+00E1,U+00F3-U+00F3,U+00BF-U+00BF,U+00A1-U+00A1', source="C:/Users/You/Desktop/BradBunR.ttf",fontName="Brady")]  
private var terminatorFontClass:Class;

To see which characters you need, you can check this chart here, found at the University of Wisconsin-Madison's Space, Science, and Engineering Website. In Windows, you can also open up your charmap.exe program and look at the values for the characters you need.

Step 7: Using textFormat to Style Your Text

Begin by importing the necessary classes:

import flash.text.*;   
import flash.text.TextFormat;  
import flash.text.AntiAliasType;

Now create a textField and attach a textFormat to it:

var __text_tf:TextField = new TextField(),__format:TextFormat = new TextFormat();

Now let's apply some styling to our text. I used a size for the text below, but in my actual file I adjust the size based on string length, so this size line would not be used.

__format.size = 30;  
__format.font="Brady";  
__format.letterSpacing=6;  
__format.align = TextFormatAlign.CENTER;  
__text_tf.width=500;  
__text_tf.embedFonts = true;  
__text_tf.wordWrap = true;  
__text_tf.defaultTextFormat = __format;  
__text_tf.autoSize="center";  
__text_tf.text = str;

Step 8: Changing Font Size According to String Length

This was a bit of a tricky piece of code, but if you are trying to create bulk SWFs of phrases and even sentences rather than just single words, you'll find that it's necessary to accommodate for different string lengths. Otherwise some of your words will be either too big, or too small.

if (str.length <= 9) { 
__format.size = 70;  
} else if (str.length >= 14 && str.length <= 22) {  
__format.size = 50;  
__text_tf.defaultTextFormat = __format;  
} else if (str.length >= 28 && str.length <= 48) {  
__format.size = 40;  
__text_tf.defaultTextFormat = __format;  
} else {  
__format.size = 50;  
}

Of course you can change these values according to your own content needs.

Step 9: Centering Text in a textField

This line eluded me at first, and was crucial for getting my text to center properly in the textField.

__text_tf.autoSize="center";

Step 10: Centering and Proportionately Resizing an Image

This code took the better part of a day to get right, and is the only way I found to properly resize and center a SWF. You can change the x, y, targetHeight, and targetWidth values depending on the size of your own SWFs, but otherwise this code can help you achieve centering and resizing:

var ratio:Number;   
var wide:Number;    
var targetWidth:Number = 400;   
var targetHeight:Number = 250;  
 
if (pic.width < targetWidth) {   
ratio = targetWidth / pic.width;   
pic.width  = targetWidth;   
pic.height *= ratio;   
wide = pic.width*ratio;  
}  
if (pic.height < targetHeight) {   
ratio = targetHeight / pic.height;   
pic.width  *= ratio;   
pic.height  = targetHeight;   
wide = pic.width*ratio;  
}  
if (pic.width > targetWidth) {   
ratio = targetWidth / pic.width;   
pic.width  *= ratio;   
pic.height *= ratio;   
wide = pic.width*ratio;  
}  
if (pic.height > targetHeight) {   
ratio = targetHeight / pic.height;   
pic.width  *= ratio;   
pic.height *= ratio;   
wide = pic.width*ratio;  
}  
pic.y = 110;      
pic.x = 250 - wide/2 ;       
pic.scaleX = pic.scaleY;   
square.addChild(pic);

}

Step 11: DOS Version of Your AS3 Class File

Please take a look at the sample file source/lago.as if you need more help crafting your class file template, as now it's time to create the DOS version of your file.

Open up the lago.bat.txt file in your download's source directory, and save the name to just lago.bat. If you are using a code editor such as Notepad++, you should have a Batch highlighting syntax which will now be applied. While not necessary, syntax highlighting does make Batch coding a lot easier.

Remember that DOS needs you to escape certain characters by prefixing them with a caret [^] (or sometimes a double-caret [^^], including:

• (
• )
• >
• &

Also, remember the following things:

1. Each line must begin with echo so that it will be included
2. Each line must end with >> !fileoutta! so that it will be appended to our SWF creator .bat file

Use a program like Notepad++ to run a RegEx search and replace, first escaping the necessary characters, then adding the echo commands at the beginning of lines, or where \n is found, and adding the >> !fileoutta! before returns, or where \r is found. For example:

Find:

\n

Replace with:

\n echo

And

Find:

\r

Replace with:

>> !fileoutta!\r

Finally save this DOS version of your file, i.e. myclass.bat.

Step 12: Begin Crafting Your DOS Batch File

To better follow along, open up the following file from your download's source directory: batch_create_swfs_word_picture_w_audio.bat.txt. Change the file ending to just .bat and save.

Points about this .bat file:

1. It will run in the folder where you place it
2. It will use the folder name as a variable
3. It will expect any images to be in an /images subdirectory
4. It will expect any audio files to be in a /sound subdirectory
5. The absolute paths to the Flex compiler, any fonts you want to embed, and optionally the iconv.exe program are needed

I use a master word list file to create my SWFs, which is found in source/glossary/glossary.txt. To create such a file from a folder of files, you can use one of my utility .bat files found in the source/utility folder.

Keep in mind that batch processing requires you to be very conscientious when naming any assets. The best approach is to give any image and audio assets intended for the same SWF the exact same name, then put them in the correct subfolders -- for example:

sound/lago.mp3

images/lago.swf

The glossary/glossary.txt file to create only the SWF for lago would simply read

lago

The beauty of my system is that my glossary.txt file can contain an unlimited amount of words - in fact I've run it with 1000+ words, with no problems at all! But the assets you are attempting to embed must exist, and be in the correct location, named correctly, or the SWF for that word will fail to compile.

Step 13: Replace Your File and Directory References

Look again at the batch_create_swfs_word_picture_w_audio.bat file. Scroll down to the section below the REM 1 title, and you'll find the beginning of the area where you can add the DOS version of the custom AS3 class file you created in Step 11.

One thing to note is that I use the variable !myvar! for the folder name, so that I can drop this .bat file into any folder within a main directory on my computer, and the paths to the files will still be correct as long as I use the /images and /sound subdirectories. Examine my code before pasting your own in, so that you can make the proper replacements.

The sections titled REM 1, REM 2, REM 3, and REM 4 all require you to customize based on your own folder paths.

Step 14: Optional Customize iconv UTF-8 Converter Path

Open up the utf_convert.bat.txt file and rename it to utf_convert.bat. Find the REM 1 and REM 2 sections, and fill in the correct paths for your files.

Step 15: Organize Your Files for a Trial Run

Time to get compiling! Find the master directory you've used for all your paths, and create a new folder called trialrun. Open up the download folder for this tutorial, and copy the subfolders from source/trialrun and paste them into the trialrun folder you just created in your master directory.

Step 16: Copy and Paste .bat Files

Copy batch_create_swfs_word_picture_w_audio.bat and optionally the utf_convert.bat files to the trialrun directory you just created.

Step 17: Click on the Main .bat File

Time to give batch SWF creation a try! Click on batch_create_swfs_word_picture_w_audio.bat This will create the AS3 class files that will be used to generate individual SWFs.

Step 18: Click on the UTF-8 Creation .bat Files

You'll be given instructions in the Command Line Console to click on the utf_convert.bat and the utf_click_to_convert.bat files, in that order. This will convert all of your AS3 class files to UTF-8 compatible files before running the Flex AS3 compiler.

Step 19: Continue Batch Creation by Clicking Any Key

After the UTF-8 conversion is done, the Command Line Console will wait for you to click any key, before resuming. Once you do that, the actual SWF compiling will begin. For the trial operation, 3 SWF files will be created in the trialrun/word_scripts_sp_au_utf8 directory.

Step 20: Check Your SWFs

Open up the trialrun/word_scripts_sp_au_utf8 directory and see if your SWF files are there. Alongside the .as class files, you should see: lago.swf, nieve.swf, and hielo.swf.
When you run your own wordlists for batch SWF creation, you may have long filenames that need to be renamed in batch. As you cannot have dashes in your AS3 class names, I use numbers to replace them when necessary, then I run a small utility .bat found in utility/rename_long_swfs.bat.txt of your download folder. Rename the extension of this file to .bat, then copy it into the word_scripts_sp_au_utf8 folder where your finished SWFs reside in order to do this renaming on a group of SWFs.

Conclusion

I hope this tutorial will help some of you to enjoy the wonders and true programming bliss that can come with SWF batch creation through DOS. To see hundreds of perfect multimedia SWFs created with just a few clicks is quite a great feeling! Thanks very much for giving this tutorial a read, and I look forward to any comments or questions that you may have.

Note: It's worth noting that ANT is often considered a worthy alternative for batch file creation, particularly for Mac users. Check out Jesse Freeman's Introduction to AntPile to find out more.