Using Antialiaser

Overview


Antialiaser is an AIR application developed by Cycle Information Technology, S.L. (aka Cycle-IT). Antialiaser makes OpenType and TrueType font visualization easy; allowing you to customize them to use them within your Flex and AIR projects.

Antialiser workflow:

  1. Import the fonts you need in your Flex or AIR project.
  2. Fine-tune and adjust your fonts for optimal visualization.
  3. Copy the generated CSS code and include it in your project.

This application is designed to be used by both professionals with years of experience and Flex/AIR design newcomers with no experience at all.

Developers who are used to Flex will find in Antialiaser a quick and a accurate tool, which will allow them to include required fonts for their Flex 3 projects.

Apart from that, creative types, graphic designers and UX designers will be able to add bespoke fonts easily. Antialiaser leverages their creative potential in the development and design of AIR and Flex-based applications, commonly known as RIAs.

Antialiaser enables visual adjustments in real time (as if it were a WYSIWYG editor) in order to fine-tue your original design. (If your main Flex and AIR IDE is Flex/Flash Builder, then you already know that is no easy task. In that sense, Antialiaser fills the gap that exists nowadays in many professional design tools for Flex).

Finally, and from an educational point of view, Antialiaser is a great tool and reference for newcomers, designers and developers: it shows typographical concepts and elements that are closely related to many Flex components, such as Label and Text controls.

Back to top

Workspace


Within Antialiaser, the workspace is divided into three areas:

  1. Fonts library
  2. Several font viewers
  3. Properties and style editor

The following sections define all these areas.

A. Embedded fonts library, B. System fonts library, C. Current font view, D. Zoom view, E. Sample text selector, F. Properties and style editor, G. CSS output panel, H. Configuration.

Back to top

Font panels

The font panels organize typographies in two separated lists: one for custom embedded fonts and another one for the user's own system fonts.

Embedded fonts list

The list at the top shows embedded fonts; every time you embed a new font, that font will be automatically added to this list.
There are two buttons on this panel: the first one is used to embed new fonts — clicking on the other one, the user will download in SWF a font that was already embedded. For further information about font embedding, you can read more in the section 'How to embed fonts'.

Fonts downloaded as SWF may be used on your Flex projects; add them to your project's source folders to use them.

Device fonts list

System fonts library shows fonts already installed on your own system. On Windows, the system font path is typically C:\Windows\Fonts\ ; on MacOS X it is /Library/Fonts/



Flex lets you use system and embedded fonts in your applications; Antialiaser will prepare and optimize whatever font you want to use, allowing you to visualize every single change on a property or styles.

Text viewer

This panel showcases some text using the font you have selected previously. This way, you can see instantly the effect of all the changes you have done. This provides a very valuable visual feedback which will make your font customization easier.



You can find four buttons on this panel:

  • A. Show/Hide Zoom view
  • B. Activate/De-activate transparent background
  • C. Show/Hide Comparison view
  • D. Take snapshot

Every single change you make on the properties or style editor will be automatically reflected on this viewer.

Zoom viewer

This view shows a 4× enlarged snapshot of the same text being shown on the Text viewer. Its goal is to make property and style adjustments even easier. This feature is very useful when adjusting properties like font-sharpness and font-thickness. It will also help you to spot defects on your font.



Considerations:

  • This view does not support background transparency yet.
  • The Zoom view does not accurately represent a rotated text. That is so because in Zoom Viewer it is a bitmap image. Because of this, it is not recommended to take in consideration this view with rotated fonts.

Comparison view

Comparison view is a split view of the area of the Text viewer: on the right-hand side there is an additional area which will show a still snapshot taken from the Text viewer at some point in the past.
The purpose of this view is to make some font adjustments easier, since it will help you to make changes more accurately: comparing two snapshots taken from one font (with minor changes) or from two different fonts.

You can take a snapshot whenever you want, just by clicking the button labelled 'take snapshot'.



Considerations:

  • This view does not support background transparency yet.
  • A rotated snapshot does not accurately represent a rotated text. That is so because it is a bitmap image. Because of this, it is not recommended to take in consideration this view with rotated fonts.
Back to top

Sample Text

