Use Flash Text Engine in MX Components in ANT

The title of this post is what I googled endlessly for like 2 hours trying to figure out how to do this.

Hopefully you’ll come here when you google this and get the answer you need. For you fine folks, I’ll save you some time. Add this to your compiler options:


      
 

For the rest of you – maybe you’d like to know what this is or get a little more background.

“Use Flash Text Engine in MX Components” is a setting you can check in the Flash Builder compiler options for a project. Old style Halo (MX) components from Flex 3 use the old text engine.

As of Flex 4, we have a brand new text engine. Unfortunately, Adobe hasn’t completely written all the new components yet for Flex 4 (Spark). This means that your Flex 4 project will probably have a mix of Spark and Halo (MX) components.

One of the most frustrating things about this mix for me is working with fonts. For Spark components, you need to embed your fonts in the Compact Font Format (embedAsCFF=true). For MX components, you need to embed your fonts as non CFF (embedAsCFF=false). This could potentially mean embedding one set of fonts for your MX components and another set for your Spark Components.

Not only does this increase your application size, but it can get really hairy trying to work with styles. You need to identify all components that use Halo/MX components and tell them to use the correct font. If you go low level like label, you need to recognize that things like Alerts are MX components and they use MX labels, while if you just make a Spark label, you’ll be using Spark. So this means creating separate styles for s|Label and mx|Label.

Fortunately, Adobe made a workaround in our MX components. They allow you to use the new text engine in your MX components by checking the “Use Flash Text Engine in MX Components” option in Flash Builder.

While that’s great in Flash Builder, what if you want to use this option outside of Flash Builder? What if you want to do a command line compile, or better yet create an ANT build file.

For the command line option, information is relatively easy to find:
http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f-26a13bbf123c441239d-8000.html

Basically just use the theme argument and add a theme to the compiler options
-theme+=myflexhome/frameworks/projects/spark/MXFTEText.css

This is a special CSS file that Adobe made just for this purpose.

I was a little stumped on how to put it in an ANT build script, though. I tried:

 
    

Unfortunately, this completely replaces the theme, and doesn’t add a CSS file to your themes. It worked decently enough for my project (save all the warnings I got).

Luckily another guy on my project, TJ Downes figured out that if you use the “append=true” ANT tag option, you can make this property additive, so you end up with:

      
 

So there you have it. I couldn’t find this anywhere, so hope this helps you!

5 thoughts on “Use Flash Text Engine in MX Components in ANT”

  1. Dear Ben,

    Thank you for your great post. I am trying to use flash text engine with MX Tree Component to be able to see Pashto script, which is one of the complicated Arabic scripts. Everything works great on Windows, but when I test the project on MAC i have some problems with certain letters of the Pashto Alphabet. Do you know what might be the problem? Should I embed the font somehow specifically for Mac (I use Arial font with this Tree Component).
    I would really appreciate any help.

    Thank you,
    Sukhrob

  2. I’m not familiar with Pashto at all Sukhrob, so I don’t know how much I can help you.

    If you are actually embedding the font in your SWF, you should see no difference from Mac to PC. If you aren’t embedding the font, and just specifying that you want to use Arial – you probably would see quite the difference from Mac to PC.

    Arial is a huge font set, it has tons of characters, so it wouldn’t surprise me that all the characters you need would be on Windows. On the Mac, you probably wouldn’t have Arial installed, and it would default to the next closest font (probably Helvetica). I don’t believe that Helvetica has many characters, so you would probably end up seeing missing characters.

    If you don’t actually have a font referenced in your CSS file, like so:
    @font-face {
    src: url(“../assets/MyriadWebPro.ttf”);
    fontFamily: myFontFamily;
    }

    …then you aren’t embedding it, and Flash will use what it finds on the system.

    If you’re sure you’re embedding it, then I don’t know the problem! Could it be that whatever data source you’re reading your Pashto text from is mapping characters differently on the Mac vs PC? Like for example, if on the PC, your unicode value was 56 it would pull from slot 56 in your font. But if on the Mac, your data source said that the same character was value 109 – well, you have the same font embedded, so, it wouldn’t be shown correctly since your character is still at slot 56.

    I hope that helps! Sorry I don’t know more!

  3. Thank you Ben,
    I just did following embedding in my assets.css

    @font-face {
    src: url(“arial_1.ttf”);
    fontFamily: myArialEmbeded;
    }

    mx|Tree {
    fontFamily: myArialEmbeded;
    fontLookup: embeddedCFF;
    fontSize: 12;
    }

    and here is how I load Tree in Pashto.mxml:

    Again, on Windows – everything looks great. But on Mac it still looks like a different font is being loaded. Maybe i am doing something different and the arial_1.ttf font is not being embedded at all.

    Thank you for your help,
    Sukhrob

  4. Here is Tree again:
    mx:Tree id=”myTree” width=”194″ height=”442″ x=”10″ y=”74″ chromeColor=”#996600″
    labelField=”@label”
    showRoot=”false”
    alternatingItemColors=”[#FFF1DE,#FFF1DE]”
    dataProvider=”{pashtoTree.treeData}”
    temClick=”myTree_clickHandler(event)”
    borderVisible=”false”
    contentBackgroundAlpha=”100″
    horizontalScrollPolicy=”on”
    wordWrap=”true”
    rowHeight=”25″

Comments are closed.