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

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

Прочие возможности

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

Реализация случайного появления символов

  1. Единственным изменением в данном файле будет функция drawNext. Откройте useCharPos.fla и приготовьтесь вносить в него изменения.

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

    var next = Math.floor(Math.random()*charpos.length);
    var nextObj = charPos[next] ;
    charPos.splice(next, 1) ;
  2. Остальная часть функции более или менее похожа на предыдущую. Единственным отличием является способ выбора символа для создания дубликата.
    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;
      }
    }
  3. Можно ускорить выполнение этой программы, заключив весь код в цикл, вследствие чего с каждым кадром будет создаваться больше дубликатов.
    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 - работает по такому же принципу, но обрабатывает буквы по порядку, а не случайным образом.


Улучшение интерфейса навигации для изображений

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

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

Динамическое позиционирование изображений и добавление текстовых эффектов

  1. Импортируйте все изображения (pic1.jpeg - pic8.jpeg с компакт-диска) и разместите их в фильмах. Назовите их 'pic1' - 'pic8' и в диалоговом окне Linkage настройте экспорт для ActionScript. Используя имена 'pic1' - 'pic8', установите точку закрепления на левый верхний угол.
  2. Теперь на главном рабочем месте мы установим несколько основных переменных для фильма. Они будут представлять собой информацию о размере фильма и размере изображений. Мы будем использовать эти данные для центрирования изображений на рабочем месте.
    stageWidth=550;
    stageHeight=400;
    imageWidth=410;
    imageHeight=308;
    speed=3;

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

  3. При помощи переменных stageWidth и stageHeight можно выяснить, где должна располагаться картинка, чтобы оказаться по центру рабочего места. Если фильмы выровнены по центру, можно вычислить левую сторону картинки, вычтя ширину картинки из ширины рабочего места и затем разделив на два. stageWidth минус imageWidth даст нам расстояние до другой стороны изображения. Разделив этот результат на два, получим левую позицию.
    topPos= (stageHeight-imageHeight)/2;
    leftPos= (stageWidth-imageWidth)/2;
  4. Мы собираемся расположить изображение по центру рабочего места, а также добавить строку текстовых кнопок под картинкой. Нам нужны объекты textFormat для кнопок и для текстового эффекта, который будет располагаться вверху картинки.
    buttonTextFormat=new TextFormat ("_sans", 9, 0x87A7E2, true);
    captionTextFormat=newTextFormat ("Arial", 30, 0xffffff, true);
  5. Применим шрифт Arial, но не sans. Для этого поместите текстовое поле вне рабочего места, установите шрифт на Arial, настройте его на динамический текст и добавьте все символы, как мы это делали ранее. Убедитесь, что отмечен параметр жирности шрифта, как указано в объекте TextFormat. Вы можете выбрать любой шрифт, я указал Arial просто потому, что он имеется у всех пользователей.
  6. Далее мы определим массив, содержащий идентификаторы ссылок изображений, которые мы будем добавлять, и название, которое будет присвоено каждому из них. Мы создадим каждый элемент массива в виде объекта, имеющего два параметра - ссылку и название.
    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"}
    ]

    Для расположения рисунков на рабочем месте нам нужно создать функцию. Как и в примере "Представление сайта" , мы поместим каждый рисунок внутрь фильма для скольжения на нужные позиции. Прежде всего, в функции необходимо создать пустой фильм "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 во время перемещения картинок. Я не понимаю, как это срабатывает, но, тем не менее, это так. Вы можете попытаться исключить эти строки, когда мы закончим, и понять разницу. Если вы запустите код сейчас, то вы увидите по крайней мере два фильма, стоящие на рабочем месте один за другим.

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

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

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

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

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