The Sample text panel shows three operational modes:

  • Mode 1 (default): a 'Lorem Ipsum' paragraph, 52 words long.
  • Mode 2: Latin-1 character map
  • Mode 3: custom text defined by the user. The user is encouraged to enter any text here to customize their fonts and see how they behave.

Back to top

Editor panel

The Edition panel lists all available properties and styles that you may want to configure for your Flex 3 and AIR components. Each edition done here will automatically affect the Text and Zoom viewers.
The property or style currently being edited is shown inside a text box, so that you can cut and paste at will. On the right-hand side, at the end of every property and style, you can find a button that will restore default vaules. Broadly speaking, those default values match the default values of Flex 3 properties and styles.



Properties and styles are organized in three groups:

  • A. Colors
  • B. Common properties of fonts in Flex 3 text component
  • C. Properties that apply only to embedded fonts

Next section describes every property included in previous groups:

Colors

In this group, you can establish the colour of your text (color), text background colour (background-color) and text object background color (opaque-background).

Common font properties

  • Font weight & style (only for system fonts): you can set your font weight as normal or bold and your font style as normal or italic. If you have selected an embedded font, these properties won't be editable because fonts are embedded with these properties already set. Still, for embedded fonts, Antialiaser shows the weight and style values that were set.
  • Decoration: whether the text is underlined (text-decoration).
  • Alignment: you can decide how your text will be aligned (left, center, right or justified).

Further down, next to the aforementioned controls, you will find some sliders to change the following properties:

  • Font size: to change the font size (font-size). Font size is expressed by the height of the text, in pixels. In the Halo theme, the default value is 10 for all controls except the ColorPicker control. For the Halo themed ColorPicker control, the default value is 11.
  • Letter spacing: to adjust blank spaces between characters uniformly (letter-spacing). The default value is set to 0px.
  • Leading: to adjust the vertical gap between adjacent text lines (leading). The default value is null; meaning no extra vertical gap between lines. You can use decimal values such as 1.75.

Embedded font properties

This group of settings is only available for embedded fonts.
Antialiaser ships with three embedded fonts installed — the Pigiarniq font family (regular, bold and italic).
You can modify these properties:

  • Antialias type: this property corresponds to the antiAliasType property of internal TextField controls. Valid values are normal and advanced. The default value is advanced, which enables advanced anti-aliasing for the font. If you want to prevent the compiler from using advanced anti-aliasing, set this property to normal. This style has no effect for fonts embedded without the advanced anti-aliasing information.
  • Grid fit type: Sets the gridFitType property of internal TextField controls. Valid values are nonepixel, and subpixel. The default value is pixel. This style only applies when you embed fonts with advanced anti-aliasing and the fontAntiAliasType property is set to advanced.
    Warning: This property is automatically set to subpixel if text-align value is other than left. Due to this, the text of components such as Button is rendered by default in subpixel mode.
  • Sharpness: Sets the sharpness property of internal TextField controls. Valid values range from -400 to 400. The default value is 0. This style only applies when you embed fonts with advanced anti-aliasing and the fontAntiAliasType property is set to advanced.
  • Thickness: Sets the thickness property of internal TextField controls. Valid values range from -200 to 200. The default value is 0. This style only applies when you embed fonts with advanced anti-aliasing and the fontAntiAliasType property is set to advanced.

On top of this, you can change the following properties for embedded fonts in Flex 3 projects:

  • Kerning: enable/disable kerning information of the selected font. The default value is false (disabled). Kerning is the process of adjusting the spacing between characters in a proportional font, usually to achieve a result that is visually coherent and more aesthetic. It should be used only when it is necessary, i.e, with large fonts. You cannot apply kerning to some font families, such as Verdana and monospaced ones like Courier New.
  • Alpha: sets the transparency of the color of the text. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default value is 1. As an example, an alpha value of 0.25 sets transparency to 25%. Because alpha is an object attribute and not a style property, this value will not be shown on the CSS output panel.
  • Rotation: sets the rotation of the text, expressed in degrees, relative to its original orientation. The default value is 0. As an example, a rotation of 30.5 will rotate a display object 30.5º degrees clockwise. By default, the pivot point, or rotation center of a DisplayObject is located at the top-left corner (x=0,y=0) of the DisplayObject itself.
    Again, rotation is an object attribute and not a style property, therefore this value will not be shown within the CSS output panel.
