Стёрка во Flash

Октябрь 18, 2007

Для создания заставки к проекту потребовалось реализовать «стирание» мягкой кистью верхнего слоя и плавное проявление нижнего, чтобы автомобиль на иллюстрации ниже вновь обрёл первозданный вид. Данный эффект очень похож на работу инструмента Eraser Tool (стёрка) в графическом редакторе Adobe Photoshop. Постараемся создать его аналог.

Вот такой:

Тем, кто близко знаком с Flash, сразу станет ясно, что классическую маску для этих целей использовать не получится. Существуют решения подобной проблемы с помошью битмап-маски, но зачем лишний раз тратить ресурсы флеша и компьютера. Мы поступим проще — будем оперировать непосредственно прозрачностью картинки (далее — альфа-каналом).

Импортируем в пустой проект готовые иллюстрации для каждого слоя и зададим linkage идентификаторы «ImageFront» и «ImageBack», чтобы использовать их в программе. Создадим муви-клип — простой круг с радиальным градиентом и плавно убывающей прозрачностью, который будет являться нашей «стеркой». Аналогично зададим linkage «Brush».

Все приготовления сделаны, можно переходить к главному — программной части. Расположим её в первом фрейме проекта. Нам потребуются некоторые стандартные классы Flash, добавим их через import:

<code class="actionscript">
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.geom.Matrix;
</code>

Загрузим из библиотеки иллюстрацию верхнего слоя и дополнительный битмап с аналогичными размерами, который будем использовать в качестве «виртуального» альфа-канала.

<code class="actionscript">
var bFront:BitmapData = BitmapData.loadBitmap("ImageFront");
var bFrontAlpha:BitmapData = new BitmapData(bFront.width, bFront.height, true, 0xFF000000);
</code>

Расположим на сцене иллюстрацию нижнего слоя, иллюстрацию верхнего слоя (чуть выше), а также нашу «стерку» (еще выше). «Стерку» сразу сделаем невидимой.

<code class="actionscript">
this.attachBitmap( BitmapData.loadBitmap("ImageBack") ,1);
this.attachBitmap(bFront, 2);
this.attachMovie("Brush", "Brush", 3, {_visible:false} );
</code>

Подготовим объекты, которые будут использоваться в операции копирования.

<code class="actionscript">
var rect:Rectangle = new Rectangle(0, 0, bFront.width, bFront.height);
var point:Point = new Point();
var matrix:Matrix = new Matrix();
</code>

Теперь самое интересное — делаем дубликат альфа-канала иллюстрации верхнего слоя. Для этого просто копируем его в ранее подготовленный битмап, но в канал «красной» цветовой составляющей.

<code class="actionscript">
bFrontAlpha.copyChannel(bFront, rect, point, 8, 1);
</code>

На событие onEnterFrame подключим функцию, которая при нажатии левой клавиши мыши рисует муви-клип «Brush» в битмап, содержащий альфа-канал от иллюстрации верхнего слоя, как бы затирая его. Затем, эта функция подменяет реальный альфа-канал иллюстрации на новый с помощью простой операции копирования.

<code class="actionscript">
var MouseDown:Boolean = false
this.onMouseDown = function() { MouseDown = true }
this.onMouseUp = function() { MouseDown = false }
this.onEnterFrame = function () {
  if (MouseDown) {
    matrix.tx = this._xmouse
    matrix.ty = this._ymouse
    bFrontAlpha.draw(Brush, matrix);
    bFront.copyChannel(bFrontAlpha, rect, point, 1, 8);
  }
}
</code>

Основываясь на таком принципе можно оперировать цветовыми и альфа-каналами, не зная предела, ведь используя любой муви-клип в качестве кисти для рисования, все очень даже просто.

К статье прилагается данный пример в исходном виде.
(Около 700 килобайт)

Tags: флэш