Вставляем Flash внутрь IFrame
Добавлено: 02 июл 2012, 21:26
Решил закинуть урок в этот раздел, т.к. информация касается именно флешеров.
Как все мы знаем, ВКонтакте предлагает использовать разработчикам один из двух типов приложений: Flash или IFrame.
Также многие знают, что Flash можно использовать внутри IFrame, но все же многие флешеры предпочитают использовать тип Flash при публикации приложения, вопреки всем плюсам "IFrame-фантика" (© Alazaur), т.к. не знают, как Flash-приложение может взаимодействовать с IFrame.
Что ж, попробуем решить эту проблему. Для публикации IFrame-приложения нам понадобится хостинг. В интернете не сложно найти бесплатный или недорогой хостинг, этого будет достаточно для новичка.
Вставляем Flash в IFrame
Создаем файл index.html (кодировка UTF-8 или UTF-8 без BOM), внутрь файла записываем:
Загружаем на хостинг, рядом кладем наше приложение с названием fl.swf, создаем IFrame-приложение ВКонтакте, в настройках указываем ссылку на index.html.
Если Вы все сделали правильно, то при запуске приложения флешка должна отображаться корректно в прямоугольнике 627x590 px (см. параметры публикации в коде), в приложение передаются параметры запуска, но нет взаимодействия флешки с API ВКонтакте. Нужно это исправить.
Налаживаем взаимодействие Flash с API ВКонтакте
Я написал класс для взаимодействия нашей флешки с API ВКонтакте. Класс решил назвать APIConnection (другое название не смог придумать ).
Также APIConnection использует класс CustomEvent для диспетчеризации событий.
В классе APIConnection, унаследованном от EventDispatcher, определены следующие открытые методы:
Допустим, наше приложение выглядит вот так:
Все будет продолжать нормально выглядеть, если Вы не будете использовать метод resizeWindow Javascript API, но если попытаться, к примеру, вызвать:
...то наше приложение будет выглядеть так:
Криво, да?
Все дело в том, что при изменении размеров приложения изменяются не только размеры флешки, но и размеры IFrame-контейнера, причем не всегда корректно.
В нашем случае изменять размеры нужно так:
После чего мы получаем:
В классе CustomEvent, унаследованном от класса Event, определено свойство params, которое возвращает ссылку на массив с параметрами события.
Перейдем к инициализации приложения:
Пример кода инициализации приложения:
Теперь все действия будут производиться с объектом VK.
Кстати, еще есть класс APIConnectionDebug, унаследованный от APIConnection, который, как вы поняли, используется при тестировании:
Но все равно при публикации приложения я настоятельно рекомендую использовать класс APIConnection вместо APIConnectionDebug, а сам APIConnectionDebug использовать только при тестировании приложения.
Заключение
Что ж, все готово к использованию, юзайте на здоровье
В заключение хотел бы попросить тех, кому не лень, написать в комментариях плюсы и минусы использования "IFrame-фантика".
Ну и, конечно же, держите исходник, куда ж без него?
Как все мы знаем, ВКонтакте предлагает использовать разработчикам один из двух типов приложений: Flash или IFrame.
Также многие знают, что Flash можно использовать внутри IFrame, но все же многие флешеры предпочитают использовать тип Flash при публикации приложения, вопреки всем плюсам "IFrame-фантика" (© Alazaur), т.к. не знают, как Flash-приложение может взаимодействовать с IFrame.
Что ж, попробуем решить эту проблему. Для публикации IFrame-приложения нам понадобится хостинг. В интернете не сложно найти бесплатный или недорогой хостинг, этого будет достаточно для новичка.
Вставляем Flash в IFrame
Создаем файл index.html (кодировка UTF-8 или UTF-8 без BOM), внутрь файла записываем:
Код: Выделить всё
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <script src="swfobject.js"></script> <!-- Подробнее о swfobject.js можно почитать [url=http://code.google.com/p/swfobject]тут[/url] --> <script src="http://vk.com/js/api/xd_connection.js?2"></script> <!-- Подробнее [url=http://vk.com/developers.php?oid=-1&p=IFrame-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F]тут[/url] --> <script> VK.init(function(){ //указываем id flash-объекта var flashId = 'fl'; //указываем параметры приложения var params = {wmode:'window', quality:'high', scale:'noscale', salign:'tl', flashvars:location.search.substring(1), allowscriptaccess:'always', allowfullscreen:'true', allownetworking:'all'}; //вставляем приложение (подробнее [url=http://code.google.com/p/swfobject/wiki/api#swfobject.embedSWF(swfUrlStr,_replaceElemIdStr,_widthStr,_height]тут[/url]) swfobject.embedSWF('fl.swf', flashId, '627', '590', '11', null, null, params, {id:flashId, name:flashId}, function(){document.getElementById(flashId).style.visibility = 'visible';}); }); </script> <style> html, body {overflow:hidden; margin:0} #fl {visibility:hidden} </style></head><body> <div id="fl"> <!-- Если нет Flash Player'а нужной версии --> <p align="center">Для просмотра приложения необходимо скачать новую версию <a href="http://get.adobe.com/ru/flashplayer/" target="_blank">Adobe Flash Player</a></p> </div></body></html>
Если Вы все сделали правильно, то при запуске приложения флешка должна отображаться корректно в прямоугольнике 627x590 px (см. параметры публикации в коде), в приложение передаются параметры запуска, но нет взаимодействия флешки с API ВКонтакте. Нужно это исправить.
Налаживаем взаимодействие Flash с API ВКонтакте
Я написал класс для взаимодействия нашей флешки с API ВКонтакте. Класс решил назвать APIConnection (другое название не смог придумать ).
Также APIConnection использует класс CustomEvent для диспетчеризации событий.
В классе APIConnection, унаследованном от EventDispatcher, определены следующие открытые методы:
- APIConnection() - конструктор;
- callMethod(methodName:String, ...params):void - осуществляет внешний вызов Javascript API;
- api(methodName:String, params:Object, onComplete:Function = null, onError:Function = null):void - обращается к ВКонтакте API;
- additionalWidth:int - указывает разность ширины IFrame и ширины Flash
- additionalHeight:int - указывает разность высоты IFrame и высоты Flash
Допустим, наше приложение выглядит вот так:
Все будет продолжать нормально выглядеть, если Вы не будете использовать метод resizeWindow Javascript API, но если попытаться, к примеру, вызвать:
Код: Выделить всё
VK.callMethod('resizeWindow', 600, 780);
Криво, да?
Все дело в том, что при изменении размеров приложения изменяются не только размеры флешки, но и размеры IFrame-контейнера, причем не всегда корректно.
В нашем случае изменять размеры нужно так:
Код: Выделить всё
VK.additionalWidth = 160;VK.additionalHeight = 120 + 120;VK.callMethod('resizeWindow', 600, 780);
В классе CustomEvent, унаследованном от класса Event, определено свойство params, которое возвращает ссылку на массив с параметрами события.
Перейдем к инициализации приложения:
Пример кода инициализации приложения:
Код: Выделить всё
var VK:APIConnection = new APIConnection();
Кстати, еще есть класс APIConnectionDebug, унаследованный от APIConnection, который, как вы поняли, используется при тестировании:
Код: Выделить всё
var VK:APIConnection = new APIConnectionDebug({api_id:12345, viewer_id:54321, secret:'secret', sid:'sid'});
Заключение
Что ж, все готово к использованию, юзайте на здоровье
В заключение хотел бы попросить тех, кому не лень, написать в комментариях плюсы и минусы использования "IFrame-фантика".
Ну и, конечно же, держите исходник, куда ж без него?