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

_root.onEnterFrame = function() {
  obja_mc._x++;
  trace("on enter frame");
};
function inter() {
  obja2_mc._x++;
  trace("interval function");
}
setInterval(inter, 50);

Здесь мы использовали setInterval с двумя аргументами: вызываемой функции и интервала между вызовами. Функция inter будет вызываться каждые 50 миллисекунд. Мы выбрали значение 50 миллисекунд, так как оно будет соответствовать частоте смены кадров - в секунде 1000 миллисекунд, а наш фильм обновляется 20 раз в секунду, или один раз за 50 миллисекунд.

Два объекта должны оставаться синхронизированными, однако если обратить внимание на содержимое окна Output, то станет видно, что on enter frame и interval function изменяются, как положено, несмотря на то, что каждый второй инстанс interval function указывается дважды в строке.

Чтобы увидеть, как изменяется инстанс, введите этот код в одной из функций; это покажет расстояние между двумя фильмами:

trace (obja2_mc._x-obja_mc._x);

Расстояние между ними не остается постоянным. Однако изменение интервала на 51 или 49 не имеет значения: в одном случае obja_mc движется быстрее, в то время как obja2_mc движется быстрее в другом. Функция setInterval работает и весьма полезна, однако если мы хотим, чтобы наши события были идеально синхронизированы, то для управления движением лучше использовать либо onEnterFrame, либо setInterval, но не использовать их вместе. Если точная синхронизация не критична для определенного приложения, тогда можно использовать оба подхода.

Запустив ваш фильм, вы обнаружите, что при обновлении рабочего места obja_mc каждую секунду перемещается на 1 пиксель, а obja2_mc двигается на 10 или 11 пикселей, так как функция setInterval вызывалась 10 или 11 раз между обновлениями рабочего места.

_root.onEnterFrame = function() {
  trace("on enter frame");
  obja_mc._x++;
  trace(obja2_mc._x);
};
function inter() {
  obja2_mc._x += 3;
  trace("interval function called");
  updateAfterEvent();
}
setInterval(inter, 30);

updateAfterEvent является методом, вызываемым для обновления рабочего места независимо от частоты кадров. Он будет работать только как часть управляющего элемента clipEvent или внутри функции, присвоенной setInterval. Этот метод чаще всего используется для реализации более плавного перетаскивания при работе с перетаскиваемыми объектами. В нашем случае, мы используем его в управляющем элементе onMouseMove таким образом, что новое расположение перемещаемого объекта отображается немедленно, а не в начале следующего кадра. Рекомендуется быть осторожным и не использовать этот метод слишком много, так как вы можете видеть, насколько движение прерывисто при использовании его с setInterval. Для сравнения верните частоту кадров обратно на значение 30, и вы увидите, в чем заключается разница. В конечном счете, правильным решением будет не пытаться и не принуждать setInterval выполняться быстрее частоты смены кадров (несмотря на то, что это возможно). Flash позволяет использовать эту возможность, однако это не повод пользоваться ею при всяком удобном случае.

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);

tf_txt.typeIn = function(texta) {
  //etc. etc.
};
  или внутри TextField.prototype:
TextField.prototype.typeln = function(texta) {
  //etc. etc.
};

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

TextField.prototype.typeln = function(texta) {
  this.texta = texta;
};

TextField.prototype.typeln = function(texta) {
  this.texta = texta;
  this.controlType = function() {
    this.count++;
    this.text = this.texta.substr(0, this.count);
  };
};

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

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);

TextField.prototype.typeIn = function(texta) {
  this.count = 0;
  this.texta = texta;
  this.myTypeID = setInterval(this, "controlType", 30);
};

clearInterval (this.myTypeID);

TextField. prototype. typeDone = function() {
  delete this.count;
  delete this.texta;
  // clear the interval that calls controlType
  clearInterval(this.myTypeID);
  delete this.myTypeID;
};

TextField. prototype. controlType = function() {
  this.count++;
  this.text = this.texta.substr(0, this.count);
  // if we reach the end of the string call typeDone
  if (this.count>=this.texta.length) {
  this.typeDone();
  }
};

text_str = "When a vibrating...
// rest of text goes here
... or Doppler's principle.";
this.tf_txt.typeln(text_str);

this.tf_txt.typeIn(text_str, 3, 30);

Итак, в каждом кадре будут добавляться 3 символа, а функция будет вызываться каждые 30 миллисекунд. Теперь нам нужно добавить эти параметры в функцию typeIn.

