Вставляем Flash внутрь IFrame

Только готовые уроки по использованию ВКонтакте API. Flash + PHP + API. НЕ IFrame!
gpv123
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57

Вставляем Flash внутрь IFrame

Сообщение gpv123 »

Решил закинуть урок в этот раздел, т.к. информация касается именно флешеров.

Как все мы знаем, ВКонтакте предлагает использовать разработчикам один из двух типов приложений: 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>
Загружаем на хостинг, рядом кладем наше приложение с названием fl.swf, создаем IFrame-приложение ВКонтакте, в настройках указываем ссылку на index.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
Рассмотрим важность использования свойств additionalWidth и additionalHeight на примере.
Допустим, наше приложение выглядит вот так:

Изображение

Все будет продолжать нормально выглядеть, если Вы не будете использовать метод 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();
Теперь все действия будут производиться с объектом VK.

Кстати, еще есть класс APIConnectionDebug, унаследованный от APIConnection, который, как вы поняли, используется при тестировании:

Код: Выделить всё

var VK:APIConnection = new APIConnectionDebug({api_id:12345, viewer_id:54321, secret:'secret', sid:'sid'});
Но все равно при публикации приложения я настоятельно рекомендую использовать класс APIConnection вместо APIConnectionDebug, а сам APIConnectionDebug использовать только при тестировании приложения.


Заключение

Что ж, все готово к использованию, юзайте на здоровье :D :D :D
В заключение хотел бы попросить тех, кому не лень, написать в комментариях плюсы и минусы использования "IFrame-фантика".
Ну и, конечно же, держите исходник, куда ж без него? :)
sanych_dv
Разработчик
Разработчик
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52

Re: Вставляем Flash внутрь IFrame

Сообщение sanych_dv »

Стандартный VK.api отлично работает в таких роликах, зачем надо было писать свой класс ?
sanych_dv
Разработчик
Разработчик
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52

Re: Вставляем Flash внутрь IFrame

Сообщение sanych_dv »

HTML:

Код: Выделить всё

 <script src="http://vk.com/js/api/xd_connection.js?2" type="text/javascript"></script><script src="swfobject.js" type="text/javascript"></script> <script type="text/javascript">var query = window.location.search.substring (1);swfobject.embedSWF("myflash.swf", "flashContent", "800", "660", "11.0.0", "expressInstall.swf", null, {quality:'high', scale:'showall', allowscriptaccess:'always', allownetworking:'all', wmode: 'opaque' , flashvars: query }, {style:'display:block;margin:auto;', id:'myflash', name:'myflash'}); </script> ... 
AS3:

Код: Выделить всё

 ...    import vk.*;    import vk.events.*;...                 var flashVars:Object = stage.loaderInfo.parameters as Object;            var VK:APIConnection = new APIConnection(flashVars);            VK.forceDirectApiAccess(true); // и далее все как обычно. 
gpv123
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57

Re: Вставляем Flash внутрь IFrame

Сообщение gpv123 »

sanych_dv писал(а):Стандартный VK.api отлично работает в таких роликах, зачем надо было писать свой класс ?
Изображение
Конечно отлично! Куда уж мне со своими тремя килобайтами против этого гиганта?
P.S.: а что, и аналог additionalWidth и additionalHeight у них есть?
sanych_dv
Разработчик
Разработчик
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52

Re: Вставляем Flash внутрь IFrame

Сообщение sanych_dv »

А о каких трех килобайтах вы говорите? Пакет paul.vk весит практически столько же, сколько и вконтактовский vk. Кстати, что у вконтактовского, что у вашего package странное именование - обычно в именовании пакета используют реверсивный способ записи авторского домена, к примеру, com.greensock .

Насчет скриншота - всегда найдутся кривые ручки, под которые не хватит никаких дополнительных методов ) У меня вот как-то не было нужды в дополнительных костылях от VK.api , хотя всю дорогу размещаю флэш в ифрэйме.

А вообще вашего возраста очень хорошая работа.
gpv123
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57

Re: Вставляем Flash внутрь IFrame

Сообщение gpv123 »

sanych_dv писал(а):А о каких трех килобайтах вы говорите? Пакет paul.vk весит практически столько же, сколько и вконтактовский vk.
Вы не совсем правильно меня поняли.
Если Вы будете использовать дебаг:

Код: Выделить всё

var VK:APIConnection = new APIConnectionDebug(params);
...то скомпилируется все, что там есть, но я и не рекомендую использовать дебаг при публикации:

Изображение
sanych_dv писал(а):Кстати, что у вконтактовского, что у вашего package странное именование - обычно в именовании пакета используют реверсивный способ записи авторского домена, к примеру, com.greensock .
Я это знаю, но своего сайта у меня нет, так что решил написать свое имя :D
sanych_dv писал(а):Насчет скриншота - всегда найдутся кривые ручки, под которые не хватит никаких дополнительных методов ) У меня вот как-то не было нужды в дополнительных костылях от VK.api , хотя всю дорогу размещаю флэш в ифрэйме.
Насчет костылей: Если просто пихать флеш в IFrame, то ничего лишнего не нужно, но если рядом с флешем разместить новости, рекламу, кнопку "Мне нравится" или что-нибудь еще, да еще и есть необходимость часто изменять размеры приложения, то без костылей не обойтись) Так что additionalWidth и additionalHeight я не зря сделал :)
sanych_dv писал(а):А вообще вашего возраста очень хорошая работа.
Старался, спасибо :D :D :D
sanych_dv
Разработчик
Разработчик
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52

Re: Вставляем Flash внутрь IFrame

Сообщение sanych_dv »

... А если не использовать дебаг, то куда вы дели JSON ? ) Кстати, он и весит больше всего, а а версии FP < 11 это актуально.
gpv123
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57

Re: Вставляем Flash внутрь IFrame

Сообщение gpv123 »

sanych_dv писал(а):куда вы дели JSON ? )
он мне без дебага совсем не нужен)))
Я обращаюсь к API через IFrame (ExternalInterface)
sanych_dv
Разработчик
Разработчик
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52

Re: Вставляем Flash внутрь IFrame

Сообщение sanych_dv »

А мне он всегда нужен, стало быть - ваш класс уже неуниверсален.
gpv123
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57

Re: Вставляем Flash внутрь IFrame

Сообщение gpv123 »

sanych_dv писал(а):А мне он всегда нужен, стало быть - ваш класс уже неуниверсален.
Не очень понял ход Ваших мыслей... Зачем я буду использовать JSON, если он там не нужен? Я обращаюсь к VK.api в IFrame через ExternalInterface, путем чего экономлю на JSON и MD5, но если Вам так хочется увеличить размер SWF, то APIConnectionDebug к Вашим услугам...
Ответить