8.1.3 KineticFusion Text Handling Features
There are two types of text associated with SWF movies:
- Static text : Static text is text whose characters and relative character positions are fixed when the SWF is created and these cannot be changed at runtime. Static text is also guaranteed to be visible as all required information for displaying the static text is embedded directly in the SWF. The proportions of a static text symbol can be altered when displayed on the timeline but the actual characters of the text field and their position relative to each each other is fixed when the SWF is created. Static text is represented by the Text element in RVML.
- Dynamic text: Dynamic text is generally text whose contents can change at run-time, either programatically using ActionScript or by allowing user input. The font characters that are displayed for dynamic text can be taken either from an embedded font in the SWF, or using an external font selected by the player as the closest match to the specified font. Both dynamic and input text symbols are represented by the EditField element in RVML.
The Flash IDE further refines dynamic text by adding an 'Input Text' category but the characteristics of this category are the same as that of dynamic text - an input text symbol has a single additional 'editable' property specified for it. There are also certain differences in the terminology between the Flash IDE and KineticFusion. Specifically, when 'Use Device Fonts' is selected in the Flash IDE for a static text symbol, the symbol is actually represented in SWF as a dynamic text symbol. Similarly, if a target link is associated with a static text symbol the link text is converted to HTML and the underlying symbol is also represented as a dynamic text symbol. KineticFusion takes a single consistent approach for all text symbols.
Each text symbol is associated with a single Font symbol. A font defines the look and feel of a text symbol defining the shapes for each character, called glyphs, and additional font information including style, codepage and font metrics. Font metrics details additional information for specifying the gaps between characters, the default gap between consecutive lines of text and the location of the base line of each character shape, so that all character line up naturally. There are two kinds of Font symbols supported:
- Embedded font symbols: the outline of each character of the font used in the SWF is exported with the SWF. Embedded font symbols can be used for any text including rotated text.
- Device fonts: only the general font description is included with the SWF and the Flash Player is responsible for finding a system font that matches this information to render the text. Device fonts are only applicable for dynamic/input text symbols and text displayed using a device font cannot be rotated.
There are two RVML elements used to define Font symbols for inclusion in an output SWF: the Font element and the FontDefinition element. Both of these elements have the following attributes:
- forceOutput: When set to 'yes', the Font symbol will be output to the SWF file even if no symbol explicitly refers to the font.
- fontRange: This defines the minimum range of characters that should be output as part of this font
- codeClass: The codepage used to map character codes to glyphs
There are several ways of creating Font symbols in RVML
When an SWF movie containing font symbols is decompiled, all the font symbols are stored externally in SWF files in a repository. The fonts are stored in native SWF format so that they can be quickly loaded when referenced. These fonts are stored in a repository specific to the decompiled SWF as the font definitions are often incomplete storing only the font information need for that specific SWF. A reference to the font file is added to the output RVML document. An example of such a font in RVML is:
<Repository repositoryType='File' repositoryBase='C:\repository' repositoryName='TestResources'> <Font id='Arial.Italic.Bold' fontName='Arial' fontStyle='(bold, italic)' resourceLocation='Arial_001.swf' knownCodes='32, [48-49], 101, 116, 120' fontRange='defined' /> </Repository>
This is extracted from the output of an SWF that has been decompiled by KineticFusion. The font file is stored in the TestResources repository under c:\repository and the font file is stored in the file 'fonts/bolditalic/Arial_001.swf'. KineticFusion automatically lists the known characters defined in the font, for reference only.
KineticFusion can also use TrueType fonts. These are the native fonts for many operating systems and contain a great deal of compressed font information that needs to be converted to SWF format before they can be used in SWFs. For this reason, TrueType fonts should be used sparingly from RVML as it is often more advantageous to convert a TrueType font to SWF format just once and store it as a system font. An example of such a font in RVML is:
<Repository repositoryType='AbsoluteFile'> <Font id='Arial.Italic.Bold' fontName='Arial Bold Italic' resourceType="external" resourceLocation='c:/Windows/Fonts/Arialbi.ttf' fontRange='defined' /> </Repository>
KineticFusion supports a global font repository, defined by the 'kinesis.repository.systemFontPath' configuration option. By default, this is located under the projects folder in a standard installation. The system font folder is designed to be used as the main repository for TrueType fonts that have been imported using the '-font' command line option, or using the GUI 'Import TTF Font' option. System fonts are used in RVML when no resource location is specified. System fonts are also used as a fallback to supply glyph information for modified text in an RVML document after decompiling. An example of such a font in RVML is:
<Repository repositoryType='File' repositoryBase='C:\repository' repositoryName='TestResources'> <Font id='Arial.Italic.Bold' fontName='Arial' fontStyle='(bold, italic)' fontRange='defined' /> </Repository>
This will first look for a system font called 'Arial Bold Italic' then, if not found, it will attempt to get the system font with the name 'Arial'.
KineticFusion can also create an explicit XML representation of a font using the FontDefinition element when the configuration property 'kinesis.xml.outputFontDefinitions' is defined as 'yes'. The FontDefinition element defines the vector shape of each included glyph, and the default advance for each glyph. Each glyph is defined within an abstract geometric square of length 51.2 pixels. The advance specified for each glyph specified the distance, relative to the origin of the glyph, at which to draw any subsequent glyph. The greater the advance, the greater the spacing between characters. In addition to glyph information, The FontDefinition element also specifies general font metrics such as ascent (the portion of the font above the baseline), descent (the portion of the font below the baseline), leading (the minimum gap between lines of text to avoid glyphs overlapping), and optional kerning information (adjustments made to the advance of glyphs when followed by specific characters).
KineticFusion uses two different RVML elements to represent text within an SWF. Each element type is associated with a Font symbol and a font size and color.
An EditField element is used for the following kinds of text:
- HTML-based text including links and images
- Editable text
- Selectable text
- Text rendered by a device font
- Dynamic text that can be changed from ActionScript
- Text that should be dynamically positioned and wrapped
Each EditField element can specify the font characters of the corresponding font symbol that are required to be included with the SWF. For example, if an EditField is to be used to input numbers, then it can be defined as:
<EditField id=editField' bounds='bounds(-2.0, -2.0, 42, 16) fontID='TrebuchetMS' fontSize='10.0' charLimit='10' color='black' properties='(editable)' fontRange="['0'..'9'], '.', ','"/ >
The fontRange attribute in this example ensures that the numeric, decimal and separator characters are included in the output font.
A static text element is used for the following kinds of text:
- Text that needs to be rotated/skewed
- Text that needs to look the same on all platforms
- Text that cannot be altered or selected
- Text that can be used as masking symbol
- Text that need to take advantage of kerning information for better presentation
While the concept of static text appears simpler than that of dynamic, manually creating static text is more complicated than using EditField Symbols. Static text is represented by the RVML Text element, which defines the bounds of the symbols, and one or more nested Segment elements that define each piece of text that has similar characteristics e.g.
<Text id='text' bounds='bounds(1.2, 3.0, 60.75, 14.7)'> <Segment text='text 10' fontID='Arial' fontSize='16.0' y='15.0' color='black' advances='(5.35, 8.9, 8.9, 5.35, 4.45, 8.9, 8.9)' /> </Text>
While this all looks very complicated; in general KineticFusion can do most of this work for you:
<Text id='text' bounds='auto'> <Segment text='text 10' fontID='Arial' fontSize='16.0' y='15.0' color='black' advances='auto' /> </Text>
The first defined Segment element defines the general characteristics of the text such as the font, font size and color. These are applied to all subsequent Segment elements unless explicitly changed. Each segment specifies the text to be displayed in the segment, the relative location of the segment relative to the symbol origin (using x and y attributes), and an advance for each of the characters specified as part of the text. The advance, if you remember, is associated with each glyph and is adjusted using additional kerning information. The advance for each character in a segment includes all kerning calculations already. Rather that calculate these advances, setting a value of 'auto' means that KineticFusion will automatically calculate the relevant set of advances using available kerning information. It should be noted that kerning information is generally only available for TrueType fonts that are referenced directly or from the system font library.
Each font resource created by KineticFusion is stored inside an SWF movie that contains a single font definition and a testcard so that users can browse the font. The test card displays the standard characters of the font, however each test card is also editable. Clicking on a single line of text allows the user to see exactly how specified text will look in the font.
It is not uncommon for users to wish to change the contents of one or more text symbols in an an SWF movie. This is easy to do using KineticFusion but thee are several things that users should be aware of. Pay attention as this may save you some time later!
SWFs are often created using the bare minimum of font characters required to render the text they are displaying. This means that the external font file that was decompiled from the SWF will not be a complete font file: it may be missing glyphs, advances, and even character codes.
When character codes are missing, this will be represented by a segment having a binaryCodes attribute instead of a text attribute. This is generally not the case for SWFs created within the last couple of years, however some older SWFs did not specify character codes for the glyphs and so only the location of the glyph inside the font definition can be used. In this case, it is extremely difficult to retrieve the desired text by inspecting either the segment element or the font itself. Instead, you need to manually identify the text from the Flash player, and replace the 'binaryCodes' and the 'fontID' attribute with a new Font reference.
Equally it's possible that the advances are not specified for the glyphs defined in a font - this is common if the font is used only for the rendering of static text, since static text already has the advance information embedded in each segment. There is no way for KineticFusion to know for sure what the actual advance a glyph was defined to have from only the segment advances information. This information, as mentioned previously, is a combination of the advance and kerning information so that the advance for the character 'A' followed by the character 'V' is less than the advance for the character 'A' followed by a 'X'. KineticFusion will attempt to guess the general advance using the maximum specified advance for each included character however when the sample set is small this can still generate errors. If, when modifying segment text using known characters, it appears that the spacing between the the characters is distorted, there are two possible reasons:
- The 'advances' attribute value was not set to 'auto' after modifying the text. This is a common cause of error - the new text will not have the same characters in the same order unless you're using a non-proportional font, ensure that known advances are used by getting KineticFusion to recalculate advances
- The advances calculated by KineticFusion are wrong. This is possible where there was not enough information to remove any kerning adjustment from a glyph advance and so an advance may be less than it should be given the character that's following it. Here are two possible solutions to this:
- decompile the SWF again and make manual adjustments to the advance list for those characters that need adjusting
- decompile the SWF font file as a FontDefinition and make adjustments inside the font file instead.
Of course, in cases like this, it may be better to scrap the decompiled font altogether and replace it with a similar system font reference.
When a text symbol needs to be modified to include characters that are not in the original SWF font definition, then KineticFusion will automatically attempt to extract the missing glyphs and associated kerning information from the defined system fonts. Where the font cannot be found in the system font folder, the user can specify a default font family whose glyphs take the place of the missing glyphs. The default font family is defined using the configuration property 'kinesis.repository.defaultSystemFont'. KineticFusion will attempt to match the font with the default font of the same style as that of the missing font using the default Windows font naming conventions.
Copyright 2003-2005 Kinesis Software. All rights reserved.