Дата публикации: 20.04.2021

Mootools 1.2 Swiff и Flash | Старые записи сайта ajaxed.ru

8bd108ae

Автор: Administrator    03.12.2009 05:36

Все знают что такое 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 документации.

Автор: admin | 26.02.2008