Как создавать свои Flash-игры, подобные Angry Birds и World of Goo?
Box2D - это библиотека, которая моделирует физическое поведение твердых тел в двумерном пространстве. Программисты могут использовать...
В этом уроке Вы научитесь с помощью ActionScript 3.0 создавать анимацию рисования линии, окружности и волны.
Начнем с кода для анимации рисования простой линии. Создаем новый *.fla документ и в первом кадре пишем следующий
Код:
var xspeed:Number = 2;
var yspeed:Number = -2;
//Координаты покадрового рисования.
var xpos:Number = 0;
var ypos:Number = stage.stageHeight;
//Задаем стиль линии: толщина 2 пикселя, цвет "красный".
graphics.lineStyle(2, 0xff0000);
//Задаем начальную позицию рисования.;
graphics.moveTo(0, stage.stageHeight);
//Назначаем слушатель на событие смены кадра.;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
//Эта функция выполняется каждый кадр и рисует линию.
function onEnterFrame(event:Event):void
{
//Задаем координаты следующей точки.
xpos += xspeed;
ypos += yspeed;
//Рисуем линию до следующей точки.
graphics.lineTo(xpos, ypos);
}
Протестируем наш ролик. Мы сразу же видим, что перед нами рисуется линия.
По такому же принципу создадим анимацию рисования окружности. Сотрём предыдущий код для анимации линии и напишем код
Для анимации окружности:
var speed:Number = 0.05;
//Радиус окружности.
var radius:Number = 50;
//Угол покадрового рисования в радианах.
var angle:Number = 0;
//Координаты покадрового рисования.
var xpos:Number;
var ypos:Number;
//Координаты центра окружности.
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
//Задаем стиль линии: толщина 2 пикселя, цвет "красный".
graphics.lineStyle(2, 0xff0000);
//Задаем начальную позицию рисования.;
graphics.moveTo(centerX + radius, centerY);
//Назначаем слушатель на событие смены кадра.;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
//Эта функция выполняется каждый кадр и рисует окружность.
function onEnterFrame(event:Event):void
{
//Задаем координаты следующей точки.
xpos = centerX + Math.cos(angle) * radius;
ypos = centerY + Math.sin(angle) * radius;
//Задаем угол в следующем кадре.
angle += speed;
//Рисуем окружность до следующей точки.
graphics.lineTo(xpos,ypos);
}
Протестируем ролик. Мы видим что теперь перед нами рисуется окружность.
Теперь заанимируем рисование волны. Сотрём предыдущий код и напишем следующий:
var speedX:Number = 1;
//Скорость анимации по оси у.
var speedAngle:Number = 0.1;
//Амплитуда волны.
var range:Number = 100;
//Математический угол.
var angle:Number = 0;
//Координаты покадрового рисования.
var xpos:Number = 0;
var ypos:Number = 0;
//Координата начальной точки волны по оси у.
var centerY:Number = stage.stageHeight / 2;
//Задаем стиль линии: толщина 2 пикселя, цвет "красный".
graphics.lineStyle(2, 0xff0000);
//Задаем начальную позицию рисования.;
graphics.moveTo(0, centerY);
//Назначаем слушатель на событие смены кадра.;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
//Эта функция выполняется каждый кадр и рисует окружность.
function onEnterFrame(event:Event):void
{
//Задаем координаты следующей точки.
xpos += speedX;
ypos = centerY + Math.sin(angle) * range;
//Задаем угол в следующем кадре.
angle += speedAngle;
//Рисуем окружность до следующей точки.
graphics.lineTo(xpos,ypos);
}
Тестируем и видим, как перед нами возникает волна.
Урок окончен. Всем спасибо, все свободны. :)
Впервые!
Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень
С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!
Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов