Уроки Flash: Эффект смены изображений "Ластик"

Источник: demiart
MOHCTEP

Здесь я расскажу вам, как сделать симпатичную замену картинок, похожую на стирание ластиком.

Для полного понимания материала, необходимо знание АС2. Платформа - Flash и плейер 8 или младше.

Так выглядит готовая работа.

В этом уроке я покажу вам способ маскировки с использованием каналов битмапдаты.

Скрипт генератора траектории перемещения маски вы сможете изучить в приложенном исходнике.

Итак начнем.
Создайте новый проект и, любым образом, загрузите картинки. У меня они импортированы в библиотеку и каждой присвоен линкнейм, в виде порядкового номера ("0", "1", "2", и т.д.).
Вы можете, также, загрузить их извне в массив битмапдат, например, использовав класс MovieClipLoader().
Скопируйте в библиотеку клип "cursor" из программы-генератора и дайте ему линкейдж - "cursor". Имейте ввиду: эти клипы, в обоих приложениях, должны быть одинаковы.
Теперь осталось только очистить сцену, вызвать панель "Actions-Frame" ([F9]) и ввести следующий код:

CODE

//***********  Предстартовая инициализация  ***************
import flash.display.*;
import flash.geom.*;
//Патчим необходимые классы
var total_img:Number = 6;
//Общее кол-во картинок в слайдшоу
var current_img:Number = 0;
//Указатель на текущее изображение
var xarr:Array = [];
var yarr:Array = [];
//Массивы с координатами квантов траектории. Сюда вставим значения, полученные из генератора
var arr_length:Number;
//размер координатного массива
var index:Number = 0;
// счетчик ячеек массива
var id:Number;
//таймер
var current_bd:BitmapData;
// Битмап с текущей (заменяемой) картинкой
var temp_bd:BitmapData;
//Битмап со следующей (замещающей) картинкой
var mask_bd:BitmapData;
//Битмап маски
var play_speed:Number = 20;
//Скорость анимации  **** меняем ****
var show_delay:Number = 3000;
// Задержка между анимациями для просмотра картинок  **** меняем ****
var con:MovieClip = this.createEmptyMovieClip('container', this.getNextHighestDepth());
//Клип-контейнер
var mask:MovieClip = con.createEmptyMovieClip('mask', 3);
//Клип-контейнер маски
var cursor:MovieClip = mask.attachMovie('cursor', 'curs', mask.getNextHighestDepth());
//Клип-маска. Его анимируем
/*******************************************************************/
/*Стартовая процедура. Загружаем оба битмапа и один из них показываем.
Создаем битмап -маску, а клип-маску прячем.
Ставим контейнер с картинкой на место.
Запомним размер координатного массива и запускаем слайдшоу.*/
function init() {
reDraw();
mask_bd = new BitmapData(current_bd.width, current_bd.height, true, 0);
mask._visible = false;
con._x = 20;
con._y = 35;
arr_length = xarr.length;
start_show();
}
/*Процедура перезапуска анимации. Вызывается, как вначале, так и по окончании анимации, после перемены картинок в битмапах.
Сбросим таймер и счетчик ячеек.
Запуск таймера анимации.*/
function start_show() {
clearInterval(id);
index = 0;
id = setInterval(_show, play_speed);
}
/*Анимация.Вызывается по таймеру. Прикаждом вызове происходит следующее:
Маску переставляем по координатам, взятых из координатных массивов, по текущему индексу.
Контейнер маски копируем в битмап маски. Поскольку битмап мы не обновляем, то в нем остается
и снимок прежнего положения маски.
В текущий битмап копируем битмап с новой картинкой, а в качестве альфа канала используем битмап-маску.
Прибавляем счетчик.
Сравниваем значение счетчика с длиной массива, коль они сравнялись - считаем анимацию законченной.
В таком случае убьем таймер
Дорисуем картинку. Это необходимо, если анимация закончилась с "дырками". И, заодно, подготовимся
к следующему "витку" слайдшоу.
Выдержим паузу, для просмотра картинки и вновь запустим анимацию следующего изображения.*/
function _show() {
cursor._x = xarr[index];
cursor._y = yarr[index];
mask_bd.draw(mask);
current_bd.copyPixels(temp_bd, temp_bd.rectangle, new Point(0, 0), mask_bd, new Point(0, 0), true);
index++;
if (index>=arr_length) {
 clearInterval(id);
 reDraw();
 id = setInterval(start_play, show_delay);
}
}
//Эта процедура здесь не используется. Но, она необходима для экстренной остановки анимации.
function stop_show() {
clearInterval(id);
arr_length && (index<arr_length) ? reDraw() : null;
}
/*Здесь обновляем все битмапы.
В видимом битмапе обновляем текущую картинку.
указатель картинок инкременируем и гоним по кольцу.
В невидимый битмап - грузим следующую картинку
Очищаем битмап-маску
Показываем текущий битмап*/
function reDraw() {
current_bd = BitmapData.loadBitmap(current_img.toString());
current_img++;
current_img %= total_img;
temp_bd = BitmapData.loadBitmap(current_img.toString());
mask_bd.fillRect(mask_bd.rectangle, 0);
con.attachBitmap(current_bd, 0);
}
/*************************************************************/
//ЗАПУСК!!!
init();

Запустите файл генератора траектории. Нажмите кнопку и, перетаскивая шейп, "сотрите" картинку. Еще раз нажмите кнопку и перенесите снимки массивов из окна "Output" в наш код.
Можно тестировать фильм.
Попробуйте поменять очертания курсоров, а также подобрать скорость анимации и время задержки.
Обратите внимание: картинки должны быть одинаковыми по "габаритам".


Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=16123