TextField.prototype.typeIn = 
 function(texta, typeSpeed, interval) {
  this.count = 0;
 //   store the typeSpeed inside the textField
  this.typeSpeed = typeSpeed;
  this.texta = texta;
  this.myTypeID = setInterval(this, "controlType", interval);
};

TextField.prototype.controlType   =   function() {
  // increase the amount of text displayed by typeSpeed
  this.count += this.typeSpeed;
  this.text = this.texta.substr(0, this.count);
  if (this.count>=this.texta.length) {
    this.typeDone();
  }
};

TextField.prototype.typeDone = function() {
  delete this.count;
  delete this.texta;
  delete this.typeSpeed;
  clearInterval(this.myTypeID);
  delete this.myTypeID;
};

this.tf_txt.typeIn(tex, 30, 60);

или

this.tf_txt.typeIn(tex, 30, 30);

TextField.prototype.typeIn = 
 function(texta, typeSpeed, interval, obja, func) {
  this.obja = obja;
  this.func = func;
  this.count = 0;
  this.typeSpeed = typeSpeed;
  this.texta = texta;
  this.myTypeID = setInterval(this, "controlType", interval);
};

TextField.prototype.typeDone = function() {
  delete this.count;
  delete this.texta;
  delete this.typeSpeed;
  clearInterval(this.myTypeID);
  delete this.myTypeID;
  // execute callback function
  this.obja[this.func]();
  delete this.obja;
  delete this.func;
};

function allDone() {
    trace("type done");
  }

this.tf_txt.typeIn (text_str, 1, 30, _root, "allDone");

В данном текстовом поле установите красный цвет текста и дайте имя инстансу в Property inspector (tf_txt).

this.tf_txt.text = "The eidophor system is 
a projection television system, 
i.e. it enables Кenlarged television pictures to be projected 
on to a screen. 
An ordinary television picture Кderives its brightness 
from the fluorescence of 
   a screen bombarded by electrons; 
with Кthe eidophor system, on the other hand, 
a very powerful source of light is controlled by 
Кthe television signal 
   picked up by the receiver." ;
// create textFormat object
myForm = new TextFormat() ;
myForm.color = 0x00000;
myForm.font = "Verdana";
myForm.size = 9;

// apply textformat to characters 4 to 12
this.tf_txt.setTextFormat(4, 12, myForm);

myform.bold = true;

Полезно знать, что если объект textFormat не имеет определенного свойства при применении к объекту textField, он будет использовать уже присутствующее значение. Проверим это.

myForm = new TextFormat ();
myForm.color = 0x000000;

Здесь нет никакой информации о шрифте или его размере, однако при применении к текстовому полю используется уже имеющееся форматирование (Verdana, 9 пикселей). При запуске фильма, если вы выберете команду Debug > List Variables, то увидите, что объект myForm содержит большое количество переменных со значением null.

Когда объект textFormat применяется с использованием textField.setTextFormat, все эти null-значения просто отбрасываются и заменяются уже имеющимися значениями.

// retrieve the textFormat for characters 4 to 12 in the text field
post = this.tf_txt.getTextFormat(4, 12);

Теперь у вас есть представление о том, как использовать setTextFormat, и можно приступить к созданию метода для постепенного изменения textFormat. Мы будем делать это во многом аналогично тому, как поступали с функцией typeID. Мы передадим функции число параметров, включая объект textFormat, точку начала, конечную точку, скорость и интервал. Мы также настроим ее на работу с функцией обратной связи, которую применим во второй части данного примера.

this.tf_txt.nooTextFormat (myForm, 4, 11, 1, 30);

Теперь ваш ActionScript будет выглядеть следующим образом.

this.tf_txt.text = "The eidophor system...by the receiver.";
myForm = new TextFormat();
myForm.color = 0x000000;
this.tf_txt.nooTextFormat(myForm, 25, 43, 1, 30);

TextField.prototype.nooTextFormat = 
  function(tForm, begin, end, speed, interval, 
Кobja, func) {
// store parameters in text field
  this.begin = this.current= begin;
  this.end = end+1;
  this.speed = speed;
  this.end = end;
  this.obja = obja;
  this.func = func;
  this.nooTform = tForm;
// set interval to call nooTextFormatControl
  this.myNooText = setInterval
  (this, "nooTextFormatControl", interval) ;
};
TextField.prototype.nooTextFormatControl = function() {
};
TextField.prototype.cleanNooTextFormat = function() {
};

