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

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

Get Adobe Flash player

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

В этом уроке я покажу вам как создать анимированный след мыши. Как обычно анимация сделана с помощью 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);
	}
}