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

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

На сайте 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. В следующем параграфе мы поговорим о том, как можно непосредственно реализовать такую возможность.