[Уроки] Создаем проигрыватель с использованием XML (2 части)

Тема в разделе "Флеш", создана пользователем tut, 8 янв 2009.

Статус темы:
Закрыта.
  1. tut

    tut فقد ذهب و

    Регистр.:
    11 апр 2006
    Сообщения:
    132
    Симпатии:
    110
    В этом маленьком уроке постараюсь рассказать Вам, как создать аудиоплейер с плейлистом XML, используя AS3.


    Начнем, первое что понадобится, чтобы у Вас было несколько .mp3 файлов под рукой.Создайте папку для мелодий, назовите её "audio".
    audio-fp.gif
    поместите в неё три .mp3 файла. Чтобы было проще и исключить риск опечаток, я предлагаю, чтобы Вы переименовали свои .mp3 файлы в track1, track2, и track3.
    mp3-file.gif
    Наши .mp3 файлы готовы, теперь мы создадим файл XML. XML - по существу текстовый файл с определяемой пользователем структурой. Вы можете использовать любой текстовый редактор, например откройте "БЛОКНОТ" и сохраните пустой файл как playlist.xml в Вашей проектной папке рядом с папкой "audio".
    xml-file.gif

    Редактирование плейлиста XML:

    В нашем файле XML будут сведения о композициях, в частности:
    URL файла песни.
    Заголовок песни.
    Имя артиста.

    Вставьте код в файл XML и сохраните его:
    <?xml version="1.0" encoding="utf-8"?>
    <PLAYLIST>
    <SONG URL="audio/track1.mp3" TITLE="First Track" ARTIST="John Doe" />
    <SONG URL="audio/track2.mp3" TITLE="Second Track" ARTIST="Random Singer"/>
    <SONG URL="audio/track3.mp3" TITLE="Third Track" ARTIST="Super Generic Singer" />
    </PLAYLIST>


    Значения всех этих параметров будут считаны во Flash, используя свойство .attribute элемента XML. Вы, возможно, заметили, что я не определил число песен в плейлисте, это потому что ActionScript XML Class может сам сосчитать число дочерних узлов в пределах контейнера, в нашем случае количество элементов <SONG/> в пределах контейнера <PLAYLIST> , то есть число композиций в нашем плейлисте.

    Далее создаем новый FLA в ActionScript 3.0 формате. Обратитесь к Инспектору Свойств и задайте его размер 240x100px. Сохраните этот файл в своей проектной папке.
    new-fla-.gif
    У Вас должен быть 2 слоя, верхний для скрипта Actions и нижний для графики Graphical Interface.
    timeline.gif

    Добавление кнопок управления воспроизведением

    У нашего аудиоплейера будет четыре кнопки: Fast Forward, Pause, Rewind, и Right. Вы можете сами создать графические символы для этих кнопок, но мы поступим проще, просто используем готовые кнопки в Common Libraries. Откройте Window>Common Libraries>Buttons. Откроется панель Common Button Library. Чтобы найти те, что я выбрал, Вы должны будете открыть папку Classic Buttons и затем открыть подпапку Playback. Перетащите нужные кнопки на рабочее пространство и выровняйте как на рисунке ниже:

    playback.jpg

    Чтоб иметь возможность использовать эти кнопки используя ActionScript, мы должны присвоить им имена. Выберите первую кнопку слева (Previous Button) и затем с помощью Properties Inspector задайте ей имя prev_btn.
    prev-btn.gif
    так же поступим с остальными, присвоив им соответственно: pause_btn, play_btn и next_btn.

    У нашего аудиоплейера будет две области, показывающие название и имя артиста проигрываемой мелодии. Эти два элемента будут представлены динамическими текстовыми блоками. Создайте два текстовых блока один под другим (на картинке ниже виден только верхний) и измените тип текста в блоках на Динамический Текст.
    В то же время можете выбрать шрифт, размер, и цвет. Обязательно включите поддержку кирилических символов в вкладке Embed если вы выбрали какой то определенный шрифт
    text-typ.gif

    Задайте имена: верхней текстовой области title_txt а нижней artist_txt.
    text-fie.gif
    С графической частью закончили теперь займемся собственно скриптом.

    Код:
    var my_songs:XMLList;
    var my_total:Number;
    
    var my_sound:Sound;
    var my_channel:SoundChannel;
    
    var current_song:Number = 0;
    
    var song_position:Number;
    var song_paused:Boolean;
    
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    myXMLLoader.addEventListener(Event.COMPLETE, processXML);
    
    function processXML(e:Event):void {
    	var myXML:XML = new XML(e.target.data);
    
    	my_songs = myXML.SONG;
    	my_total = my_songs.length();
    
    	//playSong(0);
    
    	myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
    	myXMLLoader = null;
    
    }
    
    function playSong(mySong:Number):void {
    	var myTitle = my_songs[mySong].@TITLE;
    	var myArtist = my_songs[mySong].@ARTIST;
    	var myURL = my_songs[mySong].@URL;
    
    	title_txt.text = myTitle;
    	artist_txt.text = myArtist;
    
    	if (my_channel) {
    		my_channel.stop();
    		my_channel.removeEventListener(Event.SOUND_COMPLETE, onNext);
    	}
    
    	my_sound = new Sound();
    	my_sound.load(new URLRequest(myURL));
    	my_channel = my_sound.play();
    	my_channel.addEventListener(Event.SOUND_COMPLETE, onNext);
    }
    
    next_btn.addEventListener(MouseEvent.CLICK, onNext);
    function onNext(e:Event):void {
    	current_song++;
    	if (current_song>=my_total) {
    		current_song=0;
    	}
    	playSong(current_song);
    }
    prev_btn.addEventListener(MouseEvent.CLICK, onPrev);
    function onPrev(e:MouseEvent):void {
    	current_song--;
    	if (current_song<0) {
    		current_song = my_total-1;
    	}
    	playSong(current_song);
    }
    
    pause_btn.addEventListener(MouseEvent.CLICK, onPause);
    function onPause(e:MouseEvent):void {
    	if (my_channel) {
    		song_position = my_channel.position;
    		my_channel.stop();
    		song_paused=true;
    	}
    }
    play_btn.addEventListener(MouseEvent.CLICK, onPlay);
    function onPlay(e:MouseEvent):void {
    	if (song_paused) {
    		my_channel = my_sound.play(song_position);
    		song_paused=false;
    	} else if (!my_channel) {
    		playSong(current_song);
    	}
    }
    ВО ВТОРОЙ ЧАСТИ УРОКА ОСТАНОВИМСЯ ПОДРОБНЕЕ НА НАПИСАНИИ СКРИПТОВОЙ ЧАСТИ. (не хватает времени за 1 раз все написать)
    если есть вопросы по скрипту задавайте.

    ЧАСТЬ ВТОРАЯ:

    Загрузка XML файла с использованием URLLoader Class :

    Первое, что мы сделаем, это загрузим наш XML файл во Flash. Загрузка любого текстового контента, таких как XML, CSS, HTML производится с помощью класса URLLoader . Этот класс очень прост в использовании. Начните с создания экземпляра, а затем загрузите в него .load() файл playlist.xml.

    Код:
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    Этим мы загрузили XML файл в Flash, но Flash сам по себе не будет ничего делать, как мы еще не указали, что нужно сделать, когда файл загрузится.
    Чтобы узнать загрузился ли файл, мы должны использовать обработчик события, так называемый листенер .addEventListener(Event.COMPLETE, processXML)
    Мы свяжем событие полной загрузки Event.COMPLETE с выполнением функции processXML -тоесть, вызов функции осуществится в случае полной загрузки данных в ролик.

    Код:
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    [COLOR="Magenta"]myXMLLoader.addEventListener(Event.COMPLETE, processXML);[/COLOR]

    Обработка XML данных

    Создадим саму функцию processXML

    Код:
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    myXMLLoader.addEventListener(Event.COMPLETE, processXML);
    
    [COLOR="Magenta"]function processXML (e:Event):void{
    } [/COLOR]
    Обработка XML данных потребует создания экземпляра XML класса. Сделайте это, используя код внутри функции: processXML ()

    Код:
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    myXMLLoader.addEventListener(Event.COMPLETE, processXML);
    
    function processXML (e:Event):void{
    [COLOR="#ff00ff"]var myXML:XML = new XML(e.target.data);[/COLOR]
    }
    Необходимо отметить, что использование ключевого слова VAR внутри функции создает временную переменную. Это означает, что данные будут удалены после завершения работы функции.

    Чтобы наши переменные являлись постоянными и не удалялись мы должны заявить о их существовании с помощью ключевого слова VAR в начале нашего кода, а не внутри функции.
    Используем следующие переменные:
    my_songs - Эта переменная будет содержать подробные данные о песнях. тип данных список XML
    my_total - Эта переменная будет указывать на количество песен, которые мы имеем в плейлисте. тип данных число.

    Добавьте код выше, существующего:

    Код:
    [COLOR="#ff00ff"]var my_songs:XMLList;
    var my_total:Number;[/COLOR]
    
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    myXMLLoader.addEventListener(Event.COMPLETE, processXML);
    
    function processXML (e:Event):void{
    var myXML:XML = new XML(e.target.data);
    } 
    далее внутри функции мы переменной my_songs присвоим содержимое контейнеров SONG из нашего списка, а переменной my_total количество контейнеров, что соответственно является количеством композиций в плейлисте:

    Код:
    var my_songs:XMLList;
    var my_total:Number;
    
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    myXMLLoader.addEventListener(Event.COMPLETE, processXML);
    
    function processXML (e:Event):void{
    var myXML:XML = new XML(e.target.data);
    
    [COLOR="#ff00ff"]my_songs = myXML.SONG;
    my_total = my_songs.length();[/COLOR]
    }
    
    теперь создадим функцию : playSong()

    Код:
    function playSong():void{
    }
    определим конкретность проигрывания какойто одной песни из всего списка таким образом:

    Код:
    function playSong([COLOR="#ff00ff"]mySong:Number[/COLOR]):void{
    }
    это даст нам возможность в последствии привязать переключение композиций с помощью кнопок.

    извлечем подробности композиции из переменной mySong с помощью оператора @. Создав временные переменные: myTitle myArtist myURL

    Код:
    function playSong(mySong:Number):void{
    [COLOR="#ff00ff"]var myTitle = my_songs[mySong].@TITLE;
    var myArtist = my_songs[mySong].@ARTIST;
    var myURL = my_songs[mySong].@URL;[/COLOR]
    }
    для отбражения данных в текстовых полях, созданых нами ранее на этапе графической части, присвоим текстовым полям полученое:

    Код:
    function playSong(mySong:Number):void{
    var myTitle = my_songs[mySong].@TITLE;
    var myArtist = my_songs[mySong].@ARTIST;
    var myURL = my_songs[mySong].@URL;
    
    [COLOR="#ff00ff"]title_txt.text = myTitle;
    artist_txt.text = myArtist;[/COLOR]
    }
    теперь можно протестировать что получилось: вызовем функцию playSong внутри функции processXML передав в качестве аргумента число ноль (получим проигрывание первой композиции так как в массивах счет ведется с нуля, думаю такие мелочи вы знаете.)

    Код:
    function processXML(e:Event):void {
    var myXML:XML = new XML(e.target.data); 
    
    my_songs = myXML.SONG;
    my_total = my_songs.length(); 
    
    [COLOR="#ff00ff"]playSong(0);[/COLOR]
    }
    теперь нажмите: Ctrl + Enter, и увидите название и исполнителя вашей первой песни в созданом нами флеш-ролике.

    Займемся воспроизведением:
    Воспроизведение аудио файлов в AS3 требует использования целого ряда звуковых классов, а именно: Sound Class и SoundChannel Class.
    Первое что мы сделаем добавим в начало кода переменные называемые my_sound и my_channel тоесть определим их как постоянные:

    Код:
    var my_songs:XMLList;
    var my_total:Number;
    
    [COLOR="#ff00ff"]var my_sound:Sound;
    var my_channel:SoundChannel;[/COLOR]
    добавим само воспроизведение композиции:


    Код:
    function playSong(mySong:Number):void{
    var myTitle = my_songs[mySong].@TITLE;
    var myArtist = my_songs[mySong].@ARTIST;
    var myURL = my_songs[mySong].@URL;
    
    title_txt.text = myTitle;
    artist_txt.text = myArtist;
    
    [COLOR="#ff00ff"]my_sound = new Sound();
    my_sound.load(new URLRequest(myURL));
    my_channel = my_sound.play();[/COLOR]
    }
    нажав (Ctrl + Enter), мы услышим саму песню....

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

    Код:
    var my_songs:XMLList;
    var my_total:Number;
    
    var my_sound:Sound;
    var my_channel:SoundChannel;
    
    [COLOR="#ff00ff"]var current_song:Number = 0;[/COLOR]
    создадим обработчик события на нажатие кнопки: NEXT
    добавляем в него листенер (при клике на кнопку увеличиваем номер композиции на 1 и передаем полученое в функцию playSong()

    Код:
    next_btn.addEventListener(MouseEvent.CLICK, onNext);
    function onNext(e:MouseEvent):void{
    current_song++;
    playSong(current_song);
    }
    получается проблемма - при нажатии кнопки NEXT начинает проигрываться следующая мелодия а предыдущая не останавливается. решаем таким образом:
    в функции playSong() добавляем остановку музыки при вызове следующей. изменим код на:

    Код:
    function playSong(mySong:Number):void{
    var myTitle = my_songs[mySong].@TITLE;
    var myArtist = my_songs[mySong].@ARTIST;
    var myURL = my_songs[mySong].@URL;
    
    title_txt.text = myTitle;
    artist_txt.text = myArtist;
    
    [COLOR="#ff00ff"]if (my_channel){
    my_channel.stop();
    }[/COLOR]
    
    my_sound = new Sound();
    my_sound.load(new URLRequest(myURL));
    my_channel = my_sound.play();
    }
    еще одну проблему (при многократном нажатии NEXT мы рано или поздно выйдем за предел количества мелодий в плейлисте) решаем таким образом:
    создаем еще одно условие, в котором сбрасываем счетчик на ноль при превышении порядкового номера:

    Код:
    next_btn.addEventListener(MouseEvent.CLICK, onNext);
    function onNext(e:MouseEvent):void{
    current_song++;
    [COLOR="Magenta"]if (current_song>=my_total){
    current_song=0;
    }[/COLOR]
    playSong(current_song);
    }
    точно так же создаем кнопку Previous
    только счетчик естественно в минуса, а проверка относительно нуля:

    Код:
    prev_btn.addEventListener(MouseEvent.CLICK, onPrev);
    function onPrev(e:MouseEvent):void{
    current_song--;
    if (current_song<0){
    current_song = my_total-1;
    }
    playSong(current_song);
    }
    кнопки pause и play
    определим переменные для хранения данных о позиции и состояния проигрывания мелодии, добавляем в начало кода:

    Код:
    var my_songs:XMLList;
    var my_total:Number;
    
    var my_sound:Sound;
    var my_channel:SoundChannel;
    
    var current_song:Number = 0;
    
    [COLOR="#ff00ff"]var song_position:Number;
    var song_paused:Boolean;[/COLOR]
    создадим обработчик кнопки pause
    при клике мелодия будет останавливаться, а сама кнопка становится не активной:

    Код:
    pause_btn.addEventListener(MouseEvent.CLICK, onPause);
    function onPause(e:MouseEvent):void{
    song_position = my_channel.position;
    my_channel.stop();
    song_paused=true;
    }
    аналогично делаем код кнопки play
    только учитываем состояние кнопки pause если true то запускаем проигрывание с места остановки и присваиваем false

    Код:
    play_btn.addEventListener(MouseEvent.CLICK, onPlay);
    function onPlay(e:MouseEvent):void{
    if (song_paused){
    my_channel = my_sound.play(song_position);
    song_paused=false;
    }
    }
    добавим еще такой прикол:
    при окончании мелодии, проигрывание следующей автоматически:

    Код:
    function playSong(mySong:Number):void{
    var myTitle = my_songs[mySong].@TITLE;
    var myArtist = my_songs[mySong].@ARTIST;
    var myURL = my_songs[mySong].@URL;
    
    title_txt.text = myTitle;
    artist_txt.text = myArtist;
    
    if (my_channel){
    my_channel.stop();
    }
    
    my_sound = new Sound();
    my_sound.load(new URLRequest(myURL));
    my_channel = my_sound.play();
    [COLOR="#ff00ff"]my_channel.addEventListener(Event.SOUND_COMPLETE, onNext);[/COLOR]
    }
    ранее мы четко указали что функция onNext срабатывает на клик мыши, чтоб реагировать не только на мышку но и на автоматический переход, изменим немного код:

    Код:
    next_btn.addEventListener(MouseEvent.CLICK, onNext);
    function onNext(e:[COLOR="#ff00ff"]Event[/COLOR]):void{ //[COLOR="#ff00ff"]Ранее было MouseEvent, меняем на  Event.[/COLOR]
    current_song++;
    if (current_song>=my_total){
    current_song=0;
    }
    playSong(current_song);
    }
    ТЕПЕРЬ ЗАЙМЕМСЯ УСТРАНЕНИЕМ ОШИБОК:

    уберем автоматическое проигрывание первой мелодии:

    Код:
    function processXML(e:Event):void { 
    var myXML:XML = new XML(e.target.data); 
    
    my_songs = myXML.SONG; 
    my_total = my_songs.length();
    
    [COLOR="Magenta"]//playSong(0); // Просто удалите эту строку или закоментируйте, чтобы убрать автоматическое воспроизведение.[/COLOR]
    }
    дальше получается что если нажать кнопку pause проигрыватель ругнется на отсутствие проигрываемой композиции, решаем так:
    ставим условие чтоб кнопка работала только при проигрывании

    Код:
    pause_btn.addEventListener(MouseEvent.CLICK, onPause);
    function onPause(e:MouseEvent):void{
    [COLOR="#ff00ff"]if (my_channel){[/COLOR]
    song_position = my_channel.position;
    my_channel.stop();
    song_paused=true;
    [COLOR="#ff00ff"]}[/COLOR]
    }
    добавляем:

    Код:
    play_btn.addEventListener(MouseEvent.CLICK, onPlay);
    function onPlay(e:MouseEvent):void{
    if (song_paused){
    my_channel = my_sound.play(song_position);
    song_paused=false;
    } [COLOR="#ff00ff"]else if (!my_channel){
    playSong(current_song);
    }[/COLOR]
    }
    вот вроде и все.... наслаждаемся....
    про оптимизацию кода в части №3
     
    fte, basct, Goldcalf и 17 другим нравится это.
  2. sevenup

    sevenup Создатель

    Регистр.:
    5 июл 2007
    Сообщения:
    369
    Симпатии:
    143
    Помойму доходчивее не написать,учитывая еще то что есть рисунки то данный урок сможет понять и соответственно сделать,даже далёкий человек!
    Автору респект и P.S. ждём продолжения:)
     
  3. GriZone

    GriZone Управляющий

    Administrator
    Регистр.:
    17 мар 2006
    Сообщения:
    431
    Симпатии:
    2.042
    написано очень доходчиво - наверно и самый чайник сможет сделать такое. ничего сложного как оказывается нету - просто повторяеш то что сказано и вуаля =) риспект tut - и спасибо за урок - попробую сделать плеер - как раз нужен для сайта!
     
  4. AccessForbidden

    AccessForbidden

    Регистр.:
    5 янв 2009
    Сообщения:
    324
    Симпатии:
    57
    Не ожидал что въеду, очень доходчиво. Для меня Action Script был темным лесом... Очень жду второй части урока :)
     
  5. Toha20072008

    Toha20072008

    Заблокирован
    Регистр.:
    17 фев 2008
    Сообщения:
    316
    Симпатии:
    50
    А вторая часть урока будет? Она же самая интересна!
     
  6. tut

    tut فقد ذهب و

    Регистр.:
    11 апр 2006
    Сообщения:
    132
    Симпатии:
    110
    получайте вторую часть, привязана к первому посту....
     
    sevenup нравится это.
  7. Avalanch

    Avalanch ТоЛеГ & ТоПеГ

    Регистр.:
    9 янв 2007
    Сообщения:
    1.138
    Симпатии:
    524
    Все написано легко и понимаемо даже для начинающего. :ay:
     
  8. timonio

    timonio Создатель

    Регистр.:
    12 янв 2009
    Сообщения:
    23
    Симпатии:
    0
    Отлично изложено и доходчиво. Буду разбирать первую часть. До второй постов не хватает. Если автор может кинуть в личку или на мыло - буду признателен.
     
  9. A1bert

    A1bert Создатель

    Регистр.:
    8 фев 2009
    Сообщения:
    11
    Симпатии:
    0
    хорошая методичка получилась) по шагам так все подробно расписано
     
  10. 6at9I

    6at9I Писатель

    Регистр.:
    12 сен 2008
    Сообщения:
    3
    Симпатии:
    1
    Отличный урок, все доходчиво написанно, даже я понял)
     
Статус темы:
Закрыта.