31 мая 2009 в 21:21

Управляем Flash-объектом на Javascript

Управляем Flash-объектом на JavaScript

Возможности JavaScript в 95% случаев позволяют решить любую задачу для Web 2.0. Но иногда хочется чуточку больше, чуточку красивее, возможно, чуточку быстрее. В этой статье на примерах я хочу показать, как восполнить этих 5% недостающего функционала средствами Flash.
Эта статья будет полезна разработчикам, которые пишут в основном на JavaScript и имеют минимальные знания ActionScript 3.

Для вдохновения


Вдохновил меня на написание этой статьи пример из пакета FancyUpload, реализующий одновременную загрузку нескольких файлов на сервер с симпатичным прогресс-баром в стиле gmail (обратите внимание: можно сразу выбирать несколько файлов).

Этот пример интересен тем, что дизайн и управление контролируется средствами CSS и JavaScript. JavaScript при необходимости использует необходимый функционал из Flash.

Если Вам понравилось, идем дальше: мы рассмотрим как это работает на более простом примере.


Звуковое уведомление



Рассмотрим следующий пример:


При работе с нашей страницей может возникнуть очень важное событие. Настолько важное, что о нем нужно как-то уведомить, даже если пользователь находится в другом окне или другой программе. Один из вариантов – это подать звуковой сигнал. Возможное решение — нестандартный тег BGSOUND, но мы остановимся на Flash. Реализуем следующий функционал: в JavaScript-коде можно будет указать имя mp3-файла для проигрывания (назовем его рингтон), количество повторов для проигрываемого рингтона, уровень звучания в процентах, и, в расширенном варианте, уровень по нарастающей «от» и «до» и время в секундах, за которое уровень звучания должен нарастать.

Садимся за flash


Для того, чтоб из базового класса Flash-ролика “расшарить” любой из методов для доступа к нему, из JavaScript необходимо подключить ExternalInterface:

package
{
import flash.external.ExternalInterface;
...


а также описать метод для доступа директивой ExternalInterface.addCallback:
ExternalInterface.addCallback("setRingtone", setRingtone);


Я набросал базовый класс для нашего примера, функционал реализующий проигрывание рингтона вынес в отдельный класс com.ria.media.Ringtone, его реализация не особо важна для нашего примера.

Особенности загрузки flash-объекта


Есть еще одна деталь, которую нужно учитывать при проектировании Flash-ролика: Загрузка flash-объекта производится не моментально, то-есть, между моментом, когда средствами JavaScript flash-объект внедряется в код и моментом, когда стают доступными “расширенные” методы нашего объекта проходит некоторое время.

Однозначно установить факт доступности методов можно, выполнив заданную нами JavaScript-функцию, после всех директив ExternalInterface.addCallback. Это реализуется, например, директивой ExternalInterface.call

Если flash-ролик вставляется не средствами JavaScript, то возможна ситуация, когда flash подгрузился раньше, чем JavaScript-код и обращение к заданой нами функции приведет к ошибке. Как решается такая ситуация можно посмотреть здесь

Осталось немного работы на JavaScript


Заранее приношу свои извинения за неудобства, но я привык писать на MooTools и не хочу отступать от этой привычки. Загружать Flash-ролик я буду удобным плагином MooTools 1.2 Swiff, анлогичный модуль есть для jQuery, ну и универсальное решение SWFObject (про SWFObject на Хабре)

После подгрузки flash-объекта к его “расшареным” методам можно обратиться приблизительно таким образом на чистом JavaScript:
document.getElementById(‘myFlashObjectId’).myMethod(param1,...)
, на MooTools получится немного короче
$(‘myFlashObjectId’).myMethod(param1,...)


Собственно, вот и все, что может пригодиться при написании собственного JavaScript-кода.

Не забываем включить звук и смотрим, что получилось.

Исходный код примера можно посмотреть здесь. Код подсвечен Ria SourceTabs
Олег Черний @apelsyn
карма
179,1
рейтинг 0,0
Разработчик
Самое читаемое Разработка

Комментарии (24)

  • 0
    Особенностей загрузки flash-объекта на самом деле гораздо больше. Например, недавно столкнулся с тем, что в IE не работают ExternalInterface, если флеш был вставлен не во время прогрузки страницы, а позже (у меня была необходимость вставлять средствами AJAX)
    • 0
      Согласен, в IE при взаимодействии с Flash довольно cерьезные проблемы, кстати по-моему была и ситуация, как вы описали.
    • 0
      Приходилось иметь дело с js интерфейсом в который был интегрирован флеш. Крайне глючно и не стабильно. В конце концов решили от этого полностью отказаться.
    • +1
      Ну, «не работают» — это сильно сказано, просто есть особенности. То есть жизнь эти особенности усложняют, приходиться рыться в форумах, но никаких нерешаемых проблем нет.
    • 0
      Не подскажете, как решается проблема?
    • 0
      Скажите, Вы, таки, решили данную проблему?
  • –2
    >Особенности загрузки falsh-объекта
    исправьте, пожалуйста
    • +1
      Спасибо, поравил
  • +1
    Тут actualwave.com/blog/ есть серия статей на тему взаимодействия Flash и Javascript, автор блога также является автором библиотеки Jsinterface
    Библиотека JSInterface облегчает взаимодействие между Flash приложением и Javascript средой
  • 0
    Было бы интересно о самом механизме узнать, как это вообще из js к экспортированным методам flash (мне их так понятней называть) обращение происходит, как-то это туманно для меня лично
    • 0
      Если вы экспортировали из Actionscript метод setRingtone(), при этом id подгруженного flash-объекта 'MyFlashID', то обратиться к нему можно приблизительно так
      document.getElementById('MyFlashID').setRingtone()
      , если там нужно передавать параметры то так
      document.getElementById('MyFlashID').setRingtone(param1, param2,...)

      • 0
        статью я прочитал, мне интересно то как это внутри устроено
  • 0
    Интересно, где вы такого носорога нашли ))
  • 0
    В тему проигрывания mp3 файлов, используя JS. Возможно, кто-то не знает, что есть такая полезная штука как Sound Manager.
  • –1
    > Осталось немного роботы на Javascript
    Все мы немножко роботы? :)
    • +1
      Спасибо, уже поравил.
  • +1
    еще здесь здесь можно найти материал связи flash-js
  • 0
    я как то боговал по этому поводу. Если встраиваешь
    И вызываешь player.play(); первый раз играет а второй нет

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.