MooTools і Flash
Сьогодні ми поговоримо з вами про клас 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