|
|
|||||||||||||||||||||||||||||
|
Уроки Flash: Эффект смены изображений "Ластик"Источник: demiart MOHCTEP
Здесь я расскажу вам, как сделать симпатичную замену картинок, похожую на стирание ластиком. Скрипт генератора траектории перемещения маски вы сможете изучить в приложенном исходнике. 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" в наш код. Файлы для загрузки
|
|