Опубликован: 07.11.2006 | Доступ: свободный | Студентов: 3397 / 338 | Оценка: 3.94 / 3.71 | Длительность: 37:11:00
Лекция 3:

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

Динамическое создание текстового поля

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

Для этого мы используем метод createTextField.

this.createTextField ("tf_txt", 1, 50, 50, 360, 150);

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

tf_txt.wordWrap = true;
tf_txt.selectable = false;

Затем мы создаем наш собственный объект textFormat для применения выбранных атрибутов текстового поля. Сделать это можно двумя способами. Одним из них является создание нового объекта textFormat и затем присвоение ему нужных параметров с помощью следующего ActionScript.

myTform = new textFormat() ;
// set properties of textFormat object
myTform.font = "Verdana";
myTform.size = 9;
myTform.color = 0xff3300;

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

new textFormat(font, size, color, bold, italic, underline,
Кurl, target, align, leftMargin, rightMargin, indent, leading) ;

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

new textFormat ("Arial", 10, 0xff0000, null, true);

Таким образом, для textFormat имеем:

myTform = new textFormat ("Verdana", 9, 0xff3300);

Наконец, применяем объект textFormat к объекту текстового поля:

tf_txt.setNewTextFormat (myTform);

Обратите внимание, что мы использовали setNewTextFormat вместо setTextFormat, так как последний влияет лишь на символы, уже имеющиеся в текстовом поле, однако не на вводимые в него символы. Для демонстрации результата добавьте в конец вашего ActionScript следующий код:

tf_txt.text = "quick test";

Если вы используете setNewTextFormat, то текст будет отображаться красным цветом и шрифтом Verdana; если был использован setTextFormat, то символы будут черного цвета шрифтом Times New Roman.

Итак, приведем полный код для создания нашего текстового поля, настроенный, как необходимо:

this.createTextField("tf_txt", 1, 50, 50, 360, 150);
tf_txt. wordWrap = true;
tf_txt.selectable = false;
myTform = new textFormat("Verdana", 9, Oxff3300);
// apply the textFormat to the textField
tf_txt.setNewTextFormat(myTform);

Довольно сложно было добиться нужного результата, не правда ли? В большинстве случаев намного проще всего лишь перетаскивать текстовое поле на рабочее место и настраивать параметры с помощью Property inspector. Однако рекомендуется знать, как все это работает, так как может возникнуть ситуация, в которой эти знания очень вам пригодятся. Даже в этом случае мы можем установить точный размер текста, несмотря на то, что мы могли бы просто ввести следующий код:

tf_txt._width = 360;
  tf_txt._height = 150;

Ввод текста

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

  1. Возьмите первые пять строк кода из предыдущего упражнения и введите под ними следующий код. Здесь сначала объявляется переменная для записи нашей строки, а затем идет вызов функции для ввода строки в текстовое поле:
    text_str = "vWhen 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." ;
    this.tf_txt.typeIn(text_str);
  2. Здесь нам понадобится функция typeIn в качестве метода объекта textField. Есть два способа определения функции: посредством присвоения ее свойству объекта
    tf_txt.typeIn = function(texta) {
      //etc. etc.
    };
      или внутри TextField.prototype:
    TextField.prototype.typeln = function(texta) {
      //etc. etc.
    };

    В первом методе каждое текстовое поле, к которому мы хотим применить функцию, должно иметь функцию, определенную для нее индивидуально, тогда как во втором подходе метод будет доступен для всех инстансов объекта TextField, что, возможно, предпочтительнее, так как позволяет нам использовать его для любого текстового поля без изменения кода.

  3. Теперь, когда мы выяснили, где будет располагаться функция в корневой временной диаграмме, нужно решить, какие именно действия она будет выполнять. Вообще говоря, ее функции будут такими же, как и ранее. Мы будем использовать аргумент texta, передаваемый функции, и записывать его в текстовое поле. Затем мы будем постепенно прибавлять символы к параметру текста нашего текстового поля до тех пор, пока текст не будет таким же, как texta. Итак, прежде всего, запишем текст в поле TextField. Для этого добавим следующий код вверху имеющейся программы.
    TextField.prototype.typeln = function(texta) {
      this.texta = texta;
    };
  4. Затем нам нужно создать функцию, которая будет выполняться через определенные интервалы времени для увеличения переменной-счетчика и соответствующего изменения текстового параметра:
    TextField.prototype.typeln = function(texta) {
      this.texta = texta;
      this.controlType = function() {
        this.count++;
        this.text = this.texta.substr(0, this.count);
      };
    };

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

  5. Все, что сейчас нам требуется добавить, это setInterval для повторения этой командой самой себя. Ранее, когда мы использовали setInterval, мы просто указывали имя функции для вызова. Теперь нам нужно указать имя метода и ссылку на объект, для которого нужно вызвать метод:
    setInterval (this, "controlType", 30);

    Ниже приведен окончательный код программы:

    TextField.prototype.typeln = function(texta) {
      this.texta = texta;
      this.controlType = function() {
        this.count++;
        this.text = this.texta.substr(0, this.count);
      };
      // call the controlType function every 30 milliseconds
      setInterval(this, "controlType", 30);
    };
    this.createTextField("tf_txt", 1, 50, 50, 300, 150);
    tf_txt. wordWrap = true;
    tf_txt .selectable = false;
    myTform = new textFormat("Verdana" , 9, 0xff3300);
    tf_txt.setNewTextFormat(myTform);
    
    text_str = "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.";
    // initialize typeIn effect
    this.tf_txt.typeIn(text_str);
  6. Сохраните ваш файл под именем typeWriter002.fla и запустите его. Вы будете наблюдать тот же результат, что и в предыдущих примерах, однако на этот раз текстовое поле будет добавляться динамически.
Игорь Хан
Игорь Хан

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

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

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

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