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

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

Get 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

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

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

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);
}

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

Исходник: 

Впервые!

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

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

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

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

Комментарии

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

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

good