В этом уроке я покажу вам как создать эффект маскирования , используя просто 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();
//Создадим новую маску-прямоугольник 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); } }
Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"!
Design bY PainKiller.Net.Ru