Shared Fonts Manager


	._about


	demo[fla]


	.help(me)


	.faq(?)


	.feedback('post')


	.get()


	.links(_url)

[ о языковых версиях ]

Оглавление

Описание
Создание библиотек

Шаг 1: Создание мувиклипа-библиотеки, включение шрифта
Шаг 2: Создание мувиклипа-контейнера
Шаг 3: Загрузка и тестирование
Шаг 4: Тестирование и использование на сайте
Шаг 5: Использование в 7й версии плеера

Рекомендации по практическому использованию
Action Script Dictionary

Методы и события
Methods

registerTextFormat

Events

onRegister

описание

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

Внешние библиотеки представляют собой пары swf файлов: файл-библиотека и файл-контейнер. Имя файла-библиотеки зависимо от имени файла-контейнера и формируется как [имя_файла_контейнера]+[_lib]+[.swf]. Например, если файл-контейнер имеет имя body.swf, то файл-библиотека должен иметь имя body_lib.swf
Файл-библиотека должен содержать мувиклип, с настройками Linkage: export for runtime sharing и заданным URL. В свою очередь этот мувиклип должен содержать одно поименованое текстовое поле с подключенными шрифтами (embed fonts).
Смотри раздел создание shared библиотек a также файлы примеров для более детального изучения.

Далее эти внешние библиотеки могут быть подгружены в основной ролик (movie) и при помощи методов FontManager могут быть зарегистрированы для использования в ролике.

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

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

Главный ролик может загрузить внешний swf файл и использовать его shared библиотеку шрифтов;
Подгруженный ролик может использовать shared библиотеку шрифтов другого подгруженного swf файла;
Главный ролик может содержать собственную shared библиотеку шрифтов и использовать эти шрифты в любом подгруженном извне ролике.

По умолчанию при инициализации создается единственный объект: fonts_mng этот объект глобальный и закрыт от обхода с помощью ASSetPropFlags.
При необходимости визуального просмотра содержимого fonts_mng достаточно создать ссылку на этот объект:
_root.show_me = font_mng
и посмотреть листинг переменных в режиме тестирования.

Использование FontManager дает следующие новые возможности:

использование одних и тех же файлов библиотек на всем сайте позволит снизить объем загружаемых пользователем данных.
Однажды загруженные файлы библиотек не будут повторно загружаться на компьютер пользователя, а будут браться из кэша браузера.
подгрузка шрифтов по мере необходимости.
При парсинге HTML текста можно определить какие требуются шрифты, подгрузить и применить их.
упрощение локализации.
При локализации роликов много времени уходит на замену настроек текстовых полей и подключение новых шрифтов. При использовании FontManager появляется возможность лишь однажды настроить файлы библиотек, и все новые ролики будут их использовать.
Если распределить по папкам локализации файлы данных и файлы библиотек с локализованными шрифтами, то локализацию роликов можно делать "на лету", просто указав соответствующую папку локализации.
упрощение редизайна.
Достаточно заменить подключенный шрифт в библиотеке и эти изменения будут применены ко всем роликам, использующим библиотеку.
разделение ядра, данных и библиотек.
теперь это можно сделать полноценно. появляется возможность создать умный ролик, который будет на основании xml описания создавать сцену, подгружая только необходимые элементы.

		создание библиотек

Возможно автоматическое создиние библиотек с помощью Font Library Creator Extension от Carlos Rovira.

Внимание! FontManager сделан изначально под 6-ю версию плеера и все уроки предполагают публикацию файлов в 6 версию.
При этом возможность использования в 7й версии плеера не исключена.
Oб, использовании FontManager в роликах 7й версии

Шаг 1: Создание мувиклипа-библиотеки, включение шрифта.

Создайте новый FLA, задайте ему понятное имя, харакреризующее шрифт, который он будет содержать. Имя файла должно быть составлено из следующих частей:
[идентификатор назначения]+_+[идентификатор начертания]+_lib.fla
например: body_i_lib.fla,
где body указывает на основное назначение использования, а i указывает на то, что эта библиотека содержит шрифт с начертанием italic.
Если вы решите создать библиотеку этого же шрифта с plain начертанием, то соответственно называться она будет body_p_lib.fla, и если другой разработчик вашей компании создаст body_b_lib.fla или body_bi_lib.fla, то наверняка вы будете ожидать что это библиотеки этого же шрифта с bold и bold-italic начертанием.
Не используйте имена шрифтов и их начертаний в названиях библиотек. Если шрифт впоследствии изменится, то это доставит массу неудобств. Ведь если библиотека arial_lib.swf будет содержать шрифт Times New Roman, то например разработчики, которые будут локализовать проект где-нибудь в Эфиопии или в России будут сильно удивлены результатами локализации.
В дальнейшем придерживайтесь этой стратегии именования библиотек, это позволит вам без труда управлять библиотеками и, более того, сделает этот процесс понятным не только вам.
Создайте мувиклип и задайте ему понятное имя, рекомендуется использовать имя библиотеки, например: body_i_mc. Сделайте правый клик мышью на мувиклипе, выберите Linkage... в открывшемся окне установите галочку Export for runtime sharing, другие галочки значения не имеют.
Впишите в строку URL путь к файлу swf. Имя swf файла должно соответствовать имени файла после компиляции, например: body_i_lib.swf (о задании абсолютного пути будет рассказано ниже)

Создайте в этом мувиклипе текстовое поле;
В текстовое поле впишите текст. Лучше, если этот текст будет содержать имя библиотеки и указатель на языковую версию и начертание шрифта, например: body italic rus;
Задайте соответствующий шрифт текстовому полю;
Обязательно включите шрифт в ролик: Панель Properties, Character..., All characters (или другой необходимый набор символов);

Обязательно задайте имя экземпляра текстовому полю, например body_i_txt;
В мувиклипе создайте слой выше слоя с текстовым полем и впишите в кадре скрипт:
```
if (font_mng.registerTextFormat("body_i", this.body_i_txt)) {
	this._parent.removeMovieClip();
}
```
Сохраните FLA файл под этим же именем и откомпилируйте.

Шаг 2: Создание мувиклипа-контейнера

Создайте новый FLA;
Сохраните его в той же папке под тем же именем но без суффикса _lib, например: body_i.fla
Для Flash MX: Закройте и откройте "как библиотеку" FLA файл с текстовым полем;
Перетащите из shared библиотеки мувиклип содержащий текстовое поле на сцену нового ролика;
Опубликуйте файл.

Файлы библиотеки готовы.

Шаг 3: Загрузка и тестирование shared-библиотек

Создайте новый FLA и сохраните его в той же папке, например под именем TestBodyItalic.fla;

Поместите скрипт инициализации FontManager в любое место, желательно вначале ролика;
Теперь вы можете загрузить и применить шрифт к любому текстовому полю.
Для тестирования попробуйте мой скрипт, его нужно поместить в первом кадре _root после кода инициализации FontManager:

// здесь код инициализации FontManager
  ........................
// Создаем мувиклип-приемник и загружаем в него библиотеку:
 _root.createEmptyMovieClip("temp_mc", 0).loadMovie("body_i.swf");
// Создаем текстовое поле и заполняем его текстом:
_root.createTextField("test_txt", 1, 0, 0, 200, 200);
_root.test_txt.text = new Array(30).join("Hello world! ");
// Добавляем текстовое поле в список слушателей событий FontManager:
font_mng.addListener(_root.test_txt);
// назначаем обработчик события текстовому полю:
_root.test_txt.onRegister = function(success, name, mng) {
	if (!success) {
		return trace("registerError : "+name);
	}
	trace("name:\n\t"+name+"\nfont:\n\t"+mng[name].font);
	this.setTextFormat(mng[name]);
	this.wordWrap = this.embedFonts=true;
};
//_root.show_mng = font_mng

протестируйте. текст в текстовом поле должен быть виден.

Шаг 4: Тестирование и использование на сайте

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

Внимание:

WebSpeed Simulator

http://localhost/

Итак, вначале следует создать папки, в которых будут располагаться файлы библиотек. В примере для файлов библиотек будет использован путь /Libs/SharedFonts/. Если вы намерены использовать другое расположение, учтите это в дальнейшем.

В корневой папке сайта создайте папку Libs, а в ней папку SharedFonts
Откройте файл body_i.fla
Откройте библиотеку и в свойствах Linkage мувиклипа укажите URL: /Libs/SharedFonts/body_i_lib.swf
Откомпилируйте файл; При компиляции вы получите сообщение:
Error opening URL "file:///Libs/SharedFonts/body_i_lib.swf"
на него можно не обращать внимание;
Скопируйте body_i_lib.swf и body_i.swf в папку SharedFonts (в файле body_i_lib никаких дополнительных изменений делать не нужно, он останется таким же, как мы его создали ранее);
Откройте созданный ранее TestBodyItalic.fla и замените
.loadMovie("body_i.swf")
на
.loadMovie("/Libs/SharedFonts/body_i.swf")
Опубликуйте файл (Ctrl+F12) с тем, чтобы получить HTML файл.
Скоприуйте файл в любое место на сайте.
Откройте страницу. Через некоторое время, после загрузки шрифтов вы увидите, что содержимое текстового поля приобрело новое форматирование.

Шаг 5: Использование в 7й версии плеера

Для использования FontManager в 7й версии плеера необходимо:

создать swf файл 6й версии содержащий скрипт инициализации FontManager;

разместить этот файл на сайте и подгружать его в случае надобности;

или

поместить код инициализации в shared мувиклип и включать этот мувиклип в ролики

единственным неудобством при использовании в 7й версии плеера является необходимость ожидания загрузки файла, однако учитывая его размер (около 1 килобайта) это неудобство минимально. Более того, такая практика использования рекомендуется и при использовании 6й версии плеера.
Никаких других функциональных отличий быть не должно.

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

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

Не стремитесь к тому, чтобы включать скрипт инициализации FontManager в проект. Лучшим способом будет создание swf содержащего этот скрипт и использование его как подгружаемого модуля. Еще лучшим вариантом будет создание shared мувиклипа со скриптом инициализации FontManager внутри и включение этого shared мувиклипа в те проекты, где он необходим.
Это позволит без труда заменять скрипт инициализации FontManager при переносе на другой домен.

Не используйте в роликах имена swf файлов библиотек. Гораздо гибче ваша система будет если вы создадите xml файл - описание ваших библиотек. Например такое:

<fontlibrary version="1.0" author="Ivan Dembicki" >
  <style name="body" font="Artemius TT" lang="rus" >
    <plain      id="body_p"  url="/fontLibrary/rus/body_p.swf"  />
    <bold       id="body_b"  url="/fontLibrary/rus/body_b.swf"  />
    <italic     id="body_i"  url="/fontLibrary/rus/body_i.swf"  />
    <italicbold id="body_bi" url="/fontLibrary/rus/body_bi.swf" />
  </style>
  <style name="header" font="ArtemiusBlack TT" lang="rus" >
    <plain      id="header_p"  url="/fontLibrary/rus/header_p.swf"  />
    <bold       id="header_b"  url="/fontLibrary/rus/header_b.swf"  />
    <italic     id="header_i"  url="/fontLibrary/rus/header_i.swf"  />
    <italicbold id="header_bi" url="/fontLibrary/rus/header_bi.swf" />
  </style>
</fontlibrary>

Обратите внимание на соответствие ID узлов и названий стилей. Используя ID в этом случае легко получить URL файла-контейнера библиотеки. И локализация для японии, например, в таком случае потребует только создания папки "/fontLibrary/jp/", наполнения ее файлами библиотек и замены путей в xml файле.
Облегчится переход от локальной к интернет версии.
Еще одним преимуществом будет возможность визуального контроля соответствия шрифтов стилям.
Разумеется XML описание вы можете сделать так, как вам удобнее. Это лишь пример.

Используйте саморегистрацию библиотек, как это сделано в примерах. Смело удаляйте библиотеки после инициализации.

Для локальных тестов используйте относительные пути библиотек, для использования в интернет - абсолютные.

Не создавайте собственные экземпляры FontManager, хоть это возможно используя конструкцию вида:
my_font_mng = new font_mng.constructor()
я полагаю, что о такой возможности нужно знать, но использовать только в крайнем случае.

Второй способ использования был найден в процессе дальнейшего тестирования и представляет особый интерес, поскольку действия по обработке текстовых полей минимальны.
Суть его состоит в следующем: для назначения embed шрифтов не обязательно использовать команду setTextFormat.
Если загружены библиотеки шрифтов, например Arial и Tahoma Bold, то текстовому полю, содержащему htmlText:

Document header 
Document body

достаточно указать embedFonts = true

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

Для определения массива использовавшихся в текстовом поле шрифтов я создал свойство текстового поля font_map
вот скрипт инициализации этого свойства:

// © Ivan Dembicki, dembicki@narod.ru setFontMapProperty=function(){var nextNode=function(nod){ if(nod.firstChild!=null){return nod.firstChild;}var n=nod;while(n.nextSibling==null){ if(n.parentNode){n=n.parentNode;}else{return null;}}return n.nextSibling;}, textNodes=function(nod){var arr=[];while(nod){if(nod.nodeType==3){arr.push(nod);} nod=nextNode(nod);}return arr;},getFace=function(n){ return n.attributes.FACE==undefined?arguments.callee(n.parentNode):n.attributes.FACE;}, getFontMap=function(){var back=(!this.html ? this.html=true : false); var arr=textNodes(new XML(this.htmlText));var len=arr.length,nod,n_obj={}, n_arr=[],face,np,i;while(len--){face=getFace(np=(nod=arr[len]).parentNode); if(np.nodeName=="I"){ face+=(np.parentNode.nodeName=="B" ? " bolditalic" : " italic"); }else if(np.nodeName=="B"){face+=" bold";}n_obj[face]=face;} for(i in n_obj){n_arr.push(n_obj[i]);}back ? this.html=false : "";return n_arr;}; TextField.prototype.addProperty("font_map",getFontMap,null), ASSetPropFlags(TextField.prototype,"font_map",7,1);}, setFontMapProperty(),delete setFontMapProperty;

Скрипт достаточно поместить вначале timeline в любом месте.
font_map - это свойство текстового поля. Возвращает массив шрифтов, использовавшихся в текстовом поле. Пример использования:
trace(_root.my_txt.font_map)
- выведет в окно Output массив шрифтов использованных в текстовом поле _root.my_txt.
Одноименные шрифты считаются разными, если у них разное начертание, например Arial, Arial bold, Arial italic, Arial italicbold - это разные шрифты.

Дальнейшая организация проекта не представляет сложности.
Примеры реализации с исходниками я буду выкладывать в разделе demo[fla].

action script dictionary

Actions

registerTextFormat - регистрирует TextFormat объект в FontManager;
addListener, removeListener, _listeners - FontManager является вещателем и, соответственно, имеет методы и свойства вещателя, оповещает об одном событии:
onRegister - оповещает о событии регистрации загруженной или внутренней библиотеки.

font_mng.registerTextFormat()

Availability

Flash Player 6.

Usage

font_mng.registerTextFormat( instanceName, textField )

Parameters

instanceName - строка, задает имя TextFormat объекта
textField - ссылка на текстовое поле в shared мувиклипе, из которого требуется получить textFormat объект.

Returns

Boolean. возвращает false, если текстовое поле не содержит включенных шрифтов или instanceName TextFormat объекта не задан. В противном случае возвращает true.

Description

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

Непосредственно перед выходом из процедуры инициализации FontManager вещает событие onRegister c передачей параметров инициализации.

Example

в случае с подгружаемой библиотекой, при вызове из shared мувиклипа (саморегистрация):

// если shared мувиклип больше не потребуется, его можно удалить:
if (font_mng.registerTextFormat("body_i", this.body_i_txt)) {
	this._parent.removeMovieClip();
}

// если shared мувиклип если не требуется удалять:
font_mng.registerTextFormat("body_i", this.body_i_txt)

случай с библиотекой, находящейся на сцене:

font_mng.registerTextFormat("body_i", this.any_mc.shared_mc.body_i_txt)

.onRegister()

Availability

Flash Player 6.

Usage

listenerObject.onRegister = function (success, name, instance_mng, textField ) {
// your statements here
}

Parameters

success - Boolean, возвращает false, если при вызове registerTextFormat небыло задано имя TextFormat объекта или текстовое поле-образец не содержит включенных (embeded) шрифтов. В противном случае возвращает true.
name - строка, имя создаваемого в FontManager TextFormat объекта.
instance_mng - ссылка на экземпляр FontManager, который вызывал регистрацию;
textField - ссылка на текстовое поле-образец форматирования.

Returns

Ничего

Description

Событие. Происходит непосредственно перед выходом из процедуры регистрации TextFormat объекта в FontManager.
Поскольку FontManager является вещателем, он также имеет все методы и свойства вещателя.

Example

// Это текстовое поле при регистрации любого
// TextFormat объекта в font_mng будет принимать его форматирование:
_root.createTextField("test_txt", 1, 0, 0, 200, 200);
_root.test_txt.text = new Array(30).join("Hello world! ");
font_mng.addListener(_root.test_txt);
// назначаем обработчик события текстовому полю:
_root.test_txt.onRegister = function(success, name, mng) {
	if (!success) {
		return trace("registerError : "+name);
	}
	trace("name:\n\t"+name+"\nfont:\n\t"+mng[name].font);
	this.setTextFormat(mng[name], this);
	this.wordWrap = this.embedFonts=true;
};
//_root.show_mng = font_mng