Продвинутая анимация с использованием прикладного программного интерфейса (API) рисования

Этот урок научит вас тому, как комбинировать основную анимацию с прикладным программным интерфейсом (API) рисования ActionScript 3.0.

Подготовка:
1. Создайте новый *.fla документ 300 х 300 пикселей.
2. Нарисуйте шарик диаметром 10 пикселей.
3. Конвертируйте шарик в МувиКлип с точкой регистрации в центре и задайте ему имя "Particle".
4. Удалите МувиКлип со сцены. Он останется у нас в библиотеке.
5. Прилинкуйте МувиКлип к классу "Particle".
6. Создайте класс (*.as файл) "Particle". Код класса следующий:

package
{
import flash.display.MovieClip;

public class Particle extends MovieClip
{
/*
Добавляем два свойства класса - скорость передвижения шарика по оси х и по оси у.
Эти свойства будут доступны из главной сцены, так как имеют атрибут public (публичный).
*/
public var speedX:Number = undefined;
public var speedY:Number = undefined;

//Пустой конструктор шарика.
public function Particle()
{

}
}
}

Подготовка завершена. Теперь приступим к анимационной части.

Пишем код:

7. Для начала давайте добавим шарики на сцену и добавим немного эффектов. В первом кадре TimeLine пишем код:

//Задаем количество шариков и массив, в котором шарики будут храниться.
var numberOfParticles:Number = 30;
var particlesArray:Array = new Array();

//Этот цикл создает 30 шариков и рандомно размещает их на сцене.
//Так же мы добавили несколько эффектов.
for (var i=0; i

Пока что всё. Вам это может показаться слишком сложным, но на самом деле это очень просто. Протестируйте ролик. У вас должно получиться что-то вроде того, что изображено ниже. Можете поиграть с параметрами фильтров.

Анимируем шарики:

8. Чтобы шарики начали рандомно перемещаться, напишите следующий код:

//Добавляем слушатель на событие смены кадров ролика.
addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//Эта функция вызывается каждый кадр и анимирует шарики.
function enterFrameHandler(e:Event):void
{

//Цикл проходит по всем созданным шарикам.
for (i=0; i stage.stageWidth)
{
particleOne.x = stage.stageWidth - particleOne.width / 2;
particleOne.speedX *= -1;
}
//Левая граница.
else if (particleOne.x stage.stageHeight)
{
particleOne.y = stage.stageHeight - particleOne.width / 2;
particleOne.speedY *= -1;
}
//Верхняя граница.
else if (particleOne.y

Протестируйте ролик. У вас должно получиться что-то типа этого:

1287943820_12.swf

Добавление линий в анимацию:

9. Чтобы добавить линии в анимацию, нам придется немного изменить функцию enterFrameHandler. Теперь код этой функции будет выглядеть вот так:

//Эта функция вызывается каждый кадр и анимирует шарики.
function enterFrameHandler(e:Event):void
{
//Очищаем предыдущие линии.
graphics.clear();

//Цикл проходит по всем созданным шарикам.
for (i=0; i stage.stageWidth)
{
particleOne.x = stage.stageWidth - particleOne.width / 2;
particleOne.speedX *= -1;
}
//Левая граница.
else if (particleOne.x stage.stageHeight)
{
particleOne.y = stage.stageHeight - particleOne.width / 2;
particleOne.speedY *= -1;
}
//Верхняя граница.
else if (particleOne.y

Теперь ниже допишем функцию drawLine():

//Эта функция рисует черные линии между шариками.
function drawLine (particleOne:Particle, particleTwo:Particle):void
{
graphics.lineStyle (1, 0x000000);
graphics.moveTo (particleOne.x, particleOne.y);
graphics.lineTo (particleTwo.x, particleTwo.y);
}

Вот и всё. Протестируйте ролик. :)