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:
- You don’t have Flash installed on the PC where you are working
- You want to create SWFs in bulk
- 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 [...]
No comments:
Post a Comment