Управляем 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
    Метки:
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 24
    • 0
      Особенностей загрузки flash-объекта на самом деле гораздо больше. Например, недавно столкнулся с тем, что в IE не работают ExternalInterface, если флеш был вставлен не во время прогрузки страницы, а позже (у меня была необходимость вставлять средствами AJAX)
      • 0
        Согласен, в IE при взаимодействии с Flash довольно cерьезные проблемы, кстати по-моему была и ситуация, как вы описали.
        • 0
          Приходилось иметь дело с js интерфейсом в который был интегрирован флеш. Крайне глючно и не стабильно. В конце концов решили от этого полностью отказаться.
          • +1
            Ну, «не работают» — это сильно сказано, просто есть особенности. То есть жизнь эти особенности усложняют, приходиться рыться в форумах, но никаких нерешаемых проблем нет.
            • 0
              Не подскажете, как решается проблема?
              • 0
                Скажите, Вы, таки, решили данную проблему?
              • –2
                >Особенности загрузки falsh-объекта
                исправьте, пожалуйста
              • +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(); первый раз играет а второй нет

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