Мы делаем то же самое, что и раньше - берем все копии всех аргументов, передаваемых в аргумент, и помещаем их в само текстовое поле. Мы приравниваем this.end к end+1, так как второй аргумент, передаваемый setTextFormat, ссылается на символ после последнего символа, к которому применен другой формат, тогда как передаваемое нами значение ссылается на последний символ, формат которого мы хотим изменить.

В функции управления nooTextFormatControl мы будем пошагово прибавлять значение переменной this.current и увеличивать строку текста, к которой применяется textFormat. Мы начинаем current со значения begin и продолжаем увеличивать его до тех пор, пока оно не достигнет значения end.

TextField.prototype.nooTextFormatControl = function() {
  this.current + = this.speed;
  if (this.current>this.end) {
    this.setTextFormat(this.begin, this.end, this.nooTform);
    this. cleanNooTextFormat () ;
  } else {
    this.setTextFormat(this.begin, this.current, this.nooTform);
  }
};

При каждом вызове функции мы добавляем speed к значению переменной current. Если это значение меньше, чем конец области, на которую мы хотим оказать влияние, то мы меняем значение textFormat с begin на current. Если оно является конечной точкой или близко к ней по значению (в случае, если мы с каждым кадром прибавляем к current 3 или 4), то мы применяем формат к тексту с использованием начального и конечного значений, переданных в начале, и вызываем функцию cleanUp.

TextField.prototype.cleanNooTextFormat = function() {
  delete this.current;
  delete this.nooTform;
  delete this.begin;
  delete this.end;
  clearInterval(this.myNooText);
  delete this.myNooText;
  this.obja[this.func] ();
};

String.prototype.findInstances = function(str) {
  var foundAt = [] ;
  var nextFound = 0;
//   change both strings to lower case
  var largeStr = this.toLowerCase();
  var smallStr = str.toLowerCase();
  while (nextFound!=-1) {
    nextFound = largeStr.indexOf(smallStr, nextFound);
    if (nextFound != -1) {
      foundAt.push({begin:nextFound, end:nextFound+smallStr.length});
      nextFound++;
    }
  }
return foundAt;
};

Теперь код будет работать при поиске любой строки внутри любой более объемной строки.

function nooFindAndReplace(textObj, str) {
  this.indices = textObj.text.findInstances(str);
  this.doNext();
}

doNext будет использовать метод shift массива для извлечения первой пары индексов из массива indices и затем передавать их в nooTextFormat. Мы передаем doNext в виде функции с обратной связью таким образом, что когда формат одного слова изменится, doNext будет вызвана снова, и мы перейдем к следующему слову.

function doNext() {
// if there is another string
  if (indices.length>0) {
    var nexta = this.indices.shift();
    this.tf_txt.nooTextFormat
     (myForm, nexta.begin, nexta.end, 1, 30, this, "doNext");
  }
}

this.tf_txt.text = "The eidophor system is 
a projection television system, 
i.e. it enables enlarged television pictures 
to be projected on to a screen. 
An ordinary television picture derives 
its brightness from the fluorescence of 
   a screen bombarded by electrons; 
with the eidophor system, on the other hand, 
a very powerful source of light is controlled 
by the television signal 
   picked up by the receiver. " ;
myForm = this.tf_txt.getTextFormat() ;
myForm.color = 0x000000;
myForm.size = 9;
myForm. bold = true;
// trigger find and replace
nooFindAndReplace(this.tf_txt, "television", myForm);

В окончательном виде весь код будет выглядеть так.

