Flash эффект «за курсором мыши»


В этом flash урокепосмотрим, как очень просто заставить мувик (Movie Clip) двигаться за курсором мыши. Flash эффект движения за курсором мыши очень просто изменить и придать любой вид двигающемуся за курсором объекту Movie Clip.

Примечание: Для этого урока понадобиться библиотека TweenMax.

Как это выглядит

[SWF]http://mainview.ru/wp-content/uploads/flash/Flash-movie-clip-follower.swf,600,400[/SWF]

Создание документа

1. Создаём новый Flash ActionScript 3документ.
2. Установим размеры документа 400х300 пикселей и темп 30 fps.

Создание фона.

3. Выбираем инструмент rectangleи создаём прямоугольник размером 400×300 пикселей без обводки. Выровним его по центру сцены по горизонтали и по вертикали.

4. Добавим радиальную заливку нашему прямоугольнику (цвет слева: #00CCFF, цвет справа: #000000)

Новый слой для клипа под курсором

5. Создаём новый слой и назовём его “follower”.

Создание клипа

6. В созданном слое “follower” рисуем белый круг без обводки. Размер круга 25×25 пикселей. Конвертируем созданный круг в movie clipсо следующими настройками:

7. Созданному клипу назначим имя “follower”.

Создание скрипта ActionScript 3

8. После того как мы всё подготовили в сцене, нам осталось только добавить скрипт, который заставит двигаться мувик за курсором мыши.

Создадим новый слой и назовём его “actions” и в нём добавим скрипт:

//Импортируем библиотеку TweenMax
import com.greensock.*;

//Будем следить за движениями мыши
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoves);

//Эта функция вызывается когда мышь начинает двигаться
function mouseMoves(e:Event):void {

	//Перемещаем клип в координаты мыши
	TweenMax.to(follower, 0.5 ,{x :mouseX, y: mouseY});
}

Здесь мы просто слушаем движения мыши, и когда она начинает двигаться, мы двигаем мувик в координаты текущего положения мыши. Мы используем библиотеку TweenMax, чтобы сделать движения более плавными и красивыми. Чтобы добавить некоторую размытость, будем использовать следующий код:.

// Вызываем функцию присвоения различных свойств мувику
up();

//Эта функция добавляет размытость и изменяет масштаб
function up():void {

	//Tween размытия
	TweenMax.to(follower, 0.5, {blurFilter:{blurX:15, blurY:15}});

	//Tween масштабирования и вызов функции down() после завершения
	TweenMax.to(follower, 0.5, {scaleX: 1.5, scaleY:1.5, onComplete: down});
}

//Эта функция удаляет размытость и масштабирование
function down():void {

	//Tween размытия
	TweenMax.to(follower, 0.5, {blurFilter:{blurX:10, blurY:10}});

	//Tween масштабирования и вызов функции up() после завершения
	TweenMax.to(follower, 0.5, {scaleX: 0.5, scaleY:0.5, onComplete: up});

}

Как легко увидеть, вся анимация совершается функциями down() и up(). Мы просто используем последовательность этих функций. На этом наш flash эффектготов.

Скачать исходник.

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Добавить коментарий

двадцать + 14 =