Уроки Flash: Ефект зміни зображень “Гумка”, Програми для роботи з графікою, Програмні керівництва, статті

Тут я розповім вам, як зробити симпатичну заміну картинок, схожу на стирання гумкою.
Для повного розуміння матеріалу, необхідне знання АС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” в наш код.
Можна тестувати фільм.
Спробуйте поміняти обриси курсорів, а також підібрати швидкість анімації і час затримки.
Зверніть увагу: картинки повинні бути однаковими по “габаритах”.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*