задача: ответить на несколько стандартных вопросов по поводу использования шрифтов во флэше:
  • Почему текст не отображается под маской?
  • Почему текст пропадает при повороте?
  • Почему текст пропадает при установке прозрачности?
  • Почему текст пропадает при применении таких-то эффектов к текстовому полю (клипу с текстовым полем)?
  • Почему на другом компьютере видны совсем другие шрифты, а не те, которые я поставил?
  • Почему не отображаются русские буквы?
  • Почему загружаемый из файла текст отображается абракадаброй?
Урок рассказывает о базовых механизмах, знание которых позволяет не задавать всех перечисленных выше вопросов. Если у вас возник один из таких вопросов, постарайтесь не спрашивать об этом на форумах: на вас будут показывать пальцем и говорить "фууу, он(а) не умеет пользоваться поиском..." :)

назад к списку уроков и рецептов

1. отображение шрифтов

    1.1  системные шрифты (device fonts)
    1.2  включенные в ролик шрифты (embedded fonts)

2. как включить шрифт в ролик

    2.1  Flash 6
    2.2  Flash 7
    2.3  Flash 8
    2.4  подключение разных начертаний шрифта для HTML-полей
    2.5  программное подключение шрифтов
    2.6  как посмотреть, какие шрифты включены в ролик

3. управление сглаживанием шрифтов

    3.1  Flash 6 и 7
    3.2  Flash 8
    3.3  Всё равно сглаживается! :(

4. кодировки символов во флэше



1. Отображение шрифтов

Для отображения какого-либо шрифта флэш-ролик может использовать либо шрифт, установленный в системе (device font), либо шрифт, включенный в сам ролик (embedded font). Рассмотрим оба варианта:

Вариант 1: флэш-ролик использует шрифт, установленный в системе (device font).

Плюсы этого варианта:
  • ролик весит меньше, поскольку шрифт не включен в него
  • текст точно не будет сглажен (antialiasing), будет пиксельно-четким
Минусы этого варианта:
  • если указанного вами шрифта нет в системе клиента, который смотрит ваш ролик, то текст будет отображаться тем шрифтом, который установлен в этой системе по умолчанию (и вы не можете наверняка узнать, что это будет за шрифт)
  • с текстом нельзя производить никакие трансформации (масштабирование, поворот, прозрачность и т. п.)
  • текст не будет отображаться под статическими масками — под масками, которые вы нарисуете и примените в редакторе. работать будут только программно установленные маски (эта возможность была добавлена во Flash 6).

Вариант 2: флэш-ролик использует шрифт, включенный в ролик (embedded font).

Плюсы этого варианта:
  • текст будет отображаться одинаково, в какой бы системе ни проигрывался ролик
  • текст будет отображаться под любыми масками
  • текст можно будет трансформировать (масштабирование, поворот, прозрачность и т. п.)
  • доступны средства управления сглаживанием (во Flash 8 опций сглаживания (antialiasing) несколько)
Минусы этого варианта:
  • ролик весит больше

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

2. Как включить шрифт в ролик

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

Необходимо выделить текстовое поле на сцене и открыть панель свойств (Ctrl+F3 или Window->Properties в главном меню). В этой панели необходимо нажать кнопку "Character..." (Flash 6, 7) или "Embed..." (Flash 8).

На следующем изображении показано, как это выглядит во Flash 6 (MX). Вы можете подключить как все символы шрифта, так и некоторые группы по отдельности. В дополнение к этому, можно явно указать, какие символы включить, в строке "And these characters".

так выглядит диалог в среде Flash 6 (MX)



Аналогичный диалог во Flash 7 (MX 2004). Здесь уже гораздо больше вариантов групп символов, из которых можно выбрать. Чтобы выбрать несколько групп, следует выбирать их, зажав кнопку Ctrl.

так выглядит диалог в среде Flash 7 (MX-2004)



Диалог включения символов во Flash 8 почти не отличается от диалога во Flash 7.

так выглядит диалог в среде Flash 8


Подключение разных начертаний шрифта для HTML-полей.

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

В особенности это важно для текстовых полей, в которых отображается html-текст: если шрифт включен в ролик только в нормальном своем начертании, то внутри тегов <b> и <i> не отобразится ничего. Для включения в ролик всех видов шрифта достаточно, к примеру, создать на сцене текстовые поля для всех вариантов начертаний шрифта и включить в них шрифт. Учтите, это может серьёзно сказаться на весе ролика: вместо одного шрифта вы подключите от двух до четырёх. Подумайте, так ли вам это необходимо, если вес ролика критичен.

Программное подключение шрифтов.

Что делать, если вы хотите подключить шрифт к текстовому полю программно, при помощи скрипта? Это может понадобиться вам, если вы создаете текстовое поле методом MovieClip.createTextField(), или хотите менять шрифт в текстовом поле по ходу работы приложения.

В принципе, требуется всего два действия:
  • задать текстовому полю шрифт при помощи объекта TextFormat или при помощи html разметки
  • переключить режим отображения шрифта при помощи
    TextField.embedFonts = true;
Но нужно понимать, что шрифт не возьмется из ниоткуда — если вы хотите, чтобы определенный шрифт был подключен к текстовому полю, этот шрифт должен быть включен в ролик. Следовательно, если вы планируете менять шрифты в текстовом поле, вы должны обеспечить включение в ролик всех необходимых шрифтов. К этой проблеме есть несколько подходов.

Основных вариантов два: включить все необходимые шрифты в сам ролик, или подгружать библиотеки с необходимыми шрифтами. Первое требует определенной аккуратности, но не представляет большой сложности. Второе является нетривиальным решением, которое требует знания хитростей работы флэш плеера. Эти "хитрости" реализованы в проекте Shared Fonts Manager Ивана Дембицкого.

Ответ на вопрос "как лучше организовать программное подключение шрифтов к тексовым полям?" подробно дан в разделе FAQ на сайте Shared Fonts Manager. Там все объясняется весьма подробно, не буду повторяться.

Как посмотреть, какие шрифты включены в ролик.

В главном меню среды Flash выберите File->Publish Settings... и перейдите на вкладку Flash. В этой вкладке установите галку "Generate size report". При компиляции ролика в окне Output будет выведена подробная информация о том что в этом ролике сколько весит и в каком кадре что грузится. В частности, там будут перечислены все символы всех шрифтов включенных в ролик.

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

3. Управление сглаживанием шрифтов

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

Если шрифт включен в ролик, флэш плеер начинает автоматически сглаживать символы шрифта в тексте.

Во Flash 6 и 7 как таковых средств управления сглаживанием нет. Можно добиться пиксельной четкости шрифтов в ограниченном числе случаев, косвенными способами. В остальных же случаях шрифты сглаживаются, что иногда приводит к плохой читаемости и неаккуратности текста. Правда, стоит отметить, что во Flash 7 ситуация несколько улучшилась, и добиться пиксельной четкости (отсутствия сглаживания) можно для большего числа шрифтов. Во Flash 6 это было большей проблемой.

Что делать, если вы публикуете ролик во Flash 6 и 7, включили шрифт в ролик, и хотите, чтобы текст был четким (несглаженным).
  1. Взять пиксельный шрифт. Во Flash 6 это было единственной возможностью, во Flash 7 это не обязательно, но не от любого шрифта можно добиться четкости. Существуют также шрифты, специально "заточенные" под четкое отображение во флэше.
  2. Текстовое поле не должно быть отмасштабировано по вертикали или горизонтали и не должно быть повернуто. Это же требование касается всех родительских для текстового поля клипов.
  3. Координаты левого верхнего угла текстового поля должны быть целыми числами. Если текстовое поле двигается скриптом — необходимо на каждом шаге округлять координаты. Это же требование касается всех родительских для текстового поля клипов.
  4. Выставить "родной" для шрифта кегль (многие пиксельные шрифты предназначены для использования только в определенном размере)
Если вы выполнили перечисленные требования и символы в тексте всё равно смазываются (причем, возможно, смазываются лишь некоторые символы), то здесь вам на помощь может прийти лишь эксперимент. Попробуйте добиться четкости с другим шрифтом, попробуйте найти специально "заточенный" под флэш шрифт, попробуйте сменить размер шрифта... Четкой закономерности нет.

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

управление сглаживанием в среде Flash 8

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

предупреждение в среде Flash 8


Программное управление этими режимами доступно при помощи класса flash.text.TextRenderer и свойства TextField.antiAliasType. В данном материале их использование не описывается, поскольку всё достаточно ясно изложено в хэлпе. Там же есть примеры использования.

Всё равно сглаживается? Вы поставили текстовое поле по целым координатам, установили режим сглаживания "Bitmap Text" или "Use device fonts", и текст всё равно сглаживается? Стоит проверить трансформации текстового поля и клипов (Ctrl+T), в которые оно вложено. Иногда мизерные изменения масштаба происходят при редактировании случайно и невооруженным глазом не видны.

Небольшие изменения масштаба приводят к сглаживанию

В этом случае проблему решит кнопка "Reset" в правом нижнем углу панели Transform.
в начало

4. Кодировки символов во флэше

Флэш воспринимает текст в кодировке Unicode. Это может быть UTF-8, UTF-16 LE или UTF-16 BE. Если вы загружаете текстовый файл (или получаете текст от скрипта), содержащий нелатинские символы, он должен быть в кодировке Unicode, иначе не будет правильно воспринят флэшем. UTF-16 LE часто назвают просто "Unicode", а UTF-16 BE часто называют "Unicode big endian". Сокращения "LE" и "BE" означают порядок байт для символов в файле.

В начале текстового файла в кодировке Unicode может находиться "сигнатура Unicode". Это 2 или 3 байта в начале файла, которые помогают принимающей программе правильно обработать символы текста. Текстовые редакторы не отображают эти служебные байты, используют их при декодировании текста. В случае с кодировкой UTF-16 LE/BE наличие сигнатуры в файле для флэша обязательна. В случае UTF-8 наличие сигнатуры не так критично (по крайней мере флэш читает файлы с русскими символами в UTF-8 без сигнатуры). Однако, лучше всегда сохранять файл с сигнатурой, потому что в некоторых случаях её отсутствие становится проблемой. Большинство текстовых редакторов (в том числе стандартный Notepad в Windows 2000/XP) автоматически добавляют сигнатуру при сохранении.

Существует настройка, позволяющая флэшу работать с текстом в не-юникодной кодировке.
// никогда так не делайте
System.useCodepage = true;
Эта инструкция говорит флэшу о том, что текст, загружаемый из внешних источников, следует воспринимать в локальной кодировке системы. При такой настройке отображение/не отображение символов текста у пользователей будет полностью зависеть от того, какая кодировка по умолчанию установлена в их операционных системах. Файлы в кодировке Unicode в этом случае будут восприниматься правильно только при наличии сигнатуры (для всех видов Unicode).

// это значение по умолчанию, 
// можно не указывать эту инструкцию вовсе
System.useCodepage = false;
Эта инструкция говорит флэшу о том, что текст, загружаемый из внешних источников, следует воспринимать в кодировке Unicode. В этом случае отображение/не отображение символов текста не будет зависеть от того, какая кодировка по умолчанию установлена в системе у пользователя.

Общие рекомендации
  • Использовать текст из внешних источников в кодировке UTF-8 с сигнатурой
  • Использовать System.useCodepage = false; (это значение по умолчанию, можно не устанавливать его специально)



в начало
назад к списку уроков и рецептов