Все знают что такое MooTools ?
Это JavaScript framework.
Очень необычный. И сегодня мы поговорим о Swiff, который позволяет
комбинировать Flash и JavaScript для того чтобы делать потрясающие
вещи, которые не может сам Mootools например.
Что такое Swiff ?
В старых версиях Swiff был отдельным проектом
http://digitarald.de/project/fancyupload/ а теперь это официальная
часть Mootools 1.2.
Swiff позволяет соединять Flash (.swf) файлы и JavaScript. Благодаря
чему появляется масса интересных возможностей.
Вдвоем лучше
Пока вы корячитесь и пытаетесь вставить в документ QuickTime,
взгляните на Flash видео, весь процесс управления роликом можно
реализовать из JavaScript и MooTools.
Это конечно не самый крутой пример использования управления объектами.
Используя Swiff вы можете использовать абсолютное все возможности
Flash, включая видео, музыку, поточные данные, доступ к буферу обмена
и многое другое.
Как все устроено ?
Первую вещь которую мы хотим сделать создавая Swiff скрипт - создать
пустой Flash файл. Разместим лишь немного коду для примера. Надо будет
написать ActionScript который сможет взаимодействовать с Swiff.
Самый простой файл может выглядеть примерно так:
//(ActionScript)
import flash.external.*;
function echoText(text) {
ExternalInterface.call('alert', "Это сообщение из Flash: "+text);
}
//Садимся на 'onLoad' событие Swiff объекта.
ExternalInterface.call(onLoad);
Когда вы закончите писать ActionScript, сделайте swf файл. Теперь вы
готовы загрузить swf файл с помощью Swiff:
//(JavaScript)
var obj = new Swiff('mySwf.swf', {
width: 1,
height: 1,
container: $('swiffContainer'),
events: {
onLoad: function() {
alert("Флеш загружжен!")
}
}
});
В этом примере, когда swf файл загрузился, мы увидим окно с "Флеш загружжен!"
Заметьте, хотя в данном примере видимость объекта не нужна, но размер
установлен в 1х1 пикселей. Если объект невидим или размеры 0х0, то
воможно будут проблемы.
Все это зачепись, но как же нам вызвать написанную нами функцию в
Flash ?
Вызов Flash функции из JavaScript
Основная причина загрузки swf файла - вызов ActionScript функции в
нем.Что бы такое провернуть мы можем использовать Swiff.remote метод:
Swiff.remote(obj, 'echoText', 'Превед Flash, встречай Swiff.');
Тем не менее, если мы запустим это сразу же после вызова new Swiff,
эта строка может и не сработать т.к. нужно проверить загружен ли DOM.
Получается что нужно дождаться как загрузки Flash так и загрузки
самого документа.
Итак, порядок вызова метода в swf файле, мы положим код в функцию
flashIsLoaded примерно так:
//(JavaScript)
var obj = new Swiff('mySwf.swf', {
//[...]
events: {
onLoad: function() {
Swiff.remote(obj, 'echoText', 'Превед Flash, встречай Swiff.');
}
}
});
Теперь пусть Flash ждет нас.
Конечно же все сразу у вас не заработает.. и причина в том что Flash
тоже должен дождаться DOM, чтобы нормально работать, мы можем легко
это сделать вызвав ExternalInterface:
//(ActionScript)
ExternalInterface.addCallback("echoText", this, echoText);
Вот теперь мы можем попробовать вызвать Swiff.remote снова, и вместо
ошибок мы увидим сообщение. Примерно такое: "Это сообщение из Flash:
Превед Flash, встречай Swiff."
Передать переменные в Flash
Как быть если ваша голова вдруг захотела передать данные из JavaScript
в Flash ActionScript ? Мы конечно можем пойти и отредактировать скрипт
ActionScript и руками прописать эту переменную, но если это необходимо
сделать динамически ? Тогда придется чесать лоб.. но удача повернулась
к вам лицом и передать переменную в swf теперь очень легко. Нам
необходимо лишь добавить добавить свойство 'vars' в наш Swiff,
содержащий объект в котором и будут перечислена все наши переменные,
которые мы хотим передать:
//(JavaScript)
var obj = new Swiff('mySwf.swf', {
//[...]
vars: {luckyColor: 'blue'}
});
Довайте добавим getLuckyColor событие в наш ActionScript:
//(ActionScript)
function getLuckyColor() {
return luckyColor;
}
ExternalInterface.addCallback("getLuckyColor", this, getLuckyColor);
Теперь давайте изменим наше onLoad событие:
var obj = new Swiff('mySwf.swf', {
//[...]
events: {
onLoad: function() {
alert("Ваш lucky color это: "+this.getLuckyColor());
}
}
});
Заметьте, мы использовали this.getLuckyColor вместо Swiff.remote(obj,
'getLuckyColor'). Мы просто использовали альтернативный синтаксис для
вызова Flash метода.
Swiff.remote альтернатива
Swiff.remote - не единственный способ доступа к swf файлу. Вы можете
использовать Swiff объект напрямую, так:
obj.echoText("Превед Flash. мы работаем не через Swiff.remote!");
Оба варианта работают. Вы можете выбрать тот который вам по душе.
Вот и все ребята
Эта статья конечно раскрывает только самые основы, а это значит что
самое интересное впереди и вам будет чему поучиться.А лучший путь для
понимания и изучения Swiff - это скачать последнюю копию MooTools 1.2
beta и поиграться в нем. Удачи в ActionScript документации.