В окончательном виде весь код будет выглядеть так.
TextField.prototype.nooTextFormat = function(tForm, begin, end, speed, interval, obja, Кfunc) {
  this.begin = this.current=begin;
  this.end = end+1;
  this.speed = speed;
  this.end = end;
  this.obja = obja;
  this.func = func;
  this.nooTform = tForm;
  this.myNooText = setInterval(this, "nooTextFormatControl", interval);
};
TextField.prototype.nooTextFormatControl = function() {
  this.current += this.speed;
  if (this.current>this.end) {
    this.setTextFormat(this.begin, this.end, this.nooTform);
    this.cleanNooTextFormat();
  }   else   {
    this.setTextFormat(this.begin, this.current, this.nooTform);
  }
};
TextField.prototype.cleanNooTextFormat = function() {
  delete this.current;
  delete this.nooTform;
  delete this.begin;
  delete this.end;
  clearlnterval(this.myNooText);
  delete this.myNooText;
  this.obja[this.func]();
};
String.prototype.findInstances = function(str) {
  var foundAt = [] ;
  var nextFound = 0;
  var largeStr = this.toLowerCase();
  var smallStr = str.toLowerCase();
  while (nextFound!= -1) {
    nextFound = largeStr.indexOf(smallStr, nextFound);
    if (nextFound != -1) {
      foundAt.push({begin:nextFound, end:nextFound+smallStr.length});
      nextFound++;
    }
  }
return foundAt;
};
function nooFindAndReplace(textObj, str) {
  this.indices = textObj.text.findInstances(str) ;
  this.doNext();
}
function doNext() {
  if (indices.length>0) {
    var nexta = this.indices.shift();
    this.tf_txt.nooTextFormat(myForm, nexta.begin, nexta.end, 1, 30, this, "doNext");
  }
}
this.tf_txt.text = "The eidophor system is a projection television system, i.e. it enables enlarged television pictures to be projected on to a screen. An ordinary television picture derives its brightness from the fluorescence of a screen bombarded by electrons,- with the eidophor system, on the other hand, a very powerful source of light is controlled by the television signal picked up by the receiver.";
myForm = this.tf_txt.getTextFormat();
myForm.color = 0x000000;
myForm.size = 9;
myForm.bold = true;
nooFindAndReplace(this.tf_txt, "television", myForm);

myTForm = new TextFormat();
myTForm.size = 24;
myTForm.font = "Verdana";
str = "a piece of test text to check widths";
tf_txt.text = str;
tf_txt.setTextFormat(myTForm);
// retrieve width with getTextExtent
a = myTForm.getTextExtent(str).width;
// retrieve width with textWidth
b = tf_txt.textWidth;
trace(a+" : "+b);

function charPositions(tFormat, str, depth) {
  _root.createTextField("temp", depth, 0, -300, 100, 400);
  temp.embedFonts = true;
  temp.autoSize = true;
  temp.setNewTextFormat(tFormat);
  temp.text = str;
}

Мы установили autoSize на значение True, поэтому поле будет изменять размер, чтобы вмещать любой помещаемый в него текст. Мы также установили параметр embedFonts на значение True, и textFormat на значение tFormat. Кроме этого, нам нужно присвоить переменную str параметру text текстового поля.

При установке параметра embedFonts текстового поля на значение True помните, что шрифт, используемый в фильме, необходимо экспортировать. Для этого и понадобилось временное поле Dynamic Text в каком-либо другом месте. Также необходимо убедиться в том, что отмечена опция Embed Font Outlines For All Characters в диалоговом окне Character Options:

function charPositions(tFormat, str, depth) {
  _root.createTextField("temp", depth, 0, -300, 100, 400);
  temp.embedFonts = true;
  temp.autoSize = true;
  temp.setNewTextFormat(tFormat);
  temp.text = str;
  var arr = [] ;
}

function charPositions(tFormat, str, depth) {
  _root.createTextField("temp", depth, 0, -300, 100, 400);
  temp.embedFonts = true;
  temp.autoSize = true;
  temp. setNewTextFormat (tFormat);
  temp, text = str;
  var arr = [] ;
  //the total width of the text
  var totalWidth = temp.textWidth;
  
  for (var i = 0; i<str.length; i++) {
    temp.text = str.substr(i);
    // calculate the difference between the width to this point
    // and the total width
     arr[i] = totalWidth-temp. textWidth;
  }
}

В каждой итерации цикла мы перемещаемся на один символ вперед в строке и записываем строковое значение из этого символа в наше временное текстовое поле str.substr(i). Затем мы вычисляем ширину, вычитаем ее из полной ширины и записываем результат в наш массив.

function charPositions(tFormat, str, depth) {
  _root.createTextField("temp", depth, 0, -300, 100, 400);
  temp.erabedFonts = true;
  temp.autoSize = true;
  temp.setNewTextFormat(tFormat);
  temp.text = str;
  var arr = [];
  var totalWidth = temp.textWidth;
  for (var i = 0; i<str.length; i++) {
    temp.text = str.substr(i);
    arr[i] = totalWidth-temp.textWidth;
  }  
  temp.removeTextField();
  return arr;
}

mt = new TextFormat();
mt.font = "Arial";
mt.size = 45;

str = "In the manufacture of safety matches, 
 softwood logs are peeled into 
   a thin continuous shaving, 
or veneer, about one tenth of an inch thick. 
The ribbon of wood is then cut up into splints at 
a rate of about two million per hour. 
These splints are soaked in a bath of sodium silicate, 
ammonium phosphate 
   or sodium phosphate and then dried. 
