Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Эффект следа




В этом уроке вы научитесь создавать эффект следа, показанного в мувике выше. Все это сделано средствами Actionscript 3.0. Этот эффект достаточно легко достичь и он очень легкий, чтобы модифицировать код для создания различных аналогичных эффектов. Давайте начнем создавать этот Flash CS3 мувик!

Настройка окружения

1. Создайте новый Flash Actionscript 3.0 документ размером 300x300.

2. Нарисуйте круг размером 30x30 (вы можете выбрать цвет по желанию).

3. Конвертируйте круг в муви клип (имя не имеет значения, точка регистрации в центре).

4. Дайте кругу инстанс имя= "ball".

5. Свяжите мувик-круг с классом по имени "Ball".

6. Оставьте круг на сцене (положение не имеет значения).

Идем в Actionscript 3.0

Напишите следующее в первом фрейме вашего мувика.


//Определим начальный угол
var angle:Number = 0;
//Определим скорость поворота
var speed:Number = 0.2;
//Определим радиус круга
var radius:Number = 50;

/*
Мы хотим, чтобы круг поворачивался вокруг центра сцены.
Мы объявляем переменные для координат центра, поэтому нам не нужно вычислять их
в каждом фрейме (это сохранит время процессора).
*/
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;

//Добавим ENTER_FRAME для круга, так мы можем анимировать его в каждом фрейме
ball.addEventListener (Event.ENTER_FRAME, moveBall);

//Мы используем этот таймер, чтобы создать след круга каждые 0.1 секунд
var timer:Timer = new Timer(100,400000);
timer.addEventListener (TimerEvent.TIMER, createTrailBall);
timer.start ();

//Эта функция отвечает за движение круга
function moveBall (e:Event):void {

//Вычисляем новые координаты  x и y
var xpos:Number = centerX + Math.cos(angle) * radius;
var ypos:Number = centerY + Math.sin(angle) * radius;

//Двигаем круг на новые координаты
ball.x = xpos;
ball.y = ypos;

//Увеличиваем угол
angle += speed;
}

function createTrailBall (e:Event):void {

//Создаем новый экземпляр круга
var trailBall:Ball=new Ball();

//Положение следа круга - то же самое положение, где расположен круг-оригинал
trailBall.x = ball.x;
trailBall.y = ball.y;

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

/*
Добавим след круга на сцену.
Мы не хотим, чтобы позиция следа круга была поверх круга-оригинала.
Мы используем addChildAt метод, чтобы установить index в 0.
*/
addChildAt (trailBall,0);
}

function animateTrailBall (e:Event):void {
//В каждом фрейме уменьшаем альфа и масштабируем след круга.
e.target.alpha -= 0.04;
e.target.scaleY -= 0.04;
e.target.scaleX -= 0.04;

/*
Если альфа меньше чем 0, мы удаляем след круга со сцены
*/
if (e.target.alpha < 0) {
 e.target.removeEventListener (Event.ENTER_FRAME,animateTrailBall);
 removeChild ((MovieClip)(e.target));
}
}


Код довольно простой. Комментарии достаточно информативны , чтобы вы знали, что мы делаем в каждом шаге. Как вы можете видеть, значения могут быть легко изменены, чтобы создать различные виды эффектов следа. Например, в следующем мувике, я только изменил таймер, чтобы создать след круга каждые 0.02 секунд.


var timer:Timer = new Timer(20,400000);




Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (1)

#1 написал: AR_YUREC | 29 января 2009 22:01
     

Ля круто smile
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.