Сьогодні ми поговоримо з вами про клас Swiff, який дозволяє комбінувати Flash та JavaScript там, де  не можна обійтися виключно функціоналом MooTools.

Що таке Swiff?

В MooTools 1.2 було представлено новий об’єкт Swiff, який дозволяє взаємодіяти swf-файлам з js-кодом сторінки.

Перша річ, яку вам потрібно зробити, при реалізації Swiff-сценарію, — створити Flash-файл. Основний файл ActionScript виглядатиме якось так:

// ActionScript, файл "mySwf.swf"

import flash.external.*;

function echoText(text) {

    ExternalInterface.call('alert', "This message is from Flash: " + text);

}

// Fires the 'onLoad' event within the Swiff object.
ExternalInterface.call(onLoad);

А js-код буде такий:

// JavaScript-файл

var obj = new Swiff('mySwf.swf', {

    width: 1,

    height: 1,

    container: $('swiffContainer'),

    events: {

        onLoad: function() {

            alert("Flash is loaded!")

        }

    }

});

Тобто, коли flash-файл повністю завантажиться, ви дізнаєтесь про це, отримавши повідомлення “Flash is loaded!”.

Викликаємо Flash функції з JavaScript

Головна причина використання Flash — це потреба в зверненні до ActionScript функцій в межах скрипта. Щоб зробити це, ви можете використовувати метод Swiff.remote, так:

Swiff.remote(obj, 'echoText', 'Hello Flash, meet Swiff.');

Відсилання змінних до SWF файлу

На щастя, передавати змінні до 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("Your lucky color is " + this.getLuckyColor());
        }
    }
});

Go Have Fun!

Ця стаття, звичайно, лише демонструє основи роботи з Swiff. Найкращий шлях освоїти клас Swiff — спробувати його самому. Отож завантажуйте MooTools версії 1.2 і вперед!

Детальніше читайте на:

• http://mootools.net/blog/2008/02/12/whats-new-in-12-swiff/ — What’s New in 1.2: Swiff
• http://mootools.net/docs/Utilities/Swiff — MooTools документація по Swiff