We want to generate a simple Flash file from scratch. Upon loading the file in Flash Player, a text of our choice should be displayed.
The basic idea behind Flash creation with JSwiff is to create a SWF document, add all SWF tags you need to the document, and finally write the document to a file.
Don't worry about how the document is written, or about the internal data representation
of a SWF file, JSwiff handles this for you. All you have to do is pass the document to a
SWFWriter instance
and invoke the write method. For more details, take a look at the
writeDocument method, which is common to all tutorials.
The most time-consuming and complex task when creating a Flash file from scratch is the choice and the configuration of SWF tags
If you are new to the structure of Flash documents, you might wonder what SWF tags are. The best way to understand them is to imagine SWF documents as ordered lists of tags. There are two kinds of tags: definition and control tags.
Definition tags are used to define elements like text, fonts, buttons, sounds, shapes etc. Once one of these elements is defined, a unique ID is assigned to it and from now on the element can be referred to as a character. However, a character isn't something you can see within a Flash movie, it is as abstract as a class in Java. Characters can be instantiated using control tags, which can also be used to render and manipulate character instances, and for movie flow control.
Of course, when starting to work with JSwiff, it is really hard to choose from the about
50 existing tags. In this case, and also when trying to render other, more complex elements,
or to achieve a certain behavior within your movie,
the easiest way to choose your tags is to use reverse engineering. Use a Flash authoring tool
like Macromedia Flash to generate the movie you need, then load it in JSwiff Investigator
to explore the structure of the movie. Start JSwiff Investigator by running the
com.jswiff.investigator.Investigator class.
Start your Flash authoring environment and use the text tool to enter a simple text line:
"Hello world!", then look at the file structure using Investigator. Macromedia Flash generates
four tags: DefineFont2, DefineEditText, PlaceObject2 and
ShowFrame.
DefineFont2 defines a font character. This tag can be really complex, as it can
contain glyph definitions, i.e. vector representations for each character of the font. This is
nearly impossible to be done programmatically. If you don't need to define your own font you can
use a device font, e.g. "Arial", or to be really sure that the font is available on every platform,
use an indirect font like "_sans" or "_serif" which is mapped to a device font (for example on
Windows, "_sans" is mapped to "Arial").
DefineEditText specifies the actual text. This tag is useful for dynamic text
generation, as the initialText property can be easily set to a string. Other text
definition tags use glyph indexes instead of strings and are much more difficult to use. The tag
references the font defined with DefineFont2 and it can be used to specify text properties
like text color or to set several flags like the read-only or the autosize flag.
PlaceObject2 is used to instantiate the text character defined with
DefineEditText. The depth the instance is rendered at has to be specified. A transform
matrix places the text at the desired position. The created instance is added to the display list,
a list of instances which are finally rendered using the PlaceObject2 tag.
The tags described above can also be created programmatically and added to a SWF document:
private static SWFDocument createDocument() {
// create a new SWF document
SWFDocument document = new SWFDocument();
// first we define a font for the text
// get a character ID for the font
int fontId = document.getNewCharacterId();
// use a standard font (e.g. Arial), we don't want to define shapes for each glyph
DefineFont2 defineFont2 = new DefineFont2(fontId, "Arial", null, null);
document.addTag(defineFont2);
// get a character ID for our text
int textId = document.getNewCharacterId();
// dynamic text is a good way to go, we use DefineEditText for this
// we don't care about bounds and variables
DefineEditText defineEditText = new DefineEditText(
textId, new Rect(0, 0, 0, 0), null);
// we have set the text bounds to a zero rectangle;
// to see the whole text, we set the autosize flag
defineEditText.setAutoSize();
// assign the font defined above to the text, set font size to 24 px (in twips!)
defineEditText.setFont(fontId, 20 * 24);
// set text color to red
defineEditText.setTextColor(new RGBA(255, 0, 0, 255));
// don't let viewers mess around with our text
defineEditText.setReadOnly();
// finally set the text
defineEditText.setInitialText("Hello world!");
document.addTag(defineEditText);
// place our text at depth 1
PlaceObject2 placeObject2 = new PlaceObject2(1);
placeObject2.setCharacterId(textId);
// place text at position (45; 10) (in twips!)
placeObject2.setMatrix(new Matrix(20 * 45, 20 * 10));
document.addTag(placeObject2); // place text
document.addTag(new ShowFrame()); // show frame
return document;
}