Как создавать свои Flash-игры, подобные Angry Birds и World of Goo?
Box2D - это библиотека, которая моделирует физическое поведение твердых тел в двумерном пространстве. Программисты могут использовать ее в своих играх, чтобы сделать...
В этом уроке, показывается как Вы можете создать простой текстовый эффект когда курсор мыши расположен над текстом, используя 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); } }
Это всё, протестируйте ролик)
Комментарии
Ой, а на AS 2 мона такое сделать ? (((
Keyboard not found. Press any key to continue
Можно, но зачем? Когда технологии идут вперёд - надо развиваться вместе с ними, а не оставаться в каменном веке :) АС2 - это уже практически каменный век :)))
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте -
#3 Опубликовано 17 марта, 2009 - 23:41 пользователем Aloran
#4 Опубликовано 16 мая, 2009 - 12:23 пользователем rahimazeri
#5 Опубликовано 2 июня, 2009 - 10:04 пользователем denleo
#6 Опубликовано 20 июня, 2009 - 14:53 пользователем ARMAgeddoN
#7 Опубликовано 4 октября, 2009 - 22:54 пользователем Dernier Sourire
#8 Опубликовано 18 марта, 2010 - 17:37 пользователем B1oZ
#9 Опубликовано 29 апреля, 2010 - 15:21 пользователем animeshka
#10 Опубликовано 26 июня, 2010 - 18:42 пользователем javarra
У меня такой вопрос откуда взялись переменные:
rectangle.xspeed =
rectangle.yspeed =
rectangle.alphaSpeed =
rectangle.scaleSpeed =
их разве не надо объявлять?
буду делать..
Классная вещь, заменил надпись на имя любимой и вместо квадратиков мувик сделал сердечки, и убрал смену цвета, получилось супер.....спасибо!
Сделал =)
Спасибо за урок, очень красивый эффект.
Надеюсь пригодится.
Гениально:) А можно добавить звук при наведении мыши на текст?
Aloran,
"У меня такой вопрос откуда взялись переменные:
rectangle.xspeed =
rectangle.yspeed =
rectangle.alphaSpeed =
rectangle.scaleSpeed =
их разве не надо объявлять?"
Тот же самый вопрос... Использовал в своём проекте - не работает.
P.S. Классный сайт! Я хоть научился делать что-то на ас3, а то сижу у ящика, балбесничаю)))
Обалдеть... Да, насчет звука актуальный вопрос!
Здравствуйте. Подскажите пожалуйста в чем я могла допустить ошибку?
Я выполнила все шаги и вроде бы ничего не пропустила, но при проверке получившиегося ролика у меня появляется вкладка "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". Но в чем моя ошибк я так и не поняла.