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

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

Случайный фон

На сайте Flatpack Record различные фоны загружаются случайным образом по мере перехода пользователя от одной секции к другой. Опробуйте эту возможность, передвигаясь по сайту, находящемуся в файле flatpackrecords.swf. После этого, вернитесь в главный файл flatpackrecords.fla. Давайте разберемся, как достигается этот эффект.

  1. Во-первых, есть фильм backgroundHolder с именем инстанса bg, расположенного слева вверху рабочего места на координатах (0,0). Это, как видно из имени, место для внешних фоновых изображений. Фильм присвоен кадру 1 слоя bgHolder в главной точке временной шкалы.
  2. Далее, мы создали слой маски (с именем bg mask ) прямо над слоем bgHolder и нарисовали маски для трех областей, в которых будет отображаться случайный фон. Как видно из следующего рисунка, фоновые изображения будут отображаться за динамическим текстом и интерфейсом в левой части, а также за окном основного содержимого в правой части. Однако маска не применяется до кадра 2, чтобы начальная страница отображалась без фонового эффекта.


  3. Далее следуют две функции, применяемые к кадру 1 слоя actions/labels. Они вызывают случайным образом рисунок JPEG для добавления его в фильм bg. Эти функции объединены в другой функции, вызываемой каждый раз при переходе в другую секцию сайта (эта функция начинается в строке 38 в панели Actions).
    bgCount = 9;
    function backgroundLoad() { 
      fade = -5;
      _root.bg._alpha = fade;
      randBg = Math.round(Math.random()*bgCount+1); 
      loadMovie("backdrops/bg"+randBg+".jpg", _root.bg);
    }
    function backgroundFade() {
      if (_root.bg.getBytesTotal() == _root.bg.getBytesLoaded() ) { 
        _root.bgCheck.onEnterFrame = function() { 
          if (fade<20) {
            fade++;
            _root.bg. __alpha = fade; 
          } else if (fade>=20) {
            _root.bgCheck.onEnterFrame = undefined; 
          }
        }; 
      } 
    }
    function loadBackground() { 
      backgroundLoad(); 
      backgroundFade(); 
    }

    Функция loadBackground вызывается каждый раз при щелчке кнопкой, когда пользователь переходит в другую секцию (аудио, видео или фото). Для этого используется функция changeButtons (расположенная ниже в строке 84 того же кода).

    В первой части параметр _alpha фильма, в котором находиться фон ( _root.bg ), устанавливается на значение -5. Это делается перед загрузкой фона, так как импортируемые рисунки JPEG наследуют параметры фильма, в который они загружаются. Но почему мы установили этот параметр на -5, а не на 0? Мы выяснили, что даже когда Flash обнаруживает, что изображение загружено (с помощью метода getBytesLoaded), имеет место пауза перед непосредственным появлением изображения на экране. Установив интенсивность на -5, мы обеспечиваем рисунок временем для появления внутри SWF перед тем, как значение интенсивности достигнет 0 (любое значение интенсивности, меньшее 0, все равно означает 0). Установка интенсивности на начальное значение 0 означала бы, что ко времени появления рисунка интенсивность уже имела бы значение 5%, и эффект плавного появления не был бы достигнут.

  4. Ниже приведен код окончания функции.
    randBg = Math.round(Math.random()*bgCount)+1;
    loadMovie ("backdrops/bg" + randBg + ".jpg", _root.bg);

    Эта часть кода выбирает случайный фон и загружает его в фильм _root.bg (фильм, расположенный в левой верхней части экрана). Сначала генерируется случайное число от 0 до bgCount (начальное значение 9), и после этого к нему прибавляется 1 (генерируется число между 1 и 10). Это выполняется с помощью randBg.

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

    После этого применяется randBg для случайного выбора фонового изображения (они находятся в папке backdrops на компакт-диске с именами bg1.jpg - bg10.jpg) и добавления их в _root.bg.

  5. Следующая функция ( backgroundFade ) плавно отображает фоновый рисунок после его загрузки. Эта функция сначала проверяет, завершена ли загрузка рисунка JPEG с помощью следующего выражения.
    if (_root.bg.getBytesTotal () == _root.bg.getBytesLoaded ())  {

    Если эти условия были встречены, сценарий проверяет, не появился ли фоновый рисунок на 20%, и, если это не так, увеличивает значение fade на 1%. Нам нужно, чтобы фоновые рисунки имели интенсивность 20%, и подходили для использования в качестве фоновых рисунков сайта.

    if (fade<20) {
      fade++;
      _root.bg._alpha = fade; 
    }

    Итак, каждый раз, когда выполняется управляющий элемент onClipEvent (enterframe), значение интенсивности фонового рисунка увеличивается на 1%. Результирующий эффект представляет собой плавное появление фонового изображения. Изменение значение fade для увеличения интенсивности большими "порциями" приведет к более быстрому появлению фона. Так, например, если изменить значение fade++ на fade +=2, появление рисунка будет происходить в два раза быстрее.

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

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

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

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

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

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

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

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