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

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

Пример работы с API vkontakte: создаём mp3 плеер

Флеш примеры и уроки
Vkontakte API позволяет создавать интересные, интерактивные и популярные приложения. Встроенные средства монетизации позволяют приносить доход разработчикам приложений, начиная с первых дней запуска. У API имеется огромное количество различных методов - от получения личной информации пользователя до изменения его рейтинга и отправки смс. Рассморим пример работы с методом audio.get и создадим простейший mp3 плеер, который будет проигрывать треки, которые вы добавили в "Мои Аудиозаписи". За основу возьмём плеер из урока создание mp3 плеера с xml плейлистом.
Всю необходимую информацию и полнейшию документацию вы можете найти в группе №1 - FLASH API. Там же находятся все новости и их обсуждения пользователями.
Страница с описанием метода audio.get находится здесь. Процитирую все параметры и описания сюда:
api_id (обязательный) - идентификатор приложения, присваивается при создании.
sig (обязательный) - подпись запроса по стандартной схеме.
v (обязательный) - версия API, текущая версия равна 2.0.
uid (необязательный) - id пользователя, которому принадлежат аудиозаписи. По умолчанию id текущего пользователя.
gid (необязательный) - id группы, которой принадлежат аудиозаписи. Если указан параметр gid, uid игнорируется.
aids (необязательный) - перечисленные через запятую id аудиозаписей, входящие в выборку по uid или gid.
need_user (необязательный) - если этот параметр равен 1, сервер возвратит базовую информацию о владельце аудиозаписей в структуре user (id, photo, name, name_gen).
format (необязательный) - формат возвращаемых данных – XML или JSON. По умолчанию XML.
test_mode (необязательный) - если этот параметр равен 1, разрешает тестовые запросы к данным приложения. При этом аутентификация не проводится и считается, что текущий пользователь – это автор приложения. Это позволяет тестировать приложение без загрузки его на сайт. По умолчанию 0.
Результат
Возвращает массив из объектов с аудиозаписями пользователя, каждый из которых имеет поля aid, owner_id, artist, title, duration, url. Если у аудиозаписи есть текст, возвращается идентификатор текста lyrics_id. owner_id равен id пользователя, если аудиозаписи принадлежат пользователю, или -id группы, если аудиозаписи принадлежат группе.
Особого внимания заслуживает параметр sig, это "подпись" запроса, в которой передаётся серетный ключ приложения и все параметры. Для того, чтобы нельзя было их перехватить, используется md5 хэширование. Параметр sig равен md5 от конкатенации следующих строк:
viewer_id – id текущего пользователя, переданный SWF посредством flashvars при инициализации, пар "parameter_name=parameter_value", расположенных в порядке возрастания имени параметра (по алфавиту) и секрета приложения api_secret.
Почему-то распостраненно мнение о том, что работать с вконтакте apa можно только при помощи actionscript 3. Это заблуждение, работать с api можно при помощи любой версии. Этот пример mp3 плеера будет на actionscript 2.
Итак, приступим к созданию плеера. В первом кадре сделаем простенький прелоадер. Так как плеер весит всего 11 кБ, я не вижу смысла показывать проценты при загрузке. Рекомендю вставить в кадр какую-нибудь анимацию, изображающую загруку и вставить в кадр код:
Stage.scaleMode = 'noScale';
stop(); // останавливаем ролик и ждём его полной загрузки
onEnterFrame = function() {
    t = _root.getBytesTotal(); // полный вес swf ролика
    l = _root.getBytesLoaded(); // загруженая часть (в байтах)
    if (l==t) { // когда ролик загрузился полностью
        gotoAndPlay(2); // переводим ролик на второй кадр
        delete onEnterFrame; // и удаляем функцию
    }
}