This impregnation prevents afterglow.";
posArray = charPositions(mt, str, 1);

obtainCharPos.fla.
function setUpText(str, forma, lineLength) {
  var positions = charPositions(forma, str, 1000);
  var currentLine;
  var lineHeight = forma.getTextExtent(str).height;
  var finalPositions = [];
}

Далее мы добавим цикл для обработки каждой записи в массиве позиций. Этот цикл будет проверять, является ли позиция X большей, чем lineLength. Если это так, она будет сбрасываться на ноль и к переменной currentLine будет прибавляться единица для обновления позиции Y. Мы будем учитывать расстояние, на которое необходимо возвращать символы, так как все последующие символы также будут перемещены назад на то же расстояние. Это значение мы будем хранить в переменной с именем substracta.

function setUpText(str, forma, lineLength) {
  var positions = charPositions(forma, str, 1000);
  var currentLine;
  var subtracta;
  var lineHeight = forma.getTextExtent(str).height;
  var finalPositions = [] ;
  for (var i = 0; i<positions.length; i++) {
  // if the current position is off the right edge
    if (positions[i]>(lineLength+subtracta)) {
      subtracta = positions[i];
      currentLine++;
    }
    var x = positions[i]-subtracta;
    var у = lineHeight*currentLine;
    finalPositions[i] = {char:str.charAt(i), x:x, y:y};
  }
  return finalPositions;
}

Здесь мы добавили две следующие функциональности. Первая заключается в том, что мы вычисляем позицию Y, умножая значение currentLine на lineHeight ; мы передвигаем вниз страницу на высоту текста для каждой добавленной строки текста. Мы также записали наши значения символов и позиции в массив в виде объекта. Таким образом, при возвращении массива у нас будет возможность использовать его без знания строки; теперь это просто список символов.

function init(str, tForm, lineLength) {
  // retrieve character positions
  charPos = setUpText(str, tForm, lineLength);
  this.count = 0;
  // set drawNext to be called every frame
  this.onEnterFrame = drawNext;
}

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

function drawNext() {
  var noo = this .createEmptyMovieClip ("lett"+count, count) ;
  var nextObj = charPos[this.count];
  // a reference to the object in the array
  noo._x = nextObj.x;
  noo._y = nextObj.y;
  noo.createTextField("tex", 1, 0, 0, 100, 100);
  noo.tex.text = nextObj.char;
  noo.tex.embedFonts = true;
  noo.tex.selectable = false;
  noo.tex.setTextFormat(mt);
  noo._alpha = 30;
  noo.onEnterFrame = function() {
    // increase alpha until 100 is reached
    this._alpha += 5;
    if (this._alpha>=100) {
      delete this.onEnterFrame;
    }
  };
  count++;
  if (count>charPos.length) {
    delete this.onEnterFrame;
  }
}

mt = new TextFormat();
mt.font = "Arial";
mt.size = 24 ;
str = "In the manufacture of safety matches, 
softwood logs are peeled into 
   a thin continuous shaving, 
or veneer, about one tenth of an inch thick. 
The ribbon of wood is then cut up into splints at 
a rate of about two million per hour. 
These splints are soaked in a bath of sodium silicate, 
ammonium phosphate or 
   sodium phosphate and then dried. 
This impregnation prevents afterglow.";
init(str, mt, 530);

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

Функция drawNext необходима для случайного выбора символа из массива и его прорисовки. Затем символ будет удаляться из массива, после чего будут оставаться только те символы, которые все еще должны быть прорисованы. Код реализации этой функциональности довольно прост. Сначала выбирается случайное число между 0 и числом записей в массиве. Затем эта запись переносится из массива во временную переменную. После этого элемент удаляется из массива с помощью метода splice.

var next = Math.floor(Math.random()*charpos.length);
var nextObj = charPos[next] ;
charPos.splice(next, 1) ;

function drawNext() {
  this.count++;
  // pick a random character
  var next = Math.floor(Math.random()*charpos.length);
  var nextObj = charPos[next];
  charPos.splice(next, 1);
  var noo = this.createEmptyMovieClip 
   ("lett"+this.count, this.count);
  noo._x = nextObj.x;
  noo._y = nextObj.y;
  noo._alpha = 30;
  noo.onEnterFrame = function() {
    this._alpha += 5;
    if (this._alpha>=100) {
      delete this.onEnterFrame;
    }
  };
  noo.createTextField("tex", 1, 0, 0, 100, 100);
  noo.tex.text = nextObj.char;
  noo.tex.embedFonts = true;
  noo.tex.selectable = false;
  noo.tex.setTextFormat(mt);
  if (charPos.length == 0) {
    delete this.onEnterFrame;
    return;
  }
}

