(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Уроки 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" в наш код.
Можно тестировать фильм.
Попробуйте поменять очертания курсоров, а также подобрать скорость анимации и время задержки.
Обратите внимание: картинки должны быть одинаковыми по "габаритам".

Файлы для загрузки


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 17.03.2008 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
IBM DOMINO ENTERPRISE CLIENT ACCESS LICENSE AUTHORIZED USER LICENSE + SW SUBSCRIPTION & SUPPORT 12 MONTHS
Inventory 9
IBM DOMINO COLLABORATION EXPRESS AUTHORIZED USER LICENSE + SW SUBSCRIPTION & SUPPORT 12 MONTHS
Allround Automation Direct Oracle Access Standard license
Quest Software. TOAD for SQL Server Xpert Edition
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
Мир OLAP и Business Intelligence: новости, статьи, обзоры
Adobe Photoshop: алхимия дизайна
3D и виртуальная реальность. Все о Macromedia Flash MX.
Краткие описания программ и ссылки на них
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100