Flex 4 SDK – the Halo namespace and embedded fonts

I have been using the Flex 4 SDK for a while now, since the Beta 2 release, and had a few projects containing mxml code with spark components. Since then Adobe has made some changes, and I found that in order to use few of the new components I need to upgrade.

One of the best references I use is  Tour de Flex and it is now based on a newer build, so I decided to grab the latest stable build from Adobe – that is build 13875. After installing it on my Flash builder – not to my surprise – I found that my projects shows build errors in any mxml that has spark and halo components, and the compiler refuses to recognize the mx namespace.

Now, you’d think Adobe would include some notes about these kind of changes but, alas,   you are on your own. Long story short, the halo namespace that was mapped to the mx components was renamed to mx (thanks to  Peter deHaan’s post for this revelation).

So to fix the problem, simply rename all ‘ns.adobe.com/flex/halo’ to ‘ns.adobe.com/flex/mx’. Don’t forget the includes in the CSS file, if you have one.

Embedded fonts problems

Now that my project compiles and runs, I notice that the fonts don’t look right. However, this time the nice folks at Adobe provided us with the following warning:

warning: incompatible embedded font 'ArialFont' specified for mx.controls::UITextField (UITextField36).
This component requires that the embedded font be declared with embedAsCff=false.

Well, as it turns out, the new SDK now assigns two different types of embedded fonts: CFF embedded and non-CFF embedded. The CFF is used exclusively by spark components, while the mx components can only use non-CFF – too bad, since it practically means you cannot share styles between, say, spark and halo labels and text fields like I did.

To fix this, you’d have to define each of your embedded fonts twice: one instance for spark, and another instance for halo..  oops, I mean mx. In the mx font embed, set embedAsCFF to ’false’, and then create styles for both types and use them from their corresponding components. There is a detailed explanation with code samples on the Adobe web site.

That is my best solution to date, and while it consumes twice the memory for fonts, you get to use your fonts for both mx and spark. If anyone found a better solution, please post a comment.

10 thoughts on “Flex 4 SDK – the Halo namespace and embedded fonts

  1. textFieldClass=”mx.core.UIFTETextField” for ProgressBar.
    The label become visible, but I still not see my embeded artist font :((

  2. I find it for ProgressBar!
    Extend your own class from ProgressBar and do the next override:

    override protected function createInFontContext(classObj:Class):Object
    {
    var res:Object = super.createInFontContext(classObj);

    if (res is UIFTETextField)
    UIFTETextField(res).embedFonts = true;

    return res;
    }

    Do not forget set textFieldClass to ”mx.core.UIFTETextField”.

  3. Thanks for this, it solved my bug! I’m currently moving from Flex 3.3 to Flex 4.1 and adding embedAsCFF: false; to the CSS made my fonts work with the mx components.

    @font-face
    {
    src: url(“../../assets/fonts/arial.ttf”);
    font-family: “Arial”;
    font-weight: normal;
    advancedAntiAliasing: true;
    embedAsCFF: false;
    }

  4. I have found that specifying the exact character range you need will reduce embed size by 100-200 k per font
    @font-face
    {
    src: url(“../../assets/fonts/arial.ttf”);
    font-family: “Arial”;
    font-weight: normal;
    advancedAntiAliasing: true;
    embedAsCFF: false;
    unicode-range: U+0020-U+007D;
    }

Comments are closed.