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

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

Get 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