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

Только готовые уроки по использованию ВКонтакте API. Flash + PHP + API. НЕ IFrame!

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

Сообщение gpv123 » 02 июл 2012, 21:26

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

Как все мы знаем, ВКонтакте предлагает использовать разработчикам один из двух типов приложений: Flash или IFrame.
Также многие знают, что Flash можно использовать внутри IFrame, но все же многие флешеры предпочитают использовать тип Flash при публикации приложения, вопреки всем плюсам "IFrame-фантика" (© Alazaur), т.к. не знают, как Flash-приложение может взаимодействовать с IFrame.

Что ж, попробуем решить эту проблему. Для публикации IFrame-приложения нам понадобится хостинг. В интернете не сложно найти бесплатный или недорогой хостинг, этого будет достаточно для новичка.


Вставляем Flash в IFrame

Создаем файл index.html (кодировка UTF-8 или UTF-8 без BOM), внутрь файла записываем:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="swfobject.js"></script> <!-- Подробнее о swfobject.js можно почитать тут -->
  6.     <script src="http://vk.com/js/api/xd_connection.js?2"></script> <!-- Подробнее тут -->
  7.     <script>
  8.         VK.init(function(){
  9.             //указываем id flash-объекта
  10.             var flashId = 'fl';
  11.             //указываем параметры приложения
  12.             var params = {wmode:'window', quality:'high', scale:'noscale', salign:'tl',
  13.                           flashvars:location.search.substring(1), allowscriptaccess:'always',
  14.                           allowfullscreen:'true', allownetworking:'all'};
  15.             //вставляем приложение (подробнее тут)
  16.             swfobject.embedSWF('fl.swf', flashId, '627', '590', '11',
  17.                                null, null, params, {id:flashId, name:flashId},
  18.                                function(){document.getElementById(flashId).style.visibility = 'visible';});
  19.         });
  20.     </script>
  21.     <style>
  22.         html, body {overflow:hidden; margin:0}
  23.         #fl {visibility:hidden}
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="fl">
  28.         <!-- Если нет Flash Player'а нужной версии -->
  29.         <p align="center">Для просмотра приложения необходимо скачать новую версию <a href="http://get.adobe.com/ru/flashplayer/" target="_blank">Adobe Flash Player</a></p>
  30.     </div>
  31. </body>
  32. </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, но если попытаться, к примеру, вызвать:


...то наше приложение будет выглядеть так:

Изображение

Криво, да?
Все дело в том, что при изменении размеров приложения изменяются не только размеры флешки, но и размеры IFrame-контейнера, причем не всегда корректно.
В нашем случае изменять размеры нужно так:

  1. VK.additionalWidth = 160;
  2. VK.additionalHeight = 120 + 120;
  3. VK.callMethod('resizeWindow', 600, 780);

После чего мы получаем:

Изображение

В классе CustomEvent, унаследованном от класса Event, определено свойство params, которое возвращает ссылку на массив с параметрами события.


Перейдем к инициализации приложения:

Пример кода инициализации приложения:

Теперь все действия будут производиться с объектом VK.

Кстати, еще есть класс APIConnectionDebug, унаследованный от APIConnection, который, как вы поняли, используется при тестировании:
  1. var VK:APIConnection = new APIConnectionDebug({api_id:12345, viewer_id:54321, secret:'secret', sid:'sid'});

Но все равно при публикации приложения я настоятельно рекомендую использовать класс APIConnection вместо APIConnectionDebug, а сам APIConnectionDebug использовать только при тестировании приложения.


Заключение

Что ж, все готово к использованию, юзайте на здоровье :D :D :D
В заключение хотел бы попросить тех, кому не лень, написать в комментариях плюсы и минусы использования "IFrame-фантика".
Ну и, конечно же, держите исходник, куда ж без него? :)
gpv123

 
Автор темы
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57
Благодарил (а): 17 раз.
Поблагодарили: 73 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



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

Сообщение sanych_dv » 03 июл 2012, 02:37

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

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

Сообщение sanych_dv » 03 июл 2012, 02:50

