В какой-то момент почти каждому разработчику Flash пришлось сделать видеоплеер. Есть довольно много разных способов сделать это; некоторые люди используют встроенный класс NetStream, а некоторые используют компонент FLVPlayback во Flash. В любом случае будет работать, но мы собираемся использовать класс NetStream из-за того, насколько он легче и что вы можете с ним сделать.
Это большой учебник, который будет разбит на три части. Каждая часть будет основываться на предыдущей, пока мы не получим наш конечный результат. Наш проигрыватель сможет использовать файл XML, чтобы заполнить три галереи неограниченным количеством категорий и неограниченным количеством видео в каждой категории.
Давайте кратко рассмотрим, что мы будем строить в каждой части этой серии:
Часть 1
- Настройка файлов, организация файлов и папок.
- Понимание того, как настроен стартовый файл.
- Поместите элементы на сцену для изменения размера начальной стадии.
- Глобальные функции ролловера и развертывания.
- Настройте наш класс Net Stream.
- Получите видео, играя.
- Добавьте функциональность preloader.
- Настройте элементы управления для воспроизведения видео. К ним относятся кнопка воспроизведения, кнопка паузы, кнопка остановки, очистка временной шкалы видео и очиститель громкости.
Часть 2
- Настройте наши миниатюры видео, миниатюры категорий и рекомендуемые миниатюры видео.
- Напишите файл XML.
- Загрузите файл XML во Flash.
- Создайте элементы категории в правой боковой панели.
- Предварительная загрузка миниатюр элементов категории.
- Функциональность кнопки Галерея для правой боковой панели.
- Создайте видео элементы в правой боковой панели.
- Предварительная загрузка миниатюр видеоэлементов.
- Создайте динамическую вертикальную полосу прокрутки, которая показывает, когда необходимо, и скрывает, когда она не нужна.
- Воспроизвести выбранные видео.
Часть 3
- Отображение текущего времени и общего времени под плеером.
- Функциональность кнопки Home.
- Установите ширину и высоту нашего видео.
- Сосредоточьте наше видео в окне проигрывателя.
- Проверьте файл XML для любых популярных видео.
- Добавить избранные элементы видео в избранную подбар.
- Предварительная загрузка избранных миниатюр видео элементов.
- Добавьте динамическую горизонтальную полосу прокрутки для показанной вспомогательной панели.
Я упоминал об этом на занятиях, но я хотел бы поблагодарить некоторых людей за помощь в этом уроке.
- DTX Creative — видео
- Государственный университет Бойсе — видео
- Джон Смит — видео
- Алекс Хакетт — видео
- Бретт Бальцер — видео
- Стэн Смит — редактирование кода
Шаг 1: Понимание исходных файлов
Первое, что нужно сделать — это загрузить предоставленные мной исходные файлы. Это очень важно, так как я не буду вдаваться в подробности, как называются вещи и как я настраиваю файл. Однако я дам краткий обзор конкретных вещей, которые я сделал (например, как я сделал свои кнопки и другие важные вещи). По сути, я поместил все объекты на сцену, организовал библиотеку, создал видеоклипы для всего, правильно назвал все видеоклипы на сцене и создал ролловеры кнопок для всех необходимых кнопок. Наряду с созданием и экспортом необходимых видеороликов.
Следующее, что нужно отметить, это то, как я настроил свои папки для этого проекта. Вы должны создать папку на рабочем столе с именем, что вы хотите (например, my_AS3_Video_Player). Откройте эту папку, удалите загруженную папку «flv» вместе с файлами «playlist.xml» и «theatre.fla». Файл theatre.fla — это ваш стартовый файл. Файл playlist.xml — это предварительно записанный XML-файл. Внутри папки «flv» вы увидите все видео, которые мы будем использовать, а также папку «thumbs», которая содержит 3 другие папки. Эти три папки имеют миниатюрное изображение всех видео разных размеров.
ПРИМЕЧАНИЕ. Если вы не хотите использовать предоставленные мною видео, вы можете использовать свои собственные, но убедитесь, что в них есть звуковая дорожка, иначе вы не сможете определить, правильно ли работает звуковой скруббер.
Ваш стартовый файл должен быть уже связан с выходной папкой, когда вы открываете файл theatre.fla. Если вы знаете, как это работает, тогда игнорируйте следующее предложение. Если вы не знаете, как это работает, нажмите «Файл»> «Опубликовать». Вы должны быть на вкладке форматов. Здесь вы вводите «../output/theater.swf» для вашего .swf и, если вы хотите опубликовать .html, вы вводите «../output/theater.html». Вам также нужно перейти на вкладку html и выбрать проценты для измерений. В противном случае ваш файл не будет правильно центрирован на сцене.
Третье, что вам нужно сделать, это скачать класс Caurina Tweener . После загрузки вам нужно открыть zip-файл и скопировать папку caurina в вашу папку «src», чтобы мы могли использовать ее для нашей анимации.
Шаг 2: Принимая к сведению вашу сцену и предметы
Теперь, когда все настроено, пришло время просмотреть файл. Первое, на что стоит обратить внимание, это размер вашей сцены 850×580, это не так уж важно, так как будет установлено в зависимости от размера вашего окна. Тем не менее, это минимальный размер, который будет отображаться в вашем окне перед кадрированием части проигрывателя. Второе — это 4 слоя на сцене. Верхний слой — это место, где мы будем писать наш код. Второй слой, где у нас будут элементы управления видео и видео. Третий слой, где у нас будет плейлист с различными галереями, категориями и видео. Четвертый слой — это место, где мы разместим избранные видео, для которых в xml задано простое значение true или false.
Еще одна вещь, которую я хотел бы отметить, это элементы, которые мы будем добавлять в этот файл на основе нашего xml. Мы будем заполнять их во время выполнения из нашей библиотеки. Есть 3 элемента с именами featuredItem_mc , videoItem_mc и categoryItem_mc . Они находятся в папках в библиотеке и уже настроены для экспорта при публикации.
Помимо этого, кнопки вместе с ролловерами и динамическим текстом уже настроены для вас. Не стесняйтесь настраивать, если хотите, но мы рассмотрим эти шаги позже.
Шаг 3: Давайте начнем писать код!
Давайте импортируем необходимые классы, которые мы будем использовать для наших подростков. Мы также установим нашу сцену так, чтобы она выровнялась по левому верхнему углу и установила ее не в масштабе. В основной временной шкале нажмите на слой AS3 и введите следующее:
|
1
2
3
4
5
|
import caurina.transitions.*;
import caurina.transitions.properties.FilterShortcuts;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
FilterShortcuts.init();
|
Шаг 4: Назовите объекты на сцене
Теперь давайте добавим несколько именующих переменных, чтобы нам не приходилось вводить такие длинные имена экземпляров.
|
1
2
3
4
|
var videoBox:MovieClip = player_mc;
var sidebarBox:MovieClip = rightSidebar_mc;
var featuredBox:MovieClip = featuredBox_mc;
var featuredBoxBg:MovieClip = featuredBox_mc.featuredBoxBg_mc;
|
Шаг 5: Центрируйте содержимое при запуске
Ниже того, что мы написали, введите:
|
01
02
03
04
05
06
07
08
09
10
|
setMyStage();
function setMyStage():void
{
videoBox.x = stage.stageWidth / 2 — (featuredBoxBg.width / 2);
videoBox.y = (stage.stageHeight / 2 — videoBox.height / 2) — featuredBoxBg.height / 2;
sidebarBox.x = (stage.stageWidth / 2 + 92);
sidebarBox.y = videoBox.y;
featuredBox.x = videoBox.x;
featuredBox.y = videoBox.y + videoBox.height + 4;
}
|
Теперь, если вы протестируете свой фильм, ваш контент будет центрирован в середине вашего .swf файла. Но нет, если вы измените размер .swf. Так что давайте позаботимся об этом.
Шаг 6: Добавить слушателя изменения размера сцены и функцию
Далее нам нужно позаботиться о том, что происходит, когда вы меняете ширину и высоту .swf или размер браузера. Для этого введите следующий код под функцией setMyStage :
ПРИМЕЧАНИЕ. Я обычно собираю всех слушателей в верхней части кода, а все функции — в нижней. Некоторые люди делают это наоборот. Выигрыш в производительности отсутствует, но он помогает сохранить ваш файл более организованным. С этого момента всякий раз, когда я добавляю слушателя, я помещаю его ниже последнего слушателя вверху, а когда я добавляю функцию, я помещаю его ниже последней функции внизу страницы. О, и вы также должны всегда размещать свои переменные вверху один за другим.
|
01
02
03
04
05
06
07
08
09
10
|
stage.addEventListener(Event.RESIZE, myResizeEvent);
function myResizeEvent(event:Event):void // run the function to handle stage width and height resize
{
videoBox.x = stage.stageWidth / 2 — (featuredBoxBg.width / 2);
videoBox.y = (stage.stageHeight / 2 — videoBox.height / 2) — featuredBoxBg.height / 2;
sidebarBox.x = (stage.stageWidth / 2 + 92);
sidebarBox.y = videoBox.y;
featuredBox.x = videoBox.x;
featuredBox.y = videoBox.y + videoBox.height + 4;
}
|
Теперь, если вы протестируете ваш файл .swf, он будет центрироваться при запуске, а если вы измените ширину или высоту, он также останется центрированным.
Шаг 7. Переменные для элементов видео на сцене
Снова давайте добавим несколько переменных, чтобы имена наших экземпляров были не такими длинными.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
var playBtn:MovieClip = player_mc.playBtn_mc;
var pauseBtn:MovieClip = player_mc.pauseBtn_mc;
var stopBtn:MovieClip = player_mc.stopBtn_mc;
var videoBlackBox:MovieClip = player_mc.videoBlackBox_mc;
var videoPreloader:MovieClip = player_mc.videoPreloader_mc;
var videoTitleTxt:TextField = player_mc.VideoTitle_txt;
var videoTimeTxt:TextField = player_mc.videoTime_txt;
var videoThumb:MovieClip = player_mc.videoTrack_mc.videoThumb_mc;
var videoTrackProgress:MovieClip = player_mc.videoTrack_mc.videoTrackProgress_mc;
var videoTrackDownload:MovieClip = player_mc.videoTrack_mc.videoTrackDownload_mc;
var volumeThumb:MovieClip = player_mc.volumeSlider_mc.volumeThumb_mc;
var volumeTrack:MovieClip = player_mc.volumeSlider_mc.volumeTrackFull_mc;
|
Шаг 8: Ролловер кнопок и свертки
Здесь мы будем использовать одну и ту же функцию для всех наших ролловеров и выкатов. Причина этого в том, что он уменьшает код, плюс все кнопки, которые мы будем использовать, будут выполнять одно и то же, так почему бы просто не сделать одну функцию, которую можно использовать повторно?
|
01
02
03
04
05
06
07
08
09
10
|
playBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
playBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
pauseBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
pauseBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
stopBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
stopBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
videoThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
videoThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
volumeThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
volumeThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
|
Шаг 9: Глобальные функции для кнопок
Давайте добавим две функции, которые позволяют нам добавлять ролловер и свитки к любой кнопке, настроенной, как описано в следующем шаге.
|
1
2
3
4
5
6
7
8
|
function btnOver(event:MouseEvent):void
{
event.currentTarget.gotoAndPlay(«over»);
}
function btnOut(event:MouseEvent):void // Targets the current Movieclip when the mouse rolls over it and tells it to go to the out label keyframe and play
{
event.currentTarget.gotoAndPlay(«out»);
}
|
Теперь, если вы проверите свой фильм, кнопки будут меняться при переворачивании и возвращаться в исходное состояние при выкатывании.
Шаг 10: Функциональность ролловера и выкатывания
Давайте на секунду посмотрим, как я создаю свои кнопки и как настроены все кнопки и видеоклипы в этом руководстве. Вам не нужно выполнять этот шаг, но если вы хотите следовать, перейдите к мувиклипу playBtn_mc в мувиклипе player_mc и откройте его.
Первое, что нужно сделать, это дизайн вашей кнопки. Затем преобразуйте его в мувиклип и присвойте ему имя экземпляра. Если это кнопка воспроизведения, я бы назвал ее как «playBtn_mc». Дайте ему правильное имя экземпляра. Заблокируйте эти слои, чтобы случайно не разместить на них символы. Как только вы это сделаете, откройте мувиклип и создайте два слоя поверх всего. Назовите один слой «AS3», а второй слой «Метки».
В первом кадре слоя AS3 откройте панель ActionScript и введите «stop ();». Сделайте то же самое на 10-м кадре. На втором кадре слоя «Метки» создайте ключевой кадр и выделите его. Теперь перейдите на панель свойств и в поле «Имя» введите «over». Теперь перейдите к 11-му кадру в слое Labels и создайте еще один ключевой кадр. Выберите каждый элемент отдельно и конвертируйте в мувиклип. После завершения выберите все и разделите на слои. Вы можете использовать контекстное меню, вызываемое правой кнопкой мыши, или настроить сочетание клавиш. Поскольку я постоянно разделяю элементы на слои, я считаю полезным создать ярлык «Ctrl + D» [Command + D] на Mac. (Примечание: имя слоя будет основано на имени, которое вы дали каждому символу.)
Не беспокойтесь о том, чтобы дать им имена экземпляров, так как мы просто будем их анимацией. Если вы не преобразуете каждый элемент, который хотите анимировать, в символ, Flash создаст в вашей библиотеке анимацию, которая станет грязной. Перейдите к 10-му кадру слоя, который вы хотите анимировать, и создайте ключевой кадр, затем перейдите к 20-му кадру того же слоя и создайте другой ключевой кадр.
Теперь выделите все слои фреймов и щелкните правой кнопкой мыши. Выберите «создать классическую анимацию». Пока не отменяйте выбор, перейдите на панель свойств. Выберите вкладку анимации и введите 100. Теперь выберите 10-й кадр слоя, перейдите на панель свойств и выберите вкладку стиля. Здесь вы можете выбрать, что вы хотите, чтобы текущий элемент делал. Вот и все. Вы также можете изменить длительность анимации при опрокидывании и развертывании, переместившись туда, где выполняются действия остановки и ключевые кадры меток «за / против».
Вот как все кнопки настраиваются в этом уроке, поэтому каждый раз, когда вы видите ролловер или развёртывание, я так и делал. С помощью кода из шагов 7 и 8 и кнопки из этого шага вы можете создать кнопку с функциями прокрутки и развертывания в любом проекте.
Шаг 11: сделай так, чтобы видеоклипы вели себя как кнопки
Давайте добавим buttonMode и mouseChildren к нашим кнопкам. Добавьте это ниже ваших переменных в верхней части вашего кода.
|
01
02
03
04
05
06
07
08
09
10
|
playBtn.mouseChildren = false;
playBtn.buttonMode = true;
pauseBtn.mouseChildren = false;
pauseBtn.buttonMode = true;
stopBtn.mouseChildren = false;
stopBtn.buttonMode = true;
videoThumb.mouseChildren = false;
videoThumb.buttonMode = true;
volumeThumb.mouseChildren = false;
volumeThumb.buttonMode = true;
|
Теперь все ваши кнопки в мувиклипе player_mc должны иметь функции прокрутки и развертывания при тестировании фильма.
Шаг 12: Запустите
Здесь мы будем скрывать предварительный загрузчик видео, устанавливать пустое динамическое текстовое поле заголовка видео, а также обнулять динамический текстовый слой времени видео. Введите следующий код под кодом в шаге 10:
|
1
2
3
|
videoPreloader.visible = false;
videoTitleTxt.text = «»;
videoTimeTxt.text = «0:00 / 0:00»;
|
Шаг 13: Настройка нашего объекта NetStream
Здесь мы установим переменную, которая собирает текущее видео из xml и устанавливает его в строку. Мы также установим высоту и ширину видео с помощью номера, который в конечном итоге изменится при открытии нового фильма. Добавьте следующие переменные в список переменных вверху вашего кода:
|
1
2
3
4
|
var currentVideo:String;
var videoWidth:Number = 500;
var videoHeight:Number = 400;
var duration:Number;
|
Шаг 14: создайте видеообъект
Теперь, когда у нас есть все функции, настроенные для плеера, пришло время начать воспроизведение видео. Сначала нам нужно создать элемент видео, установить его положение и добавить его на сцену в нужном слое. Ниже всего в вашем слое ActionScript введите следующее:
|
1
2
3
4
|
var video:Video = new Video(videoWidth, videoHeight);
video.x = 0;
video.y = 0;
videoBlackBox.addChild(video);
|
Шаг 15: NetConnection и NetStream Connection
Теперь нам нужно создать новое NetConnection и связать его с новым соединением NetStream вместе с некоторыми прослушивателями для NetStream. Добавьте это к своему коду:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
var video:Video = new Video(videoWidth, videoHeight);
video.x = 0;
video.y = 0;
videoBlackBox.addChild(video);
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.addEventListener(NetStatusEvent.NET_STATUS, myStatusHandler);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
video.attachNetStream(ns);
var newMeta:Object = new Object();
newMeta.onMetaData = onMetaData;
ns.client = newMeta;
ns.bufferTime = 5;
|
Шаг 16. Функции NetStream и буферное видео
Теперь давайте добавим функции для обработки того, что происходит, когда происходит определенное видео-событие или ошибка соединения. Мы также будем обрабатывать буфер для видео. Добавьте код ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
function asyncErrorHandler(Event:AsyncErrorEvent):void
{
//trace(event.text);
}
function myStatusHandler(event:NetStatusEvent):void
{
//trace(event.info.code);
switch(event.info.code) // switch statement to handle the various events with the NetConnection
{
case «NetStream.Buffer.Full»: // when our buffer is full fire the code below
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:0, time:.3});
break;
case «NetStream.Buffer.Empty»: // when our buffer is empty fire the code below
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:1, time:.3});
break;
case «NetStream.Play.Start»: // when our video starts playing we fire the code below
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:1, time:.3});
break;
case «NetStream.Seek.Notify»: // when you seek with the scrubber it sends a notify signal of the time
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:1, time:.3});
break;
case «NetStream.Seek.InvalidTime»: // when you release the scrubber ahead of the video that has been loaded, you get this error.
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:1, time:.3});
break;
case «NetStream.Play.Stop»: // when you reach the end of the video
Tweener.addTween(videoPreloader, {alpha:0, time:.3});
ns.pause();
ns.seek(1);
break;
}
}
function onMetaData(newMeta:Object):void
{
//trace(«Metadata: duration=» + newMeta.duration + » width=» + newMeta.width + » height=» + newMeta.height + » framerate=» + newMeta.framerate);
duration = newMeta.duration;
}
|
Шаг 17: Воспроизведите видео!
Наконец, добавьте эту строку кода для воспроизведения видео:
|
1
|
ns.play(«flv/bsu-football-open.flv»);
|
Теперь, если вы проверяете ваше видео, оно должно воспроизводиться. Это будет странно масштабироваться, потому что мы не использовали XML-файл для установки ширины и высоты. Не беспокойтесь об этом, мы решим эту проблему позже. Ни одна из кнопок не будет работать, а полоса прокрутки не будет работать. Это потому, что мы еще не связали их, поэтому давайте сделаем это сейчас.
Шаг 18: добавь слушателей для кнопок
Теперь давайте добавим несколько слушателей для наших кнопок, чтобы мы могли заставить работать некоторые функции.
|
1
2
3
|
playBtn.addEventListener(MouseEvent.CLICK, playBtnClick);
pauseBtn.addEventListener(MouseEvent.CLICK, pauseBtnClick);
stopBtn.addEventListener(MouseEvent.CLICK, stopBtnClick);
|
Шаг 19: добавь функции воспроизведения
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
function playBtnClick(event:MouseEvent):void
{
ns.resume();
}
function pauseBtnClick(event:MouseEvent):void
{
ns.pause();
}
function stopBtnClick(event:MouseEvent):void
{
ns.pause();
ns.seek(0);
}
|
Теперь, если вы протестируете свой фильм и нажмете кнопку паузы, ваше видео должно остановиться. Если вы нажмете кнопку остановки, ваше видео должно перейти к первому кадру и остановиться. Если видео приостановлено или остановлено, вы можете нажать кнопку воспроизведения, чтобы возобновить видео. Теперь давайте начнем работу шкалы времени и объема.
Шаг 20: Добавьте переменные скруббера громкости и слушателей
Нам нужно добавить некоторые переменные в наш код, чтобы мы могли заставить работать наш скруббер объема.
|
1
2
3
4
|
var videoSound:SoundTransform;
var volumeBounds:Rectangle;
volumeThumb.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberDown);
|
Шаг 21: добавь код скруббера тома
Давайте добавим весь код, чтобы заставить работать скруббер.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
videoSound = new SoundTransform();
videoSound.volume = 1;
ns.soundTransform = videoSound;
function volumeScrubberDown(event:MouseEvent):void
{
volumeBounds = new Rectangle(0,0,75,0);
volumeThumb.startDrag(false, volumeBounds);
stage.addEventListener(MouseEvent.MOUSE_UP, volumeThumbUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, volumeThumbMove);
}
function volumeThumbUp(event:MouseEvent):void
{
volumeThumb.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP, volumeThumbUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, volumeThumbMove);
}
function volumeThumbMove(event:MouseEvent):void
{
volumeTrack.width = volumeThumb.x;
videoSound.volume = (volumeThumb.x) / 50;
ns.soundTransform = videoSound;
}
|
Проверьте свой фильм сейчас. Вы можете отсканировать громкость большого пальца и услышать изменение звука!
Шаг 22: Переменные скруббера и слушатели
Нам нужно добавить еще несколько переменных для скребка временной шкалы видео. Введите следующее в разделе vars своего кода:
|
1
2
3
4
5
|
var videoInterval = setInterval(videoStatus, 100);
var amountLoaded:Number;
var scrubInterval;
videoThumb.addEventListener(MouseEvent.MOUSE_DOWN, videoScrubberDown);
|
Шаг 23: добавь функции для скруббера видео
Давайте добавим функции, которые позволят нам чистить временную шкалу, а также перемещать полосы скруббера, чтобы отслеживать количество сыгранных и загруженных объемов.
|
1
|
function videoStatus():void { amountLoaded = ns.bytesLoaded / ns.bytesTotal;
|
Ваш окончательный код для этого урока должен выглядеть следующим образом:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
|
////// IMPORT CLASSES AND SET STAGE PROPERTIES //////
import caurina.transitions.*;
import caurina.transitions.properties.FilterShortcuts;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
FilterShortcuts.init();
////// MAIN STAGE MOVIE CLIPS //////
var videoBox:MovieClip = player_mc;
var sidebarBox:MovieClip = rightSidebar_mc;
var featuredBox:MovieClip = featuredBox_mc;
var featuredBoxBg:MovieClip = featuredBox_mc.featuredBoxBg_mc;
////// VIDEO MOVIE CLIPS //////
var playBtn:MovieClip = player_mc.playBtn_mc;
var pauseBtn:MovieClip = player_mc.pauseBtn_mc;
var stopBtn:MovieClip = player_mc.stopBtn_mc;
var videoBlackBox:MovieClip = player_mc.videoBlackBox_mc;
var videoPreloader:MovieClip = player_mc.videoPreloader_mc;
var videoTitleTxt:TextField = player_mc.VideoTitle_txt;
var videoTimeTxt:TextField = player_mc.videoTime_txt;
var videoThumb:MovieClip = player_mc.videoTrack_mc.videoThumb_mc;
var videoTrackProgress:MovieClip = player_mc.videoTrack_mc.videoTrackProgress_mc;
var videoTrackDownload:MovieClip = player_mc.videoTrack_mc.videoTrackDownload_mc;
var volumeThumb:MovieClip = player_mc.volumeSlider_mc.volumeThumb_mc;
var volumeTrack:MovieClip = player_mc.volumeSlider_mc.volumeTrackFull_mc;
////// VIDEO VARS //////
var currentVideo:String;
var videoWidth:Number = 500;
var videoHeight:Number = 400;
var videoInterval = setInterval(videoStatus, 100);
var amountLoaded:Number;
var duration:Number;
var scrubInterval;
var videoSound:SoundTransform;
var volumeBounds:Rectangle;
////// FILE STARTUP //////
videoPreloader.visible = false;
videoTitleTxt.text = «»;
videoTimeTxt.text = «0:00 / 0:00»;
playBtn.mouseChildren = false;
playBtn.buttonMode = true;
pauseBtn.mouseChildren = false;
pauseBtn.buttonMode = true;
stopBtn.mouseChildren = false;
stopBtn.buttonMode = true;
videoThumb.mouseChildren = false;
videoThumb.buttonMode = true;
volumeThumb.mouseChildren = false;
volumeThumb.buttonMode = true;
////// SET STAGE //////
setMyStage();
stage.addEventListener(Event.RESIZE, myResizeEvent);
////// VIDEO EVENT LISTENERS //////
playBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
playBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
playBtn.addEventListener(MouseEvent.CLICK, playBtnClick);
pauseBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
pauseBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
pauseBtn.addEventListener(MouseEvent.CLICK, pauseBtnClick);
stopBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
stopBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
stopBtn.addEventListener(MouseEvent.CLICK, stopBtnClick);
videoThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
videoThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
videoThumb.addEventListener(MouseEvent.MOUSE_DOWN, videoScrubberDown);
volumeThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
volumeThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
volumeThumb.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberDown);
////// VIDEO CODE //////
var video:Video = new Video(videoWidth, videoHeight);
video.x = 0;
video.y = 0;
videoBlackBox.addChild(video);
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.addEventListener(NetStatusEvent.NET_STATUS, myStatusHandler);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
video.attachNetStream(ns);
var newMeta:Object = new Object();
newMeta.onMetaData = onMetaData;
ns.client = newMeta;
ns.bufferTime = 5;
function asyncErrorHandler(Event:AsyncErrorEvent):void
{
//trace(event.text);
}
function myStatusHandler(event:NetStatusEvent):void
{
//trace(event.info.code);
switch(event.info.code)
{
case «NetStream.Buffer.Full»:
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:0, time:.3});
break;
case «NetStream.Buffer.Empty»:
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:1, time:.3});
break;
case «NetStream.Play.Start»:
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:1, time:.3});
break;
case «NetStream.Seek.Notify»:
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:1, time:.3});
break;
case «NetStream.Seek.InvalidTime»:
ns.bufferTime = 10;
Tweener.addTween(videoPreloader, {alpha:1, time:.3});
break;
case «NetStream.Play.Stop»:
Tweener.addTween(videoPreloader, {alpha:0, time:.3});
ns.pause();
ns.seek(1);
break;
}
}
function onMetaData(newMeta:Object):void
{
//trace(«Metadata: duration=» + newMeta.duration + » width=» + newMeta.width + » height=» + newMeta.height + » framerate=» + newMeta.framerate);
duration = newMeta.duration;
}
ns.play(«flv/bsu-football-open.flv»);
////// VIDEO BTN FUNCTIONS //////
function playBtnClick(event:MouseEvent):void
{
ns.resume();
}
function pauseBtnClick(event:MouseEvent):void
{
ns.pause();
}
function stopBtnClick(event:MouseEvent):void
{
ns.pause();
ns.seek(0);
}
////// VOLUME SCRUBBER //////
videoSound = new SoundTransform();
videoSound.volume = 1;
ns.soundTransform = videoSound;
function volumeScrubberDown(event:MouseEvent):void
{
volumeBounds = new Rectangle(0,0,75,0);
volumeThumb.startDrag(false, volumeBounds);
stage.addEventListener(MouseEvent.MOUSE_UP, volumeThumbUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, volumeThumbMove);
}
function volumeThumbUp(event:MouseEvent):void
{
volumeThumb.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP, volumeThumbUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, volumeThumbMove);
}
function volumeThumbMove(event:MouseEvent):void
{
volumeTrack.width = volumeThumb.x;
videoSound.volume = (volumeThumb.x) / 50;
ns.soundTransform = videoSound;
}
////// TIMELINE SCRUBBER //////
function videoStatus():void
{
amountLoaded = ns.bytesLoaded / ns.bytesTotal;
videoTrackDownload.width = amountLoaded * 340;
videoThumb.x = ns.time / duration * 340;
videoTrackProgress.width = videoThumb.x;
}
function videoScrubberDown(event:MouseEvent):void
{
var bounds:Rectangle = new Rectangle(0,0,340,0);
clearInterval(videoInterval);
scrubInterval = setInterval(scrubTimeline, 10);
videoThumb.startDrag(false, bounds);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScrubbingVideo);
}
function scrubTimeline():void
{
ns.seek(Math.floor((videoThumb.x / 340) * duration));
}
function stopScrubbingVideo(Event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrubbingVideo);
clearInterval(scrubInterval);
videoInterval = setInterval(videoStatus, 100);
videoThumb.stopDrag();
}
////// BTN OVER & OUT FUNCTIONS //////
function btnOver(event:MouseEvent):void
{
event.currentTarget.gotoAndPlay(«over»);
}
function btnOut(event:MouseEvent):void
{
event.currentTarget.gotoAndPlay(«out»);
}
////// POSITION CONTENT //////
function setMyStage():void
{
videoBox.x = stage.stageWidth / 2 — (featuredBoxBg.width / 2);
videoBox.y = (stage.stageHeight / 2 — videoBox.height / 2) — featuredBoxBg.height / 2;
sidebarBox.x = (stage.stageWidth / 2 + 92);
sidebarBox.y = videoBox.y;
featuredBox.x = videoBox.x;
featuredBox.y = videoBox.y + videoBox.height + 4;
}
function myResizeEvent(event:Event):void
{
videoBox.x = stage.stageWidth / 2 — (featuredBoxBg.width / 2);
videoBox.y = (stage.stageHeight / 2 — videoBox.height / 2) — featuredBoxBg.height / 2;
sidebarBox.x = (stage.stageWidth / 2 + 92);
sidebarBox.y = videoBox.y;
featuredBox.x = videoBox.x;
featuredBox.y = videoBox.y + videoBox.height + 4;
}
|
Проверь свой фильм; видео должно воспроизводиться, и вы должны быть в состоянии очистить видео сейчас.
Вывод
Эта первая часть была в основном потрачена на то, чтобы подготовить основную работу и получить базовую функциональность. В следующей следующей главе мы подготовим миниатюры, настроим XML, изменим, как наше видео загружает фильмы, работают три кнопки галереи, добавим элементы и миниатюры для категорий и добавим наши элементы видео с их миниатюрами.
Есть много вещей, в которые можно вложить свои зубы, я надеюсь, что тебе это пока нравится.