Динамическая тень

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Информация
Автор/переводчик: 
TeT
Описание: 

Добрый день! Похожий эффект встречается в главном меню игры “Populous “. Как только я его увидел, мне сразу же стало любопытно, как он будет выглядеть на флеш. Но в то время мои скудные познания AS3 не позволяли его сделать. И вот, наконец-то, хочу предложить свой способ создания эффекта «Динамическая тень». Так же хочу заметить, что это мой первый урок по программированию.

Давайте приступим.

Подготовка.

1) Для начала надо придумать объект, который будет отбрасывать тень. В моих уроках обычно это текст «easyflash.org». Этот текст переконвертирован в MovieClip. Instance name это клипа – “text_mc” . (Без кавычек ) Так же, к этому клипу добавлен Фильтр Bevel. Но это уже по вкусу.

2) Еще надо создать саму тень. Это можно сделать несколькими способами. Я просто продублировал символ в библиотеке и изменил в нем цвет текста на темно-серый. После этого добавьте клип из библиотеки на сцену в любое место. Лучше создать новый слой с тенью и расположить его под слоем с текстом. Это нужно для того, что бы тень не была над текстом. К этому клипу я добавил легкое размытие (Фильтр Blur) для большей реалистичности. Instance name – “shadow_mc”

3) Для красоты можно добавить в ролик источник света. В моем варианте это что-то похожее на зажигалку. Но я сильно не заморачивался над этим. Instance name – “light”.

Теперь давайте приступим к написанию кода.

Для того, что бы все заработало достаточно написать следующий код:

Mouse.hide();//прячем курсор
var a:Number;//катет
var b:Number;//катет
var c:Number;// гипотенуза
var lightPower:Number=5;//сила света
var lightArea:Number=30;//территория света
stage.addEventListener(MouseEvent.MOUSE_MOVE, shadowMove);
 
function shadowMove(e:MouseEvent):void {
                light.x=mouseX; //устанавливаем координату Х источника света равной Х координате мыщи
                light.y=mouseY;//тот же процесс, только с координатой Y
                // $$$ Находим координаты тени, противоположные коордиатам мыщи, относительно text_mc
                shadow_mc.y = text_mc.y-(mouseY-text_mc.y)/lightPower;
                shadow_mc.x = text_mc.x-(mouseX-text_mc.x)/lightPower;
                //$$$
//Геометричесие расчеты
                b=text_mc.x-mouseX;//Находим кактет b
                a=text_mc.y-mouseY;//Находим какте a
                c= Math.sqrt((A*A)+(B*B));//Находим гипотенузу c
                shadow_mc.alpha =(lightArea/C);//Устанавливаем прозрачность тени, в зависимости от положения мыши
//Обновляем после каждого движения мыши
                e.updateAfterEvent();
}

Для простоты понимания я добавил комментарии к каждой строчке кода и разделил его на логические части двойным абзацем. Сейчас я попытаюсь объяснить каждую из них.

Mouse.hide(); //прячем курсор

Эта строчка прячет курсор. Это нужно для того, что бы заменить стандартный курсор на наш.

var a:Number; //катет
var b:Number; //катет
var c:Number; // гипотенуза

Эти переменные понадобятся для геометрических расчетов. О них мы поговорим позже.

var lightPower:Number=5; //сила света
var lightArea:Number=30; //территория света

С помощью этих переменных изменяется положение и прозрачность тени.

Переменная lightPower отвечает за положение тени относительно текста. Правильней будет сказать, что она участвует в расчете положения тени вместе с другими данными.

Переменная lightArea определяет территория на которой распространяется свет. Она участвует в расчете прозрачности тени.

stage.addEventListener(MouseEvent.MOUSE_MOVE, shadowMove);

Добавляем слушатель событий к сцене. Событие будет движение мыши. Как только мышь двигается выполняется функция shadowMove.

function shadowMove(e:MouseEvent):void {}

Описываем функцию shadowMove.

light.x=mouseX; //устанавливаем координату Х источника света равной Х координате мыщи
light.y=mouseY;//тот же процесс, только с координатой Y

Делаем так, что бы источник света имел координаты равные координатам мыши.

  // $$$ Находим координаты тени, противоположные координатам мыши, относительно text_mc
shadow_mc.y = text_mc.y-(mouseY-text_mc.y)/lightPower;
shadow_mc.x = text_mc.x-(mouseX-text_mc.x)/lightPower;
 //$$$

Эти строчки высчитывают положение тени в зависимости от положения мыши относительно текста. Другими словами, тень находится на таком же расстоянии от текста как и мышь, но с противоположно стороны. Сейчас попробую объяснить как это работает на примере нахождения координаты Y.

Вся сложность заключается в том, что символ находится не вначале системы координат.

Но судя по этой формуле, если мышь находится далеко от клипа, то и тень находится далеко от клипа. Это выглядит не очень реалистично. Что бы это исправить, нужно уменьшить прямую b. Вот для этого и нужна переменная lightPower. В данном случае вместо объявления переменной можно было просто написать число. Но если вам нужно будет программно изменить это число, то придётся переписывать всю формулу.

b=text_mc.x-mouseX;//Находим кактет b
a=text_mc.y-mouseY;//Находим какте a
c= Math.sqrt((a*a)+(b*b));//Находим гипотенузу c
shadow_mc.alpha =(lightArea/c);//Устанавливаем прозрачность тени, в зависимости от положения мыши

Эти строчки выполняют геометрические расчеты. Давайте разберем откуда тут взялись катеты и гипотенуза.

Зная положение символа и положение мыши можно нарисовать прямоугольный треугольник. С помощью этого треугольника, можно определить расстояние от центра символа до курсора используя теорему Пифагора.

shadow_mc.alpha =(lightArea/c);

Этой строкой мы высчитываем прозрачность тени в процентах. Чем дальше курсор от символа, тем больше прозрачность тени.

e.updateAfterEvent();

Эта строчка придает плавность движению тени и источника света.

Вот вроде бы и все. Надеюсь все было понятно.

Исходник: 

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Комментарии

Аватар пользователя TeT

Прошу прощения. В картинке с треугольником я сделал ошибку надо так b = B.x-A.x

Keyboard not found. Press any key to continue