Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Эффект лупы




1. Создайте новый документ (размер должен быть таким же, как размер картинки, которую вы используете).

2. Импортируйте вашу картинку на сцену.

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

4. Дайте мувику инстанс имя = "backgroundImage".

5. Сдублируйте мувик (backgroundImage), дайте дубликату имя "maskedImage".

6. Создайте новый слой, назовите его "masked image"

7. Перетащите maskedImage в новый слой. Дайте ему инстанс имя "maskedImage". Удостоверьтесь, что maskedImage расположен точно сверху backgroundImage.

8. Теперь спрячьте слой "masked image" .

alt

9. Установите размытие (Blur) для backgroundImage в 10.

alt

10. Вы можете сейчас снова посмотреть на слой maskedImage. Скоро мы перейдем в actionscript, но перед этим, давайте создадим реальную лупу.

11. Создайте новый слой, назовите его "mask circle" и нарисуйте круг размером, который вы желаете. Я выбрал радиус 50px.

12. Конвертируйте круг в муви клип "maskCircle"(точка регистрации в центре). Дайте ему инстанс имя="maskCircle".

13. Теперь пойдем в actionscript. Создайте слой actions и напишите следующее.

//Здесь устанавливается маска на картинку.
maskedImage.mask = maskCircle;

//Давайте спрячем мышь
Mouse.hide();

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//В каждом фрейме мы хотим двигать круг на место мыши
function enterFrameHandler(e:Event):void {
maskCircle.x = mouseX;
maskCircle.y = mouseY;
}


Теперь протестируйте ваш мувик. Вы должны иметь такой эффект как на картинке выше. Помните, вы можете сделать все типы масок, не только эффект увеличения. Например, вы можете сделать фон полностью черным так, как я сделал в мувике ниже. Поиграйте с этим и создайте что-нибудь новое!





Кликните по мувику , чтобы посмотреть, что случится. Чтобы создать эффект как этот, напишите следующее.

stage.addEventListener(MouseEvent.CLICK, clickHandler);

//Если пользователь кликает мышью, расширяем маску так, чтобы она показала целое изображение
function clickHandler(e:Event):void {
//Удалим старый enterFrameHandler
removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
//Добавим другой слушатель ENTER_FRAME
addEventListener(Event.ENTER_FRAME, scaleMask);
//Покажем мышь
Mouse.show();
}

//В каждом фрейме увеличиваем масштаб круга
function scaleMask(e:Event):void {
maskCircle.scaleX += 0.2;
maskCircle.scaleY += 0.2;
}


Финальный код.

//Здесь устанавливается маска на картинку.
maskedImage.mask = maskCircle;

//Давайте спрячем мышь
Mouse.hide();

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//В каждом фрейме мы хотим двигать круг на место мыши
function enterFrameHandler(e:Event):void {
maskCircle.x = mouseX;
maskCircle.y = mouseY;
}
stage.addEventListener(MouseEvent.CLICK, clickHandler);

//Если пользователь кликает мышью, расширьте маску так, чтобы она показала целое изображение
function clickHandler(e:Event):void {
//Удалим старый enterFrameHandler
removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
//Добавим другой слушатель ENTER_FRAME
addEventListener(Event.ENTER_FRAME, scaleMask);
//Покажем мышь
Mouse.show();
}

//В каждом фрейме увеличиваем масштаб круга
function scaleMask(e:Event):void {
maskCircle.scaleX += 0.2;
maskCircle.scaleY += 0.2;
}


Перевод: kedicik


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.