Cоздаем эффект вибрации/дрожи/тряски объекта

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

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

Здравствуйте, с вами Виталий Токарев.

На моем сайте, в логотипе, есть что-то вроде совета или рекомендации, который меняется каждые 5 секунд. Простая замена содержимого поля выглядит не красиво и вот я решил добавить какой нибудь эффект. Решил добавить эффект дрожи при изменении содержимого текстового поля, в этом уроке я покажу как сделать это.

1. Создадим проект AS3

2. Добавим на сцену динамическое текстовое поле и назовем его "vibratto_txt" (без кавычек)

3. Отцентруем, выберем любой шрифт(я выбрал DS Moster, его можно скачать), я еще наложу на текстовое поле фильтр.

Если у вас флеш от 5 версии, то не забываем импортировать шрифт.

4. Напишем код

Ну для начала создадим класс и прицепим его нажмем f9 и перейдем в редактор кода текущего кадра.

Идея эффекта заключается в том, что мы 20 раз подряд случайно двигаем текст при замене, а 24 раза в секунду возвращаем его на место. Двигать текстовое поле 20 раз подряд мы будем с помощью класса Timer, возвращать на место будем с помощью события Event.ENTER_FRAME.

Импортируем необходимые нам классы, пишем:

import flash.utils.setTimeout;
import flash.utils.Timer;
import flash.geom.Point;
import flash.events.Event;

Объявим переменные:

var text_variants:Array = ['1 вариант текста','2 вариант текста','3 вариант текста','4 вариант текста'];
//варианты значений текстового поля
var tf_position:Point;
//Point содержит в себе координаты чего-либо(текстового поля), полезно, т.к. нет необходимости создавать две переменные
var now_index:Number = -1;
//последний индекс в массиве вариантов, нужен для защиты от повторения значения
var effect_power:Number = 1;
//насколько сильно объект будет "улетать" от своей текущей позиции
var update_delay:Number = 4;
//время задержки перед следующим обновлением значения текстового поля в секундах

Запускаем возвращение на место, выводим случайный текст в текстовое поле, запоминаем координату текстового поля:

initStage();
function initStage():void
{//инициализирует сцену
 
	tf_position = new Point(vibratto_txt.x,vibratto_txt.y);
	//запоминаем текущие координаты
	stage.addEventListener(Event.ENTER_FRAME, updateTfPosition);
	//24 раза в секунду возвращаем текстовое поле на место
	updateTfValue();
	//запускаем цикл обновлений и заодно обновляем значение
}

Функция возвращения объекта на место:

function updateTfPosition(e:Event):void
{//Эта функция возвращает текстовое поле на место
 
	vibratto_txt.x = tf_position.x;
	//присваем координату из памяти по х
	vibratto_txt.y = tf_position.y;
	//присваем координату из памяти по y
}

Теперь напишем функцию обновления значения текстового поля:

function updateTfValue():void
{//Эта функция обновляет содержимое текстового поля
 
	var timer:Timer = new Timer(20,21);
	//создаем таймер длительностью 20 милисекунд, повторить 21 раз
	/*
	   таймер через каждые 20 милисекунд будет трясти текстовое поле
	   после 21 повторения эффекта тряски он перестанет работать
	*/
	timer.addEventListener(TimerEvent.TIMER, shakeTf);
	//каждый раз(пока идет повторение) вызываем эффект дрожи
 
	var random_index:Number = Math.floor(Math.random() * text_variants.length);
	//выбираем случайную ячейку массива
	if (random_index != now_index)
	{//если это не та ячейка, что была в прошлый раз, то запускаем таймер
 
		timer.start();
		//запускаем таймер
		setTimeout(updateTfValue, update_delay * 1000);
		//запускаем таймер, по истечении которого эта функция вызовется еще раз(изменится значение текстового поля)
		vibratto_txt.text = text_variants[random_index];
		//указываем текстовому полю значение той ячейки, что сгенерировали
		now_index = random_index;
		//запоминаем текущую ячейку
	}
	else
	{//если та ячейка, что была в прошлый раз, то повторяем генерацию случайной ячейки еще раз
 
		updateTfValue();
	}
}

И, наконец, напишем функцию случайного перемещения объекта:

function shakeTf(e:Event):void
{//Эта функция отвечает за анимацию дрожи
 
	var rand:Number = Math.random();
	//генерируем число от 0 до 1
	if (rand >= 0.5)
	{//если число больше 0.5, то перемещаем вправо и вниз
 
		vibratto_txt.x +=  Math.random() * effect_power;//на расстояние от 0 до 1 пиксела
		vibratto_txt.y +=  Math.random() * effect_power;
	}
	else
	{//если нет, то вверх и влево
 
		vibratto_txt.x -=  Math.random() * effect_power;
		vibratto_txt.y -=  Math.random() * effect_power;
	}
}

Вот и все! :)

P.S.
Урок упрощенный, можно еще добавить контроль за тем за фокусом вкладки пользователем и обойтись без Enter_Frame. Можно каждый второй вызов функции эффекта дрожи сделать возвратом на место.

На правах рекламы:
Провожу уроки по ActionScript 3 и PHP.

Связь:
ICQ - 3034081шесть
Skype - tokvolodymyr

Исходник: 

Впервые!

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

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

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

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