Многое изменилось между тем, как текст обрабатывался во Flash CS4 и Flash CS5. Мы считаем, что сейчас подходящее время, чтобы поднять табуретку, сесть и в общих чертах рассмотреть то, что нужно знать о TLF, прежде чем «связать» упражнение или проект с использованием ActionScript.
Если вам повезет, примите участие в конкурсе Activetuts + и выиграйте одну из 3 подписанных копий! (Конечно, вы всегда можете приобрести копию ..)
Вступление
С новым TextLayoutFramework (TLF) текст находится в этих вещах, называемых контейнерами . Их можно либо физически нарисовать на сцене с помощью инструмента «Текст» и присвоить имя экземпляра, либо, как это принято чаще, их можно создать во время выполнения. Вы также знаете, что текст может быть отформатирован и обработан с помощью панели «Свойства». Здесь есть слово « свойства» . Если на панели есть свойство, его аналог находится в ActionScript. Плохая новость в том, что ActionScript — камень, холодная глупость. Например, он не имеет понятия, что такое контейнер, пока вы не скажете ему создать его. Он не будет форматировать текст, пока вы не скажете ему, что делать. Он даже не поместит текст на сцену, пока ему не скажут сделать это.
Большинство проектов начнутся с того, что вы скажете Flash создать объект Configuration() , который будет сообщать Flash о наличии контейнера на сцене и о том, как управлять Text Layout Framework для содержимого в контейнере. Фактический внешний вид обрабатывается классом TextFlow() , который, так сказать, получает свои порядки от объекта Configuration() .
Естественно, будучи глупым, объекту Configuration() нужно точно сказать, как управлять текстом в контейнере. Формат по умолчанию устанавливается через свойство класса Configuration, называемое textFlowInitialFormat . Чтобы изменить его, вы просто используете TextlayoutFormat () для установки шрифтов, цветов, выравнивания и т. Д., А затем сообщаете начальнику — Configuration () — что его textFlowInitialFormat изменился на те, которые вы установили с помощью TextLayoutFormat() . Босс получит это, но он не очень умный, поэтому вам нужно будет попросить его передать реальную работу другому члену команды управления, классу TextFlow() . Этот класс несет полную ответственность за любые слова в контейнере. Будучи таким же тусклым, как босс, TextFlow() нужно сказать, что такое абзац ( ParagraphElement ), насколько широк абзац ( SpanElement) , встроена ли какая-либо графика в абзац ( InLineGraphicElement) , содержит ли какой-либо текст ссылки ( Link Element ) и так далее. Кроме того, необходимо указать, какой текст добавляется в контейнер, чтобы он мог обрабатывать длину строки и добавлять любые дочерние элементы ( addChild), которые содержат это форматирование, чтобы пользователь мог его увидеть.
Класс TextFlow() , опять же не слишком яркий, затем передаст работу другому члену команды управления, IFlowComposer() , единственное задание которого состоит в управлении макетом и отображением текстового потока внутри или между ними. контейнеры. Компоновщик потока завершает процесс, решая, сколько текста помещается в контейнер, а затем добавляет строки текста в спрайт. Это достигается с помощью метода addController() , который создает объект ContainerController() , параметры которого определяют контейнер и его свойства.
Обычный последний шаг — сообщить FlowComposer, что нужно обновить контроллеры и поместить текст на сцену в соответствии с тем, как другие члены команды рассказали объекту Configuration (), как следует управлять их частью проекта.
Имея эту информацию в руках, давайте перейдем к работе с TLF в ActionScript. Мы собираемся создать столбец текста с помощью ActionScript.
Шаг 1: Новый документ
Откройте новый документ Flash ActionScript 3.0, переименуйте слой 1 в действия, выберите первый кадр слоя действий и откройте панель «Действия».
Шаг 2: ActionScript
Нажмите один раз на панели «Сценарий» и введите следующее:
|
1
|
var myDummyText:String = «The introduction of the Adobe CS5 product line puts some powerful typographic tools in your hands—notably, a new API (Application Programming Interface) called Type Layout Framework (TLF)—and with as more tools in the Adobe line up nudge closer to a confluence point with Flash, the field of typographic motion graphics on the Web is about to move into territory that has yet to be explored. To start that exploration, you need understand what type is in Flash and, just as importantly, what you can do with it to honor the communication messengers of your content.»;
|
Вам нужно немного текста, чтобы добавить на сцену. Эта строка является третьим абзацем этой главы. Теперь, когда у вас есть текст для ввода в контейнер, вам нужно загрузить класс, который будет управлять им.
Шаг 3: Конфигурация ()
Нажмите клавишу Enter (Windows) или Return (Mac) и добавьте следующую строку кода:
|
1
|
var config:Configuration = new Configuration();
|
Как вы, возможно, заметили, как только вы создали объект Configuration (), Flash импортировал flashx.textLayout.elements.Configuration flashx.textLayout.elements.Configuration — основная задача которого состоит в том, чтобы контролировать поведение TLF. Следующий блок кода сообщает TLF, как будет выглядеть текст на сцене.
Шаг 4: Класс TextLayoutFormat
Дважды нажмите клавишу Enter (Windows) или Return (Mac) и введите следующее:
|
1
2
3
4
5
6
7
|
var charFormat:TextLayoutFormat = new TextLayoutFormat();
charFormat.fontFamily = «Arial, Helvetica, _sans»;
charFormat.fontSize = 14;
charFormat.color = 0x000000;
charFormat.textAlign = TextAlign.LEFT;
charFormat.paddingLeft =100;
charFormat.paddingTop = 100;
|
Класс TextLayoutFormat, как мы уже говорили ранее, — это способ форматирования текста в контейнере. Свойства этого класса влияют на формат и стиль текста в контейнере, абзаце или даже в одной строке текста. В этом случае мы сообщаем Flash, какие шрифты использовать, размер, цвет, как он должен быть выровнен (обратите внимание на верхний регистр, используемый для выравнивания), и отступ, который перемещает его по краям контейнера.
Прежде чем двигаться дальше, нужно что-то сделать. Существует проблема кодирования. Прокрутите до операторов импорта. Если вы видите эту import flashx.textLayout.elements.TextAlign; — import flashx.textLayout.elements.TextAlign; — перейти к следующему блоку кода. Если вы этого не сделаете, удалите эту строку в только что введенном блоке кода: charFormat.textAlign = TextAlign.LEFT; , Повторно введите charFormat.textAlign = . Введите первые две буквы класса ( Te ), нажмите Ctrl + пробел, и должна появиться подсказка кода. Найдите TextAlign и дважды щелкните по нему. Это должно добавить отсутствующий оператор импорта. Чтобы сохранить ваше здравомыслие, мы предоставим список операторов импорта, которые должны появляться в конце каждого упражнения. Мы настоятельно рекомендуем вам сравнить ваш список операторов импорта с представленным списком и, если вы его пропустили, добавить их в свой код.
Теперь, когда вы знаете, как будет форматироваться текст, вам нужно указать объекту Configuration () использовать форматирование. Если вы этого не сделаете, он будет применять любые настройки по умолчанию, которые он выберет.
Шаг 5: textFlowInitialFormat
Дважды нажмите клавишу Enter (Windows) или Return (Mac) и введите следующее:
|
1
|
config.textFlowInitialFormat = charFormat;
|
Шаг 6: TextFlow ()
Нажмите клавишу Enter (Windows) или Return (Mac) и введите следующий блок кода:
|
1
2
3
4
5
6
|
var textFlow:TextFlow = new TextFlow( config );
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = myDummyText;
p.addChild( span );
textFlow.addChild( p );
|
Объект TextFlow () должен быть здесь, потому что его работа заключается в управлении всем текстом в контейнере. Конструктор — TextFlow (config) позволяет TLF знать, что он должен использовать созданный ранее объект конфигурации, поэтому теперь он знает, как форматировать содержимое контейнера и даже самого контейнера.
Следующий конструктор — ParagraphElement() сути сообщает Flash, как обрабатывать абзац. Здесь есть только один, поэтому он действительно не нуждается в параметре.
Последний шаг — получить все форматирование и макет в контейнере на сцене.
Шаг 7: Контейнерный Контроллер
Нажмите клавишу Enter (Windows) или Return (Mac) и добавьте две последние строки:
|
1
2
|
textFlow.flowComposer.addController( new ContainerController( this, 500, 350 ) );
textFlow.flowComposer.updateAllControllers();
|
Первая строка добавляет ContainerController и сообщает Flash, что управляемым контейнером является текущий DisplayObject ( this ), который в данный момент является сценой, и установить его размеры 500 пикселей в ширину и 350 пикселей в высоту.
Шаг 8: Тест
Сохраните проект и протестируйте фильм. Текст, как показано ниже, отображается с использованием заданных вами инструкций по форматированию.
Импорт заявлений для этого упражнения
Это операторы импорта для этого упражнения:
|
1
2
3
4
5
6
7
|
import flashx.textLayout.elements.Configuration;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.formats.TextAlign;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.container.ContainerController;
|
Использование ActionScript для создания и форматирования контейнера и его текста
Хотя на первый взгляд эта задача кодирования может показаться довольно запутанной, мы можем убедиться, что это не так; это станет почти второй натурой, когда вы начнете использовать ActionScript для воспроизведения текста в контейнерах.
С введением формата текстового макета ваша способность создавать текст, форматировать текст, помещать его в столбцы и в целом манипулировать им с помощью ActionScript значительно расширила ваши творческие возможности. Прежде чем вы все это взволнован, вы должны знать, что слово Framework есть причина.
Любые создаваемые вами текстовые объекты TLF будут опираться на определенную библиотеку ActionScript TLF, также называемую разделяемой библиотекой времени выполнения (RSL). Когда вы работаете на сцене в интерфейсе Flash, Flash предоставляет библиотеку. Это не тот случай, когда вы публикуете SWF и размещаете его на веб-странице. Он должен быть доступен, как и Flash Player, на компьютере пользователя. Когда SWF загрузится, он будет искать библиотеку в трех местах:
- Локальный компьютер : Flash Player ищет копию библиотеки на локальном компьютере, на котором он воспроизводится. Если его там нет, он направляется на Adobe.com.
- Adobe.com . Если локальная копия недоступна, Flash Player запросит копию библиотеки на серверах Adobe. Библиотека, как и плагин Flash Player, должна загружаться только один раз для каждого компьютера. После этого все последующие SWF-файлы, которые воспроизводятся на одном компьютере, будут использовать ранее загруженную копию библиотеки. Если по какой-то причине он не может получить его там, он будет искать в папке, содержащей SWF.
- В папке, содержащей SWF : если по какой-либо причине серверы Adobe недоступны, Flash Player ищет библиотеку в каталоге веб-сервера, в котором находится SWF-файл. Чтобы обеспечить этот дополнительный уровень резервного копирования, вручную загрузите файл библиотеки на веб-сервер вместе с вашим SWF-файлом. Мы предоставляем более подробную информацию о том, как это сделать, в главе 15.
Когда вы публикуете SWF-файл, который использует текст TLF, Flash создает дополнительный файл с именем textLayout_X.XXXXX.swz (где X-символы заменяются номером версии) рядом с вашим SWF-файлом. При желании вы можете загрузить этот файл на ваш веб-сервер вместе с вашим SWF-файлом. Это учитывает тот редкий случай, когда серверы Adobe по какой-то причине недоступны. Если вы откроете файл, в котором вы сохранили это упражнение, вы увидите как SWF-файл, так и, как показано на рис. 6-25, SWZ-файл.
Файл .swz содержит Text Layout Framework.
Дешевая распродажа!
Мы разыгрываем эту раздачу немного по-другому, так как Адам из Aetuts + подтолкнул Wildfire в мою сторону. Wildfire — блестящий строитель продвижения и превращает участие в соревнованиях в кусок пирога! Если вы хотите получить шанс выиграть одну из трех подписанных копий «Foundation Flash CS5 для дизайнеров», просто войдите!
Как мне войти?
- Отправить твит со страницы входа . Для каждого последователя Twitter, который входит по вашей ссылке, вы получаете дополнительную запись.
- Заполните свои данные, как только вы это сделали. Это оно!
Три победителя будут объявлены в понедельник 6 сентября. Удачи!