Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Изучение Flash MX. Курс для начинающих и профессионалов. Создание видеоплеера.


Обучение по Flash MX.

Создание видеоплеера. (30.03.2007)


Автор статьи: Александр Манжулов

Сайт: http://helpexe.ru/

Магазин: http://shop.helpexe.ru/

Форум: http://forum.helpexe.ru/

E-mail: admin@helpexe.ru или mail@helpexe.ru

Архив рассылки: http://subscribe.ru/catalog/comp.paper.flashhelp

Пример для этого урока: http://helpexe.ru/effects/effect_17/video_player.zip



Здравствуйте, уважаемые читатели !




Интересная тема форума (http://forum.helpexe.ru/viewtopic.php?t=1091):

Вытаскиваем ссылки за пределы флеш-ролика.

Задача следующая. Имеем ролик-менюшку с тремя ссылками (URL'ами), но ссылки эти должны быть поданы во флеш из текстового файла.

LoadVars рулит, но забирает все в кучу, то есть одной строковой переменной. Дальше я планирую произвести шаманские действия: с помощью цикла проверить посимвольно всю строку на наличие разделителей (например, & между ссылками в .txt вставить) и конкатенировать символы межу разделителями в отдельные строковые переменные. Но что-то уж слишком сложно получается.

Может, есть более простой (для программистов - оптимальный) путь? читать дальше >>>




Как получить дополнительный заработок, работая по 30 минут в день?

Автор: Александр Манжулов
Художественное оформление обложки: Ольга Сухова


Хотите узнать, как:

  • ...зарабатывать, не выходя из дома?


  • ...зарабатывать через Интернет?


  • ...зарабатывать, затрачивая 30 минут времени в день?


Как насчёт ДОПОЛНИТЕЛЬНОГО заработка через Интернет? Вполне реально!

А хотите узнать способ дополнительного заработка через всемирную сеть, причём работать можно по 30 минут в день?

Вы когда-нибудь слышали про биржу кредитов WebMoney? Нет, это не то место, где толпа дяденек и тётенек кричит и трясёт бумажками. Это всего лишь вэб-сайт. Но на этом сайте крутятся большие деньги, которые нужно уметь извлекать – нужно уметь их зарабатывать.

Узнать подробнее...



В рамках данной статьи мы будем создавать с вами Flash-видеоплеер. Этот видеоплеер представляет собой обычный SWF-файл, который будет воспроизводить внешние видео файлы.

Пример видеоплеера, который мы будем с вами делать, вы можете посмотреть на странице http://helpexe.ru/effects/effect_17/video_player.html.

Воспроизведение плеером внешних видео файлов имеет ряд преимуществ:

  1. Быстрый просмотр результата. Всё, что вам нужно – это опубликовать плеер и увидеть результат. Это позволяет существенно сэкономить время на разработку видеоплеера.
  2. Быстрое воспроизведение. В отличие от видео, которое изначально импортировано во Flash-клип, наш плеер сможет начать воспроизводить внешний видео файл, даже не дождавшись его полной загрузки.
  3. Лёгкость в обновлении. Вы легко можете заменять одно видео на другое, при этом, не затрагивая самого плеера.

...и другие преимущества, которые вы сами для себя откроете.

Создаём видеоплеер

  1. Прежде, чем начинать, давайте ознакомимся с уже созданным мною плеером. Скачать исходник вы можете по адресу http://helpexe.ru/effects/effect_17/video_player.zip. Давайте посмотрим, какие основные объекты имеются на сцене:



  2. Вам понадобится внешний видео файл, конвертированный в формат FLV специальным программным обеспечением, например, таким, как Sothnik SWF Quicker. Эту программу вы можете скачать по адресу http://www2.sothink.com/download/swfquicker.zip (13,6 Мб). Так же вы можете скачать уже готовый файл videocontrol.flv (405 Кб) по адресу http://helpexe.ru/effects/effect_17/videocontrol.flv, который используется в данном уроке.

    Запустите программу Sothnik SWF Quicker. Из главного меню выберите File->Import to Library..., что бы конвертировать любой выбранный AVI-файл в FLV. Выберите файл, нажмите Open, и установите параметры в окне Импорт Видео (Import Video) в соответствии с рисунком.

    Внимание: Обязательно поставьте галочку напротив Save a copy of the Flash Video file (*.FLV):, что бы сохранить конвертированный видео файл на диск. Нажмите Next, что бы сохранить FLV-файл, куда вам нужно.



  3. Установите размеры сцены 400х320, а так же 25 кадров в секунду. Поместите все описанные элементы на своих местах. Вы можете сверяться со скачанным исходником(ссылка). Лучше всего будет, если вы разместите каждый из элементов на своём слое. Кнопки Воспроизведение и Пауза вам нужно будет разместить друг под другом. Визуальные свойства кнопок можно будет контролировать далее при помощи ActionScript.



  4. На сцене выделите полосу прогресса и дайте ей имя экземпляра progress_bar на панели инспектора Свойств (Property). Дважды кликните по этому элементу, что бы войти в режим редактирования. Внимательно изучите все объекты. Если нужно, то скройте все слои и открывайте только те, которые изучаете. Обратите внимание, что объект bar, находящийся на слое Layer 3 и небольшой красный треугольник thumb, находящийся на слое Layer 4, будут двигаться влево и вправо посредством ActionScript, используя информацию о просмотренной части клипа. При помощи объекта thumb можно будет переходить на различные моменты клипа, как в любом обычном плеере.

    Скрипт в слое Layer 5:

    stop();

    Скрипт в объекте thumb:

    on (press) {
      //Начинаем перемещать объект, а так же ограничиваем область перемещения.
      this.startDrag(true, -72, 13, 72, 13);
      this.draging = true;
      //Приостанавливаем видео.
      _root.oldvalue = _root.mediaPlaying;
      _root.mediaPlaying = false;
      _root.my_ns.pause(true);
    }
    on (release) {
      //Останавливаем перемещение.
      this.stopDrag();
      this.draging = false;
      //Возвращаемся к статусу ВОСПРОИЗВЕДЕНИЕ.
      _root.mediaPlaying = _root.oldvalue;
      _root.my_ns.pause(!_root.mediaPlaying);
    }
    on (releaseOutside) {
      //Точно такие же действия, как и для release.
      this.stopDrag();
      this.draging = false;
      _root.mediaPlaying = _root.oldvalue;
      _root.my_ns.pause(!_root.mediaPlaying);
    }
    onClipEvent (mouseMove) {
      //Подсчитываем текущую позицию ползунка и вызываем функцию scrubbing, что бы определить текущий момент клипа.
      if (this.draging) {
        _parent.bar._x = this._x-72;
        _root.scrubbing(Math.floor((this._x+72)/144*100));
      }
    }



  5. Выйдите из режима редактирования. Дважды кликните по регулятору громкости, что бы войти в его режим редактирования. Шарик, имя экземпляра которого VolBtn и находящийся на слое Layer 3, исполняет роль регулятора громкости. Так же обратите внимание на объект bar2 слоя Layer 4. Объект bar2 (зелёная полоска) будет перемещаться вслед за шариком. Механизм работы идентичен полосе прогресса.

    Скрипт в объекте VolBtn:

    on (press) {
      //Начинаем перемещать объект, а так же ограничиваем область перемещения.
      this.startDrag(true, 0, -60, 0, 60);
      this.draging = true;
    }
    on (release) {
      //Останавливаем перемещение.
      this.stopDrag();
      this.draging = false;
    }
    on (releaseOutside) {
      //Останавливаем перемещение.
      this.stopDrag();
      this.draging = false;
    }
    onClipEvent (mouseMove) {
      //Подсчитываем текущую позицию ползунка и устанавливаем громкость звука.
      if (this.draging) {
        _parent.bar2._y = this._y+60;
        percent = Math.floor((60-this._y)/120*100);
        sound.setVolume(percent);
      }
    }
    onClipEvent (load) {
      //Инициализируем звуковой объект, устанавливаем _root в качестве пути к объекту.
      var sound =new Sound(_root);
    }



  6. Выйдите из режима редактирования регулятора громкости. Теперь вам нужно создать видео символ. Посмотрите в исходнике - видео символ находится на слое Видео-символ и выглядит на сцене как прямоугольник с отрезками, соединяющими его противоположные углы. Что бы создать подобный видео символ, кликните правой кнопкой в свободное место панели Библиотека (Library) и из контекстного меню выберите New Video...

    В появившемся окне Свойства Видео (Video Properties) выберите Video (ActionScript-controlled) и нажмите ОК. В библиотеке появится видео символ, который вам нужно вытащить на сцену, установить размеры 320х240 и дать ему имя экземпляра как my_video.



  7. На главной Временной Линии Кадров (Timeline) скрипт в слое Скрипт должен быть таким:

    //Создаём локальное соединение.
    var my_nc = new NetConnection();
    my_nc.connect(null);
    //Создаём поток, который используется для воспроизведения FLV-файла.
    var my_ns = new NetStream(my_nc);
    //Прикрепляем импортированный видеосигнал к экземпляру видео-объекта "my_video".
    my_video.attachVideo(my_ns);
    //Устанавливаем буфер.
    my_ns.setBufferTime(5);
    //Воспроизводим FLV-файл.
    my_ns.play("videocontrol.flv");
    //Получаем информацию об FLV-файле, такую, как продолжительность видеоклипа.
    my_ns.onMetaData = function(infoObject:Object) {
      totalTime = infoObject.duration;
    };
    //Получаем статус воспроизведения, устанавливаем относительные переменные при завершении воспроизведения.
    my_ns.onStatus = function(info) {
    if (info.code == "NetStream.Play.Stop") {
        mediaPlaying = false;
        isEnd = true;
        setPlayBtn(true);
      }
    };
    //Устанавливаем ползунок в progress_bar, а так же информацию о времени.
    function onEnterFrame() {
      if (mediaPlaying) {
        setTime(my_ns.time);
        setBar();
      }
    }
    //Устанавливаем ползунок в progress_bar в зависимости от воспроизведённого времени клипа, а так же его полного времени
    function setBar(percent:Number) {
      if (percent == undefined) {
        percent = Math.floor(my_ns.time/totalTime*100);
      }
      progress_bar.thumb._x = percent/100*144-72;
      progress_bar.bar._x = progress_bar.thumb._x-72;
    }
    //Конвертируем полученное время в формат--"час: минута: секунда: миллисекунда", а затем выводим эту информацию в соответствующую текстовую область.
    function setTime(aTime) {
      var Hours = Math.floor(aTime/3600);
      var Residue = aTime%3600;
      var Minutes = Math.floor(Residue/60);
      Residue = Residue%60;
      var Seconds = Math.floor(Residue);
      Residue = Residue%1;
      var Millisecond = Math.round(Residue*1000);
      var TimeString = Hours+":"+(Minutes<10 ? ("0") : (""))+Minutes+":"+(Seconds<10 ? ("0") : (""))+Seconds+".";
      if (Millisecond<10) {
        TimeString = TimeString+("00"+String(Millisecond));
      } else if (Millisecond<100) {
        TimeString = TimeString+("0"+String(Millisecond));
      } else {
        TimeString = TimeString+String(Millisecond);
      }
      // конец условия
      time = TimeString;
    }
    // Конец функции
    //Переходим к фрагменту клипа, в зависимости от перемещения ползунка в progress_bar.
    function scrubbing(percent:Number) {
      if (percent == 100) {
        isEnd = true;
        setPlayBtn(true);
      } else {
        isEnd = false;
        setPlayBtn(!oldvalue);
      }
      my_ns.seek(percent*totalTime/100);
      setTime(my_ns.time);
    }
    // Конец функции
    //Отображаем или скрываем кнопки ПАУЗА и ВОСПРОИЗВЕСТИ
    function setPlayBtn(bool:Boolean) {
      playBtn._visible = bool;
      pauseBtn._visible = !bool;
    }
    //Инициализируем некоторые переменные.
    mediaPlaying = true;
    isEnd = false;
    playBtn._visible = false;
    stop();



  8. В кнопку Воспроизведение добавьте следующий код:

    on (release) {
      //Воспроизводим видео. Если видео заканчивается, то оно воспроизводится заново.
      mediaPlaying = true;
      if (isEnd) {
        my_ns.seek(0);
        isEnd = false;
      }
      my_ns.pause(false);
      //Скрываем кнопку ВОСПРОИЗВЕДЕНИЕ.
      setPlayBtn(false);
    }

    Так же дайте этой кнопке имя экземпляра: playBtn.



  9. В кнопку Пауза добавьте следующий код:

    on (release) {
      //Приостанавливаем воспроизведение.
      mediaPlaying = false;
      my_ns.pause(true);
      //Показываем кнопку ВОСПРОИЗВЕДЕНИЕ.
      setPlayBtn(true);
    }

    Так же дайте этой кнопке имя экземпляра: pauseBtn.



  10. В кнопку Стоп добавьте следующий код:

    on (release) {
      //Останавливаем воспроизведение, ползунок переходит на начальное положение.
      //Вы должны использовать "my_ns.close();" что бы закрыть поток при окончании воспроизведения, и использовать его для других целей.
      mediaPlaying = false;
      my_ns.seek(0);
      my_ns.pause(true);
      //Делаем кнопку ВОСПРОИЗВЕДЕНИЕ видимой.
      setPlayBtn(true);
      setBar(0);
    }



  11. Опубликуйте ваш плеер в какую-нибудь директорию. Туда же поместите скачанный файл videocontrol.flv. Всё! Плеер готов – можете запускать.





Внимание!!! Открытие новой рубрики!!!

Уважаемые читатели!

Я хотел бы открыть новую рубрику в своей рассылке Изучение Flash MX. Курс для начинающих и профессионалов. В ней я хочу публиковать наиболее интересные вопросы моей аудитории по теме Flash: дизайн и программирование, а так же мои ответы на них. Я думаю, эта рубрика будет полезна для вас, уважаемые читатели.

Но мне нужен некоторый запас вопросов, для того, что бы начать публиковать на них ответы. Пожалуйста, присылайте свои вопросы по работе в программе Flash на адрес mail@helpexe.ru или redheadorange@list.ru.

В теме письма, пожалуйста, обязательно указывайте В рубрику ВОПРОСЫ ЧИТАТЕЛЕЙ, иначе ваше письмо может не дойти.

Письмо должно содержать следующую информацию:

  1. Ваши ФИО (пункт обязателен к заполнению).
  2. Город, в котором вы проживаете (пункт обязателен к заполнению).
  3. Адрес ресурса в Интернет (не обязательно).
  4. Ваш вопрос (пункт обязателен к заполнению).

По умолчанию, я буду опубликовывать e-mail читателя в рассылке, на вопрос которого буду отвечать. Если вы не желаете, что бы ваш электронный адрес стал известен аудитории, то отдельно в письме сообщите мне об этом.

Желаю Вам творческих успехов!





Люди не замечают вашей рекламы?
Так заставьте их её заметить!

Автор: Александр Манжулов
Художественное оформление обложки: Ольга Сухова


  • Увеличьте количество кликов по своему уникальному баннеру


  • Зарабатывайте, создавая потрясающие баннеры


  • Получайте больше заинтересованных посетителей


  • Порадуйте посетителей необычной рекламой

Узнать подробнее...


ПО ВСЕМ ВОПРОСАМ, связанным с Flash, обращайтесь ко мне:

mail@helpexe.ru или help@helpexe.ru.

Обязательно постараюсь Вам помочь!!!



С уважением, Александр Манжулов
Руководитель проекта helpEXE.ru

E-mail: mail@helpexe.ru
тел. моб.: +7-909-443-16-39





Copyright © 2005-2007 by Александр Манжулов. Все права защищены.

Запрещено частичное или полное воспроизведение
материалов рассылки без согласования с автором.


В избранное