function drawNext() {
  for (var i = 0; i<4; i++) {
    this.count++;
    var next = Math.floor(Math.random()*charpos.length);
    var nextObj = charPos[next];
    charPos.splice(next, 1);
    var noo = this.createEmptyMovieClip 
      ("lett"+this.count, this.count);
    noo._x = nextObj.x;
    noo._y = nextObj.y;
    noo._alpha = 30;
    noo.onEnterFrame = function() {
      this._alpha += 5;
      if (this._alpha>=100) {
        delete this.onEnterFrame;
    }
  };
  noo.createTextField("tex", 1, 0, 0, 100, 100);
  noo.tex.text = nextObj.char;
  noo.tex.embedFonts = true;
  noo. tex. selectable = false;
  noo.tex.setTextFormat(mt);
  if (charPos.length == 0) {
    delete this.onEnterFrame;
    return;
    }
  }
}

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

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

Зная конечную позицию каждой буквы, мы можем делать все, что нам нужно, с каждой буквой фильма перед тем, как она окажется на своем конечном месте. Три исходных файла, прилагаемые к этой главе, демонстрируют подобные эффекты, достигаемые изменением всего лишь нескольких строк кода. Первый файл - useCharPosSwingTo.fla - располагает все буквы довольно далеко от их позиций и использует колебательное движение, рассмотренное в первой лекции, для перемещения каждой буквы на свое место. Второй файл - useCharPosScaleTo.fla - представляет каждую букву в большем размере и на большем расстоянии от ее места, постепенно уменьшая и перемещая буквы на их места. Третий файл - useCharPosScaleTo2.fla - работает по такому же принципу, но обрабатывает буквы по порядку, а не случайным образом.

stageWidth=550;
stageHeight=400;
imageWidth=410;
imageHeight=308;
speed=3;

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

topPos= (stageHeight-imageHeight)/2;
leftPos= (stageWidth-imageWidth)/2;

buttonTextFormat=new TextFormat ("_sans", 9, 0x87A7E2, true);
captionTextFormat=newTextFormat ("Arial", 30, 0xffffff, true);

images=[{link:"picl",title:"MAY 15 2002"},
    {link:"pic2",title:"MARCH 12 2002"},
    {link:"pic3",title:"JANUARY 23 2002"},
    {link:"pic4",title:"APRIL 30 2001"},
    {link:"pic5",title:"JUNE 07 2002"},
    {link:"pic6",title:"JULY 12 2002"},
    {link:"pic7",title:"AUGUST 25 2002"},
    {link:"pic8",title:"DECEMBER 01 2002"}
]

Для расположения рисунков на рабочем месте нам нужно создать функцию. Как и в примере лекции 1, мы поместим каждый рисунок внутрь фильма для скольжения на нужные позиции. Прежде всего, в функции необходимо создать пустой фильм "imageHolder", координаты которого leftPos и topPos вычислены ранее. Теперь, чтобы добавить картинки, мы проходим циклически через наш массив рисунков и используем параметр ссылки для выбора нужных фильмов из библиотеки. Мы поместим ссылку на только что созданный фильм в нашем массиве рисунков в виде дополнительного параметра "mov", чтобы иметь всю необходимую информацию в центральном реестре. При добавлении каждого фильма мы будем увеличивать переменную currx на значение imageWidth. Это значение будет использоваться для установки позиции по оси X для каждого фильма, чтобы они были расположены впритык друг к другу.

function populatelmages(imageArr,imageWid){
  _root.createEmptyMovieClip("imageHolder",++this.depth)
  imageHolder._x=leftpos;
  imageHolder._y=topPos;
  var currx=0;
  for(var i=0,-i<imageArr.length;i++) {
    imageHolder.depth++;
    //attach image movieclip at currx
    imageArr[i].mov=imageHolder.attachMovie(imageArr[i].link,
    К"image"+i,imageHolder.depth,{_x:currx,_alpha:102});
    //increase currx
    currx+=imageWidth;
  }
}

Мы использовали возможность передавать значения с attachMovie для установки позиции фильма по оси X и alpha.

imageArr[i].mov=imageHolder.attachMovie(imageArr[i].link,
К"image"+i,imageHolder.depth,{_x:currx,_alpha:102})

