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

Сайты с мультимедийным содержимым

Обработка загрузки графики Flatpack

В интересах краткости и избежания повторения кода, ActionScript для загрузки и предварительной загрузки рисунков в секциях designs и bracken один и тот же, со следующими функциями в кадре 1 слоя actions/labels фильма photos.

Stop();
function loadlmage(loadingTarget, progressBarName, fileName) { 
  this.onEnterFrame = function() { 
    fadelnc = 10; fade = 0;
    loadMovie("images/"+fileName, this[loadingTarget]);
                this[progressBarName].setLoadTarget(this[loadingTarget]);
    this[loadingTarget]._alpha = fade; 
    this.onEnterFrame = function() {
      if (this [progressBarName].getPercentComplete() == 100) { 
        this[progressBarName]._visible = false; 
        this.onEnterFrame = function() { 
          fade += fadelnc; 
          if (fade<=100) {
            this[loadingTarget]._alpha = fade; 
          } else if (fade>100) {
            this.onEnterFrame = undefined;
            _root.count = _root.lastCount; 
            _root.count++;
          }
        }; 
      } 
    }
  }; 
}

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

  • Инициализация некоторых переменных и установка команды loadMovie и компонентов ProgressBar.
  • Проверка ProgressBar для выяснения, полностью ли загружен рисунок.
  • Постепенное появление рисунка после полной загрузки.

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

Инициализация

Ниже приведена часть функции, в которой инициализируются переменные, устанавливаются loadMovie и ProgressBar.

function loadlmage(loadingTarget, progressBarName, fileName) { 
  this.onEnterFrame = function() { 
    fadeInc = 10; 
    fade = 0;
    loadMovie("images/"+fileName, this[loadingTarget]);
    this[progressBarName].setLoadTarget(this[loadingTarget]); 
    this[loadingTarget]._alpha = fade;

Теперь определим параметры, передаваемые функции.

  • loadingTarget является именем инстанса места, в которое будет загружаться рисунок JPEG.
  • progressBarName является именем компонента ProgressBar, осуществляющего мониторинг загрузки JPEG в конечный инстанс.
  • fileName - это имя файла рисунка JPEG.

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

Переменные fadeInc и fade будут использованы позже в функции при постепенном появлении рисунка. fadeInc содержит число, добавляемое к параметру _alpha рисунка в каждом кадре; вы можете изменить его для уменьшения или увеличения скорости появления рисунка. fade просто инициализирует значение _alpha для loadingTarget, и находится в последней строке данной части функции.

Следующая строка кода является главной частью кода, так как в ней осуществляется загрузка JPEG в инстанс контейнера (устанавливается посредством параметра loadingTarget ) вызовом файла (указанного в fileName ) из папки images на сервере. Например, если функции был передан файл bagelboy.jpg, строкой loadMovie будет "images/bagelboy.jpg".

Эта функция может быть адаптирована для добавления к имени файла расширения .jpg:

loadMovie ("images/"+fileName+".jpg", this [loagingTarget]);

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

Предпоследняя строка вышеуказанного блока кода:

this [progressBarName].setLoadTarget (this [loadingTarget]);

:обеспечивает ProgressBar объектом мониторинга с использованием компонента метода setLoadTarget. Как видите, он использует передаваемые в progressBarName и loadingTarget параметры для получения должного эффекта.

Загружен ли рисунок?

Вторая часть кода функции невелика.

this.onEnterFrame = function() {
  if (this[progressBarName].getPercentComplete() == 100) { 
    this[progressBarName]._visible = false;

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

Как и в случае с общим методом сравнения getBytesLoaded с getBytesTotal, проверка осуществляется в каждом кадре и выясняется, равен ли метод getPercentComplete (псевдопараметр, упомянутый нами ранее) ProgressBar значению 100%. Этот код onEnterFrame будет выполняться в каждом кадре до тех пор, пока условие не станет верным, и рисунок полностью не загрузится. Как только это произойдет, ProgressBar будет скрыт, и начнется выполнения следующей части кода.

Плавное появление рисунка

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

this.onEnterFrame = function() { 
      fade += fadeInc; 
      if (fade<=100) {
        this[loadingTarget]._alpha = fade; 
      } else if (fade>100) {
        this.onEnterFrame = undefined;
        _root. count =_root.lastCount;
        _root.count++; }
      } 
    }
  }; 
}

Здесь присутствует старый добрый управляющий элемент onEnterFrame, устанавливающий цикл для постепенного появления рисунка. Следующая строка увеличивает переменную fade на fadeInc (значение которого установлено на 10 в коде инициализации), а после нее имеют место два условных выражения для проверки переменной fade, которая может быть меньше, равна или больше 100. В случае, если fade меньше или равна 100, интенсивность рисунка устанавливается на значение fade, обеспечивая нужный эффект плавного появления изображения. Если fade больше 100, onEnterFrame удаляется и обе переменные меняют название. Эти переменные используются для проверки последовательности загрузки и будут обсуждаться в следующем параграфе.

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

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

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

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

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

Тамара Ионова
Тамара Ионова
Россия, Нижний Новгород, НГПУ, 2009
Магомед Алисултанов
Магомед Алисултанов
Россия, Волгоград, лицей 2