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

Видеоданные

Видео Flatpack

Обратите внимание на главный файл сайта flatpackrecords.fla. Если вы помните, на главной временной шкале фотографий, фильмов и аудио имеются три области. Перейдите к кадру с именем video и откройте фильм video в слое dynamic content. Вы увидите такую временную шкалу.


Здесь есть три состояния, доступные из главной навигационной системы. Каждая из областей bantha, slipshod и playground areas имеет содержимое для трех видеосекций сайта.

Первым элементом, который мы рассмотрим, будет видео Banthafodder. Мы обеспечили загрузку фильма с хорошим качеством для удаленных пользователей с выделенным каналом связи, и мы также предоставим возможность загружать фильм с меньшим качеством для пользователей, работающих через стандартный модем 56K. В слое text находится текст, поясняющий это, и в слое buttons имеются две кнопки, предназначенные для загрузки либо banthabroadband.swf, рассмотренный нами ранее, либо альтернативного banthaloband.swf с меньшим размером.


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

Динамическая загрузка видео Banthafodder

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

  • Внешний медиа-файл, в данном случае это отдельный файл banthabroadband.swf, с которым мы только что работали.
  • Фильм, в котором находится содержимое, расположенный на сайте, куда загружается медиа-файл.
  • Элементы перехода главной страницы, загружающие медиа-файл в фильм с содержимым.

Рассмотрим конструкцию детально.

  1. Во-первых, я хотел использовать версию Banthafodder для широкополосных сетей, поэтому я заново открыл banthabroadband.fla, чтобы проверить его размеры на рабочем месте. Необходимо отвести достаточно места на главной странице для всего SWF. В моем случае размер banthabroadband.swf равен 180х200 пикселей.
  2. Вернувшись к flatpackrecords.fla, я создал слой с именем content и в соответствующем кадре добавил пустой фильм с именем инстанса contentholder.

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

  3. Теперь осталось добавить нужный ActionScript для загрузки внешнего фильма в фильм contentholder.
    broadbandButton.onRelease   =   function()   {
        LoadMovie ("banthabroadbandswf", contentholder);
      };
      loButton.onRelease = function() {
        loadMovie("banthaloband.swf", contentholder);
      };

SWF соответствующего размера будет теперь загружаться в contentholder каждый раз при нажатии любой кнопки.

Проверка скоростей загрузки и потокового видео

Запустив файл flatpackrecords.fla, вы увидите, что он теперь загружает banthabroadband.swf (см. рис. вверху следующей страницы).

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

  1. Чтобы увидеть, как фильм будет выглядеть в режиме online, выберите View > Show Streaming в тестируемом фильме.

  2. Это даст большее представление о том, что пользователи будут видеть на своих экранах, так как фильм воспроизводится с симуляцией модемного соединения, однако также можно использовать Bandwidth Profiler (View > Bandwidth Profiler) для отображения данных, выгружаемых в браузер. Удостоверьтесь, что опция View > Frame By Frame Graph включена, так как это наиболее удобный метод.

    Но даже, несмотря на то, что отображается процесс загрузки flatpackrecords.swf, banthabroadband.swf появляется сразу после щелчка на кнопке (т.е. вы не можете наблюдать поток внешнего источника).

  3. Для этого нужно вернуться к исходному banthabroadband.fla и проверить фильм оттуда. С включенным Bandwidth Profiler можно видеть, насколько быстро идет загрузка видео (см. рис. ниже).

    Этот файл не воспроизводился бы в потоковом режиме через модем 56K, тем не менее, все бы работало нормально, так как мы добавили индикатор загрузки. Для потокового воспроизведения каждый кадр должен содержать меньше информации (т.е. фильм должен быть еще более сжатым), тогда он может воспроизводиться по мере того, как загружается остальная часть фильма. В Bandwidth Profiler можно видеть, что потоковое воспроизведение файла является эффективным, так как полоса индикатора не заходит за красную линию. В случае, изображенном на рисунке вверху следующей страницы, понадобилось бы уменьшить размер каждого кадра фильма banthabroadband.swf до 400 байт, однако очевидно, мы этого сделать не сможем. В любом случае пользователю сообщается о том, что этот фильм создан для воспроизведения по широкополосной сети.

  4. Настройки в меню Debug различаются для различных типов веб-подключений. Я осуществлял тестирование для модема 56K, однако вы можете также установить ваши собственные настройки в том же меню, скажем, для моделирования ADSL-подключения, выбрав Debug > Customize: и настроив следующим образом.

    После этого данные в Bandwidth Profiler изменятся.

  5. Теперь нужен файл, который воспроизводил бы в потоковом режиме низкоскоростную версию того же самого видео. Лучше всего это достигается импортированием версии исходного фильма с более низким качеством в новый файл Flash. Я создал другой фильм с именем banthaloband.fla с использованием следующих настроек Sorensen Spark при импорте.

    Обратите внимание, что значения Scale, Quality и Keyframe Interval сильно уменьшены, чтобы уменьшить размер каждого кадра фильма QuickTime. Значение video:Flash также настроено на 1:3.

  6. Теперь при проверке данного потокового воспроизведения кадр за кадром для модема 56K Bandwidth Profiler выглядит более прилично.

    Даже несмотря на то, что несколько больших блоков все-таки выходят за пределы красной линии, большинство кадров на самом деле являются очень небольшими по размеру. Действительно, если вы посмотрите на те же данные в Streaming Graph, вы увидите, что все укладывается в одну равномерную линию.

    При потоковом воспроизведении можно видеть, сколько данных уже загружено (зеленая область) и где находится "головка воспроизведения" (треугольная метка). Пока индикатор находится впереди головки воспроизведения, видео будет проигрываться в потоковом режиме. На примере выше загружено лишь 48 кадров, однако это не проблема, так как головка воспроизведения все еще находится на кадре 2.

    Так как мне теперь известно, что banthaloband.swf будет успешно воспроизводиться в потоковом режиме на большинстве модемов, я просто экспортирую его в виде отдельного SWF. Этот файл будет вызываться с главной страницы запросом пользователя при нажатии кнопки, соответствующей низкоскоростному соединению.

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

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

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

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

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

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