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

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();

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

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