Как сделать видео-баннер

Как сделать видео-баннер
Как сделать видео-баннер
Как сделать видео-баннер
Как сделать видео-баннер
Как сделать видео-баннер

 

 

 

В этом уроке мы научимся, создавать видео баннер с помощью flash. В данном баннере будет также кнопка отключения звука у видео, если звук будет мешать пользователю, он легко сможет его отключить.

 

Для этого урока я использовал программу Adobe Flash CS5 с использованием ActionScript 2.0.

 

1 Для начала нам необходимо выбрать подходящее видео, лучше всего выбрать внедряемое видео с небольшой длительностью, не более 10 секунд, в видеофайлах продолжительностью более 10 секунд часто случается рассинхронизация фрагментов видео и звука в видеоклипе. Через некоторое время рассогласование звука и изображения становится значительным, вызывая неприятные ощущения от просмотра. Также для воспроизведения видео, внедренного в SWF-файл, необходимо, чтобы был загружен весь видеофайл целиком. При внедрении слишком большого видеофайла для его загрузки и начала воспроизведения может понадобиться значительное время, так как для воспроизведение видео баннера пользователь должен загрузить видеофайл полностью, прежде чем начать воспроизведение, так что постарайтесь как можно больше уменьшить вес видеоролика. Для более длительных видеороликов лучше подумать над возможностью последовательной загрузки или потоковой передачи видео с сервера.

 

Теперь, когда мы выбрали подходящее видео необходимо конвертировать его в FLV формат c необходимыми параметрами, для этого я использовал программу Adobe Media Encoder CS5, установленную в пакете месте с Adobe Flash CS5, если вы при установке программы Adobe Flash не убирали галочки с дополнительными загружаемыми программами она у вас тоже должна быть установлена (если вы используете программу Macromedia Flash 8 в ее пакете такая програмка тоже есть, называется она Macromedia Flash 8 Video Encoder).

 

2 Запускаем необходимый конвертер и открываем в нем свой видеоролик:

 

 

3 Настраиваем необходимые параметры для конечного файла, указываем место, куда хотим сохранить конвертированное видео и запускаем преобразование:

 

 

 

 

4 Настало время создания непосредственно видео баннера. Запускаем Флэш программу и создаем новый документ с необходимыми параметрами (у видео в среднем скорость воспроизведения 24 кадра в секунду, поэтому устанавливаем именно такую скорость воспроизведения анимации у нашего баннера):

 

 

5 Теперь импортируем в библиотеку программы подготовленное видео в формате FLV:

 

 

6 Когда мы выбрали импортируемый видеоролик появится окно "Импорт видеоролика", в котором установите маркер напротив пункта: "Внедрить FLV-файл в SWF-файл и воспроизвести во временной шкале", чтобы в последствии можно было размещать наше видео на любом участке на временной шкалы и нажмите "Далее":

 

 

7 Теперь появится следующее окно, где нас спросят "Каким образом внедрить видеоролик?", здесь мы все оставаляем без изменений и также нажимаем кнопку "Далее":

 

 

8 Затем появится следующее окно в котором будет выводиться общая информация о видео и предложение ознакомиться с теорией по воспроизведению видео во flash, здесь мы нажимаем кнопку "Готово", чтобы завершить импорт видеоролика во флэш:

 

 

9 Когда мы импортировали видео, оно должно появиться в библиотеке программы и чтобы поместить его в баннер просто перетаскиваем видео из библиотеки на сцену. Когда мы перетащим видеоролик на сцену автоматически откроется окно, в котором нам сообщат, что для проигрывания ролика понадобится определенное кол-во кадров и предложат автоматически вставить во временную шкалу недостающее число кадров, на что мы ответим согласием:

 

 

 

10 Ну и теперь мы можем изменить размер и позиционирование нашего видеоролика:

 

 

Теперь мы можем протестировать, что у нас получилось: "Управление-->Тестировать ролик".

 

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

 

