Загрузка шрифтов во Flash

Кто, как не веб-разработчик, тратящий несколько часов в день на прочтение полезного и интересного материала, знает, что контент правит интернетом. А его правильное и красивое отображение, которое находит свою реализацию в различных шрифтах, правит нашим вкусом.

Огромное количество сайтов, которые мы просматриваем ежедневно, радует наш глаз многообразием шрифтовых решений: заголовки, слоганы, тексты, опросы, комментарии… Для всего этого найдется свой уникальный шрифт. Именно поэтому нам хотелось бы поговорить сегодня о том, как сделать сайт не только более динамичным, но и более читаемым. Речь пойдет о разработке MotoCMS — онлайн менеджере шрифтов.

Дочитав статью до конца, вы узнаете все возможности этого менеджера, а также поймете как можно применять его в своих flash-проектах.

Начнем с краткого плана нашей статьи. Сегодня мы поговорим о:

* преимуществах и недостатках встроенных шрифтов;
* наиболее распространенных ошибках компиляции;
* том как интегрировать новый шрифт в любой flash сайт;

Преимущества и недостатки встроенных шрифтов

Если вы озаботились внедрением какого-либо шрифта в ваш проект, то это значит, что он будет доступен для воспроизведения Flash Player’ом в любой из рабочих моментов и вам не придется беспокоиться о том, что шрифт отсутствует у какого-либо пользователя. Среди основных явных преимуществ встроенных шрифтов можно выделить следующие:

* шрифт не требует дополнительной установки для корректного отображения;
* к встроенному шрифту можно применять эффекты, делать блеклым, вращать и тому подобное;
* сглаживание встроенных шрифтов лучше воспринимается пользователем;
* использование встроенных шрифтов позволяет добиться лучшего рендеринга текста в flash-файлах

Однако, как у любой медали, у встроенных шрифтов есть свои недостатки.

* Вы можете использовать шрифты только в .TTF и .OTF форматах. Если вам понадобится использование нестандартного шрифта, то его необходимо будет импортировать в отдельный .swf файл, а уже затем корректно прописать файл в вашем приложении.
* Встроенные шрифты повлияют на конечный вес файла — сделают его больше, а значит пользователям понадобится больше времени, чтоб дождаться загрузки вашего сайта.
* Зачастую вам понадобится применение дополнительного кода для того чтоб добавить новый шрифт.

Использование дополнительных встроенных шрифтов в любом случае обосновано, поскольку позволяет сделать ваш сайт еще более привлекательным, неповторимым и удобным для чтения.

В любом случае, для того, чтоб начинать процесс добавления нового шрифта он должен быть у вас в наличии, в формате .TTF или .OTF. Вам понадобится преобразовать его в .SWF. С онлайн менеджером шрифтов (ОМШ) процедура выполняется за несколько минут.

Логика cоздания нового шрифта

Открываем ссылку: www.cms-guide.com/online-font-creator/

Выбираем шрифт в формате .TTF или .OTF и загружаем его с помощью кнопки «Add font»

Жмем на кнопку «Create fonts». Процесс пошел

В результате получаем архив с сконвертированным шрифтом, готовым для дальнейшего использования в flash-сайтах

Онлайн менеджер шрифтов является самостоятельным бесплатным продуктом компании MotoCMS и доступен абсолютно для всех разработчиков

Возможные ошибки компиляции

На сегодняшний день практически любой шрифт может быть скомпилирован по инструкции представленной выше. Однако, следует отметить, что иногда пользователи могут сталкиваться с ошибками во время создания шрифта. По своей сути это могу быть различные проблемы, причина которых, как правило, всегда одна…

То многообразие шрифтов, которое существует сегодня в свободном доступе в интернете не всегда создано с учетом всех необходимых параметров для его бесперебойной и корректной работы. Если дизайнер создавал шрифт учитывая все нюансы и параметры его использования, то процесс компиляции пройдет без проблем. Практически все ошибки, которые возникают у пользователя в процесс компиляции, как правило, касаются некорректных первоначальных показателей этого шрифта.

В некоторых случаях, если используемый вами шрифт в формате .TTF или .OTF был ранее не совсем корректно скомпилирован из другого формата — это также может послужить причиной ошибки.

Для того, чтоб процедура компиляции прошла успешно, так же рекомендуем обратить внимание на дополнительные параметры, которые станут вам доступны если нажать на кнопку с изображением карандаша.

С помощью опции редактирования, при необходимости, Вы сможете установить нужные вам дополнительные параметры шрифта:

* возможность изменить семейство шрифта;
* отображение по умолчанию (стандартное, полужирное, курсив);
* добавление только необходимых символов.

