Вращающийся след от курсора




Главная > Уроки > Анимация > Вращающийся след от курсора

Вращающийся след от курсора

Автор/переводчик статьи: Команда сайта flashmaster.org.ua

Дата: 2012-09-21

В этом уроке я покажу вам как создать анимированный след мыши. Как обычно анимация сделана с помощью ActionScript 3. Вы можете легко внести изменения в код, что бы менять скорость, размеры, формы и т.д. Запускайте ваш Flash и давайте приступим

Подготовка
1. Создаем новый документ 300 х 300

2. Нарисуйте квадрат 10х10. Цвет не имеет значения, т.к. мы поменяем его с помощью кода.


3. Переконвертируйте квадрат в MovieClip. Назовите его myRectangle и установите точку регистрации по центру.
4. В поле Class напишите “MyRectangle”.

ПРИМЕЧАНИЕ: Когда вы нажмете ОК, появится окошко с предупреждением. Не волнуйтесь, Флеш предупреждает, что не может найти класс с таким именем. Это неважно, ы еще не создали этот класс. Когда мы будем тестировать ролик, Флеш создаст этот класс

5. Удаляем квадрат со сцены

Приступим к написанию кода.

Создайте новый слой и в его первом кадре напишите следующее

//Запускаем таймер. Таймер вызывает функцию timerHandler каждые 0.2 секунды.
var timer:Timer = new Timer(200, 0);
timer.addEventListener (TimerEvent.TIMER, timerHandler);
timer.start ();

//Находим центр сцены
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;

//Описываем функцию, вызываемую таймером
function timerHandler (e:Event):void {

//Создаем новый квадрат
var newRectangle:MyRectangle = new MyRectangle();

//Устанавливаем для квадрата координаты равные координатам мыши
newRectangle.x = mouseX;
newRectangle.y = mouseY;

//Высчитываем положение квадрата по х и у от центра сцены
var dx:Number = newRectangle.x - centerX;
var dy:Number = newRectangle.y - centerY;

//Высчитываем расстояние от квадрата до центра сцены с помощью теоремы Пифагора
newRectangle.radius = Math.sqrt(dx*dx + dy*dy);

//Высчитываем угол квадрата относительно центра сцеы
newRectangle.myAngle = Math.atan2(dy, dx);

//Устанавливаем скорость поворота
newRectangle.speed = 0.06;

//Сначала квадрат должен быть прозрачный
newRectangle.alpha = 0;

//Устанавливаем случайные размеры квадрата
newRectangle.scaleX = Math.random() + 1.5;
newRectangle.scaleY = newRectangle.scaleX;

//Получаем доступ к смене цвета квадрата с помощью ColorTransform
var colorInfo:ColorTransform = newRectangle.transform.colorTransform;

// Устанавливаем случайный цветобъекта ColorTransform
colorInfo.color = 0xffffff * Math.random();

//Даем получившийся цвет квадрату
newRectangle.transform.colorTransform = colorInfo;

//Добавляем квадрат на сцену
addChild (newRectangle);
//Добавляем функцию ENTER_FRAME для анимации вращения
newRectangle.addEventListener (Event.ENTER_FRAME, moveRectangle);
}

//Эта функция вращает квадраты
function moveRectangle (e:Event):void {

//Берем квадрат как цель действий
var rectangle:MovieClip = e.target as MovieClip;

//Высчитываем новые х и у позиции для квадрата
var newX:Number = centerX + Math.cos(rectangle.myAngle) * rectangle.radius;
var newY:Number = centerY + Math.sin(rectangle.myAngle) * rectangle.radius;

//Увеличиваем угол в следующем кадре
rectangle.myAngle += rectangle.speed;

//Задаем новую позицию
rectangle.x = newX;
rectangle.y = newY;

//Уменьшаем радиус, то бы получить спиральную анимацию
rectangle.radius -= 0.6;

//Уменьшаем размер
rectangle.scaleX -= rectangle.radius * 0.0001;
rectangle.scaleY -= rectangle.radius * 0.0001;
//Увеличиваем непрозрачность, если она меньше 1 и радиус больше 50
if (rectangle.alpha < 1 && rectangle.radius > 50) {
rectangle.alpha += 0.05;
}
//Увеличиваем прозрачность если радиус меньше 50
if (rectangle.radius < 50) {
rectangle.alpha -= 0.005;
}

//Если радиус меньше 0 удаляем квадрат
if (rectangle.radius < 0) {
rectangle.removeEventListener (Event.ENTER_FRAME, moveRectangle);
removeChild (rectangle);
}
}

Просмотров: 1825


Понравился материал? Поделись с друзьями!





Подписаться на рассылку.

При перепечатки материалов ссылка на наш сайт обязательна!


 1