11 Переименовываем слой, на котором находится видео и называем его "Видео", затем создаем новый слой и называем его "Звук":

 

 

12 Теперь импортируем в библиотеку программы изображение иконки звука, затем находясь на слое "Звук" перетаскиваем из библиотеки иконку звука на сцену и помещаем ее в нужное место:

 

 

13 После этого создаем еще один слой и называем его "Кнопка над звуком":

 

 

14 Находясь на слое "Кнопка над звуком" выбираем инструмент "Прямоугольник (R)", отменяем его обводку, устанавливаем любой цвет заливки и рисуем им небольшой прямоугольник ровно над иконкой звука:

 

 

15 Выбираем наш нарисованный прямоугольник и нажимаем кнопку "F8" на клавиатуре, чтобы конвертировать его в кнопку под названием "Кнопка_Звука":

 

 

16 Теперь дважды кликаем по центру нашей кнопки, чтобы войти в нее:

 

 

17 Находясь внутри кнопки зажимаем маркер под кнопкой "Up" и перетаскиваем его под кнопку "Hit", затем возвращаемся на главную сцену:

 

 

 

18 Выбираем нашу кнопку, для этого один раз кликаем по ней и нажимаем кнопку "F9", чтобы открыть окно "ActionScript" и вводим туда следующий код:

 

on(release) { // прилюдия var sndMute:Sound = new Sound(_root); sndMute.attachSound("sound");//Linkage музыкального файла в библиотеке sndMute.start(offset); sndMute.onSoundComplete = function() {//если музыка закончилась, включаем с начало sndMute.start(offset); }; var so:SharedObject = SharedObject.getLocal ("mySharedSound", "/");//В mySharedSound сохраняются все настройки function init ():Void { if (so.data.isMute) { mute (); } else { unmute (); } } init (); // эта функция выключает звук function mute ():Void { if (!so.data.isMute) { so.data.volume = sndMute.getVolume (); } so.data.isMute = true; sndMute.setVolume (0); } //// эта функция включает звук function unmute ():Void { if (so.data.volume) { sndMute.setVolume (so.data.volume); } so.data.isMute = false; } // теперь просто кликаем мышью по иконке динамика и звук будет включаться и выключаться this.onMouseDown = function (){ if (so.data.isMute) { unmute (); } else { mute (); } } }

 

19 Теперь создаем новый слой, называем его "Кнопка Ссылка" и снова создаем кнопку, но на этот раз размером с наш баннер и называем ее "Кнопка_Ссылка" и также делаем ее прозрачной, как в 17 пункте:

 

 

20 Затем выбираем нашу новую кнопку и нажимаем кнопку "F9", чтобы открыть ее "ActionScript" и вводим туда следующий код:

 

on (release){ // Здесь мы прописываем адрес сайта, на который хотим перейти, адрес сайта откроется в новом окне getURL("http://www.flashyroki.ru", _blank); }

 

21 Ну и теперь нам надо переместить слой "Кнопка Ссылка" под слой с иконкой звука и кнопкой над ней, чтобы пользователь при клике по иконке отключения звука не переходил по ссылке в баннере, а активировал кнопку отключения звука:

 

 

Теперь можно протестировать, что у нас получилось "Управление-->Тестировать ролик".

 

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

 

 

 

Как сделать видео-баннер Как сделать видео-баннер Как сделать видео-баннер Как сделать видео-баннер Как сделать видео-баннер Как сделать видео-баннер Как сделать видео-баннер Как сделать видео-баннер Как сделать видео-баннер Читать новость Как сделать видео-баннер фото. Поделитесь новостью Как сделать видео-баннер с друзьями!

Лучшие статьи:



Бутово свадебные прически макияж

Маникюр белый с черным лаком фото

Как сделать айди без кредитной карты на

Ковш для подъема своими руками

Расти мой малыш поздравления