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

Content on this page requires a newer version of Adobe Flash Player.

Этот урок научит вас тому, как комбинировать основную анимацию с прикладным программным интерфейсом (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);
}

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

Исходник: 

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Похожие записи

Комментарии

Аватар пользователя samana

Прикольный эффект!!!

good