В языке ActionScript анимацию объектов можно запрограммировать с помощью многократного вызова определённых блоков кода или функций.
Как организовать многократный вызов тех или иных фрагментов кода?
Для этого в ActionScript-е имеется несколько стандартных способов. Давайте рассмотрим их более подробно и с примерами.
Но сперва мы создадим заготовку визуального объекта, к которому будем применять программную анимацию. Таким объектом будет MovieClip с очень простым рисунком.
ActionScript 2.0:
this.createEmptyMovieClip("mc",0);
this.mc.beginFill(0x333333,100);
this.mc.moveTo(0,0);
this.mc.lineTo(150,-10);
this.mc.curveTo(180,0,150,10);
this.mc._x = 275;
this.mc._y = 200;
ActionScript 3.0:
import flash.display.MovieClip;
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x333333,1);
mc.graphics.moveTo(0,0);
mc.graphics.lineTo(150,-10);
mc.graphics.curveTo(180,0,150,10);
this.addChild(mc);
mc.x = 275;
mc.y = 200;
Выше, используя ActionScript 2.0 и ActionScript 3.0, мы нарисовали один и тот же простой рисунок (о методах программного рисования здесь не распространяюсь, так как об этом уже довольно подробно писал в постах «Динамическое рисование» и «Методы динамического рисования в ActionScript 3.0»):
А теперь давайте рассмотрим способы программной анимации, применяемые в AS 2.0/3.0:
1.) Язык ActionScript 2.0
а.) событие onEnterFrame
Событие onEnterFrame связано с плановым обновлением экрана ("смена кадров") и частота его возникновения зависит от частоты смены кадров, установленной в данном флеш-ролике.
Вот пример, в котором событие onEnterFrame используется для вращения созданного ранее мувиклипа...
ActionScript 2.0:
this.createEmptyMovieClip("mc",0);
this.mc.beginFill(0x333333,100);
this.mc.moveTo(0,0);
this.mc.lineTo(150,-10);
this.mc.curveTo(180,0,150,10);
this.mc._x = 275;
this.mc._y = 200;
onEnterFrame = function(){
this.mc._rotation += 1;
}
При частоте смены кадров 32 приведённый выше код даст следующую картинку:
б.) метод seInterval
Метод setInterval используется для периодического вызова какой-либо функции.
ActionScript 2.0:
createEmptyMovieClip("mc",0);
mc.beginFill(0x333333,100);
mc.moveTo(0,0);
mc.lineTo(150,-10);
mc.curveTo(180,0,150,10);
mc._x = 275;
mc._y = 200;
function anim(){
mc._rotation += 45;
}
setInterval(anim,500);
В данном примере мы каждые 500 миллисекунд вызываем функцию anim, которая поворачивает мувик mc на 45 градусов:
2.) Язык ActionScript 3.0
Оба способа, используемые для программной анимации в ActionScript 2.0, применяются и в языке ActionScript 3.0.
а.) событие onEnterFrame
ActionScript 3.0:
import flash.display.MovieClip;
import flash.events.Event;
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x333333,1);
mc.graphics.moveTo(0,0);
mc.graphics.lineTo(150,-10);
mc.graphics.curveTo(180,0,150,10);
this.addChild(mc);
mc.x = 275;
mc.y = 200;
addEventListener(Event.ENTER_FRAME, onEnterFrames);
function onEnterFrames(event:Event):void{
mc.rotation += 1;
}
Результат:
б.) метод seInterval
ActionScript 3.0:
import flash.display.MovieClip;
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x333333,1);
mc.graphics.moveTo(0,0);
mc.graphics.lineTo(150,-10);
mc.graphics.curveTo(180,0,150,10);
this.addChild(mc);
mc.x = 275;
mc.y = 200;
function anim(){
mc.rotation += 45;
}
setInterval(anim,500);
Результат:
Но в ActionScript 3.0 есть ещё один способ запрограммировать анимацию - это использование класса Timer. Класс Timer предназначен для выполнения кода AS 3.0 через установленные промежутки времени (промежутки времени задаются в миллисекундах). В самом простом случае Timer-анимация будет выглядеть следующим образом...
ActionScript 3.0:
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x333333,1);
mc.graphics.moveTo(0,0);
mc.graphics.lineTo(150,-10);
mc.graphics.curveTo(180,0,150,10);
this.addChild(mc);
mc.x = 275;
mc.y = 200;
/*
создаём объект Timer и в качестве параметра указываем периодичность вызова функции (в миллисекундах)
*/
var timer:Timer = new Timer(100);
/*
ловим событие TimerEvent.TIMER и при наступлении события запускаем функцию anim
*/
timer.addEventListener(TimerEvent.TIMER, anim);
/*
функция, периодически запускаемая таймером
*/
function anim(event:TimerEvent):void{
mc.rotation += 5;
}
/*
запускаем таймер
*/
timer.start();
Результат:
Выше приведён очень примитивный пример использование Timer-а. Дело в том, что у этого класса есть несколько чрезвычайно полезных свойств и методов, которые превращают Timer в мощнейший и удобнейший способ программной анимации. Впрочем, об этом в отдельном посте. А на сегодня у меня всё.