Вот она, заключительная часть нашего видео урока! Все, что нам нужно сделать сейчас, — это заставить индикатор времени работать, добавить нашу функцию нажатия кнопки «Домой», расположить и изменить размер текущего видео, а также заполнить показанную панель видео и его скруббер. Давайте начнем!
Шаг 1: видео время
Сначала нам нужно добавить слушателя на сцену с именем videoTimeEnterFrame, которая обновляет время видео в каждом кадре. Добавьте эту строку в функцию videoItemClick.
|
1
|
stage.addEventListener(Event.ENTER_FRAME, videoTimeEnterFrame);
|
Теперь давайте добавим функцию videoTimeEnterFrame.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
function videoTimeEnterFrame(event:Event):void
{
var totalSeconds:Number = ns.time;
var totalSeconds2:Number = duration;
var minutes:Number = Math.floor(totalSeconds / 60);
var minutes2:Number = Math.floor(totalSeconds2 / 60);
var seconds = Math.floor(totalSeconds) % 60;
var seconds2 = Math.floor(totalSeconds2) % 60;
if(seconds < 10) // if the seconds variable is less than 10 then…
{
seconds = «0» + seconds;
}
if(seconds2 < 10) // if the seconds2 variable is less than 10 then…
{
seconds2 = «0» + seconds2;
}
videoTimeTxt.text = minutes + «:» + seconds + » / » + minutes2 + «:» + seconds2;
}
|
Шаг 2: Домашняя кнопка
Добавление прослушивателя для кнопки «Домой» позволит нам вернуться на верхний уровень текущей галереи, в которой мы находимся. Добавьте это в начало нашего кода ниже наших других функций, которые мы имеем при запуске.
|
1
|
homeBtn.addEventListener(MouseEvent.CLICK, homeBtnClick);
|
Шаг 3: функция homeBtnClick
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
function homeBtnClick(event:MouseEvent):void
{
if(currentGallery == 0) // if currentGallery variable is equal to 0
{
Tweener.addTween(container_mc, {alpha:0, time:.5, transition:»easeOut», onComplete:removeGallery0});
}
if(currentGallery == 1)
{
Tweener.addTween(container_mc, {alpha:0, time:.5, transition:»easeOut», onComplete:removeGallery1});
}
if(currentGallery == 2)
{
Tweener.addTween(container_mc, {alpha:0, time:.5, transition:»easeOut», onComplete:removeGallery2});
}
}
|
Проверьте свой фильм, нажмите на галерею, чтобы увидеть список видео. Теперь нажмите кнопку домой. Теперь ваш проигрыватель исчезнет с текущих видео и заменит их на элементы текущей категории.
Шаг 4:
Чтобы установить videoWidth & videoHeight, нам нужно добавить код, чтобы сначала получить значения. Нам нужно добавить этот код в функцию videoItemClickFunction над строкой ns.play.
|
1
2
3
4
|
videoWidth = xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM[videoItemName].file_width;
videoHeight = xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM[videoItemName].file_height;
video.width = videoWidth;
video.height = videoHeight;
|
Шаг 5: позиционирование видео слушателя и функции
Теперь у нас есть видео с правильной шириной и высотой. Последнее, что нужно сделать, это расположить его посередине области просмотра. Добавьте эту строку в функцию videoItemClickFunction над строкой ns.play (currentVideo): void.
|
1
|
positionVideo();
|
Затем добавьте функцию для обработки события positionVideo.
|
1
2
3
4
5
6
7
8
9
|
function positionVideo():void
{
video.x = 0;
video.y = 0;
var vidWidthDif = videoBlackBox.width — videoWidth;
var vidHeightDif = videoBlackBox.height — videoHeight;
video.x = vidWidthDif / 2;
video.y = vidHeightDif / 2;
}
|
Шаг 6: переместите ns.play еще раз
Вырежьте и вставьте эту строку в конец функции positionVideo.
|
1
|
ns.play(currentVideo);
|
Теперь, если вы протестируете свой файл, у вас будет видео, получит ширину и высоту, которые мы установили в XML, и изменим его размеры, а затем воспроизведите видео.
Шаг 7: Добавьте переменные избранного элемента
Эти переменные будут создавать и хранить наши избранные элементы в мувиклипе.
|
1
2
3
|
var featuredContainer:MovieClip;
var featuredThumbLoader:Loader;
var featuredItemName;
|
Шаг 8: Избранные видео
Чтобы проверить избранные видеоролики в xml, добавьте этот код в функцию myXmlLoaded. Он будет перебирать все видео и возвращать те, которые установлены в true.
|
1
|
checkForFeaturedVids();
|
Шаг 9: функция checkForFeaturedVids
Эта функция аналогична функции makeGalleryItems, которую мы создали во второй части . Мы создадим мувиклипы featuredItem для featuredContainer на основе xml, разместим их и разместим их правильно, загрузим в миниатюру изображения и удалим предварительный загрузчик с помощью отдельной функции ниже.
Примечание редактора: Ну, вот и мы. Те из вас, кто использует FireFox, обнаружили бы, что страница зависла благодаря этому маленькому блоку ActionScript. Чтобы все шло гладко, вот код для скачивания. Приносим извинения за неудобства.
Шаг 10: Нажмите Слушатель
Теперь нам нужно настроить прослушиватель для обработки того, что происходит, когда мы щелкаем по мувиклипу выбранного элемента. Добавьте эту строку в оператор if в функции checkForFeaturedVids под слушателями myFeaturedItems btnOver & btnOut.
|
1
|
myFeaturedItem.addEventListener(MouseEvent.CLICK, myFeaturedItemClick);
|
Шаг 11: функция myFeaturedItemClick
Вот что происходит, когда мы щелкаем по выбранному элементу:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
function myFeaturedItemClick(event:MouseEvent):void
{
featuredItemName = event.target.name;
currentVideo = xml.GALLERY.CATEGORY.ITEM.file_path[featuredItemName];
videoTitleTxt.text = xml.GALLERY.CATEGORY.ITEM.file_title[featuredItemName];
videoWidth = xml.GALLERY.CATEGORY.ITEM.file_width[featuredItemName];
videoHeight = xml.GALLERY.CATEGORY.ITEM.file_height[featuredItemName];
video.width = videoWidth;
video.height = videoHeight;
positionVideo();
stage.addEventListener(Event.ENTER_FRAME, videoTimeEnterFrame);
}
|
Шаг 12: Избранные переменные полосы прокрутки
Сначала добавьте переменную для хранения имен коротких имен мувиклипов.
|
1
2
3
4
5
6
7
|
var featuredScrollTrack:MovieClip = featuredBox_mc.featuredScrollbar_mc.featuredScrollbarTrack_mc;
var featuredScrollThumb:MovieClip = featuredBox_mc.featuredScrollbar_mc.featuredScrollbarThumb_mc;
var featuredScrollMask:MovieClip = featuredBox_mc.featuredScrollbar_mc.featuredMasker_mc;
var xOffset:Number;
var xMin:Number = 0;
var xMax:Number;
var featuredThumbDif:Number;
|
Шаг 13: Избранные слушатели кнопки слайдера
Затем добавьте эти строки в начало нашего кода ниже других слушателей, которые запускаются при открытии файла.
|
1
2
3
4
|
featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
featuredScrollThumb.buttonMode = true;
featuredScrollThumb.mouseChildren = false;
|
Шаг 14: проверьтеFeaturedContainerWidth
Здесь мы будем делать что-то очень похожее на функцию checkFeaturedContainerWidth во второй части.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function checkFeaturedContainerWidth():void
{
if(featuredContainer.width > featuredScrollMask.width)
{
linkFeaturedScroller();
featuredScrollThumb.addEventListener(MouseEvent.MOUSE_DOWN, featuredScrollbarThumbDown);
stage.addEventListener(MouseEvent.MOUSE_UP, featuredScrollbarThumbUp);
featuredScrollThumb.visible = true;
featuredScrollThumb.alpha = 0;
Tweener.addTween(featuredScrollThumb, {alpha:1, time:.5, transition:»easeOut»});
}
else
{
featuredScrollThumb.removeEventListener(MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown);
stage.removeEventListener(MouseEvent.MOUSE_UP, featuredScrollbarThumbUp);
Tweener.addTween(featuredScrollThumb, {alpha:0, time:.5, transition:»easeOut», onComplete:hideFeaturedScrollbarThumb});
}
}
function hideFeaturedScrollbarThumb():void
{
featuredScrollThumb.visible = false;
}
|
Шаг 15: Функции
Добавьте функции для работы со слушателями в функцию checkFeaturedContainerWidth.
|
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
|
function linkFeaturedScroller():void
{
featuredScrollThumb.x = 0;
featuredContainer.mask = featuredScrollMask;
xMax = featuredScrollTrack.width — featuredScrollThumb.width;
}
function featuredScrollbarThumbDown(event:MouseEvent):void
{
featuredScrollThumb.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
featuredScrollThumb.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
stage.addEventListener(MouseEvent.MOUSE_MOVE, featuredScrollbarThumbMove);
xOffset = mouseX — featuredScrollThumb.x;
}
function featuredScrollbarThumbUp(event:MouseEvent):void
{
featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
featuredScrollThumb.gotoAndStop(«over»);
Tweener.addTween(featuredContainer, {_Blur_blurX:0, time:1, transition:»easeOut»});
stage.removeEventListener(MouseEvent.MOUSE_MOVE, featuredScrollbarThumbMove);
}
function featuredScrollbarThumbMove(event:MouseEvent):void
{
featuredScrollThumb.x = mouseX — xOffset;
if(featuredScrollThumb.x <= xMin)
{
featuredScrollThumb.x = xMin;
}
else if(featuredScrollThumb.x >= xMax)
{
featuredScrollThumb.x = xMax;
}
featuredThumbDif = featuredScrollThumb.x / xMax;
Tweener.addTween(featuredContainer, {x:((-featuredThumbDif * (featuredContainer.width — featuredScrollMask.width)) + 25), _Blur_blurX:5, time:1, transition:»easeOut»});
event.updateAfterEvent();
}
|
Вывод
Итак, у вас это есть, похлопайте себя по спине, если вы закончили, и начните размещать несколько видео в Интернете!
Я надеюсь, что вам понравился этот урок, и я надеюсь, что вы узнали несколько вещей, которые вы можете использовать в своих собственных проектах. Если кто-то захочет посмотреть 4-й учебник, я сделаю так, чтобы игрок получил полноэкранные функции. Дай мне знать в комментариях. Спасибо за прочтение!