What we are going to look at now are some advanced Anti-Alias settings that are available to you when working with Flash type. The approach to font embedding that we worked within the last topic.
Please open the file Fonts_wt4_AntiAliasingType.mxml, and take a moment to look at the two Class Selectors that have been created. We have a Class Selector of times which is specifying the embedded Times font, which has been embedded from a SWF file as Flash type.
Then we have a second selector timesNormalAntiAlias, where a property, font-anti-alias-type has been set to normal. If you scroll down you will see a canvas in which four labels have been set to the “times” style, and four have been set to the timesNormalAntiAlias style.
Run the application. Take a look at the small 12 point type fonts, and notice that the upper label, the FlashType label, is easier to read, its clearer and more distinct, at least it will be on most monitors than the lower Normal AntiAlias.
The Flash 8 player introduced a new approach to Anti-Aliasing, which is the method by which fonts are smoothed at their edges to make them more readable. If you have worked in the Adobe Flash 8 Pro environment, this approach is what would be called Anti-Alias for readability. Whereas the lower approach is Anti-Alias for animation or traditional Flash Anti-Aliasing. So you will notice, based on our styles, that Anti-Alias credibility is the Flex default. If you wish to use the older style Anti-Aliasing, you must explicitly set the font AntiAlias type from its default to normal.
Return to Flex Builder 2 using Alt tab, and notice this relationship. Times has no font AntiAlias type set, so it defaults to the advanced smoother Anti-Aliasing. To use the older style Anti-Aliasing, you must explicitly set the font AntiAlias type to normal.
Now let's look at a second setting. Open the file Fonts_wt4_Thickness.mxml. FlashType fonts support a thickness property that lets you control the thickness of the lines within a font.
Notice that four Class Selectors for Styles have been defined that are using the embedded FlashType font, and setting a property called font-thickness in a range from -200, 0, 100, and 200, and then those have been applied across four sets of labels: thickness -200, 0, 100, and 200.
Run the application, and notice the effect that the thickness setting has on the appearance of our font. Again, this setting is available in a range from -200 to +200.
Close the browser, and now open the file Fonts_wt4_Sharpness.mxml. Here you will see that a font-sharpness property has been added to these Styles which relate to our embedded Times font family. Notice however that these are in a range from -400 to +400, and again, they have been applied across four sets of labels.
Run the application, and notice the effect that the font-sharpness setting has on our embedded FlashType font at different settings.
Close the Browser, and now open the file Fonts_wt4_GridFitType.mxml. Notice the font grid-fit-type property which has been assigned within these Class Selectors to the embedded FlashType font; three possible settings: none, pixel, and subpixel. This setting controls how a given font will be displayed in relation to the pixel grid of the user's monitor; whether strong lines will be forced to fit the grid or not.
This setting in particular may be affected by your monitors, so what you see may or may not be what another user would see. But notice the difference in the 12 point type. The first label has no GridFit applied to it. The second has the pixel setting applied, and the third has the subpixel setting applied. You may notice that setting GridFit to pixel makes smaller point sizes easier to read.
Close the browser, and right click over any one of your files, select Close All.
Transcription by:
Scribe4you Transcription Services