Опубликован: 07.11.2006 | Уровень: специалист | Доступ: платный
Лекция 3:

Форматирование текста

Аннотация: В этой лекции описываются широкие возможности форматирования текста, которые предоставляет разработчику Flash MX. Подробно рассказывается об объектах TextFormat и TextField.

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

Одной из прекрасных возможностей Flash MX является широкий спектр средств управления параметрами текста. Если раньше для того, чтобы изменить шрифт в текстовом поле, нужно было присвоить тексту формат HTML, то теперь для этого есть объект textFormat. С помощью него можно избежать присутствия тегов среди переменных, если нужно отобразить их не как обычный текст.

Теперь мы можем указать определенную часть текста и установить формат независимо от самого текста. Также можно настраивать высоту и ширину определенных фрагментов текста, что позволяет лучше контролировать расположение и структуру текста. Теперь текстовое поле может интерпретироваться во многом аналогично фильму: отныне можно динамически создавать текстовые поля, устанавливать их позиции X и Y, а также присваивать им приемники, чтобы события происходили при изменении их содержимого.

В этой лекции мы будем работать с упражнениями, охватывающими большой спектр вопросов. В первую очередь мы обратим внимание на объекты textField и textFormat, познакомимся с их действием и с эффектами, которые можно достичь с их помощью. Некоторые результаты будут полезны в практическом применении. Другие упражнения помогут проиллюстрировать возможности этих объектов. Затем мы рассмотрим возможность определения ширины и высоты текстового содержимого для создания динамических текстовых эффектов с нужным позиционированием без применения дополнительных средств.

Создание ваших собственных текстовых эффектов

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

Нам нужно, чтобы с каждым кадром в текстовом поле появлялась все большая часть строки текста. Этого можно добиться, введя переменную-счетчик и увеличивая ее значение с каждым кадром, и затем располагать текст в текстовом поле, используя этот счетчик для задания длины текста в каждом новом кадре. Во Flash 5 мы могли бы отображать текст в текстовом поле, присваивая ему переменную. Каждый раз при обновлении этой переменной текстовое поле также обновлялось бы соответствующим образом. Во Flash MX текстовое поле является объектом с параметром text. Чтобы текст отображался в текстовом поле, нам нужно присвоить фрагмент текста параметру text текстового поля.

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


Создание эффекта пишущей машинки

  1. Откройте новый файл Flash и расположите текстовое поле на позиции (217,113). Теперь перетащите кнопку текстового поля, чтобы изменить размер поля примерно на 360 пикселей в ширину и на 150 в высоту.

    Всегда лучше изменять размер динамических текстовых полей, перетаскивая кнопку текстового поля. Если изменить размер текстового поля, указав значения W и H в Property inspector, текст будет искаженным.

  2. Выберите шрифт Verdana, размер шрифта 9 и черный цвет. Установите параметр текстового поля Dynamic Text, затем в ниспадающем списке Line Type выберите Multiline. Убедитесь в том, что опция Selectable не отмечена. (Selectable является опцией, определяющей, может ли пользователь делать изменения в тексте при просмотре фильма.) Назовите инстанс текстового поля tf_txt. Окно Property inspector должно выглядеть примерно следующим образом:
  3. Теперь создайте новый слой scripts и введите следующий ActionScript в кадре 1. Прежде всего мы присвоим текстовому полю некоторый текст:
    tf_txt.text = "When a vibrating source of waves is
     approaching an observer, the frequency observed is higher
     than the frequency emitted by the source. When the source is
     receding, the observed frequency is lower than that emitted.
     This is known as the Doppler effect, or Doppler's principle.";
  4. Запустив фильм, вы увидите, что Flash расположил текст внутри нашего текстового поля. На данном этапе имеет смысл выбрать команду меню Debug > List Variables и выяснить, в каком состоянии находится текстовое поле. В окне Output вы увидите примерно следующее:

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

  5. До сих пор мы выводили весь текст одновременно, а теперь нам нужно, чтобы он отображался посимвольно с каждым кадром. Чтобы добиться этого эффекта, возьмем наш фрагмент текста и присвоим его переменной вместо параметра текстового поля text. Просто замените tf_txt.text на text_str:
    text_str="When a vibrating source...

    Теперь мы создадим функцию enterFrame для добавления символов в текстовое поле один за другим с использованием метода substr объекта строки. Этот метод передает два аргумента - один из них позволяет указывать стартовую позицию, а другой указывает число символов. Затем метод получает фрагмент строки. Итак, имея в виду текстовую строку, рассмотренную выше, обратимся к следующему ActionScript:

    Text_str.substr (0, 6);

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

  6. Введите следующий ActionScript под имеющимся в слое scripts кодом:
    this.onEnterFrame = function() {
    // assign the portion of the string from 0 to count to the
    // textField.
      tf_txt.text = text_str.substr(0, count);
      count += 2;
    };
  7. Сохраните ваш фильм в файле typeWriter001.fla и запустите его. Вы можете ускорить появление текста, увеличив число, на которое возрастает значение count в каждом кадре. Одним из неприятных побочных эффектов является некорректный перенос. Мы можем обойти этот недостаток, вставив в текстовую строку символы новой строки (\n):
    text_str="When a vibrating source of waves is approaching
    an observer, the frequency observed is higher 
    than nthe frequency emitted by the source. 
    When the source is receding, the observed frequency is lower than
    that emitted. This is known as the Doppler effect, 
    or Doppler's principle."
  8. Сохраните ваш файл под именем typeWriter001b.fla. Запустив его, вы увидите, что текст появляется в новой строке, начиная с того места, в которое вы добавили символ \n.

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

В идеале нам нужно уже настроенное текстовое поле, тогда мы бы просто указывали myTextField.typeIn (некоторый текст для ввода) и позволяли ему выполнять нужное действие. В предыдущих версиях Flash это можно было сделать посредством настройки функции onEnterFrame, или используя внутренний управляющий фильм, который выполнял бы нужные действия. У объекта textField, к сожалению, нет управляющего элемента onEnterFrame, поэтому нам следует использовать иной подход.

Мы будем использовать метод setInterval. Он позволяет повторять указанную функцию через каждое определенное количество миллисекунд. setInterval непосредственно связан с частотой кадров фильма. Давайте рассмотрим несложный пример того, как работает данный метод.

Игорь Хан
Игорь Хан

у меня аналогичная ситуация. Однако, если взять пример из приложения (ball_motion_04_click for trial.fla) то след остается. при этом заметил, что в моем проекте в поле "One item in library" виден кружок, в то время как в приложенном примере такого кружка нет.

Вопрос знатокам, что не так?

Александр Коргапольцев
Александр Коргапольцев

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

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск