Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Эффект стильной маски с размытием
DooDLeZДата: Воскресенье, 28.03.2010, 20:30 | Сообщение # 1

WebMaster
Сообщений: 485
[ ]
:-(
Cool Mask Effect with Blur

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

Настройка окружения

1. Загрузите картинку, к которой вы хотите применить эффект маскирования.

2. Создайте новый документ Flash Actionscript 3. Используйте размер сцены такой же, как размер картинки.

3. Импортируйте картинку в библиотеку (File -> Import -> Import to Library).

4. Вытащите картинку в центр сцены.

5. Конвертируйте картинку в муви клип, нажав F8. Назовите его "Blurred image".

Эффект стильной маски с размытием

6. Примените фильтр blur к мувику "Blurred image".

Эффект стильной маски с размытием

7. Создайте новый слой. В новом слое, вытащите картинку из библиотеки в центр сцены.

8. Конвертируйте картинку в муви клип, назовите его "Original image".

Эффект стильной маски с размытием

9. Дайте мувику "Original image" instance name - "origImage".

10. Нарисуйте прямоугольник (возьмите только цвет заливки), который будет выше, чем ваша картинка. Вы сами можете выбрать его ширину.Например, мой прямоугольник размером 60x333 (этот прямоугольник будет нашей маской). Неважно, в каком слое вы нарисуете прямоугольник.

11. Конвернтируйте прямоугольник в муви клип, названный "Rectangle Mask". Установите точку регистрации сверху в центре.

Эффект стильной маски с размытием

12. Удалите мувик "Rectangle Mask"со сцены.

13. Свяжите мувик "Rectangle Mask" с классом, названным "RectangleMask". Не волнуйтесь, когда появится сообщение - предупреждение.

Эффект стильной маски с размытием

Идем в Actionscript 3

14. Создайте новый слой для actionscript и напишите следующее.

CODE

//Прячем курсор мыши
Mouse.hide();

//maskContainer - контейнер всех масок
var maskContainer:Sprite = new Sprite();

//Устанавливаем maskContainer маской оригинала-картинки
origImage.mask = maskContainer;

//Создадим новую маску-прямоугольник
var recMask:RectangleMask = new RectangleMask();

//Добавим recMask в контейнер maskContainer
maskContainer.addChild(recMask);

//Добавляем контейнер maskContainer на сцену
addChild(maskContainer);

//Переменная ослабления, используемая в анимации
var easing:Number = 0.1;

//Создаем таймер, который вызывается каждые 0.2 секунды
var timer:Timer = new Timer(200, 0);
timer.addEventListener(TimerEvent.TIMER, timerEvent);
timer.start();

//Нам необходим ENTER_FRAME для анимации
addEventListener(Event.ENTER_FRAME, onEnterFrame);

//Эта функция вызывается в каждом кадре
function onEnterFrame(event:Event):void {
//Вычисляем скорость, с которой мы хотим двигать прямоугольник
var vx:Number = (mouseX - recMask.x) * easing;
//Присваиваем новое положение по x
recMask.x += vx;
}

//Эта функция вызывается каждые 0.2 секунды
function timerEvent(e:Event):void {
//Создаем новую маску-прямоугольник
var rc:RectangleMask = new RectangleMask();
//Присваиваем ей координаты нашей маски-оригинала
rc.x = recMask.x;
//Добавляем ее в контейнер
maskContainer.addChild(rc);
//ENTER_FRAME используется для анимации масштаба маски
rc.addEventListener(Event.ENTER_FRAME, scaleDown);
}

function scaleDown(e:Event):void {
//Получаем маску-прямоугольник
var rc:RectangleMask = (RectangleMask)(e.target);
//Уменьшаем масштаб
rc.scaleX -= 0.05;
//Если масштаб меньше 0, мы удаляем маску-прямоугольник
//со сцены
if(rc.scaleX < 0) {
rc.removeEventListener(Event.ENTER_FRAME, scaleDown);
maskContainer.removeChild(rc);
}
}


  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта