Анимация объектов

Анимация — это процесс приведения объектов в движение или изменение объектов с течением времени. Анимация на основе сценариев является основополагающей частью видеоигр. Она часто применяется при добавлении удобных и полезных меток интерактивности в другие приложения.

В основе анимации на основе сценариев лежит идея о том, что необходимо внести изменение, которое следует разделить на временные фрагменты. В ActionScript легко добиться повторения с помощью обычной инструкции повтора. Однако перед обновлением экрана цикл должен будет повториться заданное число раз. Чтобы создать анимацию на основе сценариев, необходимо создать код ActionScript, в котором определенное действие повторяется с течением времени и при каждом повторении происходит обновление экрана.

Например, представьте, что необходимо создать простую анимацию (например, запустить по экрану мяч). ActionScript включает простой механизм, позволяющий следить за ходом времени и соответствующим образом обновлять экран. Это значит, что можно составить код, который передвигает мяч каждый раз на небольшое расстояние до тех пор, пока он не достигнет пункта назначения. Экран обновляется после завершения каждого движения, позволяя зрителю увидеть перемещение мяча по рабочей области.

С практической точки зрения имеет смысл синхронизировать частоту кадров в анимации на основе сценариев и SWF-файла (иными словами, заставить анимацию меняться с каждым новым кадром), поскольку это определяет частоту обновления экрана в AIR или проигрывателе Flash Player. У каждого экранного объекта существует событие enterFrame , которое отправляется в соответствии с частотой кадров SWF-файла (по одному событию на кадр). Большинство разработчиков, создающих анимацию на основе сценариев, используют событие enterFrame в качестве средства для создания повторяющихся действий. Можно написать код, который ожидает появления события enterFrame и передвигает анимированный мяч на определенное расстояние в каждом кадре. По мере обновления экрана (в каждом кадре) этот мяч будет отрисовываться на новой позиции, что вызывает эффект движения.

В следующем примере в рабочей области создается круговой экземпляр Sprite под именем circle . Когда пользователь щелкает по кругу, начинает выполняться последовательность из анимации на основе сценария. Благодаря этому яркость circle снижается (значение свойства alpha уменьшается) до тех пор, пока он не станет совсем прозрачным:

import flash.display.Sprite; 
import flash.events.Event; 
import flash.events.MouseEvent; 
 
// draw a circle and add it to the display list 
var circle:Sprite = new Sprite(); 
circle.graphics.beginFill(0x990000); 
circle.graphics.drawCircle(50, 50, 50); 
circle.graphics.endFill(); 
addChild(circle); 
 
// When this animation starts, this function is called every frame. 
// The change made by this function (updated to the screen every 
// frame) is what causes the animation to occur. 
function fadeCircle(event:Event):void 
{ 
    circle.alpha -= .05; 
     
    if (circle.alpha <= 0) 
    { 
        circle.removeEventListener(Event.ENTER_FRAME, fadeCircle); 
    } 
} 
 
function startAnimation(event:MouseEvent):void 
{ 
    circle.addEventListener(Event.ENTER_FRAME, fadeCircle); 
} 
 
circle.addEventListener(MouseEvent.CLICK, startAnimation);

Когда пользователь щелкает круг, функция fadeCircle() регистрируется в качестве прослушивателя события enterFrame . Это означает, что она вызывается один раз за кадр. Эта функция снижает яркость circle путем изменения его свойства alpha . Один раз за кадр свойство alpha круга уменьшается на 0,05 (5 %), а экран обновляется. В итоге, когда значение alpha доходит до 0 ( circle полностью прозрачен), функция fadeCircle() , играющая роль прослушивателя событий, удаляется, и анимация завершается.

Тот же самый код можно использовать, например, для создания анимированного движения вместо ослабления яркости. Путем замены свойства alpha другим свойством в функции, которая является прослушивателем события enterFrame , это свойство будет анимировано вместо нее. Например, замена строки

    circle.alpha -= .05;

кодом

    circle.x += 5;

приведет к анимации свойства x , что приведет к перемещению круга вправо через рабочую область. Условие, завершающее анимацию, можно изменить так, чтобы она завершалась (то есть, чтобы отменить регистрацию прослушивателя enterFrame ) при достижении нужной координаты по оси x.

На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.