Мы установили alpha, равное 102, во избежание дерганья изображения, которое может возникать во Flash во время перемещения картинок. Я не понимаю, как это срабатывает, но, тем не менее, это так. Вы можете попытаться исключить эти строки, когда мы закончим, и понять разницу. Если вы запустите код сейчас, то вы увидите по крайней мере два фильма, стоящие на рабочем месте один за другим.

function createButtons(imageArr,tF){
  _root.createEmptyMovieClip("buttonHolder",++this.depth)
  buttonHolder._x=leftPos+10;
  buttonHolder._y=topPos+imageHeight+5;
  var currx;
  for(var i=0;i<images.length;i++){
    // attach empty movieclip for button to sit in
    var nooButton=buttonHolder.createEmptyMovieClip ("button"+i,i) ;
    // place button at currx
    nooButton._x=currx;
    nooButton.item=imageArr[i];
    nooButton.createTextField("texta",1,0,0,1,1);
    nooButton.texta.autoSize=true;
    var caption = i>9 ? i+1 :"0"+(i+1);
    nooButton.texta.text=caption;
    nooButton.texta.setTextFormat(tF);
    nooButton.onPress=function(){
      _root.centerPic(this.item)
    }
    currx+=nooButton.texta.textWidth+5
  }
}

Создадим другой пустой фильм "buttonHolder", который будет содержать все кнопки. Расположим этот фильм справа от левого края рисунков и значительно ниже нижнего края изображений (topPos+imageHeight).

_root.createEmptyMovieClip("buttonHolder",++this.depth);
buttonHolder._x=leftPos+10;
buttonHolder._y=topPos+imageHeight+5;

Далее мы повторно проходим массив с помощью цикла, добавляя кнопку для каждого его элемента, т.е. одну кнопку для каждого изображения. Внутри каждой кнопки создаем переменную "item", предназначенную для записи ссылки на элемент в массиве рисунков, к которому он относится. Это можно использовать для получения доступа к другой информации о картинке, например о фильме, который представляет данный рисунок. Далее добавляем textField в каждую переменную с помощью объекта textFormat, только что созданного нами. Мы используем значение i для установки текста в TextField. Если значение i меньше, чем один символ, добавляем 0 впереди него. Хотя в данный момент это не относится к делу (у нас только 8 картинок), в дальнейшем можно применить это следующим образом.

var caption = i>9 ? i+1 :"0"+ (i+1);
nooButton.texta.text=caption;

Мы настраиваем функцию onPress для кнопки, чтобы вызывать функцию centerPic, передавая переменную "item", созданную нами ранее. Эта функция и будет перемещать изображения.

nooButton.onPress=function(){
  _root.centerPic(this.item)
}

Теперь обеспечим правильное позиционирование, увеличивая значение текущей позиции по оси X на сумму ширины TextField и небольшого дополнительного места для уверенности.

MovieClip.prototype.slideTo=
  function(x,y,speed,callbackObj, callbackFunc) {
  if(this.slideControl){
    var noo=this.slideControl
  }else{
    var noo=this.createEmptyMovieClip ("slideControl",++this.depth)
  }
  noo.tx=x;
  noo.ty=y;
  noo.speed=speed;
  noo.callBackObj =callBackObj;
  noo.callBackFunc=callBackFunc;
  noo.onEnterFrame=function(){
    this._parent._x+=(this.tx-this._parent._x)/this.speed;
    this._parent._y+=(this.ty-this._parent._y)/this.speed;
    if(Math.abs(this.tx-this._parent._x)<0.2 
      Math.abs(this.ty-this._parent._y)<0.2){
      this._parent._x=this.tx;
      this._parent._y=this.ty;
      this.callBackObj[this.callBackFunc](this._parent)
      this.removeMovieClip ()
    }
  }
}

function centerPic(item){
  // if the picture is not already centered
  if(item!=_root.currentPicture){
    _root. currentPicture =item,-
    var mov=item.mov;
    var x=leftPos-mov._x;
    var y=imageHolder._y;
    imageHolder.slideTo(x,y,speed,this,"triggerText");
    clearText();
  }
}

В этой функции нам необходимо проверять, выровнена ли картинка по центру. Результат этой проверки записывается в переменную _root.currentPicture. Если это не так, берем значение _root.currentPicture и начинаем перемещать объект. Мы извлекаем фильм из переданного элемента (это была запись в массиве изображений, поэтому используем параметр mov). Затем выясняем позицию, на которую должен переместиться imageHolder, как мы делали это ранее ( leftPos минус позиция фильма по оси X ) и вызываем функцию slideTo для перемещения на эту позицию. При вызове функции slideTo мы передаем ей функцию "triggerText", которая инициализирует текстовый эффект по достижении фильмом конечной точки. Наконец, нам нужно удалить любой уже присутствующий текст. Для этого в конце программы вызываем функцию clearText.

function createMask(targ,x,y,wid,high){
// create init object containing values for scale and //position
  var obj={_x:x,_y:y,_xscale:wid,_yscale:high};
  _root. attachMovie ("square","maska",++depth,obj );
  targ.setMask(maska);
}

При написании этого кода я заметил кое-что интересное: если попытаться установить _width и _height фильма при его применении с использованием initObj, что мы и делаем, произойдет ошибка, и вы не увидите фильм. Дело в том, что передаваемые переменные настраиваются до того, как что-либо происходит в фильме и, как следствие, программе неизвестно, для чего внутри фильма можно настраивать ширину и высоту.

function setCharPositions(imageArr,tF){
  for(var i in imageArr){
    imageArr[i].characterArr=
     charPositions (tf,imageArr[i].title,10000)
  }
}

function charPositions(tFormat,str,depth){
  _root.createTextField("temp",depth,0,-300,100,400);
  temp.autoSize=true;
  temp.embedFonts=true;
  temp.setNewTextFormat(tFormat);
  temp.text=str;
  var arr= [];
  var totalWidth= temp. textwidth;
  var leftEdge=(stageWidth-totalWidth)/2;
  var height=temp.textHeight;
  var topEdge=(stageHeight-height)/2;
  for(var i=0;i<str.length;i++){
    temp.text=str.substr(i);
    var xp=totalWidth-temp.textwidth;
    arr[i]={x:xp+leftEdge,y:topEdge,char:str.charAt(i)};
  }
  return arr;
}

function triggerText(){
  depth++
  latestText=_root.createEmptyMovieClip ("textHolder"+depth, depth) ;
  latestText.characters=currentPicture.characterArr.slice();
  latestText.movs=[];
  latestText.onEnterFrame=function(){
    this.count++;
    var next=Math.floor(Math.random()* this.characters.length);
    var nextObj=this.characters[next];
    this.characters.splice(next,1);
    var noo=this.createEmptyMovieClip ("lett"+this.count,this.count);
    noo._x=nextObj.x;
    noo._y=nextObj.y;
    noo._alpha=30;
    noo.onEnterFrame=function(){
      this._alpha+=5;
      if(this._alpha>=100){
        delete this.onEnterFrame
      }
    }
    noo.createTextField("tex",1,0,0,100,100);
    noo.tex.text=nextObj.char;
    noo.tex.embedFonts=true;
    noo.tex.selectable=false;
    noo.tex.setTextFormat(_root.captionTextFormat);
      this.movs.push(noo);
      if(this.characters.length==0){
        delete this.onEnterFrame;
        return;
      }
    }
    latestText.remove=function(){
      var next=Math.floor(Math.random()*this.movs.length);
      this.movs [next] .removeMovieClip();
      this.movs.splice(next, 1);
      if(this.movs.length==0){
      this.removeMovieClip();
    }
  }
}

Следует заметить, что мы создали отдельный фильм для текстового эффекта. Он выступает как в роли главного фильма, содержащего отдельные фильмы для букв внутри себя, так и в роли управляющего фильма, т.к. буквы сначала создаются, а затем опять удаляются при переключении фотографий. Последний фильм textHolder хранится в переменной latestText. При переключении фотографий текст в latestText будет удаляться. При создании основного фильма нужно знать, какими являются все символы и в каком месте они должны быть размещены. Для получения этой информации мы используем массив символов текущей картинки. Так как мы собираемся удалять элементы этого массива, мы создаем копию массива с помощью slice в фильме, не трогая оригинал. Метод slice используется, в основном, для возврата элементов из массива между двумя точками, так, например, arr.slice (2,5) возвратит копию элементов массива с 2 по 5. При вызове его без аргументов будет возвращена копия всего массива.

latestText.characters=currentPicture.characterArr.slice ()

function clearText(){
  _root.latestText.onEnterFrame=_root.latestText.remove
}

populatelmages(images,imageWidth);
createButtons(images,buttonTextFormat);
setCharPositions(images,captionTextFormat);
createMask(imageHolder,leftPos,topPos,imageWidth,imageHeight);
centerPic(images[0]);