В моём примере второй и третий кадры пустые, они могут использованы в дальнейшем для проверки установил ли пользователь приложение и так далее. В четвёртом кадре находится код, который отправит запрос на скрипт vkontakte API (api.vkontakte.ru). Для формирования сигнатуры (sig) нам необходим алгоритм md5 хэширования. Для этого нужно создать экземпляр класса md5, который находится в файле md5.as и должен лежать в обной папке с флешкой. Код четвёртого кадра:
stop();
var m:md5 = new md5(); // экземпляр класса md5
api_id = 1694052; // номер, или id приложения
api_secret = '5HjCY7sRLA'; // секретный код приложения
method = 'audio.get'; // метод, который мы хотим вызвать
test_mode = 0; // при отладке можно поставить 1 и не приложение будет работать,
// даже не будучи загруженым на сервер
v = '2.0'; // версия API. В данный момент 2.0 - последняя версия

// формируем строку, от которой нужно получить md5 хэш
_sig = viewer_id+ 'api_id='+api_id+'method=audio.gettest_mode='+test_mode+'v=2.0'+api_secret;
sig = m.hash(_sig); // используем метод hash класса md5 и получаем сигнатуру

var sender:LoadVars = new LoadVars(); // Отправитель данных
var receiver:LoadVars = new LoadVars();// Получатель ответа
// Далее выполним запрос. Все переменные передадим прямо в адресной строке, методом GET
sender.sendAndLoad('http://api.vkontakte.ru/api.php?api_id='+api_id+'&sig='+sig+'&v='+v+'&test_mode='+test_mode+'&method='+method, receiver, "POST");// выполняем запрос
// опишем функцию, которая выполнится при загрузке данных
receiver.onData = function(text):Void  {
xml = new XML(); // создаём экземпляр класса XML
xml.ignoreWhite = true;
xml.parseXML(text); // разбираем полученный ответ как xml документ
    _root.gotoAndStop(5); // переводим фильм на 5-й кадр
}

Пример ответа от api vkontakte, который ам нужно будет распарсить:
<?xml version="1.0" encoding="utf-8"?>
<response list="true">
<audio>
<aid>60830458</aid>
<owner_id>1234</owner_id>
<artist>Unknown</artist>
<title>Bosco</title>
<duration>195</duration>
<url>httр://cs40.vkоntakte.ru/u06492/audio/2ce49d2b88.mp3</url>
</audio>
<audio>
<aid>59317035</aid>
<owner_id>1234</owner_id>
<artist>Mestre Barrao</artist>
<title>Sinhazinha</title>
<duration>234</duration>
<url>httр://cs510.vkоntakte.ru/u2082836/audio/d100f76cb84e.mp3</url>
</audio>
</response>

Код, который всё это аккуратно разложит по массивам, находится на пятом кадре.
stop();

xml = xml.firstChild.childNodes; // сохраним сюда данные из ноды response
// для удобной структуризации данных, полученых от вконтакте api,
// разложим информацию в несколько массивов:
artists = []; // массив с именами исполнителей
titles = []; // массив с названиями песен
durations = []; // массив с продолжительностью песен
urls = []; // массив для хранения ссылок на файлы

for (i in xml) { // переберём все элементы ответа
    _audio = new XML(); // здесь будет новый xml, от <audio> до </audio>
    _audio.ignoreWhite = true;
    _audio.parseXML(xml[i]);
    artists[i] = _audio.firstChild.childNodes[2].firstChild;
    titles[i] = _audio.firstChild.childNodes[3].firstChild;
    urls[i] = _audio.firstChild.childNodes[5].firstChild;
    time = Number(String(_audio.firstChild.childNodes[4].firstChild));// время звучания песни в сеундах
    min = Math.floor(time/60); // минуты
    if (min<10) min = '0'+min;
    sec = time%60; // секунды
    if (sec<10) sec = '0'+sec; // если меньше 10, дописываем 0 впереди
    durations[i] = min+':'+sec;
    
}
gotoAndStop(6);

