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

Создание приложений под api сайта vkontakte.ru с нуля

Подписаться Бесплатная новостная рассылка Подписчиков 41 RSS
  Декабрь 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Открыта: 27-09-2009

Автор
Dale

Статистика

41 подписчиков
0 за неделю
←   Все выпуски   →

Создание приложений под api сайта vkontakte.ru с нуля Введение


Приветствую всех, кто подписался на эту рассылку. Нас набралось 15 человек, можно начинать J

Начало

Перед тем, как начинать писать приложения, нужно установить необходимое программное обеспечение. Не думали же вы, что приложения создаются из воздуха? J

Нам потребуется программа ADOBE FLASH CS4 PROFESSIONAL. Вам необходимо добыть ее дистрибутив и установить на ваш компьютер. Программы мы будем писать именно в ней на языке Action Script 3.0.

Замечание

Помимо Flash, приложения можно писать и в Adobe Flex Builder. Но приложения, написанные во Flex и во Flash, имеют рад различий:

1.    Администрация ВКонтакте ориентируется на то, что приложения будут написаны во Flash. По мере появления новых функций API (например, появление контейнера) дается подробное описание действий именно для Flash.

2.    Приложения, написанные во Flex, занимают много места – сотни килобайт, тогда как приложения, написанные во Flash – десятки килобайт.

3.    Flex имеет много положительных сторон: прежде всего это богатый framework и огромное кол-во библиотек и компонентов.

Flex гораздо удобней для программистов. Почему я выбрал для нас именно Flash? Помимо первых двух пунктов, мы будем писать простые приложения (а вы думали? начинать нужно с простого). Flash для этого будет в самый раз. А если вы будете знать Flash, то перейти во Flex не составит никакого труда.

Осваиваемся во Flash

Далее начинаем осваивать Flash, ведь нам с ним работать и работать! Выбираем в меню File->New… и в открывшемся окне на вкладке General выбираем Flash File (Action Script 3.0). Жмем ОК. Мы только что создали новый flash проект.

 Жмем Ctrl+S и сохраняем файл в новом, пустом каталоге (можно и не в пустом, но для удобства рекомендую именно в пустом).

 Ну а теперь понеслась! Начинаем экспериментировать. Видите панель со стрелочками, карандашиками и т.п.?  Это панель Tools. Если вы ее не видите, нажмите Ctrl+F2, и она появится. Откроем так же панель Properties (Ctrl+F3, или меню Window->Properties).

На панели Tools выбираем инструмент Rectangle Tool. Видим, что на панели Properties можно выбрать цвет заливки, цвет линии, толщину линии, тип линии и другие опции. Рисуем квадрат на белом поле. Выбираем инструмент Selection Tool и пробуем выделять и перетаскивать нарисованный квадратик. По аналогии пробуем пользоваться кистью, карандашом, рисовать линии. Инструмент Free Transform Tool позволяет менять размеры объектов.

Теперь попробуем создать кнопочку. Открываем панель Libкary (F11).

На панели Library щелкаем правой клавишой, и в контекстном меню выбираем New Symbol… В появившемся окне в поле Name вводим «Моя первая кнопка». В качестве type выбираем тип Button (кнопка) и жмем ОК.

Открываем панель TimeLine (Ctrl+Alt+T).

Убеждаемся, что мы находимся на первом кадре: смотрим на панель TimeLine. Если тонкая вертикальная полоска красного цвета стоит на слове UP, как показано на рисунке, значит все в порядке.

 

Рисуем на белом поле нашу кнопку с помощью инструментов на панели Tools в ненажатом состоянии. Надпись пока не делаем, для нее мы создадим второй слой.

Создаем второй слой. На панели TimeLine слева внизу есть маленькая кнопка New Layer. Жмем на нее. Видим, что появился новый, пустой слой, по умолчанию названный Layer 2. Убеждаемся, что он выделен синим цветом. С помощью инструмента Text Tool вводим любой текст.

Создаем образ кнопки в «наведенном» состоянии. На панели TimeLine выделяем два белых квадратика под надписью Over и жмем F6. Мы только что создали новый кадр. Убеждаемся. Что мы на втором кадре (Если тонкая вертикальная полоска красного цвета стоит на слове Over). Изменяем нашу кнопку: такой она будет выглядеть, когда пользователь наведет на нее мышь.

Аналогично создаем образ кнопки в «нажатом состоянии» на третьем кадре.

Теперь щелкаем на слово Scene 1 (Сцена 1) сверху. Мы перешли с редактирования кнопки к первому кадру сцены 1. Перетаскиваем на главное поле кнопку с панели Library. Сохраняемся (Ctrl+S). Жмем Ctrl+Enter. Поздравляю: вы только что создали новое приложение, которое правда не использует API. Его даже можно загрузить на сайт ВКонтакте, правда на данном этапе это не имеет смысла.

Проиграйтесь с только что созданной кнопкой, посмотрите, что получилось.

 

Ваше первое приложение, использующее API.

Загрузка параметров, переданных через flashVars.

API ВКонткте передает посредством flashVars первичную информацию, такую, как например id пользователя, который просматривает приложение. Подробное описание параметров можно найти в документации по ссылке http://vkontakte.ru/pages.php?o=-1&p=%C4%EE%EA%F3%EC%E5%ED%F2%E0%F6%E8%FF%20API%20%C2%CA%EE%ED%F2%E0%EA%F2%E5. Сейчас мы научимся извлекать данные из flashVars.

Создайте новый проект Flash File (Action Script 3.0).

Создайте кнопку.