На последнем пункте хотелось бы остановиться подробней. Использование всего диапазона символов влияет на конечный размер файла, а значит именно от этого параметра будет зависеть скорость загрузки. Если вы знаете, что вам понадобится только определенный набор символов, вы можете загрузить только их. Тем самым значительно уменьшив размер конечного файла. Например, такая ситуация будет весьма уместна, если вы подбираете нестандартный шрифт для прелоадера, от которого Вам в конечном итоге понадобятся отображение всего лишь 11 символов (U+0025,U+0030-U+0039).

Стоит также отметить, что некоторые шрифты рекомендуется оптимизировать, прежде чем использовать их с Flash. Взять, хотя бы, пиксельные шрифты. Как правило они очень популярны, но их использование предполагает ряд дополнительных настроек и ограничений.

Если вы используете шаблон сайта или готовый проект с Панелью управления Moto CMS, то добавить полученный шрифт не составит практически никаких усилий, через интерфейс администрирования. Для всех остальных проектов используем код.

Код добавления готового шрифта

Если Ваш проект выполнен не на MotoCMS, то сгенерированный в ОМШ .swf-файл шрифта добавляется при помощи 59 строк кода. Вот он

package
{
  import flash.display.Loader;
  import flash.display.LoaderInfo;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.net.URLRequest;
  import flash.text.Font;
  import flash.text.TextField;
  import flash.text.TextFormat;

  public class LoadFontProject extends Sprite
  {
    protected var fontFileName:String = "ComicSansMS.swf";

    public function LoadFontProject()
    {
      var loader:Loader = new Loader();
      loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
        loaderCompleteHandler);
      loader.load(new URLRequest(fontFileName));
    }

    protected function loaderCompleteHandler(event:Event):void
    {
      var loaderInfo:LoaderInfo = event.target as LoaderInfo;
      var motoFontInfoClass:Class =
        loaderInfo.applicationDomain.getDefinition("MotoFontInfo") as Class;

      if (motoFontInfoClass)
      {
        var fontName:String = motoFontInfoClass.FONT_NAME;
        var definitionName:String = motoFontInfoClass.FONT_CLASS;

        var fontClass:Class = loaderInfo.applicationDomain.getDefinition(
          definitionName) as Class;

        for (var j:uint = 0; j < fontClass.classes.length; j++)
        {
          Font.registerFont(fontClass.classes[j]);
        }

        trace("Font name: " + fontName);
      }

      var textField:TextField = new TextField();
      var textFormat:TextFormat = textField.defaultTextFormat;

      textFormat.font = fontName;
      textField.defaultTextFormat = textFormat;

      textField.embedFonts = true;
      textField.text = "Sample text";

      addChild(textField);
    }

  }
}

Тут давайте остановимся подробней. Вначале кода мы указываем название сгенерированного шрифта

protected var fontFileName:String = "ComicSansMS.swf";

Затем создаем загрузчик для указанного файла и вызываем метод loaderCompleteHandler

public function LoadFontProject()
{
  var loader:Loader = new Loader();
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
    loaderCompleteHandler);
  loader.load(new URLRequest(fontFileName));
}

Получаем класс MotoFontInfo из загруженного .swf файла шрифта

var loaderInfo:LoaderInfo = event.target as LoaderInfo;
var motoFontInfoClass:Class =
  loaderInfo.applicationDomain.getDefinition("MotoFontInfo") as Class;

MotoFontInfo — это класс, который автоматически добавляется в каждый .swf файл при генерации шрифта. В следующем шаге мы получаем характерные особенности шрифта.

var fontName:String = motoFontInfoClass.FONT_NAME;

.SWF-файл шрифта также содержит класс, в который включены множество стилей (например, полужирный, курсив). Мы выбираем имя класса шрифта, чтоб затем получить его от *. SWF-файла.

var definitionName:String = motoFontInfoClass.FONT_CLASS;
var fontClass:Class = loaderInfo.applicationDomain.getDefinition(
  definitionName) as Class;

Следующим шагом является использование цикла. Это нужно для того, чтоб собрать воедино все стили, которые могут быть зарегистрированы в классе шрифта.

for (var j:uint = 0; j < fontClass.classes.length; j++)
{
  Font.registerFont(fontClass.classes[j]);
}

В конце кода мы создаем новое текстовое поле, чтобы продемонстрировать полученный шрифт.

Приведенный выше код может быть использован на любом flash-проекте, который вы захотите разнообразить множеством шрифтовых решений.

Рады будем если статья пригодится Вам для того, чтоб сделать новый проект с использованием неограниченного количества шрифтов, либо дополнить уже существующий.