Возможности 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