Перетащите ее на главную сцену. Откройте панель Properties и выделите кнопку (для этого нужно выбрать инструмент Selection Tool на панели Tools и один раз щелкнуть по кнопке). В панели Properties в поле, где написано «Instance Name», введите puskBtn. Вы только что дали имя кнопке, чтобы иметь к ней прямой доступ через Action Script 3.0.

Теперь выберите инструмент Text Tool на панели Tools. Убедитесь, что на панели Properties в списке Text type в самом верху выбран тип Dynamic text. Вставьте текстовое поле на главную сцену. Оставьте его пустым. Затем выберите инструмент Selection Tool на панели Tools выделите только что созданное текстовое поле. По аналогии с кнопкой дайте ему название idTxt.

План таков: при нажатии на кнопку в текстовом поле у нас должен появляться один из параметров, переданных через flashVars. Пусть это будет viewer_id –id пользователя, который просматривает приложение.

Создайте новый слой на главной сцене: на панели TimeLine слева внизу есть маленькая кнопка New Layer. Жмем на нее. Видим, что появился новый, пустой слой, по умолчанию названный Layer 2. Выделяем первый кадр, как показано на рисунке. В этом кадре у нас и будет лежать скрипт.

 

Открываем панель Actions (F9). Это редактор ActionScript – сюда будем вводить программу. Введите в поле вот этот код:

import flash.events.MouseEvent;

puskBtn.addEventListener(MouseEvent.CLICK,onClick);

function onClick(event:MouseEvent)

{

     idTxt.text="Ваш id "+loaderInfo.parameters["viewer_id"];

}

 

Что же мы написали? Объясняю по строчкам:

Первая строчка импортирует события мыши. Нужна для того, чтобы мы могли прослушать событие щелчка по кнопке.

Подробнее про инструкцию import: http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/statements.html#import

Подробнее про MouseEvent: http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/events/MouseEvent.html

Вторая строчка добавляет прослушиватель события MouseEvent.CLICK  (щелчок мышью) кнопке puskBtn и назначает в качестве прослушивания функцию onClick, описанную ниже.

 

Третья строчка задает функцию onClick, которая является прослушивателем события мыши.  Разберем, что такое event:MouseEvent.

event – это название переменной, а MouseEvent – это тип переменной. То есть мы можем написать e:MouseEvent, тем самым определив в качестве параметра функции переменную e. Но мы не сможем написать event:e, так как типа e нет.

event – имя параметра функции. Так как эта переменная имеет тип MouseEvent, то у нее есть все свойсва, характерные для типа MouseEvent. Например, если мы напишем

import flash.events.MouseEvent;

puskBtn.addEventListener(MouseEvent.CLICK,onClick);

function onClick(event:MouseEvent)

{

      trace(event.shiftKey);

}

 

 

 

 

 

 

 

 

То при нажатии на кнопку появится true, если при щелчке была нажата клавиша Shift, и false в противном случае. Все свойства MouseEvent можно найти в документации: по ссылке http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/events/MouseEvent.html

Вернемся к функции. Тело функции заключается в фигурные скобки. В нашем случае функция выполняет только одно действие: idTxt.text="Ваш id "+loaderInfo.parameters["viewer_id"]; . Эта строчка присваивает свойству text текстового поля idTxt сумму двух строк: первая строка

"Ваш id "

Вторая строка берется из flashVars и равна id пользователя, который просматривает приложение. Аналогично мы можем загружать и другие переменные из flashVars:

idTxt.text="id приложения "+loaderInfo.parameters["api_id"];

После выполнения строки

idTxt.text="Ваш id "+loaderInfo.parameters["viewer_id"];

 в текстовом поле появится следующее: «Ваш id 123456», где 123456 – это ваш id. (рзумеется, после того как мы загрузим приложение на сайт vkontakte.ru.)

Кстати, все текстовые поля относятся к типу TextField. Полную информацию про этот тип можно (но в данный момент вряд ли нужно) найти здесь: http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/text/TextField.html

Не расстраивайтесь, если вы что-то не поняли. Главное – это понимание того, что viewer_id получается путем вызова

loaderInfo.parameters["viewer_id"];

 

Теперь сохраняем flash проект  в новой пустой папке. Затем жмем ctrl+enter. Если не выскочило ошибки, значит вы все сделали правильно.

Загружаем приложение ВКонтакте. Для этого на странице http://vkontakte.ru/gsearch.php?from=apps следует нажать на ссылку создать приложение и следовать дальнейшим указаниям. На странице редактирования загрузите файл с расширением swf, который появился в папке, куда вы сохранили приложение. Убедитесь, что в графе Контейнер приложения выбран пункт Без использования контейнера. В контейнере параметры flashVars нужно извлекать немного по-другому. Как пользоваться контейнером, я расскажу вам в следующем выпуске рассылки.

Запускаем загруженное приложение и убеждаемся в том, что оно работает J

Напоследок

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

В следующем выпуске мы научимся использовать контейнер и отправлять запросы к api vkontakte на примере получения списка друзей. В каждом следующем выпуске я постараюсь как можно подробнее объяснить, что откуда берется.

Успехов и до новых встреч!

 

 

Ссылки по теме:

Документация api vkontakte http://vkontakte.ru/pages.php?o=-1&p=%C4%EE%EA%F3%EC%E5%ED%F2%E0%F6%E8%FF%20API%20%C2%CA%EE%ED%F2%E0%EA%F2%E5

Справочник по ActionScript 3.0: http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/

 

 

 

 

 

 
В избранное