Back to top

CSS output panel

This panel shows CSS code, updated in real time in response to user actions, reflecting all changes in styles.
You may use this code as it is, to include it in your Flex and AIR projects.



Warning: All paths shown within the CSS panel assume that the SWF containing the embedded font is located inside the same .css file directory.

Back to top

Settings window

This configuration window allows you to set or update the path to the Flex mxmlc compiler. Correctly setting this path is required to use embedded fonts.


Flex mxmlc locations

If you are using Flash Builder (or Flex Builder), mxmlc will be typically found within its installation directory. The common locations are:

  • Windows, Flex Builder 3: install_drive\Program Files\Adobe\Flex Builder 3\sdks\sdk_version\
  • Windows, Flash Builder: install_drive\Program Files\Adobe\Adobe Flash Builder 4\sdks\sdk_version\
  • Mac: install_drive/Applications/Adobe Flex Builder 3/sdks/sdk_version/
Back to top

How to embed a new font


As a developer or designed, you want to make sure that your users will see exactly the font you want on your project. To achieve that, you may embed that font inside your application's SWF file. 
Embedded fonts have a number of benefits:

  • Embedded font characters are anti-aliased, making their edges appear smoother.
  • With embedded fonts you can control precisely the smoothing through the font-sharness and font-thickness styles.
  • In Flex and AIR you can rotate text only with embedded fonts.
  • In Flex, only embedded font text can be made transparent or semitransparent.
  • You can use the kerning CSS style only with embedded fonts.

Note: The disadvantage of using embedded fonts is that they increase the file size and therefore the download time of your application.
To avoid this disadvantage, it is recommended to restrict the set of characters that are included.

To embed a new font, click the button labelled with a plus-sign (it is located at the top-right corner of the fonts panel). Please note that you should set the mxmlc path (the path to the Flex compiler) for this feature to be enabled. When clicked, the modal window 'Embed new font' will show up:



Once the 'Embed new font' dialog box is open, follow these steps:

  1. Browse your file system and select the font file (.otf or .ttf) corresponding to the typograpy you want to embed.
  2. Set an alias for the embedded font. From that moment on, that alias will be used within your .css files. By default, Antialiaser will set a simple alias for you: the name of the file font (excluding some non-valid characters). When choosing an alias for the font, bear in mind that the alias will be used in your Flex project as the common identifier for a family of fonts which may comprise several styles (normal, bold, italic). Because of that, it is recommended that you set a generic name.
  3. Select font weight: bold or normal. The default value is normal. Note that in order to embed your font correctly you have to set the right font weight for your font, exactly as it is declared inside the font file.
  4. Select font style: normal or italic. The default value is normal. Again, you should set the same font style that was set inside the font file when it was created.
  5. Select antialiasing mode: advanced or normal. The default value is advanced.
  6. Select the Unicode range to embed: all or custom. The default value is all. When custom is selected, you will be able to define your own custom Unicode ranges.

Finally, click the button labelled 'Embed font'. Once the font is processed, it will be automatically added to your embed fonts lists. At this point you can simply close the 'Embed new font' window, or continue embedding as many fonts as you want.

Note: if some error happens while processing the font, please review the font weight and font style properties. Bear in mind that you shall choose correct values for them. Repeat the process until the font is embedded correctly. The Flex compiler will report any error occurred while processing the font.

Back to top

Limitations


How to delete custom embed fonts?

Due to AIR desktop applications security restrictions, it is not possible to delete embedded fonts directly from inside Antialiaser. When Antialiaser embeds a font, it launches the mxmlc compiler which outputs the compiled font into the application directory. This is the only way to achieve it because we are not able, neither allowed, to write or delete directly from an AIR main directory (security sandbox restrictions apply).

We do know that this is a limitation. We are working on some workaround to provide a way to delete an embedded font directly using Antialiaser (relaying on some script mechanism). In the meantime, you could delete embedded fonts manually. To do this, follow these simple steps:

  1. Open this directory: <Antialiaser Installation Dir>/data/myfonts/
  2. Look for desired fonts to delete.
  3. Restart Antialiser to refresh the list of embedded fonts. This is necessary because Flash Player does not provide a way to unregister embedded fonts, so we must regenerate our embedded font library from scratch.

Transparent backgrounds in zoom and comparison views

The current version of Antialiser does not support this kind of transparency in zoom and comparison views.

Styles and properties: minimum and maximum values

font-size, letter-spacing and leading values have been constrained to min and max slider values to make customizations easy. If you need to change those values, you will be able to do so when you import auto-generated CSS styles within your Flex 3 or AIR projects.

The maximum allowed value for the font-size property is 127pt when used in Label, Text and TextArea Flex 3 controls. If you need sizes larger than 127pt, you may achieve that using scaleX and scaleY properties in previous text controls.
Back to top

Troubleshooting


'JRE Not found' message

In some cases, when you set the path to the mxmlc compiler, you might get the following error: "JRE not found". This might happen if you have never installed a Java Runtime Environment or Eclipse on that computer. In such case, you simply need to add an environment variable in Windows:

Right-click My Computer, and then click Properties.
Click the Advanced tab.
Click Environment variables.
Click New to add a new system variable name and value:

Name: "JAVA_HOME"
Value: "C:\Program Files\Adobe\Adobe Flash Builder 4.5\jre"

Replace the value here with the full path to the directory "jre" of your local installation of Flash Builder.

'Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.' message

Make sure that <Antialiaser Installation Dir>/data/myfonts/ has write permissions. If not, the mxmlc compiler won't be able to output compiled SWF font into it and Antialiaser could not load it later.

Back to top

Feedback


Antialiaser is Freeware and it is provided as is. In spite of this, if you are experiencing problems with the installation, or using this software, please contact us at feedback@cycle-it.com. We will provide an answer as quickly as we can.
Back to top

Legal notice


Antialiaser is a FREE application, not for sale, designed and developed by Cycle-IT.

This software is designed only for personal use and is NOT for RESALE. You may not sublicense or distribute for sale this software.

Font embedding

Before embedding a font, read carefully the licensing rights, in particular those about embedding. Many fonts are distributed or sold with strict licensing policies to restrict their use as embedded assets on third-party applications. Embedding licensing rights are granted by the vendor of the font.

The table below describes embedding rights according to OpenType Specification version 1.6:

Installable Embedding Fonts with this setting indicate that they may be embedded and permanently installed on the remote system by an application. The user of the remote system acquires the identical rights, obligations and licenses for that font as the original purchaser of the font, and is subject to the same end-user license agreement, copyright, design patent, and/or trademark as was the original purchaser.
Restricted License embedding Fonts that have only this embedding right must not be modified, embedded or exchanged in any manner without first obtaining permission of the legal owner. Caution: For Restricted License embedding to take effect, it must be the only level of embedding selected.
Preview & Print embedding The font may be embedded, and temporarily loaded on the remote system. Documents containing Preview & Print fonts must be opened read-only; no edits can be applied to the document.
Editable embedding The font may be embedded but must only be installed temporarily on other systems. In contrast to Preview & Print fonts, documents containing Editable fonts may be opened for reading, editing is permitted, and changes may be saved.
No subsetting When this bit is set, the font may not be subsetted prior to embedding.
Bitmap embedding only Only bitmaps contained in the font may be embedded. No outline data may be embedded. If there are no bitmaps available in the font, then the font is considered unembeddable and the embedding services will fail.

The four levels of embedding rights (those with a gray background on the table above) are defined as mutually exclusive in OpenType specification versions from 1.2 to 1.6 (in "OS/2 and Windows Metric table" versions 2, 3, and 4).

In TrueType specification versions 1.5 and 1.66 (in "OS/2 and Windows Metric table" versions 0 and 1) the four levels of embedding rights were not defined as mutually exclusive. If multiple levels of embedding rights are assigned to a font, the least restrictive license granted takes precedence.

Back to top

Trademarks

Pigiarniq font is the standard font used by the Government of Nunavut and it is designed for reading Inuktitut syllabic web pages for both Windows and MacIntosh computers. The Pigiarniq font is FREE to all users. Pigiarniq is a trademark of the Government of Nunavut.

Cycle-IT, the CycleIT logo, Antialiaser and the Antialiaser logo are either registered trademarks or trademarks of Cycle Information Technology S.L.