Переводим фильм на 6-й кадр, с самим плеером. За основу взят урок создание mp3 плеера с xml плейлистом, но здесь кое-что изменено. Не будем подробно останавливаться, если что-то непонятно - смотрите приведённый выше урок. Код:
stop();
current_time = '';
yy = 0; // эта переменная будет указывать координату по оси _y
// для следующего элемента при заполнении плейлиста
dif = 3; // расстояние по высоте между элементами в списке
/* в следующем цикле мы переберём все элементы xml,
полученого флешкой с помощью vkontakte API
со списком аудиозаписей пользователя */
for (i in xml) {
    mc = _root.pl.container.attachMovie('item', 'item'+i, i);
    // в клип-плейист добавляем мувиклип item из библиотеки
    mc._y = yy; // назначаем его координату по оси y
    yy += mc._height+dif; // пересчитываем координату следующего элемента
    // определяем свойства клипа (название песни, с которой он связан
    // продолжительность песни, порядковый номер элемента
    mc.url = urls[i]; // ссылка на скачивание
    mc.label = artists[i]+' - '+titles[i]; // исполнитель и название песни
    mc.time = durations[i]; // время звучания песни
    mc.i = i; // в каждый пункт списка пишем его номер
    mc.playing = false; // значит, что текущая песня не является выбраной в данный момент
}
// здесь мы заончили формирование плейлиста с аудиозаписями
///////////////////////////

pl.container.setMask(pl.m); // применяем маску к клипу-плейлисту
// если список умещается в контейнер, то полоса прокрутки (скроллер) нам не нужен
// и его нужно скрыть
if (pl.container._height < pl.m._height) { // проверяем, сравниваем мувиклипы по высоте
    scroll._visible = false;
}

scroll.bar.onPress = function() {
    scroll.bar.startDrag(false, -5, 10, -5, scroll._height-scroll.bar._height -10);
        scroll.onMouseMove = function () { // при движении курсора
        pl.container._y = 0-((pl.container._height-pl.m._height+10) * scroll.bar._y / (scroll._height-scroll.bar._height -20));
    }
}
scroll.bar.onRelease = scroll.bar.onReleaseOutside = function() {
    scroll.bar.stopDrag();
}

////////////////
isPlaying = null;

function playSong(mp3) {
    sound = new Sound();
    sound.loadSound(urls[mp3], true); // вызываем метод loadSound
    song_title = _root.pl.container['item'+mp3].label;
    pl.container['item'+mp3].fon.gotoAndStop(3);
    pl.container['item'+isPlaying].fon.gotoAndStop(1);
    isPlaying = mp3;
    // скрываем кнопку play, показываем кнопки pause и stop
    play_but._visible = false;
    pause_but._visible = true;
    stop_but._visible = true;
    
    sound.setVolume(vol.bar._width/vol._width * 100); // установим нужную громкость
    
// ставим шириниу индикатора загрузки mp3 равной 0
position.mp3_load._width = 0;
// точно то же для индикатора позиции mp3 файла
position.bar._width = 0;
    
}

// регулировка громкости
vol.onRelease = function() {
    vol.bar._width = vol._xmouse;
    sound.setVolume(vol._xmouse/vol._width * 100);
}
// изначально пользователь не видит кнопок play, pause и stop
play_but._visible = false;
pause_but._visible = false;
stop_but._visible = false;
// ставим шириниу индикатора загрузки mp3 равной 0
position.mp3_load._width = 0;
// точно то же для индикатора позиции mp3 файла
position.bar._width = 0;

// остановка воспроизведения (кнопка stop)
stop_but.onRelease = function() {
current_time = ''; // очищаем поле с отображением времени
song_title = ''; // очищаем поле с отображением названия текущей песни
sound.stop(); // останавливаем воспроизведение
// скрываем кнопки play, pause и stop
play_but._visible = false;
pause_but._visible = false;
stop_but._visible = false;
pl.container['item'+isPlaying].fon.gotoAndStop(1); // убираем "подсвечивание" песни в плейлисте
isPlaying = null; // отмечаем, что сейчас не играет не одна песня

position.mp3_load._width = 0;
position.bar._width = 0;
}
// пауза воспроизведения
pause_but.onRelease = function() {
    pause_but._visible = false;
    play_but._visible = true;
    stop_pos = sound.position/1000;
    sound.stop();
}
// продолжение воспроизведения (play)
play_but.onRelease = function() {
    pause_but._visible = true; // показываем кнопку пауза
    play_but._visible = false; // скрываем кнопку play
    sound.start(stop_pos); // стартуем воспроизведение с позиции паузы
}

