1 урок

Предлагаем уроки как с использованием ActionScript 3.0 так и простые анимационные эффекты.

Источник: http://tutorials.flashmymind.com/2009/02/a…-3-drawing-api/

В этом уроке Вы научитесь с помощью 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);
}

Тестируем и видим, как перед нами возникает волна.

Урок окончен. Всем спасибо, все свободны. 🙂

Исходник: urok8.rar [34 Kb] (cкачиваний: 124)

Category: Actionscript  Tags:
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
4 Responses
  1. admin says:

    Да, пожайлуста. Здесь будут еще другие интересные уроки.

  2. Привет!

    Познавательно написано, а можно перепостить ваш пост в моем лунном блоге?

    Удачи!

  3. Скажите, а у вас есть RSS поток в этом блоге?

  4. Неплохой пост, очень интересно было почитать

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>