HTML:

  1.  
  2. <script src="http://vk.com/js/api/xd_connection.js?2" type="text/javascript"></script>
  3. <script src="swfobject.js" type="text/javascript"></script>
  4.  
  5. <script type="text/javascript">
  6. var query = window.location.search.substring (1);
  7. 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'});
  8. </script>
  9.  
  10. ...
  11.  


AS3:

  1.  
  2. ...
  3.     import vk.*;
  4.     import vk.events.*;
  5. ...
  6.  
  7.                 var flashVars:Object = stage.loaderInfo.parameters as Object;
  8.             var VK:APIConnection = new APIConnection(flashVars);
  9.             VK.forceDirectApiAccess(true);
  10.  
  11. // и далее все как обычно.
  12.  
sanych_dv
Разработчик
Разработчик
 
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52
Благодарил (а): 1 раз.
Поблагодарили: 77 раз.

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

Сообщение gpv123 » 03 июл 2012, 09:47

sanych_dv писал(а):Стандартный VK.api отлично работает в таких роликах, зачем надо было писать свой класс ?

Изображение
Конечно отлично! Куда уж мне со своими тремя килобайтами против этого гиганта?
P.S.: а что, и аналог additionalWidth и additionalHeight у них есть?
gpv123

 
Автор темы
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57
Благодарил (а): 17 раз.
Поблагодарили: 73 раз.

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

Сообщение sanych_dv » 03 июл 2012, 11:18

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

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

А вообще вашего возраста очень хорошая работа.
sanych_dv
Разработчик
Разработчик
 
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52
Благодарил (а): 1 раз.
Поблагодарили: 77 раз.

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

Сообщение gpv123 » 03 июл 2012, 14:15

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

Вы не совсем правильно меня поняли.
Если Вы будете использовать дебаг:


...то скомпилируется все, что там есть, но я и не рекомендую использовать дебаг при публикации:

Изображение

sanych_dv писал(а):Кстати, что у вконтактовского, что у вашего package странное именование - обычно в именовании пакета используют реверсивный способ записи авторского домена, к примеру, com.greensock .

Я это знаю, но своего сайта у меня нет, так что решил написать свое имя :D

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

Насчет костылей: Если просто пихать флеш в IFrame, то ничего лишнего не нужно, но если рядом с флешем разместить новости, рекламу, кнопку "Мне нравится" или что-нибудь еще, да еще и есть необходимость часто изменять размеры приложения, то без костылей не обойтись) Так что additionalWidth и additionalHeight я не зря сделал :)

sanych_dv писал(а):А вообще вашего возраста очень хорошая работа.

Старался, спасибо :D :D :D
gpv123

 
Автор темы
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57
Благодарил (а): 17 раз.
Поблагодарили: 73 раз.

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

Сообщение sanych_dv » 03 июл 2012, 14:22

... А если не использовать дебаг, то куда вы дели JSON ? ) Кстати, он и весит больше всего, а а версии FP < 11 это актуально.
sanych_dv
Разработчик
Разработчик
 
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52
Благодарил (а): 1 раз.
Поблагодарили: 77 раз.

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

Сообщение gpv123 » 03 июл 2012, 14:25

sanych_dv писал(а):куда вы дели JSON ? )

он мне без дебага совсем не нужен)))
Я обращаюсь к API через IFrame (ExternalInterface)
gpv123

 
Автор темы
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57
Благодарил (а): 17 раз.
Поблагодарили: 73 раз.

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

Сообщение sanych_dv » 03 июл 2012, 14:31

А мне он всегда нужен, стало быть - ваш класс уже неуниверсален.
sanych_dv
Разработчик
Разработчик
 
Сообщения: 550
Зарегистрирован: 29 апр 2011, 01:52
Благодарил (а): 1 раз.
Поблагодарили: 77 раз.

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

Сообщение gpv123 » 03 июл 2012, 15:02

sanych_dv писал(а):А мне он всегда нужен, стало быть - ваш класс уже неуниверсален.

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

 
Автор темы
Сообщения: 346
Зарегистрирован: 29 янв 2012, 20:57
Благодарил (а): 17 раз.
Поблагодарили: 73 раз.

След.

Вернуться в Уроки по использованию ВКонтакте API



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0