Этот урок научит вас тому, как комбинировать основную анимацию с прикладным программным интерфейсом (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 < numberOfParticles; i++)
{
var particle:Particle = new Particle();
//Задаем шарикам рандомные скорости по х и у.
//Math.random возвращает рандомное число n, где 0 <= n < 1.
particle.speedX = 2 + Math.random();
particle.speedY = 2 + Math.random();
//Задаем начальные координаты.
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Зададим рандомный оттенок для шариков, в результате они будут разного цвета.
var ct:Color = new Color();
ct.setTint(0xFFFFFF * Math.random(), 0.5);
particle.transform.colorTransform = ct;
//Зададим рандомный размер шариков.
particle.scaleX = 0.5 + Math.random();
particle.scaleY = particle.scaleX;
//Этот массив будет содержать все используемые фильтры.
var particleFilters:Array = new Array();
//Создадим различный blur-эффект (размытие) для шариков.
var tempBlurAmount = Math.random() * 4;
var blur:BlurFilter = new BlurFilter(tempBlurAmount,tempBlurAmount,1);
particleFilters.push(blur);
//Создадим различный glow-эффект (свечение).;
var color:Number = 0x000000;
var alphaValue:Number = 0.5;
var blurX:Number = 20;
var blurY:Number = 20;
var strength:Number = 5;
var glow:GlowFilter = new GlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push(glow);
//Назначим созданные фильтры шарикам (blur и glow);
particle.filters = particleFilters;
//Добавим шарики в список отображения сцены и в массив.
addChild(particle);
particlesArray.push(particle);
}
Пока что всё. Вам это может показаться слишком сложным, но на самом деле это очень просто. Протестируйте ролик. У вас должно получиться что-то вроде того, что изображено ниже. Можете поиграть с параметрами фильтров.
Анимируем шарики:
8. Чтобы шарики начали рандомно перемещаться, напишите следующий код:
//Добавляем слушатель на событие смены кадров ролика.
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
//Эта функция вызывается каждый кадр и анимирует шарики.
function enterFrameHandler(e:Event):void
{
//Цикл проходит по всем созданным шарикам.
for (i=0; i < particlesArray.length; i++)
{
//Помещаем текущий шарик в локальную переменную.
var particleOne:Particle = particlesArray[i];
//Перемещаем шарик в новые координаты.
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Проверяем столкновение с границами.
//Если шарик сталкивается с границей, то его скорость должна быть умножена на -1 для смены направления движения.
//Правая граница.
if (particleOne.x > stage.stageWidth)
{
particleOne.x = stage.stageWidth - particleOne.width / 2;
particleOne.speedX *= -1;
}
//Левая граница.
else if (particleOne.x < 0)
{
particleOne.x = particleOne.width / 2;
particleOne.speedX *= -1;
}
//Нижняя граница.
if (particleOne.y > stage.stageHeight)
{
particleOne.y = stage.stageHeight - particleOne.width / 2;
particleOne.speedY *= -1;
}
//Верхняя граница.
else if (particleOne.y < 0)
{
particleOne.y = particleOne.width / 2;
particleOne.speedY *= -1;
}
}
}
Протестируйте ролик. У вас должно получиться что-то типа этого:
1287943820_12.swf
Добавление линий в анимацию:
9. Чтобы добавить линии в анимацию, нам придется немного изменить функцию enterFrameHandler. Теперь код этой функции будет выглядеть вот так:
//Эта функция вызывается каждый кадр и анимирует шарики.
function enterFrameHandler(e:Event):void
{
//Очищаем предыдущие линии.
graphics.clear();
//Цикл проходит по всем созданным шарикам.
for (i=0; i < particlesArray.length; i++)
{
//Помещаем текущий шарик в локальную переменную.
var particleOne:Particle = particlesArray[i];
//Перемещаем шарик в новые координаты.
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Проверяем столкновение с границами.
//Если шарик сталкивается с границей, то его скорость должна быть умножена на -1 для смены направления движения.
//Правая граница.
if (particleOne.x > stage.stageWidth)
{
particleOne.x = stage.stageWidth - particleOne.width / 2;
particleOne.speedX *= -1;
}
//Левая граница.
else if (particleOne.x < 0)
{
particleOne.x = particleOne.width / 2;
particleOne.speedX *= -1;
}
//Нижняя граница.
if (particleOne.y > stage.stageHeight)
{
particleOne.y = stage.stageHeight - particleOne.width / 2;
particleOne.speedY *= -1;
}
//Верхняя граница.
else if (particleOne.y < 0)
{
particleOne.y = particleOne.width / 2;
particleOne.speedY *= -1;
}
//Пройдем циклом по оставшимся шарикам, чтобы вычислить дистанцию между ними.
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
//Используем теорему Пифагора (a^2 + b^2 = c^2),
//чтобы вычислить дистанцию между двумя шариками.
var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
//Если дистанция меньше 80 пикселей, то рисуем линию между шариками.
if (distance < 80) {
drawLine (particleOne, particleTwo);
}
}
}
}
Теперь ниже допишем функцию drawLine():
//Эта функция рисует черные линии между шариками.
function drawLine (particleOne:Particle, particleTwo:Particle):void
{
graphics.lineStyle (1, 0x000000);
graphics.moveTo (particleOne.x, particleOne.y);
graphics.lineTo (particleTwo.x, particleTwo.y);
}
Вот и всё. Протестируйте ролик. :)
Комментарии
Прикольный эффект!!!