Random Boxes Text Effect with Actionscript 3
В этом уроке, показывается как Вы можете создать простой текстовый эффект когда курсор мыши расположен над текстом, используя 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.
9. Создайте новый слой для кода и назовите его 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); } }
Это всё протестируйте ролик)
Вот исходник:
Перевод: SarGun
Оригинал: тут
Регистрация: 8.02.2009
Публикаций: 10
Комментариев: 61
--------------------
Keyboard not found. Press any key to continue