Incorporando fontes no Flex

Descubra como incluir caracteres especiais de uma fonte no Flex

Este post é um tutorial sobre como incorporar fontes no Flex. Aproveite e confira também um outro texto meu que dá uma boa base complementar sobre esse assunto:
Diferentes línguas e várias fontes

Introdução

No Flex é possível criar uma classe em ActionScript que apenas serve como repositório de fonte. Você ainda pode definir o unicode range escolhendo que conjunto de caracteres você deseja, com isso não é preciso incorporar a fonte inteira e o tamanho do SWF diminui.

Para identificar qual é o código relacionado aos caracteres que necessita, existe o arquivo flash-unicode-table.xml com todos eles listados. Procure no diretório da sua instalação do Flex Builder pelo arquivo, que no meu computador está em:
C:/Arquivos de programas/Adobe/Flex Builder 3/sdks/3.0.0/frameworks/flash-unicode-table.xml

Nesse arquivo é possível ver os códigos que representam os caracteres em unicode. Você pode os especificar um a um, separados por vírgulas, ou pode incluir um hífen para informar ao Flex que se trata de um conjunto de caracteres, por exemplo: U+00A1-U+00A8, que significa um grupo de kanjis do japonês.

A classe

O código abaixo é o arquivo myFont.as que serve apenas para incorporar uma fonte em um SWF.


import flash.display.Sprite;
import flash.text.Font;

public class myFont extends Sprite {

     [Embed(source="C:/directory/ myFont.ttf",
      fontName="_ myFont",
      fontWeight="bold",
      mimeType="application/x-font",
      unicodeRange="U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+0020,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183")]
     
      public static var _ myFont:Class;
      Font.registerFont(_myFont);
}

A tag [Embed] informa ao compilador que será incluso no swf um arquivo, que nesse caso é uma fonte e por isso se define o mimeType e se informa o fontWeight. O source informa onde está fisicamente o seu arquivo de fonte, e o fontName define como a fonte será chamada pelo Actionscript. O unicodeRange define os caracteres que preciso, que nesse caso correspondem a todos do alfabeto romano mais a acentuação.

A declaração como variável pública do tipo Class e o registro dela através do método "Font.registerFont" a torna uma fonte disponível para toda aplicação Flex que em alguma parte carregue esse swf.

Note que apesar de ser uma classe usada no framework do Flex, não há nenhuma chamada para UIComponent, pois se tivesse, esse swf teria um tamanho de arquivo maior e seria totalmente desnecessário, uma vez que para o que precisamos basta trabalhar com o núcleo central do flash player.

Compilando pelo DOS

Para compilar o arquivo myFont.as você precisará usar um comando em DOS, o mxmlc, não sendo possível fazer a compilação deste arquivo para um .swf diretamente pelo Flex Builder.

Você precisa ir ao menu da barra de tarefas do Windows em Iniciar -> Executar e digite "cmd". No Prompt de comando, digite o comando "cd" para mudar o diretório para onde está o seu arquivo mxmlc.exe, que usualmente se encontra dentro do diretório da instalação Flex em /sdks/3.0.0/bin. Por fim basta digitar "mxmlc myFont.as" e será compilado um arquivo myFont.swf a partir deste código ActionScript.

Dos

Com esses passos você poderá criar swfs diferentes para cada fonte (ou estilo) que você precisar, utilizando-os na sua aplicação de acordo com a necessidade. Para isso é preciso carregar e gerenciar a troca dos swfs correspondentes às diferentes fontes que existem na sua aplicação.

O Código

Primeiramente, é preciso criar uma classe que seja a responsável por carregar os swfs com fontes. Veja este exemplo do arquivo FontLoader.as:


import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;
import flash.text.*;

import mx.core.Application;

public class FontLoader extends Sprite {
    [Bindable]
    public var fonte:String;
    //array para guardar os nomes de swfs carregados
    private var carregadas:Array = new Array();
     
    public function FontLoader() {
      //já abro de inicio com o latin
       loadFont("myFontLatin");
    }
   
    public function loadFont(url:String):void {
      fonte = "_" + url;
      // antes de carregar eu confiro se o swf já não foi carregado
      if (carregadas.indexOf(fonte) == -1){
          var loader:Loader = new Loader();
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
         fontLoaded);
        loader.load(new URLRequest(url + ".swf"));
        carregadas.push(fonte);
      }
      else {
          setaFamily();
      }
     
    }
   
    private function fontLoaded(event:Event):void {
     setaFamily();
    }
    private function setaFamily():void {
     Application.application.setStyle("fontFamily",fonte);
    }
}

E então no meu arquivo principal da aplicação eu preciso apenas criar uma instância dessa classe, que de primeira já carregará a minha fonte básica:

[Bindable]
public var fontLoader:FontLoader = new FontLoader();

Quando for preciso trocar a fonte, como por exemplo, ao mudar um alfabeto de um idioma para outro, basta chamar o método loadFont, passando o nome do novo swf:

fontLoader.loadFont("myOtherFont");

Observação

Caso você esteja usando módulos em Flex, há um bug com o TextArea, que não incorpora as fontes da aplicação, para resolver esse problema, defina a fonte resgatando a instância carregada:

fontFamily="{parentApplication.fontLoader.fonte}"