Разделы сайта
Флеш примеры и уроки Флеш исходники Скачать флеш игры с исходниками Исходники флеш сайтов, скачать шаблоны flash сайты Флеш исходники, защита flash от декомпиляторов и декомпиляции, защитить flash от кражи Разное. Статьи flash уроки софт исходники

   
Скачать флеш исходники уроки примеры flash игры с исходниками

Урок создания flash видео плеера

Флеш примеры и уроки
Рассмотрим пример создания флеш проигрывателя для видео файлов, который можно установить на свой сайт, позволив посетителям сайта смотреть видео на сайте без скачивания при помощи технологии Adobe Flash, на языке actionscript 2. Обратите внимание, что flash плеер может воспроизводить видео только одно формата – flv.
Плеер будет состоять из одного кадра. На сцене должны быть:
1) Видео-символ (myVideo). В свойствах нужно указать Video (actionscript controlled).
2) Кнопка или мувиклип, который будет останавливать воспроизведение (кнопка пауза). Instance name - p_btn.
3) Над этой кнопкой нужно разместить клипы – значки воспроизведения и паузы (play_btn и pause_btn).
4) Мувиклип vol, состоящий из двух мувиклипов – полосок, индикатор/регулятор громкости. На первом слое (нижнем) должен быть мувиклип fon, над ним – bar, идентичный по размеру, но другого цвета.
5) Клип progress_bar, похожий на клип vol. На нижнем слое клип fon, на среднем - flv_load, на самом высшем – bar.
После того, как вы сделали оболочку плеера, вам остаётся только добавить в кадр код:
stop(); // останавливаем воспроизведение
// ставим ширину равной нулю (скрываем) индикаторы загрузки и позиции воспроизведения
progress_bar.flv_load._width = 0;
progress_bar.bar._width = 0;
pause_btn._visible = false; // скрываем кнопку пауза
//isPlaying - булева величина, которая показывает, идёт ли сейчас подгрузка видео
isPlaying = false;

link = '1.flv';// ссылка на видео файл для воспроизведения (flv)

// нажатие на кноку play/pause
p_btn.onRelease = function() {
    if (!isPlaying) {// если подгрузка вижео ещё не начиналась
        _root.nc = new NetConnection(); // экземпляр класса NetConnection
        _root.nc.connect(null);
        _root.my_ns = new NetStream(_root.nc);// экземляр класса NetStream
        setPlayBtn(false); // скрываем кнопку play, показываем кнопку pause
        // "прикрепляем" поток видео (класс NetStream) к видео-символу
        myVideo.attachVideo(_root.my_ns);
        _root.my_ns.play(link);
        // при получении данных о длительности видео
            _root.my_ns.onMetaData = function(infoObject:Object) {
            totalTime = infoObject.duration;//сохраняем в отдельную переменную
            };
            // при завершении загрузки видео
            _root.my_ns.onStatus = function(info) {
            if (info.code == "NetStream.Play.Stop") {
                isPlaying = false;
                setPlayBtn(true);
                progress_bar.bar._width = 0;
                }
            }
        isPlaying = true; // значит, что видео начало подгружаться
    } else // если видео уже грузится
    if (pause_btn._visible) { // и если сейчас плеер не на паузе
    // ставим видео на паузу
        _root.my_ns.pause(true);
        // запоминаем позицию воспроизведения
        current = _root.my_ns.time;
        // скрываем кнопку pause, показываем кнопку play
        setPlayBtn(true);
    } else { // если плеер на паузе
    // перематываем видео на место, где остановились
        current = _root.my_ns.time;
        // и продолжаем воспроизведение
        _root.my_ns.pause(false);
        // скрываем кнопку play, показываем кнопку pause
        setPlayBtn(false);
    }
    
}


onEnterFrame = function() {
    if (isPlaying) {
        setBar();
    }
    //считаем проценты, меняем ширину полоски - индикатора загрузки видео во flash плеер
    current = _root.my_ns.time;
    total = _root.my_ns.bytesTotal; // "вес" видео в байтах
    loaded = _root.my_ns.bytesLoaded; // количество загрженых байт
    percent = (loaded/total); // соотношение полного веса к загруженой части
    // в зависимости от загруженой части, меняем длину зелёной полоски - индикатора
    progress_bar.flv_load._width = (percent * progress_bar.fon._width);
    
}
// setBar - функция, которая будет отображать прогресс вопроизведения видео в плеере
// при вызове позиция передаётся как процент (от 0 до 100)
function setBar(percent:Number) {
    if (percent == undefined) percent = Math.floor(_root.my_ns.time/totalTime*100);
    // меняем ширинц полоски-индикатора
    progress_bar.bar._width = (percent/100 * progress_bar.fon._width);
}

// нажатие на полоску - индикатор загрузки
// именно на этот индикатор, чтобы нельзы было перепрыгвать на незагруженные участки
progress_bar.flv_load.onRelease = function() {
    // вызов функции scrubbing, которая отвечает за перемотку на нужный моммент времени
    scrubbing(Math.floor((progress_bar._xmouse*100)/progress_bar._width));
}

function scrubbing(p) { // функция для перемтоки видео
        isEnd = false;
        setPlayBtn(false);
_root.my_ns.seek(p*totalTime/100);
_root.my_ns.pause(false);
}

// функция, которая показывает/прячет кнопки play и pause
function setPlayBtn(b) {
    play_btn._visible = b;
    pause_btn._visible = !b;
}

// создаём обьект класса Sound, который будет охватывать все звуки в фильме
sound = new Sound();
// регулировка громкости
vol.onRelease = function() { // клик по индикатору громкости
    vol.bar._width = vol._xmouse;// меняем ширину индикатора
    // меняем громость звука
    sound.setVolume(vol._xmouse/vol._width * 100);
}

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







 (голосов: 27)

Почитать ещё:
 
#1 написал: гость (10 сентября 2009 22:39)
ССЫЛКА БИТАЯ!
#2 написал: admin (10 сентября 2009 22:42)
Извинияюсь, поправил
#3 написал: twins (11 сентября 2009 17:07)
Уважаемый автор кода, не могли бы вы пофиксить программку.
Чтобы полоска отображалась корректно (куда кликнули на полоске прогресса, там и было).
А то практически невозможно сразу прокрутить к концу.

заранее спасибо

оп, приношу извинения, видимо я что-то накосячил

Поправьте исходник - битый архив
#4 написал: admin (11 сентября 2009 17:51)
Спасибо, перезалил
#5 написал: foks (16 сентября 2009 03:00)
Уважаемый автор, скачал пример с исходником, открываю Ваш player, прогой Macromedia Flash MX, а она пишит неизвестный фармат файла!
ГЛЮК? или...
Заранее спасибо.
#6 написал: admin (16 сентября 2009 09:57)
Нет, не глюк - исходник не откроется в версии ниже 8, скачайте что-нибудь поновее, mx - уже давно устаревшая версия
#7 написал: Sergio (14 декабря 2009 18:23)
Супер огромное спасибо за урок)) только один вопрос подскажите почему при удлинении progress_bar полоса bar при проигрывании ролика работает некоректно ((
#8 написал: admin (14 декабря 2009 18:29)
А вы как его размер меняете? Попробуйте просто изменить размер мувика progress_bar.fon
#9 написал: Sergio (14 декабря 2009 18:32)
Огромное спасибо помогло)))
#10 написал: admin (14 декабря 2009 18:38)
Отлично smile Не за что.
#11 написал: ivan (26 марта 2010 19:59)
архив поврежден - неожиданный конец архива пишет...
#12 написал: ricco (30 марта 2010 03:58)
а как сделать чтовы видео грузилось не то каторое пропишеш а разное как на обычных плеерах типа jw player ну чтобы можно было его на сайт поставить.
#13 написал: admin (30 марта 2010 04:06)
а как сделать чтовы видео грузилось не то каторое пропишеш а разное

Даже не представляю. В каких целях?
#14 написал: ricco (30 марта 2010 13:41)
Я хочу его поставить на сайт но он проигрывает только то видео каторое я ему вписываю может надо заменить это link = '1.flv'; на что не будь другое чтобы он брал видео как обычный web плеер помогите пожалуйста !
#15 написал: ricco (31 марта 2010 01:24)
ricco,
Спосибо ваш урок мне очень помог я всётаки сам догодаля как сделать
заменить это link = '1.flv'; на это
!_root.file ? file = "video.flv" : file = _root.file;

!_root.autoStart ? autoStart = true: autoStart = _root.autoStart;
#16 написал: ricco (31 марта 2010 11:44)
подскажите пожалуйста как сделать кнопку чтобы плеер раскрыть на весь экран
#17 написал: Денис (13 апреля 2010 12:52)
Админ очень нужен твой совет как мне сделать регулятор громкости как вот сдесь http://flv-mp3.com/ru/skins/post=aluminium2[left][/left]
#18 написал: Lex (14 апреля 2010 09:54)
А если я работаю с AS3 код такой же?
Если кто знает, пишите мне на мыло
smile

Щас посмотрел... В Adobe Flash CS4 этот плеер сам автоматически создается при загрузке видео и еще куча обложек разных)
#19 написал: catta (29 апреля 2010 13:57)
Скажите пожалуйста как сделать так, чтобы звук сразу был не на 100% громкости, а скажем, процентов 40 - 50?

И спасибо вам большое за плеер.
#20 написал: admin (29 апреля 2010 14:03)
Для того, чтобы установить громкость на 50%, добавьте в конце кода:
vol.bar._width = vol._width*0.5;
sound.setVolume(50);
#21 написал: catta (29 апреля 2010 15:41)
Премного благодарна.
#22 написал: catta (5 мая 2010 14:33)
Появилось еще пара вопросов, скажите пожалуйста, вот я добавила кнопку стоп, она абсолютно функциональна, только вот одно но, при нажатии на нее, видео останавливается на том же кадре, что и было, то есть визуально для пользователя она похожа на паузу, но при последующем нажатии на кнопку Play, видео проигрывается с начала, скажите пожалуйста, как при нажатии на кнопку стоп сделать, например, черный экран? (есть конечно выход с двумя кадрами, но так поступать не хочется).
И второй вопрос, как можно вытащить текущий уровень громкости, то есть, я добавила кнопку включить и выключить звук, при выключении то проблем не возникает, а вот при включении хотелось бы чтобы звук был на том же уровне что и до выключения.

Если ответите, заранее большое спасибо.
#23 написал: admin (5 мая 2010 14:40)
1) Попробуйте использовать _root.my_ns.stop();
2) sound.getVolume() возвратит текущий уровень громкости звука.
Ещё, после строки if (!isPlaying) { можно добавить:
sound.setVolume(vol._xmouse/vol._width * 100);
#24 написал: catta (5 мая 2010 16:37)
Спасибо большое.
#25 написал: Вова (7 мая 2010 12:50)
Подскажите а почему пример не работает в goggle hrom и Ffox?
#26 написал: Epilepsy Hazard (13 июня 2010 01:27)
В последних версиях Adobe Flash есть компоненты для создания flash плеера.
#27 написал: Анатолий (3 июля 2010 23:53)
Огромное спасибо за замечательный урок.
пришлось немножко подколдовать...
чтобы под размер сайта выходило видео, а не фиксированных размеров.
Но как начинающему изучать ActionScript Ваш урок очень замечательный.
Все понятно. Быстро догадался как изменить размеры.
Благодаря Вашему уроку... наконец-то научился управлять мувиками.
#28 написал: Jordan (17 июля 2010 14:05)
Какой код и куда вставить, что бы был АвтоПлэй ролика
#29 написал: Алексей (12 ноября 2010 00:47)
Отличная и удобная штука! Спасибо большое. Подскажите пож. как сделать так, чтобы ролик начинал воспроизводиться сразу после открытия. Я пробовал заменить stop(); на play(); в самом начале кода, но это не дало нужного результата.

Я справился с задачей. Еще раз спасибо!
#30 написал: впмвпскпукпеукпекв (20 декабря 2010 19:29)
а как вставить плеер на свой сайт ? скажу сразу я нуб wink
Добавление комментария




Опечатались, когда набирали запрос? Не беда! :)
фвщиу адфыр ehjrb bc[jlybrb фсешщтыскшзе akti флаш flesh crfxfnm
Мир технологии flash. Флеш уроки, исходники, примеры, статьи, советы, игры.