Если вы пользовались движком jQuery, то, скорее всего, среди прочих доступных там эффектов вам особо запомнился именно эффект Explode. Ну, а если кто не в курсе, то посмотрите прямо сейчас на сайте jqueryui.com. Эффект действительно красивый.
Мне давно хотелось перенести такой эффект и в ActionScript. Но сперва я решил проверить, не сделано ли это уже кем-то другим. Проверил. И оказался прав. В сети можно найти несколько реализаций эффекта Explode на ActionScript 3.0. Одну из реализаций я и рассмотрю в этом посте.
Речь о классе ExplodeDisolve от человека под ником iasseo (больше информации я о нём не нашёл). Суть работы его класса сводится к следующему: берётся DisplayObjectContainer (например, Sprite), превращается в Bitmap, который делится на несколько частей, а эти части разлетаются в случайном направлении. Надеюсь, понятно объяснил:-)
Сам класс (он, кстати, прилагается к исходнику, а ссылка на исходник, как и всегда, в конце данного поста) разбирать не будем, а посмотрим, как мы его можем применить в своих проектах.
Для начала давайте научимся применять эффект к объектам типа Sprite и MovieClip.
Код ActionScript 3.0:
/*
импортируем класс
*/
import ExplodeDisolve;
/*
создаём спрайт, к которому мы затем применим эффект
*/
var sprite:Sprite = new Sprite ;
sprite.graphics.beginFill(0x333333,1);
sprite.graphics.drawRect(0,0,200,200);
sprite.graphics.endFill();
addChild(sprite);
sprite.x = 175;
sprite.y = 100;
/*
делаем кнопку
*/
btn.addEventListener(MouseEvent.MOUSE_UP,onmouseup);
function onmouseup(event:MouseEvent):void
{
/*
создаём экземпляр класса ExplodeDisolve и помещаем его в список отображения
*/
var explode:ExplodeDisolve = new ExplodeDisolve(sprite);
addChild(explode);
/*
удаляем из списка отображения ранее созданный нами спрайт
*/
removeChild(sprite);
/*
делаем кнопку неактивной, иначе из-за удалённого спрайта дальнейшие клики по кнопке будут вызывать ошибки
*/
btn.mouseEnabled = false;
}
Как видите, ничего сложного. Прошу заметить, что сам эффект занимает всего пару строчек, а именно:
Код ActionScript 3.0:
var explode:ExplodeDisolve = new ExplodeDisolve(sprite);
addChild(explode);
Здесь в качестве первого параметра конструктору объектов мы передаём тот объект, к которому хотим применить эффект ExplodeDisolve. Но есть и второй необязательный параметр. Второй параметр определяет размер "кусков", на которые будет разбит наш спрайт (по умолчанию - 15).
Результат будет следующим:
Думаю вы со мной согласитесь, если я скажу, что такой эффект очень красиво смотрелся бы при работе с изображениями. Но вот тут-то и возникает небольшая загвоздочка. Дело в том, что напрямую применить данный эффект к Bitmap нельзя. Можно создать контейнер-DisplayObjectContainer и поместить туда наш Bitmap, а эффект применить к контейнеру. Итак, код...
Код ActionScript 3.0:
/*
импортируем класс
*/
import ExplodeDisolve;
/*
создаём контейнер, в который поместим нашу картинку
*/
var sprite:MovieClip = new MovieClip();
addChild(sprite);
sprite.x = 175;
sprite.y = 100;
/*
создаём саму картинку
*/
var myimage:MyImage = new MyImage();
var bitmap:Bitmap = new Bitmap(myimage);
sprite.addChild(bitmap);
/*
кнопка
*/
btn.addEventListener(MouseEvent.MOUSE_UP,onmouseup);
function onmouseup(event:MouseEvent):void
{
var explode:ExplodeDisolve = new ExplodeDisolve(sprite,100);
addChild(explode);
removeChild(sprite);
btn.mouseEnabled = false;
}
Обратите внимание, что на этот раз я использовал и второй параметр со значение 100. Посмотрите что получилось...
Кстати, если второй параметр уменьшить, например, до 1, то получится что-то вроде эффекта взрыва пикселов. Правда, производительность у такого эффекта ужасная. Судите сами:
Ну, как вам производительность? :-)
Вообще, надо заметить, что автор класса склонен называть его скорее "черновиком", чем законченным проектом. Конечно, стоит его доработать, усовершенствовать. Но, по крайней мере, начало положено и вам уже есть от чего "плясать".
Исходник под Adobe Flash CS5.5 и класс ExplodeDisolve скачать можно здесь.