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

apelsyn 31 мая 2009 в 21:21 9,3k
Управляем 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
Проголосовать:
+49
Сохранить: