Random Boxes Text Effect with Actionscript 3

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

В этом уроке, показывается как Вы можете создать простой текстовый эффект когда курсор мыши расположен над текстом, используя Actionscript 3.

Итак, начнём!

1. Создаём новый документ Flash размера 250x250.

2. Далее создайте статическую текстовую область и введите необходимый текст (в этом уроке - "easyflash.org"). Спозиционируйте текст в центре рабочего поля.

3. Преобразуйте текстовую область в мувиклип (нажмите F8). В поле Name введите "My Text" и устанавите точку регистрации в верхнем левом углу. И нажмите OK. Теперь Ваш мувиклип должен выглядеть так:

4. Дайте мувиклипу имя "myText" в настройках в поле instance name.

5. Теперь нарисуйте на сцене квадрат размером 10x10. Используйте рамку например 2 пикселя.

6. Преобразуйте квадрат в мувиклип (F8). В поле Name введите ”My Rectangle” и устанавите точку регистрации в центре и нажмите OK

удалите квадрат с рабочего поля, т.к. мы его будем вставлять с помощью кода.

7. Выберите в библиотеке этот квадрат и нажмите правой кнопкой и выберите Properties. Далее установите галочку напротив Export For ActionScript и в поле Class введите "MyRectangle". Потом нажмите OK.

8. Создайте новый слой для кода и назовите его Actions.

вот код:

//Мы используем таймер, чтобы создавать прямоугольники когда мышь - над текстом.
//Этот таймер посылает событие каждые 0.02 секунды.
var timer:Timer = new Timer(20,0);
timer.addEventListener (TimerEvent.TIMER, createRectangle);
//Мы хотим узнать где мышь - над текстом или нет.
var mouseOverText:Boolean = false;
//Сделаем текст похожим на кнопку (появляется курсор руки)
myText.buttonMode = true;
//Слушаем событие наведения когда мышь над текстом
myText.addEventListener (MouseEvent.MOUSE_OVER, mouseOverHandler);
//Слушаем когда мышь убирается с текста
myText.addEventListener (MouseEvent.MOUSE_OUT, mouseOutHandler);
//Эта функция вызывается когда мышь - над текстом
function mouseOverHandler (e:Event):void
{
//Запускаем таймер
timer.start ();
}
//Эта функция вызывается когда мышь убирается с текста
function mouseOutHandler (e:Event):void
{
//Сбрасываем таймер на 0
timer.reset ();
}
//Эта функция вызывается каждые 0.02 секунд когда таймер работает
function createRectangle (e:Event):void
{
//Создаём новый квадрат
var rectangle:MyRectangle = new MyRectangle();
//Назначаем произвольную x позицию квадрату
rectangle.x = myText.x + Math.random() * myText.width;
//Назначаем y позицию квадрату
rectangle.y = myText.y + myText.height / 2;
//Назначаем произвольные размеры квадрату
rectangle.scaleX = rectangle.scaleY = Math.random() * 2;
//Назначаем произвольную скорость по x и по y для квадрата
rectangle.xspeed = Math.random() * 10 - 5;
rectangle.yspeed = Math.random() * 10 - 5;
//Назначаем произвольную скорость прозрачности(как быстро квадрат исчезает)
rectangle.alphaSpeed = -(Math.random() * 0.1);
//Назначаем произвольную масштабную скорость
rectangle.scaleSpeed = Math.random() * 0.05;
//Назначаем произвольный цвет для прямоугольника
var colorInfo:ColorTransform = rectangle.transform.colorTransform;
colorInfo.color = 0xffffff * Math.random();
rectangle.transform.colorTransform = colorInfo;
//Мы не хотим слушать события мыши из квадрата
rectangle.mouseEnabled = false;
//Добавляем слушатель ENTER_FRAME для квадрата
rectangle.addEventListener (Event.ENTER_FRAME, animate);
//Добавляем прямоугольник в список отображения. на уровень 0
//чтобы квадраты всегда были за текстом
addChildAt (rectangle,0);
}
//Эта функция вызывается в каждом кадре
function animate (e:Event):void
{
//Сохраните квадрат в локальную переменную
var rectangle:MyRectangle = (MyRectangle)(e.target);
//обновим его позицию
rectangle.x += rectangle.xspeed;
rectangle.y+=rectangle.yspeed;
//Обновим его прозрачность
rectangle.alpha+=rectangle.alphaSpeed;
//Обновим его масштаб
rectangle.scaleX+=rectangle.scaleSpeed;
rectangle.scaleY+=rectangle.scaleSpeed;
//Назначим случайный поворот квадрату
rectangle.rotation=Math.random()*256;
if (rectangle.alpha<0)
{
rectangle.removeEventListener (Event.ENTER_FRAME, animate);
removeChild (rectangle);
}
}

Это всё, протестируйте ролик)

Похожие записи

Комментарии

Аватар пользователя TeT

Ой, а на AS 2 мона такое сделать ? (((

Keyboard not found. Press any key to continue

Аватар пользователя Fly

Можно, но зачем? Когда технологии идут вперёд - надо развиваться вместе с ними, а не оставаться в каменном веке :) АС2 - это уже практически каменный век :)))

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте -

Аватар пользователя Aloran

У меня такой вопрос откуда взялись переменные:
rectangle.xspeed =
rectangle.yspeed =
rectangle.alphaSpeed =
rectangle.scaleSpeed =

их разве не надо объявлять?

Аватар пользователя rahimazeri

буду делать..

Аватар пользователя denleo

Классная вещь, заменил надпись на имя любимой и вместо квадратиков мувик сделал сердечки, и убрал смену цвета, получилось супер.....спасибо!

yahoo

Аватар пользователя ARMAgeddoN

Сделал =)
Спасибо за урок, очень красивый эффект.
Надеюсь пригодится.

Аватар пользователя Dernier Sourire

Гениально:) А можно добавить звук при наведении мыши на текст?

Аватар пользователя B1oZ

Aloran,
"У меня такой вопрос откуда взялись переменные:
rectangle.xspeed =
rectangle.yspeed =
rectangle.alphaSpeed =
rectangle.scaleSpeed =

их разве не надо объявлять?"
Тот же самый вопрос... Использовал в своём проекте - не работает.
P.S. Классный сайт! Я хоть научился делать что-то на ас3, а то сижу у ящика, балбесничаю)))

Аватар пользователя animeshka

Обалдеть... Да, насчет звука актуальный вопрос! 

Аватар пользователя javarra

Здравствуйте. Подскажите пожалуйста в чем я могла допустить ошибку?
Я выполнила все шаги и вроде бы ничего не пропустила, но при проверке получившиегося ролика у меня появляется вкладка "Compilr errors" в который следующий тексn:
"Scene 1, Layer 'Layer 2', Frame 1, Line 12    1120: Access of undefined property myText.
Scene 1, Layer 'Layer 2', Frame 1, Line 10    1120: Access of undefined property myText.
Scene 1, Layer 'Layer 2', Frame 1, Line 8    1120: Access of undefined property myText.
Scene 1, Layer 'Layer 2', Frame 1, Line 33    1120: Access of undefined property myText.
Scene 1, Layer 'Layer 2', Frame 1, Line 33    1120: Access of undefined property myText.
Scene 1, Layer 'Layer 2', Frame 1, Line 31    1120: Access of undefined property myText.
Scene 1, Layer 'Layer 2', Frame 1, Line 31    1120: Access of undefined property myText."
А так же появляется окно ролика просто с черным фоном без текста. Я посмотрела строки которые указываются и пришла к выводу что дело в тексте "myText". Но в чем моя ошибк я так и не поняла.