Видеоплеер своими руками

[solidcreature]

Подготовка видеофайла

В After Effects вы создали проект, который хотели бы показать миру. Первый шаг, который необходимо сделать - это сохранить результат вашей работы в качестве видеофайла. Программа предоставляет множество способов и вариантов как это сделать, позже мы подробно рассмотрим все возможности, а пока воспользуемся наиболее простым методом: Composition // Save RAM Preview

• Установите рабочую область вашей композиции c помощью маркеров (A) и (B), этим вы зададите начало и конце вашего будущего видеофайла
  
• На полосе (С) показано какие кадры вашей композиции уже просчитаны (зеленый цвет) и помещены в оперативную память компьютера, а какие еще требуется просчитать (серый цвет)
  
• Нажмите кнопку RAM Preview на панели Time Control
  
• После того как все кадры вашего фильма будут просчитаны и помещены в оперативную память можно выполнить команду Composition // Save RAM Preview
  
• В папке вашего проекта программа создаст видеофайл формата .avi, который в точности будет соответствовать тому, что вы видете на экране в вашей панели Composition.

Теперь воспользуемся программой Adobe Flash Video Encoder для конвертации нашего файла в формат .flv для дальнейшего использования в среде Flash.

• Перетащите видеофайл в окно программы, или воспользуйтесь кнопкой Add, чтобы найти и добавить видеофайл на вашем компьютере.
  
• Выделите файл и перейдите в раздел Settings (Настройки)
  
• В первой вкладке Encoding profiles выберите Flash 8 - High Quality (700 kbps) и нажмите OK
  
• Нажмите кнопку Start Queue, чтобы начать конвертацию видео
  
• В папке с вашим видео появится файл с таким же названием, но в формате .flv

Отлично! Первый этап закончен.

Настройка проигрывателя flv-видео

• Создайте новый документ flash (Action Script 2.0)
  
• Настройте вашу рабочую область таким образом, чтобы у вас были открыты панели Timeline,Components, Library, Properties, Parameters (это можно сделать через меню Window)
  
• Задайте размер вашей сцены (A) нажав кнопку (B). Введите значения равные размерам вашего видеофайла (в моем случае это 400х300 пикселей)

• Перетащите компонент FLVPlayback (A) на вашу сцену
  
• Обратите внимание, что данный компонент также появился в вашей библиотеке (B)
  
• Перейдите к панели Parameters (C)
  
• Укажите размер (width: 400, height: 300) а также положение на сцене (x: 0, y: 0), так чтобы размер проигрывателя совпал с размером вашей сцены.
  
• Очень важно указать имя в поле Instance Name (В данном случае это FLV1), это нам понадобится для работы нашей собственной кнопки Play, к созданию которой мы перейдем чуть ниже.
  
• Основным на данный момент является параметр Content Path (C) (путь/адрес видеофайла) воспользуйтесь кнопкой browse (в виде иконки директории) чтобы указать путь к файлу на вашем компьютере. Если это поле оставить пустым, то никакое видео проигрываться не будет.
  
• Нажмите Ctrl + Enter чтобы посмотреть результат своей работы. У вас должен сгенерироваться swf-ролик, в котором будет проигрываться указанный flv-видеофайл:
  
  
  

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

• Сохраним наш проект (File Save) в туже директорию, где лежит видеофайл.
  
• Вместо полного адреса теперь достаточно написать только имя файла.
  Т.е. sample-text-movie.flv вместо D:\_teaching\_АфтерЕффектс\Занятие №3\sample-text-movie.flv
  
• Теперь разместив в одной директории два файла (swf-ролик и наш видеофайл) мы можем быть уверены что все сработает правильно (и на флешка, и на сайте, и на чужом компьютере)

Теперь пришло время разобраться с остальными параметрами
autoPlay
Автоматически включать видео при загрузке. По хорошему пользователь должен сам решить смотреть или не смотреть данный ролик, поэтому стоит указать False

autoRewind
Показывать первый кадр (True) или последний кадр (False) после проигрывания видеоролика.

autoSize
Изменять размер окна FLVPlayback под размер видеоролика. В данном случае размеры должны совпадать, так что параметр не учитывается. по умолчанию стоит false т.е. видеоролик растягивается под размер окна

bufferTime
Время за которое флеш-плеер подгружает некоторую часть видеопоследовательности прежде чем начать воспроизведение. Можно оставить значение по умолчанию.

contentPath
Путь к видеофайлу

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

isLive
По умолчанию стоит false - для обычных файлов. True - для видео, которое берется с веб-камеры или Flash Media Сервера

maintainAspectRatio
Если размер окна и видеофайла не совпадают. то для значения true - видеофайл будет смастшабирован пропорционально, но появятся черные поля. false - видео растянется непропорционально на всю ширину

skin
Выбор внешего вида (а также функцонала) вашего плеера
Можно выбрать понравившийся скин и остановиться на этом, а можно указать None и самому создать все управляющие элементы

skinAutoHide
Автоматически прятать элементы навигации

Создаем свою кнопку

Заходим в настройки компонента FLVPlayback и устанавливаем значение NONE для параметра Skin. Теперь у нас отсутствую кнопочки и какие-либо другие элементы управления, т.е. если у вас не стоит true для параметра autoPlay, то вы увидете (после нажатия Ctrl+Enter) только первый кадр и не сможете запустить проигрывание видео.

Пришло время создать свою кнопку.
Нажимаем Ctrl+F8 чтобы создать новый символ.
В типе символа указываем Button (Кнопка).


Нажимаем ОК и автоматически переходим к редактирования нового символа


Панель Timeline (A) приняла характерный вид для типа символа Button. У кнопки есть 3 состояния Up - кнопка не нажата, курсор находится вне зоны кнопки. Over - курсор мыши находится над кнопкой и Down - кнопка нажата. Hit - невидимая зона, которая определяет где кнопка будет действовать а где нет.

(B) - показывает, что мы находимся в режиме редактирования символа MyButton. (С) - точка привязки символа, также является началом координат.

Напишем слово "Play" рядом с точкой привязки (С), примерно также как это сделано на иллюстрации выше, хотя никто не мешает нарисовать кнопку, или написать что-нибудь еще. Отлично, мы сделали вид кнопки для состояния UP.

На панели Timeline кликнем на области справа от нашего кадра (под надписью Over) и нажмем F6 (создать новый ключевой кадр на основе предыдущего). В новом кадре мы получим копию нашего слоя Play. Изменим цвет текста (например можно сделать его более светлым). Таким же образом создадим ключевой кадр для состояния Down, но теперь перекрасим кнопку в темно-серый цвет.

Для зоны Hit создадим пустой ключевой кадр. Для этого кликнем правой кнопкой мыши на панели Timeline под надписью Hit и в появившемся контекстном меню выберем Insert Blank Keyframe. Рисуем прямоугольную область, которая будет чуть больше чем слово Play.

Все вместе должно получится вот так:


Все кнопка готова. Осталось разместить ее на сцене, и прикрепить Action Script, чтобы она запускала видео.

• Перетащите кнопку (A) из палитры Library на сцену
  
• Нажмите F9 чтобы вызвать панель Actions (B)
  
• Введите следующий программный код:
  
  on (release) {
  FLV1.play();
  }
  Где FLV1 это имя (instance name) которе вы задали для вашего компонента FLVPlayback
  
  
  И вот что должно получиться:
  
  
  Скачать исходники:
  simple-flv-player.fla
  sample-flv-video.flv