// функция, которая будет выполняться при каждой смене кадра (обновление позиции индикаторов)
onEnterFrame = function() {
    if (isPlaying != null) { // если сейчас играет какая-либо песня
    t = sound.getBytesTotal(); // получаем полный размер песни (в байтах)
    l = sound.getBytesLoaded(); // число загруженых байт
// в зависимости от размера части загруженого mp3 трека, меняем ширину mp3_load
    position.mp3_load._width = Math.round(l/t * position._width);
// также в зависимости от прогресса воспроизведения меняем ширину мувиклипа bar
    position.bar._width = Math.round(sound.position/sound.duration * position._width);
    min = Math.floor((sound.position/1000)/60);
    sec = Math.floor((sound.position/1000)%60);
    if (min < 10) min = '0' + min;
    if (sec < 10) sec = '0'+sec;
    current_time = min+':'+sec;
    }
}
// нажатие на бегунок Прогресс
position.onRelease = function() {
    if (position._xmouse < position.mp3_load._width) { // если позиция, которую выбрал пользователь уже загружена
        // то перематываем mp3 файл на нужное место
        sound.start((sound.duration/1000) * position._xmouse/position._width );
    }
}

Увидеть этот плеер в действии можно здесь, скачать архив с исходником примера можно отсюда. В архиве находится исходник, флешка и файл md5.as с классом md5. Для того, чтобы открыть исходник, вам понадобится Adobe Flash CS 3 или новее.

 (голосов: 15)

Почитать ещё:
 
#1 написал: AMD (9 февраля 2010 15:18)
админ привет, помоги плиз, как сделать так чтоб всем кто установил приложение отправить уведомление?
заранее спс
#2 написал: Евгений (4 июля 2010 20:55)
Вы не совсем правы. Люди имеют в виду что нельзя писать приложения с vkontkte api не на as 2.0, а на Macromedia Flash 8!
#3 написал: SpiriT1994 (28 июля 2010 17:02)
Полезная информация, поможет мне в освоении Флеш и АПИ
#4 написал: OveniBoania (5 сентября 2010 15:46)
I enjoyed reading your blog. Keep it that way.
#5 написал: SDon (19 декабря 2010 08:23)
Евгений - Ты олень тупой в Macromedia Flash 8 есть актион скррипт 2[/s]
#6 написал: Сергей (7 января 2011 17:00)
А будут добавляться новые аудиозаписи, если их добавили в группу??
#7 написал: Даниил (22 июня 2011 12:21)
У МЕНЯ ЕСТЬ ПРИЛОЖЕНИЕ (ИСХОДНИК) КОТОРОЕ НАДО ДОДЕЛАТЬ ДЛЯ ВКОНТАКТЕ!КТО СМОЖЕТ ПОМОЧЬ ОБРАЩАТЬСЯ В MAIL CASINO-SEVEN@YANDEX.RU ИЛИ АСЬКА 643353895
#8 написал: shift1111 (16 января 2012 17:11)
Мда школота налетела. Да а разве можно секрет кей в паблик?!
#9 написал: admin (16 января 2012 17:17)
В том секрет кее, который выше - не хватает двух символов tongue
А вообще, конечно, api secret из флешки можно достать быстро, легко и непринуждённо. Поэтому многие вещи (например, транзакции с голосами) можно выполнить исключительно с сервера, а с клиента - вытаскивать инфу из профиля, не более
Добавление комментария




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